/* AlphaNote 디자인 시스템 — 모든 페이지가 먼저 불러오는 공통 토큰·헤더·버튼.
   페이지 CSS는 이 파일 다음에 로드되고, 색·간격은 여기 토큰만 쓴다.
   공통 헤더 마크업은 templates/fragments/layout.html. */

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

:root {
    color-scheme: dark;

    /* 표면: 뒤에서 앞으로 */
    --bg:            #0b0d12;
    --surface:       #13161d;
    --surface2:      #1a1e27;
    --surface3:      #232835;
    --border:        #242a36;
    --border-strong: #343b4b;

    /* 글자 */
    --text:   #eceef4;
    --text-2: #b6bccb;
    --muted:  #7f8799;

    /* 브랜드 — 상태색(초록·주황·빨강)과 겹치지 않는 보라 */
    --accent:       #8b7bff;
    --accent-hover: #a194ff;
    --accent-soft:  rgba(139, 123, 255, .14);
    --accent-line:  rgba(139, 123, 255, .45);
    --on-accent:    #ffffff;

    /* 상태 */
    --good: #34d399;  --good-soft: rgba(52, 211, 153, .12);
    --warn: #fbbf24;  --warn-soft: rgba(251, 191, 36, .12);
    --bad:  #f87171;  --bad-soft:  rgba(248, 113, 113, .12);

    /* 공포·탐욕 5구간 (극단적 공포 → 극단적 탐욕) */
    --fg-0: #ef4444;
    --fg-1: #f97316;
    --fg-2: #eab308;
    --fg-3: #84cc16;
    --fg-4: #22c55e;

    /* 예전 이름 — 페이지 CSS 호환용 */
    --blue:   var(--accent);
    --green:  var(--good);
    --red:    var(--bad);
    --orange: #fb923c;
    --yellow: var(--warn);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius:    12px;
    --radius-lg: 16px;

    /* 글자 크기 */
    --fs-xs:      .75rem;
    --fs-sm:      .86rem;
    --fs-md:      1rem;
    --fs-lg:      1.15rem;
    --fs-xl:      1.5rem;
    --fs-display: 2.6rem;

    /* 간격(4px 단위) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;

    --shadow:    0 1px 0 rgba(255, 255, 255, .03) inset, 0 16px 40px -24px rgba(0, 0, 0, .8);
    --header-h:  56px;
    --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Malgun Gothic", sans-serif;
}

html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ── 헤더 ─────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    padding: 0 24px;
    background: rgba(11, 13, 18, .86);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    color: var(--text);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
}
.brand-mark { width: 26px; height: 26px; display: block; }

.top-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.top-nav a {
    position: relative;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background .15s;
}
.top-nav a:hover { color: var(--text); background: var(--surface2); }
.top-nav a.active { color: var(--text); font-weight: 600; }
.top-nav a.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -10px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.header-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-link {
    color: var(--muted);
    font-size: .84rem;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.header-link:hover { color: var(--text); background: var(--surface2); }

/* ── 푸터 ─────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 22px 24px 30px;
    color: var(--muted);
    font-size: .8rem;
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--surface3); border-color: var(--accent-line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface2); border-color: transparent; color: var(--text); }

.btn-danger { background: var(--bad-soft); border-color: rgba(248, 113, 113, .35); color: #fecaca; }
.btn-danger:hover { background: rgba(248, 113, 113, .2); border-color: var(--bad); color: #fff; }

.btn-sm { height: 30px; padding: 0 11px; border-radius: var(--radius-sm); font-size: .8rem; }

/* ── 카드 ─────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card-label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── 상태 표시 ────────────────────────────────────── */
.level-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.level-pill.level-green { color: var(--good); background: var(--good-soft); }
.level-pill.level-amber { color: var(--warn); background: var(--warn-soft); }
.level-pill.level-red   { color: var(--bad);  background: var(--bad-soft); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.level-green .dot, .dot.level-green { background: var(--good); }
.level-amber .dot, .dot.level-amber { background: var(--warn); }
.level-red   .dot, .dot.level-red   { background: var(--bad); }

/* ── 헤더: '+ 오늘 일지'와 아이콘 링크 ───────────────── */
.header-cta .cta-short, .header-cta .cta-plus { display: none; }
.header-icon { display: inline-flex; align-items: center; gap: 6px; }
.header-icon svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
span.brand { cursor: default; }
.site-footer-note { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); }

/* ── 세션 만료 배너 ───────────────────────────────── */
.session-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 700; /* 헤더(200)·모달(600)보다 위 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-3);
    padding: 10px var(--sp-4);
    /* 반투명 --warn-soft 아래에 --bg를 깔아 뒤의 내용이 비치지 않게 */
    background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--bg);
    border-bottom: 1px solid var(--warn);
    color: var(--text);
    font-size: var(--fs-sm);
    text-align: center;
}
.session-banner-link { color: var(--warn); font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ── 토스트 ───────────────────────────────────────── */
.toast-stack {
    position: fixed;
    right: var(--sp-6);
    bottom: var(--sp-6);
    z-index: 650; /* 모달 위, 세션 배너 아래 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 10px 10px 14px;
    background: var(--surface3);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: var(--fs-sm);
    animation: an-toast-in .18s ease-out;
    transition: opacity .18s, transform .18s;
}
.toast.is-success { border-left-color: var(--good); }
.toast.is-error   { border-left-color: var(--bad); background: var(--surface3); }
.toast.is-error .toast-msg { color: var(--bad); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
.toast-msg { flex: 1; min-width: 0; }
.toast-action {
    flex-shrink: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-hover);
    font-weight: 700;
    cursor: pointer;
}
.toast-action:hover { background: var(--accent-soft); }
/* files.html 업로드 토스트의 .toast-close와 겹치지 않게 an- 접두어를 쓴다 */
.an-toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.an-toast-close:hover { color: var(--text); background: var(--surface2); }
@keyframes an-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 모달·확인 창 ─────────────────────────────────── */
.an-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(0, 0, 0, .6);
    animation: an-fade-in .15s ease-out;
}
.an-modal {
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .9);
    outline: none;
}
.an-modal.is-wide { width: min(720px, 100%); }
.an-modal-title {
    padding: var(--sp-5) var(--sp-5) 0;
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.35;
}
.an-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-5) var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-sm);
}
.an-modal-text { white-space: pre-line; }
.an-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: 0 var(--sp-5) var(--sp-5);
}
@keyframes an-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 입력 ─────────────────────────────────────────── */
.an-input {
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-3);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    outline: none;
    transition: border-color .15s;
}
.an-input:focus, .an-input:focus-visible { border-color: var(--accent); outline: none; }
.an-input::placeholder { color: var(--muted); }

/* ── 빈 상태 ──────────────────────────────────────── */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
}
.empty-title { color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.empty-text { max-width: 420px; color: var(--muted); font-size: var(--fs-sm); }
.empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

/* ── 로딩 자리 ────────────────────────────────────── */
.skeleton {
    display: block;
    min-height: 1em;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    color: transparent;
    animation: an-skeleton 1.4s ease-in-out infinite alternate;
}
@keyframes an-skeleton { from { background: var(--surface2); } to { background: var(--surface3); } }

/* ── 선택 칩(결정 등) ─────────────────────────────── */
.choice-group { display: flex; flex-wrap: wrap; gap: 6px; }
.choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-2);
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.choice:hover { border-color: var(--accent-line); color: var(--text); }
.choice.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 700; }
.choice-badge { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }

/* ── 모바일 ───────────────────────────────────────── */
@media (max-width: 640px) {
    .site-header { padding: 0 12px; }
    .header-inner { gap: 10px; }
    .brand-name { display: none; }
    .brand-name.keep { display: inline; }
    .top-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px; /* '홈'처럼 짧은 메뉴도 손가락 대상 40px 이상 */
        min-height: 44px;
        padding: 12px 9px;
        font-size: .9rem;
    }
    .top-nav a.active::after { left: 9px; right: 9px; bottom: -6px; }
    .header-end { gap: 6px; }
    .header-link { padding: 6px 6px; }
    /* 보이는 높이는 36px, 위아래 투명 영역으로 터치 높이 44px */
    .header-cta { position: relative; height: 36px; padding: 0 10px; }
    .header-cta::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
    .header-cta .cta-long { display: none; }
    .header-cta .cta-short { display: inline; }
    .header-icon { min-width: 44px; min-height: 44px; justify-content: center; }
    .header-icon .label { display: none; }
    .site-footer { padding: 18px 16px 26px; }

    .toast-stack { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); align-items: center; }
    .toast { width: 100%; max-width: none; }

    .an-overlay { align-items: flex-end; padding: 0; }
    .an-modal, .an-modal.is-wide {
        width: 100%;
        max-height: 85vh;
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: an-sheet-in .2s ease-out;
    }
    .an-modal-actions { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
    .an-modal-actions .btn { flex: 1; height: 44px; }

    .an-input { height: 44px; font-size: 16px; } /* iOS 확대 방지 */
    .choice { height: 44px; }
}

/* 좁은 폰(≤420px — 360·384·412px 갤럭시): 메뉴 5개(비서 추가)를 한 줄에 두면서 메뉴마다 손가락 대상 40px 이상(높이 44px).
   자리를 내려고 '+ 일지'는 '+'만 보이고(화면 읽기는 '+ 일지' 그대로) 바깥 여백·간격을 줄인다 — 360px에서도 가로 넘침 없음 */
@media (max-width: 420px) {
    .site-header { padding: 0 8px; }
    .header-inner { gap: 4px; }
    .top-nav { gap: 0; }
    .top-nav a { padding-left: 5px; padding-right: 5px; }
    .top-nav a.active::after { left: 8px; right: 8px; }
    .header-end { gap: 4px; }
    .header-cta { width: 36px; padding: 0; font-size: 1.1rem; }
    .header-cta::after { left: -4px; right: -4px; }
    .header-cta .cta-plus { display: inline; }
    .header-cta .cta-short {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@keyframes an-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    .toast, .an-overlay, .an-modal { animation: none; }
}