/* ===== 마이페이지 (마이페이지.html 템플릿 포팅) ===== */
.mp-wrap {
    --mp-bg-panel: #ffffff;
    --mp-bg-soft: #faf6ec;
    --mp-primary: #7a5c1f;
    --mp-primary-dark: #4a3712;
    --mp-accent: #c08a2c;
    --mp-border: #d8cdb2;
    --mp-border-strong: #b4a481;
    --mp-text: #2b261d;
    --mp-text-soft: #574e3f;
    --mp-text-muted: #7a7060;
    --mp-danger: #b13a2a;
    --mp-success: #2f7a3d;
    --mp-discord: #5865f2;
    --mp-radius: 14px;
    --mp-shadow-sm: 0 1px 3px rgba(74, 56, 18, 0.06);
    --mp-shadow-md: 0 6px 16px rgba(74, 56, 18, 0.08);
    word-break: keep-all;
    color: var(--mp-text);
}

.mp-breadcrumb {
    max-width: 1100px; margin: 0 auto; padding: 18px 32px 0;
    font-size: 0.85rem; color: var(--mp-text-muted);
    display: flex; align-items: center; gap: 8px;
}
.mp-breadcrumb a { color: var(--mp-text-muted); text-decoration: none; }
.mp-breadcrumb a:hover { color: var(--mp-primary-dark); }
.mp-breadcrumb .sep { color: var(--mp-border-strong); }
.mp-breadcrumb .current { color: var(--mp-text); font-weight: 700; }

.mp-main { max-width: 1100px; margin: 0 auto; padding: 20px 32px 80px; }

/* Profile header */
.mp-profile {
    display: flex; align-items: center; gap: 24px;
    background: linear-gradient(135deg, #2d2a26, #4a3f2a);
    border-radius: 20px; padding: 28px 32px; color: #fff7e2;
    box-shadow: var(--mp-shadow-md); margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.mp-profile::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(192,138,44,0.35), transparent 70%);
}
.mp-avatar {
    width: 84px; height: 84px; border-radius: 22px; flex-shrink: 0;
    background: linear-gradient(135deg, #e8c878, #b48a00);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; font-weight: 900; color: #2b1f08;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 12px rgba(0,0,0,0.25);
}
.mp-profile-meta { flex: 1; z-index: 1; }
.mp-profile-meta .nick {
    font-size: 1.8rem; font-weight: 900; letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mp-role-badge {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(232,200,120,0.22); color: #f0d99a;
    border: 1px solid rgba(232,200,120,0.4);
}
.mp-profile-meta .since {
    margin-top: 6px; font-size: 0.88rem; color: rgba(255,247,226,0.62); font-weight: 600;
}

/* Tabs */
.mp-tabs {
    display: flex; gap: 4px; border-bottom: 2px solid var(--mp-border);
    margin-bottom: 28px; flex-wrap: wrap;
}
.mp-tab {
    padding: 12px 20px; border: none; background: none; cursor: pointer;
    font-size: 0.96rem; font-weight: 700; color: var(--mp-text-muted);
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s;
    font-family: inherit;
}
.mp-tab:hover { color: var(--mp-primary-dark); }
.mp-tab.active { color: var(--mp-primary-dark); border-bottom-color: var(--mp-accent); }

/* Stat cards */
.mp-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 720px) { .mp-stat-row { grid-template-columns: 1fr; } }
.mp-stat-card {
    border-radius: var(--mp-radius); padding: 22px 24px;
    border: 1px solid var(--mp-border); background: var(--mp-bg-panel);
    box-shadow: var(--mp-shadow-sm); display: flex; align-items: center; gap: 18px;
}
.mp-stat-card.points { background: linear-gradient(135deg, #fff7e2, #f7e9c6); border-color: var(--mp-accent); }
.mp-stat-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: white;
}
.mp-stat-card.points .mp-stat-icon { background: linear-gradient(135deg, #e8c878, #b48a00); color: #2b1f08; }
.mp-stat-card.heroes .mp-stat-icon { background: linear-gradient(135deg, #6a8fc7, #2b5fa3); }
.mp-stat-card.rank .mp-stat-icon { background: linear-gradient(135deg, #e0795f, #b13a2a); }
.mp-stat-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--mp-text-muted); text-transform: uppercase; margin-bottom: 4px; }
.mp-stat-value { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-stat-value small { font-size: 0.9rem; font-weight: 700; color: var(--mp-text-muted); margin-left: 3px; }

/* Info card */
.mp-card {
    background: var(--mp-bg-panel); border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius); box-shadow: var(--mp-shadow-sm);
    margin-bottom: 20px; overflow: hidden;
}
.mp-card-head {
    padding: 18px 24px; border-bottom: 1px solid var(--mp-border);
    font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 10px;
}
.mp-card-head i { color: var(--mp-accent); }
.mp-head-note { margin-left: auto; font-size: 0.76rem; font-weight: 600; color: var(--mp-text-muted, #7a7060); }
.mp-info-row {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid #ece6d6;
}
.mp-info-row:last-child { border-bottom: none; }
.mp-ir-label {
    width: 150px; flex-shrink: 0; font-weight: 700; color: var(--mp-text-soft);
    font-size: 0.9rem; display: flex; align-items: center; gap: 9px;
}
.mp-ir-label i { color: var(--mp-text-muted); width: 16px; text-align: center; }
.mp-ir-value { flex: 1; font-weight: 700; font-size: 0.98rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-ir-value .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.mp-pill {
    font-size: 0.78rem; font-weight: 800; padding: 3px 11px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
}
.mp-pill.ok { background: #e3f1e5; color: var(--mp-success); }
.mp-pill.off { background: #f0ece0; color: var(--mp-text-muted); }
.mp-pill.discord { background: rgba(88,101,242,0.12); color: var(--mp-discord); }

.mp-btn-sm {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: 9px; cursor: pointer;
    font-weight: 700; font-size: 0.85rem; border: 1px solid var(--mp-border-strong);
    background: var(--mp-bg-soft); color: var(--mp-primary-dark); transition: all 0.15s;
    text-decoration: none;
}
.mp-btn-sm:hover { background: #f0e8d2; }

/* Quick links */
.mp-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 720px) { .mp-quick-grid { grid-template-columns: 1fr; } }
.mp-quick {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    padding: 18px 20px; border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border); background: var(--mp-bg-panel);
    box-shadow: var(--mp-shadow-sm); transition: all 0.15s; color: var(--mp-text);
}
.mp-quick:hover { transform: translateY(-2px); box-shadow: var(--mp-shadow-md); border-color: var(--mp-border-strong); }
.mp-q-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: var(--mp-primary); background: var(--mp-bg-soft);
    border: 1px solid var(--mp-border);
}
.mp-q-title { font-weight: 800; font-size: 0.98rem; }
.mp-q-sub { font-size: 0.82rem; color: var(--mp-text-muted); font-weight: 600; }
.mp-q-arrow { margin-left: auto; color: var(--mp-border-strong); }

/* mini table */
table.mp-mini { width: 100%; border-collapse: collapse; }
table.mp-mini th, table.mp-mini td { padding: 13px 24px; text-align: left; font-size: 0.9rem; }
table.mp-mini th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-text-muted); border-bottom: 1px solid var(--mp-border); }
table.mp-mini td { border-bottom: 1px solid #ece6d6; font-weight: 600; }
table.mp-mini tr:last-child td { border-bottom: none; }
table.mp-mini .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.mp-amt-plus { color: var(--mp-success); }
.mp-amt-minus { color: var(--mp-danger); }

.mp-section-cta { display: flex; justify-content: flex-end; margin-top: 16px; }

/* 포인트 내역: 일자 검색 */
.mp-point-search {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
    padding: 16px 24px; border-bottom: 1px solid #ece6d6;
}
.mp-point-search .mp-btn-sm { margin-left: 0; }
.mp-point-search .mp-btn-sm.ghost { background: transparent; border-color: var(--mp-border); color: var(--mp-text-muted); }
.mp-point-search .mp-btn-sm.ghost:hover { background: var(--mp-bg-soft); color: var(--mp-text); }
.mp-date-field { display: flex; flex-direction: column; gap: 5px; }
.mp-date-field label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: var(--mp-text-muted); }
.mp-date-field input[type="date"] {
    padding: 8px 12px; border: 1px solid var(--mp-border); border-radius: 9px;
    background: var(--mp-bg-soft); font-size: 0.86rem; font-weight: 600; color: var(--mp-text);
    font-family: inherit; outline: none; transition: all 0.15s;
}
.mp-date-field input[type="date"]:focus { border-color: var(--mp-accent); background: #fff; box-shadow: 0 0 0 3px rgba(192,138,44,0.12); }
.mp-date-sep { align-self: center; padding-bottom: 8px; color: var(--mp-text-muted); font-weight: 800; }

/* 포인트 내역: 페이지네이션 */
.mp-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 24px; border-top: 1px solid #ece6d6; }
.mp-page-btn {
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--mp-border); background: var(--mp-bg-panel); color: var(--mp-text-soft);
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.mp-page-btn:hover:not(:disabled) { border-color: var(--mp-accent); color: var(--mp-primary-dark); background: var(--mp-bg-soft); }
.mp-page-btn:disabled { opacity: 0.4; cursor: default; }
.mp-page-info { font-size: 0.88rem; font-weight: 800; color: var(--mp-text); font-variant-numeric: tabular-nums; }
.mp-page-total { font-weight: 600; color: var(--mp-text-muted); }

.mp-empty { text-align: center; padding: 48px 24px; color: var(--mp-text-muted); }
.mp-empty i { font-size: 2.2rem; color: var(--mp-border-strong); display: block; margin-bottom: 12px; }

/* ── 인벤토리 ── */
.mp-inv-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:5px; border-radius:999px; background:var(--mp-accent); color:#fff; font-size:0.68rem; font-weight:900; }
.mp-inv-list { display:flex; flex-direction:column; }
.mp-inv-item { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid #ece6d6; }
.mp-inv-item:last-child { border-bottom:none; }
.mp-inv-item.used { opacity:0.72; }
.mp-inv-ic { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; background:linear-gradient(135deg,var(--mp-accent),var(--mp-primary)); }
.mp-inv-main { flex:1; min-width:0; }
.mp-inv-name { font-size:0.98rem; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mp-inv-cat { font-size:0.7rem; font-weight:900; color:var(--mp-primary-dark); background:#fff3d0; border:1px solid var(--mp-accent); border-radius:999px; padding:2px 9px; }
.mp-inv-sub { font-size:0.78rem; font-weight:600; color:var(--mp-text-muted); margin-top:3px; }
.mp-inv-code { display:flex; align-items:center; gap:8px; margin-top:8px; background:var(--mp-bg-soft); border:1px solid var(--mp-border); border-radius:9px; padding:7px 10px; }
.mp-inv-code .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Courier New',monospace; font-size:0.8rem; font-weight:700; color:var(--mp-text-soft); }
.mp-inv-code .txt.strong { color:var(--mp-text); }
.mp-inv-copy { flex-shrink:0; border:1px solid var(--mp-border); background:#fff; color:var(--mp-primary-dark); border-radius:8px; padding:6px 11px; font-size:0.76rem; font-weight:800; display:inline-flex; align-items:center; gap:5px; }
.mp-inv-copy:hover { border-color:var(--mp-accent); }
.mp-inv-act { flex-shrink:0; }
.mp-btn-use { border:none; border-radius:10px; padding:10px 16px; font-size:0.86rem; font-weight:800; background:var(--mp-primary); color:#fff; display:inline-flex; align-items:center; gap:7px; }
.mp-btn-use:hover { background:var(--mp-primary-dark); }
.mp-inv-done { font-size:0.82rem; font-weight:800; color:var(--mp-success); display:inline-flex; align-items:center; gap:6px; }

/* 인벤토리 사용 모달 */
.mp-inv-back { position:fixed; inset:0; background:rgba(30,22,8,0.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:1300; }
.mp-inv-modal { background:#fff; border-radius:18px; width:520px; max-width:100%; max-height:calc(100vh - 60px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(30,22,8,0.28); }
.mp-inv-mhead { display:flex; align-items:center; gap:9px; padding:18px 22px; border-bottom:1px solid var(--mp-border); font-size:1.15rem; font-weight:900; }
.mp-inv-mhead h2 { margin:0; font-size:1.15rem; font-weight:900; display:flex; align-items:center; gap:9px; }
.mp-inv-mhead h2 i { color:var(--mp-accent); }
.mp-inv-x { margin-left:auto; background:transparent; border:none; font-size:1.1rem; color:var(--mp-text-muted); width:34px; height:34px; border-radius:8px; }
.mp-inv-x:hover { background:var(--mp-bg-soft); color:var(--mp-text); }
.mp-inv-mbody { padding:20px 22px; overflow-y:auto; }
.mp-inv-target { font-size:1.02rem; font-weight:900; margin-bottom:14px; }
.mp-inv-warn { background:#fdf3f0; border:1px solid #f0c9c0; border-radius:10px; padding:12px 14px; font-size:0.85rem; font-weight:700; color:var(--mp-danger); }
.mp-inv-field { margin-bottom:14px; }
.mp-inv-field label { display:block; font-size:0.78rem; font-weight:800; color:var(--mp-text-soft); margin-bottom:7px; }
.mp-inv-hint { font-weight:600; color:var(--mp-text-muted); }
.mp-inv-field select { width:100%; padding:11px 13px; border:1px solid var(--mp-border); border-radius:10px; background:var(--mp-bg-soft); font-size:0.9rem; font-weight:600; color:var(--mp-text); outline:none; }
.mp-inv-static { padding:11px 13px; border:1px solid var(--mp-border); border-radius:10px; background:var(--mp-bg-soft); font-size:0.9rem; font-weight:800; color:var(--mp-text); }
.mp-inv-ta { width:100%; padding:12px 14px; border:1px solid var(--mp-border); border-radius:10px; background:var(--mp-bg-soft); font-family:'Courier New',monospace; font-size:0.84rem; min-height:90px; resize:vertical; outline:none; color:var(--mp-text); }
.mp-inv-ta:focus, .mp-inv-field select:focus { border-color:var(--mp-accent); background:#fff; }
.mp-inv-msg { font-size:0.85rem; font-weight:700; margin-top:8px; }
.mp-inv-msg.err { color:var(--mp-danger); }
.mp-inv-msg.ok { color:var(--mp-success); }
.mp-inv-result { margin-top:14px; }
.mp-inv-result .rk { font-size:0.72rem; font-weight:900; letter-spacing:0.06em; text-transform:uppercase; color:var(--mp-text-muted); margin-bottom:6px; }
.mp-inv-mfoot { display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--mp-border); background:var(--mp-bg-soft); }
.mp-inv-mfoot .btn { border:none; border-radius:11px; padding:12px 20px; font-size:0.92rem; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.mp-inv-mfoot .btn-primary { background:var(--mp-primary); color:#fff; }
.mp-inv-mfoot .btn-primary:hover { background:var(--mp-primary-dark); }
.mp-inv-mfoot .btn-primary:disabled { opacity:0.5; cursor:default; }
.mp-inv-mfoot .btn-ghost { background:#fff; color:var(--mp-text-soft); border:1px solid var(--mp-border); }
.mp-inv-mfoot .btn-ghost:hover { background:var(--mp-bg-soft); }
.mp-inv-caution { display:flex; align-items:center; gap:8px; margin-top:6px; padding:11px 13px; border-radius:10px; background:#fbf1d8; border:1px solid #e8c878; color:#8a6410; font-size:0.83rem; font-weight:800; }
.mp-inv-caution i { color:#c08a2c; }