/* ==========================================================================
   금융 도구 — 공용 스타일시트
   모든 HTML 페이지가 이 파일 하나를 씁니다. 색·타이포·간격은 여기서만 고칩니다.

   디자인 시스템: shadcn/ui 기본값을 따릅니다.
   - 중성 회색(zinc) 팔레트 + 파랑 강조색, radius 14px, 은은한 층 그림자
   - 버튼은 solid / outline / ghost 세 가지 변형
   - 색은 데이터에만 씁니다: 종목 시리즈(--s1~3), 손익(--pos/--neg), 링크
   ========================================================================== */

:root {
    /* 표면 */
    --bg:          #FFFFFF;
    --bg-page:     #FAFAFA;   /* 페이지 바탕 — 흰 카드가 떠 보이도록 */
    --surface:     #F4F4F5;   /* muted — 표 헤더, 탭 트랙 */
    --surface-2:   #FAFAFA;   /* hover */
    /* 글자 */
    --ink:         #09090B;   /* foreground */
    --ink-2:       #3F3F46;
    --ink-3:       #71717A;   /* muted-foreground */
    /* 기본 동작 = 검정 solid 버튼 */
    --primary:     #18181B;
    --primary-h:   #27272A;
    --primary-fg:  #FAFAFA;
    /* 링크·포커스 */
    --accent:      #2563EB;
    --accent-s:    #EFF6FF;   /* 강조색 연한 배경 */
    --accent-b:    #BFDBFE;
    --ring:        #93B4F7;
    /* 손익 */
    --pos:         #15803D;
    --neg:         #DC2626;
    /* 종목 시리즈 A·B·C — 마크업·차트·범례가 같은 값을 씁니다 */
    --s1:          #0071E3;
    --s2:          #FF9500;
    --s3:          #6E3FD3;
    /* 선 */
    --border:      #E4E4E7;
    --border-2:    #D4D4D8;
    /* 그림자 — 떠 있는 요소에만. 평면 요소는 테두리로 구분합니다 */
    --sh-sm: 0 1px 2px rgba(9,9,11,0.04), 0 1px 3px rgba(9,9,11,0.05);
    --sh-md: 0 12px 28px rgba(9,9,11,0.10), 0 4px 10px rgba(9,9,11,0.05);
    --sh-btn: 0 1px 2px rgba(9,9,11,0.18), 0 2px 6px rgba(9,9,11,0.12);
    --sh-lift: 0 4px 12px rgba(9,9,11,0.08), 0 2px 4px rgba(9,9,11,0.05);
    /* 반경 — shadcn --radius: 0.5rem */
    --r:      14px;   /* 카드·표·팝오버 */
    --r-sm:   10px;   /* 입력창·작은 버튼 */
    --r-pill: 999px;
    /* 아래는 테마(기본/리소)가 갈아끼우는 값들입니다.
       [data-theme] 블록은 이 파일 맨 아래 "테마 모드" 절에 있습니다. */
    --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
            system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-display: inherit;   /* 제목용 — 기본 테마는 본문과 같은 서체 */
    --font-num:     inherit;   /* 숫자용 — 테마가 갈아끼울 자리 */
    --nav-bg:    rgba(250,250,250,0.82);
    --s2-ink:    #B36A00;      /* 주황 시리즈를 글자색으로 쓸 때(배경 대비 확보) */
    --sym-focus: rgba(161,161,170,0.28);
    --btn-grad:   linear-gradient(180deg, #2B2B30 0%, var(--primary) 100%);
    --btn-grad-h: linear-gradient(180deg, #3A3A41 0%, var(--primary-h) 100%);
    --bar-grad:   linear-gradient(135deg, #3B82F6 0%, var(--accent) 100%);
    /* 차트(JS)가 getComputedStyle 로 읽어갑니다 — chartColors() 참고 */
    --chart-grid: #E3E3E6;
    --chart-tick: #6E6E73;
    --chart-dim:  #C7C7CC;
}

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

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

body {
    font-family: var(--font);
    background: var(--bg-page);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); }

/* 포커스 링 — shadcn: 2px ring + 2px offset */
:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ── 버튼 ────────────────────────────────────────────────────────────────
   solid(.run-btn, .back-cta a) · outline(.period-btn, .add-sym-btn) ·
   ghost(.tip-btn). 높이 34~44px, radius 6~8px, 색 전환만 애니메이션합니다. */
.run-btn, .back-cta a, .period-btn, .add-sym-btn, .tip-btn, .chart-tab,
.main-tab-btn, .radio-group label {
    font-family: inherit; font-weight: 500;
    border-radius: var(--r-sm); cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s,
                box-shadow 0.18s, transform 0.12s;
}

/* solid */
.run-btn, .back-cta a {
    background: var(--btn-grad);
    color: var(--primary-fg); border: none;
    font-size: 0.9375rem; box-shadow: var(--sh-btn);
}
.run-btn:hover, .back-cta a:hover {
    background: var(--btn-grad-h);
    transform: translateY(-1px);
}
.run-btn:active, .back-cta a:active { transform: translateY(0); box-shadow: var(--sh-sm); }
.run-btn {
    width: 100%; margin-top: 1.5rem; padding: 0 1.25rem;
    height: 44px; border-radius: var(--r);
}
.run-btn:disabled { background: var(--surface); color: var(--ink-3); cursor: not-allowed;
    box-shadow: none; transform: none; }
.back-cta { margin-top: 3rem; }
.back-cta a {
    display: inline-flex; align-items: center; height: 44px;
    padding: 0 1.5rem; border-radius: var(--r); text-decoration: none;
}

/* outline */
.period-btn {
    height: 36px; padding: 0 1rem; border-radius: var(--r-pill);
    border: 1px solid var(--border-2); background: var(--bg);
    font-size: 0.875rem; color: var(--ink-2);
}
.period-btn:hover { background: var(--surface); color: var(--ink); }
.period-btn.active { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }

.add-sym-btn {
    width: 100%; margin-top: 1rem; height: 44px;
    border: 1px dashed var(--border-2); background: transparent;
    font-size: 0.9375rem; color: var(--ink-2);
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.add-sym-btn:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }

/* ghost */
.tip-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: 34px; padding: 0 0.75rem;
    border: none; background: transparent;
    font-size: 0.875rem; color: var(--ink-3); white-space: nowrap;
}
.tip-btn:hover { background: var(--surface); color: var(--ink); }

.remove-sym-btn {
    float: right; background: none; border: none; cursor: pointer;
    color: var(--ink-3); font-size: 0.875rem; line-height: 1;
    padding: 2px 5px; border-radius: 4px; transition: color 0.15s;
}
.remove-sym-btn:hover { color: var(--neg); }

/* ── 네비게이션 ─────────────────────────────────────────────────────────── */
.topnav {
    position: sticky; top: 0; z-index: 200;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 0.25rem;
    height: 56px; padding: 0 max(1.25rem, env(safe-area-inset-left));
}
.topnav-logo {
    font-size: 1rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none; margin-right: auto;
    display: inline-flex; align-items: center; gap: 0.45rem;
}
.topnav-link {
    font-size: 0.875rem; font-weight: 500; color: var(--ink-3);
    text-decoration: none; padding: 0.45rem 0.7rem; border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.topnav-link:hover { background: var(--surface); color: var(--ink); }

/* ── 레이아웃 ───────────────────────────────────────────────────────────── */
.page-wrap {
    flex: 1; width: 100%; margin: 0 auto;
    max-width: 1120px;
    padding: 3rem 1.5rem 6rem;
}
.page-wrap.narrow { max-width: 760px; }

.page-header { margin-bottom: 2.5rem; }
.header-badge {
    display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600;
    color: var(--accent); background: var(--accent-s);
    padding: 0.3rem 0.7rem; border-radius: var(--r-pill); margin-bottom: 0.875rem;
}
.page-header h1 {
    font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 700;
    letter-spacing: -0.033em; line-height: 1.1;
    color: var(--ink); margin-bottom: 0.75rem;
    text-wrap: balance;
}
.page-header p {
    color: var(--ink-3); font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6; max-width: 44em;
}
.page-header .updated { font-size: 0.875rem; color: var(--ink-3); margin-top: 1rem; }

/* ── 탭 (shadcn Tabs) ───────────────────────────────────────────────────
   회색 트랙 안에서 선택된 항목만 흰 카드로 떠오릅니다.
   메인 탭 · 투자 방식 · 차트 전환이 모두 같은 구조를 씁니다. */
.main-tabs, .radio-group, .chart-tabs {
    display: flex; gap: 2px; padding: 4px;
    background: var(--surface); border-radius: var(--r-pill);
}
.main-tab-btn, .radio-group label, .chart-tab { border-radius: var(--r-pill); }
.main-tabs { margin-bottom: 2rem; max-width: 400px; }

.main-tab-btn, .radio-group label, .chart-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    border: none; background: transparent;
    color: var(--ink-3); white-space: nowrap;
}
.main-tab-btn.active, .radio-group label.selected, .chart-tab.active {
    background: var(--bg); color: var(--ink); font-weight: 600;
    box-shadow: var(--sh-sm);
}
.main-tab-btn:hover:not(.active), .radio-group label:hover:not(.selected),
.chart-tab:hover:not(.active) { color: var(--ink); }

.main-tab-btn { height: 40px; padding: 0 1rem; font-size: 0.9375rem; }
.radio-group label { position: relative; height: 38px; padding: 0 0.75rem; font-size: 0.9375rem; }
/* 라디오는 숨기되 display:none 은 쓰지 않습니다 — 키보드 포커스를 잃습니다 */
.radio-group input[type=radio] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chart-tab { height: 32px; padding: 0 0.75rem; font-size: 0.875rem; }

.tool-panel { display: none; }
.tool-panel.active { display: block; }

/* ── 카드 ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r); padding: 1.5rem; margin-bottom: 1rem;
    box-shadow: var(--sh-sm);
}
.card-title {
    font-size: 1rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 1.25rem;
}
.card-title-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.card-title-row .card-title { margin-bottom: 0; }
.section-divider { height: 1px; background: var(--border); margin: 1.25rem -1.5rem; }

/* ── 폼 (shadcn Input) ──────────────────────────────────────────────────── */
.form-rows { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.input-label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }

/* ── 단계 표시 ────────────────────────────────────────────────────────────
   폼이 스스로 순서를 말합니다 — 배너도, 투어도, 닫아야 할 것도 없습니다.
   토큰만 쓰므로 리소에서는 각진 잉크 칩으로 알아서 바뀝니다. */
.input-label.step { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; flex-shrink: 0;
    background: var(--primary); color: var(--primary-fg);
    border-radius: var(--r-pill);
    font-size: 0.6875rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* 번호가 없는 이유를 눈에 보이게 — 날짜는 단계가 아니라 선택 사항입니다 */
.step-opt {
    display: inline-flex; align-items: center;
    height: 19px; padding: 0 0.45rem; flex-shrink: 0;
    border: 1px solid var(--border-2); color: var(--ink-3);
    border-radius: var(--r-pill);
    font-size: 0.6875rem; font-weight: 500; line-height: 1;
}

/* 입력 글자는 16px 미만으로 내리지 마세요 — iOS Safari가 포커스 시 확대합니다 */
.input-field, .sym-input {
    width: 100%; height: 42px; padding: 0 0.75rem;
    font-family: inherit; font-size: 1rem; color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sym-input { font-weight: 600; }
.input-field:focus, .sym-input:focus {
    outline: none; border-color: var(--ink-3);
    box-shadow: 0 0 0 3px var(--sym-focus);
}
.error-msg { font-size: 0.8125rem; color: var(--neg); }

/* ── 종목 입력 ──────────────────────────────────────────────────────────── */
.sym-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.sym-grid.has-c { grid-template-columns: repeat(3, 1fr); }
.sym-block {
    background: var(--surface); border-radius: var(--r);
    padding: 0.875rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.sym-block.c { animation: slideIn 0.2s ease-out; }
.sym-label {
    font-size: 0.8125rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.sym-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sym-block.a .sym-label { color: var(--s1); }
.sym-block.a .sym-label::before { background: var(--s1); }
.sym-block.b .sym-label { color: var(--s2-ink); }
.sym-block.b .sym-label::before { background: var(--s2); }
.sym-block.c .sym-label { color: var(--s3); }
.sym-block.c .sym-label::before { background: var(--s3); }
.sym-name-tag {
    font-size: 0.8125rem; color: var(--ink-3);
    min-height: 1.2em; padding: 0 0.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── 한국 종목 자동완성 ─────────────────────────────────────────────────── */
.sym-input-wrap { position: relative; }
.sym-autocomplete {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh-md);
    max-height: 260px; overflow-y: auto; padding: 4px;
}
.sym-autocomplete.show { display: block; }
.sym-autocomplete-item {
    padding: 0.5rem 0.625rem; font-size: 0.9375rem; cursor: pointer;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.sym-autocomplete-item:hover { background: var(--surface); }
.sym-autocomplete-item .ac-name { color: var(--ink); font-weight: 500; }
.sym-autocomplete-item .ac-ticker { color: var(--ink-3); font-size: 0.8125rem; white-space: nowrap; }

/* ── 금액 · 기간 ────────────────────────────────────────────────────────── */
.amount-row { display: flex; align-items: flex-end; gap: 0.625rem; }
.amount-row .input-group { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.amount-unit { font-size: 0.9375rem; color: var(--ink-3); padding-bottom: 0.7rem; white-space: nowrap; }
.period-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.date-picker-wrap { display: flex; flex-direction: column; gap: 0.5rem; }

/* 넓은 화면에서는 2열로 접습니다 — 1열로 쌓으면 "비교 시작"이 한 화면을
   넘어가고 숫자 입력창이 1000px까지 늘어납니다. 순서: 투자방식·금액 /
   기간·날짜. 에러 메시지만 두 열을 가로지릅니다. */
@media (min-width: 768px) {
    .form-rows {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1.5rem; align-items: start;
    }
    .form-rows .error-msg { grid-column: 1 / -1; }
}

.status-box { text-align: center; padding: 3rem 1rem; color: var(--ink-3); font-size: 0.9375rem; }
.status-box.error { color: var(--neg); }

/* ── 결과 요약 카드 ─────────────────────────────────────────────────────── */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.summary-grid.has-c { grid-template-columns: repeat(3, 1fr); }
.summary-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.summary-card:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }
/* 승자 강조는 그 종목의 시리즈 색을 씁니다 — 고정 파랑을 쓰면 B(주황)가
   이겼을 때 옆 카드의 A(파랑)와 색이 겹쳐 누가 이겼는지 헷갈립니다. */
.summary-card.a, .comp-card.a { --win: var(--s1); --win-fg: #fff; }
.summary-card.b, .comp-card.b { --win: var(--s2); --win-fg: #241A00; }  /* 밝은 주황 위 흰 글씨는 대비가 안 나옵니다 */
.summary-card.c, .comp-card.c { --win: var(--s3); --win-fg: #fff; }
.summary-card.winner { border-color: var(--win); box-shadow: 0 0 0 1px var(--win), var(--sh-sm); }
.summary-card.winner .summary-card-header { background: color-mix(in srgb, var(--win) 7%, var(--bg)); }
.summary-card-header { position: relative; padding: 1.125rem 1.25rem 1rem; }
.summary-sym {
    font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
    display: inline-flex; align-items: center; gap: 0.45rem;
}
.summary-sym::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.summary-card.a .summary-sym::before { background: var(--s1); }
.summary-card.b .summary-sym::before { background: var(--s2); }
.summary-card.c .summary-sym::before { background: var(--s3); }
.summary-corp {
    font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#badge-a, #badge-b, #badge-c { position: absolute; top: 1rem; right: 1rem; }
.summary-badge, .comp-card-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; font-weight: 500;
    background: var(--win, var(--accent)); color: var(--win-fg, #fff);
    padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
}
.summary-hero { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.875rem; flex-wrap: wrap; }
.summary-hero-num {
    font-size: clamp(1.625rem, 4.5vw, 2.25rem); font-weight: 600;
    letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.summary-hero-num.pos { color: var(--pos); }
.summary-hero-num.neg { color: var(--neg); }
.summary-hero-label { font-size: 0.8125rem; color: var(--ink-3); }
.summary-metrics {
    padding: 0.875rem 1.25rem 1.125rem; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.summary-metric { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.summary-metric-label { font-size: 0.875rem; color: var(--ink-3); }
.summary-metric-value {
    font-size: 0.9375rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: right;
}
.summary-metric-value.pos { color: var(--pos); }
.summary-metric-value.neg { color: var(--neg); }
.summary-metric-value.muted { color: var(--ink-2); font-weight: 400; }

/* ── 차트 ───────────────────────────────────────────────────────────────── */
.chart-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.chart-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.chart-wrap { position: relative; height: 340px; }
.chart-legend { display: flex; gap: 1.25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--ink-2); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── 비교표 (shadcn Table) ──────────────────────────────────────────────── */
.comp-table-wrap {
    background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.comp-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.comp-table thead tr { background: var(--surface); }
.comp-table th {
    text-align: right; height: 44px; padding: 0 0.875rem;
    font-size: 0.8125rem; font-weight: 500; color: var(--ink-3);
    white-space: nowrap; border-bottom: 1px solid var(--border);
}
.comp-table th:first-child { text-align: left; }
.comp-table td {
    padding: 0.75rem 0.875rem; text-align: right;
    border-bottom: 1px solid var(--border);
}
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table td:first-child { text-align: left; color: var(--ink-2); }
.comp-table td:not(:first-child) { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.comp-table tbody tr:hover { background: var(--surface-2); }
.comp-table .diff.pos { color: var(--pos); }
.comp-table .diff.neg { color: var(--neg); }
.comp-table .sym-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
#tc-period { white-space: normal; line-height: 1.5; }

/* ── 비교표의 좁은 화면 카드 뷰 ────────────────────────────────────────────
   640px 이하에서만 나타납니다. renderCompCards() 가 내용을 채웁니다. */
.comp-cards { display: none; flex-direction: column; gap: 0.75rem; }
.comp-cards-period { display: none; font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.875rem; }
.comp-card {
    background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 1rem 1.125rem; box-shadow: var(--sh-sm);
}
.comp-card.winner { border-color: var(--win); background: color-mix(in srgb, var(--win) 7%, var(--bg)); box-shadow: 0 0 0 1px var(--win); }
.comp-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.875rem;
}
.comp-card-sym {
    font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
    display: inline-flex; align-items: center; gap: 0.45rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comp-card-sym::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.comp-card.a .comp-card-sym::before { background: var(--s1); }
.comp-card.b .comp-card-sym::before { background: var(--s2); }
.comp-card.c .comp-card-sym::before { background: var(--s3); }
.comp-card-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.comp-card-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.comp-card-rows dt { font-size: 0.875rem; color: var(--ink-3); }
.comp-card-rows dd {
    font-size: 0.9375rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: right;
}
.comp-card-rows dd.pos { color: var(--pos); }
.comp-card-rows dd.neg { color: var(--neg); }

/* ── 복리 계산기 ────────────────────────────────────────────────────────── */
/* 값 칸은 가장 긴 문자열("₩5,000만 (월 ₩417만)")을 담을 만큼 고정 폭이어야
   네 행의 트랙 길이가 같아집니다. 행 전체 폭도 묶어 트랙이 화면 끝까지
   늘어나 라벨과 값이 멀어지는 것을 막습니다. */
.slider-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; max-width: 720px; }
.slider-row:last-of-type { margin-bottom: 0; }
.slider-label { font-size: 0.9375rem; color: var(--ink-2); width: 130px; flex-shrink: 0; }
.slider-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--primary); cursor: pointer; height: 28px; }
.slider-value {
    font-size: 1rem; font-weight: 600; color: var(--ink);
    width: 190px; flex-shrink: 0; text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.stats-grid { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.stats-grid.four { grid-template-columns: repeat(4, 1fr); }
.stat-box {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r); padding: 0.875rem 1rem; box-shadow: var(--sh-sm);
}
.stat-label { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 0.35rem; white-space: nowrap; }
.stat-value {
    font-size: 1.1875rem; font-weight: 600; color: var(--ink);
    letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.stat-value.blue { color: var(--accent); }
.progress-wrap {
    display: flex; border-radius: var(--r); overflow: hidden;
    height: 36px; margin-top: 1.5rem; font-size: 0.875rem; font-weight: 500;
}
.progress-profit {
    display: flex; align-items: center; justify-content: center;
    background: var(--bar-grad);
    color: #fff; min-width: 64px; transition: width 0.3s ease;
}
.progress-principal {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--ink-2); flex: 1;
}

/* ── 도구 설명 배너 ─────────────────────────────────────────────────────── */
.tool-desc-banner { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.tool-desc-item {
    flex: 1; min-width: 260px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem;
    box-shadow: var(--sh-sm);
}
.tool-desc-item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.tool-desc-item-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: var(--accent-s); color: var(--accent);
}
.tool-desc-item-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tool-desc-item-body { font-size: 0.9375rem; color: var(--ink-3); line-height: 1.7; }

/* ── 면책 바 ────────────────────────────────────────────────────────────── */
.disclaimer-bar {
    display: flex; align-items: flex-start; gap: 0.6rem;
    background: var(--accent-s); color: var(--ink-2); border-radius: var(--r);
    padding: 0.875rem 1rem; margin-top: 1.25rem;
    font-size: 0.875rem; color: var(--ink-2); line-height: 1.6;
}
.disclaimer-bar-icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* ── 팁 팝업 (shadcn Popover) ───────────────────────────────────────────── */
.tip-popup-wrap { position: relative; }
.tip-popup {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
    width: min(380px, calc(100vw - 3rem));
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh-md); overflow: hidden;
    animation: tipIn 0.15s ease-out;
}
.tip-popup.open { display: block; }
@keyframes tipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tip-popup-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
}
.tip-popup-head-label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.tip-close {
    background: none; border: none; cursor: pointer; color: var(--ink-3);
    font-size: 1rem; line-height: 1; padding: 4px 6px; border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.tip-close:hover { background: var(--surface); color: var(--ink); }
.tip-popup-body { padding: 0.875rem 1rem 1rem; }
.tip-popup-body ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.tip-popup-body li {
    font-size: 0.875rem; color: var(--ink-2); line-height: 1.65;
    padding-left: 0.9rem; position: relative;
}
.tip-popup-body li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--border-2);
}
.tip-popup-body li strong { color: var(--ink); font-weight: 600; }
.tip-popup-body li code, .prose-section code, .seo-prose code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    background: var(--surface); color: var(--ink); padding: 2px 5px;
    border-radius: 4px; font-size: 0.85em;
}
.tip-example { margin-top: 0.875rem; padding: 0.75rem 0.875rem; background: var(--surface); border-radius: var(--r-sm); }
.tip-example-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); margin-bottom: 0.5rem; }
.tip-example-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tip-tag {
    font-size: 0.8125rem; font-weight: 600; padding: 0.2rem 0.55rem;
    border-radius: 4px; background: var(--bg); border: 1px solid var(--border-2); color: var(--ink-2);
}
.tip-tag.a { border-color: var(--s1); color: var(--s1); }
.tip-tag.b { border-color: var(--s2); color: var(--s2-ink); }
.tip-tag.c { border-color: var(--s3); color: var(--s3); }

/* ── 하단 해설 아코디언 (index.html) ────────────────────────────────────
   <details>/<summary> 네이티브. JS 없음. 기본은 접힌 상태입니다. */
.seo-prose-heading {
    font-size: 1rem; font-weight: 600; color: var(--ink-3);
    letter-spacing: -0.02em; margin-bottom: 0.5rem;
}
details.seo-prose-section { border-bottom: 1px solid var(--border); }
details.seo-prose-section > summary {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.125rem 0; cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent;
}
details.seo-prose-section > summary::-webkit-details-marker { display: none; }
details.seo-prose-section > summary > h2 {
    flex: 1; margin-bottom: 0;
    font-size: clamp(1rem, 2.2vw, 1.125rem); font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.4;
}
details.seo-prose-section > summary::after {
    content: ''; flex-shrink: 0; width: 9px; height: 9px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    border-radius: 1px; transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}
details.seo-prose-section[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.seo-prose-section > summary:hover > h2 { color: var(--accent); }
details.seo-prose-section[open] > summary > h2 { font-weight: 600; }
details.seo-prose-section > *:not(summary) { animation: detailsIn 0.2s ease both; }
details.seo-prose-section[open] > *:last-child { padding-bottom: 1.25rem; }
@keyframes detailsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── 본문(가이드·소개·방침·하단 해설) ────────────────────────────────────── */
.prose, .seo-prose { display: flex; flex-direction: column; gap: 2.75rem; }
.seo-prose { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid var(--border); }

.prose-section h2, .seo-prose h2 {
    font-size: clamp(1.375rem, 3vw, 1.6875rem); font-weight: 600;
    letter-spacing: -0.03em; line-height: 1.25; color: var(--ink);
    margin-bottom: 1rem; text-wrap: balance;
}
.prose-section p, .seo-prose p {
    font-size: 1.0625rem; color: var(--ink-2); line-height: 1.8; margin-bottom: 1rem;
}
.prose-section p:last-child, .seo-prose p:last-child { margin-bottom: 0; }
.prose-section ul, .seo-prose ul {
    list-style: none; padding: 0; margin: 0.75rem 0 1rem;
    display: flex; flex-direction: column; gap: 0.65rem;
}
.prose-section li, .seo-prose li {
    font-size: 1.0625rem; color: var(--ink-2); line-height: 1.75;
    padding-left: 1.1rem; position: relative;
}
.prose-section li::before, .seo-prose li::before {
    content: ''; position: absolute; left: 0.1rem; top: 0.72em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--border-2);
}
.prose-section strong, .seo-prose strong { color: var(--ink); font-weight: 600; }
.prose-section a, .seo-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose-section a:hover, .seo-prose a:hover { color: var(--ink); }

.highlight-box {
    background: var(--surface); border-radius: var(--r);
    padding: 1.125rem 1.25rem; margin-top: 1rem;
}
.highlight-box p { font-size: 1rem !important; margin-bottom: 0 !important; }

.faq-item { border-top: 1px solid var(--border); padding: 1.375rem 0; }
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-q { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.5rem; }
.faq-a { font-size: 1rem; color: var(--ink-2); line-height: 1.75; }

/* ── 글 목록 (posts/index.html) ─────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 0; }
.post-card {
    display: block; text-decoration: none; color: inherit;
    padding: 1.5rem 1rem; margin: 0 -1rem;
    border-top: 1px solid var(--border); border-radius: var(--r);
    transition: background 0.15s;
}
.post-card:hover { background: var(--surface); }
.post-card:first-child { border-top: none; }
.post-card:hover .post-card-title { color: var(--accent); }
.post-card-tag { font-size: 0.8125rem; font-weight: 600; color: var(--accent); margin-bottom: 0.4rem; }
.post-card-title {
    font-size: clamp(1.125rem, 2.5vw, 1.3125rem); font-weight: 600;
    letter-spacing: -0.025em; line-height: 1.35; color: var(--ink);
    margin-bottom: 0.5rem; text-wrap: balance; transition: color 0.15s;
}
.post-card-desc { font-size: 1rem; color: var(--ink-2); line-height: 1.65; }
.post-card-stat {
    display: inline-block; margin-top: 0.75rem;
    font-size: 0.8125rem; font-weight: 500; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border); padding: 0.25rem 0.625rem; border-radius: var(--r-sm);
}

/* ── 푸터 ───────────────────────────────────────────────────────────────── */
.page-footer {
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 2rem max(1.5rem, env(safe-area-inset-left));
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.footer-brand {
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink-2); text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.footer-copy { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.7; }
.footer-copy a { color: var(--ink-3); text-decoration: none; }
.footer-copy a:hover { color: var(--ink); text-decoration: underline; }

/* ── Flatpickr 테마 ─────────────────────────────────────────────────────── */
.flatpickr-calendar {
    font-family: inherit !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-md) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg) !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--primary) !important; border-color: var(--primary) !important;
}
.flatpickr-day.inRange {
    background: var(--surface) !important; border-color: transparent !important;
    color: var(--ink) !important;
    box-shadow: -5px 0 0 var(--surface), 5px 0 0 var(--surface) !important;
}
.flatpickr-day:hover:not(.selected) { background: var(--surface) !important; border-color: var(--border) !important; }
.flatpickr-months .flatpickr-month { background: transparent !important; }
.flatpickr-day.today:not(.selected) { border-color: var(--ink-3) !important; font-weight: 600; }

/* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .page-wrap { padding: 2.5rem 1.25rem 4rem; }
    .sym-grid.has-c { grid-template-columns: 1fr 1fr; }
    .summary-grid.has-c { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .topnav { gap: 0; padding: 0 0.75rem; overflow-x: auto; scrollbar-width: none; }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav-logo, .topnav-link { flex-shrink: 0; }
    .page-wrap { padding: 1.75rem 1.25rem 4rem; }
    .page-header { margin-bottom: 1.5rem; }
    .page-header p { font-size: 1rem; }
    .main-tabs { max-width: none; margin-bottom: 1.25rem; }
    .main-tab-btn { font-size: 0.875rem; padding: 0 0.5rem; }
    .main-tab-btn .tab-emoji { display: none; }
    .card { padding: 1.125rem; }
    .section-divider { margin-left: -1.125rem; margin-right: -1.125rem; }
    .sym-grid, .sym-grid.has-c { grid-template-columns: 1fr; }
    .summary-grid, .summary-grid.has-c { grid-template-columns: 1fr; }
    .chart-wrap { height: 280px; }
    .chart-header { align-items: stretch; flex-direction: column; }
    /* 표 대신 종목별 카드 */
    .comp-table-wrap { display: none; }
    .comp-cards { display: flex; }
    .comp-cards-period { display: block; }
    .stats-grid.four { grid-template-columns: 1fr 1fr; }
    .slider-row { flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-bottom: 1.25rem; }
    .slider-label { width: auto; flex: 1; order: 1; }
    .slider-value { width: auto; order: 2; }
    .slider-row input[type=range] { flex-basis: 100%; order: 3; }
    .prose, .seo-prose { gap: 2.25rem; }
    .seo-prose { margin-top: 3.5rem; padding-top: 2.5rem; }
    .prose-section p, .seo-prose p, .prose-section li, .seo-prose li { font-size: 1rem; }
    .page-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (max-width: 400px) {
    .stats-grid.four { grid-template-columns: 1fr; }
}

/* ── 모션 ───────────────────────────────────────────────────────────────── */
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body { animation: pageIn 0.3s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 아코디언은 테두리로 구분하므로 간격을 없앱니다 (위 .seo-prose 규칙보다 뒤여야 적용) */
.seo-prose { gap: 0; }
.seo-prose > details.seo-prose-section:first-of-type { border-top: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════════════════
   테마 모드 — 기본 / 터미널 / 리소
   theme.js 가 <html data-theme="..."> 를 첫 페인트 전에 세웁니다.
   여기서 바꾸는 것은 색·서체·테두리·그림자뿐이고 레이아웃은 세 모드가 같습니다.
   서체는 theme.js 가 활성 테마의 것만 jsDelivr(@fontsource)에서 불러옵니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 제목·숫자 전용 서체 자리 — 기본 테마에서는 inherit 이라 아무 효과도 없습니다 */
.page-header h1, .card-title, .chart-title, .summary-sym, .comp-card-sym, .prose-section h2 {
    font-family: var(--font-display);
}
.summary-hero-num, .stat-value, .slider-value, .summary-metric-value,
.comp-table td:not(:first-child), .comp-card-rows dd, .period-btn, .amount-unit {
    font-family: var(--font-num);
}

/* ── 리소 ───────────────────────────────────────────────────────────────── */
[data-theme="riso"] {
    --bg:          #F8F5EC;
    --bg-page:     #F2EEE1;
    --surface:     #E9E3D3;
    --surface-2:   #F0EBDD;
    --ink:         #16150F;
    --ink-2:       #3B382C;
    --ink-3:       #5A554A;
    --primary:     #16150F;
    --primary-h:   #2E2B20;
    --primary-fg:  #F8F5EC;
    --accent:      #1155DD;
    --accent-s:    #DCE7FA;
    --accent-b:    #1155DD;
    --ring:        #1155DD;
    --pos:         #0E7A3C;
    --neg:         #FF4A16;
    --s1:          #1155DD;
    --s2:          #FF4A16;
    --s3:          #7A3FD3;
    --s2-ink:      #D93A0C;
    --border:      #16150F;
    --border-2:    #16150F;
    --sh-sm:   3px 3px 0 #16150F;
    --sh-md:   7px 7px 0 #16150F;
    --sh-btn:  4px 4px 0 #16150F;
    --sh-lift: 7px 7px 0 #16150F;
    --r: 0px; --r-sm: 0px; --r-pill: 0px;
    --font-display: 'Black Han Sans', 'Pretendard Variable', sans-serif;
    --nav-bg:    #16150F;
    --sym-focus: rgba(17,85,221,0.25);
    --btn-grad:   var(--primary);
    --btn-grad-h: var(--primary-h);
    --bar-grad:   var(--accent);
    --chart-grid: #D8D2C0;
    --chart-tick: #5A554A;
    --chart-dim:  #A9A292;
}
/* 리소의 성격은 두꺼운 검정 테두리 + 흐림 없는 오프셋 그림자입니다 */
[data-theme="riso"] .card,
[data-theme="riso"] .summary-card,
[data-theme="riso"] .comp-card,
[data-theme="riso"] .stat-box,
[data-theme="riso"] .comp-table-wrap,
[data-theme="riso"] .input-field,
[data-theme="riso"] .sym-input,
[data-theme="riso"] .period-btn,
[data-theme="riso"] .add-sym-btn,
[data-theme="riso"] .tip-popup,
[data-theme="riso"] .theme-btn,
[data-theme="riso"] .theme-menu { border-width: 3px; }
[data-theme="riso"] .main-tabs,
[data-theme="riso"] .radio-group,
[data-theme="riso"] .chart-tabs { border: 3px solid var(--ink); padding: 3px; }
[data-theme="riso"] .page-header h1 { font-weight: 400; letter-spacing: -0.015em; }
[data-theme="riso"] .topnav { color: var(--primary-fg); }
[data-theme="riso"] .topnav-logo { color: var(--primary-fg); }
[data-theme="riso"] .topnav-link { color: #C9C4B4; }
[data-theme="riso"] .topnav-link:hover { background: #2E2B20; color: var(--primary-fg); }
[data-theme="riso"] .theme-btn { color: #C9C4B4; background: transparent; border-color: #4A463A; }
[data-theme="riso"] .theme-btn:hover { background: #2E2B20; color: var(--primary-fg); }
[data-theme="riso"] .summary-badge,
[data-theme="riso"] .comp-card-badge { border: 2px solid var(--ink); }

/* ── 테마 전환기 ─────────────────────────────────────────────────────────
   theme.js 가 .topnav 끝에 넣습니다. 팝오버는 카드와 같은 토큰을 씁니다. */
.theme-switch { position: relative; flex-shrink: 0; margin-left: 0.25rem; }
.theme-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: 34px; padding: 0 0.7rem;
    border: 1px solid var(--border-2); background: var(--bg);
    border-radius: var(--r-sm); cursor: pointer;
    font-family: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-btn:hover { background: var(--surface); color: var(--ink); }
.theme-btn svg { flex-shrink: 0; }
.theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
    min-width: 190px; padding: 4px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh-md);
    display: none; flex-direction: column; gap: 2px;
}
.theme-menu.show { display: flex; }
.theme-menu button {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
    width: 100%; padding: 0.5rem 0.65rem;
    border: none; background: none; border-radius: var(--r-sm); cursor: pointer;
    font-family: inherit; font-size: 0.875rem; color: var(--ink-2); text-align: left;
}
.theme-menu button:hover { background: var(--surface); color: var(--ink); }
.theme-menu button[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.theme-menu-desc { font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
@media (max-width: 560px) {
    .theme-btn-label { display: none; }
    .theme-btn { padding: 0 0.5rem; }
}

/* 리소의 주황(--s2)은 진한 주홍이라 흰 글씨가 맞습니다 */
[data-theme="riso"] .summary-card.b, [data-theme="riso"] .comp-card.b { --win-fg: #F8F5EC; }

/* ── 리소: 픽토그램 ───────────────────────────────────────────────────────
   리소를 표지판(signage) 언어로 한 단계 더 밉니다. 마크업은 건드리지 않고
   기존 아이콘·점의 그리기 방식만 바꿉니다: 둥근 끝 → 각진 끝, 얇은 선 →
   굵은 선, 원 → 모서리 없는 사각형. CSS 의 stroke-* 는 SVG presentation
   attribute 를 이깁니다. */

/* 모든 선 아이콘을 표지판 픽토그램처럼 — 굵게, 끝은 각지게, 꺾임은 뾰족하게 */
[data-theme="riso"] .topnav-logo svg,
[data-theme="riso"] .footer-brand svg,
[data-theme="riso"] .tab-emoji,
[data-theme="riso"] .tip-icon,
[data-theme="riso"] .disclaimer-bar-icon,
[data-theme="riso"] .tool-desc-item-icon svg,
[data-theme="riso"] .theme-btn svg {
    stroke-width: 3.25px;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* 경고 아이콘은 속을 채워 진짜 표지판으로 — 삼각형은 잉크, 안쪽 느낌표는 종이색 */
[data-theme="riso"] .disclaimer-bar-icon { color: var(--ink); }
[data-theme="riso"] .disclaimer-bar-icon path { fill: currentColor; stroke-width: 4px; }
[data-theme="riso"] .disclaimer-bar-icon line { stroke: var(--accent-s); stroke-width: 3px; }
[data-theme="riso"] .disclaimer-bar { border: 3px solid var(--ink); }

/* 도구 설명 아이콘은 잉크 블록에 종이색으로 뚫린 마크 */
[data-theme="riso"] .tool-desc-item-icon {
    background: var(--ink); color: var(--bg); border: 3px solid var(--ink);
}

/* 종목 표식: 원 → 잉크 테두리를 두른 사각형. box-shadow 로 둘러서 크기는 그대로 둡니다 */
[data-theme="riso"] .sym-dot,
[data-theme="riso"] .legend-dot,
[data-theme="riso"] .sym-label::before,
[data-theme="riso"] .summary-sym::before,
[data-theme="riso"] .comp-card-sym::before {
    border-radius: 0;
    box-shadow: 0 0 0 2px var(--ink);
}

/* 카드 제목 앞의 잉크 사각형 — 표지판의 항목 표식 */
[data-theme="riso"] .card-title,
[data-theme="riso"] .chart-title {
    display: flex; align-items: center; gap: 0.55rem;
}
[data-theme="riso"] .card-title::before,
[data-theme="riso"] .chart-title::before {
    content: ''; width: 13px; height: 13px; flex-shrink: 0;
    background: var(--ink);
}

/* 승자 배지에 채운 삼각형(▲) — 아이소타입식 표식 */
[data-theme="riso"] .summary-badge::before,
[data-theme="riso"] .comp-card-badge::before {
    content: ''; flex-shrink: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid currentColor;
}

/* 상단 배지도 물렁한 알약 대신 잉크로 두른 칩 */
[data-theme="riso"] .header-badge {
    border: 3px solid var(--accent); font-weight: 700;
}

/* 진행 바도 잉크로 두릅니다 — 리소에서 유일하게 테두리 없는 블록이었습니다 */
[data-theme="riso"] .progress-wrap { border: 3px solid var(--ink); }

/* ── 첫 방문 단계별 안내 (tour.js) ────────────────────────────────────────
   스포트라이트는 구멍 하나에 9999px 짜리 그림자를 둘러 만듭니다 — 오버레이
   네 장이나 SVG 마스크가 필요 없습니다. 좌표는 문서 기준이라 스크롤을 따라
   자연히 움직입니다. pointer-events 를 꺼서 안내 중에도 폼은 그대로 씁니다. */
.tour-hole {
    position: absolute; z-index: 400; pointer-events: none;
    border-radius: var(--r);
    box-shadow: 0 0 0 9999px rgba(9, 9, 11, 0.55);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-pop {
    position: absolute; z-index: 401;
    width: min(340px, calc(100vw - 2rem));
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--border); border-radius: var(--r);
    box-shadow: var(--sh-md);
    padding: 1rem 1.125rem 0.875rem;
}
.tour-count {
    font-size: 0.75rem; font-weight: 600; color: var(--ink-3);
    font-variant-numeric: tabular-nums; margin-bottom: 0.4rem;
}
.tour-title {
    font-family: var(--font-display);
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 0.4rem;
}
.tour-body { font-size: 0.875rem; line-height: 1.65; color: var(--ink-2); }
.tour-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
    margin-top: 1rem;
}
/* 해제는 이동 버튼과 줄을 나눕니다 — 340px 안에서 넷이 한 줄에 들어가면 눌리기 어렵습니다 */
.tour-dismiss {
    display: flex; gap: 0.25rem;
    margin: 0.75rem -0.4rem -0.25rem;
    padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.tour-dismiss button {
    flex: 1; height: 44px; padding: 0 0.4rem;   /* 손가락으로 누르는 것 — 44px 아래로 내리지 마세요 */
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.75rem; font-weight: 500; color: var(--ink-3);
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s;
}
.tour-dismiss button:hover { background: var(--surface); color: var(--ink); }
.tour-actions button {
    font-family: inherit; font-size: 0.8125rem; font-weight: 500;
    height: 34px; padding: 0 0.85rem; cursor: pointer;
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tour-prev {
    border: 1px solid var(--border-2); background: var(--bg); color: var(--ink-2);
}
.tour-prev:hover { background: var(--surface); color: var(--ink); }
.tour-prev[hidden] { display: none; }
.tour-next {
    border: none; background: var(--primary); color: var(--primary-fg);
}
.tour-next:hover { background: var(--primary-h); }

/* "사용 팁" 안에서 안내를 다시 부르는 입구 */
.tip-replay {
    display: block; width: 100%; margin-top: 0.875rem;
    font-family: inherit; font-size: 0.8125rem; font-weight: 500;
    height: 36px; cursor: pointer;
    border: 1px dashed var(--border-2); background: transparent; color: var(--ink-2);
    border-radius: var(--r-sm);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tip-replay:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }

/* 리소에서는 다른 카드들과 같은 두께로 */
[data-theme="riso"] .tour-pop,
[data-theme="riso"] .tip-replay,
[data-theme="riso"] .tour-prev { border-width: 3px; }