/* 귀로 듣는 연금 — 저시력·어르신 화면 (SRS IF-02 · NFR-05~07)
 * 토큰은 sunny34 invest(다크 네이비·시안)와 맞추고, 밝은 테마(data-theme=light)·글자 배율(--scale 1~3)·단일 열 reflow·터치 48px 이상을 지킨다.
 * 의미는 색만으로 전달하지 않는다(상승/하락은 "플러스/마이너스" 글자). */
:root{
  --scale:1;
  --accent:#7ce3ff; --accent-2:#3ef3ff;
  --bg:#0b1623; --panel:#0f1d2c; --panel-2:#13253a;
  --ink:#f3f8ff; --ink-2:#b6c6d9; --ink-3:#8aa0b8;
  --line:#284561; --focus:#ffd166;
  --talk:#1fb6ff; --talk-ink:#031018; --listen:#4fe0a0; --speak:#ffb35c;
  --font:'Noto Sans KR',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f4f7fb; --panel-2:#e9eef5; --ink:#0b1623; --ink-2:#2d3f55; --ink-3:#4a5d75; --line:#b9c6d6; --accent:#005f8f; --accent-2:#007bb8; --talk:#005f8f; --talk-ink:#ffffff; --listen:#0a7a4a; --speak:#9a4b00;
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--scale)); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.6; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:4px solid var(--focus); outline-offset:3px}
.skip{position:absolute; left:-999px; top:8px; background:var(--focus); color:#000; padding:8px 14px; border-radius:8px; z-index:99}
.skip:focus{left:8px}
.num{font-feature-settings:"zero" 1, "tnum" 1}

/* 셸 */
.v-header{border-bottom:1px solid var(--line); background:var(--panel)}
.v-header .wrap,.v-foot .wrap{max-width:760px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.brand{font-weight:700; text-decoration:none; color:var(--accent); font-size:1.1rem; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.brand .pill{font-size:.7rem; font-weight:700; color:var(--talk-ink); background:var(--accent); border-radius:999px; padding:2px 8px; margin-left:4px; vertical-align:middle}
.v-header .title{font-weight:700; color:var(--ink)}
.v-header nav{margin-left:auto}
/* 화면 ↔ 음성 전환 탭(시뮬레이터 머리글과 같은 모양, 터치 48px) */
.view-tabs{display:inline-flex; border:2px solid var(--line); border-radius:999px; padding:3px; background:var(--panel-2); white-space:nowrap}
.view-tabs a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; font-size:.95rem; font-weight:700; color:var(--ink-2); text-decoration:none}
.view-tabs a.on{background:var(--accent); color:var(--talk-ink)}
:root[data-scale="3"] .v-header nav{display:block}
.v-foot{border-top:1px solid var(--line); margin-top:32px; color:var(--ink-3); font-size:.8rem}
.v-foot .wrap{flex-direction:column; align-items:flex-start; gap:6px}
.v-main{max-width:760px; margin:0 auto; padding:20px 16px 40px}
.eyebrow{margin:0 0 6px; color:var(--accent); font-weight:600; font-size:.85rem}
.eyebrow .ver{border:1px solid var(--line); border-radius:999px; padding:0 8px; margin-left:6px; font-size:.75rem}
h1{font-size:1.6rem; line-height:1.3; margin:0 0 8px; letter-spacing:-.01em}
.lede{color:var(--ink-2); margin:0 0 18px; font-size:.95rem}
h2{font-size:1.1rem; margin:0 0 8px}

/* 숫자 카드 3개 */
.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0 0 18px}
@media (min-width:640px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0}
.card .k{color:var(--ink-2); font-size:.9rem; font-weight:600}
.card .v{font-size:1.75rem; line-height:1.2; font-weight:700; word-break:keep-all; overflow-wrap:anywhere}
.card small{color:var(--ink-3); font-size:.8rem; line-height:1.4}

/* 자막 */
.speech{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px 18px 14px; margin-bottom:16px}
.caption{margin:0; font-size:1.35rem; line-height:1.7; min-height:3.2em; font-weight:500; word-break:keep-all; overflow-wrap:anywhere}
.caption .sent{opacity:.55; transition:opacity .15s}
.caption .sent.cur{opacity:1}
.caption .w.on{background:var(--focus); color:#000; border-radius:4px; box-shadow:0 0 0 3px var(--focus)}
.caption:empty::before{content:'…'; color:var(--ink-3)}
.live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:root[data-reader="1"] .caption .sent{opacity:1}
.choices{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.choice{font:inherit; font-size:1rem; font-weight:600; min-height:52px; padding:10px 16px; border-radius:14px; border:2px solid var(--line); background:var(--panel-2); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:10px}
.choice .n{display:inline-grid; place-items:center; width:1.8em; height:1.8em; border-radius:50%; background:var(--accent); color:var(--talk-ink); font-weight:700}
.choice:hover{border-color:var(--accent)}
.tel{display:inline-block; margin-top:14px; font-size:1.2rem; font-weight:700; padding:14px 18px; border-radius:14px; background:#ffd166; color:#000; text-decoration:none}

/* 큰 버튼 */
.controls{display:grid; gap:12px; justify-items:center; text-align:center; margin:8px 0 18px}
.talk{font:inherit; font-size:1.25rem; font-weight:700; color:var(--talk-ink); background:var(--talk); border:0; border-radius:999px; width:min(100%,420px); min-height:104px; padding:16px 24px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:14px; box-shadow:0 14px 30px rgba(31,182,255,.25)}
.talk .mic{width:1.5em; height:1.5em; border-radius:50%; background:currentColor; position:relative; flex:none}
.talk .mic::after{content:''; position:absolute; inset:28% 42%; background:var(--talk); border-radius:999px}
.talk:hover{filter:brightness(1.06)}
body.is-listening .talk{background:var(--listen); animation:pulse 1.2s ease-in-out infinite}
body.is-listening .talk .lbl::after{content:' · 듣는 중'}
body.is-speaking .talk{background:var(--speak)}
body.is-speaking .talk .lbl::after{content:' · 눌러서 멈추고 말하기'}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,224,160,.5)}50%{box-shadow:0 0 0 18px rgba(79,224,160,0)}}
@media (prefers-reduced-motion:reduce){ body.is-listening .talk{animation:none} }
.repeat{font:inherit; font-size:1.05rem; font-weight:600; min-height:56px; padding:12px 22px; border-radius:999px; border:2px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; width:min(100%,420px)}
.status{margin:0; color:var(--ink-2); font-size:.95rem; min-height:1.5em}

/* 글자 입력 */
.typed label{display:block; font-size:.9rem; color:var(--ink-2); margin-bottom:6px}
.typed .row{display:flex; gap:8px; flex-wrap:wrap}
.typed input{flex:1 1 220px; min-width:0; max-width:100%; min-height:52px; font:inherit; font-size:1.05rem; padding:10px 14px; border-radius:12px; border:2px solid var(--line); background:var(--panel); color:var(--ink)}
.typed button{font:inherit; font-size:1.05rem; font-weight:700; min-height:52px; min-width:120px; padding:10px 18px; border-radius:12px; border:0; background:var(--accent); color:var(--talk-ink); cursor:pointer}
.note{color:var(--ink-3); font-size:.85rem; margin:8px 0 0}

/* 종목 카드(표 대신) */
.holdings{margin-top:22px}
.hlist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.hlist li{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:baseline}
.hlist li b{font-size:1.05rem; word-break:keep-all}
.hlist li span{font-size:1.4rem; font-weight:700}
.hlist li small{grid-column:1/-1; color:var(--ink-3); font-size:.85rem}
.tosim{background:var(--panel-2); border-radius:14px; padding:12px 14px; margin-top:16px; font-size:.95rem}

/* 설정 */
.settings{margin-top:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.settings summary{cursor:pointer; padding:14px 16px; font-weight:600; min-height:52px}
.settings .grid{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:0 16px 16px}
@media (min-width:640px){ .settings .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.settings label{display:flex; flex-direction:column; gap:4px; font-size:.95rem; min-width:0}
.settings label.chk{flex-direction:row; align-items:center; gap:10px; min-height:48px}
.settings select{font:inherit; font-size:1rem; width:100%; max-width:100%; min-width:0; min-height:48px; padding:8px 10px; border-radius:10px; border:2px solid var(--line); background:var(--panel-2); color:var(--ink)}
.settings input[type=checkbox]{width:1.5em; height:1.5em}
.ghost{font:inherit; font-size:.95rem; max-width:100%; white-space:normal; min-height:48px; border-radius:10px; border:2px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; grid-column:1/-1}

/* 쓰는 법 */
.how{margin-top:26px; color:var(--ink-2); font-size:.95rem}
.how ol{padding-left:1.3em; margin:0}
.how li{margin:4px 0}

/* 저시력 모드(data-mode=lowvision): 글자 배율이 2배 이상이면 카드·설정을 한 열로(reflow, 가로 스크롤 0) */
:root[data-mode="lowvision"] .caption{font-size:1.5rem}
:root[data-scale="2"] .cards, :root[data-scale="3"] .cards, :root[data-scale="2"] .settings .grid, :root[data-scale="3"] .settings .grid{grid-template-columns:1fr}
:root[data-scale="3"] .card .v{font-size:1.4rem}