/* ===== VISIONARY SOLDIER — Dark Fantasy RPG Style ===== */
@import url('https://cdn.jsdelivr.net/gh/DungGeunMo/neodgm-webfont@1.530/neodgm/style.css');

:root {
    --bg:        #0d0700;
    --bg2:       #1a0d00;
    --bg3:       #130c03;
    --card:      #1e1005;
    --card2:     #2a1608;
    --border:    #5c3a1e;
    --border2:   #7a5020;
    --gold:      #f0c060;
    --gold-dim:  #c8a060;
    --gold-dark: #9a6a30;
    --text:      #e8d5a3;
    --text-dim:  #c8a878;
    --text-muted:#7a5c3a;
    --text-faint:#3a2010;
    --hp:        #e74c3c;
    --exp:       #2ecc71;
    --green:     #4caf50;
    --green-bg:  #0d1a0d;
    --green-dim: #a8d8a8;
    --green-brd: #1e5c1e;
    --honey:     #c07820;

    /* 버튼 3단계 — 주 액션(rpg-btn류) · 보조 액션(상점·판정 버튼류) · 인라인 칩(자잘한 액션) */
    --btn-font: 'NeoDunggeunmo', monospace;
    --btn-primary-padding: 12px;
    --btn-primary-font: 13px;
    --btn-secondary-padding: 8px 12px;
    --btn-secondary-font: 11px;
    --btn-chip-padding: 5px 10px;
    --btn-chip-font: 10px;

    /* 입력창 공통 — 비전 입력·모험 답변·현자 채팅이 실은 같은 물건 */
    --input-font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --input-font-size: 13px;
    --input-padding: 8px 10px;
    --input-bg: var(--bg3);
    --input-border: 1px solid var(--border);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'NeoDunggeunmo', monospace;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.game-container {
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    background: var(--bg);
    border-left: 2px solid var(--border);
    border-right: 2px solid var(--border);
    display: flex;
    flex-direction: column;
}

/* ===== HUD Bar ===== */
.hud-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 9px 10px 6px;
    flex-shrink: 0;
}
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-level-row  { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.hud-lv         { font-size: 13px; line-height: 1.25; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.hud-title-text { font-size: 10px; line-height: 1.25; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; letter-spacing: 1px; }
.hud-bar-row    { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.hud-bar-label  { font-size: 9px; color: var(--gold-dark); width: 22px; flex-shrink: 0; }
.hud-bar-track  {
    flex: 1; height: 11px;
    background: var(--bg3);
    border: 1px solid var(--border);
    overflow: hidden;
}
.hud-bar-fill { height: 100%; transition: width 0.8s ease; }
.hud-bar-exp  { background: var(--exp); }
.hud-exp-num  { font-size: 9px; color: var(--exp); width: 24px; text-align: right; flex-shrink: 0; }

.hud-status-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hud-status { font-size: 10px; color: var(--text-muted); text-align: right; line-height: 1.3; }

/* ===== 레벨업 팝업 ===== */
.levelup-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: rgba(0,0,0,0.6);
    animation: fadeInBg 0.3s ease;
}
.levelup-popup.hidden { display: none; }
@keyframes fadeInBg { from { opacity:0; } to { opacity:1; } }

.levelup-inner {
    background: var(--card);
    border: 3px solid var(--gold);
    padding: 28px 36px;
    text-align: center;
    position: relative;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.levelup-inner::before, .levelup-inner::after {
    content: ''; position: absolute; width: 10px; height: 10px; background: var(--gold);
}
.levelup-inner::before { top: -2px; left: -2px; }
.levelup-inner::after  { top: -2px; right: -2px; }
.levelup-label {
    font-size: 11px; letter-spacing: 4px; color: var(--gold-dark);
    margin-bottom: 8px; font-family: 'NeoDunggeunmo', monospace;
}
.levelup-lv {
    font-size: 36px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace;
    margin-bottom: 6px;
    animation: glowPulse 1s ease-in-out infinite alternate;
}
@keyframes glowPulse {
    from { text-shadow: 0 0 6px var(--gold); }
    to   { text-shadow: 0 0 20px var(--gold), 0 0 40px #c07820; }
}
.levelup-title {
    font-size: 15px; color: var(--text); font-family: 'NeoDunggeunmo', monospace;
    letter-spacing: 2px; margin-bottom: 20px;
}
.levelup-close {
    background: none; border: 1px solid var(--gold); color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px;
    padding: 6px 20px; cursor: pointer; letter-spacing: 2px;
}
.levelup-close:hover { background: var(--card2); }

/* ===== Screens ===== */
.screen { display: none; flex-direction: column; gap: 10px; padding: 12px; flex: 1; }
.screen.active { display: flex; }
/* 로그인 화면만 카드를 세로 중앙에 — 하단 빈 공간 어색함 해소 */
#screen-login.active { justify-content: center; padding-bottom: 40px; }
.hidden { display: none !important; }

/* ===== Gold-corner card ===== */
.rpg-card {
    background: var(--card);
    border: 2px solid var(--border2);
    position: relative;
}
.rpg-card::before, .rpg-card::after,
.rpg-card > .corner-bl, .rpg-card > .corner-br {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: var(--gold);
    z-index: 1;
}
.rpg-card::before { top: -1px; left: -1px; }
.rpg-card::after  { top: -1px; right: -1px; }
.rpg-card > .corner-bl { bottom: -1px; left: -1px; }
.rpg-card > .corner-br { bottom: -1px; right: -1px; }

/* ===== Login screen ===== */
.login-title {
    text-align: center;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 3px;
    padding: 16px 16px 4px;
}
.login-sub {
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 2px;
    padding: 0 16px 16px;
}
.login-desc {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.7;
    padding: 0 16px 16px;
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.login-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 10px; color: var(--gold-dark); letter-spacing: 1px; margin-bottom: 4px; }
.rpg-input {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    padding: 8px 10px;
    transition: border-color 0.2s;
}
.rpg-input:focus { outline: none; border-color: var(--gold); }
.rpg-input::placeholder { color: var(--text-faint); }
.login-note { font-size: 10px; color: var(--text-faint); text-align: center; font-family: 'Apple SD Gothic Neo', sans-serif; }
.error-msg {
    font-size: 11px; color: #e74c3c;
    border: 1px solid #e74c3c;
    background: rgba(231,76,60,0.08);
    padding: 8px 10px;
    text-align: center;
    font-family: 'Apple SD Gothic Neo', sans-serif;
}

/* ===== Save options ===== */
.save-options {
    display: flex;
    gap: 16px;
}
.save-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: 1px;
}
.save-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--gold);
    cursor: pointer;
}

/* ===== 🔒 개인정보 고지 (얼리액세스 blocker 대응) ===== */
.privacy-notice {
    border: 1px solid var(--border2); background: var(--card2);
    padding: 10px 12px; font-family: 'Apple SD Gothic Neo', sans-serif;
}
.privacy-notice summary {
    font-size: 11px; color: var(--gold-dim); cursor: pointer; letter-spacing: 0.5px;
}
.privacy-notice-body { margin-top: 8px; font-size: 10.5px; color: var(--text-muted); line-height: 1.7; }
.privacy-notice-body p { margin: 0 0 4px; }
.privacy-notice-body b { color: var(--gold); }
.privacy-consent-label { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ===== 🗝️ 복구 코드 모달 ===== */
.recovery-code-box {
    font-family: 'NeoDunggeunmo', monospace; font-size: 22px; letter-spacing: 3px;
    color: var(--gold); text-align: center; background: var(--card2);
    border: 1px solid var(--gold-dark); padding: 14px 10px; margin: 16px 0;
}

/* ===== 🔑 PIN 찾기 링크 ===== */
.pin-recover-link {
    display: block; width: 100%; margin-top: 4px; background: none; border: none;
    color: var(--text-faint); font-size: 10.5px; text-decoration: underline;
    cursor: pointer; font-family: 'Apple SD Gothic Neo', sans-serif; padding: 4px;
}
.pin-recover-link:hover { color: var(--gold-dim); }

/* ===== RPG Button ===== */
.rpg-btn {
    width: 100%;
    background: var(--card2);
    border: 2px solid var(--gold);
    color: var(--gold);
    font-family: var(--btn-font);
    font-size: var(--btn-primary-font);
    padding: var(--btn-primary-padding);
    cursor: pointer;
    letter-spacing: 2px;
    transition: background 0.15s;
}
.rpg-btn:hover  { background: #3a2010; }
.rpg-btn:active { filter: brightness(0.8); }
.rpg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rpg-btn.secondary {
    background: var(--bg3);
    border-color: var(--border);
    color: var(--text-muted);
    font-size: 11px;
    padding: 8px;
}

/* ===== Tutorial screen ===== */
.progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.honey-jar-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.honey-jar {
    width: 36px; height: 44px;
    background: var(--card2);
    border: 1px solid var(--border2);
    position: relative;
    overflow: hidden;
    clip-path: polygon(20% 0%, 80% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.honey-fill {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: var(--honey);
    transition: height 0.4s ease;
}
.honey-label { font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
.progress-info { flex: 1; }
.progress-tag { font-size: 9px; color: var(--gold-dark); letter-spacing: 2px; margin-bottom: 5px; }
.progress-track { background: var(--bg3); height: 6px; border: 1px solid var(--border); }
.progress-fill { height: 100%; background: var(--honey); transition: width 0.4s ease; }

.event-card { }
.event-scene {
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    overflow: hidden;
}
.event-body { padding: 12px 14px; }
.event-tag { font-size: 9px; color: var(--gold-dark); letter-spacing: 2px; margin-bottom: 6px; }
.event-text { font-size: 13px; line-height: 1.8; color: var(--text); }

.choice-hint { font-size: 9px; color: var(--text-muted); letter-spacing: 2px; text-align: center; margin-bottom: 6px; }
.choice-row { display: flex; gap: 5px; }
.choice-btn {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--border2);
    color: var(--text);
    font-family: 'NeoDunggeunmo', monospace;
    cursor: pointer;
    padding: 8px 4px;
    transition: all 0.15s;
    text-align: center;
}
.choice-row-grid2 { flex-wrap: wrap; }
.choice-row-grid2 .choice-btn { flex: 0 0 calc(50% - 3px); }
.choice-btn:hover  { background: var(--card2); border-color: var(--gold); color: var(--gold); }
.choice-btn.active { background: #3a2010; border-color: var(--gold); color: var(--gold); }
.choice-num  { font-size: 17px; display: block; }
.choice-word { font-size: 9px; color: var(--text-muted); display: block; margin-top: 1px; }
.choice-btn.active .choice-word { color: var(--gold-dark); }

.mbti-wrap { display: flex; flex-direction: column; gap: 8px; }
.mbti-note { font-size: 10px; color: var(--text-muted); text-align: center; font-family: 'Apple SD Gothic Neo', sans-serif; }

/* ===== Diary screen ===== */
.scroll-box {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 10px 12px;
}
.scroll-title {
    font-size: 10px;
    color: var(--gold-dark);
    letter-spacing: 2px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--text-faint);
}
.rpg-textarea {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    padding: 8px 10px;
    resize: none;
    height: 88px;
    transition: border-color 0.2s;
    line-height: 1.6;
}
.rpg-textarea:focus { outline: none; border-color: var(--gold); }
.rpg-textarea::placeholder { color: var(--text-faint); }

.loading-box {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: var(--honey);
    background: var(--bg3);
    border: 1px solid var(--border);
    font-family: 'Apple SD Gothic Neo', sans-serif;
}
.loading-track { height: 4px; background: var(--bg3); border: 1px solid var(--border); overflow: hidden; margin-top: 6px; }
.loading-slide { height: 100%; width: 30%; background: var(--honey); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }

.sage-box {
    background: var(--green-bg);
    border: 1px solid var(--green-brd);
    padding: 10px 12px;
}
.sage-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sage-icon { font-size: 14px; }
.sage-title { font-size: 9px; color: var(--green); letter-spacing: 2px; }
.sage-text { font-size: 12px; line-height: 1.8; color: var(--green-dim); font-family: 'Apple SD Gothic Neo', sans-serif; }

.history-box { background: var(--card); border: 1px solid var(--border); }
.history-title { font-size: 10px; color: var(--gold-dark); letter-spacing: 2px; padding: 8px 12px; border-bottom: 1px solid var(--text-faint); }
.entry-list { max-height: 280px; overflow-y: auto; }
.entry-item { border-bottom: 1px solid var(--text-faint); padding: 8px 12px; border-radius: 6px; }
.entry-item:last-child { border-bottom: none; }

@keyframes entryHighlightFlash {
    0%   { box-shadow: 0 0 0 rgba(0,0,0,0); background: transparent; }
    20%  { box-shadow: 0 0 14px var(--gold); background: rgba(192, 120, 32, 0.12); }
    100% { box-shadow: 0 0 0 rgba(0,0,0,0); background: transparent; }
}
.entry-highlight-flash { animation: entryHighlightFlash 1.6s ease-out; }
.entry-date { font-size: 9px; color: var(--border); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.entry-num { color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; font-size: 10px; }
.entry-date-text { color: var(--text-muted); }
.entry-content { font-size: 12px; color: var(--text-dim); font-family: 'Apple SD Gothic Neo', sans-serif; margin-bottom: 4px; line-height: 1.5; }
.entry-ai { font-size: 11px; color: var(--green); font-family: 'Apple SD Gothic Neo', sans-serif; font-style: italic; }
.entry-empty { padding: 16px 12px; font-size: 12px; color: var(--text-faint); text-align: center; font-family: 'Apple SD Gothic Neo', sans-serif; }

/* ===== Paywall overlay ===== */
.paywall-wrap { position: relative; }
.paywall-overlay {
    position: absolute; inset: 0;
    background: rgba(13,7,0,0.92);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 20px; text-align: center;
    z-index: 10;
}
.paywall-title { font-size: 14px; color: var(--gold); letter-spacing: 2px; }
.paywall-desc  { font-size: 12px; color: var(--text-dim); line-height: 1.7; font-family: 'Apple SD Gothic Neo', sans-serif; }

/* ===== Streak HUD ===== */
.hud-streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    line-height: 1.2;
}
.streak-fire { font-size: 16px; }
.streak-num  { font-size: 10px; color: var(--gold); font-weight: bold; }
.streak-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0; }

@keyframes streakPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.streak-pop { animation: streakPop 0.5s ease-out; }

/* ===== Streak milestone toast ===== */
.streak-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--card2);
    border: 2px solid var(--gold);
    color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 12px;
    padding: 10px 20px;
    letter-spacing: 2px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 999;
    pointer-events: none;
    white-space: nowrap;
}
.streak-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Entry actions ===== */
.entry-actions { display: flex; gap: 6px; margin-top: 6px; }
.entry-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
}
.entry-btn:hover { border-color: var(--gold); color: var(--gold); }
.entry-btn.delete:hover { border-color: #e74c3c; color: #e74c3c; }

.edit-area {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--gold);
    color: var(--text);
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 14px;
    padding: 6px 8px;
    resize: none;
    margin-top: 6px;
    box-sizing: border-box;
    line-height: 1.5;
}
.edit-save-btn {
    margin-top: 5px;
    background: var(--card2);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 10px;
    padding: 4px 12px;
    cursor: pointer;
    letter-spacing: 1px;
}
.edit-cancel-btn {
    margin-top: 5px;
    margin-left: 5px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 10px;
    padding: 4px 12px;
    cursor: pointer;
}

/* ===== Game footer ===== */
.game-footer {
    text-align: center;
    font-size: 9px;
    color: var(--text-faint);
    padding: 12px 0 8px;
    border-top: 1px solid var(--text-faint);
    letter-spacing: 1px;
}

/* ===== 탭 바 ===== */
/* 탭 바 래퍼 — 좌우 그라데이션 페이드로 '더 있음'을 암시 (스크롤 위치에 따라 동적 표시) */
.tab-bar-wrap {
    position: relative;
    margin: 0 -14px 12px;
}
.tab-bar-wrap::before,
.tab-bar-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 1px;   /* border-bottom 위로 겹치지 않게 */
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.tab-bar-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg2), transparent);
}
.tab-bar-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg2), transparent);
}
.tab-bar-wrap.fade-left::before  { opacity: 1; }
.tab-bar-wrap.fade-right::after  { opacity: 1; }
.tab-bar {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 10px;
    padding: 9px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== 일일 퀘스트 ===== */
.quest-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.quest-reset-info { font-size: 9px; color: var(--text-faint); margin-bottom: 14px; letter-spacing: 0.5px; }
.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest-item {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.3s;
}
.quest-item.done { border-color: var(--exp); opacity: 0.7; }
.quest-check {
    width: 22px; height: 22px;
    border: 2px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s;
}
.quest-item.done .quest-check { background: var(--exp); border-color: var(--exp); }
.quest-body { flex: 1; }
.quest-name { font-size: 12px; color: var(--text); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 2px; }
.quest-desc { font-size: 9px; color: var(--text-muted); }
.quest-item.done .quest-name { text-decoration: line-through; color: var(--text-muted); }
.quest-xp { font-size: 10px; color: var(--exp); font-family: 'NeoDunggeunmo', monospace; white-space: nowrap; }
.quest-bonus {
    margin-top: 20px;
    border: 1px solid var(--gold);
    padding: 20px;
    text-align: center;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.quest-bonus-icon { font-size: 32px; margin-bottom: 8px; }
.quest-bonus-text { font-size: 14px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 4px; }
.quest-bonus-sub  { font-size: 10px; color: var(--text-muted); }

/* ===== 캐릭터 (도트 + 장비) ===== */
.char-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.char-stage {
    background: linear-gradient(#0a1420, #050a12);
    border: 1px solid var(--border);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px 0 0; position: relative; overflow: hidden;
}
.char-svg { width: 200px; max-width: 70%; display: block; image-rendering: pixelated; animation: charIdle 2.6s ease-in-out infinite; }
@keyframes charIdle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
.char-exp-wrap { margin: 10px 0 16px; }
.char-exp-track { height: 10px; background: var(--bg3); border: 1px solid var(--border); overflow: hidden; }
.char-exp-fill { height: 100%; background: linear-gradient(90deg, var(--exp), #7fe0a0); transition: width 0.8s ease; }
.char-exp-label { font-size: 9px; color: var(--text-muted); margin-top: 4px; text-align: right; }

.inv-section { }
.inv-head { font-size: 11px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 10px; }
.inv-group { margin-bottom: 14px; }
.inv-group-title { font-size: 10px; color: var(--gold-dark); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 6px; }
.inv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.inv-item {
    background: var(--card); border: 1px solid var(--border); aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s;
}
.inv-item .inv-emoji { font-size: 22px; line-height: 1; }
.inv-item .inv-prev { width: 100%; height: 50px; display: block; image-rendering: pixelated; }

/* ✨ 파티클 이펙트 스프라이트 */
.fx-sprite {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 60;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: fxPlay steps(var(--fx-frames)) 1 forwards;
}
@keyframes fxPlay {
    from { background-position: 0 0; }
    to   { background-position: var(--fx-end) 0; }
}
.inv-item .inv-name { font-size: 8px; color: var(--text-muted); text-align: center; line-height: 1.1; padding: 0 2px; word-break: keep-all; }
.inv-item.equipped { border-color: var(--gold); background: var(--card2); }
.inv-item.equipped::after { content: '✓'; position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--gold); }
.inv-item.locked { opacity: 0.4; filter: grayscale(1); cursor: default; }
.inv-item.locked .inv-lock { position: absolute; font-size: 16px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.inv-item.locked .inv-name { color: var(--text-faint); }
/* 희귀도 */
.inv-item.rar-rare   { border-color: #4a90d0; }
.inv-item.rar-epic   { border-color: #9a55d0; box-shadow: 0 0 8px rgba(154,85,208,0.40); }
.inv-item.rar-legend { border-color: #d0a020; box-shadow: 0 0 8px rgba(208,160,32,0.45); }
.inv-item.rar-rare.locked, .inv-item.rar-epic.locked, .inv-item.rar-legend.locked { box-shadow: none; }
.inv-rar {
    position: absolute; top: 2px; left: 3px; font-size: 7px; padding: 0 3px;
    font-family: 'NeoDunggeunmo', monospace; border-radius: 2px;
}
.inv-item.rar-rare   .inv-rar { color: #acd2f0; background: rgba(74,144,208,0.2); }
.inv-item.rar-epic   .inv-rar { color: #d9b3f5; background: rgba(154,85,208,0.22); }
.inv-item.rar-legend .inv-rar { color: #ffe08a; background: rgba(208,160,32,0.22); }

/* ===== 비전 맵 ===== */
.vision-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.vision-gauge {
    font-size: 10px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace;
    border: 1px solid var(--border2); padding: 2px 8px; letter-spacing: 0.5px;
}
.vision-gauge.complete { background: var(--gold); color: var(--bg); }

/* 색상 강조 (구 골든서클) */
.hl-why  { color: var(--gold) !important; }
.hl-how  { color: var(--honey) !important; }
.hl-what { color: var(--gold-dim) !important; }
/* 색상 강조 (가치=청록, 소명=금, 뜻=주황) */
.hl-value   { color: #5fd0c0 !important; }
.hl-calling { color: var(--gold) !important; }
.hl-meaning { color: var(--honey) !important; }

/* 동사형 꿈 문장 히어로 */
.dream-hero {
    background: linear-gradient(var(--card2), var(--card));
    border: 2px solid var(--gold); margin-bottom: 14px;
    padding: 14px 16px; text-align: center; position: relative;
}
.dream-hero-label { font-size: 10px; color: var(--gold-dark); letter-spacing: 3px; font-family: 'NeoDunggeunmo', monospace; margin-bottom: 8px; }
.dream-revision-badge {
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 9px; letter-spacing: 1px; color: var(--text-muted);
    background: none; border: 1px solid var(--gold-dark); border-radius: 10px;
    padding: 2px 8px; margin-left: 6px; vertical-align: middle; cursor: pointer;
}
.dream-revision-badge:hover { color: var(--gold); border-color: var(--gold); }
.dream-history-list {
    margin: 6px 0 10px; display: flex; flex-direction: column; gap: 6px;
}
.dream-history-list.hidden { display: none; }
.dream-history-item {
    font-size: 10.5px; color: var(--text-muted); line-height: 1.5;
    background: var(--card2); border: 1px solid var(--border2);
    padding: 6px 10px;
}
.dream-history-num { color: var(--gold-dim); font-size: 9.5px; display: block; margin-bottom: 2px; }
.dream-history-empty { font-size: 10.5px; color: var(--text-muted); padding: 4px 2px; }
.dream-hero-text { font-size: 14px; color: var(--gold); line-height: 1.7; font-family: 'NeoDunggeunmo', monospace; word-break: keep-all; }
.dream-hero.empty .dream-hero-text { color: var(--text-muted); font-size: 12px; }
/* 온보딩 안내 */
.vision-help {
    background: var(--card); border: 1px solid var(--border);
    margin-bottom: 14px; font-size: 11px;
}
.vision-help-summary {
    cursor: pointer; padding: 9px 12px; color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace; letter-spacing: 0.5px; list-style: none;
}
.vision-help-summary::-webkit-details-marker { display: none; }
.vision-help-summary::before { content: '▸ '; color: var(--gold-dark); }
.vision-help[open] .vision-help-summary::before { content: '▾ '; }
.vision-help-body {
    padding: 0 12px 12px; color: var(--text-dim); line-height: 1.8; font-size: 11px;
}
.vision-tip { display: block; margin-top: 8px; color: var(--text-muted); font-size: 10px; }

.vision-circles-wrap { margin-bottom: 14px; text-align: center; }
.vision-svg { width: 100%; max-width: 280px; display: inline-block; }
.vision-ring { cursor: pointer; transition: opacity 0.2s; }
.vision-ring:hover { opacity: 0.85; }

/* AI 초안 CTA */
.vision-ai-cta {
    width: 100%; margin-bottom: 14px;
    background: linear-gradient(var(--card2), var(--card));
    border: 1px dashed var(--gold-dark); color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; font-size: 12px;
    padding: 11px; cursor: pointer; letter-spacing: 0.5px;
    transition: border-color 0.2s, background 0.2s;
}
.vision-ai-cta:hover { border-color: var(--gold); border-style: solid; }
.vision-ai-cta:disabled { opacity: 0.6; cursor: default; }

.vision-form { display: flex; flex-direction: column; gap: 10px; }
.vision-field { display: flex; flex-direction: column; gap: 4px; }
.vision-label { font-size: 11px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; letter-spacing: 0.5px; }
.vision-input {
    background: var(--input-bg); border: var(--input-border);
    color: var(--text); font-family: var(--input-font-family);
    font-size: var(--input-font-size); padding: var(--input-padding); resize: vertical; line-height: 1.6;
}
.vision-input:focus { outline: none; border-color: var(--gold-dark); }
.vision-input::placeholder { color: var(--text-muted); font-size: 11px; }

.value-verdict-toggle { display: flex; gap: 6px; margin-bottom: 2px; }
.value-verdict-btn {
    flex: 1; background: var(--bg3); border: 1px solid var(--border);
    color: var(--text-muted); font-family: var(--btn-font);
    font-size: var(--btn-secondary-font); padding: var(--btn-secondary-padding); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.value-verdict-btn:hover { border-color: var(--gold-dark); }
.value-verdict-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(240,192,96,0.08); }
#btn-verdict-unsure.active { border-color: var(--text-muted); color: var(--text); background: rgba(255,255,255,0.05); }

/* 예시 보기 */
.vision-example { font-size: 11px; }
.vision-example summary {
    cursor: pointer; color: var(--text-muted); font-family: 'NeoDunggeunmo', monospace;
    font-size: 10px; padding: 4px 0; list-style: none;
}
.vision-example summary::-webkit-details-marker { display: none; }
.vision-example summary::before { content: '▸ '; }
.vision-example[open] summary::before { content: '▾ '; }
.vision-example-body {
    background: var(--bg3); border: 1px solid var(--border);
    padding: 10px 12px; line-height: 1.7; color: var(--text-dim);
}
.vision-example-body p { margin: 3px 0; }
.vision-example-body b { margin-right: 6px; font-family: 'NeoDunggeunmo', monospace; font-size: 10px; }

.vision-btns { display: flex; gap: 8px; }
.vision-ai-result {
    background: var(--card2); border: 1px solid var(--border2);
    padding: 12px 14px; font-size: 12px; color: var(--text); line-height: 1.7;
}
.vision-ai-result.hidden { display: none; }
.vision-ai-apply {
    margin-top: 10px; width: 100%;
    background: var(--gold-dark); border: none; color: var(--bg);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px;
    padding: 7px; cursor: pointer; letter-spacing: 1px;
}
.vision-ai-apply:hover { background: var(--gold); }
.vision-feedback {
    background: var(--green-bg); border: 1px solid var(--green-brd);
    color: var(--green-dim); padding: 10px 12px; font-size: 11px;
    text-align: center; font-family: 'NeoDunggeunmo', monospace; letter-spacing: 0.5px;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.vision-feedback.hidden { display: none; }

/* ===== 분석 리포트 + 열쇠 ===== */
.key-panel {
    background: var(--card2); border: 1px solid var(--border2);
    padding: 12px 14px; margin-bottom: 12px;
}
.key-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.key-icons { font-size: 20px; letter-spacing: 2px; line-height: 1; }
.key-icons .used { opacity: 0.25; filter: grayscale(1); }
.key-count { font-size: 12px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.key-note  { font-size: 10px; color: var(--text-muted); line-height: 1.5; }
.key-note .premium { color: var(--gold-dim); }

.report-result-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.report-result-wrap.hidden { display: none; }
.report-section {
    background: var(--card2); border: 1px solid var(--border2); padding: 14px 16px;
}
.report-section-title {
    font-size: 11px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace;
    letter-spacing: 0.5px; margin-bottom: 8px;
}
.report-text { font-size: 13px; color: var(--text); line-height: 1.8; white-space: pre-wrap; }
.report-talent { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--gold-dark); border-radius: 8px; font-size: 12px; color: var(--gold); line-height: 1.7; }
.report-vision { display: flex; flex-direction: column; gap: 8px; }
.report-vision .rv-item { display: flex; flex-direction: column; gap: 2px; }
.report-vision .rv-label { font-size: 10px; font-family: 'NeoDunggeunmo', monospace; }
.report-vision .rv-text  { font-size: 12px; color: var(--text); line-height: 1.6; }
.report-vision-note {
    margin-top: 10px; font-size: 10px; color: var(--green-dim);
    background: var(--green-bg); border: 1px solid var(--green-brd);
    padding: 6px 10px; line-height: 1.5;
}
.report-elimination { display: flex; flex-direction: column; gap: 6px; }
.report-elimination-row { font-size: 12px; color: var(--text); line-height: 1.6; }
.report-elimination-row b { color: var(--gold); }
.report-elimination-note { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* ===== 🗣️ 현자와의 대화 ===== */
.chat-header {
    display: flex; align-items: center; gap: 10px;
    background: var(--card2); border: 1px solid var(--border2);
    padding: 10px 12px; margin-bottom: 10px;
}
.chat-avatar {
    width: 70px; height: 70px; flex-shrink: 0; overflow: hidden;
    background: var(--bg3); border: 2px solid var(--gold-dark); border-radius: 10px;
}
.chat-avatar img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    image-rendering: pixelated; display: block; transition: opacity 0.12s;
}
.chat-id { flex: 1; }
.chat-name { font-size: 13px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.chat-role { font-size: 9px; color: var(--text-muted); margin-top: 2px; }
.chat-status { font-size: 9px; color: var(--gold-dim); text-align: right; white-space: nowrap; font-family: 'NeoDunggeunmo', monospace; }

.chat-window {
    background: var(--bg3); border: 1px solid var(--border);
    height: 340px; overflow-y: auto;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
    position: relative;
}
.chat-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-suggest-chip {
    background: var(--bg3); border: 1px solid var(--border2); color: var(--text-dim);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px;
    padding: 6px 10px; border-radius: 14px; cursor: pointer; transition: all 0.15s;
}
.chat-suggest-chip:hover { border-color: var(--gold); color: var(--gold); }
.chat-msg { display: flex; gap: 8px; max-width: 88%; }
.chat-msg.sage { align-self: flex-start; }
.chat-msg.me   { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble {
    font-size: 12.5px; line-height: 1.6; padding: 9px 12px;
    border: 1px solid var(--border); word-break: break-word; white-space: pre-wrap;
}
.chat-msg.sage .chat-bubble { background: var(--card); color: var(--text); border-color: var(--border2); }
.chat-msg.me   .chat-bubble { background: var(--card2); color: var(--gold-dim); }
.chat-mini-avatar {
    width: 56px; height: 56px; flex-shrink: 0; align-self: flex-end;
    object-fit: cover; object-position: top center; border-radius: 10px;
    border: 1px solid var(--gold-dark); image-rendering: pixelated;
    transition: opacity 0.12s;
}
.chat-typing { font-size: 11px; color: var(--text-muted); font-style: italic; }

.tea-serve-row { display: flex; justify-content: center; margin-top: 8px; }
.tea-serve-row .rpg-btn { width: auto; }
.sage-library-note {
    text-align: center; font-size: 10.5px; color: var(--gold-dim);
    margin-top: 6px; line-height: 1.5;
}
.sage-library-note.hidden { display: none; }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-input {
    flex: 1; background: var(--input-bg); border: var(--input-border);
    color: var(--text); font-family: var(--input-font-family);
    font-size: var(--input-font-size); padding: var(--input-padding); resize: none; line-height: 1.5; max-height: 100px;
}
.chat-input:focus { outline: none; border-color: var(--gold-dark); }
.chat-send {
    flex-shrink: 0; width: 46px; height: 40px;
    background: var(--card2); border: 1px solid var(--border2); color: var(--gold);
    font-size: 15px; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.chat-send:hover:not(:disabled) { background: var(--bg2); border-color: var(--gold); }
.chat-send:disabled { opacity: 0.4; cursor: default; }

.chat-lock {
    margin-top: 12px; background: var(--card); border: 1px solid var(--gold-dark);
    padding: 20px; text-align: center;
}
.chat-lock.hidden { display: none; }
.chat-lock-icon { font-size: 30px; margin-bottom: 8px; }
.chat-lock-title { font-size: 13px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 6px; }
.chat-lock-desc { font-size: 11px; color: var(--text-dim); line-height: 1.6; margin-bottom: 14px; }

/* ===== 🎁 선물 체험권 모달 ===== */
.pass-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.7); padding: 20px;
    animation: fadeInBg 0.3s ease;
}
.pass-modal.hidden { display: none; }
.pass-inner {
    background: var(--card); border: 3px solid var(--gold);
    padding: 26px 24px 20px; text-align: center; max-width: 320px; width: 100%;
    position: relative; animation: popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.pass-ribbon {
    position: absolute; top: -1px; left: -1px; right: -1px;
    background: var(--gold); color: var(--bg); font-size: 9px; letter-spacing: 3px;
    padding: 4px; font-family: 'NeoDunggeunmo', monospace;
}
.pass-gift { font-size: 52px; margin: 22px 0 10px; animation: giftBob 1.4s ease-in-out infinite; }
@keyframes giftBob { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-6px) rotate(3deg);} }
.pass-title { font-size: 17px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 8px; }
.pass-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 14px; }
.pass-perks { list-style: none; text-align: left; margin: 0 auto 18px; max-width: 230px; display: flex; flex-direction: column; gap: 7px; }
.pass-perks li { font-size: 12px; color: var(--text); padding-left: 2px; }
.pass-close {
    display: block; width: 100%; margin-top: 10px;
    background: none; border: none; color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px; cursor: pointer; padding: 6px;
}
.pass-close:hover { color: var(--text-dim); }

/* HUD 상태가 체험권 보유 시 클릭 가능함을 표시 — 은은한 펄스로 '눌러볼 만한 것'임을 알린다.
   개봉 모달을 한 번 닫고 나면 클릭 유도가 장식처럼 묻혀 발견이 안 되던 것을 보완(리뷰 I6). */
.hud-status.has-gift {
    color: var(--gold); cursor: pointer;
    animation: gift-pulse 2.2s ease-in-out infinite;
}
@keyframes gift-pulse {
    0%, 100% { opacity: 1;    text-shadow: 0 0 0 rgba(240,192,96,0); }
    50%      { opacity: 0.72; text-shadow: 0 0 6px rgba(240,192,96,0.65); }
}
@media (prefers-reduced-motion: reduce) {
    .hud-status.has-gift { animation: none; }
}

/* 🧭 진로 추천 */
.career-box { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.career-head { font-size: 13px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 4px; }
.career-sub { font-size: 10px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.career-result {
    margin-top: 12px; background: var(--card2); border: 1px solid var(--border2);
    padding: 14px 16px; font-size: 12.5px; color: var(--text); line-height: 1.8; white-space: pre-wrap;
}
.career-result.hidden { display: none; }
.career-free-upsell {
    margin-top: 10px; font-size: 10.5px; color: var(--gold-dim); line-height: 1.6;
    border-left: 2px solid var(--gold-dark); padding-left: 10px;
}
.career-free-upsell.hidden { display: none; }

/* 🧪 심화 진단 */
.diag-cards { display: flex; flex-direction: column; gap: 10px; }
.diag-card {
    background: var(--card); border: 1px solid var(--border); padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
}
.diag-card.done { border-color: var(--gold-dark); }
/* ✨ 진단 완료 리빌 — 결과가 막 드러나는 순간을 짧게 강조(리뷰 I1: 완주 동기 강화) */
.diag-card.diag-reveal {
    animation: diag-reveal-flash 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes diag-reveal-flash {
    0%   { transform: scale(0.96); box-shadow: 0 0 0 rgba(240,192,96,0); border-color: var(--border); }
    35%  { transform: scale(1.02); box-shadow: 0 0 18px rgba(240,192,96,0.55); border-color: var(--gold); }
    100% { transform: scale(1);    box-shadow: 0 0 0 rgba(240,192,96,0); border-color: var(--gold-dark); }
}
@media (prefers-reduced-motion: reduce) {
    .diag-card.diag-reveal { animation: none; }
}
.diag-icon { font-size: 24px; flex-shrink: 0; }
.diag-body { flex: 1; }
.diag-name { font-size: 13px; color: var(--text); font-family: 'NeoDunggeunmo', monospace; }
.diag-desc { font-size: 9px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.diag-res  { font-size: 11px; color: var(--gold); margin-top: 3px; font-family: 'NeoDunggeunmo', monospace; }
.diag-go {
    background: var(--card2); border: 1px solid var(--border2); color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace; font-size: 10px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.diag-go:hover { border-color: var(--gold); color: var(--gold); }

.diag-quiz { margin-top: 14px; background: var(--card2); border: 1px solid var(--border2); padding: 14px 16px; }
.diag-quiz.hidden { display: none; }
.diag-quiz-title { font-size: 13px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 4px; }
.diag-quiz-sub { font-size: 10px; color: var(--text-muted); margin-bottom: 12px; }
.diag-q { margin-bottom: 12px; }
.diag-q-text { font-size: 12.5px; color: var(--text); margin-bottom: 6px; line-height: 1.5; }
.diag-likert { display: flex; gap: 4px; }
.diag-likert button {
    flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text-muted);
    font-size: 11px; padding: 6px 2px; cursor: pointer; font-family: 'NeoDunggeunmo', monospace;
}
.diag-likert button.sel { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.diag-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.diag-pick button {
    background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim);
    font-size: 11px; padding: 6px 10px; cursor: pointer;
}
.diag-pick button.sel { background: var(--card); border-color: var(--gold); color: var(--gold); }
.diag-pick button.custom { border-style: dashed; }
.diag-pick-custom { display: flex; gap: 6px; align-items: stretch; margin-top: 10px; }
.diag-pick-custom #diag-custom-input {
    flex: 1; width: auto; font-size: 13px; letter-spacing: 0; text-align: left;
    text-transform: none; padding: 8px 10px; margin-bottom: 0;
}
.diag-pick-custom button { white-space: nowrap; flex: 0 0 auto; width: auto; font-size: 12px; padding: 0 16px; }
.diag-text-input {
    width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; font-size: 22px; letter-spacing: 6px;
    text-align: center; text-transform: uppercase; padding: 12px 10px; margin-bottom: 8px;
}
.diag-text-input:focus { outline: none; border-color: var(--gold); }

/* 🧭 온보딩 게이트 (진단 5종 의무) */
.onboard-gate {
    background: linear-gradient(135deg, rgba(202,160,36,0.12), rgba(40,28,16,0.6));
    border: 1px solid var(--gold-dark); border-left: 3px solid var(--gold);
    padding: 14px 16px; margin-bottom: 16px;
}
.onboard-gate-title { font-family: 'NeoDunggeunmo', monospace; color: var(--gold); font-size: 14px; margin-bottom: 6px; }
.onboard-gate-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.onboard-gate-desc b { color: var(--gold-dim); }
.onboard-gate-prog { font-family: 'NeoDunggeunmo', monospace; color: var(--exp); font-size: 13px; margin: 10px 0 8px; }
.onboard-gate .rpg-btn { width: 100%; }
/* 진단 미완료 시 자기여행·모험질문 잠금 */
#tab-diary.diag-gated .adventure-card,
#tab-diary.diag-gated .jn-section {
    opacity: 0.4; pointer-events: none; filter: grayscale(0.5); user-select: none;
}
/* 진단 탭 상단 남은 진단 안내 */
.diag-gate-banner {
    background: rgba(202,160,36,0.10); border: 1px dashed var(--gold-dark);
    padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.diag-gate-banner b { color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.diag-gate-note { color: var(--text-muted); font-size: 11px; margin-top: 4px; }

.diag-mbti-pair { display: flex; gap: 6px; margin-bottom: 8px; }
.diag-mbti-pair button {
    flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim);
    font-size: 11px; padding: 8px 4px; cursor: pointer; line-height: 1.4;
}
.diag-mbti-pair button.sel { background: var(--card); border-color: var(--gold); color: var(--gold); }
.diag-quiz-actions { display: flex; gap: 8px; margin-top: 8px; }

/* 🧳 자기여행 */
.jn-section { margin: 4px 0 14px; }
.jn-head-row { display: flex; justify-content: space-between; align-items: baseline; }
.jn-sub-text { font-size: 10px; color: var(--text-muted); margin: 2px 0 10px; line-height: 1.5; }
.jn-add { background: var(--card2); border: 1px solid var(--border2); padding: 12px; margin-bottom: 14px; }
.jn-kind-row, .jn-sub-row { display: flex; gap: 6px; margin-bottom: 8px; }
.jn-kind, .jn-sub {
    flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px; padding: 7px 4px; cursor: pointer;
}
.jn-sub { font-size: 10px; }
.jn-kind.active, .jn-sub.active { border-color: var(--gold); color: var(--gold); background: var(--card); }
.jn-sub-row.hidden { display: none; }
.jn-input-row { display: flex; gap: 6px; }
.jn-input {
    flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
    font-family: 'Noto Sans KR', sans-serif; font-size: 13px; padding: 8px 10px;
}
.jn-input:focus { outline: none; border-color: var(--gold-dark); }
.jn-add-btn {
    width: 42px; background: var(--card); border: 1px solid var(--border2); color: var(--gold);
    font-size: 18px; cursor: pointer;
}
.jn-add-btn:hover { border-color: var(--gold); }
/* 좋아함/싫어함/경험은 각각 독립된 프레임(.jn-box)으로 분리 */
.jn-box { margin-bottom: 12px; }
.jn-box:last-child { margin-bottom: 0; }
.jn-cols { display: flex; flex-direction: column; padding: 12px; max-height: 220px; overflow-y: auto; }
.jn-col-count { font-size: 10px; color: var(--text-muted); }
/* 짧은 한 줄 기록이 많아 '모험 질문 기록'(.entry-item)보다 위아래로 컴팩트하게 —
   본문 줄 하나 + (날짜·배지 / 수정·삭제)를 한 줄에 나란히 담는 메타 줄, 총 2줄 */
.jn-list { display: flex; flex-direction: column; }
.jn-item { border-bottom: 1px solid var(--text-faint); padding: 6px 10px; border-radius: 6px; }
.jn-item:last-child { border-bottom: none; }
.jn-text { font-size: 12px; color: var(--text-dim); font-family: 'Apple SD Gothic Neo', sans-serif; line-height: 1.4; word-break: break-word; }
.jn-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.jn-date { font-size: 8.5px; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-date-text { color: var(--text-muted); }
.jn-badge { color: var(--gold-dim); flex-shrink: 0; }
.jn-actions { display: flex; gap: 4px; flex-shrink: 0; }
.jn-del {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace; font-size: 9px; padding: 2px 6px;
    cursor: pointer; letter-spacing: 0.5px; transition: all 0.15s;
}
.jn-del:hover { border-color: #e74c3c; color: #e74c3c; }
.jn-edit {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    font-family: 'NeoDunggeunmo', monospace; font-size: 9px; padding: 2px 6px;
    cursor: pointer; letter-spacing: 0.5px; transition: all 0.15s;
}
.jn-edit:hover { border-color: var(--gold); color: var(--gold); }
.jn-empty { padding: 16px 12px; font-size: 12px; color: var(--text-faint); text-align: center; font-family: 'Apple SD Gothic Neo', sans-serif; }

/* 🖼️ 비전 선언문 카드 */
.vcard {
    position: relative; max-width: 320px; width: 100%;
    background: radial-gradient(circle at 50% 25%, var(--card2), var(--bg));
    border: 2px solid var(--gold); padding: 30px 24px 18px; text-align: center;
    animation: popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.vcard-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--gold); }
.vcard-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.vcard-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.vcard-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.vcard-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.vcard-label { font-size: 10px; letter-spacing: 3px; color: var(--gold-dark); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 16px; }
.vcard-dream {
    font-size: 20px; color: var(--gold); line-height: 1.8; font-family: 'NeoDunggeunmo', monospace;
    word-break: keep-all; margin: 8px 0 22px;
    text-shadow: 0 0 12px rgba(240,192,96,0.4);
}
.vcard-seal {
    font-size: 28px; margin-bottom: 14px;
    filter: drop-shadow(0 0 8px rgba(240,192,96,0.5));
}
.vcard-seal.hidden { display: none; }
.vcard-foot { font-size: 9px; color: var(--text-muted); letter-spacing: 1px; border-top: 1px solid var(--border); padding-top: 10px; }
.vcard-vow { font-size: 10px; color: var(--gold-dim); margin-top: 6px; font-family: 'NeoDunggeunmo', monospace; }
.vcard-vow.hidden { display: none; }
.vcard-hint { font-size: 9px; color: var(--text-faint); margin-top: 8px; }
.vcard-share-row { margin-top: 12px; }
.vcard-share-row .rpg-btn { width: 100%; }
/* 공유 실패 진단용 — 실제 canShare/share 실패 원인을 화면에 노출(개발 확인용, 필요시 제거) */
.vcard-share-debug {
    margin-top: 8px; padding: 8px 10px; background: rgba(200,60,40,0.12);
    border: 1px solid rgba(200,60,40,0.4); color: #e08070;
    font-size: 10px; font-family: monospace; line-height: 1.5; text-align: left;
    white-space: pre-wrap; word-break: break-all;
}
.vcard-share-debug.hidden { display: none; }

/* 🪖 전역 D-Day 배너 */
.dday-banner { margin-bottom: 10px; }
.dday-card {
    background: linear-gradient(var(--card2), var(--card));
    border: 1px solid var(--border2); padding: 11px 13px; cursor: default;
}
.dday-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.dday-title { font-size: 10px; color: var(--gold-dark); font-family: 'NeoDunggeunmo', monospace; letter-spacing: 0.5px; }
.dday-num { font-size: 15px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.dday-track { height: 8px; background: var(--bg3); border: 1px solid var(--border); overflow: hidden; }
.dday-fill { height: 100%; background: linear-gradient(90deg, var(--honey), var(--gold)); transition: width 0.8s ease; }
.dday-sub { font-size: 9px; color: var(--text-muted); margin-top: 5px; display: flex; justify-content: space-between; }
.dday-buffer { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.dday-buffer-title { font-size: 9px; color: var(--gold-dark); margin-bottom: 4px; }
.dday-buffer-list { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-muted); }
.dday-cta {
    width: 100%; background: var(--card); border: 1px dashed var(--gold-dark); color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px; padding: 10px; cursor: pointer;
}
.dday-cta:hover { border-style: solid; color: var(--gold); }

/* 전역일 등록 모달 필드 */
.svc-field { text-align: left; margin-bottom: 10px; }
.svc-label { display: block; font-size: 10px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; margin-bottom: 4px; }
.svc-input {
    width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
    font-size: 13px; padding: 8px 10px; font-family: 'Noto Sans KR', sans-serif;
}
.svc-input:focus { outline: none; border-color: var(--gold-dark); }

/* 미니 토스트 */
.mini-toast {
    /* 온보딩처럼 콘텐츠가 짧은 화면에서는 하단 game-footer 문구와 맞붙어 보이던 것을
       여유 있게 띄움(44px) — 다른 화면에서도 자연스럽게 여백만 조금 더 생긴다. */
    position: fixed; left: 50%; bottom: 44px;
    transform: translateX(-50%) translateY(20px);
    background: var(--card2); border: 1px solid var(--gold-dark); color: var(--text);
    font-size: 12px; font-family: 'NeoDunggeunmo', monospace; padding: 9px 16px;
    z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
    max-width: 90%; text-align: center;
}
.mini-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 오늘의 모험 카드 ===== */
.adventure-card {
    background: var(--card2);
    border: 1px solid var(--border2);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.adv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.adv-tag {
    flex: 1;
    font-size: 9px;
    color: var(--gold-dark);
    letter-spacing: 1px;
    font-family: 'NeoDunggeunmo', monospace;
}
.adv-choice-btn {
    background: none;
    border: 1px solid var(--gold-dark);
    color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 9.5px;
    padding: 5px 8px;
    margin-right: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.adv-choice-btn:hover { border-color: var(--gold); color: var(--gold); }
.adv-choice-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.adv-choice-opt {
    text-align: left;
    background: var(--card2);
    border: 1px solid var(--border2);
    color: var(--text);
    font-size: 11.5px;
    line-height: 1.5;
    padding: 8px 10px;
    cursor: pointer;
}
.adv-choice-opt:hover { border-color: var(--gold); }
.adv-reroll {
    background: none;
    border: 1px solid var(--border);
    color: var(--gold-dim);
    font-size: 14px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, transform 0.2s;
}
.adv-reroll:hover { border-color: var(--gold); transform: rotate(20deg); }
.adv-reroll.spin   { animation: diceRoll 0.4s ease; }
@keyframes diceRoll {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}
.adv-question {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    font-family: 'NeoDunggeunmo', monospace;
    margin-bottom: 10px;
}
.adv-answer {
    width: 100%;
    background: var(--input-bg);
    border: var(--input-border);
    color: var(--text);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    padding: var(--input-padding);
    resize: vertical;
    line-height: 1.6;
    margin-bottom: 8px;
    display: block;
}
.adv-answer:focus { outline: none; border-color: var(--gold-dark); }
.adv-answer::placeholder { color: var(--text-muted); }
.adv-submit-btn {
    width: 100%;
    background: var(--card2);
    border: 1px solid var(--border2);
    color: var(--gold-dim);
    font-family: var(--btn-font);
    font-size: var(--btn-primary-font);
    padding: var(--btn-primary-padding);
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s, border-color 0.2s;
}
.adv-submit-btn:hover { background: var(--bg2); border-color: var(--gold); color: var(--gold); }

.closing-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 10px; padding: 10px 12px;
    background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px;
    font-size: 11px; color: var(--text-muted); line-height: 1.6;
}
.closing-dismiss { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; flex-shrink: 0; }

/* ===== 배지 도감 ===== */
.badge-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.badge-title { font-size: 13px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; letter-spacing: 1px; }
.badge-sub   { font-size: 10px; color: var(--text-muted); }
.badge-grid  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.badge-cell {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 12px 8px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s;
}
.badge-cell.unlocked { border-color: var(--gold-dark); }
.badge-cell.unlocked:hover { border-color: var(--gold); }
.badge-cell.locked { opacity: 0.45; filter: grayscale(0.6); }
.badge-icon  { font-size: 26px; display: block; margin-bottom: 5px; line-height: 1; }
.badge-name  { font-size: 9px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; line-height: 1.3; word-break: keep-all; }
.badge-desc  { font-size: 8px; color: var(--text-muted); margin-top: 3px; line-height: 1.3; word-break: keep-all; }
.badge-new {
    position: absolute; top: -5px; right: -5px;
    background: var(--hp); color: white;
    font-size: 7px; padding: 1px 4px;
    font-family: 'NeoDunggeunmo', monospace;
}

/* ===== 별자리 ===== */
.star-header { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.star-canvas-wrap {
    background: #030508;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    overflow: hidden;
}
.star-svg { width: 100%; display: block; }
.star-circle { transition: r 0.3s; cursor: default; }
.star-label  { font-family: monospace; fill: var(--text-dim); pointer-events: none; }
.star-line   { stroke: #8fa8d8; stroke-width: 1.1; opacity: 0.85; }
.star-empty  {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-family: 'NeoDunggeunmo', monospace;
}
.star-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.star-tag {
    font-size: 9px;
    color: var(--text-muted);
    background: var(--card);
    border: 1px solid var(--border);
    padding: 3px 8px;
    font-family: monospace;
}
.star-tag span { color: var(--gold-dim); margin-left: 4px; }

/* ===== 🎯 비전 행동 — 이번 주 한 걸음 (비전→행동 다리) ===== */
.action-box {
    margin-top: 18px;
    border: 1px solid var(--gold-dark);
    background: rgba(240, 192, 96, 0.05);
    padding: 14px 16px;
}
.action-head {
    font-size: 13px; color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; margin-bottom: 4px;
}
.action-sub { font-size: 10.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.action-input-row { display: flex; gap: 8px; align-items: stretch; }
.action-input {
    flex: 1 1 auto; min-width: 0; background: var(--card2); border: 1px solid var(--border2);
    color: var(--text); padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.action-input:focus { outline: none; border-color: var(--gold); }
.action-input-row .rpg-btn { white-space: nowrap; width: auto; flex: 0 0 auto; padding: 0 12px; font-size: 12px; }
.action-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.action-empty { font-size: 11px; color: var(--text-muted); padding: 6px 2px; line-height: 1.6; }
.action-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border); padding: 9px 12px;
}
.action-item.done { border-color: var(--exp); opacity: 0.75; }
.action-text { flex: 1; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.action-item.done .action-text { color: var(--exp); }
.action-item-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.action-done-btn {
    background: none; border: 1px solid var(--gold); color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px; padding: 5px 10px; cursor: pointer;
}
.action-done-btn:hover { background: var(--gold); color: #1a1206; }
.action-done-badge { font-size: 11px; color: var(--exp); font-family: 'NeoDunggeunmo', monospace; }
.action-del-btn {
    background: none; border: none; color: var(--gold-dark);
    font-size: 13px; cursor: pointer; padding: 4px;
}
.action-del-btn:hover { color: #e07050; }

/* 🎯 비전 퀘스트 (퀘스트 탭) */
.vquest-list { display: flex; flex-direction: column; gap: 8px; }
.vquest-empty {
    font-size: 11px; color: var(--text-muted); line-height: 1.6;
    border: 1px dashed var(--border2); padding: 12px 14px;
}
.vquest-goto-btn {
    width: 100%; margin-top: 8px; padding: 9px;
    background: var(--card2); border: 1px solid var(--gold-dark); color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px; cursor: pointer;
}
.vquest-goto-btn:hover { background: var(--bg2); border-color: var(--gold); color: var(--gold); }
.vquest-item { gap: 12px; }
.vquest-check {
    width: 24px; height: 24px; flex-shrink: 0;
    border: 2px solid var(--gold-dark); background: none;
    color: var(--exp); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vquest-check:hover { border-color: var(--gold); }
.vquest-check.done { border-color: var(--exp); background: rgba(46,204,113,0.15); cursor: default; }

/* ===== 🍯 HUD 꿀 칩 ===== */
.hud-honey {
    display: flex; align-items: center; gap: 3px;
    font-family: 'NeoDunggeunmo', monospace;
}
.hud-honey .honey-icon { font-size: 12px; }
.hud-honey .honey-num  { font-size: 12px; color: var(--gold); }

/* 🍯 기본 획득 즉시 피드백 — HUD 꿀 아이콘 위로 살짝 떠오르는 "+N" */
.honey-gain-pop {
    position: fixed; transform: translateX(-50%);
    color: var(--gold); font-family: 'NeoDunggeunmo', monospace; font-size: 13px;
    font-weight: bold; pointer-events: none; z-index: 1200;
    text-shadow: 0 0 6px rgba(240,192,96,0.7);
    animation: honey-gain-float 1.1s ease-out forwards;
}
@keyframes honey-gain-float {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
    15%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .honey-gain-pop { animation: none; opacity: 0; }
}

/* ===== 🏪 보급소(상점) ===== */
.shop-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.shop-balance {
    font-family: 'NeoDunggeunmo', monospace; font-size: 15px; color: var(--gold);
    border: 1px solid var(--gold-dark); background: rgba(240,192,96,0.08);
    padding: 6px 12px; white-space: nowrap; flex-shrink: 0;
}
.shop-how {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; font-family: inherit;
    font-size: 10.5px; color: var(--text-muted); line-height: 1.6;
    margin: 10px 0 14px; border-left: 2px solid var(--gold-dark); padding-left: 10px;
}
.shop-how:hover { color: var(--text-dim); }
.shop-how-more { display: block; color: var(--gold-dim); font-size: 9.5px; margin-top: 2px; }

/* 🍯 꿀 획득 안내서 모달 */
.honey-guide-inner { max-width: 340px; text-align: left; }
.honey-guide-list { list-style: none; margin: 22px 0 14px; display: flex; flex-direction: column; gap: 9px; }
.honey-guide-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.honey-guide-list .hg-icon { flex-shrink: 0; width: 20px; text-align: center; }
.honey-guide-list .hg-label { flex: 1; }
.honey-guide-list .hg-amt { flex-shrink: 0; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; font-size: 11px; }
.honey-guide-tip {
    font-size: 11px; color: var(--gold-dim); line-height: 1.6; text-align: center;
    background: var(--card2); border: 1px solid var(--border2); padding: 10px 12px; margin-bottom: 8px;
}
.shop-items { display: flex; flex-direction: column; gap: 10px; }
.shop-category-heading {
    font-size: 11px; color: var(--gold-dark); letter-spacing: 1px;
    font-family: 'NeoDunggeunmo', monospace;
    margin: 14px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--border2);
}
.shop-category-heading:first-child { margin-top: 0; }
.shop-loading { font-size: 12px; color: var(--text-muted); padding: 12px 2px; }
.shop-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: 1px solid var(--border); padding: 12px 14px;
}
/* ⭐ 전설 티어 — 100일 엔드컨텐츠 아이템(honey-economy-guide.md)이 일반 아이템과
   같은 카테고리 목록에 섞여 위상이 안 드러나던 것을 보완 */
.shop-legend-divider {
    margin: 14px 0 8px; text-align: center; position: relative;
}
.shop-legend-divider span {
    font-size: 10.5px; color: var(--gold); letter-spacing: 1px;
    font-family: 'NeoDunggeunmo', monospace; background: var(--bg);
    padding: 0 10px; position: relative; z-index: 1;
}
.shop-legend-divider::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    border-top: 1px dashed var(--gold-dark); z-index: 0;
}
.shop-item.tier-legend {
    border-color: var(--gold-dark);
    box-shadow: 0 0 10px rgba(240,192,96,0.18), inset 0 0 12px rgba(240,192,96,0.06);
}
.shop-item.tier-legend .shop-item-name { color: var(--gold); }
.shop-item-icon { font-size: 26px; flex-shrink: 0; width: 34px; text-align: center; }
.shop-item-body { flex: 1; min-width: 0; }
.shop-item-name { font-size: 13px; color: var(--text); font-family: 'NeoDunggeunmo', monospace; }
.shop-own-count { font-size: 10px; color: var(--exp); margin-left: 4px; }
.shop-item-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
.shop-use-btn {
    margin-top: 8px; background: none; border: 1px solid var(--exp); color: var(--exp);
    font-family: 'NeoDunggeunmo', monospace; font-size: 11px; padding: 5px 10px; cursor: pointer;
}
.shop-use-btn:hover { background: rgba(46,204,113,0.15); }
.shop-item-right { flex-shrink: 0; }
.shop-buy-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 1px solid var(--gold); color: var(--gold);
    font-family: var(--btn-font); font-size: var(--btn-secondary-font); padding: var(--btn-secondary-padding);
    cursor: pointer; white-space: nowrap;
}
.shop-buy-price { font-size: var(--btn-secondary-font); }
.shop-buy-label { font-size: 9px; letter-spacing: 1px; opacity: 0.75; }
.shop-buy-btn:hover { background: var(--gold); color: #1a1206; }
.shop-buy-btn.disabled { border-color: var(--border2); color: var(--text-muted); cursor: not-allowed; }
.shop-buy-btn.disabled:hover { background: none; color: var(--text-muted); }
.shop-wish-btn {
    display: block; width: 100%; margin-top: 5px; background: none; border: 1px solid var(--border2);
    color: var(--text-muted); font-family: var(--btn-font); font-size: 9px; padding: 3px 4px;
    cursor: pointer; white-space: nowrap;
}
.shop-wish-btn:hover { border-color: var(--gold-dark); color: var(--gold-dim); }
.shop-wish-btn.active { border-color: var(--gold); color: var(--gold); }

/* 🎯 목표 저축 진행바 */
.wish-progress { margin: 0 0 14px; background: var(--card2); border: 1px solid var(--gold-dark); padding: 10px 12px; }
.wish-progress.hidden { display: none; }
.wish-progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 6px; }
.wish-progress-label { color: var(--gold); flex: 1; font-family: 'NeoDunggeunmo', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-progress-num { color: var(--text-dim); flex-shrink: 0; }
.wish-progress-clear {
    flex-shrink: 0; background: none; border: none; color: var(--text-faint);
    font-size: 12px; cursor: pointer; padding: 0 2px;
}
.wish-progress-clear:hover { color: var(--text-dim); }
.wish-progress-track { height: 6px; background: var(--bg3); overflow: hidden; }
.wish-progress-fill { height: 100%; background: var(--gold); transition: width 0.4s ease; }
.shop-owned-badge {
    font-size: 11px; color: var(--exp); font-family: 'NeoDunggeunmo', monospace;
    border: 1px solid var(--exp); padding: 6px 10px; white-space: nowrap;
}

/* ===== 진단 쿨다운 배지 ===== */
.diag-cooldown {
    font-size: 10px; color: var(--gold-dim); border: 1px solid var(--gold-dark);
    padding: 2px 7px; margin-top: 4px; display: inline-block; font-family: 'NeoDunggeunmo', monospace;
}
.diag-cooldown.blocked { color: var(--text-muted); border-color: var(--border); }
.diag-card .diag-go.cooldown-blocked {
    border-color: var(--border2); color: var(--text-muted); cursor: not-allowed;
}
.diag-card .diag-go.cooldown-blocked:hover { background: none; color: var(--text-muted); }

/* ===== ⏳ 타임캡슐 편지 (캐릭터 탭) ===== */
.timecapsule-section { margin-top: 18px; border: 1px solid var(--border); background: var(--bg2); padding: 12px; }
.timecapsule-section.hidden { display: none; }
.timecapsule-list { display: flex; flex-direction: column; gap: 8px; }
.tc-item {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg3); border: 1px solid var(--border2); padding: 8px 10px;
}
.tc-icon { font-size: 16px; }
.tc-text { font-size: 11.5px; color: var(--text-muted); }
.tc-empty { font-size: 11px; color: var(--text-muted); line-height: 1.5; padding: 10px; text-align: center; }

/* 🪖 복무 이정표 — 성장 연대기 타임라인 */
.milestone-item { align-items: flex-start; }
.milestone-body { flex: 1; min-width: 0; }
.milestone-when { font-size: 10.5px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace; }
.milestone-dream { font-size: 11.5px; color: var(--text); margin-top: 3px; line-height: 1.4; font-style: italic; }

/* 📜 여정의 두루마리 — 선택 모달 */
.scroll-picker-inner { max-width: 340px; text-align: left; }
.scroll-picker-list { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; margin: 14px 0; }
.scroll-picker-item {
    display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
    background: var(--bg3); border: 1px solid var(--border2); padding: 8px 10px; cursor: pointer;
    font-family: inherit;
}
.scroll-picker-item:hover { border-color: var(--gold-dark); background: var(--card2); }
.scroll-picker-kind { font-size: 9.5px; color: var(--gold-dim); }
.scroll-picker-text { font-size: 12px; color: var(--text); line-height: 1.4; }
.scroll-picker-empty { font-size: 11px; color: var(--text-muted); text-align: center; padding: 14px; }

/* ===== 진단 결과 뷰어 (캐릭터 탭) ===== */
.diag-result-section {
    margin-top: 18px; border: 1px solid var(--border); background: var(--bg2); padding: 12px;
}
.diag-result-head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'NeoDunggeunmo', monospace; font-size: 13px; color: var(--gold);
    margin-bottom: 10px;
}
.diag-result-refresh {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    font-size: 14px; padding: 2px 8px; cursor: pointer;
}
.diag-result-refresh:hover { color: var(--gold); border-color: var(--gold); }
.diag-result-list { display: flex; flex-direction: column; gap: 6px; }
.diag-result-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 8px 0; }
.diag-result-row {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.diag-result-row:last-child { border-bottom: none; padding-bottom: 0; }
.diag-result-icon { font-size: 18px; flex-shrink: 0; width: 26px; text-align: center; }
.diag-result-info { flex: 1; min-width: 0; }
.diag-result-name { font-size: 11px; color: var(--text-muted); }
.diag-result-val { font-size: 13px; color: var(--text); font-family: 'NeoDunggeunmo', monospace; }
.diag-result-empty-val { font-size: 12px; color: var(--text-faint); font-style: italic; }
.diag-result-date { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.diag-result-go {
    background: none; border: 1px solid var(--border2); color: var(--text-muted);
    font-size: 10px; padding: 3px 7px; cursor: pointer; flex-shrink: 0;
    font-family: 'NeoDunggeunmo', monospace;
}
.diag-result-go:hover { border-color: var(--gold); color: var(--gold); }
.diag-result-go.cooldown { opacity: 0.5; }

/* ===== 꿀 보너스 토스트 (레벨업·마일스톤) ===== */
.honey-bonus-toast {
    position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
    background: var(--card); border: 1px solid var(--gold); color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; font-size: 13px;
    padding: 10px 20px; z-index: 2000; opacity: 0; transition: opacity 0.3s;
    pointer-events: none; white-space: nowrap; text-align: center;
}
.honey-bonus-toast.show { opacity: 1; }

/* ===== 칭호 스킨 (HUD) ===== */
.hud-title.title-explorer { color: #5dade2; }
.hud-title.title-legend   { color: var(--gold); text-shadow: 0 0 8px rgba(240,192,96,0.6); }

/* ===== 🎨 비전카드 테마·프레임 — 레이어드 CSS + SVG 문장 (이모지 없음, JS: applyCardDecorations) ===== */
/* 장식 레이어는 항상 본문 아래에 깔린다 — 텍스트 가독성 보장 */
.dream-hero.theme-fire, .dream-hero.theme-night, .dream-hero.theme-aurora, .dream-hero.theme-dawn,
.dream-hero.frame-gold, .dream-hero.frame-vine, .dream-hero.frame-dragon,
.vcard.theme-fire, .vcard.theme-night, .vcard.theme-aurora, .vcard.theme-dawn,
.vcard.frame-gold, .vcard.frame-vine, .vcard.frame-dragon { overflow: hidden; }
.dream-hero > *:not(.card-deco), .vcard > *:not(.card-deco) { position: relative; z-index: 1; }
.card-deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }

/* ── 🔥 불꽃 테마: 잉걸불 바닥 + 피어오르는 불씨 파티클 ── */
.dream-hero.theme-fire, .vcard.theme-fire {
    background:
        radial-gradient(ellipse at 50% 130%, rgba(255,110,30,0.28), transparent 60%),
        linear-gradient(180deg, #170604 0%, #330d06 55%, #571507 100%);
    border-color: #a83220;
}
.deco-fire-glow {
    left: -10%; right: -10%; bottom: -30%; height: 85%;
    transform-origin: bottom center;
    background:
        radial-gradient(ellipse at 28% 100%, rgba(255,140,40,0.5), transparent 60%),
        radial-gradient(ellipse at 74% 100%, rgba(255,70,25,0.45), transparent 55%);
    filter: blur(7px);
    animation: fire-breathe 2.8s ease-in-out infinite alternate;
}
@keyframes fire-breathe { 0% { opacity: 0.65; transform: scaleY(0.94); } 100% { opacity: 1; transform: scaleY(1.08); } }
.deco-ember {
    bottom: 4px; width: 4px; height: 4px; border-radius: 50%;
    background: radial-gradient(circle, #ffdca4 0%, #ff7a2f 55%, transparent 75%);
    filter: blur(0.4px); opacity: 0;
    animation: ember-rise 3.4s ease-in infinite;
}
.deco-ember.e1 { left: 12%; --dx: 10px;  animation-delay: 0s; }
.deco-ember.e2 { left: 30%; --dx: -8px;  animation-delay: 1.1s; width: 3px; height: 3px; }
.deco-ember.e3 { left: 48%; --dx: 6px;   animation-delay: 0.5s; }
.deco-ember.e4 { left: 63%; --dx: -12px; animation-delay: 1.9s; width: 3px; height: 3px; }
.deco-ember.e5 { left: 78%; --dx: 8px;   animation-delay: 0.8s; }
.deco-ember.e6 { left: 90%; --dx: -6px;  animation-delay: 2.4s; width: 3px; height: 3px; }
@keyframes ember-rise {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    10%  { opacity: 0.95; }
    70%  { opacity: 0.55; }
    100% { transform: translate(var(--dx, 8px), -64px) scale(0.3); opacity: 0; }
}

/* ── 🌙 밤하늘 테마: 이중 별밭 + 성운 + 이따금 흐르는 유성 ── */
.dream-hero.theme-night, .vcard.theme-night {
    background:
        radial-gradient(ellipse 60% 45% at 78% 12%, rgba(64,86,160,0.35), transparent 70%),
        radial-gradient(ellipse 45% 40% at 18% 80%, rgba(40,40,90,0.3), transparent 70%),
        linear-gradient(180deg, #04040f 0%, #0a0d26 55%, #05061a 100%);
    border-color: #34558c;
}
.deco-stars { inset: 0; }
.deco-stars.s-far {
    opacity: 0.7;
    background-image:
        radial-gradient(1px 1px at 8% 28%,  #cfe0ff 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 64%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 37% 18%, #cfe0ff 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 76%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 34%, #cfe0ff 50%, transparent 51%),
        radial-gradient(1px 1px at 79% 58%, #ffffff 50%, transparent 51%),
        radial-gradient(1px 1px at 91% 22%, #cfe0ff 50%, transparent 51%),
        radial-gradient(1px 1px at 45% 45%, #ffffff 50%, transparent 51%);
}
.deco-stars.s-near {
    background-image:
        radial-gradient(1.6px 1.6px at 15% 40%, #ffffff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 33% 82%, #e8f0ff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 58% 22%, #ffffff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 74% 70%, #e8f0ff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 88% 42%, #ffffff 50%, transparent 51%);
    animation: star-twinkle 3.6s ease-in-out infinite;
}
@keyframes star-twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.deco-shooting {
    top: 22%; left: -80px; width: 70px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9));
    border-radius: 2px; opacity: 0;
    animation: shoot 7.5s linear infinite;
}
@keyframes shoot {
    0%, 82% { opacity: 0; transform: rotate(16deg) translateX(0); }
    84%     { opacity: 1; }
    92%, 100% { opacity: 0; transform: rotate(16deg) translateX(480px); }
}

/* ── 🌌 오로라 테마: 극지의 밤 + 흐르는 빛의 커튼 ── */
.dream-hero.theme-aurora, .vcard.theme-aurora {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(40,120,110,0.22), transparent 70%),
        linear-gradient(180deg, #04101c 0%, #071c26 60%, #04121a 100%);
    border-color: #2e7d74;
}
.deco-aurora {
    top: -35%; bottom: -10%; width: 52%;
    filter: blur(11px); opacity: 0.5;
    animation: aurora-sway 8s ease-in-out infinite alternate;
}
.deco-aurora.a1 {
    left: 4%;
    background: linear-gradient(180deg, transparent 0%, rgba(80,255,190,0.34) 30%, rgba(90,170,255,0.24) 62%, transparent 100%);
}
.deco-aurora.a2 {
    left: 44%; animation-delay: -4s;
    background: linear-gradient(180deg, transparent 0%, rgba(150,120,255,0.28) 28%, rgba(70,230,190,0.26) 60%, transparent 100%);
}
@keyframes aurora-sway {
    0%   { transform: skewX(-16deg) translateX(-12%); opacity: 0.34; }
    50%  { opacity: 0.58; }
    100% { transform: skewX(-4deg) translateX(16%); opacity: 0.42; }
}

/* ── 🌅 여명 테마: 지평선 위로 차오르는 태양 ── */
.dream-hero.theme-dawn, .vcard.theme-dawn {
    background: linear-gradient(180deg, #131b38 0%, #35284e 28%, #7e4438 52%, #cf823c 74%, #f2c06a 100%);
    border-color: #d9a24f;
}
.dream-hero.theme-dawn .dream-hero-text { color: #fff3d6; text-shadow: 0 1px 6px rgba(60, 20, 0, 0.75); }
.dream-hero.theme-dawn .dream-hero-label { color: #f5d9a0; }
.vcard.theme-dawn .vcard-dream { color: #fff3d6; text-shadow: 0 1px 6px rgba(60, 20, 0, 0.75); }
.vcard.theme-dawn .vcard-label { color: #f5d9a0; }
.deco-sun {
    left: 50%; bottom: -34px; width: 104px; height: 104px;
    transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle, #fff0c2 0%, #ffcf70 30%, rgba(255,150,60,0.4) 58%, transparent 72%);
    animation: sun-breathe 5s ease-in-out infinite alternate;
}
@keyframes sun-breathe {
    0%   { transform: translateX(-50%) scale(1);    filter: brightness(1); }
    100% { transform: translateX(-50%) scale(1.07); filter: brightness(1.15); }
}
.deco-dawn-haze {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,12,40,0.35) 0%, transparent 40%),
        repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,200,130,0.05) 14px 17px);
}

/* ── 🖼️ 금빛 테두리 프레임: 이중 매트 + 모서리 플러리시 + 포일 광택 스윕 ── */
.dream-hero.frame-gold, .vcard.frame-gold {
    border: 2px solid var(--gold);
    box-shadow: 0 0 12px rgba(240,192,96,0.35), inset 0 0 14px rgba(240,192,96,0.12);
}
.deco-gf-line { inset: 6px; border: 1px solid rgba(240,192,96,0.5); }
.deco-gf-corner {
    width: 26px; height: 26px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path d='M6 54 L6 16 Q6 6 16 6 L54 6' fill='none' stroke='%23f0c060' stroke-width='3'/><path d='M14 44 L14 21 Q14 14 21 14 L44 14' fill='none' stroke='%23f0c060' stroke-width='1.2' opacity='.75'/><path d='M16 8 L23.5 15.5 L16 23 L8.5 15.5 Z' fill='%23f0c060'/><circle cx='6' cy='54' r='3' fill='%23f0c060'/><circle cx='54' cy='6' r='3' fill='%23f0c060'/></svg>");
    background-size: contain; background-repeat: no-repeat;
    filter: drop-shadow(0 0 3px rgba(240,192,96,0.5));
}
.deco-gf-corner.c-tl { top: 3px; left: 3px; }
.deco-gf-corner.c-tr { top: 3px; right: 3px; transform: scaleX(-1); }
.deco-gf-corner.c-bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
.deco-gf-corner.c-br { bottom: 3px; right: 3px; transform: scale(-1, -1); }
.deco-foil {
    inset: 0; mix-blend-mode: screen;
    background: linear-gradient(115deg, transparent 42%, rgba(255,236,180,0.38) 50%, transparent 58%);
    background-size: 260% 100%;
    animation: foil-sweep 4.6s ease-in-out infinite;
}
@keyframes foil-sweep { 0%, 55% { background-position: 130% 0; } 90%, 100% { background-position: -70% 0; } }

/* ── 🌿 덩굴 장식 프레임: 네 모서리를 감아 오르는 SVG 넝쿨 ── */
.dream-hero.frame-vine, .vcard.frame-vine {
    border: 2px solid #4e7c33;
    box-shadow: inset 0 0 16px rgba(60,100,40,0.35), 0 0 8px rgba(90,140,60,0.25);
}
.deco-vine {
    width: 46px; height: 46px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M76 8 Q40 4 18 12 Q6 18 6 40 Q6 60 8 76' fill='none' stroke='%234e7c33' stroke-width='3' stroke-linecap='round'/><path d='M22 14 q9 2 9 10' fill='none' stroke='%234e7c33' stroke-width='1.5' stroke-linecap='round'/><path d='M52 9 Q58 0 70 2 Q66 13 52 9 Z' fill='%236fae4e'/><path d='M32 11 Q28 24 15 26 Q16 13 32 11 Z' fill='%235f9642'/><path d='M8 34 Q21 36 25 49 Q11 47 8 34 Z' fill='%236fae4e'/><path d='M8 58 Q19 62 21 75 Q9 71 8 58 Z' fill='%235f9642'/><circle cx='31' cy='24' r='2.2' fill='%23a8d08d'/></svg>");
    background-size: contain; background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.deco-vine.v-tl { top: 1px; left: 1px; }
.deco-vine.v-tr { top: 1px; right: 1px; transform: scaleX(-1); }
.deco-vine.v-bl { bottom: 1px; left: 1px; transform: scaleY(-1); }
.deco-vine.v-br { bottom: 1px; right: 1px; transform: scale(-1, -1); }

/* ── 🐉 용의 문장 프레임: 헤럴드릭 용 문장 워터마크 + 잉걸빛 맥동 테두리 ── */
.dream-hero.frame-dragon, .vcard.frame-dragon {
    border: 3px double #8a1f12;
    animation: crest-pulse 4s ease-in-out infinite;
}
@keyframes crest-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(180,40,20,0.25), inset 0 0 12px rgba(120,20,10,0.35); }
    50%      { box-shadow: 0 0 18px rgba(220,70,30,0.5),  inset 0 0 16px rgba(150,30,15,0.5); }
}
.deco-crest, .deco-crest-badge {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='60' cy='60' r='54' fill='none' stroke='%23c0392b' stroke-width='3'/><circle cx='60' cy='60' r='46' fill='none' stroke='%23c0392b' stroke-width='1' opacity='.5'/><path d='M40 90 Q26 66 50 56 Q76 46 64 30' fill='none' stroke='%23d9622e' stroke-width='8' stroke-linecap='round'/><path d='M66 32 L40 22 L64 10 Z' fill='%23d9622e'/><path d='M53 15 L46 2 L59 8 Z' fill='%23d9622e'/><path d='M60 12 L64 0 L69 10 Z' fill='%23d9622e'/><path d='M43 21 Q30 19 24 9' fill='none' stroke='%23d9622e' stroke-width='2' stroke-linecap='round'/><path d='M52 56 L48 44 L60 50 Z' fill='%23d9622e'/><path d='M64 42 L64 30 L74 39 Z' fill='%23d9622e'/><path d='M40 74 L34 62 L46 66 Z' fill='%23d9622e'/><path d='M40 90 L26 99 L42 98 Z' fill='%23d9622e'/><circle cx='51' cy='17' r='2.4' fill='%23330d06'/></svg>");
    background-size: contain; background-repeat: no-repeat;
}
.deco-crest {
    top: 50%; left: 50%; width: 112px; height: 112px;
    transform: translate(-50%, -50%); opacity: 0.13;
}
.deco-crest-badge {
    top: 5px; right: 5px; width: 44px; height: 44px; opacity: 0.95;
    filter: drop-shadow(0 0 6px rgba(220,70,30,0.65));
}

/* ===== 칭호·카드테마 상점 표시 ===== */
.shop-item.type-title  .shop-item-icon { filter: drop-shadow(0 0 4px rgba(93,173,226,0.5)); }
.shop-item.type-card_theme .shop-item-icon { filter: drop-shadow(0 0 4px rgba(240,192,96,0.5)); }
.shop-item.type-card_frame .shop-item-icon { filter: drop-shadow(0 0 4px rgba(240,192,96,0.5)); }
.shop-item.type-instant .shop-item-icon { filter: drop-shadow(0 0 3px rgba(140,200,255,0.4)); }
.shop-toggle-group { display: flex; gap: 4px; }
.shop-toggle-btn {
    background: none; border: 1px solid var(--border2); color: var(--text-muted);
    font-family: var(--btn-font); font-size: var(--btn-secondary-font); padding: var(--btn-secondary-padding); cursor: pointer;
}
.shop-toggle-btn:disabled { cursor: default; opacity: 0.55; }
.shop-toggle-btn.on.active { border-color: var(--exp); color: var(--exp); background: rgba(46,204,113,0.15); }
.shop-toggle-btn.off.active { border-color: var(--text-muted); color: var(--text); background: rgba(255,255,255,0.05); }
.shop-toggle-btn:not(:disabled):hover { border-color: var(--gold-dark); color: var(--gold); }

/* ===== 🌿 나의 종합 해석 (진단 기반, AI 불필요) ===== */
.diag-synthesis {
    background: linear-gradient(180deg, #0d2a26 0%, #0a1c1a 100%);
    border: 1px solid #2a4a45;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.syn-head {
    font-size: 12px; color: #5fd0c0; font-family: 'NeoDunggeunmo', monospace;
    letter-spacing: 0.5px; margin-bottom: 8px;
}
.syn-partial { font-size: 9px; color: var(--text-muted); letter-spacing: 0; }
.syn-summary { font-size: 12px; line-height: 1.7; color: var(--text); }
.syn-summary b { color: #7fe0d0; }
.syn-careers { margin-top: 10px; }
.syn-careers > summary {
    cursor: pointer; font-size: 11px; color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace; list-style: none;
}
.syn-careers > summary::-webkit-details-marker { display: none; }
.syn-careers[open] > summary { margin-bottom: 6px; }
.syn-line { font-size: 11px; line-height: 1.6; color: var(--text-dim); padding: 1px 0; }

/* ===== 🧳 자기여행 인트로 (탭 최상단 핵심 기능 헤더) ===== */
.journey-intro {
    background: linear-gradient(180deg, #2a1608 0%, #1e1005 100%);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.journey-intro-title {
    font-size: 16px; color: var(--gold);
    font-family: 'NeoDunggeunmo', monospace; letter-spacing: 1px; margin-bottom: 6px;
}
.journey-intro-desc { font-size: 12px; line-height: 1.7; color: var(--text-dim); }
.journey-intro-desc b { color: var(--gold-dim); }

/* ===== 꿈 세 조각 설명 — 각 조각 한 줄씩 (가독성) ===== */
.vision-piece {
    margin: 7px 0; padding: 7px 10px;
    background: var(--bg3); border-left: 2px solid var(--border2); border-radius: 3px;
    font-size: 12px; line-height: 1.6;
}

/* ===== ❓ 공용 확인 모달 ===== */
.confirm-inner { text-align: center; }
.confirm-msg {
    font-size: 14px; line-height: 1.6; color: var(--text);
    margin-bottom: 16px; padding: 4px 2px;
}
.confirm-btns { display: flex; gap: 10px; }

/* ===== 👤 나의 정보 — 요약 ===== */
.myinfo-summary {
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 14px; margin: 12px 0;
}
.mi-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.mi-row + .mi-row { border-top: 1px solid var(--bg3); }
.mi-k { color: var(--text-dim); }
.mi-v { color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.admin-stats-trend {
    font-size: 10px; color: var(--text-faint); line-height: 1.6;
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border2);
    word-break: keep-all;
}
.admin-stats-note { font-size: 10px; color: var(--text-faint); text-align: right; margin-top: 4px; }
.admin-announce-desc { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
.admin-announce-textarea {
    width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 13px;
    padding: 8px 10px; resize: vertical; box-sizing: border-box;
}
.admin-announce-textarea:focus { outline: none; border-color: var(--gold); }
.admin-announce-actions { display: flex; gap: 8px; margin: 8px 0 12px; }
.admin-announce-actions .rpg-btn { flex: 1; padding: 8px; font-size: 12px; }
.admin-announce-list { display: flex; flex-direction: column; gap: 6px; }
.admin-announce-item {
    background: var(--card2); border: 1px solid var(--border2); padding: 8px 10px; font-size: 12px;
}
.admin-announce-item.inactive { opacity: 0.5; }
.admin-announce-item-content { color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; white-space: pre-wrap; word-break: break-word; }
.admin-announce-item-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--text-faint); }
.admin-announce-item-badge { padding: 1px 6px; border: 1px solid var(--border2); }
.admin-announce-item-badge.active { color: var(--gold); border-color: var(--gold-dim); }
.admin-announce-item-actions button {
    background: none; border: 1px solid var(--border2); color: var(--text-dim);
    font-size: 10px; padding: 2px 8px; margin-left: 4px; cursor: pointer;
}
.announce-modal-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; text-align: left; }
.myinfo-honey-spent {
    font-size: 11px; color: var(--gold-dim); text-align: center;
    margin: 0 0 12px; padding: 8px 10px; background: var(--card2); border: 1px solid var(--border2);
}
.myinfo-honey-spent.hidden { display: none; }
.myinfo-honey-flow {
    font-size: 11px; color: var(--text-dim); text-align: center;
    margin: 0 0 12px; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--border);
}
.myinfo-honey-flow.hidden { display: none; }

/* ===== 🎒 보유 아이템 (나의 정보 + 보급소 공용) ===== */
.owned-section { margin: 12px 0; }
.owned-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer;
    font-size: 12px; color: var(--gold-dim);
    font-family: 'NeoDunggeunmo', monospace; letter-spacing: 0.5px; margin-bottom: 8px; padding: 4px 0;
}
.owned-head:hover { color: var(--gold); }
.owned-count { font-size: 10px; color: var(--text-muted); }
.owned-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.15s; }
.owned-list { display: flex; flex-direction: column; gap: 6px; }
.owned-list.hidden { display: none; }
.owned-item {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px;
}
.owned-item.active { border-color: var(--gold); background: var(--card2); }
.owned-icon { font-size: 16px; }
.owned-name { flex: 1; font-size: 12px; color: var(--text); }
.owned-name b { color: var(--gold); }
.owned-tag {
    font-size: 9px; color: var(--text-muted); border: 1px solid var(--border);
    border-radius: 3px; padding: 1px 5px;
}
.owned-active { font-size: 10px; color: var(--gold); font-family: 'NeoDunggeunmo', monospace; }
.owned-empty { font-size: 11px; color: var(--text-muted); padding: 10px; text-align: center; }

/* 🏅 명예의 선반 — 수집률 요약 + 그룹 라벨 + 미보유 실루엣 */
.owned-collection-rate {
    font-size: 11px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border2);
}
.owned-group-label {
    font-size: 9.5px; color: var(--text-faint); letter-spacing: 1px; margin: 10px 0 4px;
}
.owned-group-label:first-of-type { margin-top: 0; }
.owned-item.owned-empty-slot {
    opacity: 0.45; filter: grayscale(1);
}
.owned-item.owned-empty-slot .owned-name { color: var(--text-faint); }
.shop-sec-head {
    font-size: 12px; color: var(--gold-dim); font-family: 'NeoDunggeunmo', monospace;
    letter-spacing: 0.5px; margin: 14px 0 8px;
}

/* ===== 💎 프리미엄 결제 (실 결제 — 포트원) ===== */
.premium-shop-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.premium-shop-items { display: flex; flex-direction: column; gap: 10px; }
.premium-shop-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: 6px; padding: 10px 12px;
}
.premium-shop-name { font-size: 13px; color: var(--text); font-family: 'NeoDunggeunmo', monospace; }
.premium-shop-price { font-size: 12px; color: var(--gold); margin-left: auto; margin-right: 10px; }

/* ===== 🚪 로그아웃 (나의 정보 탭 · 눈에 띄게) ===== */
.logout-btn {
    width: 100%; margin-top: 18px;
    background: #2a0f0a; border: 2px solid #8a3a2a; color: #e89a88;
    font-family: 'NeoDunggeunmo', monospace; font-size: 14px; letter-spacing: 2px;
    padding: 13px; cursor: pointer; border-radius: 4px; transition: all 0.15s;
}
.logout-btn:hover  { background: #3a1510; border-color: #c45a44; color: #ffb3a0; }
.logout-btn:active { filter: brightness(0.85); }

/* ===== 🪖 튜토리얼 전역일 입력 ===== */
.tut-dday-wrap {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 12px;
}
.tut-dday-field { display: flex; flex-direction: column; gap: 4px; }
.tut-dday-label {
    font-size: 11px; color: var(--text-dim);
    font-family: 'NeoDunggeunmo', monospace; letter-spacing: 0.5px;
}
/* 브라우저 기본 날짜 입력의 mm/dd/yyyy 플레이스홀더(로케일 설정과 무관하게 종종 고정 표시됨)가
   영문 톤으로 튀어 보이는 것을 보완 — 라벨 옆에 한국어 날짜 예시를 덧붙인다. */
.date-hint { font-size: 9px; color: var(--text-faint); font-weight: normal; letter-spacing: 0; margin-left: 4px; }

/* ===== Responsive ===== */
@media (max-width: 420px) {
    .game-container { border: none; }
    .screen { padding: 10px; }
}