/* /shadow/assets/css/components.css */
/* /shadow/assets/css/components.css */
/* 「그림자를 안아주다」 — 컴포넌트 (nav, footer, chat, session, card 등) */

/* ── 네비게이션 ────────────────────────────────────────────── */
.shadow-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(245, 241, 234, .96);  /* 라이트모드 크림 */
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--color-border-soft);
}
.shadow-nav-inner {
    max-width: var(--container-lg);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.shadow-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent-deep);
    font-family: var(--font-base);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.shadow-nav-brand svg { color: var(--color-accent); }
.shadow-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
/* nav 링크 색상 — 다크모드와 무관하게 nav 배경에 맞춰 고정.
   --color-text-soft는 다크모드에서 라이트로 뒤집혀 nav 배경(고정 크림)과
   대비가 무너지므로 직접 hex 사용. */
.shadow-nav-links a {
    color: #4A4A4A;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color var(--transition-base), background var(--transition-base);
}
.shadow-nav-links a:hover { color: #7A5530; background: rgba(122,85,48,.08); }
.shadow-nav-links a:active { color: #2B2B2B; }

/* 다크모드에서도 nav 자체는 라이트 크림 유지 (가독성 우선)
   원하면 다크모드 nav 배경도 어둡게 가능하나, 현재 디자인 일관성을 위해 라이트 유지 */
@media (prefers-color-scheme: dark) {
    .shadow-nav {
        background: rgba(31, 29, 26, .96);  /* 다크모드: 어두운 nav */
        border-bottom-color: #3D3833;
    }
    .shadow-nav-brand { color: #C99764; }
    .shadow-nav-links a {
        color: #D8D2C7;     /* 다크 nav 위 밝은 텍스트 */
    }
    .shadow-nav-links a:hover {
        color: #FFFFFF;
        background: rgba(216,210,199,.10);
    }
    .shadow-nav-user {
        border-color: #3D3833 !important;
        color: #D8D2C7;
    }
}
.shadow-nav-cta {
    background: var(--color-accent);
    color: var(--color-text-inverse) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-full);
}
.shadow-nav-cta:hover { background: var(--color-accent-deep) !important; color: var(--color-text-inverse) !important; }

@media (max-width: 640px) {
    .shadow-nav-inner {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
        /* 가로 오버플로우 방지 — 브랜드 고정 + 링크는 가로 스크롤 */
        flex-wrap: nowrap;
    }
    .shadow-nav-brand {
        flex-shrink: 0;            /* 브랜드 로고 축소 금지 */
    }
    .shadow-nav-brand span { display: none; }
    .shadow-nav-links {
        gap: var(--space-1);
        font-size: .82rem;          /* 살짝 작게 — 메뉴 7개 수용 */
        flex-wrap: nowrap;
        /* 가로 스크롤 — 항목이 화면을 넘으면 스와이프 가능 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;      /* Firefox */
        min-width: 0;               /* flex item 축소 허용 */
        flex: 1 1 auto;
    }
    .shadow-nav-links::-webkit-scrollbar { display: none; }  /* WebKit */
    /* 모바일 가독성·존재감 강화:
       - 브론즈 액센트 색상 (회색 대비 따뜻하고 존재감 있음)
       - 폰트 두께 600 */
    .shadow-nav-links a {
        padding: var(--space-1) .45rem;
        color: #7A5530;            /* 브론즈 deep — 흰 배경에 또렷 */
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;        /* 메뉴 글자 줄바꿈 금지 */
        flex-shrink: 0;
    }
    .shadow-nav-links a:hover,
    .shadow-nav-links a:focus {
        color: #5A3F22;            /* 더 진한 브론즈 */
        background: rgba(168,118,66,.08);
        border-radius: 6px;
    }
    /* 사용자 표시명·로그인 dot 컴팩트 — 표시명 텍스트만 숨김 */
    .shadow-nav-user {
        padding: .15rem .35rem !important;
        font-size: .68rem !important;
        gap: .25rem !important;
        flex-shrink: 0;
    }
    .shadow-nav-user > span:nth-of-type(2) { display: none; }
    /* 로그아웃은 ⏻ 아이콘으로 (텍스트 가림) */
    .shadow-nav-links a[href*="logout"] {
        font-size: 0;
        position: relative;
        padding: var(--space-1) var(--space-2);
    }
    .shadow-nav-links a[href*="logout"]::before {
        content: '⏻';
        font-size: var(--text-base);
        font-weight: 600;
    }
    /* CTA(로그인) 컴팩트 */
    .shadow-nav-cta {
        padding: var(--space-1) var(--space-3) !important;
        flex-shrink: 0;
    }
}
/* 모바일 + 다크모드: nav 텍스트 가독성 (밝은 베이지·금색 톤) */
@media (max-width: 640px) and (prefers-color-scheme: dark) {
    .shadow-nav-links a {
        color: #D8B58A;          /* 따뜻한 베이지 — 어두운 nav 위에 또렷 */
        font-weight: 600;
    }
    .shadow-nav-links a:hover,
    .shadow-nav-links a:focus {
        color: #F5E6D0;
        background: rgba(216,181,138,.10);
    }
}

/* ── 언어 전환 드롭다운 (KO/EN/JA) ──────────────────────────── */
/* <details>/<summary> 기반 — JS 없이 모바일 접근성·스페이스 효율 우수 */
.shadow-lang-dd {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.shadow-lang-dd summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .55rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text-soft);
    background: var(--color-surface);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.shadow-lang-dd summary::-webkit-details-marker { display: none; }
.shadow-lang-dd summary::marker { content: ''; }
.shadow-lang-dd summary:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
.shadow-lang-dd[open] summary {
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
    background: var(--color-surface-soft);
}
.shadow-lang-dd-arrow {
    font-size: .65em;
    transition: transform var(--transition-fast);
    opacity: .65;
}
.shadow-lang-dd[open] .shadow-lang-dd-arrow { transform: rotate(180deg); }
.shadow-lang-dd-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    min-width: 9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: .25rem;
    z-index: var(--z-dropdown, 50);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.shadow-lang-dd-menu a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background var(--transition-fast);
}
.shadow-lang-dd-menu a:hover,
.shadow-lang-dd-menu a:focus {
    background: var(--color-surface-soft);
    color: var(--color-accent-deep);
}
.shadow-lang-dd-code {
    display: inline-block;
    min-width: 1.6em;
    font-weight: 700;
    color: var(--color-accent-deep);
    font-size: .75rem;
}
.shadow-lang-dd-name {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
}
/* 다크모드 */
@media (prefers-color-scheme: dark) {
    .shadow-lang-dd summary {
        background: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text-soft);
    }
    .shadow-lang-dd-menu {
        background: var(--color-surface);
        border-color: var(--color-border);
    }
}
/* 모바일 — 살짝 더 컴팩트 + 메뉴 클립 방지 (nav가 overflow-x:auto 스크롤 컨테이너라 absolute 메뉴가 잘림 → fixed로 viewport 기준 표시) */
@media (max-width: 640px) {
    .shadow-lang-dd summary {
        padding: .2rem .45rem;
        font-size: .68rem;
    }
    .shadow-lang-dd-menu {
        position: fixed;
        top: 52px;            /* sticky header 아래 살짝 띄움 */
        right: var(--space-3);
        min-width: 9rem;
        z-index: 9999;        /* sticky header 위로 보이게 */
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }
    .shadow-lang-dd-menu a {
        padding: .65rem .75rem;
        font-size: var(--text-sm);
    }
}

/* ── 융 명언 상단 배너 ─────────────────────────────────────── */
.shadow-jung-bar {
    background: linear-gradient(180deg, var(--color-bg-soft), var(--color-bg));
    border-bottom: 1px solid var(--color-border-soft);
    padding: var(--space-5) var(--space-4);
}
.shadow-jung-bar-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.shadow-jung-bar p {
    font-family: var(--font-base);  /* Pretendard — 명조체 어른거림 방지 */
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text);
    margin: 0;
    line-height: var(--leading-loose);
    word-break: keep-all;
    letter-spacing: -0.01em;
    max-width: 540px;
}
.shadow-jung-bar cite {
    display: inline-block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: .7;
}
@media (max-width: 480px) {
    .shadow-jung-bar { padding: var(--space-4) var(--space-3); }
    .shadow-jung-bar p { font-size: var(--text-sm); }
}

/* ── 푸터 ──────────────────────────────────────────────────── */
.shadow-foot {
    margin-top: var(--space-16);
    padding: var(--space-8) var(--space-4);
    border-top: 1px solid var(--color-border-soft);
    background: var(--color-bg-soft);
}
.shadow-foot-inner {
    max-width: var(--container-lg);
    margin-inline: auto;
    text-align: center;
}
.shadow-foot-links {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    justify-content: center; margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.shadow-foot-links a {
    color: var(--color-text-soft);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.shadow-foot-links a:hover { color: var(--color-accent-deep); border-bottom-color: var(--color-accent-soft); }
.shadow-foot-ritual {
    font-family: var(--font-base);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
    margin: var(--space-4) 0 var(--space-2);
}
.shadow-foot-meta {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: 0;
}
.shadow-foot-meta a { color: var(--color-accent-deep); }

/* ── 인증 폼 ───────────────────────────────────────────────── */
.auth-card {
    max-width: 420px;
    margin: var(--space-12) auto;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.auth-card h1 {
    text-align: center;
    margin-bottom: var(--space-2);
}
.auth-card .auth-sub {
    text-align: center;
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}
.auth-card .field { margin-bottom: var(--space-4); }
.auth-card .actions { margin-top: var(--space-6); }
.auth-card .alt {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}
.auth-card .alt a { color: var(--color-accent-deep); border-bottom: 1px solid var(--color-accent-soft); }

/* ── 대시보드 ──────────────────────────────────────────────── */
.dash {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.dash-greet {
    font-family: var(--font-base);
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
}
.dash-sub {
    color: var(--color-text-soft);
    margin-bottom: var(--space-8);
}
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.dash-tile {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.dash-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.dash-tile .icon { color: var(--color-accent); margin-bottom: var(--space-3); }
.dash-tile h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.dash-tile p { font-size: var(--text-sm); color: var(--color-text-soft); margin: 0; }
.dash-tile .badge {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 2px var(--space-2);
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}
.dash-credit {
    background: var(--color-shadow);
    color: #F5F1EA;             /* shadow 배경은 다크모드에서도 항상 어두우므로 텍스트 고정 */
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}
.dash-credit h3,
.dash-credit a { color: inherit; }
.dash-credit h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.dash-credit .num { font-size: var(--text-3xl); font-weight: 700; }
.dash-credit a {
    display: inline-block; margin-top: var(--space-3);
    background: var(--color-accent); color: #fff;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

/* ── 일기 ──────────────────────────────────────────────────── */
.diary-list { display: flex; flex-direction: column; gap: var(--space-3); }
.diary-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--transition-base);
}
.diary-item:hover { border-color: var(--color-accent-soft); }
.diary-item .meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.diary-item .title { font-size: var(--text-base); margin-bottom: var(--space-1); }
.diary-item .preview { font-size: var(--text-sm); color: var(--color-text-soft); }
.diary-type-badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    margin-right: var(--space-2);
}
.diary-locked { opacity: .6; }
.diary-locked .preview { font-style: italic; }

/* ── 카드 (오늘의 카드) ────────────────────────────────────── */
.card-of-day {
    max-width: 420px;
    margin: 0 auto;
    background: var(--color-shadow);
    color: #F5F1EA;                            /* 다크모드와 무관하게 항상 밝게 (카드 배경이 어두운 고정색) */
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 480px) {
    .card-of-day {
        padding: var(--space-6) var(--space-5);
    }
    .card-of-day .archetype { margin-bottom: var(--space-2); }
    .card-of-day h2 { margin-bottom: var(--space-3); font-size: var(--text-2xl); }
    .card-of-day .short { margin-bottom: var(--space-4); font-size: var(--text-base); }
    .card-of-day .full { margin-bottom: var(--space-4); padding: var(--space-3); }
    .card-of-day .reflection { margin-top: var(--space-3); }
}
.card-of-day::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(168,118,66,.15), transparent 60%);
    pointer-events: none;
}
.card-of-day .archetype {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: var(--text-xs);
    color: var(--color-accent-soft);
    margin-bottom: var(--space-3);
}
.card-of-day h2 {
    color: inherit;
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}
.card-of-day .short {
    font-family: var(--font-base);
    font-size: var(--text-lg);
    font-weight: 600;                       /* 다크 배경 위 라이트 텍스트는 더 두껍게 */
    line-height: var(--leading-loose);
    margin-bottom: var(--space-6);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}
.card-of-day .full {
    text-align: left;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    color: rgba(245,241,234,.85);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
}
.card-of-day .reflection {
    text-align: left;
    margin-top: var(--space-4);
}
.card-of-day .reflection label {
    color: var(--color-accent-soft); font-size: var(--text-sm); display: block; margin-bottom: var(--space-2);
}
/* ── 다크모드 안전: shadow 배경 위 텍스트 항상 밝게 ──────────
 * --color-shadow 는 두 모드 모두 #1A1A1A 로 고정되는 의도적 어두움.
 * 그 위에 var(--color-bg) 를 텍스트로 쓰면 다크모드에서 어두운 글자가 됨.
 * 인라인 style 에 background: var(--color-shadow) 가 들어간 컨테이너의
 * 텍스트(자손 포함)는 무조건 밝게.
 */
[style*="color-shadow)"] {
    color: #F5F1EA !important;
}
[style*="color-shadow)"] strong,
[style*="color-shadow)"] h2,
[style*="color-shadow)"] h3,
[style*="color-shadow)"] h4,
[style*="color-shadow)"] p,
[style*="color-shadow)"] li,
[style*="color-shadow)"] label,
[style*="color-shadow)"] span:not(.badge):not(.pill) {
    color: #F5F1EA !important;
}
[style*="color-shadow)"] .text-soft,
[style*="color-shadow)"] .text-muted {
    color: rgba(245,241,234,.7) !important;
}

/* card-of-day 는 다크모드와 무관하게 항상 어두운 배경 → 텍스트는 항상 밝게 고정 */
.card-of-day textarea,
.card-of-day .textarea,
.card-of-day textarea.textarea {
    background: rgba(255,255,255,.07) !important;
    color: #F5F1EA !important;
    border-color: rgba(255,255,255,.15) !important;
    -webkit-text-fill-color: #F5F1EA;
}
.card-of-day textarea::placeholder,
.card-of-day .textarea::placeholder {
    color: rgba(245,241,234,.5) !important;
    -webkit-text-fill-color: rgba(245,241,234,.5);
}
.card-of-day textarea:focus,
.card-of-day .textarea:focus {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(201,151,100,.6) !important;
    box-shadow: 0 0 0 3px rgba(201,151,100,.18) !important;
}

/* ── 세션 ──────────────────────────────────────────────────── */
.session-stage {
    display: flex; gap: var(--space-2); justify-content: center;
    margin-bottom: var(--space-4);
}
.session-stage .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-border);
    transition: background var(--transition-pause);
}
.session-stage .dot.active { background: var(--color-accent); transform: scale(1.3); }

.session-timer {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    color: var(--color-text-soft);
    margin-bottom: var(--space-2);
}
.session-timer.warn { color: var(--color-warning); }

/* 하단 위기 안내 줄에 시계 인라인 (보내기 버튼 하단) */
.session-bottom-line {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.session-bottom-line .bottom-timer {
    font-family: var(--font-base);
    font-size: 12px;
    color: var(--color-accent-deep, #7A5530);
}
.session-bottom-line .bottom-timer strong {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 4px;
}
.session-bottom-line .bottom-divider {
    color: var(--color-text-muted);
    opacity: .5;
}
.session-bottom-line.warn .bottom-timer strong { color: var(--color-warning); }
@media (prefers-color-scheme: dark) {
    .session-timer-float {
        background: rgba(122,85,48,.92);
        color: #fff;
    }
}
.session-timer-float .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: timer-pulse 2s ease-in-out infinite;
}
.session-timer-float.warn { color: var(--color-warning); border-color: var(--color-warning); }
.session-timer-float.warn .dot { background: var(--color-warning); animation-duration: 1s; }
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
/* 모바일 — 작은 글자, 우측 상단 유지 */
@media (max-width: 640px) {
    .session-timer-float {
        top: 10px;
        right: 10px;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 70vw;
    }
    .session-timer-float .timer-label { font-size: 10px; }
    .session-timer-float .timer-num { font-size: 13px; }
    .session-timer-float .timer-crisis-inline {
        font-size: 10px;
        flex-basis: 100%;
        text-align: right;
        margin-left: 0;
    }
}
@media (max-width: 380px) {
    .session-timer-float .timer-label { display: none; }
}

.session-meta {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.chat-stream {
    display: flex; flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    padding-bottom: 16px;  /* composer 위 간격 — sticky composer 가 자체 자리 가지므로 작게 */
    max-width: 720px; margin: 0 auto;
}
.chat-bubble {
    max-width: 85%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    line-height: var(--leading-loose);
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.chat-bubble.user {
    align-self: flex-end;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-bottom-right-radius: var(--radius-sm);
}
.chat-bubble.assistant {
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-soft);
    border-bottom-left-radius: var(--radius-sm);
    font-family: var(--font-base);
}
.chat-bubble.system {
    align-self: center;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}
.chat-typing {
    align-self: flex-start;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-2) var(--space-4);
}

.chat-composer {
    position: sticky;
    bottom: var(--safe-bottom);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-soft);
    padding: var(--space-2) var(--space-4) var(--space-4);  /* top 좁힘 — 마지막 메시지와 가깝게 */
    display: flex; flex-direction: column;
    gap: var(--space-2);
    max-width: 720px; margin: 0 auto;
}
.chat-composer textarea {
    width: 100%;
    min-height: 96px;
    max-height: 280px;
    line-height: var(--leading-loose);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.chat-composer textarea:focus {
    background: var(--color-surface);
    border-color: var(--color-accent-soft);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(168, 118, 66, .08);
}
.chat-composer .composer-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 var(--space-2);  /* 좌·우 살짝 안쪽으로 — textarea 안쪽 글자와 시각 정렬 */
}
.chat-composer .composer-info {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.chat-composer .composer-info-divider { opacity: .5; }
.chat-composer .composer-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
@media (max-width: 480px) {
    .chat-composer .composer-buttons { gap: var(--space-2); }
    .chat-composer .composer-info { font-size: 11px; }
}
.chat-composer .composer-buttons .btn {
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-6);
}
@media (max-width: 480px) {
    .chat-composer { padding: var(--space-3); }
    .chat-composer textarea { min-height: 120px; }
    .chat-composer .composer-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .chat-composer .composer-info {
        justify-content: center;
        text-align: center;
        font-size: 11px;
    }
    /* 음성 select + 버튼들 한 줄 우측 정렬 */
    .chat-composer .composer-actions {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-2);
    }
    /* select는 남은 공간 차지, 텍스트 길면 자동 잘림 */
    .chat-composer .composer-actions #voice-pick {
        flex: 1 1 0;
        min-width: 0;
        font-size: .8rem;
        padding: .4rem .5rem;
    }
    /* 음성 토글·보내기 버튼: 글자 폭에 맞춰 고정 */
    .chat-composer .composer-actions .btn:not(#voice-pick) {
        flex: 0 0 auto;
        padding: var(--space-2) var(--space-3);
        font-size: .85rem;
        min-height: 40px;
    }
}

/* ── 세션 종료 리포트 ────────────────────────────────────── */
.session-report {
    max-width: 720px; margin: 0 auto;
}
.session-report .summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}
.session-report h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.session-report .insight-list li {
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--color-border-soft);
    color: var(--color-text-soft);
}
.session-report .insight-list li:last-child { border-bottom: 0; }
.session-report .next-focus {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-soft);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-base);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--leading-loose);
    color: var(--color-text);
}

/* ── 자가진단 ──────────────────────────────────────────────── */
.assess-question {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-3);
}
.assess-question .domain {
    font-size: var(--text-xs);
    color: var(--color-accent-deep);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: var(--space-2);
}
.assess-question .q {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-4);
    word-break: keep-all;
}
.likert {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.likert label {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}
.likert label:hover { border-color: var(--color-accent-soft); }
.likert input[type=radio] { display: none; }
.likert input[type=radio]:checked + span,
.likert label:has(input:checked) {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}

/* ── 가격 ──────────────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}
.price-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex; flex-direction: column;
}
.price-card.featured {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(168,118,66,.08);
    position: relative;
}
.price-card.featured::before {
    content: '추천';
    position: absolute; top: -10px; left: var(--space-6);
    background: var(--color-accent); color: #fff;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
}
.price-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.price-card .desc { font-size: var(--text-sm); color: var(--color-text-soft); margin-bottom: var(--space-4); }
.price-card .amount {
    font-size: var(--text-3xl); font-family: var(--font-serif);
    color: var(--color-accent-deep);
    margin: var(--space-2) 0;
}
.price-card .features {
    margin: var(--space-4) 0;
    list-style: none;
    padding: 0;
    color: var(--color-text-soft);
    font-size: var(--text-sm);
}
.price-card .features li {
    padding: var(--space-1) 0;
    padding-left: var(--space-5);
    position: relative;
}
.price-card .features li::before {
    content: '·';
    position: absolute; left: var(--space-2);
    color: var(--color-accent);
    font-weight: 700;
}
.price-card .btn { margin-top: auto; }

/* ── 위기 페이지 ──────────────────────────────────────────── */
.crisis-page {
    max-width: 560px; margin: 0 auto;
}
.crisis-page .crisis-banner { margin-bottom: var(--space-6); }
.crisis-page .calm-instruction {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

/* ── 30일 프로그램 ────────────────────────────────────────── */
.program-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    margin: var(--space-6) 0;
    width: 100%;
}
.program-day {
    aspect-ratio: 1;
    display: grid; place-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}
@media (max-width: 480px) {
    .program-grid { grid-template-columns: repeat(6, 1fr); max-width: 100%; }
}
.program-day.completed {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}
.program-day.current {
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
    font-weight: 600;
}
.program-day.locked { opacity: .4; cursor: not-allowed; }
.program-day.has-response {
    background: rgba(168, 118, 66, 0.15);
    border-color: var(--color-accent-soft, #C49A6A);
    border-style: dashed;
    color: var(--color-accent-deep);
    position: relative;
}
.program-day.has-response::after {
    content: "·";
    position: absolute;
    bottom: 0px;
    right: 4px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-accent);
}
/* 오늘 자리 — 어떤 상태든 상관없이 강조 */
.program-day.is-today {
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* ── 토스트·로딩 ────────────────────────────────────────── */
.toast {
    position: fixed; left: 50%;
    bottom: calc(var(--safe-bottom) + var(--space-4));
    transform: translateX(-50%);
    background: var(--color-shadow);
    color: #F5F1EA;             /* shadow 배경 텍스트 다크모드 고정 */
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    font-size: var(--text-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}
.toast.show { opacity: 1; }

.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 어드민 — 네비 색상 modifier (.btn .btn-text 위에 얹음) ──────── */
/* 미방문 기본 — 옅은 회색 (테두리 없음) */
.admin-nav-link { color: #8A8A8A !important; }

/* 방문함 — 박스 (브론즈 테두리)로 식별 */
.admin-nav-link.is-visited {
    color: var(--color-accent-deep, #7A5530) !important;
    background: transparent !important;
    border: 1px solid var(--color-accent-deep, #7A5530) !important;
}

/* 현재 페이지 — 진한 브론즈 채워진 박스 */
.admin-nav-link.is-active {
    color: #fff !important;
    background: var(--color-accent-deep, #7A5530) !important;
    border: 1px solid var(--color-accent-deep, #7A5530) !important;
    font-weight: 600 !important;
}

/* 위기 로그(danger) */
.admin-nav-link.is-danger { color: var(--color-danger) !important; }
.admin-nav-link.is-danger.is-visited {
    color: var(--color-danger) !important;
    background: transparent !important;
    border: 1px solid var(--color-danger) !important;
}
.admin-nav-link.is-danger.is-active {
    color: #fff !important;
    background: var(--color-danger) !important;
    border: 1px solid var(--color-danger) !important;
}

/* 호버 — active 제외 */
.admin-nav-link:hover:not(.is-active) {
    color: var(--color-accent-deep) !important;
    background: var(--color-surface-soft) !important;
}
.admin-nav-link.is-danger:hover:not(.is-active) {
    color: var(--color-danger) !important;
    background: rgba(139,58,58,.08) !important;
}

@media (prefers-color-scheme: dark) {
    .admin-nav-link { color: #8A8478 !important; }
    .admin-nav-link.is-visited {
        color: #C99764 !important;
        border-color: #C99764 !important;
        background: transparent !important;
    }
    .admin-nav-link.is-active {
        color: #fff !important;
        background: var(--color-accent-deep) !important;
        border-color: var(--color-accent-deep) !important;
    }
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: var(--text-sm);
}
.admin-table th { background: var(--color-bg-soft); font-weight: 500; color: var(--color-text-soft); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--color-surface-soft); }
.admin-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}
.admin-stat .num { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--color-accent-deep); }
.admin-stat .label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .1em; }

/* ──────────────────────────────────────────────
   음성 모드 (voice.js) — Phase 3a
   ────────────────────────────────────────────── */
.btn-voice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-soft);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-voice:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
.btn-voice.active {
    background: var(--color-accent);
    color: var(--color-light);
    border-color: var(--color-accent-deep);
    box-shadow: 0 0 0 3px rgba(168, 118, 66, 0.2);
}
.btn-voice .voice-icon { font-size: 1.1em; }
.btn-voice.active .voice-icon { animation: voice-pulse 1.4s ease-in-out infinite; }
@keyframes voice-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.voice-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}
.voice-status.hidden { display: none; }
.voice-status.recording { border-color: var(--color-accent); background: rgba(168, 118, 66, 0.06); }
.voice-status.transcribing { border-color: var(--color-text-soft); }
.voice-status.speaking { border-color: var(--color-success); background: rgba(74, 107, 92, 0.06); }
.voice-status.error { border-color: var(--color-danger); background: rgba(139, 58, 58, 0.06); color: var(--color-danger); }

.voice-wave {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}
.voice-wave span {
    display: inline-block;
    width: 3px;
    height: 8px;
    background: var(--color-text-muted);
    border-radius: 2px;
    transition: height 0.2s;
}
.voice-status.recording .voice-wave span {
    background: var(--color-accent);
    animation: voice-wave 1s ease-in-out infinite;
}
.voice-status.recording .voice-wave span:nth-child(1) { animation-delay: 0s; }
.voice-status.recording .voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.voice-status.recording .voice-wave span:nth-child(3) { animation-delay: 0.2s; }
.voice-status.recording .voice-wave span:nth-child(4) { animation-delay: 0.3s; }
.voice-status.recording .voice-wave span:nth-child(5) { animation-delay: 0.4s; }
.voice-status.speaking .voice-wave span {
    background: var(--color-success);
    animation: voice-wave 0.8s ease-in-out infinite;
}
@keyframes voice-wave {
    0%, 100% { height: 6px; }
    50% { height: 22px; }
}

.voice-status-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}
.btn-voice-cancel {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
}
.btn-voice-cancel:hover { color: var(--color-danger); border-color: var(--color-danger); }

body.voice-mode-on .chat-composer { opacity: 0.7; }
body.voice-mode-on #chat-input { background: var(--color-bg-soft); }

/* === MOBILE_RESUME_BUTTON_FIX ? ?? ?? ?? ??? ??? (2026-05-07) === */
/* ????? ?? ? ?? ?? ?? */
.dash .card-soft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
}
.dash .card-soft strong {
    flex: 1 1 200px;
}
/* btn-text ? ?? ???? btn-primary ?? ??? */
.dash .card-soft .btn-text {
    background: var(--color-accent);
    color: #fff !important;
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-5);
    font-weight: 600;
    flex-shrink: 0;
    border-color: var(--color-accent);
}
.dash .card-soft .btn-text:hover {
    background: var(--color-accent-deep);
    color: #fff !important;
}
@media (max-width: 480px) {
    .dash .card-soft {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: var(--space-3) var(--space-4) !important;  /* inline style 덮어씀 */
        gap: var(--space-2);
    }
    .dash .card-soft strong {
        font-size: var(--text-base);
        flex: 0 0 auto;
    }
    .dash .card-soft .btn-text {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
    /* inline padding 있는 보조 카드(지난 분석 이어가기 등)도 같이 컴팩트 */
    .dash .card-soft p {
        font-size: var(--text-xs) !important;
    }
}
/* === MOBILE_RESUME_BUTTON_FIX ? === */

/* === ACTIVE_SESSION_CARD_SUBTLE_HIGHLIGHT (2026-05-08) === */
/* ?? ?? ???? ?? ? ?? ?? ???? ?? ????, ? ??? ?? */
.dash .card-soft:has(a[href*="session_active.php"]) {
    background: var(--color-surface-soft);
}
/* ? ???? (:has ???) ? ??? .card-soft ?? ???? ?? */
/* === ACTIVE_SESSION_CARD_SUBTLE_HIGHLIGHT ? === */

/* === ACTIVE_SESSION_HIGHLIGHT (2026-05-08, ?? ???) === */
/* ?? ? ???? ?? ? ?? ?? ???? ?? ????? */
.dash .card-soft {
    /* 왼쪽 색선 제거 — 부드러운 카드 디자인 */
}
/* === ACTIVE_SESSION_HIGHLIGHT ? === */

/* === ACTIVE_SESSION_CARD_V2 (2026-05-08) — 라인 없이 부드러운 강조 === */
/* 대시보드에서 진행 중 분석상담 카드만 — :has() 로 active session 링크가 든 카드 식별 */
@supports (selector(:has(*))) {
    .dash .card-soft:has(a[href*="prepare.php"]),
    .dash .card-soft:has(a[href*="session_active.php"]) {
        background: var(--color-bg-soft);
        box-shadow: 0 2px 8px rgba(168, 118, 66, 0.12);
        border: 1px solid var(--color-border-soft);
    }
    .dash .card-soft:has(a[href*="prepare.php"]) strong,
    .dash .card-soft:has(a[href*="session_active.php"]) strong {
        color: var(--color-accent-deep);
        font-size: 1.05em;
    }
    .dash .card-soft:has(a[href*="prepare.php"]) .btn-text,
    .dash .card-soft:has(a[href*="session_active.php"]) .btn-text {
        background: var(--color-accent);
        color: #fff !important;
        border-radius: var(--radius-full);
        padding: var(--space-2) var(--space-4);
        font-weight: 600;
        border-color: var(--color-accent);
    }
    .dash .card-soft:has(a[href*="prepare.php"]) .btn-text:hover,
    .dash .card-soft:has(a[href*="session_active.php"]) .btn-text:hover {
        background: var(--color-accent-deep);
        color: #fff !important;
    }
}
/* === ACTIVE_SESSION_CARD_V2 끝 === */