/* ============================================
   WarRaid – Full CSS
   ============================================ */
:root {
    --bg-dark: #1a1a2e;
    --bg-panel: #16213e;
    --bg-card: #0f3460;
    --bg-input: #1a1a3e;
    --border: #2a2a5e;
    --text: #e0e0e0;
    --text-dim: #8888aa;
    --text-bright: #ffffff;
    --accent: #e94560;
    --accent2: #533483;
    --gold: #ffd700;
    --hp: #e74c3c;
    --mp: #3498db;
    --exp: #2ecc71;
    --horde: #c41e3a;
    --alliance: #0070dd;
    /* 아이템 등급 색상 */
    --rarity-poor: #9d9d9d;
    --rarity-common: #ffffff;
    --rarity-uncommon: #1eff00;
    --rarity-rare: #0070dd;
    --rarity-epic: #a335ee;
    --rarity-legendary: #ff8000;
    --rarity-mythic: #e268a8;
    --rarity-artifact: #e6cc80;
    --rarity-heirloom: #00ccff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: #000;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}
.hidden { display: none !important; }

/* ===== 게임 진입 애니메이션 ===== */
.game-enter-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at center, #0f3460 0%, #0a0a1a 70%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.game-enter-overlay.active {
    opacity: 1;
}
.game-enter-overlay.exit {
    animation: ge-fadeout .5s ease forwards;
}
@keyframes ge-fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.game-enter-content {
    text-align: center;
    animation: ge-appear .5s ease-out;
}
@keyframes ge-appear {
    0% { opacity: 0; transform: scale(.85) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.game-enter-icon {
    font-size: 64px;
    color: var(--accent);
    margin-bottom: 16px;
    text-shadow: 0 0 40px rgba(233,69,96,.5), 0 0 80px rgba(233,69,96,.2);
    animation: ge-pulse 1.2s ease-in-out infinite;
}
@keyframes ge-pulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 40px rgba(233,69,96,.5); }
    50% { transform: scale(1.08); text-shadow: 0 0 60px rgba(233,69,96,.7), 0 0 100px rgba(233,69,96,.3); }
}
.game-enter-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 4px;
    margin-bottom: 24px;
}
.game-enter-bar {
    width: 260px;
    height: 4px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}
.game-enter-bar-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #f39c12);
    border-radius: 2px;
    animation: ge-bar .8s ease-out forwards;
}
@keyframes ge-bar {
    0% { width: 0; }
    70% { width: 85%; }
    100% { width: 100%; }
}

/* ===== 토스트 알림 ===== */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.toast-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(30,30,60,.92);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .3s, transform .3s;
    pointer-events: auto;
}
.toast-msg.toast-show {
    opacity: 1;
    transform: translateY(0);
}
.toast-success { border-color: rgba(46,204,113,.5); }
.toast-success i { color: #2ecc71; }
.toast-error { border-color: rgba(231,76,60,.5); }
.toast-error i { color: #e74c3c; }
.toast-info { border-color: rgba(52,152,219,.5); }
.toast-info i { color: #3498db; }

/* ===== 스크롤바 ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== 버튼 ===== */
button { cursor: pointer; font-family: inherit; }
.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: .2s;
}
.btn-primary:hover { background: #c73a52; }
.btn-secondary {
    background: var(--accent2);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    transition: .2s;
}
.btn-secondary:hover { opacity: .85; }
.btn-danger { background: #c0392b; color: #fff; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600; }
.btn-warning { background: #e67e22; color: #fff; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600; }
.btn-warning:hover { background: #d35400; }
.btn-link { background: none; border: none; color: var(--text-dim); text-decoration: underline; font-size: 13px; }
.btn-link:hover { color: var(--text); }
.btn-large { padding: 14px 40px; font-size: 16px; }
.btn-small { padding: 4px 10px; font-size: 12px; border-radius: 4px; }

/* ===== AUTH ===== */
.screen { width: 100%; min-height: 100vh; }
#auth-screen { display: flex; align-items: center; justify-content: center; }
.auth-box {
    background: var(--bg-panel);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    width: 380px;
    text-align: center;
}
.logo-text { font-size: 28px; margin-bottom: 24px; color: var(--gold); }
.tabs { display: flex; gap: 0; margin-bottom: 20px; }
.tab {
    flex: 1;
    padding: 10px;
    background: var(--bg-dark);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-size: 14px;
    transition: .2s;
}
.tab:first-child { border-radius: 6px 0 0 6px; }
.tab:last-child { border-radius: 0 6px 6px 0; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input {
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.error-msg { color: var(--accent); font-size: 13px; margin-top: 8px; min-height: 20px; }

/* ===== 캐릭터 선택 ===== */
#select-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
    position: relative;
    overflow: hidden;
}
#select-screen::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(ellipse at 30% 40%, rgba(233,69,96,.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 60%, rgba(83,52,131,.08) 0%, transparent 50%);
    animation: selectBg 20s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes selectBg {
    0% { transform: translate(0,0) rotate(0deg); }
    100% { transform: translate(-2%,-2%) rotate(2deg); }
}

.select-container {
    position: relative;
    z-index: 1;
    background: rgba(22,33,62,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px 36px 32px;
    border-radius: 20px;
    border: 1px solid rgba(255,215,0,.1);
    width: 520px;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0,0,0,.5);
    animation: boxFloat .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes boxFloat {
    0% { opacity: 0; transform: translateY(30px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.select-header { margin-bottom: 24px; }
.select-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    font-size: 24px;
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 6px 24px rgba(233,69,96,.3);
}
.select-header h2 {
    font-size: 22px;
    color: var(--gold);
    font-weight: 800;
    margin-bottom: 4px;
}
.select-sub { font-size: 13px; color: var(--text-dim); }

.char-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.char-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15,52,96,.5);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    animation: cardSlide .5s cubic-bezier(.16,1,.3,1) both;
}
.char-card:nth-child(1) { animation-delay: .05s; }
.char-card:nth-child(2) { animation-delay: .1s; }
.char-card:nth-child(3) { animation-delay: .15s; }
.char-card:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: 0 4px 20px rgba(233,69,96,.15); }
@keyframes cardSlide {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}
.char-card .info { text-align: left; flex: 1; }
.char-card .info .name { font-weight: 700; font-size: 16px; color: var(--text-bright); display: flex; align-items: center; gap: 8px; }
.char-card .info .name i { color: var(--accent); font-size: 14px; }
.char-card .info .meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.char-card .actions { display: flex; gap: 8px; align-items: center; }
.char-card .actions .btn-del { color: var(--text-dim); font-size: 14px; transition: color .2s; }
.char-card .actions .btn-del:hover { color: var(--accent); }
.char-card-faction { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 14px; flex-shrink: 0; }
.char-card-faction img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.char-card-faction.horde { background: rgba(220,53,69,.2); color: #e94561; }
.char-card-faction.alliance { background: rgba(0,123,255,.2); color: #4ea8ff; }
.conqueror-badge { color: #f5a623; font-weight: 600; margin-left: 4px; }
.conqueror-badge i { margin-right: 2px; }

.select-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 8px; }
.btn-create-char {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent), #d63651);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.btn-create-char::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .5s;
}
.btn-create-char:hover::before { transform: translateX(100%); }
.btn-create-char:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(233,69,96,.35); }
.btn-create-char i { margin-right: 8px; }
.btn-logout-link {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: color .2s;
}
.btn-logout-link:hover { color: var(--accent); }
.btn-logout-link i { margin-right: 4px; }

/* 관리자 페이지 버튼 */
.btn-admin-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #e0d4fc;
    border: 1px solid rgba(124,58,237,.4);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-admin-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124,58,237,.35);
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
}
.btn-admin-link i { font-size: 12px; }

/* ===== 캐릭터 생성 위저드 ===== */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.create-wizard {
    background: linear-gradient(180deg, rgba(16,22,46,.97) 0%, rgba(22,33,62,.97) 100%);
    backdrop-filter: blur(12px);
    padding: 0;
    border-radius: 20px;
    border: 1px solid rgba(255,215,0,.08);
    max-width: 560px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
    animation: wizardIn .5s cubic-bezier(.16,1,.3,1) both;
}
.create-wizard::-webkit-scrollbar { width: 6px; }
.create-wizard::-webkit-scrollbar-track { background: transparent; }
.create-wizard::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
@keyframes wizardIn {
    0% { opacity: 0; transform: scale(.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(255,215,0,.03) 0%, transparent 100%);
}
.wizard-header h3 {
    font-size: 18px;
    color: var(--gold);
    font-weight: 700;
}
.wizard-header h3 i { margin-right: 8px; color: var(--accent); }
.wizard-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.wizard-section { padding: 16px 28px; }
.wizard-section + .wizard-section { border-top: 1px solid rgba(255,255,255,.04); }
.wizard-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: .3px;
}
.wizard-label i { color: var(--accent); }
.wz-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #d63651);
    color: #fff; font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}

.name-input-wrap input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(10,14,36,.6);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    transition: border-color .3s, box-shadow .3s;
}
.name-input-wrap input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233,69,96,.15), 0 0 20px rgba(233,69,96,.08);
}
.name-input-wrap input::placeholder { color: rgba(255,255,255,.25); }

/* ===== 진영 카드 (개선) ===== */
.faction-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.faction-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.06);
    background: rgba(15,52,96,.15);
    cursor: pointer;
    transition: border-color .3s, box-shadow .3s;
    overflow: hidden;
}
.faction-card::before {
    content: '';
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.horde-card::before { background: radial-gradient(ellipse at 20% 50%, rgba(196,30,58,.15), transparent 70%); }
.alliance-card::before { background: radial-gradient(ellipse at 20% 50%, rgba(0,112,221,.15), transparent 70%); }
.faction-card input { display: none; }
.faction-card:hover { border-color: rgba(255,255,255,.15); }
.faction-card.selected::before { opacity: 1; }
.faction-card.horde-card.selected { border-color: var(--horde); box-shadow: 0 4px 20px rgba(196,30,58,.25); }
.faction-card.alliance-card.selected { border-color: var(--alliance); box-shadow: 0 4px 20px rgba(0,112,221,.25); }
.faction-emblem {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .3s, box-shadow .3s;
}
.faction-emblem img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); transition: transform .3s; }
.faction-card.selected .faction-emblem img { transform: scale(1.1); }
.horde-card .faction-emblem { background: rgba(196,30,58,.15); }
.alliance-card .faction-emblem { background: rgba(0,112,221,.15); }
.horde-card.selected .faction-emblem { background: rgba(196,30,58,.25); box-shadow: 0 0 24px rgba(196,30,58,.2); }
.alliance-card.selected .faction-emblem { background: rgba(0,112,221,.25); box-shadow: 0 0 24px rgba(0,112,221,.2); }
.faction-info { flex: 1; min-width: 0; }
.faction-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.horde-card .faction-name { color: var(--horde); }
.alliance-card .faction-name { color: var(--alliance); }
.faction-desc { font-size: 11px; color: var(--text-dim); }
.faction-check {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.1);
    color: transparent; background: transparent;
    transition: color .3s, border-color .3s, background .3s;
}
.faction-card.selected .faction-check {
    color: #fff;
    border-color: transparent;
}
.horde-card.selected .faction-check { background: var(--horde); }
.alliance-card.selected .faction-check { background: var(--alliance); }

/* ===== 종족/직업 카드 (개선) ===== */
.race-pick, .class-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }
.race-btn, .class-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 6px 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(15,52,96,.15);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    gap: 5px;
    position: relative;
    overflow: hidden;
}
.race-btn::before, .class-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(233,69,96,.1), transparent 70%);
    opacity: 0; transition: opacity .3s;
    pointer-events: none;
}
.race-btn:hover, .class-btn:hover { border-color: rgba(255,255,255,.15); transform: translateY(-2px); }
.race-btn.selected, .class-btn.selected {
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 18px rgba(233,69,96,.2);
    transform: translateY(-2px);
}
.race-btn.selected::before, .class-btn.selected::before { opacity: 1; }
.race-btn i {
    font-size: 22px;
    margin-bottom: 2px;
    opacity: .6;
    transition: opacity .3s, color .3s, filter .3s;
}
.race-btn.selected i { opacity: 1; color: var(--accent); filter: drop-shadow(0 0 8px rgba(233,69,96,.4)); }
.pick-icon-img {
    width: 36px; height: 36px; object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
    opacity: .8;
    transition: opacity .3s, filter .3s, transform .3s;
}
.class-btn.selected .pick-icon-img { opacity: 1; filter: drop-shadow(0 0 10px rgba(233,69,96,.3)); transform: scale(1.08); }
.race-btn .pick-name, .class-btn .pick-name { font-weight: 600; font-size: 12px; }
.race-btn .pick-desc, .class-btn .pick-desc { font-size: 9px; color: var(--text-dim); text-align: center; line-height: 1.3; }
.pick-trait { font-size: 8px; color: var(--gold); opacity: .6; margin-top: 2px; line-height: 1.3; text-align: center; }
.pick-trait i { font-size: 7px; margin-right: 2px; }
.race-btn.selected .pick-trait { opacity: 1; }

/* ===== 미리보기 (개선) ===== */
.wizard-preview {
    padding: 0 28px 12px;
    margin-top: 4px;
}
.preview-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.preview-label i { margin-right: 4px; font-size: 10px; }
.preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(15,52,96,.35), rgba(10,14,36,.5));
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 16px rgba(0,0,0,.2) inset;
}
.preview-faction {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.preview-faction img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.preview-faction.horde { background: rgba(196,30,58,.15); }
.preview-faction.alliance { background: rgba(0,112,221,.15); }
.preview-cls-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.preview-cls-icon img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
.preview-text { flex: 1; min-width: 0; }
.preview-name { display: block; font-weight: 700; font-size: 16px; color: var(--gold); }
.preview-info { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.preview-stats {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.pv-stat {
    font-size: 11px;
    font-weight: 600;
    color: #e74c3c;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(231,76,60,.08);
    padding: 2px 7px;
    border-radius: 6px;
}
.pv-stat i { font-size: 9px; }
.pv-stat.pv-mp { color: #3498db; background: rgba(52,152,219,.08); }
.pv-stat.pv-atk { color: #e67e22; background: rgba(230,126,34,.08); }
.pv-stat.pv-def { color: #2ecc71; background: rgba(46,204,113,.08); }

/* ===== 생성 버튼 (개선) ===== */
.wizard-actions { padding: 6px 28px 16px; }
.btn-wizard-create {
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, var(--accent), #d63651);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
    letter-spacing: .5px;
    box-shadow: 0 4px 20px rgba(233,69,96,.3);
}
.btn-wizard-create::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .5s;
}
.btn-wizard-create:hover::before { transform: translateX(100%); }
.btn-wizard-create:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(233,69,96,.4); }
.btn-wizard-create i { margin-right: 8px; }
.wizard-actions + .error-msg { padding: 0 28px 18px; }

/* 기존 modal-content 유지 (아이템 모달 등) */
.modal-content {
    background: var(--bg-panel);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}
.modal-content h3 { margin-bottom: 16px; }
.modal-content input[type="text"],
.modal-content input[type="number"] {
    width: 100%;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    margin-bottom: 12px;
}
.horde-text { color: var(--horde); font-weight: 600; }
.alliance-text { color: var(--alliance); font-weight: 600; }

/* ===== 게임 화면 ===== */
#game-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-shadow: -1px 0 0 #1a1a2e, 1px 0 0 #1a1a2e;
    background: transparent;
    position: relative;
}
#game-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 30, 0.75);
    z-index: 0;
    pointer-events: none;
}
#game-screen > * {
    position: relative;
    z-index: 1;
}

/* ── 상단 헤더 바 ── */
#top-bar {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: auto;
    background: linear-gradient(180deg, #1e2a4a 0%, #16213e 100%);
    border-bottom: 1px solid #2a3a6e;
    flex-shrink: 0;
    z-index: 10;
    position: relative;
}
.hdr-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hdr-faction-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.hdr-identity { display: flex; flex-direction: column; line-height: 1.2; }

/* 사이드바 플레이어 정보 */
.sb-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.05);
}
.sb-identity-info { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.sb-identity-info .char-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-identity-info .char-class { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 사이드바 재화 표시 */
.sb-resources {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.05);
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}
.char-name { font-weight: 800; font-size: 14px; color: var(--gold); }
.char-class { font-size: 10px; color: var(--text-dim); }
.char-level {
    background: linear-gradient(135deg, var(--accent), #d63651);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* 네비게이션 - 헤더 내 */
#main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    padding: 0 8px;
}
.nav-btn {
    padding: 0 10px;
    height: 38px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
}
.nav-btn i { font-size: 11px; opacity: .7; transition: opacity .15s; }
.nav-btn:hover {
    color: var(--text-bright);
    background: rgba(255,255,255,.03);
}
.nav-btn:hover i { opacity: 1; }
.nav-btn.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.hdr-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    position: absolute; right: 12px; top: 6px; z-index: 2;
}
.gold-display { color: var(--gold); font-weight: 700; font-size: 12px; }
.gold-display i { margin-right: 2px; }
.diamond-display { color: #00d4ff; font-weight: 700; font-size: 12px; }
.diamond-display i { margin-right: 2px; }
.soulstone-display { color: #c084fc; font-weight: 700; font-size: 12px; cursor: default; }
.soulstone-display i { margin-right: 2px; }

/* 헤더 우편함 버튼 */
.hdr-mail-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.12);
    color: #ccc;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    margin-left: 4px;
}
.hdr-mail-btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.08); }
.hdr-discord-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid rgba(114,137,218,.3);
    color: #7289da;
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    margin-left: 4px;
    text-decoration: none;
}
.hdr-discord-btn:hover { color: #fff; border-color: #7289da; background: rgba(114,137,218,.2); }
.alluser-badge {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    z-index: 9999;
    pointer-events: none;
    opacity: .85;
}
@media (max-width: 768px) {
    .alluser-badge { display: none; }
    .site-footer-info { display: none; }
}
.hdr-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    display: flex; align-items: center; justify-content: center;
}
.hdr-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 햄버거 메뉴 버튼 - 데스크탑에서 숨김 */
.hamburger-btn { display: none; }

/* 모바일 헤더 행 (햄버거 + 플레이어 정보) */
.mobile-hdr-row {
    display: none;
}
.mobile-player-info {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.mobile-name {
    font-weight: 800;
    font-size: 14px;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.mobile-level {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), #d63651);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* 모바일 네비 오버레이 */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999;
}

/* ── 2컬럼 본문 ── */
#game-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── 좌측 사이드바 ── */
#sidebar {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #141c33 0%, #111827 100%);
    border-right: 1px solid #2a3a6e;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
    gap: 8px;
}
#sidebar::-webkit-scrollbar { width: 3px; }
#sidebar::-webkit-scrollbar-thumb { background: #2a3a6e; border-radius: 2px; }

/* 리소스 바 */
.sb-bars { display: flex; flex-direction: column; gap: 4px; }
.sb-bar {
    position: relative;
    height: 20px;
    background: #1a1a2e;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
}
.sb-bar .bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.sb-bar .bar-fill.hp { background: linear-gradient(90deg, #c0392b, #e74c3c); }

/* 오라 HP 캡 블록 (막힌 부분) */
.hp-cap-block {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,.45),
        rgba(0,0,0,.45) 3px,
        rgba(80,0,0,.35) 3px,
        rgba(80,0,0,.35) 6px
    );
    border-left: 2px solid rgba(255,60,60,.5);
    pointer-events: none;
    transition: width .3s;
    z-index: 1;
}
.sb-bar .bar-fill.mp { background: linear-gradient(90deg, #2471a3, #3498db); }
.sb-bar .bar-fill.exp { background: linear-gradient(90deg, #1e8449, #2ecc71); }
.sb-bar span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* 사이드바 섹션 */
.sb-section {
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.05);
}
.sb-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    padding: 3px 0;
}
.sb-title i { font-size: 11px; width: 16px; text-align: center; }
.sb-title i.fa-heart { color: var(--hp); }
.sb-title i.fa-hand-fist { color: #f39c12; }
.sb-title i.fa-shield { color: #3498db; }
.sb-title i.fa-hat-wizard { color: #e67e22; }
.sb-combat-power .sb-val { color: #e67e22; font-size: 13px; }
.sb-val {
    margin-left: auto;
    font-weight: 800;
    color: var(--text-bright);
    font-size: 14px;
}
.sb-alloc-btn {
    margin-left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #ffd700;
    background: rgba(255,215,0,.15);
    color: #ffd700;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.sb-alloc-btn:hover:not(:disabled) {
    background: rgba(255,215,0,.35);
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(255,215,0,.4);
}
.sb-alloc-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    border-color: #555;
    color: #555;
    background: rgba(255,255,255,.03);
}
.sb-stat-points {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #ffd700;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(255,215,0,.15);
    margin-bottom: 4px;
}
.sb-stat-points strong {
    font-size: 14px;
    color: #ffd700;
}

/* 사이드바 퀘스트 */
.sb-quest-section {
    padding: 6px 8px;
}
.sb-quest-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.sb-quest-title span { display: flex; align-items: center; gap: 5px; }
.sb-quest-more-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
    padding: 0;
    line-height: 1;
}
.sb-quest-more-btn:hover { background: rgba(255,215,0,.15); }
.sb-quest-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sb-quest-item {
    background: rgba(255,255,255,.03);
    border-radius: 5px;
    padding: 5px 7px;
    border-left: 2px solid var(--text-dim);
}
.sb-quest-item.sb-q-main { border-left-color: #f59e0b; }
.sb-quest-item.sb-q-class { border-left-color: #8b5cf6; }
.sb-quest-item.sb-q-daily { border-left-color: #22c55e; }
.sb-quest-item.sb-q-weekly { border-left-color: #3b82f6; }
.sb-quest-item.sb-q-repeat { border-left-color: #6366f1; }
.sb-quest-item.sb-q-claimable { border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.sb-q-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 3px;
}
.sb-q-cat-icon { font-size: 9px; color: var(--text-dim); flex-shrink: 0; }
.sb-q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-q-progress-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-q-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: hidden;
}
.sb-q-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    transition: width .3s;
}
.sb-q-pct {
    font-size: 10px;
    color: var(--text-dim);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}
.sb-q-status { font-size: 10px; }
.sb-q-done { color: #f59e0b; font-weight: 600; }
.sb-q-done i { margin-right: 3px; }
.sb-quest-empty {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    padding: 6px 0;
}

/* 사이드바 드랍 로그 */
.sb-drop-log-section {
    padding: 6px 8px;
}
.sb-drop-log-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sb-drop-log {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sb-drop-log::-webkit-scrollbar { width: 3px; }
.sb-drop-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.sb-drop-entry {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.03);
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.sb-drop-entry .sb-drop-icon { font-size: 10px; flex-shrink: 0; }
.sb-drop-entry .sb-drop-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-drop-entry .sb-drop-time { font-size: 9px; color: var(--text-dim); flex-shrink: 0; margin-left: auto; }
.sb-drop-entry.sb-drop-legendary { background: rgba(255,128,0,.08); }
.sb-drop-entry.sb-drop-artifact { background: rgba(230,204,128,.08); }
.sb-drop-entry.sb-drop-heirloom { background: rgba(0,204,255,.08); }
.sb-drop-empty {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    padding: 8px 0;
}

/* 지역 표시 (제거됨) */

/* 사냥 컨트롤 */
.sb-hunt-ctrl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}
.btn-hunt-action {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, background .25s;
}
.btn-start {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    box-shadow: 0 4px 15px rgba(231,76,60,.3);
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231,76,60,.4); }
.btn-stop {
    position: relative;
    background: rgba(40,40,50,.85);
    color: #fff;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.btn-stop:hover { background: rgba(50,50,60,.9); }
.stop-gauge-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(231,76,60,.5), rgba(243,156,18,.5));
    transition: none;
    pointer-events: none;
}
.stop-gauge-fill.filling {
    width: 100%;
    transition: width 2.8s linear;
}
.stop-btn-content {
    position: relative;
    z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%;
}
.stop-btn-text {
    font-size: 13px; font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.stop-btn-text .hg-victory { color: #2ecc71; font-size: 12px; }
.stop-btn-text .hg-defeat { color: #e74c3c; font-size: 12px; }
.btn-hunt-sub {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(231,76,60,.3);
    border-radius: 6px;
    background: rgba(231,76,60,.08);
    color: #e74c3c;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s;
}
.btn-hunt-sub:hover { background: rgba(231,76,60,.15); }
/* hg-victory/defeat는 stop-btn-text 내부로 이동됨 */

/* ====== 던전/레이드 탐험도 ====== */
.dungeon-progress-area {
    background: linear-gradient(135deg, #1a1030 0%, #0d1b2a 100%);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.dp-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.dp-zone-label { font-size: 13px; font-weight: 600; color: var(--text); }
.dp-zone-label i { margin-right: 4px; }
.dp-type-tag {
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    margin-left: 6px; font-weight: 600;
}
.dp-type-dungeon { background: rgba(255,152,0,.2); color: #ff9800; }
.dp-type-raid { background: rgba(244,67,54,.2); color: #f44336; }
.dp-pct-text { font-size: 16px; font-weight: 700; color: #ff9800; }
.dp-bar {
    width: 100%; height: 10px; background: rgba(255,255,255,.08);
    border-radius: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
}
.dp-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, #ff9800, #ffc107);
    transition: width .5s ease;
}
.dp-fill-boss {
    background: linear-gradient(90deg, #f44336, #ff5722) !important;
    animation: dp-pulse 1s infinite;
}
@keyframes dp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}
.dp-hint {
    font-size: 11px; color: var(--text-dim);
    margin-top: 5px; text-align: center;
}
.dp-hint-boss {
    color: #f44336 !important; font-weight: 700;
    animation: dp-pulse 1.2s infinite;
}

/* 전투 로그 - 탐험도 */
.log-dp-progress {
    font-size: 11px; margin-top: 3px;
    padding: 2px 0;
}
.log-key-drop {
    font-size: 12px; margin-top: 4px; padding: 3px 8px;
    color: #ff8000; font-weight: 700;
    background: rgba(255,128,0,.1); border-radius: 4px;
    display: inline-block;
    animation: keyGlow 1.5s ease-in-out infinite alternate;
}
@keyframes keyGlow { from { text-shadow: 0 0 4px rgba(255,128,0,.4); } to { text-shadow: 0 0 10px rgba(255,128,0,.8); } }

/* 던전 클리어 로그 */
.log-dungeon-clear {
    background: linear-gradient(135deg, rgba(46,204,113,.15), rgba(39,174,96,.1)) !important;
    border-color: #2ecc71 !important;
    text-align: center; padding: 10px;
}
.log-dc-banner {
    font-size: 15px; font-weight: 700; color: #f1c40f;
}
.log-dc-banner i { margin-right: 4px; }
.log-dc-banner small { font-size: 12px; color: #2ecc71; font-weight: 400; margin-left: 6px; }
.log-dc-sub {
    font-size: 11px; color: var(--text-dim); margin-top: 4px;
}

/* ====== 서버 알림 배너 (강화 +15, 유물 드랍) ====== */
#server-announce-area {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 4px;
}
.server-announce {
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    animation: saSlideIn 0.4s ease-out;
    position: relative;
    overflow: hidden;
}
.server-announce::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    animation: saShimmer 2s infinite;
}
@keyframes saSlideIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes saShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.sa-fade-out {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.5s, transform 0.5s;
}

/* 강화 +15 */
.sa-type-enhance15 {
    background: linear-gradient(135deg, rgba(241,196,15,0.18), rgba(243,156,18,0.10));
    border: 1px solid rgba(241,196,15,0.5);
    box-shadow: 0 0 12px rgba(241,196,15,0.15);
}
.sa-type-enhance15 .sa-label {
    color: #f1c40f; font-weight: 700;
}
.sa-type-enhance15 .sa-banner i {
    color: #f39c12;
}

/* 유물 드랍 */
.sa-type-artifact_drop {
    background: linear-gradient(135deg, rgba(155,89,182,0.18), rgba(142,68,173,0.10));
    border: 1px solid rgba(155,89,182,0.5);
    box-shadow: 0 0 12px rgba(155,89,182,0.15);
}
.sa-type-artifact_drop .sa-label {
    color: #9b59b6; font-weight: 700;
}
.sa-type-artifact_drop .sa-banner i {
    color: #8e44ad;
}

/* 공통 배너 텍스트 */
.sa-banner {
    font-size: 15px; font-weight: 600; color: #eee;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    position: relative; z-index: 1;
}
.sa-banner i {
    font-size: 16px; margin-right: 2px;
}
.sa-item-icon {
    width: 20px; height: 20px; vertical-align: middle; border-radius: 3px;
    margin: 0 2px;
}
.sa-detail {
    font-weight: 700;
}
.sa-sub {
    font-size: 11px; color: var(--text-dim); margin-top: 3px;
    position: relative; z-index: 1;
}
.sa-char {
    color: #3498db; font-weight: 600;
}

/* 부활 배너 */
.resurrect-banner {
    background: linear-gradient(135deg, #4a1a1a, #2a0a0a);
    border: 1px solid #ff4444;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    animation: pulse-red 2s ease-in-out infinite;
}
.resurrect-banner i.fa-skull {
    margin-right: 6px;
    font-size: 16px;
}
.btn-resurrect {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, #cc9933, #aa7722);
    border: 1px solid #ddaa44;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .2s;
}
.btn-resurrect:hover {
    background: linear-gradient(135deg, #ddaa44, #bb8833);
    box-shadow: 0 0 12px rgba(204,153,51,.5);
    transform: translateY(-1px);
}
.btn-free-res {
    background: linear-gradient(135deg, #339966, #227744) !important;
    border-color: #44bb77 !important;
}
.btn-free-res:hover:not(:disabled) {
    background: linear-gradient(135deg, #44bb77, #338855) !important;
    box-shadow: 0 0 12px rgba(68,187,119,.5) !important;
}
.btn-free-res:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.4);
}
.res-hint {
    margin-top: 10px;
    padding: 8px;
    color: #ffcc66;
    font-size: 13px;
    font-weight: 600;
}
.res-hint i { margin-right: 4px; }
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 5px rgba(255,68,68,.3); }
    50% { box-shadow: 0 0 15px rgba(255,68,68,.6); }
}

/* ── 우측 메인 영역 ── */
#main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* 패널 */
#panels {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #111827;
}
.panel { max-width: 100%; }
.panel h3 {
    margin-bottom: 14px;
    font-size: 17px;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel h3 i { color: var(--accent); font-size: 15px; }

/* ── 사냥 패널 ── */
.battle-log { display: flex; flex-direction: column; gap: 4px; }
.log-entry {
    padding: 8px 12px;
    background: rgba(15,52,96,.3);
    border-radius: 6px;
    border-left: 3px solid var(--border);
    font-size: 12px;
    line-height: 1.45;
    transition: transform .15s;
}
.log-entry:first-child { animation: logSlide .3s ease-out; }
@keyframes logSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.log-entry.victory { border-left-color: var(--exp); }
.log-entry.defeat { border-left-color: var(--hp); }
.log-entry .log-header { display: flex; justify-content: space-between; align-items: center; }
.log-entry .log-monster { font-weight: 600; font-size: 13px; }
.log-entry .log-result { font-weight: 600; color: #2ecc71; font-size: 11px; }
.log-entry .log-result-lose { color: #e74c3c; }
.log-entry .log-rewards { color: var(--gold); font-size: 11px; margin-top: 2px; }
.log-entry .log-drop { font-size: 11px; color: var(--rarity-rare); margin-top: 1px; }
.log-mlvl { color: var(--text-dim); font-weight: 400; }
.mob-boss { background: #e74c3c; color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-right: 3px; font-weight: 700; }
.mob-elite { background: #e67e22; color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-right: 3px; font-weight: 600; }

.log-soulstone { font-size: 11px; color: #00ccff; font-weight: 700; }

/* ── 컴팩트 요약 라인 (기존 로그) ── */
.log-compact-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    font-size: 11px; color: var(--text-dim); margin: 2px 0 1px;
}
.log-sep { opacity: .3; margin: 0 2px; }
/* ── 라운드 상세 (기존 로그) ── */
.log-rounds { margin: 3px 0 2px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.05); }
.log-round-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; font-size: 10px; line-height: 1.5; }
.log-rd-num { flex-shrink: 0; color: rgba(255,255,255,.25); font-weight: 600; font-size: 9px; min-width: 20px; text-align: right; }
.log-rd-events { display: flex; flex-wrap: wrap; gap: 2px; }
.ev { display: inline-flex; align-items: center; gap: 1px; padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 500; line-height: 1.6; }
.ev-phit { background: rgba(46,204,113,.1); color: #2ecc71; }
.ev-pcrit { background: rgba(241,196,15,.15); color: #f1c40f; font-weight: 700; }
.ev-mhit { background: rgba(231,76,60,.1); color: #e74c3c; }
.ev-mcrit { background: rgba(231,76,60,.2); color: #ff6b6b; font-weight: 700; }
.ev-miss { background: rgba(149,165,166,.1); color: #7f8c8d; font-style: italic; }
.ev-dodge { background: rgba(52,152,219,.1); color: #3498db; }
.ev-parry { background: rgba(52,152,219,.14); color: #5dade2; }
.ev-thorns { background: rgba(155,89,182,.12); color: #bb86fc; }
.ev-leech { background: rgba(46,204,113,.12); color: #2ecc71; }
.ev-kill { background: rgba(46,204,113,.15); color: #2ecc71; font-weight: 700; }
.ev-death { background: rgba(231,76,60,.15); color: #e74c3c; font-weight: 700; }

/* ── 텍스트 게임 서사 로그 ── */
.log-narrative { margin: 4px 0 2px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; line-height: 1.65; }
.log-turn { margin-bottom: 2px; }
.log-turn-num { color: rgba(255,255,255,.35); font-weight: 700; font-size: 10px; margin-right: 4px; }
.log-turn-line { padding-left: 4px; }
.lt-hit { color: #2ecc71; }
.lt-hit b { color: #5dff8a; }
.lt-crit { color: #f1c40f; font-weight: 600; }
.lt-crit b { color: #ffe066; }
.lt-mhit { color: #e74c3c; }
.lt-mhit b { color: #ff8a80; }
.lt-mcrit { color: #ff6b6b; font-weight: 600; }
.lt-mcrit b { color: #ff9e9e; }
.lt-miss { color: #7f8c8d; font-style: italic; }
.lt-dodge { color: #3498db; }
.lt-parry { color: #5dade2; }
.lt-thorns { color: #bb86fc; }
.lt-thorns b { color: #d4b0ff; }
.lt-leech { color: #2ecc71; }
.lt-leech b { color: #5dff8a; }
.lt-kill { color: #2ecc71; font-weight: 700; }
.lt-death { color: #e74c3c; font-weight: 700; }
.lt-info { color: #ff9800; font-weight: 600; font-size: 10px; margin-bottom: 2px; }

/* ── 로그 스타일 토글 버튼 ── */
.chat-log-style-wrap { display: flex; gap: 4px; }
.log-style-btn { padding: 4px 12px; font-size: 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-dim); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.log-style-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.log-style-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); }

/* ── 세트 아이템 태그 ── */
.set-tag { color: #00e676; font-weight: 700; font-size: 0.9em; }
.miracle-set-tag { color: #ff6ec7 !important; }
.miracle-set-section { border-color: #ff6ec7 !important; }
.miracle-set-section .idm-set-header { border-bottom-color: rgba(255,110,199,.3) !important; }

/* ── 공통 모달 오버레이 ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
}

/* ── 레이드 열쇠 모달 ── */
.raid-key-modal { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; max-width: 400px; width: 90%; }
.rkm-header { font-size: 16px; font-weight: 700; color: #ff8000; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.rkm-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
.rkm-list { display: flex; flex-direction: column; gap: 6px; }
.rkm-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s; }
.rkm-item:hover:not(.rkm-disabled) { background: rgba(255,255,255,.08); border-color: #ff800055; }
.rkm-disabled { opacity: .4; cursor: not-allowed; }
.rkm-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.rkm-count { font-size: 11px; flex-shrink: 0; }
.rkm-restore { font-size: 11px; color: #4caf50; font-weight: 600; flex-shrink: 0; }
.rkm-nouse { font-size: 10px; color: #666; flex-shrink: 0; }

/* ── 스크롤 대상 선택 모달 ── */
.scroll-target-modal { background: var(--panel-bg); border-radius: 12px; padding: 16px; max-width: 360px; width: 90%; max-height: 70vh; overflow-y: auto; }
.scroll-target-modal h4 { margin: 0 0 12px; font-size: 15px; color: var(--text); }
.scroll-target-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.scroll-target-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,.04); border-radius: 8px; cursor: pointer; transition: background .15s; }
.scroll-target-item:hover { background: rgba(255,255,255,.1); }
.scroll-target-item.scroll-target-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.scroll-t-icon { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; }
.scroll-t-info { flex: 1; min-width: 0; font-size: 13px; }
.scroll-t-ench { font-size: 11px; color: #bb86fc; margin-top: 2px; }
.scroll-t-gems { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.scroll-t-gem { font-size: 10px; color: #e91e63; }
.scroll-t-cancel { margin-top: 4px; }

/* ── 하단 채팅 독 ── */
#chat-dock {
    border-top: 1px solid #2a3a6e;
    background: linear-gradient(180deg, #141c33 0%, #111827 100%);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
#chat-dock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
}
#chat-dock-header i { margin-right: 6px; color: var(--accent); }
.chat-toggle-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    transition: transform .3s;
}
#chat-dock.collapsed .chat-toggle-btn { transform: rotate(180deg); }
#chat-dock-body { display: flex; flex-direction: column; }
#chat-dock.collapsed #chat-dock-body { display: none; }

.site-footer-info {
    font-size: 11px; color: var(--text-dim); text-align: center;
    padding: 6px 12px; line-height: 1.6;
    border-top: 1px solid var(--border); background: #000;
}
.site-footer-info a { color: var(--text-dim); text-decoration: underline; }
.site-footer-info a:hover { color: var(--text); }

.chat-messages {
    height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    font-size: 12px;
    contain: content;
    will-change: scroll-position;
}
.chat-msg { line-height: 1.4; }
.chat-msg .cm-name { font-weight: 600; }
.chat-msg .cm-name.horde { color: var(--horde); }
.chat-msg .cm-name.alliance { color: var(--alliance); }
.chat-msg .cm-time { font-size: 10px; color: var(--text-dim); margin-right: 4px; }
.chat-msg .cm-title { color: #ffd700; font-size: 11px; margin-left: 1px; }
.chat-msg.chat-system { color: #ffcc00; font-style: italic; }
.chat-msg .cm-system-label { color: #ffcc00; font-weight: 700; }

/* ───── 닉네임 프레임 배지 ───── */
.nick-frame {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 2px;
    vertical-align: baseline;
    line-height: 1.4;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255,255,255,.15);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.nick-frame[data-frame="랭커"]  { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #f0e0ff; border-color: #a855f766; box-shadow: 0 0 6px #a855f744; }
.nick-frame[data-frame="VIP"]   { background: linear-gradient(135deg, #b45309, #f59e0b); color: #fffbe6; border-color: #fbbf2466; box-shadow: 0 0 6px #fbbf2444; }
.nick-frame[data-frame="챔피언"] { background: linear-gradient(135deg, #be123c, #f43f5e); color: #ffe0e8; border-color: #f43f5e66; box-shadow: 0 0 6px #f43f5e44; }
.nick-frame[data-frame="수호자"] { background: linear-gradient(135deg, #0369a1, #38bdf8); color: #e0f4ff; border-color: #38bdf866; box-shadow: 0 0 6px #38bdf844; }
.nick-frame[data-frame="전설"]  { background: linear-gradient(135deg, #c2410c, #ff6b35); color: #fff0e0; border-color: #ff6b3566; box-shadow: 0 0 8px #ff6b3555; animation: frame-glow-legend 2s ease-in-out infinite alternate; }
.nick-frame[data-frame="황제"]  { background: linear-gradient(135deg, #92400e, #fbbf24, #fde68a); color: #422006; border-color: #fbbf2488; box-shadow: 0 0 10px #fbbf2466; animation: frame-glow-emperor 2s ease-in-out infinite alternate; }
@keyframes frame-glow-legend { from { box-shadow: 0 0 6px #ff6b3544; } to { box-shadow: 0 0 12px #ff6b3588; } }
@keyframes frame-glow-emperor { from { box-shadow: 0 0 8px #fbbf2444; } to { box-shadow: 0 0 16px #fbbf2488; } }

/* ───── 닉네임 아이콘 (접두사) ───── */
.nick-icon {
    font-size: 12px;
    margin-right: 1px;
    vertical-align: baseline;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.3));
}

/* 닉네임 애니메이션 효과 (신비학자 제작) */
.nick-anim-flame { text-shadow: 0 0 4px #ff6600, 0 0 8px #ff330066; animation: nick-flame 1.5s ease-in-out infinite alternate; will-change: text-shadow; }
@keyframes nick-flame { from { text-shadow: 0 0 4px #ff6600, 0 0 8px #ff330066; } to { text-shadow: 0 0 8px #ff8800, 0 0 16px #ff440088; } }

.nick-anim-frost { text-shadow: 0 0 4px #66ccff, 0 0 8px #3399ff66; animation: nick-frost 2s ease-in-out infinite alternate; will-change: text-shadow; }
@keyframes nick-frost { from { text-shadow: 0 0 4px #66ccff, 0 0 8px #3399ff66; } to { text-shadow: 0 0 8px #aaddff, 0 0 16px #66bbff88; } }

.nick-anim-shadow { text-shadow: 0 0 4px #9933cc, 0 0 8px #66009966; animation: nick-shadow 2s ease-in-out infinite alternate; will-change: text-shadow; }
@keyframes nick-shadow { from { text-shadow: 0 0 4px #9933cc, 0 0 8px #66009966; } to { text-shadow: 0 0 8px #cc66ff, 0 0 16px #9933cc88; } }

.nick-anim-rainbow { animation: nick-rainbow 3s linear infinite; will-change: color, text-shadow; }
@keyframes nick-rainbow {
    0%   { color: #ff0000; text-shadow: 0 0 6px #ff000066; }
    16%  { color: #ff8800; text-shadow: 0 0 6px #ff880066; }
    33%  { color: #ffff00; text-shadow: 0 0 6px #ffff0066; }
    50%  { color: #00ff00; text-shadow: 0 0 6px #00ff0066; }
    66%  { color: #0088ff; text-shadow: 0 0 6px #0088ff66; }
    83%  { color: #8800ff; text-shadow: 0 0 6px #8800ff66; }
    100% { color: #ff0000; text-shadow: 0 0 6px #ff000066; }
}

.nick-anim-starlight { text-shadow: 0 0 4px #ffddff, 0 0 8px #ffaaff66; animation: nick-starlight 2s ease-in-out infinite; will-change: text-shadow, opacity; }
@keyframes nick-starlight {
    0%, 100% { text-shadow: 0 0 4px #ffddff, 0 0 8px #ffaaff44; opacity: 1; }
    50% { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffaaff88; opacity: 0.9; }
}
.chat-input-row {
    display: flex;
    gap: 0;
    padding: 0 12px 10px;
}
.chat-input-row input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(26,26,62,.7);
    border: 1px solid var(--border);
    border-radius: 6px 0 0 6px;
    color: var(--text);
    font-size: 12px;
}
.chat-input-row input:focus { outline: none; border-color: var(--accent); }
.btn-chat-send {
    padding: 8px 14px;
    background: var(--accent);
    border: none;
    border-radius: 0 6px 6px 0;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: background .2s;
}
.btn-chat-send:hover { background: #c73a52; }

.btn-chat-settings {
    padding: 8px 10px;
    background: rgba(26,26,62,.7);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    transition: color .2s, background .2s;
}
.btn-chat-settings:hover { color: var(--accent); background: rgba(26,26,62,.9); }
.btn-chat-discord {
    padding: 8px 10px;
    background: rgba(26,26,62,.7);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: #7289da;
    cursor: pointer;
    font-size: 13px;
    transition: color .2s, background .2s;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.btn-chat-discord:hover { color: #fff; background: rgba(114,137,218,.2); }
.btn-chat-send { border-radius: 0; }

/* 채팅 설정 모달 */
.chat-settings-modal { max-width: 380px; padding: 0; }

/* 드롭 필터 모달 */
.drop-filter-modal { max-width: 360px; padding: 0; }
.drop-filter-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.drop-filter-header h3 { margin: 0; font-size: 15px; }
.drop-filter-desc { font-size: 11px; color: var(--text-dim); padding: 10px 18px 0; margin: 0; }
.drop-filter-options { padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.drop-filter-option {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s;
    border: 1px solid transparent;
}
.drop-filter-option:hover { background: rgba(52,152,219,.08); }
.drop-filter-option.active { background: rgba(52,152,219,.12); border-color: var(--accent); }
.drop-filter-option input[type="radio"] { accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.dfopt-label { font-size: 13px; font-weight: 600; min-width: 52px; }
.dfopt-desc { font-size: 11px; color: var(--text-dim); }
.chat-settings-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.chat-settings-header h3 { margin: 0; font-size: 15px; }
.chat-settings-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.chat-setting-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
}
.chat-setting-label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: #444; border-radius: 11px; transition: .3s;
}
.toggle-slider:before {
    content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: .3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

.chat-title-select-wrap { display: flex; gap: 6px; align-items: center; }
.chat-title-select {
    padding: 5px 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border);
    color: var(--text); font-size: 12px; max-width: 140px;
}

/* 닉네임 꾸미기 섹션 */
.chat-deco-section { border-top: 1px solid var(--border); padding-top: 12px; }
.chat-deco-section-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--accent); }
.chat-deco-preview-box {
    background: rgba(0,0,0,.25); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
    border: 1px solid var(--border);
}
.chat-deco-preview-label { font-size: 10px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.chat-deco-preview-chat { font-size: 13px; }
.chat-deco-list { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.chat-deco-list::-webkit-scrollbar { width: 4px; }
.chat-deco-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.chat-deco-empty { font-size: 12px; color: var(--text-dim); text-align: center; padding: 16px 0; }
.chat-deco-loading { font-size: 12px; color: var(--text-dim); text-align: center; padding: 12px 0; }
.chat-deco-group { }
.chat-deco-group-title { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.chat-deco-group-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chat-deco-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 60px; height: 58px; border-radius: 6px; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid var(--border);
    transition: border-color .15s, background .15s, box-shadow .15s; gap: 3px; position: relative;
}
.chat-deco-item:hover { border-color: var(--accent); background: rgba(233,69,96,.08); }
.chat-deco-item.active { border-color: var(--accent); background: rgba(233,69,96,.15); box-shadow: 0 0 6px rgba(233,69,96,.3); }
.chat-deco-item.active::after {
    content: '✓'; position: absolute; top: 2px; right: 4px;
    font-size: 9px; color: var(--accent); font-weight: 700;
}
.chat-deco-item-preview { font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.chat-deco-item-name { font-size: 9px; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; }
.chat-deco-src { position: absolute; top: 2px; left: 3px; font-size: 8px; line-height: 1; opacity: .6; }
.chat-deco-src.cash { color: #e94560; }
.chat-deco-src.inv { color: #66ccff; }



/* ===== 장비 패널 ===== */
.equip-panel-wrapper {
    background: linear-gradient(135deg, rgba(15,52,96,.6) 0%, rgba(22,33,62,.8) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 16px;
    position: relative;
    overflow: hidden;
}
.equip-panel-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(233,69,96,.04) 0%, transparent 70%);
    pointer-events: none;
}
.equip-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.equip-col { display: flex; flex-direction: column; gap: 6px; }
.equip-left, .equip-right { flex: 0 0 auto; }
.equip-center { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 캐릭터 실루엣 */
.equip-char-model {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
}
.char-silhouette {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233,69,96,.15), rgba(83,52,131,.15));
    border: 2px solid rgba(233,69,96,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 0 20px rgba(233,69,96,.1);
    overflow: hidden;
    position: relative;
    transition: border-color .4s, box-shadow .4s, background .4s;
}

/* === 정복자 초월 프레임 === */
/* Lv.60 정복자 기본 - 은은한 골드 테두리 */
.char-silhouette.conq-frame-0 {
    border: 2px solid rgba(255,215,0,.4);
    box-shadow: 0 0 12px rgba(255,215,0,.15);
}
/* Lv.61 초월 1단계 - 빛나는 골드 */
.char-silhouette.conq-frame-1 {
    border: 3px solid rgba(255,200,0,.7);
    box-shadow: 0 0 18px rgba(255,200,0,.3), 0 0 40px rgba(255,165,0,.1);
    background: radial-gradient(circle, rgba(255,215,0,.08), rgba(83,52,131,.15));
}
/* Lv.62 초월 2단계 - 주황빛 불꽃 */
.char-silhouette.conq-frame-2 {
    border: 3px solid rgba(255,140,0,.85);
    box-shadow: 0 0 20px rgba(255,140,0,.4), 0 0 50px rgba(255,80,0,.15), inset 0 0 15px rgba(255,140,0,.08);
    background: radial-gradient(circle, rgba(255,160,0,.1), rgba(120,40,0,.15));
    animation: conq-pulse-2 3s ease-in-out infinite;
    will-change: box-shadow;
}
@keyframes conq-pulse-2 {
    0%, 100% { box-shadow: 0 0 20px rgba(255,140,0,.4), 0 0 50px rgba(255,80,0,.15); }
    50% { box-shadow: 0 0 28px rgba(255,140,0,.55), 0 0 60px rgba(255,80,0,.25); }
}
/* Lv.63 초월 3단계 - 붉은 화염 + 회전 그로우 */
.char-silhouette.conq-frame-3 {
    border: 3px solid transparent;
    background: radial-gradient(circle, rgba(255,60,0,.12), rgba(150,20,60,.2));
    box-shadow: 0 0 25px rgba(255,60,0,.5), 0 0 60px rgba(200,0,80,.2), inset 0 0 20px rgba(255,80,0,.1);
    animation: conq-pulse-3 2.5s ease-in-out infinite;
    will-change: box-shadow;
}
.char-silhouette.conq-frame-3::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #ff4500, #ff8c00, #ffd700, #ff4500);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: conq-rotate 4s linear infinite;
    z-index: 1;
}
@keyframes conq-pulse-3 {
    0%, 100% { box-shadow: 0 0 25px rgba(255,60,0,.5), 0 0 60px rgba(200,0,80,.2); }
    50% { box-shadow: 0 0 35px rgba(255,60,0,.7), 0 0 80px rgba(200,0,80,.35); }
}
@keyframes conq-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Lv.64+ 초월 4단계 - 보라+금 불사조 오라 + 이중 회전 */
.char-silhouette.conq-frame-4 {
    border: 3px solid transparent;
    background: radial-gradient(circle, rgba(168,85,247,.15), rgba(255,60,0,.1), rgba(83,52,131,.2));
    box-shadow: 0 0 30px rgba(168,85,247,.5), 0 0 70px rgba(255,100,0,.25), inset 0 0 25px rgba(168,85,247,.12);
    animation: conq-pulse-4 2s ease-in-out infinite;
    will-change: box-shadow;
}
.char-silhouette.conq-frame-4::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #a855f7, #ff4500, #ffd700, #a855f7, #ff4500, #ffd700, #a855f7);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: conq-rotate 3s linear infinite;
    z-index: 1;
}
.char-silhouette.conq-frame-4::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 180deg, rgba(168,85,247,.6), transparent 30%, rgba(255,215,0,.6), transparent 60%, rgba(168,85,247,.6));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: conq-rotate 6s linear infinite reverse;
    z-index: 0;
}
@keyframes conq-pulse-4 {
    0%, 100% { box-shadow: 0 0 30px rgba(168,85,247,.5), 0 0 70px rgba(255,100,0,.25); }
    50% { box-shadow: 0 0 40px rgba(168,85,247,.7), 0 0 90px rgba(255,100,0,.4); }
}
.char-silhouette img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(233,69,96,.3));
    transition: transform .3s;
}
.char-silhouette:hover img {
    transform: scale(1.1);
}
.equip-stat-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    font-size: 11px;
    min-width: 140px;
}
.es-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 1px 0;
}
.es-label { color: var(--text-dim); }
.es-val { color: #1eff00; font-weight: 600; }
.es-corruption { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.06); grid-column: 1 / -1; }

/* 무기 슬롯 */
.equip-weapons { display: flex; gap: 6px; }
.equip-extra { display: flex; gap: 6px; }

/* 장비 슬롯 - 새 디자인 */
.equip-slot {
    width: 170px;
    min-height: 48px;
    background: rgba(15,20,40,.7);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}
.equip-slot:hover {
    border-color: var(--accent);
    background: rgba(233,69,96,.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.equip-slot.equipped {
    background: rgba(15,30,60,.85);
    box-shadow: inset 0 0 8px rgba(0,0,0,.3);
}
.equip-slot.empty { opacity: .6; }
.equip-slot.empty:hover { opacity: .85; }
.equip-slot-sm { width: 82px; min-height: 40px; }

/* 슬롯 아이콘 */
.slot-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.slot-icon-wrap .item-icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 5px;
}
.slot-icon-empty {
    font-size: 16px;
    color: rgba(255,255,255,.12);
}

/* 슬롯 텍스트 */
.slot-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.equip-slot .slot-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-dim);
    line-height: 1;
}
.equip-slot .slot-item {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equip-slot .slot-stats {
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equip-slot .slot-gems {
    display: flex;
    gap: 3px;
    margin-top: 1px;
}
.equip-slot .gem-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,255,136,.3);
}
.slot-empty-text {
    font-size: 11px;
    color: rgba(255,255,255,.2);
    font-style: italic;
}

/* 장비 배지 (강화/벼림) */
.slot-badges {
    position: absolute;
    top: 3px;
    right: 5px;
    display: flex;
    gap: 3px;
}
.eq-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.3;
}
.eq-badge-enh {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.eq-badge-forge {
    background: linear-gradient(135deg, var(--gold), #e6ac00);
    color: #000;
}
.auc-qty-badge {
    font-size: 10px;
    color: var(--text-dim);
    margin-left: 4px;
}
.eq-badge-ench {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* 접두사 태그 */
.prefix-tag { font-weight: 700; text-shadow: 0 0 6px currentColor; }
.idm-prefix-info { font-size: 13px; }
.corruption-meter { margin-top: 16px; padding: 10px; background: var(--bg-card); border-radius: 6px; font-size: 13px; }
.corruption-meter .high { color: #e74c3c; }

/* 타락 게이지 */
.corrupt-gauge-wrap { background: var(--bg-card); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid rgba(142,68,173,0.3); }
.corrupt-gauge-label { font-size: 13px; color: #ccc; margin-bottom: 6px; }
.corrupt-gauge-label strong { color: #c084fc; font-size: 16px; }
.corrupt-gauge-bar { position: relative; height: 10px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: visible; margin-bottom: 8px; }
.corrupt-gauge-fill { height: 100%; background: linear-gradient(90deg, #8e44ad, #e74c3c); border-radius: 5px; transition: width .5s; max-width: 100%; }
.corrupt-gauge-mark { position: absolute; top: -2px; transform: translateX(-50%); font-size: 9px; color: #888; height: 14px; border-left: 1px solid #555; padding-left: 3px; }
.corrupt-tier-list { display: flex; flex-wrap: wrap; gap: 6px; }
.corrupt-tier-item { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); color: #666; transition: background .3s, color .3s; }
.corrupt-tier-item.active { background: rgba(231,76,60,0.2); color: #e74c3c; font-weight: 600; }
.corrupt-tier-item i { margin-right: 3px; }

/* 타락 경로 선택 카드 */
.corrupt-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .corrupt-path-grid { grid-template-columns: 1fr; } }
.corrupt-path-card { background: rgba(0,0,0,0.3); border: 2px solid #444; border-radius: 10px; padding: 14px 10px; text-align: center; cursor: pointer; transition: transform .3s, box-shadow .3s, border-color .3s; }
.corrupt-path-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-color: currentColor; }
.corrupt-path-icon { font-size: 28px; margin-bottom: 6px; }
.corrupt-path-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.corrupt-path-desc { font-size: 11px; color: #aaa; margin-bottom: 8px; line-height: 1.4; }
.corrupt-path-preview { font-size: 11px; margin-bottom: 10px; line-height: 1.6; }
.btn-corrupt-select { width: 100%; padding: 8px; border: none; border-radius: 6px; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; transition: opacity .2s; }
.btn-corrupt-select:hover { opacity: 0.85; }

/* ===== 포션 슬롯 ===== */
.potion-slot-area { margin: 12px 0; }
.potion-slot-header h4 { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.potion-slot-header h4 i { color: #e74c3c; }
.potion-slot {
    background: rgba(15,20,40,.7);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    min-height: 52px;
}
.potion-slot-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 13px;
}
.potion-slot-empty > i {
    font-size: 24px;
    color: rgba(231,76,60,.3);
}
.potion-slot-depleted {
    color: var(--hp);
}
.potion-slot-filled {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pot-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(231,76,60,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pot-icon-img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.pot-info { flex: 1; min-width: 0; }
.pot-name { font-weight: 600; font-size: 13px; color: var(--text-bright); }
.pot-effects { font-size: 11px; display: flex; gap: 8px; margin-top: 1px; }
.pot-hp { color: var(--hp); }
.pot-mp { color: var(--mp); }
.pot-qty { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.pot-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-tiny { padding: 3px 6px !important; min-width: 0 !important; }

/* 포션 목록 */
.potion-list-area {
    margin-top: 8px;
    background: rgba(15,20,40,.85);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}
.potion-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.potion-list { display: flex; flex-direction: column; gap: 6px; }
.pot-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(15,30,60,.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: .2s;
}
.pot-list-item:hover { border-color: var(--accent); }
.pot-list-active { border-color: var(--exp) !important; background: rgba(46,204,113,.08); }
.pot-list-icon { flex-shrink: 0; }
.pot-list-img { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.pot-list-info { flex: 1; min-width: 0; }
.pot-list-name { font-size: 12px; font-weight: 600; color: var(--text); }
.pot-list-qty { font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.pot-list-eff { font-size: 10px; color: #1eff00; }
.btn-pot-select { flex-shrink: 0; }

/* ===== 인벤토리 ===== */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.inv-item {
    background: var(--bg-card);
    padding: 10px;
    border-radius: 6px;
    border-left: 3px solid var(--border);
    cursor: pointer;
    font-size: 13px;
    transition: .2s;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.inv-item:hover { border-left-color: var(--accent); }
.inv-check-wrap { display: flex; align-items: center; padding-top: 2px; cursor: pointer; flex-shrink: 0; }
.inv-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.inv-item .inv-row { display: flex; gap: 8px; flex: 1; min-width: 0; }
.inv-item .item-name { font-weight: 600; }
.inv-item .item-meta { font-size: 11px; color: var(--text-dim); }

/* ===== 퀘스트 ===== */
.quest-summary { margin-bottom: 8px; }
.qs-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.qs-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
    background: rgba(255,255,255,.06); color: var(--text-dim);
}
.qs-tag i { font-size: 10px; }
.qs-tag.qs-claim { background: rgba(76,175,80,.15); color: #4caf50; }
.qs-tag.qs-accept { background: rgba(255,183,77,.15); color: #ffb74d; }

.quest-tabs, .enhance-tabs, .companion-tabs, .rank-tabs { display: flex; gap: 0; margin-bottom: 14px; flex-wrap: wrap; }
.qtab, .etab, .ctab, .rtab {
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    transition: background .15s, color .15s;
    position: relative;
}
.qtab i, .etab i, .ctab i, .rtab i { margin-right: 2px; }
.qtab:first-child, .etab:first-child, .ctab:first-child, .rtab:first-child { border-radius: 6px 0 0 6px; }
.qtab:last-child, .etab:last-child, .ctab:last-child, .rtab:last-child { border-radius: 0 6px 6px 0; }
.qtab.active, .etab.active, .ctab.active, .rtab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.qtab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; border-radius: 8px;
    font-size: 10px; font-weight: 700; padding: 0 4px;
    background: rgba(255,255,255,.18); color: inherit;
    margin-left: 3px; vertical-align: middle;
}
.qtab-count:empty { display: none; }
.qtab.active .qtab-count { background: rgba(255,255,255,.3); }

.quest-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.quest-card {
    background: var(--bg-card);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: border-color .2s, box-shadow .2s;
}
.quest-card:hover { border-color: rgba(255,255,255,.15); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.quest-card.q-boss { border-left: 3px solid #ff8000; }
.quest-card.q-completed { border-color: var(--exp); }
.quest-card.q-completed .q-name { color: var(--exp); }
.quest-card.q-rewarded { opacity: .45; }
.quest-card.q-main { border-left: 3px solid #ffd700; }
.quest-card.q-class { border-left: 3px solid #a355ee; }
.quest-card .q-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 4px; }
.quest-card .q-name { font-weight: 700; font-size: 13px; flex: 1; line-height: 1.3; }
.quest-card .q-badges { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.quest-card .q-badge { font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 600; white-space: nowrap; }
.q-badge.boss { background: rgba(255,128,0,.2); color: #ff8000; }
.q-badge.repeat { background: rgba(0,200,255,.15); color: #00ccff; }
.q-badge.chain { background: rgba(30,255,0,.12); color: #1eff00; }
.q-badge-main { background: rgba(255,215,0,.2); color: #ffd700; }
.q-badge-class { background: rgba(163,83,238,.2); color: #a355ee; }
.q-badge-daily { background: rgba(255,180,0,.2); color: #ffb400; }
.q-badge-weekly { background: rgba(0,180,255,.2); color: #00b4ff; }
.q-badge-repeat { background: rgba(0,200,255,.15); color: #00ccff; }
.quest-card.q-daily { border-left-color: #ffb400; }
.quest-card.q-weekly { border-left-color: #00b4ff; }
.quest-card.q-repeat { border-left-color: #00ccff; }
.quest-card .q-npc { font-size: 11px; color: var(--accent); margin-bottom: 2px; }
.quest-card .q-npc i { margin-right: 2px; }
.quest-card .q-desc { font-size: 12px; color: var(--text-dim); margin: 2px 0 8px; line-height: 1.4; }
.quest-card .q-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.quest-card .q-meta { display: flex; flex-direction: column; gap: 2px; }
.quest-card .q-reward { font-size: 11px; color: var(--gold); }
.quest-card .q-reward i { margin-right: 2px; }
.quest-card .q-lv { font-size: 10px; color: var(--text-dim); }
.quest-card .q-lv i { margin-right: 2px; }
.quest-card .q-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.quest-card .q-progress-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; margin-top: 4px; overflow: hidden; width: 100%; }
.quest-card .q-progress-bar .q-bar-fill { height: 100%; background: var(--exp); border-radius: 3px; transition: width .3s; }
.quest-card .q-progress { font-size: 12px; color: var(--exp); display: flex; align-items: center; gap: 4px; }
.q-empty {
    text-align: center; padding: 40px 20px; color: var(--text-dim);
}
.q-empty i { font-size: 32px; display: block; margin-bottom: 12px; opacity: .3; }
.q-empty p { margin: 0; font-size: 13px; }

/* ===== 상점 ===== */
.shop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.shop-header h3 { margin: 0; font-size: 16px; }
.shop-gold { font-size: 14px; color: var(--gold); font-weight: 600; }
.shop-mode-tabs { display: flex; gap: 0; margin-bottom: 12px; }
.shop-mode-tab {
    flex: 1; padding: 9px 12px; background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s, background .2s;
}
.shop-mode-tab:first-child { border-radius: 6px 0 0 6px; }
.shop-mode-tab:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.shop-mode-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.shop-mode-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.shop-tabs { display: flex; gap: 0; margin-bottom: 14px; }
.stab {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    transition: background .2s, color .2s, border-color .2s;
}
.stab:first-child { border-radius: 6px 0 0 6px; }
.stab:last-child { border-radius: 0 6px 6px 0; }
.stab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.shop-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.shop-card {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--bg-card);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: border-color .2s;
}
.shop-card:hover { border-color: var(--accent); }
.shop-card-icon { flex-shrink: 0; width: 44px; height: 44px; }
.shop-card-icon img, .shop-icon-img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.shop-card-info { flex: 1; min-width: 0; }
.shop-card-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.shop-rarity-badge { padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.06); font-weight: 600; margin-right: 4px; }
.shop-card-eff { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.shop-eff { font-size: 12px; padding: 2px 6px; border-radius: 3px; font-weight: 500; }
.shop-eff.hp { background: rgba(255,60,60,.15); color: #ff6b6b; }
.shop-eff.mp { background: rgba(60,130,255,.15); color: #6bb5ff; }
.shop-eff.atk { background: rgba(255,140,0,.15); color: #ff8c00; }
.shop-eff.def { background: rgba(0,200,100,.15); color: #00c864; }
.shop-eff.dur { background: rgba(200,200,200,.1); color: #bbb; }
.shop-card-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.shop-card-buy { flex-shrink: 0; text-align: right; }
.shop-price { font-size: 14px; font-weight: 700; color: var(--gold); margin-bottom: 6px; white-space: nowrap; }
.shop-qty-row { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.shop-buy-btn { padding: 4px 7px !important; font-size: 11px !important; min-width: 0 !important; }
.shop-buy-btn.qty-bulk { background: rgba(255,152,0,.2) !important; border-color: #ff9800 !important; color: #ffb74d !important; }
.shop-buy-btn.qty-bulk:hover { background: rgba(255,152,0,.35) !important; }
.shop-buy-btn.qty-max { background: rgba(244,67,54,.2) !important; border-color: #f44336 !important; color: #ef9a9a !important; }
.shop-buy-btn.qty-max:hover { background: rgba(244,67,54,.35) !important; }
@media (max-width: 600px) {
    .shop-card { flex-wrap: wrap; }
    .shop-card-buy { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
    .shop-qty-row { justify-content: flex-start; }
}

/* ===== 강화 ===== */
#enhance-content .enhance-section { margin-bottom: 20px; }
#enhance-content .enhance-section h4 { margin-bottom: 10px; }
.forge-item, .gem-item, .corrupt-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 6px;
    gap: 8px;
}

/* 보석 장착 카드형 UI */
.gem-equip-grid { display: flex; flex-direction: column; gap: 12px; }
.gem-equip-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: visible;
}
.gem-equip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid var(--border);
}
.gem-equip-img { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.gem-equip-name { flex: 1; font-weight: 600; font-size: 13px; }
.gem-equip-sockets-count {
    font-size: 11px;
    color: #e91e63;
    background: rgba(233,30,99,.1);
    padding: 2px 8px;
    border-radius: 12px;
}
.gem-sockets-list { padding: 6px 10px; }
.gem-socket-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background .15s;
}
.gem-socket-row:last-child { margin-bottom: 0; }
.gem-socket-row.filled {
    background: rgba(46,204,113,.06);
    border: 1px solid rgba(46,204,113,.15);
}
.gem-socket-row.empty {
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
}
.gem-socket-num {
    font-size: 10px;
    color: var(--text-dim);
    min-width: 42px;
    font-weight: 600;
}
.gem-socket-icon { font-size: 14px; }
.gem-socket-icon img { vertical-align: middle; border-radius: 3px; }
.gem-socket-icon.empty-icon { color: rgba(255,255,255,.2); font-size: 16px; }
.gem-socket-name { font-size: 12px; color: #2ecc71; font-weight: 500; }
.gem-socket-stats { font-size: 10px; color: var(--text-dim); margin-left: auto; }
/* 보석 커스텀 드롭다운 */
.gem-dropdown-wrap { flex: 1; max-width: 240px; position: relative; }
.gem-dropdown-toggle {
    width: 100%;
    padding: 5px 10px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.gem-dropdown-toggle:hover { border-color: var(--accent); }
.gem-dropdown-toggle i { margin-left: auto; font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.gem-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 320px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    z-index: 999;
    padding: 4px;
}
.gem-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s;
}
.gem-opt:hover { background: rgba(255,255,255,.08); }
.gem-opt-icon { border-radius: 4px; border: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }
.gem-opt-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.gem-opt-qty { font-size: 11px; color: #888; white-space: nowrap; flex-shrink: 0; }
.gem-opt-stats { font-size: 10px; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
.gem-sel-v2 { display: none; }
.gem-dd-text { color: var(--text-dim); }
.btn-gem-socket {
    padding: 4px 10px;
    background: linear-gradient(135deg, #e91e63, #c2185b);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
}
.btn-gem-socket:hover { filter: brightness(1.15); transform: scale(1.02); }
.btn-gem-unsocket {
    padding: 3px 8px;
    font-size: 11px;
    background: rgba(231,76,60,.2);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,.35);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
    margin-left: auto;
}
.btn-gem-unsocket:hover { background: rgba(231,76,60,.35); transform: scale(1.02); }
.forge-tag-inline { font-size: 10px; padding: 1px 4px; border-radius: 3px; background: var(--gold); color: #000; }
.enhance-tag { background: var(--exp) !important; color: #fff !important; }

/* 강화 장비 탭 */
.enh-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.enh-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 12px;
    transition: .2s;
}
.enh-tab:hover { border-color: var(--accent); }
.enh-tab.active { border-color: var(--accent); background: rgba(233,69,96,.12); color: var(--text); }
.enh-tab-img { width: 24px; height: 24px; object-fit: contain; border-radius: 3px; }
.enh-tab-name { white-space: nowrap; }

/* 강화 카드 */
.enh-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(15,52,96,.5), rgba(22,33,62,.8));
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* 상단: 아이템 미리보기 + 우측 정보 */
.enh-top-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
}
.enh-preview {
    text-align: center;
    flex-shrink: 0;
}
.enh-item-frame {
    width: 80px;
    height: 80px;
    margin: 0 auto 4px;
    border: 2px dashed rgba(255,255,255,.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(0,0,0,.3);
}
.enh-item-img { width: 64px; height: 64px; object-fit: contain; }
.enh-level-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-weight: 800;
    font-size: 13px;
    color: var(--exp);
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.enh-level-badge.enh-mid { color: #f39c12; }
.enh-level-badge.enh-high { color: #e74c3c; text-shadow: 0 0 8px rgba(231,76,60,.6); }
.enh-item-name { font-size: 12px; font-weight: 600; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 우측 정보 영역 */
.enh-right-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* 확률 패널 */
.enh-info-panel { text-align: center; width: 100%; }
.enh-prob-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}
.enh-prob-success { color: #2ecc71; }
.enh-prob-maintain { color: #f39c12; }
.enh-prob-down { color: #e67e22; }
.enh-prob-destroy { color: #e74c3c; font-weight: 700; }
.enh-cost { font-size: 13px; color: var(--text-dim); }
.enh-cost strong { color: var(--gold); }

/* 비교 */
.enh-comparison {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    width: 100%;
    justify-content: center;
}
.enh-before, .enh-after { text-align: center; min-width: 60px; }
.enh-comp-lvl { font-size: 13px; font-weight: 700; color: var(--text); }
.enh-comp-val { font-size: 12px; color: var(--text-dim); }
.enh-arrow { font-size: 16px; color: var(--accent); }

/* 하단: 스크롤 + 버튼 가로 배치 */
.enh-bottom-row {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: stretch;
}
.enh-bottom-row .enh-scrolls {
    flex: 1;
    min-width: 0;
}
.enh-action {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    min-width: 130px;
}

/* 강화 버튼 */
.btn-enhance-main {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 6px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #e67e22, #f39c12);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .25s;
    text-shadow: 0 2px 4px rgba(0,0,0,.4);
    box-shadow: 0 4px 16px rgba(243,156,18,.3);
    flex: 1;
}
.btn-enhance-main:hover {
    background: linear-gradient(135deg, #d35400, #e67e22);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(243,156,18,.45);
}
.btn-enhance-main:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}
.btn-enhance-auto {
    width: 100%;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #2980b9, #3498db);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .25s;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 3px 12px rgba(52,152,219,.3);
    margin-top: 6px;
}
.btn-enhance-auto:hover {
    background: linear-gradient(135deg, #2471a3, #2980b9);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(52,152,219,.45);
}
.btn-enhance-auto:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* 전설 등급 배지 (+10 이상) */
.enh-level-badge.enh-legendary {
    color: #e74c3c;
    text-shadow: 0 0 12px rgba(231,76,60,.8), 0 0 24px rgba(231,76,60,.4);
    animation: enh-legendary-pulse 1.5s ease-in-out infinite;
}
@keyframes enh-legendary-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(231,76,60,.6), 0 0 16px rgba(231,76,60,.3); }
    50% { text-shadow: 0 0 16px rgba(231,76,60,1), 0 0 32px rgba(231,76,60,.6); }
}

/* 구간 표시 태그 */
.enh-zone-safe, .enh-zone-normal, .enh-zone-danger {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}
.enh-zone-safe {
    background: rgba(46,204,113,.15);
    color: #2ecc71;
    border: 1px solid rgba(46,204,113,.3);
}
.enh-zone-normal {
    background: rgba(243,156,18,.15);
    color: #f39c12;
    border: 1px solid rgba(243,156,18,.3);
}
.enh-zone-danger {
    background: rgba(231,76,60,.15);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,.3);
}

/* 확률 바 */
.enh-prob-bar-wrap { width: 100%; }
.enh-prob-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.08);
}
.enh-bar-seg {
    height: 100%;
    transition: width .4s ease;
    min-width: 0;
}
.enh-bar-success { background: linear-gradient(180deg, #2ecc71, #27ae60); }
.enh-bar-maintain { background: linear-gradient(180deg, #f39c12, #e67e22); }
.enh-bar-down { background: linear-gradient(180deg, #e67e22, #d35400); }
.enh-bar-destroy { background: linear-gradient(180deg, #e74c3c, #c0392b); }

/* 확률 라벨 */
.enh-prob-labels {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    flex-wrap: wrap;
}
.enh-pl-success { color: #2ecc71; }
.enh-pl-maintain { color: #f39c12; }
.enh-pl-down { color: #e67e22; }
.enh-pl-destroy { color: #e74c3c; }
.enh-prob-labels i { font-size: 6px; vertical-align: middle; margin-right: 2px; }

/* 스크롤 옵션 */
.enh-scrolls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.enh-scroll-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
}
.enh-scroll-opt:hover {
    border-color: var(--accent);
    background: rgba(0,0,0,.35);
}
.enh-scroll-opt input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.enh-scroll-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}
.enh-scroll-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.enh-scroll-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}
.enh-scroll-desc {
    font-size: 10px;
    color: var(--text-dim);
}
.enh-scroll-cost {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

/* 비용 요약 */
.enh-cost-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    background: rgba(0,0,0,.2);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-dim);
}
.enh-cost-summary strong {
    color: var(--gold);
    font-size: 14px;
}

/* 강화 결과 애니메이션 */
.enh-result-area {
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s ease, opacity .4s ease;
}
.enh-result-area.enh-result-show {
    max-height: 80px;
    opacity: 1;
}
.enh-result-banner {
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: enh-result-pop .3s ease-out;
}
@keyframes enh-result-pop {
    0% { transform: scale(.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.enh-res-success {
    background: rgba(46,204,113,.2);
    color: #2ecc71;
    border: 1px solid rgba(46,204,113,.4);
}
.enh-res-maintain {
    background: rgba(149,165,166,.2);
    color: #95a5a6;
    border: 1px solid rgba(149,165,166,.3);
}
.enh-res-down {
    background: rgba(230,126,34,.2);
    color: #e67e22;
    border: 1px solid rgba(230,126,34,.4);
}
.enh-res-destroy {
    background: rgba(231,76,60,.2);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,.4);
}
.enh-res-protect {
    background: rgba(52,152,219,.2);
    color: #3498db;
    border: 1px solid rgba(52,152,219,.4);
}

/* ===== 동반자 시스템 ===== */
.companion-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.ctab {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background .2s, color .2s;
}
.ctab:hover { background: rgba(255,255,255,.06); color: #eee; }
.ctab.active { background: rgba(255,200,50,.1); border-bottom-color: transparent; color: #ffd700; font-weight: 700; }

/* 카드 공통 */
.comp-header { margin-bottom: 12px; }
.comp-header h4 { margin: 0; color: #eee; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.comp-count { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-left: auto; }
.comp-section-label { font-size: 12px; color: #aaa; margin-bottom: 6px; font-weight: 600; letter-spacing: .5px; }
.comp-empty { color: #666; text-align: center; padding: 30px 10px; font-size: 13px; }

.comp-card {
    background: var(--bg-card);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 6px;
    transition: background .2s, border-color .2s;
}
.comp-card:hover { background: rgba(255,255,255,.04); }
.comp-card.comp-active { border-color: rgba(255,215,0,.4); background: rgba(255,215,0,.04); }

.comp-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.comp-rarity-badge { font-size: 11px; font-weight: 700; }
.comp-name { font-weight: 600; font-size: 14px; color: #eee; }
.comp-level { font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.comp-star { color: #ffd700; font-size: 12px; margin-left: auto; }
.comp-mount-type { font-size: 12px; color: var(--text-dim); margin-left: auto; }

.comp-card-mid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.comp-bonus { font-size: 12px; color: #4ade80; font-weight: 500; }
.comp-desc { font-size: 11px; color: var(--text-dim); }
.comp-maxlv { font-size: 11px; color: #ffd700; font-weight: 600; }

.comp-card-actions { display: flex; gap: 6px; }

/* 탈것 슬롯 */
.mount-slots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mount-slot-badge { font-size: 11px; color: #ccc; background: rgba(255,255,255,.05); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); }

/* 소환 패널 */
.summon-panel { padding: 0; }
.summon-cost-info { text-align: center; padding: 12px; background: var(--bg-card); border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border); }
.summon-cost-label { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; }
.summon-cost-val { font-size: 22px; font-weight: 700; color: #ffd700; }
.summon-cost-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.summon-cost-note { font-size: 10px; color: #888; margin-top: 6px; }

.summon-type-select { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; font-size: 13px; color: #ccc; }
.summon-type-select label { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.summon-type-select input[type="radio"] { accent-color: #ffd700; }

.summon-btns { display: flex; gap: 10px; margin-bottom: 16px; }
.btn-summon {
    flex: 1;
    padding: 14px 10px;
    border-radius: 8px;
    border: 2px solid;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: background .3s, transform .3s;
    line-height: 1.3;
}
.btn-summon:disabled { opacity: .4; cursor: not-allowed; }
.btn-summon-1 {
    background: linear-gradient(135deg, rgba(74,222,128,.1), rgba(34,197,94,.15));
    border-color: rgba(74,222,128,.5);
    color: #4ade80;
}
.btn-summon-1:hover:not(:disabled) { background: linear-gradient(135deg, rgba(74,222,128,.2), rgba(34,197,94,.25)); transform: translateY(-1px); }
.btn-summon-10 {
    background: linear-gradient(135deg, rgba(255,215,0,.1), rgba(245,158,11,.15));
    border-color: rgba(255,215,0,.5);
    color: #ffd700;
}
.btn-summon-10:hover:not(:disabled) { background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(245,158,11,.25)); transform: translateY(-1px); }
.summon-btn-cost { font-size: 11px; font-weight: 400; opacity: .8; }

/* 확률 표시 */
.summon-rates { background: var(--bg-card); border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); margin-bottom: 12px; }
.summon-rates-title { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.summon-rate-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.summon-rate-name { font-size: 12px; font-weight: 600; width: 40px; text-align: right; }
.summon-rate-bar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.summon-rate-fill { height: 100%; border-radius: 3px; transition: width .5s; }
.summon-rate-pct { font-size: 11px; color: var(--text-dim); width: 36px; text-align: right; }

/* 소환 결과 */
.summon-result-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 6px;
    animation: summonAppear .4s ease-out;
}
@keyframes summonAppear {
    from { opacity: 0; transform: translateY(-8px) scale(.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.summon-result-card.summon-glow {
    animation: summonGlow 1.5s ease-in-out infinite alternate, summonAppear .4s ease-out;
    box-shadow: 0 0 12px rgba(255,128,0,.3);
}
@keyframes summonGlow {
    from { box-shadow: 0 0 8px rgba(255,128,0,.2); }
    to { box-shadow: 0 0 18px rgba(255,128,0,.5); }
}
.summon-result-icon { font-size: 22px; width: 32px; text-align: center; }
.summon-result-info { flex: 1; }
.summon-result-name { font-weight: 700; font-size: 13px; }
.summon-result-type { font-size: 11px; color: var(--text-dim); }
.summon-result-cost { font-size: 11px; color: #f87171; white-space: nowrap; }
.summon-dupe { color: #f59e0b; }
.summon-new { color: #4ade80; font-weight: 700; }
.summon-upgrade { color: #60a5fa; font-weight: 700; }
.summon-upgrade i { margin-right: 3px; }
.summon-result-card.summon-upgrade-glow {
    animation: summonUpgradeGlow 1.2s ease-in-out infinite alternate, summonAppear .4s ease-out;
    box-shadow: 0 0 14px rgba(96,165,250,.4);
}
@keyframes summonUpgradeGlow {
    from { box-shadow: 0 0 8px rgba(96,165,250,.2); }
    to { box-shadow: 0 0 20px rgba(96,165,250,.6); }
}
.summon-fail { color: #f66; font-size: 12px; }
.summon-multi-results { max-height: 400px; overflow-y: auto; }
.summon-multi-title { font-size: 13px; font-weight: 700; color: #eee; margin-bottom: 8px; }

/* 레거시 펫 카드 유지 */
.pet-card {
    background: var(--bg-card);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pet-card.active { border-color: var(--exp); }
.pet-info { flex: 1; }
.pet-info .pname { font-weight: 600; }
.pet-info .pbonus { font-size: 12px; color: var(--text-dim); }
.card-actions { display: flex; gap: 6px; }

/* ── 룬 트리 ── */
.rune-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(15,15,35,.9), rgba(10,10,25,.95));
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    margin-bottom: 10px;
}
.rune-points-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.rp-icon { color: #64b5f6; font-size: 16px; }
.rp-label { color: #aaa; }
.rp-val { color: #64b5f6; font-weight: 700; font-size: 20px; }
.rp-sep { color: #555; }
.rp-total { color: #888; }
.rp-spent { color: #666; font-size: 12px; margin-left: 4px; }
.btn-rune-reset {
    background: rgba(255,87,34,.12);
    border: 1px solid rgba(255,87,34,.35);
    color: #ff8a65;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: background .2s, border-color .2s;
}
.btn-rune-reset:hover {
    background: rgba(255,87,34,.25);
    border-color: #ff5722;
}
.rune-tree-wrap {
    position: relative;
    background: radial-gradient(ellipse at 50% 40%, #15152e 0%, #08080f 100%);
    border: 1px solid #1a1a3a;
    border-radius: 10px;
    padding: 10px;
    overflow: visible;
}
.rune-tree-svg {
    width: 100%;
    height: auto;
    min-height: 340px;
    /* max-height: 520px; */
    display: block;
}

/* 엣지 */
.rn-edge { stroke: #1e1e3e; stroke-width: 2; }
.rn-edge.active { stroke: #4fc3f7; stroke-width: 2.5; filter: url(#glow-b); }

/* 노드 기본 */
.rn-node { cursor: pointer; }
.rn-node:hover .rn-core { opacity: .85; }
.rn-node.locked { cursor: default; opacity: .35; }
.rn-node .rn-core { stroke-width: 2.5; transition: opacity .25s; }

/* 소형 노드 */
.rn-node.small.allocated .rn-core { fill: #42a5f5; stroke: #1e88e5; filter: url(#glow-b); }
.rn-node.small.available .rn-core { fill: rgba(66,165,245,.12); stroke: #42a5f5; stroke-dasharray: 5 3; animation: rn-pulse 2s infinite; }
.rn-node.small.locked .rn-core { fill: #121228; stroke: #2a2a4a; }

/* 시작 노드 */
.rn-node.start.allocated .rn-core { fill: #66bb6a; stroke: #43a047; filter: url(#glow-b); }
.rn-node.start.available .rn-core { fill: rgba(102,187,106,.15); stroke: #66bb6a; }

/* 주요 노드 */
.rn-node.notable.allocated .rn-core { fill: #ffc107; stroke: #ffa000; filter: url(#glow-g); }
.rn-node.notable.available .rn-core { fill: rgba(255,193,7,.12); stroke: #ffc107; stroke-dasharray: 5 3; animation: rn-pulse 2s infinite; }
.rn-node.notable.locked .rn-core { fill: #121228; stroke: #3a3010; }
.rn-ring { fill: none; stroke-width: 1.5; }
.rn-node.notable.allocated .rn-ring { stroke: #ffd54f; opacity: .7; }
.rn-node.notable.available .rn-ring { stroke: rgba(255,193,7,.25); }
.rn-node.notable.locked .rn-ring { stroke: #1e1a10; }

/* 핵심 노드 */
.rn-node.keystone.allocated .rn-core { fill: #ff5722; stroke: #e64a19; filter: url(#glow-r); }
.rn-node.keystone.available .rn-core { fill: rgba(255,87,34,.12); stroke: #ff5722; stroke-dasharray: 5 3; animation: rn-pulse 2s infinite; }
.rn-node.keystone.locked .rn-core { fill: #121228; stroke: #2a1510; }
.rn-diamond { fill: none; stroke-width: 1.5; }
.rn-node.keystone.allocated .rn-diamond { stroke: #ff8a65; opacity: .7; }
.rn-node.keystone.available .rn-diamond { stroke: rgba(255,87,34,.25); }
.rn-node.keystone.locked .rn-diamond { stroke: #1a0e08; }

/* 라벨 */
.rn-label { fill: #778; font-size: 10px; font-family: inherit; pointer-events: none; }
.rn-node.allocated .rn-label { fill: #ccc; }
.rn-node.locked .rn-label { fill: #444; }

@keyframes rn-pulse {
    0%, 100% { stroke-opacity: .6; }
    50% { stroke-opacity: 1; }
}

/* 툴팁 */
.rune-tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(10,10,25,.95);
    border: 1px solid #3a3a6a;
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 180px;
    max-width: 240px;
    pointer-events: none;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.rt-head { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.rt-head.small { color: #64b5f6; }
.rt-head.notable { color: #ffc107; }
.rt-head.keystone { color: #ff5722; }
.rt-head.start { color: #66bb6a; }
.rt-meta { font-size: 11px; color: #777; margin-bottom: 6px; }
.rt-stats-block { margin-bottom: 6px; padding: 4px 0; border-top: 1px solid #1a1a3a; border-bottom: 1px solid #1a1a3a; }
.rt-stat { font-size: 12px; color: #8f8; line-height: 1.5; }
.rt-desc { font-size: 11px; color: #999; margin-bottom: 4px; }
.rt-action { font-size: 11px; color: #aaa; font-style: italic; margin-top: 4px; }
.rt-alloc { color: #64b5f6; }
.rt-avail { color: #66bb6a; }
.rt-lock { color: #555; }

/* 룬 스탯 요약 */
.rune-stat-summary { background: var(--bg-card); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); font-size: 12px; }
.rs-chip { background: rgba(100,181,246,0.12); color: #8cf; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.rs-chip small { color: #888; font-size: 10px; }

/* 가지별 색상 오버라이드 */
.rn-node.branch-elemental.small.allocated .rn-core { fill: #ff7043; stroke: #e64a19; }
.rn-node.branch-elemental.notable.allocated .rn-core { fill: #ff8a65; stroke: #e64a19; filter: url(#glow-g); }
.rn-node.branch-elemental.keystone.allocated .rn-core { fill: #ff5722; stroke: #d84315; filter: url(#glow-r); }
.rn-node.branch-elemental.small.available .rn-core { stroke: #ff7043; }
.rn-node.branch-elemental.notable.available .rn-core { stroke: #ff8a65; }
.rn-node.branch-ascendancy.allocated .rn-core { fill: #ffd700; stroke: #ffab00; filter: url(#glow-g); }
.rn-node.branch-ascendancy.available .rn-core { stroke: #ffd700; stroke-dasharray: 3 2; }
.rn-node.branch-ascendancy.locked .rn-core { stroke: #4a4000; }
.rn-node.branch-bridge.allocated .rn-core { fill: #78909c; stroke: #546e7a; }
.rn-node.branch-bridge.available .rn-core { stroke: #78909c; }

/* ===== 지역 ===== */
.zone-list { display: block; }

/* 현재 지역 요약 */
.zone-current-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(46,204,113,.08), rgba(46,204,113,.02));
    border: 1px solid rgba(46,204,113,.3); border-radius: 10px;
}
.zcs-left { display: flex; align-items: center; gap: 12px; }
.zcs-icon { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.zcs-title { font-size: 11px; color: var(--exp); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.zcs-name { font-size: 16px; font-weight: 700; color: #fff; margin-top: 2px; }
.zcs-right { display: flex; align-items: center; gap: 10px; }
.zcs-level { font-size: 13px; color: var(--text-dim); font-weight: 600; }

.zone-card {
    background: var(--bg-card);
    padding: 14px 14px 12px 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: .2s;
    position: relative;
    overflow: hidden;
}
.zone-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
}
.zone-card.faction-horde { border-color: rgba(196,30,58,.4); }
.zone-card.faction-horde::before { background: var(--horde); }
.zone-card.faction-horde:hover { border-color: var(--horde); background: rgba(196,30,58,.08); }
.zone-card.faction-alliance { border-color: rgba(0,112,221,.4); }
.zone-card.faction-alliance::before { background: var(--alliance); }
.zone-card.faction-alliance:hover { border-color: var(--alliance); background: rgba(0,112,221,.08); }
.zone-card.faction-neutral { border-color: rgba(255,215,0,.3); }
.zone-card.faction-neutral::before { background: var(--gold); }
.zone-card.faction-neutral:hover { border-color: var(--gold); background: rgba(255,215,0,.06); }
.zone-card.current { border-color: var(--exp) !important; background: rgba(46,204,113,.08); }
.zone-card.current::before { background: var(--exp); }
.zone-card.recommended { border-color: rgba(255,215,0,.5) !important; }
.zone-card.locked { opacity: .5; cursor: not-allowed; }
.zone-card .z-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zone-card .z-faction-icon { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); flex-shrink: 0; }
.zone-card .z-name { font-weight: 600; font-size: 15px; flex: 1; }
.zone-card .z-recommend-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 4px; background: rgba(255,215,0,.15); color: var(--gold);
    white-space: nowrap;
}
.zone-card .z-locked-badge { font-size: 13px; color: #666; }

/* 레벨 범위 바 */
.z-level-bar-wrap {
    height: 3px; background: rgba(255,255,255,.06); border-radius: 2px;
    margin: 0 0 8px 30px; overflow: hidden;
}
.z-level-bar { height: 100%; border-radius: 2px; transition: width .3s; min-width: 2px; }

/* 정보 행 */
.z-info-row {
    display: flex; align-items: center; gap: 6px; margin-left: 30px; flex-wrap: wrap;
}
.z-level-range { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-right: 4px; }
.z-desc { font-size: 12px; color: #888; margin: 6px 0 0 30px; line-height: 1.4; }
.z-current-mark { color: var(--exp); font-size: 12px; margin: 6px 0 0 30px; font-weight: 600; }
.z-raid-count { font-size: 11px; margin: 4px 0 0 30px; color: #aaa; }
.z-raid-count.exhausted { color: #f44336; }
.z-actions { margin: 8px 0 0 30px; }

.zone-card .z-meta { font-size: 12px; color: var(--text-dim); margin-left: 30px; }
.zone-card .z-faction-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 4px;
}
.zone-card .z-faction-tag.horde { background: rgba(196,30,58,.2); color: #ff4466; }
.zone-card .z-faction-tag.alliance { background: rgba(0,112,221,.2); color: #4da6ff; }
.zone-card .z-faction-tag.neutral { background: rgba(255,215,0,.15); color: var(--gold); }
.zone-card .z-type-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; padding: 2px 6px;
    border-radius: 3px;
}
.zone-card .z-type-tag.field { background: rgba(46,204,113,.15); color: var(--exp); }
.zone-card .z-type-tag.dungeon { background: rgba(163,53,238,.2); color: #c77dff; }
.zone-card .z-type-tag.raid { background: rgba(255,128,0,.2); color: #ff8000; }
.zone-card .z-type-tag.warzone { background: rgba(220,38,38,.25); color: #ff4444; }
.z-warzone-warn { font-size: 11px; margin: 4px 0 0 30px; color: #ff4444; font-weight: 600; }
.mob-pvp { background: #dc2626; color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-right: 3px; font-weight: 700; }
.log-pvp.victory { border-left-color: #dc2626 !important; }
.log-pvp.defeat { border-left-color: #8b0000 !important; }

/* 드롭 테이블 버튼 */
.btn-zone-drops {
    background: transparent; border: 1px solid rgba(255,255,255,.12); color: #aaa;
    font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.btn-zone-drops:hover { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.06); }
.btn-zone-drops i { margin-right: 3px; }

/* ===== 지역 탭 (전투/점령) ===== */
.zone-tabs { display: flex; gap: 0; margin-bottom: 14px; }
.ztab {
    padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 12px; cursor: pointer; flex: 1; text-align: center;
    transition: background .15s, color .15s;
}
.ztab:first-child { border-radius: 6px 0 0 6px; }
.ztab:last-child { border-radius: 0 6px 6px 0; }
.ztab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ztab i { margin-right: 4px; }
.zone-tab-content.hidden { display: none; }

/* ===== 점령 시스템 ===== */

/* 오늘의 점령 히어로 카드 */
.conquest-today {
    background: linear-gradient(145deg, rgba(30,28,45,.95), rgba(20,18,35,.98));
    border: 1px solid rgba(255,165,0,.25); border-radius: 14px;
    padding: 0; margin-bottom: 16px; overflow: hidden;
    position: relative;
}
.conquest-today::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,165,0,.08) 0%, transparent 60%);
}
.cq-hero-top {
    display: flex; align-items: center; gap: 14px; padding: 18px 18px 12px;
    position: relative; z-index: 1;
}
.cq-hero-icon-wrap {
    position: relative; flex-shrink: 0;
}
.cq-hero-icon-wrap .cq-territory-icon {
    width: 56px; height: 56px; border-radius: 12px;
    border: 2px solid rgba(255,215,0,.35);
    filter: drop-shadow(0 4px 12px rgba(255,165,0,.3));
    background: rgba(0,0,0,.3); object-fit: cover;
}
.cq-hero-icon-wrap .cq-day-badge {
    position: absolute; top: -6px; right: -6px;
    background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff;
    font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(243,156,18,.4);
}
.cq-hero-info { flex: 1; min-width: 0; }
.cq-hero-info .cq-label {
    font-size: 10px; font-weight: 700; color: rgba(255,165,0,.7);
    text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 2px;
}
.cq-hero-info .cq-territory-name {
    font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 3px;
    text-shadow: 0 1px 6px rgba(255,165,0,.2);
}
.cq-hero-info .cq-territory-desc {
    font-size: 12px; color: #999; line-height: 1.3;
}
.cq-hero-timer {
    text-align: right; flex-shrink: 0;
}
.cq-hero-timer .cq-timer-value {
    font-size: 22px; font-weight: 800; color: #fff;
    font-variant-numeric: tabular-nums;
}
.cq-hero-timer .cq-timer-label {
    font-size: 10px; color: #888; text-align: center; margin-top: 1px;
}

/* 버프/정보 태그 행 */
.cq-tags-row {
    display: flex; gap: 8px; padding: 0 18px 14px; position: relative; z-index: 1;
    flex-wrap: wrap;
}
.cq-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: 20px; border: 1px solid rgba(255,255,255,.08);
}
.cq-tag.buff { background: rgba(255,215,0,.1); color: #ffd700; border-color: rgba(255,215,0,.2); }
.cq-tag.participants { background: rgba(255,255,255,.04); color: #bbb; }
.cq-tag.my-status { background: rgba(46,204,113,.1); color: #2ecc71; border-color: rgba(46,204,113,.2); }
.cq-tag.my-status.pending { background: rgba(243,156,18,.1); color: #f39c12; border-color: rgba(243,156,18,.2); }

/* === 진영 대결 바 === */
.conquest-versus {
    background: rgba(0,0,0,.25); padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.04); position: relative; z-index: 1;
}
.cq-vs-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.cq-vs-faction {
    display: flex; align-items: center; gap: 6px;
}
.cq-vs-faction img { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cq-vs-faction .cq-vs-name { font-size: 13px; font-weight: 700; }
.cq-vs-faction .cq-vs-name.horde { color: var(--horde); }
.cq-vs-faction .cq-vs-name.alliance { color: var(--alliance); }
.cq-vs-faction .cq-vs-count {
    font-size: 20px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cq-vs-faction .cq-vs-count.horde { color: var(--horde); }
.cq-vs-faction .cq-vs-count.alliance { color: var(--alliance); }
.cq-vs-divider {
    font-size: 11px; color: #666; font-weight: 700; letter-spacing: 1px;
}
.conquest-bar {
    height: 28px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(90deg, rgba(0,112,221,.25), rgba(0,112,221,.15));
    position: relative; border: 1px solid rgba(255,255,255,.06);
}
.conquest-bar-inner {
    display: flex; height: 100%;
}
.conquest-bar-horde {
    height: 100%; transition: width .6s ease;
    background: linear-gradient(90deg, rgba(196,30,58,.9), rgba(196,30,58,.5));
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,.9);
    min-width: 0; position: relative; overflow: hidden;
}
.conquest-bar-horde::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.1), transparent);
}
.conquest-bar-alliance {
    height: 100%; flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,.9);
    position: relative; overflow: hidden;
}
.conquest-bar-alliance::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
}
.cq-vs-lead {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; margin-top: 6px;
    padding: 2px 8px; border-radius: 10px;
}
.cq-vs-lead.horde { background: rgba(196,30,58,.15); color: #ff6680; }
.cq-vs-lead.alliance { background: rgba(0,112,221,.15); color: #66bbff; }
.cq-vs-lead.tie { background: rgba(255,255,255,.05); color: #888; }

/* 점령 버튼 */
.conquest-actions { text-align: center; margin: 16px 0 12px; }
.btn-conquest-capture {
    padding: 12px 36px; font-size: 15px; font-weight: 800;
    border: none; border-radius: 10px; cursor: pointer; transition: transform .2s, box-shadow .2s;
    background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff;
    box-shadow: 0 4px 16px rgba(243,156,18,.25);
    letter-spacing: .5px; position: relative; overflow: hidden;
}
.btn-conquest-capture::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.15), transparent);
}
.btn-conquest-capture:hover:not(:disabled) {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(243,156,18,.4);
}
.btn-conquest-capture:active:not(:disabled) { transform: translateY(0); }
.btn-conquest-capture:disabled {
    background: linear-gradient(135deg, #3a3a3a, #2a2a2a); color: #777;
    box-shadow: none; cursor: not-allowed;
}
.btn-conquest-capture:disabled::before { display: none; }
.btn-conquest-capture.captured {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    cursor: default; box-shadow: 0 4px 12px rgba(46,204,113,.25);
}
@keyframes cqCaptureShine {
    0% { left: -100%; }
    100% { left: 200%; }
}
.btn-conquest-capture:not(:disabled):not(.captured)::after {
    content: ''; position: absolute; top: 0; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    animation: cqCaptureShine 3s infinite;
}

/* 점령 버프 배너 */
.conquest-buff-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 14px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(46,204,113,.08), rgba(46,204,113,.02));
    border: 1px solid rgba(46,204,113,.25); font-size: 13px;
}
.conquest-buff-banner.horde {
    background: linear-gradient(135deg, rgba(196,30,58,.08), rgba(196,30,58,.02));
    border-color: rgba(196,30,58,.25);
}
.conquest-buff-banner.alliance {
    background: linear-gradient(135deg, rgba(0,112,221,.08), rgba(0,112,221,.02));
    border-color: rgba(0,112,221,.25);
}
.conquest-buff-banner .cq-buff-icon { font-size: 22px; }
.conquest-buff-banner.horde .cq-buff-icon { color: var(--horde); }
.conquest-buff-banner.alliance .cq-buff-icon { color: var(--alliance); }
.conquest-buff-banner .cq-buff-text { flex: 1; color: #ccc; line-height: 1.4; }
.conquest-buff-banner .cq-buff-text strong { color: #fff; }
.conquest-buff-banner .cq-buff-value {
    font-weight: 800; font-size: 16px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* 점령 지도 */
.conquest-map {
    position: relative; width: 100%; height: 260px; margin: 0 0 6px;
    background:
        linear-gradient(160deg, rgba(18,16,30,.95), rgba(25,22,40,.9));
    border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
    overflow: hidden;
}
.conquest-map::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(196,30,58,.05) 0%, transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(0,112,221,.05) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255,215,0,.03) 0%, transparent 30%);
}
/* 격자선 */
.conquest-map::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04;
    background-image:
        linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 20% 20%;
}
.cq-map-title {
    position: absolute; top: 10px; left: 14px; z-index: 3;
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3);
    letter-spacing: 1.5px; text-transform: uppercase;
}
.cq-node {
    position: absolute; width: 50px; height: 50px;
    transform: translate(-50%, -50%); cursor: default; transition: opacity .3s, filter .3s;
    z-index: 2; display: flex; flex-direction: column; align-items: center;
}
.cq-node-icon {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.15); box-shadow: 0 2px 10px rgba(0,0,0,.6);
    transition: border-color .3s, box-shadow .3s, width .3s, height .3s; background: rgba(20,20,30,.8);
}
.cq-node.active .cq-node-icon {
    width: 44px; height: 44px;
    border-color: rgba(255,215,0,.6);
    box-shadow: 0 0 20px rgba(255,215,0,.35), 0 0 40px rgba(255,215,0,.1);
}
.cq-node.inactive { opacity: .3; filter: grayscale(.5); }
.cq-node.inactive:hover { opacity: .5; }
.cq-node-label {
    font-size: 9px; white-space: nowrap; color: rgba(255,255,255,.5); margin-top: 3px;
    text-shadow: 0 1px 4px rgba(0,0,0,.9); font-weight: 600; letter-spacing: .3px;
}
.cq-node.active .cq-node-label { color: #ffd700; font-size: 10px; }
.cq-node-pulse {
    position: absolute; top: 50%; left: 50%;
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-radius: 50%;
    border: 2px solid rgba(255,215,0,.5); animation: cqPulse 2s infinite; opacity: 0;
}
@keyframes cqPulse {
    0% { transform: scale(.7); opacity: .7; }
    50% { opacity: .3; }
    100% { transform: scale(1.5); opacity: 0; }
}
/* 활성 노드 연결선 장식 */
.cq-node.active::before {
    content: ''; position: absolute;
    bottom: -2px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 0; background: rgba(255,215,0,.15);
}

/* 점령 히스토리 */
.conquest-history { margin-top: 16px; }
.conquest-history .cq-hist-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: #888;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    text-transform: uppercase; letter-spacing: .8px;
}
.conquest-history .cq-hist-title i { color: #666; font-size: 11px; }
.cq-history-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--bg-card); border-radius: 8px; margin-bottom: 5px;
    border: 1px solid var(--border); font-size: 12px;
    transition: background .15s;
}
.cq-history-row:hover { background: rgba(255,255,255,.03); }
.cq-history-row .cq-h-date {
    color: #777; min-width: 52px; font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.cq-history-row .cq-h-icon {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
.cq-history-row .cq-h-territory { flex: 1; font-weight: 600; color: #ddd; }
.cq-history-row .cq-h-score {
    display: flex; align-items: center; gap: 3px;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cq-history-row .cq-h-score .h-horde { color: var(--horde); }
.cq-history-row .cq-h-score .h-alliance { color: var(--alliance); }
.cq-history-row .cq-h-score .h-sep { color: #555; font-size: 10px; }
.cq-history-row .cq-h-winner {
    font-weight: 700; padding: 2px 10px; border-radius: 10px; font-size: 10px;
    letter-spacing: .3px;
}
.cq-history-row .cq-h-winner.horde { background: rgba(196,30,58,.15); color: #ff5577; }
.cq-history-row .cq-h-winner.alliance { background: rgba(0,112,221,.15); color: #55aaff; }
.cq-history-row .cq-h-winner.none { background: rgba(255,255,255,.04); color: #666; }
.cq-history-empty {
    text-align: center; padding: 20px; color: #666; font-size: 12px;
}

/* ===== 스탯 ===== */
.stat-alloc { background: var(--bg-card); padding: 14px; border-radius: 8px; margin-bottom: 16px; }
.stat-alloc h4 { margin-bottom: 8px; }
.alloc-row { display: flex; gap: 8px; }
.btn-alloc {
    padding: 6px 16px;
    border: 1px solid var(--accent);
    background: var(--bg-dark);
    color: var(--accent);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
}
.btn-alloc:hover { background: var(--accent); color: #fff; }
.stat-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 13px;
    position: relative;
    cursor: default;
    transition: background .15s;
}
.stat-row:hover { background: rgba(255,255,255,.06); }
.stat-row[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,10,30,.95);
    color: #ccc;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    white-space: normal;
    width: max-content;
    max-width: 220px;
    z-index: 100;
    pointer-events: none;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.stat-row .s-label { color: var(--text-dim); }
.stat-row .s-val { font-weight: 600; }
.stat-row .s-val .s-pct { color: #ffd700; font-size: .85em; font-weight: 400; }

/* 종족 특성 상자 */
.racial-trait-box {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(233,69,96,.08), rgba(255,215,0,.08));
    border: 1px solid rgba(255,215,0,.2);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

/* ===== 전문화 섹션 ===== */
.spec-section { margin-bottom: 16px; }
.talent-spec-section {
    background: rgba(0,0,0,0.2);
    border: 1px solid #333;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
}
.talent-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.talent-section-title i { color: var(--accent); font-size: 13px; }
.talent-section-title .spec-status { margin-left: auto; font-size: 12px; }
.spec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.spec-header h4 { font-size: 14px; color: var(--text-bright); margin: 0; }
.spec-header h4 i { margin-right: 6px; color: var(--accent); }
.spec-status { font-size: 12px; }
.spec-status.locked { color: var(--text-dim); }
.spec-status.locked i { margin-right: 4px; }
.spec-status.active .spec-active { color: #1eff00; }
.spec-status.active .spec-active i { margin-right: 4px; }
.spec-status.none .spec-none { color: #f5a623; }
.spec-status.none .spec-none i { margin-right: 4px; }

.spec-list { display: flex; flex-direction: column; gap: 8px; }
.spec-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(15,52,96,.4);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
    cursor: default;
}
.spec-card:not(.locked):not(.active):hover {
    border-color: rgba(255,255,255,.15);
    transform: translateX(3px);
}
.spec-card.active {
    border-color: var(--accent);
    background: rgba(233,69,96,.08);
    box-shadow: 0 2px 12px rgba(233,69,96,.15);
}
.spec-card.locked {
    opacity: .5;
}
.spec-card .spec-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-dim);
    flex-shrink: 0;
}
.spec-class-icon {
    width: 36px; height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
    border-radius: 6px;
}
.spec-info { flex: 1; min-width: 0; }
.spec-name { font-weight: 700; font-size: 14px; color: var(--text-bright); margin-bottom: 2px; }
.spec-name i { color: #1eff00; margin-left: 6px; font-size: 12px; }
.spec-desc { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.spec-bonuses { display: flex; flex-wrap: wrap; gap: 4px; }
.spec-bonus-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(30,255,0,.08);
    color: #1eff00;
    border: 1px solid rgba(30,255,0,.15);
}
.btn-spec-select { flex-shrink: 0; font-size: 12px !important; padding: 6px 12px !important; }

/* 전문화 패시브 */
.spec-passive {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255,165,0,.06);
    border: 1px solid rgba(255,165,0,.12);
}
.spec-passive.active {
    background: rgba(255,165,0,.12);
    color: #ffa500;
    border-color: rgba(255,165,0,.3);
}
.spec-passive i { margin-right: 3px; color: #ffa500; }
.passive-active-badge {
    font-size: 10px;
    color: #1eff00;
    font-weight: 700;
    margin-left: 4px;
}
.pick-icon-img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); margin-bottom: 2px; }
.char-card-class-icon { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.char-card-class-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    border: 1.5px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}
.char-card-class-wrap.conq-card-0 { border-color: rgba(255,215,0,.4); box-shadow: 0 0 6px rgba(255,215,0,.2); }
.char-card-class-wrap.conq-card-1 { border-color: rgba(255,200,0,.7); box-shadow: 0 0 8px rgba(255,200,0,.3); }
.char-card-class-wrap.conq-card-2 { border-color: rgba(255,140,0,.85); box-shadow: 0 0 10px rgba(255,140,0,.4); animation: conq-card-pulse 3s ease-in-out infinite; }
.char-card-class-wrap.conq-card-3 { border-color: rgba(255,60,0,.9); box-shadow: 0 0 12px rgba(255,60,0,.5); animation: conq-card-pulse 2.5s ease-in-out infinite; }
.char-card-class-wrap.conq-card-4 { border-color: rgba(168,85,247,.8); box-shadow: 0 0 14px rgba(168,85,247,.5), 0 0 6px rgba(255,140,0,.3); animation: conq-card-pulse-4 2s ease-in-out infinite; }
@keyframes conq-card-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}
@keyframes conq-card-pulse-4 {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 14px rgba(168,85,247,.5), 0 0 6px rgba(255,140,0,.3); }
    50% { filter: brightness(1.4); box-shadow: 0 0 20px rgba(168,85,247,.7), 0 0 10px rgba(255,140,0,.5); }
}
.spec-badge { color: #1eff00; font-size: 11px; margin-left: 4px; }
.trait-header {
    font-size: 13px;
    color: var(--gold);
    margin-bottom: 4px;
}
.trait-header i { margin-right: 4px; font-size: 10px; }
.trait-body {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
}

.set-bonus-display { margin-top: 16px; }
.set-bonus-display .set-item { padding: 8px; background: var(--bg-card); border-radius: 6px; margin-bottom: 6px; border-left: 3px solid var(--rarity-legendary); }

/* ===== 랭킹 ===== */
.ranking-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 14px;
}
.rank-row .rank-pos { width: 40px; font-weight: 700; color: var(--gold); }
.rank-row .rank-faction { width: 24px; flex-shrink: 0; margin-right: 6px; display: flex; align-items: center; }
.rank-faction-icon { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.rank-row .rank-name { flex: 1; }
.rank-row .rank-val { font-weight: 600; }
.rank-row:nth-child(1) .rank-pos { font-size: 18px; }
.rank-row:nth-child(2) .rank-pos { color: #c0c0c0; }
.rank-row:nth-child(3) .rank-pos { color: #cd7f32; }



/* ===== 아이템 모달 ===== */
.item-detail-modal { max-width: 400px; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; }
.idm-card { padding: 24px 20px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.idm-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.idm-icon { flex-shrink: 0; display: flex; align-items: center; position: relative; }
.idm-icon-img {
    width: 60px; height: 60px; object-fit: contain; border-radius: 8px;
    border: 2px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.idm-icon-img.rarity-glow-poor { border-color: var(--rarity-poor); box-shadow: 0 0 8px rgba(157,157,157,.3); }
.idm-icon-img.rarity-glow-common { border-color: var(--rarity-common); box-shadow: 0 0 8px rgba(255,255,255,.2); }
.idm-icon-img.rarity-glow-uncommon { border-color: var(--rarity-uncommon); box-shadow: 0 0 10px rgba(30,255,0,.35); }
.idm-icon-img.rarity-glow-rare { border-color: var(--rarity-rare); box-shadow: 0 0 12px rgba(0,112,221,.4); }
.idm-icon-img.rarity-glow-epic { border-color: var(--rarity-epic); box-shadow: 0 0 14px rgba(163,53,238,.45); }
.idm-icon-img.rarity-glow-legendary { border-color: var(--rarity-legendary); box-shadow: 0 0 16px rgba(255,128,0,.5); }
.idm-icon-img.rarity-glow-mythic { border-color: var(--rarity-mythic); box-shadow: 0 0 16px rgba(226,104,168,.5); }
.idm-icon-img.rarity-glow-artifact { border-color: var(--rarity-artifact); box-shadow: 0 0 16px rgba(230,204,128,.5); }
.idm-header-info { flex: 1; min-width: 0; }
.item-detail-modal .idm-name { font-size: 18px; font-weight: 700; margin-bottom: 3px; line-height: 1.2; }
.item-detail-modal .idm-type { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.idm-type-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; background: rgba(255,255,255,.06); font-size: 11px; }
.idm-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 10px 0; }
.item-detail-modal .idm-stats { margin: 10px 0; padding: 0; }
.item-detail-modal .idm-stats .s { font-size: 13px; padding: 3px 0; color: #1eff00; display: flex; align-items: center; gap: 4px; }
.item-detail-modal .idm-stats .s::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #1eff00; flex-shrink: 0; }
.item-detail-modal .stat-enh-bonus { color: #ffaa00; font-size: 11px; font-weight: 600; margin-left: 2px; }
.item-detail-modal .idm-enh-badge { display: inline-block; background: linear-gradient(135deg, #ff6600, #ff9900); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-right: 3px; vertical-align: middle; }
.item-detail-modal .idm-forge-type { display: inline-block; background: rgba(255,100,0,.2); color: #ff8800; font-size: 10px; font-weight: 600; padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.item-detail-modal .idm-set { margin-top: 10px; padding: 8px 10px; background: rgba(255,128,0,.1); border-left: 3px solid #ff8000; border-radius: 4px; font-size: 12px; color: #ff8000; }
/* 세트 보너스 섹션 */
.item-detail-modal .idm-set-section { margin-top: 10px; padding: 10px 12px; background: rgba(30,255,0,.04); border: 1px solid rgba(30,255,0,.15); border-left: 3px solid #1eff00; border-radius: 6px; }
.item-detail-modal .idm-set-header { font-size: 13px; font-weight: 700; color: #1eff00; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.item-detail-modal .idm-set-name { color: #1eff00; }
.item-detail-modal .idm-set-count { font-size: 11px; color: #9f9; font-weight: 600; }
.item-detail-modal .idm-set-bonuses { display: flex; flex-direction: column; gap: 3px; }
.item-detail-modal .idm-set-bonus { font-size: 12px; padding: 3px 6px; border-radius: 3px; display: flex; align-items: baseline; gap: 6px; }
.item-detail-modal .idm-set-bonus.set-active { color: #1eff00; background: rgba(30,255,0,.08); }
.item-detail-modal .idm-set-bonus.set-inactive { color: #666; }
.item-detail-modal .idm-set-bonus .set-req { font-weight: 700; font-size: 11px; min-width: 36px; flex-shrink: 0; }
.item-detail-modal .idm-set-bonus .set-desc { flex: 1; }
.item-detail-modal .idm-set-bonus .set-stats { font-size: 11px; color: inherit; opacity: .7; }
.item-detail-modal .idm-gem { margin-top: 8px; font-size: 12px; color: var(--rarity-rare); display: flex; align-items: center; gap: 6px; }
.item-detail-modal .idm-gem-section { margin-top: 10px; padding: 8px 10px; background: rgba(233,30,99,.06); border: 1px solid rgba(233,30,99,.15); border-radius: 6px; }
.item-detail-modal .idm-gem-title { font-size: 12px; color: #e91e63; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.item-detail-modal .idm-gem-slots { display: flex; flex-direction: column; gap: 4px; }
.item-detail-modal .idm-gem-filled { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(0,255,136,.06); border: 1px solid rgba(0,255,136,.15); border-radius: 4px; font-size: 12px; }
.item-detail-modal .idm-gem-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.item-detail-modal .idm-gem-name { color: #00ff88; font-weight: 600; white-space: nowrap; }
.item-detail-modal .idm-gem-stat { color: #aaa; font-size: 11px; margin-left: auto; white-space: nowrap; }
.item-detail-modal .idm-gem-empty { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.12); border-radius: 4px; font-size: 12px; }
.item-detail-modal .idm-gem-icon-empty { font-size: 14px; color: #555; flex-shrink: 0; width: 18px; text-align: center; }
.item-detail-modal .idm-gem-empty-text { color: #555; font-style: italic; }

/* 아이템 모달 - 마법부여 효과 섹션 */
.item-detail-modal .idm-ench-section {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(52,152,219,.08);
    border-left: 3px solid #3498db;
    border-radius: 6px;
}
.item-detail-modal .idm-ench-title {
    font-size: 13px;
    color: #3498db;
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.item-detail-modal .idm-ench-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}
.item-detail-modal .idm-ench-stat {
    color: #5dade2;
    font-weight: 600;
}

/* 아이템 모달 - 타락 효과 섹션 */
.item-detail-modal .idm-corrupt-section {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(142,68,173,.08);
    border-radius: 6px;
}
.item-detail-modal .idm-corrupt-header {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.item-detail-modal .idm-corrupt-lvl {
    font-size: 14px;
    font-weight: 700;
    color: #c084fc;
}
.item-detail-modal .idm-corrupt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}
.item-detail-modal .idm-corrupt-bonus-val {
    color: #2ecc71;
    font-weight: 600;
}
.item-detail-modal .idm-corrupt-penalty-val {
    color: #e74c3c;
    font-weight: 600;
}
.item-detail-modal .idm-corrupt-val {
    font-size: 11px;
    color: #c084fc;
    margin-top: 4px;
    opacity: .8;
}

/* 장비칸 타락 뱃지 */
.eq-badge-corrupt {
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    gap: 3px;
}
.item-detail-modal .idm-desc { font-size: 12px; color: var(--text-dim); margin-top: 10px; font-style: italic; padding: 8px 10px; background: rgba(255,255,255,.02); border-radius: 4px; }
.idm-price { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gold); margin-top: 10px; font-weight: 600; }
.idm-compare {
    margin: 10px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    font-size: 12px;
}
.compare-title { font-weight: 600; color: var(--text-dim); margin-bottom: 6px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.compare-up { color: #1eff00; padding: 2px 0; display: flex; align-items: center; gap: 4px; }
.compare-down { color: #ff4444; padding: 2px 0; display: flex; align-items: center; gap: 4px; }
.compare-same { color: var(--text-dim); }
.idm-footer { padding: 12px 20px 16px; background: rgba(0,0,0,.15); border-top: 1px solid rgba(255,255,255,.05); flex-shrink: 0; }
.item-detail-modal .modal-close { flex-shrink: 0; }
.item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.item-actions .btn-small { flex: 1; min-width: 0; text-align: center; padding: 8px 10px; font-size: 13px; }
.item-extra-actions { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.item-extra-actions .btn-small { flex: 1; min-width: 0; text-align: center; padding: 6px 8px; font-size: 12px; }
.btn-share { background: #7289da; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background .15s; }
.btn-share:hover { background: #5b6eae; }
.btn-auction { background: #e67e22; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background .15s; }
.btn-auction:hover { background: #cf6d17; }
.modal-close { display: block; text-align: center; width: 100%; margin-top: 0; padding: 8px; }
/* 채팅 아이템 태그 */
.chat-item-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    cursor: pointer; font-size: 12px; font-weight: 600;
    transition: background .15s;
}
.chat-item-tag:hover { background: rgba(255,255,255,.15); }
.chat-item-tag img { width: 16px; height: 16px; border-radius: 2px; }

/* 채팅 아이템 배지 */
.chat-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 0 3px; border-radius: 2px; line-height: 14px; vertical-align: middle; }
.chat-badge-enh { background: linear-gradient(135deg, #ff6600, #ff9900); color: #fff; }
.chat-badge-forge { background: #8b5cf6; color: #fff; }
.chat-badge-corrupt { background: #8e44ad; color: #fff; }
.chat-badge-ench { background: #9b59b6; color: #fff; }
.chat-badge-gem { background: #e91e63; color: #fff; }

/* ==========================================
   AUCTION (경매장)
   ========================================== */
.auc-cat-bar {
    display: flex; gap: 0; padding: 0;
    background: rgba(13,17,23,.5); border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
}
.auc-cat-bar::-webkit-scrollbar { display: none; }
.auc-cat {
    flex: 1; min-width: 0; padding: 7px 4px; font-size: 11px; cursor: pointer;
    background: transparent; color: var(--text-dim); border: none;
    border-bottom: 2px solid transparent; transition: color .2s, background .2s, border-bottom-color .2s;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-weight: 600; white-space: nowrap;
}
.auc-cat:hover { color: var(--text); background: rgba(255,255,255,.03); }
.auc-cat.active { color: #e67e22; border-bottom-color: #e67e22; background: rgba(230,126,34,.06); }
.auc-cat i { font-size: 11px; }
.auc-result-info {
    padding: 6px 12px; font-size: 11px; color: var(--text-dim);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.auc-result-count { font-weight: 600; color: var(--text); }
.auc-result-cat { color: #e67e22; font-weight: 600; }
.auc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
}
.auc-row:hover { background: rgba(255,255,255,.04); }
.auc-icon img { border-radius: 5px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); }
.auc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-seller { font-size: 11px; color: var(--text-dim); }
.auc-price { font-size: 13px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.auc-price.diamond-price { color: #b9f2ff; }
.auc-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; min-width: 60px; text-align: right; }
.auc-action { flex-shrink: 0; }
.btn-sm { padding: 4px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; transition: filter .15s; }
.btn-sm:hover { filter: brightness(1.2); }
.btn-buy-auction { background: #2ecc71; color: #fff; }
.btn-cancel-auction { background: #e74c3c; color: #fff; }

/* ── 경매장 구매 확인 모달 ── */
.auc-buy-modal {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.abm-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.abm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
}
.abm-icon img {
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.3);
}
.abm-item-info { flex: 1; min-width: 0; }
.abm-item-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.abm-seller {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.abm-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.abm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,.02);
    border-radius: 6px;
    font-size: 13px;
}
.abm-label { color: var(--text-dim); }
.abm-value { font-weight: 600; color: var(--text); }
.abm-total {
    background: rgba(255,215,0,.06);
    border: 1px solid rgba(255,215,0,.15);
}
.abm-price-val {
    color: var(--gold);
    font-size: 15px;
}
.abm-actions {
    display: flex;
    gap: 8px;
}
.abm-buy-btn {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    transition: filter .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.abm-buy-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.abm-buy-btn:disabled { opacity: .6; cursor: not-allowed; }
.abm-cancel-btn {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.abm-cancel-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }

/* 장비 슬롯 아이콘 레이아웃 (legacy compat) */
.slot-row { display: flex; align-items: center; gap: 6px; }
.slot-icon { flex-shrink: 0; display: flex; align-items: center; }
.slot-icon .item-icon-img { width: 34px; height: 34px; object-fit: contain; border-radius: 5px; border: 1px solid rgba(255,255,255,.1); }
.slot-info { flex: 1; min-width: 0; }
.slot-stats { font-size: 10px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 인벤토리 아이콘 레이아웃 */
.inv-row { display: flex; align-items: center; gap: 8px; }
.inv-icon { flex-shrink: 0; display: flex; align-items: center; }
.inv-icon .item-icon-img { width: 32px; height: 32px; object-fit: contain; border-radius: 3px; border: 1px solid rgba(255,255,255,.1); }
.inv-info { flex: 1; min-width: 0; }
.item-stats-preview { font-size: 10px; color: #1eff00; margin-top: 2px; }

/* 장비-인벤토리 구분선 */
.equip-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 20px 0; }
.inv-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.inv-header h3 { margin: 0; }
.bulk-sell-area { display: flex; align-items: center; gap: 6px; }
.bulk-sell-select {
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.bulk-sell-select:focus { border-color: var(--accent); outline: none; }

/* ===== 가방 패널 (인벤토리/포션/보관함) ===== */
.bag-tabs {
    display: flex; gap: 0; margin-bottom: 16px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-card);
}
.bag-tab {
    flex: 1; padding: 10px 12px; background: transparent; border: none; color: var(--text-dim);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s;
    border-bottom: 2px solid transparent;
}
.bag-tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.bag-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(52,152,219,.08); }
.bag-section { animation: fadeIn .2s ease; }
.bag-section.hidden { display: none; }

.bag-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 10px 14px; margin-bottom: 12px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
}
.bag-toolbar-left { display: flex; align-items: center; gap: 8px; }
.bag-toolbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bag-count-badge {
    font-size: 13px; font-weight: 700; color: var(--text-bright);
    display: flex; align-items: center; gap: 6px;
}
.bag-count-badge i { color: var(--accent); }
.bag-select {
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    padding: 5px 8px; border-radius: 6px; font-size: 11px; cursor: pointer;
}
.bag-select:focus { border-color: var(--accent); outline: none; }

/* 가방 그리드 (인벤토리 슬롯 스타일) */
.bag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px;
}
.bag-slot {
    display: flex; align-items: center; gap: 10px;
    background: rgba(15,20,40,.7); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 10px; cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s; position: relative; min-height: 52px;
}
.bag-slot:hover { border-color: var(--accent); background: rgba(52,152,219,.06); transform: translateY(-1px); }
.bag-slot-icon {
    width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0;
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    position: relative;
}
.bag-slot-icon img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.bag-slot-info { flex: 1; min-width: 0; }
.bag-slot-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-slot-meta { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.bag-slot-stats { font-size: 10px; color: #1eff00; margin-top: 2px; }
.bag-slot-qty {
    position: absolute; bottom: 2px; right: 3px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: rgba(0,0,0,.7); padding: 0 3px; border-radius: 3px; line-height: 1.4;
}
.bag-slot-check {
    position: absolute; top: 4px; right: 4px; z-index: 2;
}
.bag-slot-check input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

/* 가방: 잠금 아이템 */
.bag-slot-locked { background: rgba(40,30,10,.7); border-color: rgba(255,193,7,.35) !important; }
.bag-slot-locked:hover { background: rgba(50,40,15,.8); }
.bag-slot-lock {
    position: absolute; top: 4px; left: 4px; z-index: 2;
    color: #ffc107; font-size: 11px; text-shadow: 0 0 4px rgba(255,193,7,.5);
}

/* 가방: 포션 섹션 */
.bag-potion-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bag-elixir-card { grid-column: 1 / -1; border-color: rgba(245,158,11,.2); }
.bag-elixir-card .bag-potion-label { border-bottom-color: rgba(245,158,11,.12); }
.bag-potion-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.bag-potion-label {
    font-size: 13px; font-weight: 700; color: var(--text-bright); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06);
}

/* 가방: 보석 슬롯 */
.gem-slot {
    display: flex; align-items: center; gap: 10px;
    background: rgba(20,10,40,.6); border: 1px solid rgba(168,85,247,.2);
    border-radius: 8px; padding: 8px 10px; cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s; min-height: 52px;
}
.gem-slot:hover { border-color: #a855f7; background: rgba(168,85,247,.1); box-shadow: 0 0 8px rgba(168,85,247,.15); }
.gem-slot .bag-slot-qty { background: rgba(168,85,247,.25); color: #d8b4fe; }

/* 보석 합성 */
.gem-combine-header {
    margin-top: 16px; padding: 10px 12px;
    font-size: 14px; font-weight: 600; color: #d8b4fe;
    border-bottom: 1px solid rgba(168,85,247,.25);
}
.gem-combine-empty {
    padding: 16px; text-align: center; color: var(--text-dim); font-size: 13px;
}
.gem-combine-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    flex-wrap: wrap;
}
.gem-combine-from { font-size: 13px; color: #ccc; }
.gem-combine-to { font-size: 13px; font-weight: 600; }
.gem-combine-cost { font-size: 12px; color: #ffd700; margin-left: auto; }
.btn-gem-combine {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; cursor: pointer;
    transition: background .15s;
}
.btn-gem-combine:hover { background: linear-gradient(135deg, #a855f7, #c084fc); }
.btn-gem-combine-all {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; cursor: pointer;
    transition: background .15s; white-space: nowrap;
}
.btn-gem-combine-all:hover { background: linear-gradient(135deg, #3b82f6, #60a5fa); }

/* 가방: 보관함 슬롯 */
.cash-slot {
    display: flex; align-items: center; gap: 10px;
    background: rgba(30,15,40,.6); border: 1px solid rgba(233,30,99,.2);
    border-radius: 8px; padding: 8px 10px; cursor: pointer;
    transition: border-color .2s, background .2s; min-height: 52px;
}
.cash-slot:hover { border-color: #e91e63; background: rgba(233,30,99,.08); }

/* 가방 빈 상태 */
.bag-empty {
    grid-column: 1 / -1; text-align: center; padding: 40px 20px;
    color: var(--text-dim); font-size: 14px;
}
.bag-empty i { font-size: 32px; display: block; margin-bottom: 10px; opacity: .3; }

@media (max-width: 600px) {
    .bag-grid { grid-template-columns: 1fr; }
    .bag-potion-section { grid-template-columns: 1fr; }
    .bag-toolbar { padding: 8px 10px; }
    .bag-toolbar-right { width: 100%; justify-content: flex-end; }
}

/* ===== 등급별 색상 클래스 ===== */
.rarity-poor { color: var(--rarity-poor) !important; }
.rarity-common { color: var(--rarity-common) !important; }
.rarity-uncommon { color: var(--rarity-uncommon) !important; }
.rarity-rare { color: var(--rarity-rare) !important; }
.rarity-epic { color: var(--rarity-epic) !important; }
.rarity-legendary { color: var(--rarity-legendary) !important; }
.rarity-mythic { color: var(--rarity-mythic) !important; }
.rarity-artifact { color: var(--rarity-artifact) !important; }
.rarity-border-poor { border-left-color: var(--rarity-poor) !important; }
.rarity-border-common { border-left-color: var(--rarity-common) !important; }
.rarity-border-uncommon { border-left-color: var(--rarity-uncommon) !important; }
.rarity-border-rare { border-left-color: var(--rarity-rare) !important; }
.rarity-border-epic { border-left-color: var(--rarity-epic) !important; }
.rarity-border-legendary { border-left-color: var(--rarity-legendary) !important; }
.rarity-border-mythic { border-left-color: var(--rarity-mythic) !important; }
.rarity-border-artifact { border-left-color: var(--rarity-artifact) !important; }
.rarity-heirloom { color: var(--rarity-heirloom) !important; }
.rarity-border-heirloom { border-left-color: var(--rarity-heirloom) !important; }
.rarity-glow-heirloom { border-color: var(--rarity-heirloom); box-shadow: 0 0 14px rgba(0,204,255,.45); }

/* ===== 캐시샵 ===== */
.cs-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, #0f1628 0%, #1a1f3a 50%, #0f1628 100%);
    border-bottom: 1px solid rgba(93,173,226,.15);
    position: relative; overflow: hidden;
}
.cs-header::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(93,173,226,.03) 40px, rgba(93,173,226,.03) 41px);
    pointer-events: none;
}
.cs-header h3 {
    font-size: 17px; color: var(--text); display: flex; align-items: center; gap: 8px;
    margin: 0; position: relative;
}
.cs-header h3 i {
    color: #f0c040;
    filter: drop-shadow(0 0 4px rgba(240,192,64,.4));
}
.cs-diamond-display {
    background: linear-gradient(135deg, rgba(93,173,226,.12), rgba(93,173,226,.06));
    color: #7ec8e3; padding: 7px 16px; border-radius: 20px; font-size: 15px;
    font-weight: 800; display: flex; align-items: center; gap: 7px;
    border: 1px solid rgba(93,173,226,.25); position: relative;
    text-shadow: 0 0 8px rgba(93,173,226,.3);
    letter-spacing: .3px;
}
.cs-diamond-display i {
    color: #5dade2;
    filter: drop-shadow(0 0 3px rgba(93,173,226,.5));
    animation: cs-gem-pulse 2s ease-in-out infinite;
}
@keyframes cs-gem-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* 탭 - 세그먼트 스타일 */
.cs-tabs {
    display: flex; gap: 4px; padding: 10px 12px;
    background: rgba(13,17,23,.6);
    border-bottom: 1px solid var(--border);
}
.cstab {
    flex: 1; padding: 8px 6px; font-size: 11px; cursor: pointer;
    background: rgba(255,255,255,.03); color: var(--text-dim); border: none;
    border-radius: 8px; transition: color .25s ease, background .25s ease;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-weight: 600; position: relative; overflow: hidden;
}
.cstab::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(93,173,226,.15), rgba(93,173,226,.05));
    border-radius: 8px; opacity: 0; transition: opacity .25s;
}
.cstab:hover { color: var(--text); background: rgba(255,255,255,.06); }
.cstab:hover::before { opacity: 1; }
.cstab.active {
    color: #fff; background: linear-gradient(135deg, #1a6faa, #2980b9);
    box-shadow: 0 2px 10px rgba(41,128,185,.35), inset 0 1px 0 rgba(255,255,255,.1);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.cstab.active::before { opacity: 0; }
.cstab i { font-size: 12px; }

/* 목록 - 그리드 */
.cs-list {
    padding: 14px; display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.cs-list:has(.sp-container) {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
}
.cs-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 13px;
}
.cs-empty i { display: block; font-size: 32px; margin-bottom: 12px; opacity: .3; }

/* 카드 - 수직 레이아웃 */
.cs-card {
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(180deg, rgba(26,32,55,.8) 0%, rgba(18,22,38,.95) 100%);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 12px 14px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position: relative; overflow: hidden; text-align: center;
}
.cs-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--border); transition: background .3s;
}
.cs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.12);
}
/* 등급 테두리 */
.cs-card.rarity-border-uncommon::before { background: linear-gradient(90deg, transparent, var(--rarity-uncommon), transparent); }
.cs-card.rarity-border-rare::before { background: linear-gradient(90deg, transparent, var(--rarity-rare), transparent); }
.cs-card.rarity-border-epic::before { background: linear-gradient(90deg, transparent, var(--rarity-epic), transparent); }
.cs-card.rarity-border-legendary::before { background: linear-gradient(90deg, transparent, var(--rarity-legendary), transparent); }
.cs-card.rarity-border-heirloom::before { background: linear-gradient(90deg, transparent, var(--rarity-heirloom), transparent); }
.cs-card.rarity-border-uncommon:hover { border-color: rgba(30,255,0,.2); box-shadow: 0 8px 24px rgba(30,255,0,.08); }
.cs-card.rarity-border-rare:hover { border-color: rgba(0,112,221,.25); box-shadow: 0 8px 24px rgba(0,112,221,.1); }
.cs-card.rarity-border-epic:hover { border-color: rgba(163,53,238,.25); box-shadow: 0 8px 24px rgba(163,53,238,.1); }
.cs-card.rarity-border-legendary:hover { border-color: rgba(255,128,0,.3); box-shadow: 0 8px 24px rgba(255,128,0,.12); }
.cs-card.rarity-border-heirloom:hover { border-color: rgba(0,204,255,.25); box-shadow: 0 8px 24px rgba(0,204,255,.1); }

/* 아이콘 */
.cs-card-icon {
    width: 56px; height: 56px; flex-shrink: 0; margin-bottom: 10px;
    position: relative;
}
.cs-icon-img {
    width: 56px !important; height: 56px !important;
    border-radius: 10px; border: 2px solid var(--border);
    transition: transform .3s;
}
.cs-card:hover .cs-icon-img { transform: scale(1.08); }
.cs-icon-img.rarity-glow-uncommon { border-color: var(--rarity-uncommon); box-shadow: 0 0 12px rgba(30,255,0,.25); }
.cs-icon-img.rarity-glow-rare { border-color: var(--rarity-rare); box-shadow: 0 0 14px rgba(0,112,221,.3); }
.cs-icon-img.rarity-glow-epic { border-color: var(--rarity-epic); box-shadow: 0 0 16px rgba(163,53,238,.35); }
.cs-icon-img.rarity-glow-legendary { border-color: var(--rarity-legendary); box-shadow: 0 0 18px rgba(255,128,0,.4); }
.cs-icon-img.rarity-glow-heirloom { border-color: var(--rarity-heirloom); box-shadow: 0 0 16px rgba(0,204,255,.35); }

/* 본문 */
.cs-card-body {
    flex: 1; min-width: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cs-card-name {
    font-weight: 700; font-size: 13px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.cs-card-rarity { margin-bottom: 2px; }
.cs-rarity-badge {
    font-size: 9px; padding: 2px 8px; border-radius: 10px;
    background: rgba(255,255,255,.06); font-weight: 600;
    letter-spacing: .3px; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.06);
}
.cs-card-desc {
    font-size: 11px; color: var(--text-dim); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 100%; margin-bottom: 2px;
}
.cs-card-effs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
    margin-bottom: 4px;
}
.cs-eff-tag {
    font-size: 9px; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,.05); color: var(--text-dim);
    display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid rgba(255,255,255,.04);
}
.cs-eff-tag.exp { color: #2ecc71; background: rgba(46,204,113,.08); border-color: rgba(46,204,113,.12); }
.cs-eff-tag.gold { color: #f1c40f; background: rgba(241,196,15,.08); border-color: rgba(241,196,15,.12); }
.cs-eff-tag.drop { color: #9b59b6; background: rgba(155,89,182,.08); border-color: rgba(155,89,182,.12); }
.cs-eff-tag.dur { color: #3498db; background: rgba(52,152,219,.08); border-color: rgba(52,152,219,.12); }
.cs-eff-tag.amt { color: #e67e22; background: rgba(230,126,34,.08); border-color: rgba(230,126,34,.12); }
.cs-eff-tag.stat { color: #1abc9c; background: rgba(26,188,156,.08); border-color: rgba(26,188,156,.12); }
.cs-eff-tag.slot { color: #e74c3c; background: rgba(231,76,60,.08); border-color: rgba(231,76,60,.12); }

/* 구매 영역 */
.cs-card-buy { width: 100%; margin-top: auto; padding-top: 10px; }
.cs-card-price {
    font-size: 10px; color: var(--text-dim); margin-bottom: 6px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.cs-card-price i { color: #5dade2; }
.btn-cs-buy {
    width: 100%;
    background: linear-gradient(135deg, #1a6faa, #2980b9); color: #fff;
    border: none; padding: 9px 12px; border-radius: 8px; font-size: 12px;
    font-weight: 700; cursor: pointer; transition: background .25s, box-shadow .25s, transform .25s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; position: relative; overflow: hidden;
    border: 1px solid rgba(93,173,226,.2);
}
.btn-cs-buy::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transition: left .5s;
}
.btn-cs-buy:hover:not(:disabled)::after { left: 120%; }
.btn-cs-buy:hover:not(:disabled) {
    background: linear-gradient(135deg, #2980b9, #3498db);
    box-shadow: 0 4px 14px rgba(41,128,185,.4);
    transform: translateY(-1px);
}
.btn-cs-buy:active:not(:disabled) { transform: translateY(0); }
.btn-cs-buy:disabled, .btn-cs-buy.btn-disabled {
    background: rgba(60,60,60,.6); color: #666; cursor: not-allowed;
    border-color: rgba(255,255,255,.04);
}
.btn-cs-buy.btn-disabled i { display: none; }

/* 구매완료 뱃지 */
.cs-purchased-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgba(46,204,113,.15); color: #2ecc71;
    font-size: 9px; padding: 3px 8px; border-radius: 10px;
    font-weight: 700; border: 1px solid rgba(46,204,113,.2);
    display: flex; align-items: center; gap: 3px;
}
/* 장착중 뱃지 */
.cs-equipped-badge {
    position: absolute; top: 8px; left: 8px;
    background: rgba(251,191,36,.2); color: #fbbf24;
    font-size: 9px; padding: 3px 8px; border-radius: 10px;
    font-weight: 700; border: 1px solid rgba(251,191,36,.3);
    display: flex; align-items: center; gap: 3px;
    animation: equipped-pulse 2s ease-in-out infinite;
}
@keyframes equipped-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.cs-card-equipped { box-shadow: 0 0 12px rgba(251,191,36,.2) !important; border-color: rgba(251,191,36,.4) !important; }
/* 장식 미리보기 */
.cs-deco-preview {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0;
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
}
/* 장착/해제 버튼 */
.btn-cs-equip {
    width: 100%; padding: 8px 0; border: none; border-radius: 6px; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
    font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: transform .2s, box-shadow .2s, filter .2s; position: relative; overflow: hidden;
}
.btn-cs-equip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168,85,247,.4); filter: brightness(1.1); }
.btn-cs-unequip {
    width: 100%; padding: 8px 0; border: none; border-radius: 6px; cursor: pointer;
    background: rgba(239,68,68,.2); color: #f87171; border: 1px solid rgba(239,68,68,.3);
    font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background .2s;
}
.btn-cs-unequip:hover { background: rgba(239,68,68,.3); }

/* 모바일 */
@media (max-width: 600px) {
    .cs-list { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
    .cs-card { padding: 12px 8px 10px; }
    .cs-card-icon { width: 44px; height: 44px; margin-bottom: 8px; }
    .cs-icon-img { width: 44px !important; height: 44px !important; }
    .cs-card-name { font-size: 12px; }
    .cs-tabs { gap: 3px; padding: 8px 8px; }
    .cstab { padding: 7px 4px; font-size: 10px; }
    .cstab span { display: none; }
}

/* ===== 반응형 ===== */
@media (max-width: 900px) {
    #game-screen { height: 100vh; height: 100dvh; }
    #game-body { flex-direction: column; }
    #sidebar {
        width: 100%;
        order: 2;
        border-right: none;
        border-top: 1px solid #2a3a6e;
        max-height: none;
        padding: 8px;
        gap: 6px;
        overflow-y: auto;
        flex-shrink: 0;
    }
    /* 모바일에서 사이드바 내부를 격자 배치 */
    .sb-bars { display: flex; flex-direction: column; gap: 3px; }
    .sb-bar { height: 18px; }
    .sb-section { padding: 6px 8px; }
    .sb-quest-section { display: none; }
    .sb-drop-log-section { display: none; }
    .sb-hunt-ctrl { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 4px; }
    .btn-hunt-action { width: auto; flex: 1; min-width: 90px; padding: 10px 8px; font-size: 13px; }
    .btn-hunt-sub { width: auto; flex: 1; min-width: 90px; padding: 8px; }
    .btn-pot { min-width: 70px; padding: 6px 4px; font-size: 11px; }
    .pot-btn-qty { font-size: 11px; padding: 1px 4px; }
    .sb-hunt-status { font-size: 11px; }
    #main-area { order: 1; flex: 1; min-height: 0; }
    #main-nav {
        position: fixed;
        top: 0; left: 0;
        width: 220px;
        height: 100vh; height: 100dvh;
        background: linear-gradient(180deg, #0f1923 0%, #111827 100%);
        border-right: 1px solid #2a3a6e;
        flex-direction: column;
        gap: 0;
        overflow-y: auto;
        z-index: 1000;
        padding: 12px 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    #main-nav.nav-open { transform: translateX(0); }
    #main-nav::-webkit-scrollbar { width: 3px; }
    #main-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
    .nav-btn {
        width: 100%;
        height: auto;
        padding: 12px 20px;
        font-size: 13px;
        border-bottom: 1px solid rgba(255,255,255,.04);
        border-right: none;
        justify-content: flex-start;
        flex-shrink: 0;
    }
    .nav-btn i { width: 20px; text-align: center; font-size: 13px; }
    .nav-btn.active {
        border-bottom-color: rgba(255,255,255,.04);
        border-left: 3px solid var(--gold);
        background: rgba(255,215,0,.06);
    }
    .hamburger-btn { display: flex; }
    .mobile-hdr-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px;
        width: 100%;
    }
    .mobile-player-info { display: flex; }
    .hdr-left { display: none; }
    .sb-identity { display: none; }
    .sb-resources { display: flex; font-size: 11px; }
    #top-bar { height: auto; padding: 0 8px; flex-wrap: wrap; }
    .chat-messages { height: 100px; }
    #panels { padding: 10px 12px; }
}
@media (max-width: 600px) {
    .equip-grid { flex-direction: column; align-items: center; }
    .equip-slot { width: 100%; max-width: 280px; }
    .equip-slot-sm { width: 100%; max-width: 135px; }
    .equip-weapons, .equip-extra { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .equip-weapons .equip-slot { width: 135px; }
    .stat-detail { grid-template-columns: 1fr; }
    .zone-list { grid-template-columns: 1fr; }
    .nav-btn { padding: 10px 16px; font-size: 12px; }
    .sb-section:not(.sb-hunt-ctrl) { display: none; }
    .sb-bars, .sb-hunt-ctrl { display: flex; }
    #panels { padding: 8px; }
    .talent-tier-row { grid-template-columns: 1fr 1fr !important; }
    .talent-node.empty { display: none; }
    .talent-node .talent-tooltip { display: none 1fr !important; }
    .talent-node.empty { display: none; }
    /* 캐시샵 모바일 */
    .cs-card { flex-direction: column; text-align: center; gap: 8px; }
    .cs-card-buy { width: 100%; }
    .btn-cs-buy { width: 100%; justify-content: center; }
    .cs-card-effs { justify-content: center; }
    .cstab { font-size: 11px; padding: 8px 4px; }
    .wb-buff-row { flex-direction: column; }
    .wb-buff-row .wb-banner, .hunt-buff-panel { flex: none; width: 100%; }
}

/* ==========================================
   TALENT SYSTEM (특성)
   ========================================== */
.talent-panel-header {
    margin-bottom: 10px;
}
.talent-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-bright);
}
.talent-panel-header h3 i { margin-right: 6px; color: var(--accent); }

.talent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(30,42,74,.5), rgba(22,33,62,.5));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
}
.talent-header h3 { margin: 0; }
.talent-points-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #ccd;
}
.talent-points-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0,0,0,.25);
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.06);
}
.talent-pts-label {
    font-size: 10px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.talent-points-display strong {
    color: #ffcc00;
    font-size: 15px;
}
.talent-used { color: #777; font-size: 10px; }

.talent-locked-msg {
    text-align: center;
    padding: 30px 16px;
    color: #888;
    font-size: 14px;
}
.talent-locked-msg i { font-size: 28px; display: block; margin-bottom: 8px; color: #555; }

.talent-trees {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.talent-tree {
    background: rgba(0,0,0,0.2);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    transition: border-color 0.3s;
}
.talent-tree:hover {
    border-color: rgba(255,255,255,.1);
}
.talent-tree-title {
    font-size: 13px;
    color: #ffcc00;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,204,0,.12);
}
.talent-spec-icon-img {
    width: 20px; height: 20px; border-radius: 3px; vertical-align: middle;
    margin-right: 4px; border: 1px solid rgba(255,255,255,.15);
}
.talent-toggle {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; user-select: none;
}
.talent-toggle:hover { color: #ffe066; }
.talent-toggle-icon {
    font-size: 11px; color: #888; transition: transform 0.25s;
}
.talent-toggle.collapsed .talent-toggle-icon {
    transform: rotate(180deg);
}
.talent-grid.collapsed {
    display: none;
}
.talent-pts-badge {
    font-size: 11px; color: #95a5a6; font-weight: 400; margin-left: 6px;
}

.talent-tier {
    margin-bottom: 6px;
}
.talent-tier:last-child { margin-bottom: 0; }

.talent-avail-banner {
    background: linear-gradient(90deg, rgba(255,204,0,.1), rgba(255,204,0,.03));
    border: 1px solid rgba(255,204,0,.2);
    border-radius: 5px;
    padding: 4px 10px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #ddd;
    text-align: center;
}
.talent-avail-banner strong { color: #ffcc00; font-size: 13px; }
.talent-tier-label {
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
    padding-left: 2px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.tier-req { color: #e67e22; font-size: 9px; font-weight: 400; }

.talent-tier-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

/* ── 특성 노드: 컴팩트 가로 레이아웃 ── */
.talent-node {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1.5px solid #3a3a4a;
    background: linear-gradient(135deg, rgba(30,30,45,0.8), rgba(20,20,35,0.9));
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    min-height: 0;
    overflow: hidden;
}
.talent-node.empty {
    visibility: hidden;
    padding: 0;
    border: none;
    min-height: 0;
    height: 0;
}
.talent-node.available {
    border-color: #27ae60;
    background: linear-gradient(135deg, rgba(39,174,96,0.12), rgba(30,130,72,0.06));
    cursor: pointer;
    animation: talent-pulse 2.5s ease-in-out infinite;
}
@keyframes talent-pulse {
    0%, 100% { box-shadow: 0 0 3px rgba(39,174,96,0.15); }
    50% { box-shadow: 0 0 10px rgba(39,174,96,0.3); }
}
.talent-node.available:hover {
    border-color: #2ecc71;
    background: linear-gradient(135deg, rgba(39,174,96,0.25), rgba(30,130,72,0.12));
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(39,174,96,0.25);
}
.talent-node.invested {
    border-color: #2980b9;
    background: linear-gradient(135deg, rgba(41,128,185,0.12), rgba(30,100,160,0.06));
    cursor: pointer;
}
.talent-node.invested:hover {
    border-color: #3498db;
    background: linear-gradient(135deg, rgba(41,128,185,0.25), rgba(30,100,160,0.12));
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(41,128,185,0.25);
}
.talent-node.maxed {
    border-color: rgba(241,196,15,.5);
    background: linear-gradient(135deg, rgba(241,196,15,0.1), rgba(200,160,10,0.04));
    box-shadow: 0 0 6px rgba(241,196,15,0.15);
}
.talent-node.locked {
    opacity: 0.3;
    border-color: #2a2a35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.talent-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    position: relative;
}
.talent-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.talent-node.maxed .talent-icon {
    border-color: rgba(241,196,15,.4);
    box-shadow: 0 0 6px rgba(241,196,15,0.2);
}
.talent-node.invested .talent-icon {
    border-color: rgba(41,128,185,.3);
}

.talent-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.talent-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.talent-name {
    font-size: 11px;
    font-weight: 700;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.talent-rank {
    font-size: 10px;
    color: #aaa;
    white-space: nowrap;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0,0,0,.3);
    line-height: 1.5;
    flex-shrink: 0;
}
.rank-max { color: #f1c40f; font-weight: 700; background: rgba(241,196,15,0.1); }

.talent-effect {
    font-size: 10px;
    color: #777;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.talent-current {
    font-size: 10px;
    color: #3498db;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 특성 노드: 호버 툴팁 */
.talent-node .talent-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    padding: 10px 12px;
    background: rgba(10,10,20,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    z-index: 100;
    pointer-events: none;
    text-align: left;
}
.talent-node:hover .talent-tooltip { display: block; }
.talent-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(255,255,255,.12);
}
.talent-tooltip .tt-name { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.talent-tooltip .tt-rank { font-size: 10px; color: #aaa; margin-bottom: 6px; }
.talent-tooltip .tt-rank b { color: #ffcc00; }
.talent-tooltip .tt-desc { font-size: 11px; color: #bbb; line-height: 1.4; margin-bottom: 6px; }
.talent-tooltip .tt-effect { font-size: 11px; color: #888; line-height: 1.4; }
.talent-tooltip .tt-effect span { color: #1eff00; }
.talent-tooltip .tt-current { font-size: 11px; color: #3498db; font-weight: 600; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.06); }
.talent-tooltip .tt-hint { font-size: 10px; color: #27ae60; margin-top: 4px; font-style: italic; }

/* ==========================================
   PLAYER INFO MODAL (플레이어 정보)
   ========================================== */
.player-info-modal {
    max-width: 95vw;
    width: 420px;
    padding: 0 !important;
    overflow: hidden;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
@media (min-width: 768px) { .player-info-modal { width: 520px; } }

/* 닫기 버튼 */
.pi-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
    backdrop-filter: blur(4px);
}
.pi-close-btn:hover {
    background: rgba(231,76,60,.3);
    color: #e74c3c;
    border-color: rgba(231,76,60,.5);
    transform: scale(1.1);
}

.pi-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 50px 16px 20px;
    background: linear-gradient(135deg, rgba(15,52,96,.95), rgba(22,33,62,.95));
    border-bottom: 1px solid rgba(255,255,255,.1);
    position: relative;
}
.pi-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* 직업 아이콘 아바타 */
.pi-avatar-wrap {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.15);
    box-shadow: 0 0 20px rgba(0,0,0,.3); overflow: hidden; flex-shrink: 0;
}
.pi-avatar-wrap.horde { border-color: var(--horde); }
.pi-avatar-wrap.alliance { border-color: var(--alliance); }
.pi-class-icon { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255,255,255,.2)); }

.pi-identity { flex: 1; min-width: 0; }
.pi-title-tag { font-size: 11px; color: var(--gold); margin-bottom: 2px; font-weight: 600; }
.pi-name { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pi-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.pi-badge {
    padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.08); color: var(--text-dim);
    backdrop-filter: blur(4px);
}
.pi-badge.horde { background: rgba(181,53,53,.25); color: var(--horde); }
.pi-badge.alliance { background: rgba(51,122,183,.25); color: var(--alliance); }
.pi-badge.pi-conq { background: rgba(255,215,0,.15); color: var(--gold); }
.pi-badge-class { display: inline-flex; align-items: center; gap: 4px; }
.pi-badge-class-icon { width: 14px; height: 14px; vertical-align: middle; border-radius: 2px; }
.pi-spec-badge { background: rgba(155,89,182,.2); color: #bb8fce; }

/* 싱글 컬럼 컨텐츠 */
.pi-content { }

/* 위치 바 */
.pi-zone-bar {
    padding: 6px 16px; font-size: 12px; color: var(--text-dim);
    background: rgba(0,0,0,.2); border-bottom: 1px solid rgba(255,255,255,.04);
    display: flex; align-items: center; gap: 5px;
}
.pi-zone-bar i { color: var(--accent); font-size: 11px; }
.pi-zone-type { color: var(--rarity-epic); font-weight: 700; }

.pi-summary-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pi-sum-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--text-dim); display: inline-flex; align-items: center; gap: 3px; }
.pi-sum-badge i { font-size: 10px; }

.pi-section { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pi-section:last-child { border-bottom: none; }
.pi-section-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.pi-section-title i { color: var(--accent); font-size: 12px; }
.pi-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pi-stat {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: rgba(15,52,96,.5); border-radius: 8px; font-size: 13px;
    border: 1px solid rgba(255,255,255,.05);
    transition: background .15s;
}
.pi-stat:hover { background: rgba(15,52,96,.7); }
.pi-stat i { font-size: 12px; }
.pi-stat-name { color: var(--text-dim); flex: 1; }
.pi-stat-val { font-weight: 700; font-size: 15px; color: #fff; }

/* 장비 리스트 */
.pi-eq-list { display: flex; flex-direction: column; gap: 5px; }
.pi-eq-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    background: var(--bg-card); border-radius: 6px; border-left: 3px solid transparent;
    transition: background .15s;
}
.pi-eq-row:hover { background: rgba(255,255,255,.06); }
.rarity-border-poor { border-left-color: var(--rarity-poor); }
.rarity-border-common { border-left-color: var(--rarity-common); }
.rarity-border-uncommon { border-left-color: var(--rarity-uncommon); }
.rarity-border-rare { border-left-color: var(--rarity-rare); }
.rarity-border-epic { border-left-color: var(--rarity-epic); }
.rarity-border-legendary { border-left-color: var(--rarity-legendary); }
.rarity-border-heirloom { border-left-color: var(--rarity-heirloom); }
.rarity-border-artifact { border-left-color: var(--rarity-artifact); }
.pi-eq-icon-wrap { width: 36px; height: 36px; flex-shrink: 0; }
.pi-eq-icon { width: 34px !important; height: 34px !important; border-radius: 5px; }
.pi-eq-detail { flex: 1; min-width: 0; overflow: hidden; }
.pi-eq-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-eq-sub { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 1px; }
.pi-eq-slot { color: #8e8e8e; }
.pi-eq-forge { color: #2ecc71; font-weight: 700; }
.pi-eq-forge.titan { color: #e67e22; }
.pi-eq-gems { color: #e91e63; font-weight: 600; }
.pi-eq-gems i { font-size: 9px; margin-right: 1px; }
.pi-eq-corrupt { color: #9b59b6; }
.pi-eq-corrupt i { font-size: 9px; }
.pi-eq-ench { color: #3498db; font-weight: 600; }
.pi-eq-ench i { font-size: 9px; }
.pi-eq-stats { font-size: 10px; color: #8e9eac; margin-top: 3px; line-height: 1.4; }

/* 장비 비교 */
.pi-eq-compare { display: flex; gap: 6px; flex-shrink: 0; align-items: center; margin-left: auto; }
.pi-cmp-label { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 2px; }
.pi-cmp-up { color: #2ecc71; font-weight: 700; font-size: 10px; }
.pi-cmp-down { color: #e74c3c; font-weight: 700; font-size: 10px; }
.pi-eq-cmp-note { font-size: 10px; color: var(--text-dim); font-weight: 400; margin-left: auto; }

/* 특성 리스트 */
.pi-talent-list { display: flex; flex-direction: column; gap: 6px; }
.pi-talent-group { margin-bottom: 6px; }
.pi-talent-group:last-child { margin-bottom: 0; }
.pi-sub-title {
    font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
    padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.pi-sub-title i { font-size: 10px; }
.pi-talent-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.pi-talent-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    background: var(--bg-card); border-radius: 6px; font-size: 12px;
    border: 1px solid transparent; transition: background .15s;
}
.pi-talent-row:hover { background: rgba(255,255,255,.05); }
.pi-talent-row.pi-talent-maxed { border-color: rgba(241,196,15,.15); background: rgba(241,196,15,.04); }
.pi-talent-icon-img { width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); }
.pi-talent-row.pi-talent-maxed .pi-talent-icon-img { border-color: rgba(241,196,15,.3); }
.pi-talent-name { flex-shrink: 0; color: var(--text); font-weight: 600; font-size: 12px; }
.pi-talent-effect { flex: 1; font-size: 10px; color: #8e9eac; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pi-talent-rank {
    color: #aaa; font-weight: 700; font-size: 11px; flex-shrink: 0;
    min-width: 32px; text-align: center; padding: 1px 6px;
    border-radius: 4px; background: rgba(0,0,0,.25);
}
.pi-talent-rank.rank-max { color: #f1c40f; background: rgba(241,196,15,.1); }

/* 모달 섹션 접기 */
.pi-toggle { cursor: pointer; user-select: none; justify-content: space-between !important; }
.pi-toggle:hover { color: var(--accent); }
.pi-toggle-icon { font-size: 10px; color: #666; transition: transform 0.2s; margin-left: auto; }
.pi-collapsed .pi-toggle-icon { transform: rotate(180deg); }
.pi-body-hidden { display: none !important; }

/* 퀘스트 포기 버튼 */
.q-abandon-btn { margin-left: 8px; font-size: 11px !important; padding: 2px 8px !important; opacity: 0.7; }
.q-abandon-btn:hover { opacity: 1; }

/* 룬 노드 리스트 */
.pi-rune-list { display: flex; flex-direction: column; gap: 4px; }
.pi-rune-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 768px) { .pi-rune-grid { grid-template-columns: 1fr 1fr; } }
.pi-rune-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 10px;
    background: var(--bg-card); border-radius: 6px; font-size: 12px;
    border: 1px solid transparent; transition: background .15s;
}
.pi-rune-row:hover { background: rgba(255,255,255,.05); }
.pi-rune-row.pi-rune-keystone-row { border-color: rgba(163,94,255,.2); background: rgba(163,94,255,.05); }
.pi-rune-row.pi-rune-notable-row { border-color: rgba(52,152,219,.15); background: rgba(52,152,219,.04); }
.pi-rune-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.pi-rune-name { font-weight: 600; color: var(--text); flex-shrink: 0; }
.pi-rune-type {
    font-size: 10px; padding: 1px 6px; border-radius: 4px;
    background: rgba(255,255,255,.08); color: var(--text-dim); flex-shrink: 0;
}
.pi-rune-stat { font-size: 10px; color: var(--text-dim); }
.pi-rune-keystone { background: rgba(163,94,255,.2); color: #a35eff; font-weight: 600; }
.pi-rune-notable { background: rgba(52,152,219,.2); color: #3498db; }
.pi-rune-stats { flex: 1; text-align: right; font-size: 10px; color: #8e9eac; }

/* 펫 / 탈것 리스트 */
.pi-pet-list { display: flex; flex-direction: column; gap: 5px; }
.pi-pet-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    background: var(--bg-card); border-radius: 6px; border-left: 3px solid transparent;
    transition: background .15s;
}
.pi-pet-row:hover { background: rgba(255,255,255,.06); }
.pi-pet-icon {
    width: 34px; height: 34px; border-radius: 5px; flex-shrink: 0;
    object-fit: cover; border: 1px solid rgba(255,255,255,.1);
}
.pi-pet-info { flex: 1; min-width: 0; overflow: hidden; }
.pi-pet-name { font-size: 12px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-pet-sub { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.pi-pet-sub i { font-size: 10px; }
.pi-empty-hint { font-size: 12px; color: var(--text-dim); text-align: center; padding: 12px; opacity: .6; }

/* 세부 스탯 태그 */
.pi-detail-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.pi-detail-tag {
    font-size: 11px; padding: 4px 10px; border-radius: 10px;
    background: rgba(255,255,255,.06); color: var(--text-dim);
    display: flex; align-items: center; gap: 4px;
}
.pi-detail-tag b { color: var(--text); margin-left: 2px; }

/* ==========================================
   포션 버튼 행 (HP/MP 분리) - 리디자인
   ========================================== */
.potion-btn-row {
    display: flex; gap: 6px; margin-top: 6px;
}
.btn-pot {
    position: relative;
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
    color: #fff;
    overflow: hidden;
}
.btn-pot-hp {
    background: linear-gradient(135deg, #b71c1c 0%, #e53935 100%);
    box-shadow: 0 2px 8px rgba(229,57,53,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-pot-hp:hover {
    background: linear-gradient(135deg, #c62828 0%, #ef5350 100%);
    box-shadow: 0 3px 12px rgba(229,57,53,.4), inset 0 1px 0 rgba(255,255,255,.15);
    transform: translateY(-1px);
}
.btn-pot-hp:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(229,57,53,.2); }
.btn-pot-mp {
    background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
    box-shadow: 0 2px 8px rgba(66,165,245,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-pot-mp:hover {
    background: linear-gradient(135deg, #1976d2 0%, #64b5f6 100%);
    box-shadow: 0 3px 12px rgba(66,165,245,.4), inset 0 1px 0 rgba(255,255,255,.15);
    transform: translateY(-1px);
}
.btn-pot-mp:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(66,165,245,.2); }

.pot-btn-icon { font-size: 13px; opacity: .9; }
.pot-btn-label { font-size: 11px; opacity: .85; letter-spacing: .5px; }
.pot-btn-qty {
    font-size: 12px; font-weight: 700;
    background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 6px;
    min-width: 20px; text-align: center;
}

/* 자동사용 배지 (버튼 내 회전 아이콘) */
.pot-auto-badge {
    position: absolute; top: 2px; right: 3px;
    font-size: 9px; color: #a5d6a7;
    animation: potAutoSpin 2s linear infinite;
    line-height: 1;
}
.pot-auto-badge.hidden { display: none; }
.pot-auto-on {
    border-color: rgba(76,175,80,.5) !important;
    box-shadow: 0 0 8px rgba(76,175,80,.2), 0 2px 8px rgba(0,0,0,.15);
}
.pot-auto-on .pot-btn-qty { background: rgba(76,175,80,.3); }
@keyframes potAutoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 버프 표시 (사냥 패널 내 버프 패널로 이동) */
.buff-row { display: none; }
.med-buff-tag, .cash-buff-tag, .svr-buff-tag {
    display: inline-flex; align-items: center; gap: 1px;
    padding: 1px 4px; border-radius: 6px;
    font-weight: 600; font-size: 9px;
    white-space: nowrap;
    line-height: 1.3;
}
.med-buff-tag {
    background: rgba(155,89,182,0.12); color: #ce93d8;
    border: 1px solid rgba(155,89,182,0.25);
}
.cash-buff-tag {
    background: rgba(46,204,113,0.12); color: #81c784;
    border: 1px solid rgba(46,204,113,0.25);
}
.svr-buff-tag {
    background: rgba(255,152,0,0.12); color: #ffb74d;
    border: 1px solid rgba(255,152,0,0.25);
}
.med-buff-tag i, .cash-buff-tag i, .svr-buff-tag i { font-size: 7px; }
.med-buff-tag .med-time, .cash-buff-tag .med-time {
    font-size: 8px; color: #ffd54f; margin-left: 1px; font-weight: 700;
}

/* 드롭 필터 */
.drop-filter-select {
    background: var(--bg-input); color: #f39c12; border: 1px solid #f39c12;
    padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;
    font-weight: 600;
}
.drop-filter-select:focus { border-color: var(--accent); outline: none; }
.drop-filter-select option { color: var(--text); background: var(--bg-input); }

/* 포션 슬롯 자동 표시 */
.pot-auto-active { border-color: #2ecc71 !important; box-shadow: 0 0 6px rgba(46,204,113,0.3) !important; }
.auto-badge { color: #2ecc71; font-size: 11px; margin-left: 4px; animation: spin 2s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* 자동 포션 로그 */
.auto-pot-log {
    background: rgba(46,204,113,0.1) !important; border-left: 3px solid #2ecc71 !important;
    font-size: 12px; color: #2ecc71 !important; padding: 4px 8px !important;
}

/* ==========================================
   업적 (Achievements)
   ========================================== */
.ach-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.ach-header h3 { margin: 0; font-size: 16px; }
.ach-summary {
    font-size: 12px; color: var(--text-dim);
    display: flex; align-items: center; gap: 8px;
}
.ach-summary-done {
    color: #2ecc71; font-weight: 700;
}
.ach-summary-total {
    color: var(--text-dim);
}
.ach-summary-diamond {
    color: #5dade2; font-weight: 600;
    display: inline-flex; align-items: center; gap: 3px;
}
.achieve-cats {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.achieve-cat {
    background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: border-color .2s, color .2s;
}
.achieve-cat:hover { border-color: var(--accent); color: var(--text); }
.achieve-cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 달성항목 숨기기 토글 */
.ach-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 6px 0; margin-bottom: 6px;
}
.ach-toggle {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 12px; color: var(--text-dim); user-select: none;
}
.ach-toggle input { display: none; }
.ach-toggle-slider {
    width: 32px; height: 16px; background: rgba(255,255,255,.1);
    border-radius: 8px; position: relative; transition: background .25s;
    flex-shrink: 0;
}
.ach-toggle-slider::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; background: #888; border-radius: 50%;
    transition: left .25s, background .25s;
}
.ach-toggle input:checked + .ach-toggle-slider {
    background: rgba(46,204,113,.25);
}
.ach-toggle input:checked + .ach-toggle-slider::after {
    left: 18px; background: #2ecc71;
}
.ach-toggle-label { line-height: 1; }

.achieve-list { display: flex; flex-direction: column; gap: 8px; }
.achieve-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px; transition: border-color .25s;
}
.achieve-item.ach-complete { border-color: var(--gold); }
.achieve-item.ach-claimed { border-color: #333; opacity: 0.7; }
.ach-icon {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border-radius: 8px; font-size: 18px; color: var(--gold);
    flex-shrink: 0;
}
.ach-claimed .ach-icon { color: #666; }
.ach-body { flex: 1; min-width: 0; }
.ach-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.ach-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.ach-progress-bar {
    height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin-bottom: 2px;
}
.ach-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.ach-progress-text { font-size: 11px; color: var(--text-dim); }
.ach-reward { font-size: 11px; color: var(--gold); margin-top: 2px; }
.ach-reward i { margin-right: 2px; }
.ach-action { flex-shrink: 0; }
.ach-done-badge { color: #2ecc71; font-size: 12px; font-weight: 600; }
.ach-locked { color: #555; font-size: 16px; }
.achieve-item.ach-hidden { border-color: #2a1f3d; background: rgba(90,50,140,0.08); }
.ach-hidden .ach-icon { color: #8e44ad; }
.ach-hidden .ach-name { color: #9b59b6; }
.ach-hidden .ach-desc { color: #7d3c98; font-style: italic; }
.ach-hidden-badge {
    display: inline-block; background: linear-gradient(135deg, #8e44ad, #6c3483);
    color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    margin-right: 5px; letter-spacing: 1px; vertical-align: middle;
}

/* ==========================================
   칭호 (Titles)
   ========================================== */
.active-title-display { margin-bottom: 12px; }
.active-title {
    background: var(--surface); border: 1px solid var(--gold); border-radius: 8px;
    padding: 10px 14px; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.active-title i { color: var(--gold); }
.active-title strong { color: var(--gold); }
.btn-title-unequip { margin-left: auto; }

.title-list { display: flex; flex-direction: column; gap: 6px; }
.title-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 12px; transition: border-color .2s;
}
.title-owned { border-color: var(--accent); }
.title-locked { opacity: 0.5; }
.title-active { border-color: var(--gold) !important; background: rgba(255,215,0,0.05); }
.title-name { font-weight: 600; font-size: 13px; }
.title-name i { color: var(--gold); margin-right: 4px; }
.title-desc { flex: 1; font-size: 12px; color: var(--text-dim); }
.title-action { flex-shrink: 0; }
.title-equipped { color: #2ecc71; font-size: 12px; font-weight: 600; }
.title-item.title-hidden { border-color: #2a1f3d; background: rgba(90,50,140,0.08); }
.title-hidden .title-name { color: #9b59b6; }
.title-hidden .title-desc { color: #7d3c98; font-style: italic; }
.title-hidden-badge {
    display: inline-block; background: linear-gradient(135deg, #8e44ad, #6c3483);
    color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    margin-right: 3px; letter-spacing: 1px; vertical-align: middle;
}

/* ==========================================
   도감 (Collection)
   ========================================== */
.collection-bonus { margin-bottom: 12px; }
.coll-bonus-info {
    background: var(--surface); border: 1px solid var(--gold); border-radius: 8px;
    padding: 10px 14px; font-size: 13px; color: var(--gold);
}
.coll-bonus-info i { margin-right: 4px; }

.collection-progress { margin-bottom: 10px; }
.coll-prog-bar {
    width: 100%; height: 8px; background: var(--surface); border-radius: 4px;
    overflow: hidden; border: 1px solid var(--border); margin-bottom: 4px;
}
.coll-prog-fill {
    height: 100%; background: linear-gradient(90deg, #2ecc71, #27ae60);
    border-radius: 4px; transition: width .4s ease;
}
.coll-prog-text {
    font-size: 12px; color: var(--text-dim); text-align: right;
}
.coll-pct { color: #2ecc71; font-weight: 600; }

.collection-cats {
    display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;
}
.coll-cat {
    background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: border-color .2s, color .2s;
}
.coll-cat:hover { border-color: var(--accent); color: var(--text); }
.coll-cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.coll-unreg-toggle {
    display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
    font-size: 11px; color: var(--text-dim); cursor: pointer; padding: 4px 8px;
    border-radius: 4px; border: 1px solid var(--border); background: var(--surface);
    transition: border-color .2s, color .2s, background .2s; user-select: none;
}
.coll-unreg-toggle:hover { border-color: var(--accent); color: var(--text); }
.coll-unreg-toggle input { accent-color: var(--accent); cursor: pointer; }
.coll-unreg-toggle:has(input:checked) { border-color: var(--accent); color: var(--accent); background: rgba(52,152,219,.1); }

.collection-list { display: flex; flex-direction: column; gap: 6px; max-height: 600px; overflow-y: auto; }
.coll-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 12px; transition: border-color .2s;
}
.coll-registered { border-color: #2ecc71; }
.coll-unregistered { opacity: 0.6; }
.coll-unregistered .coll-icon-img { filter: grayscale(100%); }
.coll-name-grey { color: #666 !important; }
.btn-coll-reg-disabled { opacity: 0.5; cursor: not-allowed; }
.coll-icon { width: 36px; height: 36px; flex-shrink: 0; }
.coll-icon-img { width: 36px !important; height: 36px !important; border-radius: 4px; }
.coll-body { flex: 1; min-width: 0; }
.coll-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.coll-rarity-tag { font-size: 10px; margin-bottom: 2px; font-weight: 600; }
.coll-bonus { font-size: 11px; color: var(--text-dim); }
.coll-action { flex-shrink: 0; }
.coll-done { color: #2ecc71; font-size: 12px; font-weight: 600; }

/* 채팅 칭호 태그 */
.cm-name .chat-title-tag { color: var(--gold); font-size: 11px; }

/* ===== 명상 (Meditation) ===== */
.med-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: linear-gradient(135deg, #0d1b2a 0%, #1a1035 50%, #1b2838 100%);
    border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;
    position: relative; overflow: hidden;
}
.med-header::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(124,58,237,.15) 0%, transparent 70%);
    pointer-events: none;
}
.med-header-left { display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.med-title { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; }
.med-title i { color: #a78bfa; margin-right: 8px; font-size: 18px; }
.med-header-sub { font-size: 11px; color: var(--text-dim); margin-left: 26px; }
.med-mp-wrap {
    z-index: 1; min-width: 140px;
    background: rgba(15,23,42,.6); border: 1px solid rgba(96,165,250,.25);
    border-radius: 10px; padding: 8px 12px;
    backdrop-filter: blur(4px);
}
.med-mp-top {
    display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #60a5fa;
    margin-bottom: 5px;
}
.med-mp-top i { font-size: 11px; }
.med-mp-label { color: #94a3b8; }
.med-mp-value { margin-left: auto; font-variant-numeric: tabular-nums; }
.med-mp-bar-outer {
    width: 100%; height: 6px; background: rgba(255,255,255,.08);
    border-radius: 3px; overflow: hidden;
}
.med-mp-bar-inner {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width .4s ease; position: relative;
}
.med-mp-bar-inner::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25));
    border-radius: 0 3px 3px 0;
}
.med-auto-status {
    margin: 8px 16px; padding: 10px 14px; border-radius: 8px;
    background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(59,130,246,.10));
    border: 1px solid rgba(139,92,246,.3);
    font-size: 13px; color: #c4b5fd; display: flex; align-items: center; gap: 8px;
}
.med-auto-status i { color: #a78bfa; font-size: 14px; }
.med-auto-time { margin-left: auto; font-weight: 700; color: #a78bfa; font-size: 12px; }
.med-active-buffs { padding: 0 16px; }
.med-active-title {
    font-size: 13px; font-weight: 700; color: #fbbf24; padding: 10px 0 8px;
    display: flex; align-items: center; gap: 6px;
}
.med-active-title i { margin-right: 2px; }
.med-active-title .med-active-count {
    font-size: 11px; background: rgba(251,191,36,.15); color: #fbbf24;
    padding: 1px 8px; border-radius: 10px; font-weight: 700;
}
.med-active-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin-bottom: 6px;
    background: rgba(255,255,255,.03); border-radius: 8px; font-size: 12px;
    border: 1px solid rgba(255,255,255,.05);
    transition: background .2s;
}
.med-active-item:hover { background: rgba(255,255,255,.06); }
.med-active-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.med-active-info { flex: 1; min-width: 0; }
.med-active-name { font-weight: 600; color: var(--text); font-size: 12px; }
.med-active-stats { color: #4ade80; font-size: 11px; }
.med-active-timer {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    flex-shrink: 0;
}
.med-active-time { color: #93c5fd; font-size: 12px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.med-active-timer-bar {
    width: 60px; height: 4px; background: rgba(255,255,255,.1);
    border-radius: 2px; overflow: hidden;
}
.med-active-timer-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #93c5fd);
    transition: width 1s linear;
}

/* 명상 일괄 시전 바 */
.med-bulk-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; margin: 0;
    background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(124,58,237,.06));
    border-bottom: 1px solid rgba(124,58,237,.3);
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(8px);
    animation: medBulkSlideIn .25s ease;
}
@keyframes medBulkSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.med-bulk-bar.hidden { display: none; }
.med-bulk-info {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text);
}
.med-bulk-icon { color: #a78bfa; font-size: 14px; }
.med-bulk-dot { color: var(--text-dim); }
.med-sel-mp { color: #60a5fa; }
.btn-med-bulk {
    padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.btn-med-bulk:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.5); }
.btn-med-bulk:active { transform: translateY(0); }
.btn-med-bulk i { margin-right: 4px; }

/* 명상 툴바 (전체선택 + 필터) */
.med-toolbar {
    padding: 8px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.med-select-all-label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 13px; color: var(--text-dim);
    user-select: none;
}
.med-select-all-label:hover { color: var(--text); }
.med-select-all-label input { display: none; }
.med-filter-wrap { display: flex; gap: 4px; }
.med-filter-btn {
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 11px; padding: 3px 10px;
    border-radius: 14px; cursor: pointer; transition: border-color .2s, color .2s;
    font-weight: 600;
}
.med-filter-btn:hover { border-color: #7c3aed55; color: var(--text); }
.med-filter-btn.active {
    background: rgba(124,58,237,.18); border-color: #7c3aed88;
    color: #a78bfa;
}

.med-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.med-empty { text-align: center; padding: 40px; color: var(--text-dim); font-size: 13px; }
.med-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px;
    transition: border-color .25s, box-shadow .25s, transform .2s, opacity .3s;
    animation: medCardFadeIn .3s ease both;
}
@keyframes medCardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.med-card:hover { border-color: #7c3aed55; box-shadow: 0 2px 16px rgba(124,58,237,.18); transform: translateY(-1px); }
.med-card-active {
    border-color: #7c3aed88; background: rgba(124,58,237,.08);
    box-shadow: 0 0 20px rgba(124,58,237,.2), inset 0 0 30px rgba(124,58,237,.03);
}
.med-card-active::before {
    content: ''; position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #a78bfa; box-shadow: 0 0 8px #a78bfa;
    animation: medActivePulse 2s ease-in-out infinite;
}
.med-card { position: relative; }
@keyframes medActivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.8); }
}
.med-card-insufficient { opacity: .55; }
.med-card-insufficient .btn-med-cast {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    cursor: not-allowed;
}
.med-card-hidden { display: none !important; }

/* 명상 체크박스 */
.med-chk-label {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; position: relative;
    width: 22px; height: 22px;
}
.med-chk { position: absolute; opacity: 0; width: 0; height: 0; }
.med-chk-custom {
    width: 20px; height: 20px; border: 2px solid #555;
    border-radius: 5px; background: rgba(255,255,255,.05);
    transition: background .2s, border-color .2s; display: flex; align-items: center; justify-content: center;
}
.med-chk-custom::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 11px; color: #fff; opacity: 0; transition: opacity .15s;
}
.med-chk:checked + .med-chk-custom {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: #a855f7;
}
.med-chk:checked + .med-chk-custom::after { opacity: 1; }

.med-card-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    transition: transform .2s;
}
.med-card:hover .med-card-icon { transform: scale(1.08); }
.med-card-body { flex: 1; min-width: 0; }
.med-card-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.med-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.med-skill-lv {
    font-size: 11px; font-weight: 700; color: #a78bfa;
    background: rgba(167,139,250,.15); padding: 1px 7px; border-radius: 8px;
}
.med-lv-max { color: #fbbf24; background: rgba(251,191,36,.15); }
.med-card-desc { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.med-card-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.med-stat-tag {
    background: rgba(74,222,128,.12); color: #4ade80; font-size: 11px;
    padding: 2px 8px; border-radius: 10px; font-weight: 600;
}

/* 명상 경험치 바 */
.med-exp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.med-exp-bar-wrap {
    flex: 1; height: 6px; background: rgba(255,255,255,.08);
    border-radius: 3px; overflow: hidden;
}
.med-exp-bar {
    height: 100%; background: linear-gradient(90deg, #7c3aed, #a855f7);
    border-radius: 3px; transition: width .3s;
}
.med-exp-text { font-size: 10px; color: #a78bfa; white-space: nowrap; font-weight: 600; }
.med-exp-max { color: #fbbf24; }

.med-card-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-dim); }
.med-meta-mp { color: #60a5fa; }
.med-meta-dur { color: #a78bfa; }
.med-meta-lvl { color: #fbbf24; }
.med-card-action { flex-shrink: 0; }
.btn-med-cast {
    padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transition: transform .15s, box-shadow .15s, background .2s;
    box-shadow: 0 2px 8px rgba(124,58,237,.25);
    position: relative; overflow: hidden;
}
.btn-med-cast:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.4); }
.btn-med-cast:active { transform: translateY(0); }
.btn-med-renew {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.btn-med-renew:hover { box-shadow: 0 4px 14px rgba(37,99,235,.4); }
/* 시전 이펙트 */
@keyframes medCastRipple {
    0%   { transform: scale(0); opacity: .6; }
    100% { transform: scale(4); opacity: 0; }
}
.btn-med-cast .med-ripple {
    position: absolute; border-radius: 50%; width: 20px; height: 20px;
    background: rgba(255,255,255,.4);
    animation: medCastRipple .5s ease-out forwards;
    pointer-events: none;
}
.btn-med-cast.med-casting {
    animation: medCastPulse .6s ease;
}
@keyframes medCastPulse {
    0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.6); }
    50%  { box-shadow: 0 0 0 10px rgba(124,58,237,0); }
    100% { box-shadow: 0 2px 8px rgba(124,58,237,.25); }
}

/* 명상 토스트 알림 */
.med-toast-container {
    position: fixed; top: 16px; right: 16px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.med-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: 10px;
    background: rgba(15,23,42,.92); border: 1px solid rgba(124,58,237,.3);
    backdrop-filter: blur(12px); color: var(--text);
    font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    animation: medToastIn .3s ease, medToastOut .3s ease 2.7s forwards;
    max-width: 340px;
}
.med-toast-success { border-color: rgba(74,222,128,.4); }
.med-toast-success i { color: #4ade80; }
.med-toast-error { border-color: rgba(248,113,113,.4); }
.med-toast-error i { color: #f87171; }
.med-toast-info { border-color: rgba(96,165,250,.4); }
.med-toast-info i { color: #60a5fa; }
.med-toast i { font-size: 16px; flex-shrink: 0; }
@keyframes medToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes medToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(30px); }
}

@media (max-width: 600px) {
    .med-card { flex-direction: column; align-items: flex-start; gap: 8px; }
    .med-card-icon { width: 36px; height: 36px; font-size: 16px; }
    .med-card-action { align-self: stretch; }
    .btn-med-cast { width: 100%; text-align: center; }
    .med-bulk-bar { flex-direction: column; gap: 8px; }
    .btn-med-bulk { width: 100%; text-align: center; }
    .med-toolbar { flex-direction: column; gap: 8px; align-items: flex-start; }
    .med-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .med-mp-wrap { width: 100%; min-width: 0; }
    .med-toast-container { top: 8px; right: 8px; left: 8px; }
    .med-toast { max-width: none; }
}

/* ==========================================
   명상 / 오라 탭
   ========================================== */
.med-tabs {
    display: flex; gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(124,58,237,.15);
    padding-bottom: 0;
}
.med-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    border: none; background: transparent;
    color: var(--muted); font-size: 13px; font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s, background .2s;
    border-radius: 8px 8px 0 0;
}
.med-tab:hover {
    color: var(--text);
    background: rgba(124,58,237,.06);
}
.med-tab.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    background: rgba(124,58,237,.08);
}
.med-tab i { font-size: 14px; }

/* ==========================================
   오라 시스템
   ========================================== */
.aura-info-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(245,158,11,.04));
    border: 1px solid rgba(251,191,36,.2);
    border-radius: 12px;
}
.aura-hp-summary {
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: var(--text);
}
.aura-hp-summary i { color: #f59e0b; font-size: 16px; }
.aura-hp-summary strong { color: #ef4444; font-weight: 700; }
.aura-hp-limit { color: var(--muted); font-size: 11px; }

.aura-list {
    display: flex; flex-direction: column; gap: 12px;
}

.aura-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.aura-card:hover {
    border-color: rgba(251,191,36,.2);
    box-shadow: 0 2px 12px rgba(251,191,36,.08);
}
.aura-card.aura-card-active {
    border-color: rgba(251,191,36,.4);
    background: rgba(251,191,36,.06);
    box-shadow: 0 0 20px rgba(251,191,36,.12);
}

.aura-card-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
    color: #fbbf24;
    flex-shrink: 0;
}
.aura-card-active .aura-card-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 2px 12px rgba(245,158,11,.35);
}

.aura-card-body { flex: 1; min-width: 0; }
.aura-card-title {
    font-size: 14px; font-weight: 700; color: var(--text);
    margin-bottom: 2px;
}
.aura-card-desc {
    font-size: 11px; color: var(--muted);
    margin-bottom: 6px;
}

.aura-stat-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 8px;
}
.aura-stat-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px;
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.18);
    border-radius: 6px;
    font-size: 11px; font-weight: 600; color: #fbbf24;
}
.aura-stat-tag i { font-size: 9px; }

.aura-hp-cost {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-size: 12px; color: var(--muted);
}
.aura-hp-cost i { font-size: 11px; }
.aura-hp-cost strong { font-weight: 700; }

.aura-card-action { flex-shrink: 0; }
.btn-aura-activate {
    padding: 8px 18px;
    border: none; border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.btn-aura-activate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-aura-deactivate {
    padding: 8px 18px;
    border: 1px solid rgba(239,68,68,.3); border-radius: 10px;
    background: rgba(239,68,68,.1);
    color: #f87171; font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-aura-deactivate:hover {
    background: rgba(239,68,68,.2);
    border-color: rgba(239,68,68,.5);
}
.aura-active-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: rgba(74,222,128,.12);
    border: 1px solid rgba(74,222,128,.25);
    border-radius: 6px;
    font-size: 10px; font-weight: 700; color: #4ade80;
    text-transform: uppercase; letter-spacing: .5px;
}
.aura-mastery-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 6px;
    font-size: 10px; font-weight: 700; color: #f59e0b;
}
.aura-mastery-section {
    margin-top: 6px; padding: 6px 8px;
    background: rgba(255,255,255,.03); border-radius: 6px;
    border: 1px solid rgba(255,255,255,.06);
}
.aura-mastery-label {
    font-size: 11px; color: var(--text-dim); margin-bottom: 4px;
    display: flex; align-items: center; gap: 5px;
}
.aura-mastery-label i { color: #f59e0b; font-size: 10px; }
.aura-mastery-label strong { color: #f59e0b; font-weight: 700; }
.aura-mastery-bar-wrap {
    width: 100%; height: 4px; background: rgba(255,255,255,.08);
    border-radius: 2px; overflow: hidden; margin-bottom: 3px;
}
.aura-mastery-bar-fill {
    height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 2px; transition: width .5s ease;
}
.aura-mastery-detail {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; color: var(--muted);
}
.aura-mastery-hours { color: var(--text-dim); }
.aura-mastery-next { color: #60a5fa; }
.aura-mastery-max { color: #4ade80; font-weight: 600; }

@media (max-width: 600px) {
    .med-tabs { gap: 2px; }
    .med-tab { padding: 8px 10px; font-size: 12px; }
    .aura-card { flex-direction: column; align-items: flex-start; gap: 10px; }
    .aura-card-action { align-self: stretch; }
    .btn-aura-activate, .btn-aura-deactivate { width: 100%; text-align: center; }
    .aura-info-bar { flex-direction: column; gap: 8px; }
}

/* ==========================================
   포션 임계값 슬라이더
   ========================================== */
.pot-threshold { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.pot-threshold label { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.thr-val { color: #2ecc71; font-weight: 600; min-width: 28px; text-align: center; }
.pot-threshold-range {
    -webkit-appearance: none; appearance: none;
    width: 100px; height: 6px;
    background: var(--bg-dark, #222);
    border-radius: 3px; outline: none;
    cursor: pointer;
}
.pot-threshold-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px;
    background: #2ecc71; border-radius: 50%; cursor: pointer;
}
.pot-threshold-range::-moz-range-thumb {
    width: 14px; height: 14px;
    background: #2ecc71; border-radius: 50%; cursor: pointer; border: none;
}

/* ==========================================
   전문기술 (Profession)
   ========================================== */
.prof-intro { text-align: center; padding: 10px 0; }
.prof-intro p { color: var(--muted); margin-bottom: 12px; }

.prof-pick-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px; padding: 0 4px;
}
.prof-pick-card {
    background: var(--bg-card, #1e1e2e); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px; text-align: center; transition: border-color .2s, box-shadow .2s;
}
.prof-pick-card:hover { border-color: var(--accent); box-shadow: 0 0 10px rgba(99,102,241,.25); }
.prof-pick-icon { width: 48px; height: 48px; border-radius: 6px; margin-bottom: 8px; }
.prof-pick-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.prof-pick-desc { font-size: 11px; color: var(--muted); margin-bottom: 6px; line-height: 1.4; }
.prof-pick-passive { font-size: 10px; margin-bottom: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }

/* 전문기술 헤더 */
.prof-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 14px;
}
.prof-icon { width: 44px; height: 44px; border-radius: 6px; }
.prof-header-info { flex: 1; }
.prof-title { font-weight: 700; font-size: 15px; }
.prof-lvl { color: var(--accent); font-size: 13px; }
.prof-exp-bar {
    width: 100%; height: 6px; background: var(--bg-dark, #222);
    border-radius: 3px; overflow: hidden; margin: 4px 0 2px;
}
.prof-exp-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 3px; transition: width .3s; }
.prof-exp-text { font-size: 10px; color: var(--muted); }

/* 패시브 보너스 */
.prof-passive-box {
    padding: 10px 12px; margin-bottom: 12px;
    background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.2);
    border-radius: 8px;
}
.prof-passive-title {
    font-size: 13px; font-weight: 700; color: #818cf8; margin-bottom: 6px;
}
.prof-passive-list { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.prof-passive-stat {
    font-size: 12px; color: var(--text-dim);
    background: rgba(255,255,255,.04); padding: 2px 8px; border-radius: 4px;
}
.prof-passive-stat strong { color: #2ecc71; }

/* 레시피 카드 */
.prof-recipes { display: flex; flex-direction: column; gap: 8px; }
.rc-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border); border-radius: 8px;
    transition: border-color .2s;
}
.rc-card:hover:not(.rc-locked) { border-color: var(--accent); }
.rc-locked { opacity: .5; }
.rc-icon-wrap { flex-shrink: 0; }
.rc-icon { width: 36px; height: 36px; border-radius: 4px; }
.rc-body { flex: 1; min-width: 0; }
.rc-name { font-weight: 600; font-size: 13px; }
.rc-req { font-size: 11px; color: #e74c3c; font-weight: 400; }
.rc-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rc-cost { font-size: 11px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.rc-gold { color: #f1c40f; }
.rc-diamond { color: #3498db; }
.rc-junk { color: #95a5a6; }
.rc-cd { font-size: 10px; color: #e74c3c; margin-top: 2px; }
.rc-exp { font-size: 10px; color: #2ecc71; margin-top: 2px; }
.rc-action { flex-shrink: 0; }

/* 대상 선택 모달 */
.prof-target-modal {
    background: var(--bg-card, #1e1e2e); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; min-width: 280px; max-width: 400px;
    max-height: 70vh; overflow-y: auto;
}
.prof-target-modal h4 { margin: 0 0 10px; font-size: 14px; }
.prof-target-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prof-target-item {
    display: flex; align-items: center; gap: 8px; padding: 8px;
    background: var(--bg-dark, #181825); border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; transition: border-color .2s;
}
.prof-target-item:hover { border-color: var(--accent); }
.prof-target-icon { width: 32px; height: 32px; border-radius: 4px; }
.prof-target-stats { font-size: 11px; color: var(--muted); }
.prof-target-ench { font-size: 10px; color: #9b59b6; }

@media (max-width: 600px) {
    .prof-pick-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .prof-header { flex-wrap: wrap; }
    .rc-card { flex-wrap: wrap; }
    .prof-target-modal { min-width: unset; width: 90vw; }
}

/* ==========================================
   가이드북 (Guidebook)
   ========================================== */
.guide-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 100%);
    border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;
}
.guide-header h3 { margin: 0; font-size: 16px; }
.guide-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.gtab {
    flex: 1; padding: 10px 16px; background: transparent; border: none;
    color: var(--text-dim); font-size: 13px; font-weight: 500; cursor: pointer;
    border-bottom: 2px solid transparent; transition: color .2s, background .2s, border-bottom-color .2s;
}
.gtab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.gtab.active { color: #60a5fa; border-bottom-color: #60a5fa; font-weight: 700; }
.gtab i { margin-right: 4px; }

/* 게임 가이드 */
.guide-game-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.guide-game-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; cursor: pointer; transition: border-color .2s;
}
.guide-game-card:hover { border-color: #60a5fa55; }
.guide-game-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
}
.guide-game-icon { color: #60a5fa; font-size: 18px; width: 24px; text-align: center; }
.guide-game-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.guide-game-arrow { color: var(--text-dim); font-size: 12px; transition: transform .3s; }
.guide-game-body {
    max-height: 0; overflow: hidden; padding: 0 16px;
    font-size: 13px; color: var(--text-dim); line-height: 1.7;
    transition: max-height .4s ease, padding .3s ease;
}
.guide-game-body.open {
    max-height: 2000px; padding: 0 16px 16px;
    border-top: 1px solid var(--border);
}
.guide-game-body h4 { color: var(--text); margin: 8px 0 4px; font-size: 14px; }
.guide-game-body ul { padding-left: 20px; margin: 4px 0; }
.guide-game-body li { margin-bottom: 3px; }
.guide-game-body p { margin: 4px 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.guide-tbl { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.guide-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; color: var(--text-dim); }
.guide-tbl td:first-child { white-space: nowrap; width: 1%; padding-right: 12px; }
.guide-tbl tr:last-child td { border-bottom: none; }

/* 가이드 > 타이머 탭 */
.gt-empty {
    text-align: center; padding: 60px 20px; color: var(--text-dim);
}
.gt-empty i { font-size: 48px; display: block; margin-bottom: 12px; opacity: .3; }
.gt-empty p { font-size: 14px; line-height: 1.6; }
.gt-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.gt-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card-bg);
    transition: border-color .2s;
}
.gt-row.gt-active { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.gt-row.gt-waiting { border-color: rgba(148,163,184,.2); }
.gt-row.gt-ended { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.04); }
.gt-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.gt-row-icon { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.gt-row-fa { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.gt-row-info { min-width: 0; flex: 1; }
.gt-row-name {
    font-size: 13px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gt-row-time {
    font-size: 12px; color: var(--text-dim); margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.gt-active .gt-row-time { color: #4ade80; }
.gt-ended .gt-row-time { color: #f87171; }
.gt-row-right { flex-shrink: 0; margin-left: 8px; }
.gt-badge {
    display: inline-block; padding: 3px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.gt-badge.gt-active { background: rgba(74,222,128,.18); color: #4ade80; }
.gt-badge.gt-waiting { background: rgba(148,163,184,.12); color: #94a3b8; }
.gt-badge.gt-ended { background: rgba(239,68,68,.15); color: #f87171; }

/* 유저 가이드 - 툴바 */
.guide-user-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.guide-cat-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.guide-cat-btn {
    padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border);
    background: transparent; color: var(--text-dim); font-size: 11px; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.guide-cat-btn:hover { border-color: #60a5fa55; color: var(--text); }
.guide-cat-btn.active { background: rgba(96,165,250,.15); border-color: #60a5fa; color: #60a5fa; font-weight: 700; }
.guide-cat-btn i { margin-right: 2px; }
.btn-guide-write {
    padding: 6px 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
}
.btn-guide-write:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.4); }
.btn-guide-write i { margin-right: 4px; }

/* 유저 가이드 - 목록 */
.guide-user-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; }
.guide-user-card {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.guide-user-card:hover { border-color: #60a5fa55; box-shadow: 0 0 12px rgba(96,165,250,.1); }
.guide-user-cat {
    width: 50px; text-align: center; font-size: 11px; font-weight: 600;
    color: #60a5fa; flex-shrink: 0;
}
.guide-user-cat i { display: block; font-size: 16px; margin-bottom: 2px; }
.guide-user-info { flex: 1; min-width: 0; }
.guide-user-title {
    font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guide-user-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.guide-user-meta i { margin-right: 2px; }
.guide-user-arrow { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }
.guide-empty {
    text-align: center; padding: 60px 20px; color: var(--text-dim);
}
.guide-empty i { font-size: 48px; display: block; margin-bottom: 12px; opacity: .3; }
.guide-empty p { font-size: 14px; }

/* 유저 가이드 - 본문 보기 */
.guide-view { padding: 16px; }
.guide-back-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
    transition: border-color .2s, color .2s; margin-bottom: 12px;
}
.guide-back-btn:hover { border-color: #60a5fa; color: #60a5fa; }
.guide-back-btn i { margin-right: 4px; }
.guide-view-header { margin-bottom: 16px; }
.guide-view-cat {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    background: rgba(96,165,250,.12); color: #60a5fa; font-size: 11px; font-weight: 600;
    margin-bottom: 6px;
}
.guide-view-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 4px 0 8px; }
.guide-view-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-dim); }
.guide-view-meta i { margin-right: 3px; }
.guide-view-body {
    padding: 20px; margin: 16px 0;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    font-size: 14px; line-height: 1.8; color: var(--text);
    word-wrap: break-word; overflow-wrap: break-word;
}
.guide-view-body h3 { font-size: 18px; margin: 16px 0 8px; color: #60a5fa; }
.guide-view-body h4 { font-size: 16px; margin: 12px 0 6px; color: #93c5fd; }
.guide-view-body h5 { font-size: 14px; margin: 10px 0 4px; color: #a5b4fc; }
.guide-view-body strong { color: #fbbf24; }
.guide-view-body em { color: #a78bfa; font-style: italic; }
.guide-view-body table {
    border-collapse: collapse; width: 100%; margin: 12px 0;
}
.guide-view-body th, .guide-view-body td {
    border: 1px solid var(--border); padding: 8px 12px; text-align: left; font-size: 13px;
}
.guide-view-body th { background: rgba(255,255,255,.04); font-weight: 600; color: #93c5fd; }
.guide-view-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.guide-view-body ul, .guide-view-body ol { margin: 8px 0; padding-left: 24px; }
.guide-view-body li { margin: 4px 0; }
.guide-view-actions {
    display: flex; gap: 8px; align-items: center; padding-top: 12px;
    border-top: 1px solid var(--border);
}
.btn-guide-like {
    padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.btn-guide-like:hover { border-color: #ef4444; color: #ef4444; }
.btn-guide-like.liked { background: rgba(239,68,68,.12); border-color: #ef4444; color: #ef4444; }
.btn-guide-like i { margin-right: 4px; }
.btn-guide-edit, .btn-guide-delete {
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; font-size: 12px; cursor: pointer; transition: border-color .2s, background .2s;
}
.btn-guide-edit { color: #60a5fa; }
.btn-guide-edit:hover { border-color: #60a5fa; background: rgba(96,165,250,.1); }
.btn-guide-delete { color: #ef4444; }
.btn-guide-delete:hover { border-color: #ef4444; background: rgba(239,68,68,.1); }
.btn-guide-edit i, .btn-guide-delete i { margin-right: 3px; }

/* 유저 가이드 - 에디터 */
.guide-editor { padding: 16px; }
.guide-editor-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.guide-editor-header h3 { margin: 0; font-size: 16px; }
.guide-editor-form { display: flex; flex-direction: column; gap: 14px; }
.guide-form-row { display: flex; flex-direction: column; gap: 6px; }
.guide-form-row label { font-size: 13px; font-weight: 600; color: var(--text); }
.guide-form-row label small { font-weight: 400; }
.guide-form-row input[type="text"], .guide-form-row select {
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-dark, #0d1117); color: var(--text); font-size: 14px;
    transition: border-color .2s;
}
.guide-form-row input[type="text"]:focus, .guide-form-row select:focus,
.guide-form-row textarea:focus {
    border-color: #60a5fa; outline: none; box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}
.guide-editor-toolbar {
    display: flex; gap: 2px; padding: 4px; background: rgba(255,255,255,.03);
    border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0;
    flex-wrap: wrap; align-items: center;
}
.guide-editor-toolbar button {
    padding: 6px 10px; border: none; border-radius: 4px;
    background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s;
}
.guide-editor-toolbar button:hover { background: rgba(96,165,250,.15); color: #60a5fa; }
.guide-toolbar-sep {
    width: 1px; height: 20px; background: var(--border); margin: 0 4px;
}
.guide-toolbar-select {
    padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-dark, #0d1117); color: var(--text); font-size: 12px;
    cursor: pointer;
}
.guide-toolbar-color {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 8px; cursor: pointer; border-radius: 4px;
    transition: background .15s;
}
.guide-toolbar-color:hover { background: rgba(96,165,250,.15); }
.guide-toolbar-color input[type="color"] {
    position: absolute; width: 0; height: 0; opacity: 0; border: none; padding: 0;
}
.guide-wysiwyg {
    padding: 14px; border: 1px solid var(--border); border-radius: 0 0 8px 8px;
    background: var(--bg-dark, #0d1117); color: var(--text); font-size: 14px;
    line-height: 1.6; min-height: 250px; max-height: 500px; overflow-y: auto;
    outline: none; font-family: inherit; word-wrap: break-word; overflow-wrap: break-word;
    transition: border-color .2s;
}
.guide-wysiwyg:focus {
    border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}
.guide-wysiwyg:empty::before {
    content: '가이드 내용을 작성하세요...';
    color: var(--text-dim); opacity: .5; pointer-events: none;
}
.guide-wysiwyg table {
    border-collapse: collapse; width: 100%; margin: 8px 0;
}
.guide-wysiwyg th, .guide-wysiwyg td {
    border: 1px solid var(--border); padding: 6px 10px; text-align: left; font-size: 13px;
}
.guide-wysiwyg th { background: rgba(255,255,255,.04); font-weight: 600; }
.guide-wysiwyg img { max-width: 100%; border-radius: 6px; margin: 4px 0; }
.guide-form-row textarea {
    padding: 14px; border: 1px solid var(--border); border-radius: 0 0 8px 8px;
    background: var(--bg-dark, #0d1117); color: var(--text); font-size: 14px;
    line-height: 1.6; resize: vertical; min-height: 200px; font-family: inherit;
    transition: border-color .2s;
}

/* 페이징 */
.guide-paging {
    display: flex; justify-content: center; gap: 4px; padding: 16px;
}
.guide-page-btn {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.guide-page-btn:hover { border-color: #60a5fa; color: #60a5fa; }
.guide-page-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 700; }

@media (max-width: 600px) {
    .guide-user-toolbar { flex-direction: column; align-items: stretch; }
    .btn-guide-write { width: 100%; text-align: center; }
    .guide-view-title { font-size: 17px; }
    .guide-view-actions { flex-wrap: wrap; }
}

/* ==========================================
   경매장 등록 모달
   ========================================== */
.auction-reg-modal {
    min-width: 320px; max-width: 420px; padding: 0 !important; overflow: hidden;
}
.auction-reg-header {
    padding: 14px 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 1px solid var(--border);
}
.auction-reg-header h3 { margin: 0; font-size: 16px; }
.auction-reg-header i { margin-right: 6px; color: #f59e0b; }
.auction-reg-item { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.auction-reg-form { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.auction-reg-row { display: flex; flex-direction: column; gap: 6px; }
.auction-reg-row label { font-size: 13px; font-weight: 600; color: var(--text); }
.auction-currency-btns { display: flex; gap: 6px; }
.auc-cur-btn {
    flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer;
    transition: border-color .2s, color .2s; text-align: center;
}
.auc-cur-btn:hover { border-color: #f59e0b88; color: var(--text); }
.auc-cur-btn.active { border-color: #f59e0b; background: rgba(245,158,11,.12); color: #f59e0b; font-weight: 700; }
.auc-cur-btn i { margin-right: 4px; }
.auction-price-wrap {
    display: flex; align-items: center; gap: 8px;
}
.auction-price-wrap input {
    flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-dark, #0d1117); color: var(--text); font-size: 15px; font-weight: 600;
    transition: border-color .2s;
}
.auction-price-wrap input:focus { border-color: #f59e0b; outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.auction-cur-label { font-size: 15px; font-weight: 700; color: #f59e0b; min-width: 24px; }
.auction-reg-actions {
    display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border);
    background: rgba(0,0,0,.15);
}
.auction-reg-actions button { flex: 1; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 700; }

/* ==========================================
   장비 동반자 슬롯
   ========================================== */
.equip-companion-area {
    margin: 8px 16px 16px; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.equip-companion-header {
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    margin-bottom: 6px; padding-left: 2px;
}
.equip-companion-header i { margin-right: 4px; }
.equip-companion-slots { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
.equip-comp-slot {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--card-bg); flex: 1 1 0; min-width: 0;
    transition: border-color .2s;
}
.ec-empty-slot { opacity: .45; border-style: dashed; }
.ec-icon-empty { display:flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--text-dim); font-size:14px; }
.equip-comp-slot:hover { border-color: rgba(255,255,255,.2); }
.ec-icon { width: 32px; height: 32px; flex-shrink: 0; }
.ec-icon img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.ec-info { min-width: 0; }
.ec-label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.5px; }
.ec-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-name small { font-weight: 400; opacity: .7; }
.ec-bonus { font-size: 11px; color: #22c55e; }
.ec-empty { width: 100%; text-align: center; padding: 12px; color: var(--text-dim); font-size: 12px; }
.ec-empty i { margin-right: 4px; }

/* ============================================
   월드보스 (World Boss) 시스템
   ============================================ */

/* 월드보스 + 버프 행 (50:50 레이아웃) */
.wb-buff-row {
    display: flex; gap: 8px; align-items: stretch;
    margin-bottom: 8px; min-height: 0;
}
.wb-buff-row .wb-banner {
    flex: 1; min-width: 0; margin: 0;
}
.hunt-buff-panel {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 72px;
    overflow: hidden;
}
.buff-panel-title {
    font-size: 10px; font-weight: 700; color: var(--text-dim);
    letter-spacing: .5px; text-transform: uppercase;
    margin-bottom: 1px; flex-shrink: 0;
}
.buff-panel-title i { margin-right: 3px; color: #90caf9; font-size: 9px; }
.buff-panel-list {
    display: flex; flex-wrap: wrap; gap: 3px;
    flex: 1; align-content: flex-start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.buff-panel-list::-webkit-scrollbar { width: 3px; }
.buff-panel-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.buff-icons { display: contents; }
.buff-panel-empty {
    font-size: 10px; color: rgba(255,255,255,.25);
    text-align: center; padding: 4px 0;
}
/* 버프가 있으면 empty 숨기기 — JS에서 처리 */

/* 월드보스 숨겨지면 버프 100% */
.wb-buff-row .wb-banner.hidden + .hunt-buff-panel {
    flex: 1 1 100%;
}

/* 월드보스 배너 — 인라인 (사이드바 내부) */
.wb-banner.wb-banner-inline {
    position: relative; top: auto; left: auto; right: auto; z-index: auto;
    border-radius: 10px;
    margin: 4px 0;
    transition: background .4s, box-shadow .4s;
}
/* 활성 상태 — 빨간색 펄스 */
.wb-banner.wb-banner-active {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 40%, #b91c1c 100%);
    box-shadow: 0 2px 12px rgba(185,28,28,.4);
    animation: wbBannerPulse 2s infinite;
}
/* 대기/사망 상태 — 회색 (반짝임 없음) */
.wb-banner.wb-banner-waiting,
.wb-banner.wb-banner-dead {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 40%, #444 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    animation: none;
}
.wb-banner.wb-banner-waiting .wb-banner-inner,
.wb-banner.wb-banner-dead .wb-banner-inner {
    cursor: default;
}
@keyframes wbBannerPulse {
    0%,100% { box-shadow: 0 4px 24px rgba(185,28,28,.5); }
    50% { box-shadow: 0 4px 32px rgba(239,68,68,.8); }
}
@keyframes wbBannerWaitPulse {
    0%,100% { box-shadow: 0 2px 12px rgba(55,48,163,.4); }
    50% { box-shadow: 0 2px 20px rgba(99,102,241,.6); }
}
.wb-banner-inner {
    display: flex; align-items: center; gap: 12px;
    max-width: 800px; margin: 0 auto; padding: 10px 16px;
    cursor: pointer;
}
.wb-banner-icon { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #fbbf24; }
.wb-banner-text { flex: 1; color: #fff; }
.wb-banner-text strong { display: block; font-size: 14px; }
.wb-banner-timer { font-size: 12px; color: #fca5a5; font-variant-numeric: tabular-nums; }
.wb-banner-waiting .wb-banner-timer { color: #999; }
.wb-banner-waiting .wb-banner-btn { background: #666; color: #ddd; }
.wb-banner-waiting .wb-banner-btn:hover { background: #777; }
.wb-banner-btn {
    background: #fbbf24; color: #1a1a2e; font-weight: 700; font-size: 13px;
    border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer;
    transition: background .2s;
}
.wb-banner-btn:hover { background: #f59e0b; }

/* 전투 모달 */
.wb-modal-content {
    max-width: 520px; width: 95%; max-height: 85vh; overflow-y: auto;
    background: var(--panel-bg); border: 1px solid var(--border);
    border-radius: 16px; padding: 0;
}
.wb-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(127,29,29,.3), rgba(153,27,27,.15));
}
.wb-boss-icon { width: 52px; height: 52px; border-radius: 10px; border: 2px solid #fbbf24; }
.wb-header-info { flex: 1; }
.wb-header-info h3 { margin: 0; font-size: 18px; color: #fbbf24; }
.wb-status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
}
.wb-status-active { background: rgba(34,197,94,.2); color: #22c55e; }
.wb-status-dead { background: rgba(239,68,68,.2); color: #ef4444; }
.wb-status-waiting { background: rgba(156,163,175,.2); color: #9ca3af; }

/* HP 바 */
.wb-hp-section { padding: 16px 20px; }
.wb-hp-bar {
    height: 28px; background: #1e1e30; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}
.wb-hp-fill {
    height: 100%; border-radius: 14px;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
    transition: width .4s ease;
    position: relative;
}
.wb-hp-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 50%);
    border-radius: 14px;
}
.wb-hp-text { text-align: center; font-size: 13px; color: #fca5a5; margin-top: 4px; font-weight: 600; }
.wb-timer { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* 공격 영역 */
.wb-attack-area { padding: 12px 20px; text-align: center; }
.wb-btn-attack {
    font-size: 16px; padding: 12px 32px; border-radius: 12px;
    background: linear-gradient(135deg, #dc2626, #b91c1c); border: none;
    color: #fff; font-weight: 700; cursor: pointer;
    transition: transform .1s, box-shadow .2s;
}
.wb-btn-attack:hover { transform: scale(1.04); box-shadow: 0 4px 20px rgba(220,38,38,.4); }
.wb-btn-attack:active { transform: scale(0.96); }
.wb-btn-attack:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.wb-my-damage { margin-top: 8px; font-size: 13px; color: #fbbf24; font-weight: 600; }

/* 보상 수령 */
.wb-claim-area { padding: 12px 20px; text-align: center; }
.wb-claim-info {
    background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2);
    border-radius: 10px; padding: 12px; margin-bottom: 10px;
    font-size: 13px; color: #fde68a;
}
.wb-btn-claim {
    font-size: 14px; padding: 10px 28px; border-radius: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b); border: none;
    color: #1a1a2e; font-weight: 700; cursor: pointer;
}
.wb-btn-claim:disabled { opacity: .5; cursor: not-allowed; }

/* 랭킹 */
.wb-ranking-section { padding: 12px 20px 16px; }
.wb-ranking-section h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-dim); }
.wb-ranking-list { max-height: 200px; overflow-y: auto; }
.wb-rank-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border-radius: 6px; font-size: 13px;
}
.wb-rank-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.wb-rank-num { width: 24px; text-align: center; font-weight: 700; color: var(--text-dim); }
.wb-rank-row:nth-child(1) .wb-rank-num { color: #fbbf24; }
.wb-rank-row:nth-child(2) .wb-rank-num { color: #d1d5db; }
.wb-rank-row:nth-child(3) .wb-rank-num { color: #cd7f32; }
.wb-rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-rank-dmg { font-weight: 600; color: #ef4444; }
.wb-rank-me { background: rgba(251,191,36,.1) !important; border: 1px solid rgba(251,191,36,.2); }

/* 공격 로그 */
.wb-attack-log {
    padding: 0 20px 16px; max-height: 120px; overflow-y: auto;
    font-size: 12px; color: var(--text-dim);
}
.wb-log-entry { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.wb-log-crit { color: #fbbf24; font-weight: 700; }
.wb-log-dmg { color: #ef4444; }

/* 데미지 플로팅 텍스트 */
.wb-float-dmg {
    position: absolute; font-size: 20px; font-weight: 900;
    color: #ef4444; text-shadow: 0 0 8px rgba(239,68,68,.6);
    pointer-events: none; animation: wbFloatUp .8s ease-out forwards;
    z-index: 1300;
}
.wb-float-dmg.crit { color: #fbbf24; font-size: 26px; text-shadow: 0 0 12px rgba(251,191,36,.7); }
@keyframes wbFloatUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-60px); }
}

/* 모바일 */
@media (max-width: 768px) {
    .wb-modal-content { max-width: 100%; border-radius: 12px; }
    .wb-banner-inner { padding: 8px 12px; gap: 8px; }
    .wb-banner-icon { width: 32px; height: 32px; }
    .wb-banner-text strong { font-size: 12px; }
    .wb-banner-btn { padding: 6px 12px; font-size: 12px; }
}

/* ============================================
   황금고블린 (Golden Goblin) — 월드보스 기반 골드 테마
   ============================================ */
/* 배너 활성 — 골드 펄스 */
.gg-banner.gg-banner-active {
    background: linear-gradient(135deg, #78350f 0%, #92400e 40%, #b45309 100%) !important;
    box-shadow: 0 2px 12px rgba(180,83,9,.4) !important;
    animation: ggBannerPulse 2s infinite !important;
}
.gg-banner.gg-banner-waiting,
.gg-banner.gg-banner-dead {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3520 40%, #3f3a28 100%) !important;
}
.gg-banner-btn {
    background: #fbbf24 !important; color: #1a1a2e !important;
}
.gg-banner-btn:hover {
    background: #f59e0b !important;
}
.gg-banner .wb-banner-timer {
    color: #fde68a !important;
}
@keyframes ggBannerPulse {
    0%,100% { box-shadow: 0 4px 24px rgba(180,83,9,.5); }
    50% { box-shadow: 0 4px 32px rgba(251,191,36,.8); }
}

/* 모달 헤더 — 골드 그라데이션 */
.gg-header {
    background: linear-gradient(135deg, rgba(120,53,15,.35), rgba(146,64,14,.18)) !important;
}

/* HP 바 — 골드 톤 */
.gg-hp-bar {
    border: 1px solid rgba(251,191,36,.15) !important;
}
.gg-hp-fill {
    background: linear-gradient(90deg, #b45309 0%, #d97706 50%, #fbbf24 100%) !important;
}

/* 상태 뱃지 — 골드 컬러 */
.gg-status-active { background: rgba(251,191,36,.2) !important; color: #fbbf24 !important; }
.gg-status-dead { background: rgba(161,98,7,.2) !important; color: #ca8a04 !important; }
.gg-status-waiting { background: rgba(156,163,175,.2) !important; color: #9ca3af !important; }

/* 공격 버튼 — 골드 */
.gg-btn-attack {
    background: linear-gradient(135deg, #b45309, #92400e) !important;
}
.gg-btn-attack:hover {
    box-shadow: 0 4px 20px rgba(180,83,9,.4) !important;
}

/* 보상 버튼 */
.gg-btn-claim {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

/* 플로팅 데미지 — 골드 */
.gg-float-dmg {
    color: #fbbf24 !important; text-shadow: 0 0 8px rgba(251,191,36,.6) !important;
}
.gg-float-dmg.crit {
    color: #fff !important; text-shadow: 0 0 12px rgba(251,191,36,.9) !important;
}

/* ============================================
   시즌패스 + 전투패스 (Season Pass + Battle Pass)
   ============================================ */
.sp-container { display: flex; flex-direction: column; gap: 12px; }
.sp-info-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(245,158,11,.06));
    border: 1px solid rgba(251,191,36,.25);
}
.sp-season-name { font-size: 16px; font-weight: 700; color: #fbbf24; flex: 1; }
.sp-season-name i { margin-right: 6px; }
.sp-days-left { font-size: 13px; color: var(--text-dim); }
.sp-days-left i { margin-right: 4px; }
.sp-premium-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1a2e;
}
.sp-battle-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff;
}
.sp-buy-premium {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff;
    border: none; cursor: pointer; transition: background .2s, transform .2s;
}
.sp-buy-premium:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); transform: translateY(-1px); }
.sp-buy-premium .fa-gem { color: #c4b5fd; font-size: 11px; }
.sp-buy-battle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
    border: none; cursor: pointer; transition: background .2s, transform .2s;
}
.sp-buy-battle:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); transform: translateY(-1px); }
.sp-buy-battle .fa-gem { color: #fca5a5; font-size: 11px; }

/* 2컬럼 패스 레이아웃 */
.sp-dual-wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sp-panel {
    display: flex; flex-direction: column; gap: 8px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.sp-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; gap: 8px;
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(245,158,11,.06));
    border-bottom: 1px solid rgba(251,191,36,.2);
}
.sp-panel-header-battle {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(185,28,28,.06));
    border-bottom: 1px solid rgba(239,68,68,.2);
}
.sp-panel-title { font-size: 14px; font-weight: 700; color: #fbbf24; }
.sp-panel-header-battle .sp-panel-title { color: #f87171; }

/* Progress bar */
.sp-progress-bar { padding: 0 4px; }
.sp-progress-header {
    display: flex; justify-content: space-between; font-size: 13px;
    color: var(--text-dim); margin-bottom: 6px;
}
.sp-progress-header span:first-child { color: #fbbf24; font-weight: 700; }
.sp-bar-track {
    height: 10px; background: rgba(255,255,255,.08); border-radius: 5px;
    overflow: hidden;
}
.sp-bar-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    transition: width .4s ease;
}

/* Reward header */
.sp-reward-header {
    display: grid; grid-template-columns: 32px 1fr 1fr; gap: 6px;
    padding: 6px 10px; border-radius: 0;
    background: rgba(255,255,255,.04); font-size: 11px; font-weight: 700;
    color: var(--text-dim); text-align: center;
}
.sp-col-prem { color: #fbbf24; }
.sp-col-battle { color: #f87171 !important; }
.sp-reward-header-battle .sp-col-prem { color: #f87171; }

/* Reward list */
.sp-reward-list {
    max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
    padding: 4px 6px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sp-row {
    display: grid; grid-template-columns: 32px 1fr 1fr; gap: 6px;
    padding: 6px 8px; border-radius: 6px; align-items: center;
    background: rgba(255,255,255,.02); border: 1px solid transparent;
    transition: border-color .2s, background .2s;
}
.sp-row.sp-current { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.06); }
.sp-row.sp-unlocked { background: rgba(255,255,255,.04); }
.sp-lv {
    font-weight: 700; text-align: center; font-size: 12px;
    color: var(--text-dim);
}
.sp-row.sp-unlocked .sp-lv { color: #fbbf24; }

/* Reward cell */
.sp-rw-cell {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border-radius: 6px; background: rgba(255,255,255,.04); font-size: 13px;
    position: relative; min-height: 36px;
}
.sp-rw-cell.empty { justify-content: center; color: var(--text-dim); background: transparent; }
.sp-rw-icon { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.sp-rw-label { flex: 1; }
.sp-rw-cell.sp-dim { opacity: .4; }
.sp-rw-cell.sp-claimed { opacity: .6; }
.sp-rw-cell.sp-locked { opacity: .5; border: 1px dashed rgba(139,92,246,.3); }
.sp-lock-icon { color: #8b5cf6; font-size: 11px; }
.sp-check { color: #4ade80; font-size: 14px; }
.sp-claim-btn {
    padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    font-size: 12px; font-weight: 700; transition: transform .2s;
}
.sp-claim-btn:hover { transform: scale(1.05); }

/* ============================================
   우편함 (Mailbox)
   ============================================ */
.mail-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.mail-header h3 { margin: 0; font-size: 18px; }
.mail-actions-top { display: flex; gap: 8px; }

/* ── 쿠폰 입력 영역 ── */
.coupon-section {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(245,158,11,.04));
    border: 1px solid rgba(251,191,36,.25);
    border-radius: 8px;
}
.coupon-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.coupon-icon {
    color: #fbbf24;
    font-size: 18px;
    flex-shrink: 0;
}
.coupon-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none;
    transition: border-color .2s;
}
.coupon-input::placeholder {
    color: rgba(255,255,255,.35);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.coupon-input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,.15);
}
.btn-coupon {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    transition: background .2s, transform .2s, box-shadow .2s;
    flex-shrink: 0;
    white-space: nowrap;
}
.btn-coupon:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245,158,11,.3);
}
.btn-coupon:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.btn-sm {
    padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
    border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    transition: background .2s;
}
.btn-sm.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
}
.btn-sm.btn-primary:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.btn-sm.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
}
.btn-sm.btn-danger:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-card {
    padding: 12px 16px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    transition: background .2s, border-color .2s;
}
.mail-card.mail-unread {
    border-left: 3px solid #3b82f6;
    background: rgba(59,130,246,.06);
}
.mail-card.mail-read { opacity: .8; }
.mail-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.mail-sender { font-size: 13px; color: var(--text-dim); }
.mail-sender i { margin-right: 4px; }
.mail-card.mail-unread .mail-sender { color: #60a5fa; }
.mail-date { font-size: 11px; color: var(--text-dim); }
.mail-subject { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.mail-body { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.mail-attachments {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.mail-att {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,.06);
}
.mail-att.gold { color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.mail-att.diamond { color: #c4b5fd; border: 1px solid rgba(139,92,246,.2); }
.mail-att.item { border: 1px solid rgba(96,165,250,.2); }
.mail-item-icon { width: 18px; height: 18px; border-radius: 3px; vertical-align: middle; }
.mail-card-footer {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end;
}
.mail-claimed-badge {
    font-size: 12px; color: #4ade80; margin-right: auto;
}
.mail-claim-btn { }
.mail-del-btn { }

/* Mailbox badge on header */
.hdr-mail-btn { position: relative; }
.mail-badge {
    position: absolute; top: -4px; right: -6px;
    min-width: 16px; height: 16px; line-height: 16px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
    text-align: center; border-radius: 8px; padding: 0 4px;
}

/* empty msg */
.empty-msg { text-align: center; padding: 32px 16px; color: var(--text-dim); font-size: 14px; }

/* 쐐기돌 일일 랭킹 */
.ks-daily-ranking { margin-bottom: 12px; }
.ks-daily-card {
    background: rgba(162,155,254,.06);
    border: 1px solid rgba(162,155,254,.15);
    border-radius: 10px;
    padding: 12px;
}
.ks-daily-title {
    font-size: 14px; font-weight: 700; color: #a29bfe;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.ks-daily-title small { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.ks-daily-empty { text-align: center; color: var(--text-dim); font-size: 12px; padding: 12px 0; }
.ks-daily-list { display: flex; flex-direction: column; gap: 4px; }
.ks-daily-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,.03); font-size: 13px;
}
.ks-daily-row.ks-daily-top { background: rgba(162,155,254,.08); }
.ks-daily-row.ks-daily-me { background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.25); }
.ks-daily-medal { font-size: 16px; min-width: 24px; text-align: center; }
.ks-daily-num { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.ks-daily-name { flex: 1; font-weight: 600; color: #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-daily-floor { font-weight: 700; color: #a29bfe; min-width: 48px; text-align: right; }
.ks-daily-reward {
    font-size: 10px; color: #fbbf24; background: rgba(251,191,36,.1);
    padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.ks-daily-yesterday {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.ks-daily-sub {
    font-size: 11px; font-weight: 600; color: var(--text-dim);
    margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
}
.ks-daily-yrow { font-size: 12px; color: #ccc; padding: 2px 0 2px 4px; }
.ks-daily-footer {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 11px; color: var(--text-dim); line-height: 1.6;
}
.ks-daily-footer strong { color: #a29bfe; }

/* Mobile */
@media (max-width: 768px) {
    .sp-info-bar { padding: 10px 12px; gap: 8px; }
    .sp-season-name { font-size: 14px; }
    .sp-buy-premium { padding: 6px 12px; font-size: 12px; }
    .sp-buy-battle { padding: 6px 12px; font-size: 12px; }
    .sp-dual-wrap { grid-template-columns: 1fr; }
    .sp-reward-list { max-height: 300px; }
    .sp-rw-cell { padding: 4px 8px; font-size: 12px; gap: 6px; }
    .sp-lv { font-size: 11px; }
    .sp-panel-header { padding: 8px 10px; }
    .sp-panel-title { font-size: 13px; }
    .mail-header { flex-direction: column; align-items: stretch; }
    .mail-actions-top { justify-content: flex-end; }
    .mail-card { padding: 10px 12px; }
}

/* ==========================================
   원정대 (Expedition)
   ========================================== */
.expedition-panel { padding: 4px 0; }
.exp-header { text-align: center; margin-bottom: 16px; }
.exp-title { font-size: 18px; font-weight: 700; color: #f1c40f; }
.exp-title i { margin-right: 6px; }
.exp-count { font-size: 13px; color: #888; font-weight: 400; margin-left: 6px; }
.exp-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.exp-summary {
    background: linear-gradient(135deg, rgba(241,196,15,.08), rgba(241,196,15,.02));
    border: 1px solid rgba(241,196,15,.25);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.exp-summary-title { font-size: 13px; font-weight: 700; color: #f1c40f; margin-bottom: 10px; }
.exp-summary-title i { margin-right: 4px; }
.exp-total-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.exp-total-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.exp-stat-name { color: var(--text-dim); }
.exp-stat-val { color: #2ecc71; font-weight: 700; }
.exp-no-bonus { color: #888; font-size: 12px; }

.exp-faction-row { margin-top: 4px; }
.exp-faction-bonus {
    font-size: 12px;
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exp-faction-bonus.active {
    color: #f1c40f;
    font-weight: 600;
    background: rgba(241,196,15,.1);
    padding: 3px 8px;
    border-radius: 4px;
}

.exp-members-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.exp-members-title i { margin-right: 4px; color: var(--accent); }
.exp-members-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.exp-member-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color .2s;
}
.exp-member-card.same-faction { border-left: 3px solid rgba(241,196,15,.5); }
.exp-member-card:hover { border-color: var(--accent); }

.exp-member-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.exp-member-icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.exp-member-icon img { width: 28px; height: 28px; }
.exp-member-info { flex: 1; min-width: 0; }
.exp-member-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.exp-member-detail { font-size: 11px; color: var(--text-dim); display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.exp-member-tier {
    font-size: 14px; font-weight: 700; color: #f1c40f;
    background: rgba(241,196,15,.1);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

.exp-same-fac {
    display: inline-flex;
    font-size: 10px;
    color: #f1c40f;
    border: 1px solid rgba(241,196,15,.4);
    border-radius: 3px;
    padding: 0 2px;
    line-height: 1;
}

.exp-member-bonuses { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-left: 42px; }
.exp-member-bonus {
    font-size: 11px;
    color: #2ecc71;
    display: flex;
    align-items: center;
    gap: 4px;
}
.exp-bonus-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.exp-no-contrib { font-size: 11px; color: #666; font-style: italic; }
.exp-no-contrib i { margin-right: 3px; }
.exp-member-card.exp-ineligible { opacity: 0.5; }
.exp-member-card.exp-ineligible .exp-member-tier { color: #666; background: rgba(255,255,255,.04); }

.expedition-empty { text-align: center; padding: 40px 20px; }
.expedition-empty-icon { font-size: 48px; color: #555; margin-bottom: 16px; }
.expedition-empty h3 { color: var(--text); margin-bottom: 8px; font-size: 16px; }
.expedition-empty p { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.expedition-tip {
    margin-top: 20px;
    padding: 12px 16px;
    background: rgba(241,196,15,.08);
    border: 1px solid rgba(241,196,15,.2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.expedition-tip i { color: #f1c40f; margin-right: 4px; }

.exp-reference { margin-top: 8px; }
.exp-reference summary {
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
}
.exp-reference summary:hover { color: var(--accent); }
.exp-reference summary i { margin-right: 4px; }
.exp-ref-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 10px; }
.exp-ref-section h4 { font-size: 12px; color: var(--accent); margin-bottom: 6px; font-weight: 600; }
.exp-ref-section h4 i { margin-right: 4px; }
.exp-ref-table {
    width: 100%;
    font-size: 11px;
    border-collapse: collapse;
}
.exp-ref-table td {
    padding: 3px 6px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text-dim);
}
.exp-ref-table td:last-child { text-align: right; color: #2ecc71; }

/* ============================================
   룬 프리셋 & 캡처
   ============================================ */
.rune-header-actions { display: flex; gap: 6px; align-items: center; }
.btn-rune-capture {
    background: rgba(100,181,246,.1);
    border: 1px solid rgba(100,181,246,.3);
    color: #64b5f6;
    width: 32px; height: 32px;
    border-radius: 6px;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.btn-rune-capture:hover { background: rgba(100,181,246,.25); border-color: #64b5f6; }

.rune-preset-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 12px;
    background: rgba(15,15,35,.7);
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    margin-bottom: 8px;
}
.rp-bar-label { font-size: 11px; color: #888; white-space: nowrap; margin-right: 2px; }
.rp-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid #2a2a4a;
    border-radius: 5px;
    padding: 4px 8px;
    min-width: 100px;
    font-size: 12px;
    transition: border-color .2s, background .2s;
}
.rp-slot.saved { border-color: #4fc3f7; background: rgba(79,195,247,.06); }
.rp-slot-name { color: #ccc; font-weight: 600; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-slot-empty { color: #555; font-style: italic; font-size: 11px; }
.rp-slots { display: flex; gap: 6px; flex: 1; }
.rp-slot-count { font-size: 10px; color: #666; margin-left: 2px; }
.rp-btn {
    background: none; border: none; cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 3px; transition: background .15s;
}
.rp-btn-load { color: #4fc3f7; }
.rp-btn-load:hover { background: rgba(79,195,247,.15); }
.rp-btn-save { color: #66bb6a; }
.rp-btn-save:hover { background: rgba(102,187,106,.15); }
.rp-btn-del { color: #e57373; font-size: 10px; }
.rp-btn-del:hover { background: rgba(229,115,115,.15); }

/* ============================================
   장비 교체 패널
   ============================================ */
.swap-panel { padding: 4px 0; }
.swap-header {
    font-size: 15px; font-weight: 700; color: #e0e0e0;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.swap-header i { color: #4fc3f7; margin-right: 6px; }
.swap-current {
    font-size: 12px; color: #888; margin-bottom: 10px;
}
.swap-empty {
    text-align: center; color: #555; padding: 30px 0; font-size: 13px;
}
.swap-empty i { display: block; font-size: 28px; margin-bottom: 8px; color: #333; }
.swap-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 320px; overflow-y: auto;
    padding-right: 4px;
}
.swap-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.swap-item:hover {
    background: rgba(79,195,247,.08);
    border-color: #4fc3f7;
    transform: translateX(2px);
}
.swap-item-icon { flex-shrink: 0; width: 40px; height: 40px; }
.swap-item-icon img, .swap-icon-img { width: 40px; height: 40px; border-radius: 6px; }
.swap-item-body { flex: 1; min-width: 0; }
.swap-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-item-lv { font-size: 10px; color: #666; margin-top: 1px; }
.swap-item-diff { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.swap-stat-up { font-size: 11px; color: #4caf50; font-weight: 600; }
.swap-stat-down { font-size: 11px; color: #ef5350; font-weight: 600; }
.swap-stat-same { font-size: 11px; color: #666; }
.swap-back {
    display: block; margin-top: 10px; font-size: 12px; color: #888; text-decoration: none;
}
.swap-back:hover { color: #4fc3f7; }

/* ==========================================
   MATERIAL TAB (재료 보관함)
   ========================================== */
.material-zone-header {
    width: 100%;
    padding: 8px 12px 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
}
.material-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    transition: background 0.15s;
}
.material-slot:hover { background: rgba(255,255,255,0.07); }
.material-slot.material-empty { opacity: 0.35; }
.btn-mat-auction {
    margin-left: auto;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.btn-mat-auction:hover { background: linear-gradient(135deg, #ffb74d, #ff9800); }
.material-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.material-icon.rarity-border-common { border-color: var(--rarity-common, #9d9d9d); }
.material-icon.rarity-border-uncommon { border-color: var(--rarity-uncommon, #1eff00); }
.material-icon.rarity-border-rare { border-color: var(--rarity-rare, #0070dd); }
.material-icon.rarity-border-epic { border-color: var(--rarity-epic, #a335ee); }
.material-icon-emoji { line-height: 1; }
.material-icon-img { width: 32px; height: 32px; border-radius: 4px; object-fit: contain; }
.material-qty {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.2;
}
.material-info { flex: 1; min-width: 0; }
.material-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.material-rarity-label { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ===== 미라클의 함 (Miracle Cube) ===== */
.miracle-header {
    padding: 16px;
    background: linear-gradient(135deg, rgba(255,107,53,.06), rgba(255,107,53,.02));
    border: 1px solid rgba(255,107,53,.15);
    border-radius: 12px;
    margin-bottom: 16px;
}
.miracle-title {
    font-size: 17px;
    font-weight: 800;
    color: #ff6b35;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.miracle-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.miracle-section {
    margin-bottom: 16px;
}
.miracle-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.miracle-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 추출 가능 장비 아이템 */
.miracle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: background .15s, border-color .15s;
}
.miracle-item:hover { background: rgba(255,255,255,.06); border-color: rgba(255,107,53,.25); }
.miracle-item-icon img { border-radius: 6px; border: 2px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); }
.miracle-item-info { flex: 1; min-width: 0; }
.miracle-item-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miracle-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.miracle-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.15);
}
.miracle-tag-set { border-color: rgba(78,205,196,.3); color: #4ecdc4; background: rgba(78,205,196,.08); }
.miracle-tag-pfx { border-color: rgba(241,196,15,.3); color: #f1c40f; background: rgba(241,196,15,.08); }
.miracle-item-actions { flex-shrink: 0; display: flex; gap: 6px; }
.miracle-locked { font-size: 11px; color: var(--text-dim); }
.btn-miracle-extract {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
}
.btn-miracle-set { background: linear-gradient(135deg, #4ecdc4, #2ecc71); }
.btn-miracle-set:hover { filter: brightness(1.15); }
.btn-miracle-pfx { background: linear-gradient(135deg, #f1c40f, #e67e22); }
.btn-miracle-pfx:hover { filter: brightness(1.15); }

/* 기록물 카드 */
.miracle-record {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(168,85,247,.04), rgba(78,205,196,.04));
    border: 1px solid rgba(168,85,247,.15);
    border-radius: 10px;
    transition: border-color .15s, background .15s;
}
.miracle-record:hover { border-color: rgba(168,85,247,.3); background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(78,205,196,.06)); }
.miracle-record-icon { position: relative; flex-shrink: 0; }
.miracle-record-icon img { border-radius: 6px; border: 2px solid rgba(168,85,247,.3); background: rgba(0,0,0,.3); }
.miracle-record-type-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.miracle-record-info { flex: 1; min-width: 0; }
.miracle-record-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miracle-record-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.miracle-record-actions { flex-shrink: 0; display: flex; gap: 6px; }
.btn-miracle-apply {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    transition: filter .15s, transform .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-miracle-apply:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-miracle-delete {
    border: 1px solid rgba(231,76,60,.3);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    background: transparent;
    color: #e74c3c;
    transition: background .15s;
}
.btn-miracle-delete:hover { background: rgba(231,76,60,.1); }

/* 미라클 모달 */
.miracle-modal {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.miracle-modal-lg { max-width: 480px; }
.miracle-modal-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.miracle-modal-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 12px;
}
.miracle-modal-body { margin-bottom: 16px; }
.miracle-warning {
    padding: 12px;
    background: rgba(255,107,53,.08);
    border: 1px solid rgba(255,107,53,.2);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.miracle-warning i { color: #ff6b35; font-size: 16px; }
.miracle-warning-sub {
    font-size: 12px;
    color: var(--text-dim);
    padding: 8px 12px;
    background: rgba(231,76,60,.06);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.miracle-result-preview {
    font-size: 13px;
    color: #4ecdc4;
    padding: 10px 12px;
    background: rgba(78,205,196,.06);
    border: 1px solid rgba(78,205,196,.15);
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.miracle-modal-actions {
    display: flex;
    gap: 8px;
}
.miracle-confirm-btn {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.miracle-confirm-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.miracle-confirm-btn:disabled { opacity: .6; cursor: not-allowed; }

/* 적용 대상 선택 리스트 */
.miracle-target-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.miracle-target {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.miracle-target:hover { background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.3); }
.miracle-target img { border-radius: 5px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); }
.miracle-target-info { flex: 1; min-width: 0; }
.miracle-target-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miracle-target-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* 적용 확인 요약 */
.miracle-apply-summary {
    padding: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.miracle-apply-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.miracle-apply-label { font-size: 12px; color: var(--text-dim); }
.miracle-apply-value { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.miracle-apply-arrow { text-align: center; padding: 4px; color: var(--text-dim); font-size: 14px; }

/* 전문기술 재료 비용 표시 */
.rc-material {
    font-size: 12px;
    margin-right: 4px;
}
.prof-material-info {
    padding: 8px 12px;
}
.prof-mat-header {
    font-size: 13px; font-weight: 600; color: var(--text-dim);
    margin-bottom: 8px;
}
.prof-mat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}
.prof-mat-card {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px; padding: 5px 8px;
    transition: background .15s;
}
.prof-mat-card:hover { background: rgba(255,255,255,.08); }
.prof-mat-icon { width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0; }
.prof-mat-detail { display: flex; flex-direction: column; min-width: 0; }
.prof-mat-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-mat-qty { font-size: 11px; color: var(--text-dim); }

/* ===== 쐐기돌 (Keystone) ===== */
.ks-header { margin-bottom: 16px; }
.ks-header h3 { margin: 0 0 4px; font-size: 18px; color: #e2c87f; }
.ks-desc { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.5; }

.ks-status-card {
    background: linear-gradient(135deg, rgba(226,200,127,.06), rgba(140,100,60,.08));
    border: 1px solid rgba(226,200,127,.15);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}
.ks-stat-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.ks-stat {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.05);
}
.ks-stat-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.ks-stat-value { font-size: 20px; font-weight: 700; color: #ccc; }
.ks-stat-value.ks-active { color: #e2c87f; }
.ks-stat-value.ks-best { color: #ffa500; }

.ks-floor-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 12px;
    background: rgba(0,0,0,.25);
    border-radius: 10px;
    border: 1px solid rgba(226,200,127,.12);
    position: relative;
    overflow: hidden;
}
.ks-floor-display.ks-idle { border-color: rgba(255,255,255,.06); }
.ks-floor-icon { font-size: 28px; color: #e2c87f; margin-bottom: 2px; }
.ks-idle .ks-floor-icon { color: #555; }
.ks-floor-number { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; }
.ks-floor-number small { font-size: 16px; font-weight: 600; color: #aaa; margin-left: 2px; }
.ks-idle .ks-floor-number { font-size: 20px; color: #888; }
.ks-floor-subtitle { font-size: 12px; color: #e2c87f; font-weight: 500; }
.ks-idle .ks-floor-subtitle { color: #666; }

.ks-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.ks-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ks-btn:active { transform: scale(.97); }

/* ============================================
   고블린 도박사 (Goblin Gambler)
   ============================================ */
.gambler-modal-content {
    max-width: 420px;
    background: linear-gradient(180deg, #1a1a0e 0%, #1c1c12 100%);
    border: 1px solid rgba(251,191,36,.15);
}
.gambler-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(251,191,36,.05));
    border-bottom: 1px solid rgba(251,191,36,.1);
}
.gambler-dice-area {
    display: flex; justify-content: center; gap: 20px; margin: 16px 0;
}
.gambler-dice {
    width: 64px; height: 64px; border-radius: 12px;
    background: linear-gradient(135deg, #2a2510, #3a3520);
    border: 2px solid rgba(251,191,36,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: #fbbf24;
    transition: transform .2s;
}
.gambler-dice:hover { transform: scale(1.05); }
.gambler-result { min-height: 48px; margin: 8px 0; }
.gambler-controls { margin: 12px 0; }
.gambler-bet-row {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px;
}
.gambler-bet-input {
    width: 120px; padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(251,191,36,.2);
    color: #fbbf24; font-size: 14px; font-weight: 700; text-align: right;
}
.gambler-bet-presets {
    display: flex; gap: 6px; justify-content: center; margin-bottom: 10px;
}
.gambler-bet-presets button {
    padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(251,191,36,.2);
    background: rgba(251,191,36,.08); color: #fbbf24; font-size: 12px; cursor: pointer;
}
.gambler-bet-presets button:hover { background: rgba(251,191,36,.2); }
.gambler-roll-btn {
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    font-size: 15px !important; padding: 10px 24px !important; border-radius: 10px !important;
}
.gambler-roll-btn:hover { background: linear-gradient(135deg, #d97706, #f59e0b) !important; }
.gambler-payout-table {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
    font-size: 11px; color: var(--text-dim);
}

/* ============================================
   환상의 마법축제 (Magic Festival)
   ============================================ */
.festival-modal-content {
    max-width: 420px;
    background: linear-gradient(180deg, #1a102e 0%, #1c1230 100%);
    border: 1px solid rgba(192,132,252,.15);
}
.festival-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    background: linear-gradient(135deg, rgba(192,132,252,.15), rgba(192,132,252,.05));
    border-bottom: 1px solid rgba(192,132,252,.1);
}
.festival-wheel-wrapper {
    position: relative; display: inline-block; margin: 10px 0;
}
.festival-wheel-pointer {
    position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
    font-size: 22px; color: #fbbf24; text-shadow: 0 2px 6px rgba(0,0,0,.6);
    z-index: 10;
}
.festival-result { min-height: 48px; margin: 8px 0; }
.festival-controls { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.festival-spin-btn {
    background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
    font-size: 15px !important; padding: 10px 24px !important; border-radius: 10px !important;
}
.festival-spin-btn:hover { background: linear-gradient(135deg, #9333ea, #a855f7) !important; }
.festival-fortune-btn {
    background: transparent !important; border: 1px solid rgba(192,132,252,.3) !important;
    color: #c084fc !important; padding: 8px 20px !important; border-radius: 8px !important;
    font-size: 13px !important;
}
.festival-fortune-btn:hover { background: rgba(192,132,252,.1) !important; }
.festival-fortune-result { margin-top: 10px; }

/* ============================================
   균열침공 (Rift Invasion)
   ============================================ */
.rift-modal-content {
    max-width: 440px;
    background: linear-gradient(180deg, #1a0e0e 0%, #1c1212 100%);
    border: 1px solid rgba(239,68,68,.15);
}
.rift-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid rgba(239,68,68,.1);
}
.rift-gauge-area { margin-bottom: 12px; }
.rift-gauge-bar {
    width: 100%; height: 20px; border-radius: 10px;
    background: rgba(255,255,255,.06); overflow: hidden;
    border: 1px solid rgba(239,68,68,.2);
}
.rift-gauge-fill {
    height: 100%; border-radius: 10px;
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    transition: width .3s;
}
.rift-click-area {
    padding: 24px; margin: 12px 0;
    background: radial-gradient(circle, rgba(239,68,68,.1) 0%, rgba(0,0,0,.3) 70%);
    border: 2px solid rgba(239,68,68,.2); border-radius: 16px;
    cursor: pointer; text-align: center; user-select: none;
    transition: transform .1s, box-shadow .1s;
    position: relative; overflow: hidden;
}
.rift-click-area:active {
    transform: scale(.97);
    box-shadow: 0 0 20px rgba(239,68,68,.4);
}
.rift-click-area:hover {
    border-color: rgba(239,68,68,.4);
    box-shadow: 0 0 12px rgba(239,68,68,.2);
}
.rift-portal {
    font-size: 48px;
    animation: riftSpin 3s linear infinite;
}
@keyframes riftSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.rift-click-effect {
    position: absolute; font-size: 24px; pointer-events: none;
    animation: riftClickPop .6s ease-out forwards;
}
@keyframes riftClickPop {
    0% { opacity: 1; transform: scale(.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(.8) translateY(-20px); }
}
.ks-btn:disabled { opacity: .5; cursor: not-allowed; }
.ks-btn-start {
    background: linear-gradient(135deg, #e2c87f, #c9a033);
    color: #1a1200;
    font-size: 15px;
    padding: 14px;
}
.ks-btn-start:hover { background: linear-gradient(135deg, #f0d88a, #d4ab3a); }
.ks-btn-fight {
    background: linear-gradient(135deg, #4a90d9, #357abd);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ks-btn-fight:hover { background: linear-gradient(135deg, #5a9fe6, #4289cc); }
.ks-fight-gauge {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    pointer-events: none;
}
.ks-fight-label {
    position: relative;
    z-index: 1;
}
.ks-btn-auto {
    background: rgba(255,255,255,.08);
    color: #aaa;
    border: 1px solid rgba(255,255,255,.1);
    position: relative;
    overflow: hidden;
}
.ks-btn-auto:hover { background: rgba(255,255,255,.12); color: #ddd; }
.ks-btn-auto.ks-auto-active {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border-color: transparent;
}
.ks-auto-gauge {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    pointer-events: none;
}
.ks-auto-active .ks-auto-gauge {
    background: rgba(255,255,255,.15);
}
.ks-auto-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ks-btn-abandon {
    background: rgba(255,70,70,.1);
    color: #ff6b6b;
    border: 1px solid rgba(255,70,70,.15);
    flex: 0 0 auto;
    padding: 10px 14px;
}
.ks-btn-abandon:hover { background: rgba(255,70,70,.2); }

.ks-battle-log {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 14px;
}
.ks-log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 3px;
    border-radius: 6px;
    font-size: 12px;
    flex-wrap: wrap;
}
.ks-log-victory { background: rgba(30,255,0,.04); border-left: 3px solid rgba(30,255,0,.3); }
.ks-log-defeat { background: rgba(255,68,68,.06); border-left: 3px solid rgba(255,68,68,.35); }
.ks-log-floor {
    font-weight: 700;
    color: #e2c87f;
    min-width: 36px;
}
.ks-log-monster { color: #ccc; }
.ks-log-monster small { color: #888; margin-left: 2px; }
.ks-log-result { font-weight: 600; }
.ks-log-victory .ks-log-result { color: #1eff00; }
.ks-log-defeat .ks-log-result { color: #ff4444; }
.ks-log-gold { color: var(--gold); font-weight: 600; }
.ks-log-drop { font-weight: 600; }
.ks-log-reset { color: #ff6b6b; font-size: 11px; font-style: italic; }

.ks-info-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding: 12px 14px;
}
.ks-info-title {
    font-size: 13px;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ks-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ks-info-list li {
    font-size: 12px;
    color: #888;
    padding: 3px 0;
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}
.ks-info-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #555;
}
.ks-gold { color: var(--gold); font-weight: 600; }
.ks-equip { color: #4a90d9; font-weight: 600; }
.ks-error { color: #ff6b6b; text-align: center; padding: 20px; }

/* 쐐기돌 전투 결과 오버레이 */
.ks-result-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 2;
    animation: ksFadeIn .3s ease;
    padding: 8px;
    text-align: center;
}
.ks-result-vic { background: rgba(22, 80, 45, .92); }
.ks-result-def { background: rgba(100, 30, 25, .92); }

.ks-result-line {
    font-size: 13px;
    color: #eee;
    margin-bottom: 4px;
    font-weight: 600;
}
.ks-result-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
    font-size: 11px;
    color: #aaa;
}
.ks-result-details span { white-space: nowrap; }
.ks-result-reset {
    margin-top: 4px;
    font-size: 11px;
    color: #e74c3c;
    font-weight: 600;
}
@keyframes ksFadeIn {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================
   부활 시스템
   ========================================== */
.btn-resurrect-action {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
    font-size: 15px;
    padding: 14px;
    border-radius: 10px;
    width: 100%;
    animation: resPulse 1.5s ease-in-out infinite;
}
.btn-resurrect-action:hover {
    background: linear-gradient(135deg, #ff6b6b, #e74c3c) !important;
}
@keyframes resPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, .4); }
    50% { box-shadow: 0 0 12px 4px rgba(231, 76, 60, .3); }
}

.res-options-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: resFadeIn .2s ease;
}
.res-options-popup {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 24px 20px;
    min-width: 280px;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.res-options-title {
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
    margin-bottom: 16px;
}
.res-options-title i { margin-right: 6px; }
.res-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.res-option-btn {
    background: linear-gradient(135deg, #2a2a4a, #1e1e3a);
    border: 1px solid rgba(255,255,255,.12);
    color: #eee;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.res-option-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #3a3a5a, #2e2e4a);
    border-color: rgba(255,255,255,.2);
    transform: translateY(-1px);
}
.res-option-btn.disabled, .res-option-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    color: #888;
}
.res-option-btn i { margin-right: 6px; }
.res-option-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    color: #888;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.res-option-close:hover { color: #ccc; border-color: rgba(255,255,255,.2); }

@keyframes resFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   SERVER EVENTS (봉인된 포식자 / 타락자의 귀환 / 암상인)
   ========================================== */

/* Ev Banner */
.ev-banner { transition: box-shadow .3s ease, border .3s ease; }
.ev-banner.ev-banner-active {
    animation: evPulse 2s ease-in-out infinite;
    border: 1px solid rgba(239,68,68,.3);
}
.ev-banner.ev-banner-waiting {
    border: 1px solid rgba(255,255,255,.08);
}
.ev-banner-icon { width: 32px; height: 32px; }

@keyframes evPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(168,85,247,.15); }
    50%      { box-shadow: 0 0 18px rgba(168,85,247,.35); }
}

/* Ev Boss Modal */
.ev-modal-content {
    border-color: rgba(168,85,247,.25);
}
.ev-boss-header {
    background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(168,85,247,.1));
}
.ev-hp-bar { background: rgba(168,85,247,.12); }
.ev-hp-fill {
    background: linear-gradient(90deg, #ef4444cc 0%, #ef4444 50%, #ef444488 100%);
    transition: width .3s ease;
}
.ev-btn-attack {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.ev-btn-attack:hover:not(:disabled) {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: scale(1.05);
}
.ev-btn-claim {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}
.ev-btn-claim:hover:not(:disabled) {
    background: linear-gradient(135deg, #c084fc 0%, #8b5cf6 100%);
    transform: scale(1.05);
}

/* Black Market Modal */
.bm-modal-content {
    border-color: rgba(167,139,250,.25);
}
.bm-header {
    background: linear-gradient(135deg, rgba(167,139,250,.2), rgba(99,58,199,.15));
}
.bm-item-card {
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    cursor: default;
}
.bm-item-card:not(.bm-sold-out):hover {
    background: rgba(167,139,250,.08) !important;
    border-color: rgba(167,139,250,.3) !important;
    transform: translateY(-1px);
}
.bm-sold-out {
    pointer-events: none;
    filter: grayscale(.4);
}