/* ============================================
   WoW Auto-Hunt – 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: url('/images/background.jpg') center center / cover no-repeat fixed;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}
.hidden { display: none !important; }

/* ===== 스크롤바 ===== */
::-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-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(20px);
    -webkit-backdrop-filter: blur(20px);
    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: all .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: all .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; }

/* ===== 캐릭터 생성 위저드 ===== */
.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: rgba(22,33,62,.95);
    backdrop-filter: blur(20px);
    padding: 0;
    border-radius: 20px;
    border: 1px solid rgba(255,215,0,.1);
    max-width: 540px;
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 30px 90px rgba(0,0,0,.7);
    animation: wizardIn .5s cubic-bezier(.16,1,.3,1) both;
}
@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: 24px 28px 16px;
    border-bottom: 1px solid var(--border);
}
.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: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.wizard-section { padding: 18px 28px; }
.wizard-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.wizard-label i { margin-right: 6px; color: var(--accent); }

.name-input-wrap input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(26,26,62,.7);
    border: 1px solid var(--border);
    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);
}
.name-input-wrap input::placeholder { color: var(--text-dim); }

/* 진영 카드 */
.faction-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.faction-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px 16px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: rgba(15,52,96,.3);
    cursor: pointer;
    transition: all .3s;
}
.faction-card input { display: none; }
.faction-card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.faction-card.selected { transform: translateY(-3px); }
.faction-card.horde-card.selected { border-color: var(--horde); background: rgba(196,30,58,.12); box-shadow: 0 6px 24px rgba(196,30,58,.2); }
.faction-card.alliance-card.selected { border-color: var(--alliance); background: rgba(0,112,221,.12); box-shadow: 0 6px 24px rgba(0,112,221,.2); }
.faction-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: all .3s;
}
.faction-icon img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.horde-card .faction-icon { background: rgba(196,30,58,.2); color: var(--horde); }
.alliance-card .faction-icon { background: rgba(0,112,221,.2); color: var(--alliance); }
.horde-card.selected .faction-icon { background: rgba(196,30,58,.35); box-shadow: 0 0 20px rgba(196,30,58,.3); }
.alliance-card.selected .faction-icon { background: rgba(0,112,221,.35); box-shadow: 0 0 20px rgba(0,112,221,.3); }
.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); }

/* 종족/직업 카드 */
.race-pick, .class-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.race-btn, .class-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(15,52,96,.3);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all .25s;
    gap: 6px;
}
.race-btn:hover, .class-btn:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.race-btn.selected, .class-btn.selected {
    border-color: var(--accent);
    background: rgba(233,69,96,.12);
    color: #fff;
    box-shadow: 0 4px 16px rgba(233,69,96,.2);
    transform: translateY(-2px);
}
.race-btn i, .class-btn i {
    font-size: 20px;
    margin-bottom: 2px;
    opacity: .8;
}
.race-btn.selected i, .class-btn.selected i { opacity: 1; color: var(--accent); }
.race-btn .pick-name, .class-btn .pick-name { font-weight: 600; font-size: 13px; }
.race-btn .pick-desc, .class-btn .pick-desc { font-size: 10px; color: var(--text-dim); }
.pick-trait { font-size: 9px; color: var(--gold); opacity: .7; margin-top: 2px; line-height: 1.3; }
.pick-trait i { font-size: 7px; margin-right: 2px; }
.race-btn.selected .pick-trait { opacity: 1; }

/* 미리보기 */
.wizard-preview {
    padding: 0 28px 10px;
}
.preview-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(15,52,96,.4);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.preview-faction {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.preview-faction img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.preview-faction.horde { background: rgba(196,30,58,.2); color: var(--horde); }
.preview-faction.alliance { background: rgba(0,112,221,.2); color: var(--alliance); }
.preview-name { font-weight: 700; font-size: 16px; color: var(--gold); }
.preview-info { font-size: 12px; color: var(--text-dim); }

/* 생성 버튼 */
.wizard-actions { padding: 8px 28px 12px; }
.btn-wizard-create {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent), #d63651);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.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;
    align-items: center;
    padding: 0 12px;
    height: 48px;
    background: linear-gradient(180deg, #1e2a4a 0%, #16213e 100%);
    border-bottom: 1px solid #2a3a6e;
    gap: 8px;
    flex-shrink: 0;
    z-index: 10;
}
.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: 12px;
    padding: 6px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.05);
}
.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;
    gap: 0;
    flex: 1;
    justify-content: center;
    overflow-x: auto;
}
#main-nav::-webkit-scrollbar { height: 0; }
.nav-btn {
    padding: 0 12px;
    height: 48px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-btn i { font-size: 11px; }
.nav-btn:hover { color: var(--text-bright); background: rgba(255,255,255,.03); }
.nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

.hdr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.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; }

/* 헤더 우편함 버튼 */
.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: all .2s;
    margin-left: 4px;
}
.hdr-mail-btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.08); }
.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: all .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; }

/* 모바일 네비 오버레이 */
.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); }
.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: all .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-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 6px 8px;
}
.sb-stat {
    font-size: 11px;
    color: var(--text-dim);
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.sb-stat strong { color: var(--text-bright); font-weight: 700; margin-left: 2px; }
.ss-icon { font-size: 10px; width: 14px; text-align: center; }

/* 지역 표시 */
.sb-zone {
    text-align: center;
    font-size: 12px;
    color: var(--gold);
    padding: 6px 10px;
}
.sb-zone i { margin-right: 4px; }

/* 사냥 컨트롤 */
.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: all .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 {
    background: linear-gradient(135deg, #7f8c8d, #616a6b);
    color: #fff;
}
.btn-stop:hover { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }
.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: all .2s;
}
.btn-hunt-sub:hover { background: rgba(231,76,60,.15); }
.sb-hunt-status {
    text-align: center;
    font-size: 12px;
    color: var(--gold);
    padding: 2px 0;
    min-height: 18px;
}

/* 부활 배너 */
.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: all .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: 6px; }
.log-entry {
    padding: 10px 14px;
    background: rgba(15,52,96,.4);
    border-radius: 8px;
    border-left: 3px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
    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; margin-bottom: 4px; }
.log-entry .log-monster { font-weight: 600; }
.log-entry .log-result { font-weight: 600; }
.log-entry .log-rewards { color: var(--gold); font-size: 12px; }
.log-entry .log-drop { color: var(--rarity-rare); font-size: 12px; }
.log-mob-stats {
    display: flex; gap: 10px; font-size: 11px; color: var(--text-dim);
    margin-bottom: 4px; padding: 3px 0;
}
.log-mob-stats span { display: flex; align-items: center; gap: 3px; }
.log-mob-stats i { font-size: 10px; }
.log-mob-stats .fa-heart { color: var(--hp); }
.log-mob-stats .fa-burst { color: #e74c3c; }
.log-mob-stats .fa-shield-halved { color: #3498db; }
.log-mlvl { color: var(--text-dim); font-weight: 400; }
.mob-boss { background: #e74c3c; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-right: 4px; font-weight: 700; }
.mob-elite { background: #e67e22; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-right: 4px; font-weight: 600; }

/* ── 하단 채팅 독 ── */
#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; }
.chat-messages {
    height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    font-size: 12px;
}
.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; }
.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; }



/* ===== 장비 패널 ===== */
.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;
    font-size: 36px;
    color: rgba(255,255,255,.25);
    margin-bottom: 8px;
    box-shadow: 0 0 20px rgba(233,69,96,.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; }

/* 무기 슬롯 */
.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: all .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);
}
.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: all .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: all .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; }
.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; }
.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: 12px; }
.shop-header h3 { margin: 0; font-size: 16px; }
.shop-gold { font-size: 14px; color: var(--gold); font-weight: 600; }
.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: all .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); }
.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;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(15,52,96,.5), rgba(22,33,62,.8));
    border: 1px solid var(--border);
    border-radius: 12px;
}
.enh-preview { text-align: center; }
.enh-item-frame {
    width: 120px;
    height: 120px;
    margin: 0 auto 8px;
    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: 96px; height: 96px; object-fit: contain; }
.enh-level-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-weight: 800;
    font-size: 14px;
    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: 14px; font-weight: 600; }

/* 확률 패널 */
.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: 16px;
    padding: 12px 20px;
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    width: 100%;
    max-width: 360px;
    justify-content: center;
}
.enh-before, .enh-after { text-align: center; min-width: 80px; }
.enh-comp-lvl { font-size: 14px; font-weight: 700; color: var(--text); }
.enh-comp-val { font-size: 13px; color: var(--text-dim); }
.enh-arrow { font-size: 20px; color: var(--accent); }

/* 강화 버튼 */
.btn-enhance-main {
    width: 100%;
    max-width: 320px;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 8px;
    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);
}
.btn-enhance-main:hover {
    background: linear-gradient(135deg, #d35400, #e67e22);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(243,156,18,.45);
}

/* ===== 동반자 시스템 ===== */
.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: all .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: all .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: all .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-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: all .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: all .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-card {
    background: var(--bg-card);
    padding: 14px 14px 14px 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.locked { opacity: .5; cursor: not-allowed; }
.zone-card .z-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.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; }
.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; margin-top: 4px; margin-left: 30px;
}
.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; margin-left: 4px;
}
.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; }

/* 드롭 테이블 버튼 */
.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: all .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; }

/* ===== 스탯 ===== */
.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; }

/* 종족 특성 상자 */
.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; }
.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: all .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; }
.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; margin-right: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.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; }
.idm-card { padding: 24px 20px 16px; }
.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-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-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); }
.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; }

/* ==========================================
   AUCTION (경매장)
   ========================================== */
.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; }

/* 장비 슬롯 아이콘 레이아웃 (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; }

/* ===== 등급별 색상 클래스 ===== */
.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: 12px 16px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;
}
.cs-header h3 { font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.cs-header h3 i { color: #f39c12; }
.cs-diamond-display {
    background: linear-gradient(135deg, #2c3e50, #34495e); color: #5dade2;
    padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
    border: 1px solid rgba(93,173,226,.3);
}
.cs-diamond-display i { color: #5dade2; }
.cs-tabs {
    display: flex; gap: 0; padding: 0;
    background: var(--bg-darker, #0d1117); border-bottom: 1px solid var(--border);
}
.cstab {
    flex: 1; padding: 10px 8px; font-size: 12px; cursor: pointer;
    background: transparent; color: var(--text-dim); border: none;
    border-bottom: 2px solid transparent; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.cstab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.cstab.active { color: #5dade2; border-bottom-color: #5dade2; background: rgba(93,173,226,.08); }
.cs-list {
    padding: 12px; display: flex; flex-direction: column; gap: 8px;
    max-height: calc(100vh - 200px); overflow-y: auto;
}
.cs-empty {
    text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px;
}
.cs-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--border); border-radius: 8px;
    padding: 12px; transition: all .25s;
}
.cs-card:hover { background: rgba(255,255,255,.04); transform: translateX(2px); }
.cs-card-icon { width: 48px; height: 48px; flex-shrink: 0; }
.cs-icon-img {
    width: 48px !important; height: 48px !important;
    border-radius: 6px; border: 2px solid var(--border);
}
.cs-icon-img.rarity-glow-uncommon { border-color: var(--rarity-uncommon); box-shadow: 0 0 10px rgba(30,255,0,.3); }
.cs-icon-img.rarity-glow-rare { border-color: var(--rarity-rare); box-shadow: 0 0 12px rgba(0,112,221,.35); }
.cs-icon-img.rarity-glow-epic { border-color: var(--rarity-epic); box-shadow: 0 0 14px rgba(163,53,238,.4); }
.cs-icon-img.rarity-glow-legendary { border-color: var(--rarity-legendary); box-shadow: 0 0 16px rgba(255,128,0,.45); }
.cs-icon-img.rarity-glow-heirloom { border-color: var(--rarity-heirloom); box-shadow: 0 0 14px rgba(0,204,255,.4); }
.cs-card-body { flex: 1; min-width: 0; }
.cs-card-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.cs-card-rarity { margin-bottom: 4px; }
.cs-rarity-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    background: rgba(255,255,255,.06); font-weight: 600;
}
.cs-card-desc { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; line-height: 1.4; }
.cs-card-effs { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-eff-tag {
    font-size: 10px; padding: 2px 6px; border-radius: 3px;
    background: rgba(255,255,255,.06); color: var(--text-dim);
    display: inline-flex; align-items: center; gap: 3px;
}
.cs-eff-tag.exp { color: #2ecc71; background: rgba(46,204,113,.1); }
.cs-eff-tag.gold { color: #f1c40f; background: rgba(241,196,15,.1); }
.cs-eff-tag.drop { color: #9b59b6; background: rgba(155,89,182,.1); }
.cs-eff-tag.dur { color: #3498db; background: rgba(52,152,219,.1); }
.cs-eff-tag.amt { color: #e67e22; background: rgba(230,126,34,.1); }
.cs-eff-tag.stat { color: #1abc9c; background: rgba(26,188,156,.1); }
.cs-eff-tag.slot { color: #e74c3c; background: rgba(231,76,60,.1); }
.cs-card-buy { flex-shrink: 0; }
.btn-cs-buy {
    background: linear-gradient(135deg, #2980b9, #3498db); color: #fff;
    border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px;
    font-weight: 700; cursor: pointer; transition: all .2s;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.btn-cs-buy:hover:not(:disabled) { background: linear-gradient(135deg, #3498db, #5dade2); transform: scale(1.03); }
.btn-cs-buy:disabled, .btn-cs-buy.btn-disabled {
    background: #555; color: #999; cursor: not-allowed; opacity: .7;
}

/* ===== 반응형 ===== */
@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-stats-grid { display: none; }
    .sb-zone { padding: 4px 8px; font-size: 11px; }
    .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; }
    .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; }
    .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):not(.sb-zone) { display: none; }
    .sb-bars, .sb-zone, .sb-hunt-ctrl { display: flex; }
    #panels { padding: 8px; }
    .talent-tier-row { grid-template-columns: 1fr !important; }
    /* 캐시샵 모바일 */
    .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; }
}

/* ==========================================
   TALENT SYSTEM (특성)
   ========================================== */
.talent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.talent-header h3 { margin: 0; }
.talent-points-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #ccd;
}
.talent-points-display strong {
    color: #ffcc00;
    font-size: 16px;
}
.talent-used { color: #888; font-size: 12px; }

.talent-locked-msg {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 15px;
}
.talent-locked-msg i { font-size: 32px; display: block; margin-bottom: 10px; color: #555; }

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

.talent-tree {
    background: rgba(0,0,0,0.25);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
}
.talent-tree-title {
    font-size: 14px;
    color: #ffcc00;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
}
.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: 12px; 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: 12px;
}
.talent-tier:last-child { margin-bottom: 0; }

.talent-tier-label {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
    padding-left: 4px;
}
.tier-req { color: #e67e22; font-size: 10px; }

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

.talent-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 8px;
    border: 2px solid #444;
    background: rgba(30,30,40,0.7);
    transition: all 0.2s;
    text-align: center;
    min-height: 100px;
}
.talent-node.empty {
    visibility: hidden;
}
.talent-node.available {
    border-color: #27ae60;
    background: rgba(39,174,96,0.12);
    cursor: pointer;
}
.talent-node.available:hover {
    border-color: #2ecc71;
    background: rgba(39,174,96,0.25);
    transform: scale(1.03);
}
.talent-node.invested {
    border-color: #2980b9;
    background: rgba(41,128,185,0.15);
    cursor: pointer;
}
.talent-node.invested:hover {
    border-color: #3498db;
    background: rgba(41,128,185,0.28);
    transform: scale(1.03);
}
.talent-node.maxed {
    border-color: #f1c40f;
    background: rgba(241,196,15,0.12);
    box-shadow: 0 0 8px rgba(241,196,15,0.3);
}
.talent-node.locked {
    opacity: 0.4;
    border-color: #333;
    cursor: not-allowed;
}

.talent-icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.talent-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.talent-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 4px;
}
.talent-name {
    font-size: 12px;
    font-weight: 600;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.talent-rank {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
}
.rank-max { color: #f1c40f; font-weight: 700; }

.talent-effect {
    font-size: 10px;
    color: #8e8e8e;
    line-height: 1.3;
}
.talent-current {
    font-size: 10px;
    color: #3498db;
    font-weight: 600;
}

/* ==========================================
   PLAYER INFO MODAL (플레이어 정보)
   ========================================== */
.player-info-modal { max-width: 420px; padding: 0 !important; overflow: hidden; max-height: 85vh; overflow-y: auto; }
@media (min-width: 768px) { .player-info-modal { max-width: 640px; } }
.pi-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 18px 14px; background: linear-gradient(135deg, rgba(30,42,74,.9), rgba(22,33,62,.9));
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.pi-avatar {
    width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.15);
}
.pi-avatar.horde { border-color: var(--horde); color: var(--horde); }
.pi-avatar.alliance { border-color: var(--alliance); color: var(--alliance); }
.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: 17px; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.pi-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.pi-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.08); color: var(--text-dim);
}
.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-section { padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pi-section:last-child { border-bottom: none; }
.pi-section-title { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pi-section-title i { color: var(--accent); font-size: 11px; }
.pi-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pi-stat {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    background: var(--bg-card); border-radius: 4px; font-size: 13px;
}
.pi-stat i { font-size: 11px; }
.pi-stat-name { color: var(--text-dim); flex: 1; }
.pi-stat-val { font-weight: 700; }
.pi-record { display: flex; gap: 14px; font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }
.pi-record span { display: flex; align-items: center; gap: 4px; }
.pi-record i { font-size: 11px; }
.pi-zone { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.pi-zone i { color: var(--accent); margin-right: 4px; }
.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); }

/* 장비 리스트 (상세) */
.pi-eq-list { display: flex; flex-direction: column; gap: 4px; }
.pi-eq-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px;
    background: var(--bg-card); border-radius: 5px; border-left: 3px solid transparent;
}
.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: 32px; height: 32px; flex-shrink: 0; }
.pi-eq-icon { width: 30px !important; height: 30px !important; border-radius: 4px; }
.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; }
.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-stats { font-size: 9px; color: #7f8c8d; margin-top: 2px; line-height: 1.3; }

/* 특성 리스트 */
.pi-talent-list { display: flex; flex-direction: column; gap: 6px; }
.pi-talent-group { margin-bottom: 4px; }
.pi-sub-title { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.pi-sub-title i { font-size: 10px; }
.pi-talent-row {
    display: flex; align-items: center; gap: 6px; padding: 3px 8px;
    background: var(--bg-card); border-radius: 4px; font-size: 12px;
}
.pi-talent-icon-img { width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0; }
.pi-talent-name { flex-shrink: 0; color: var(--text); font-weight: 600; }
.pi-talent-effect { flex: 1; font-size: 10px; color: #7f8c8d; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pi-talent-rank { color: var(--gold); font-weight: 700; font-size: 11px; flex-shrink: 0; min-width: 28px; text-align: right; }

/* 모달 섹션 접기 */
.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: 3px; }
.pi-rune-row {
    display: flex; align-items: center; gap: 6px; padding: 3px 8px;
    background: var(--bg-card); border-radius: 4px; font-size: 12px;
}
.pi-rune-icon { font-size: 14px; width: 20px; text-align: center; }
.pi-rune-name { font-weight: 600; color: var(--text); }
.pi-rune-type { font-size: 10px; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.08); color: var(--text-dim); }
.pi-rune-stat { font-size: 10px; color: var(--text-dim); }
.pi-rune-keystone { background: rgba(163,94,255,.2); color: #a35eff; }
.pi-rune-major { background: rgba(52,152,219,.2); color: #3498db; }
.pi-rune-stats { flex: 1; text-align: right; font-size: 10px; color: var(--text-dim); }

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

/* ==========================================
   포션 버튼 행 (HP/MP 분리)
   ========================================== */
.potion-btn-row {
    display: flex; gap: 6px; margin-top: 6px;
}
.potion-btn-row .btn-hunt-sub {
    flex: 1; font-size: 12px; padding: 6px 4px;
}
.btn-pot-hp { background: linear-gradient(135deg, #c0392b, #e74c3c) !important; color: #fff !important; border: none !important; }
.btn-pot-hp:hover { background: linear-gradient(135deg, #a93226, #c0392b) !important; }
.btn-pot-mp { background: linear-gradient(135deg, #2980b9, #3498db) !important; color: #fff !important; border: none !important; }
.btn-pot-mp:hover { background: linear-gradient(135deg, #21618c, #2980b9) !important; }

.auto-pot-status {
    display: flex; gap: 6px; justify-content: center; margin-top: 4px; font-size: 11px;
}
.auto-pot-status .auto-on {
    color: #2ecc71; font-weight: 600;
}
.auto-pot-status .auto-on i { margin-right: 2px; }

/* 명상 버프 상태 표시 */
.med-buff-status {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; font-size: 10px;
}
.med-buff-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; border-radius: 8px;
    background: rgba(155,89,182,0.15); color: #bb86fc; font-weight: 600;
    border: 1px solid rgba(155,89,182,0.3);
    white-space: nowrap;
}
.med-buff-tag i { font-size: 9px; }
.med-buff-tag .med-time { color: #f1c40f; margin-left: 2px; }

/* 드롭 필터 */
.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)
   ========================================== */
.achieve-cats {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;
}
.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: all .2s;
}
.achieve-cat:hover { border-color: var(--accent); color: var(--text); }
.achieve-cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.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: all .2s;
}
.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: all .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-cats {
    display: flex; gap: 4px; margin-bottom: 12px;
}
.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: all .2s;
}
.coll-cat:hover { border-color: var(--accent); color: var(--text); }
.coll-cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.collection-list { display: flex; flex-direction: column; gap: 6px; }
.coll-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 12px; transition: all .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-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: 12px 16px; background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 100%);
    border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;
}
.med-title { font-size: 16px; font-weight: 700; color: var(--text); }
.med-title i { color: #7c3aed; margin-right: 6px; }
.med-mp-display {
    background: linear-gradient(135deg, #1e3a5f, #0d253f); padding: 4px 14px;
    border-radius: 20px; font-size: 13px; font-weight: 600; color: #60a5fa;
    border: 1px solid #2563eb44;
}
.med-mp-display i { margin-right: 4px; }
.med-desc {
    padding: 8px 16px; font-size: 12px; color: var(--text-dim);
    background: rgba(124,58,237,.06); border-bottom: 1px solid var(--border);
}
.med-active-buffs { padding: 0 16px; }
.med-active-title {
    font-size: 13px; font-weight: 700; color: #fbbf24; padding: 10px 0 6px;
}
.med-active-title i { margin-right: 4px; }
.med-active-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; margin-bottom: 4px;
    background: rgba(255,255,255,.03); border-radius: 6px; font-size: 12px;
}
.med-active-name { font-weight: 600; color: var(--text); }
.med-active-stats { color: #4ade80; flex: 1; }
.med-active-time { color: #93c5fd; font-size: 11px; white-space: nowrap; }

/* 명상 일괄 시전 바 */
.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,.12), rgba(124,58,237,.05));
    border-bottom: 1px solid rgba(124,58,237,.25);
}
.med-bulk-bar.hidden { display: none; }
.med-bulk-info { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.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;
}
.btn-med-bulk:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.5); }
.btn-med-bulk i { margin-right: 4px; }

.med-select-all-wrap {
    padding: 6px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
}
.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-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 .2s, box-shadow .2s;
}
.med-card:hover { border-color: #7c3aed55; box-shadow: 0 0 12px rgba(124,58,237,.15); }
.med-card-active { border-color: #7c3aed88; background: rgba(124,58,237,.08); box-shadow: 0 0 16px rgba(124,58,237,.2); }

/* 명상 체크박스 */
.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: all .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: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.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 16px; 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;
}
.btn-med-cast:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.4); }
.btn-med-renew {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.btn-med-renew:hover { box-shadow: 0 4px 14px rgba(37,99,235,.4); }

@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; }
}

/* ==========================================
   포션 임계값 슬라이더
   ========================================== */
.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: 10px; line-height: 1.4; }

/* 전문기술 헤더 */
.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-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: all .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: 600px; 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-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: all .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: all .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-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: all .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: all .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;
}
.guide-editor-toolbar button {
    padding: 6px 10px; border: none; border-radius: 4px;
    background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer;
    transition: all .15s;
}
.guide-editor-toolbar button:hover { background: rgba(96,165,250,.15); color: #60a5fa; }
.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: all .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: all .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) 시스템
   ============================================ */

/* 상단 알림 배너 */
.wb-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 40%, #b91c1c 100%);
    box-shadow: 0 4px 24px rgba(185,28,28,.5);
    animation: wbBannerPulse 2s infinite;
}
@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); }
}
.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; }
.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; }
}