/* 글자 크기 하한(2026-09-24): 본문 15~16px · 표 14px · 보조 13px(좁은 폭 사다리 칸만 12.5px). */
/* AI Retirement Investing — 공통 스타일 (retirement_site/DESIGN.md §2·§12·§13·§16.1)
   - 색은 /start 와 같은 명함 뒷면 팔레트. 가족 자산 트랙만 금색 보조선.
   - 글꼴은 Pretendard(OFL) 부분집합(fonts.css, 원본 파일이 없으면 Noto Sans KR). 폴백에 맑은 고딕·Segoe·Consolas 를 두지 않는다.
   - 아이폰 규칙: body 고정·100vh 칸·iframe 없음, 머리 고정 안 함. 휴대폰 이동 버튼만 아래 고정(safe-area). */
/* 은퇴 사이트 색 A(짙은 청록, 사용자 확정 2026-09-24). 쉬운 화면·전문가 화면(lab)·대화창(guide.js --gd-*)이 같은 토큰을 쓴다.
   그대로 둔 것: 경고 띠(--warn), 사다리 M1~M5 파랑(AI Portfolio Investing 공개 모델 색). */
:root { --ret-accent:#0e6b6b; --ret-accent-ink:#0a5152; --ret-accent-soft:#e3f2f1; --ret-accent-line:#a9d3cf;
        --ret-panel:#0a3a3b; --ret-panel-muted:#9fd1cb; --ret-brand-from:#2fb8a8; --ret-brand-to:#0e6b6b;
        --ret-bg:#f5f8f8; --ret-sidebar:#edf3f2; --ret-line:#d9dde7; --ret-ink:#12161f; --ret-muted:#5b6475;   /* 중립색 = AI Portfolio Investing 과 같게(STYLE_ALIGN §2, 2026-09-26) */
        --gd-accent:var(--ret-accent); --gd-accent-soft:var(--ret-accent-soft); --gd-panel-head:var(--ret-panel); }
:root { --ink:var(--ret-ink); --muted:var(--ret-muted); --line:var(--ret-line); --bg:var(--ret-bg); --card:#fff; --accent:var(--ret-accent);
        --accent-soft:var(--ret-accent-soft); --warn:#8a5a00; --warn-soft:#fdf3dc; --panel:var(--ret-panel); --panel-muted:var(--ret-panel-muted);
        --gold:#c9a24a; --gold-soft:#faf5e8; --gain:#1d7a3a; --loss:#a12626;
        --m1:#cfe6ff; --m2:#9fd3ff; --m3:#5fb4f5; --m4:#2f86e0; --m5:#164ed8; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
       font-family: "Pretendard", "Noto Sans KR", sans-serif; }   /* Pretendard = AIPI 와 통일(사용자 결정 2026-09-26). fonts.css 가 싣는 쪽 하나만 쓰인다 — 맑은 고딕·Segoe 폴백 없음 */
code, pre, kbd, samp { font-family: inherit; }
[hidden] { display: none !important; }
a { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1:focus { outline: none; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; }

.wrap { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(40px + env(safe-area-inset-bottom)); }
.wrap.app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

/* 머리 (고정하지 않음) */
header.top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.logo svg { width: 26px; height: 26px; flex: none; display: block; }   /* 회사 육각형 마크(포털 머리와 같음, 2026-09-25) */
.logo b { font-size: 15px; font-weight: 800; line-height: 1.15; } .logo small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
nav.menu { margin-left: auto; display: flex; gap: 2px 12px; font-size: 14px; flex-wrap: wrap; }
nav.menu a { color: var(--muted); text-decoration: none; padding: 6px 0; min-height: 32px; display: inline-block; }
nav.menu a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.lang { display: inline-flex; gap: 4px; }
.lang a, .lang span { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 13px; min-height: 28px; display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; background: #fff; }
.lang [aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* 띠 */
.ribbon { background: var(--warn-soft); color: var(--warn); border: 1.5px dashed #d9b35c; border-radius: 12px; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.ribbon b { font-size: 16px; display: block; }
.fixed { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.fixed.gold { background: var(--gold-soft); border-left-color: var(--gold); }

/* 글 */
h1 { font-size: 21px; line-height: 1.35; margin: 14px 0 10px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
h3 { font-size: 15px; margin: 16px 0 6px; }
p.lead { color: var(--muted); margin: 0 0 12px; font-size: 16px; }
.note { color: var(--muted); font-size: 13px; margin-top: 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.grid2 { display: grid; gap: 10px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 14px; color: var(--muted); }
details summary { cursor: pointer; font-weight: 700; color: var(--ink); }
details p { margin: 6px 0 2px; }

/* 두 트랙 */
.tracks { display: grid; gap: 12px; }
.track { display: block; border-radius: 16px; padding: 18px; text-decoration: none; color: var(--ink); background: #fff; border: 1.5px solid var(--line); }
.track b { font-size: 20px; display: block; } .track .en { font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.track p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.track ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.track.ret { border-top: 5px solid var(--ret-brand-from); } .track.fam { border-top: 5px solid var(--gold); }
.track:hover { border-color: var(--accent); }

/* 그림 패널 */
.shell { margin-top: 8px; }
.vis { background: radial-gradient(360px 300px at 22% 26%, #16605f 0%, rgba(22,96,95,0) 70%), linear-gradient(135deg,#06292a 0%,var(--ret-panel) 100%);
       color: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; border: 1px solid rgba(159,209,203,.14); }
.vis.fam { background: radial-gradient(360px 300px at 22% 26%, #3a3218 0%, rgba(58,50,24,0) 70%), linear-gradient(135deg,#06292a 0%,var(--ret-panel) 100%); border-color: rgba(201,162,74,.35); color: #fff; }   /* 공용 family.js 가 넣는 전역 .fam{color:inherit} 를 눌러 둔다 */
.vis .vt { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.vis .cap { color: var(--panel-muted); font-size: 13px; margin-top: 8px; }
.vis svg { width: 100%; height: auto; display: block; }
.vis .glow { filter: drop-shadow(0 0 4px rgba(47,184,168,.75)); }

/* 선택지 */
.opts { display: grid; gap: 8px; }
.opt { display: block; width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); cursor: pointer; }
.opt small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.cards5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.cards5 .opt { text-align: center; padding: 6px 2px 8px; font-size: 13px; }
.cards5 svg { width: 100%; height: auto; display: block; }
.cards5 .up { color: var(--gain); font-weight: 800; } .cards5 .dn { color: var(--loss); font-weight: 800; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paths .opt { padding: 8px 10px 10px; } .paths svg { width: 100%; height: auto; display: block; margin-bottom: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); min-height: 34px; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.field { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.field .lb { display: block; font-weight: 700; font-size: 15px; }
.sw { display: flex; align-items: center; gap: 10px; }
.tg { width: 44px; height: 26px; border-radius: 99px; background: #cfd5e1; position: relative; flex: none; border: 0; cursor: pointer; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.tg[aria-pressed="true"] { background: var(--accent); } .tg[aria-pressed="true"]::after { left: 21px; }
.private { font-size: 13px; color: var(--muted); margin-top: 6px; }
.prog { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.prog .bars { flex: 1; display: flex; gap: 4px; } .prog i { flex: 1; height: 5px; border-radius: 99px; background: #e3e7ef; } .prog i.on { background: var(--accent); }

/* 버튼 */
.btns { display: flex; gap: 8px; margin-top: 14px; }
.btn { flex: 1; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 12px 6px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; display: block; }
.btn.primary { flex: 2; background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.bot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid var(--line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.bot .in { max-width: 560px; margin: 0 auto; display: flex; gap: 8px; }
@media (max-height: 480px) { .wrap.app { padding-bottom: 24px; } .bot { position: static; border: 0; background: none; padding: 12px 0 0; } }

/* 배지·표 */
.badge { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 6px; padding: 1px 8px; vertical-align: middle; white-space: nowrap; }
.badge.pub { background: var(--ret-accent-soft); color: var(--ret-accent-ink); border: 1px solid var(--ret-accent-line); } .badge.cmp { background: #eceef0; color: #56666a; } .badge.wait { background: var(--warn-soft); color: var(--warn); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { padding: 7px 4px; border-top: 1px solid #eef0f5; text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; }
table.t th { color: var(--muted); font-weight: 600; font-size: 13px; }
table.t th:first-child, table.t td:first-child, table.t .l { text-align: left; }
.scroll { overflow-x: auto; }
table.lad { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
table.lad th { font-weight: 600; color: var(--muted); font-size: 13px; padding: 2px; text-align: center; }
table.lad th[scope=row] { text-align: left; color: var(--ink); font-size: 13px; white-space: nowrap; padding-right: 6px; }
table.lad td { text-align: center; border-radius: 4px; padding: 5px 0; font-weight: 700; font-size: 13px; }
tr.hl th[scope=row] { color: var(--accent); } tr.hl td { outline: 2px solid #ffc766; outline-offset: -1px; }
.m1 { background: var(--m1); color: #12305e; } .m2 { background: var(--m2); color: #12305e; } .m3 { background: var(--m3); color: #0b1f44; }
.m4 { background: var(--m4); color: #fff; } .m5 { background: var(--m5); color: #fff; }
.slot { border: 1.5px dashed var(--line); border-radius: 10px; padding: 10px; color: var(--muted); font-size: 13px; background: #fbfcfe; }
.pol { display: grid; gap: 10px; } .pol .card h3 { margin: 0; font-size: 17px; } .pol .card .sub { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.pol .vis { padding: 10px; margin: 0 0 8px; }
.lever { display: grid; grid-template-columns: 7.5em 1fr 3.2em; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; }
.lever .bar { height: 18px; border-radius: 5px; background: repeating-linear-gradient(45deg,#e3e7ef 0 6px,#eef1f6 6px 12px); }
.lever .v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }

/* PC 전문가 층 (DESIGN §16.1) — 넓은 폭에서만 세 열 */
.xp { display: grid; gap: 14px; margin-top: 10px; }
.xp .pane { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.xp .pane h3 { margin: 0 0 8px; font-size: 14px; }
.xp table.t { font-size: 14px; } .xp table.t th, .xp table.t td { padding: 5px 4px; }
.xp .chart { background: #fbfcfe; border: 1px solid #eef0f5; border-radius: 8px; } .xp .chart svg { width: 100%; height: auto; display: block; }
.ev { background: #f3f5fa; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; color: #2a3140; }
.ev dl { margin: 0; display: grid; grid-template-columns: 7.2em 1fr; gap: 4px 8px; } .ev dt { color: var(--muted); } .ev dd { margin: 0; font-variant-numeric: tabular-nums; }
.ev .lim { margin: 8px 0 0; padding-left: 16px; color: var(--muted); } .ev .ch { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ev details { margin: 0; background: none; border: 0; padding: 0; }

/* 글(가족 자산·방법) */
.art { max-width: 760px; }
.art p, .art li { font-size: 16px; line-height: 1.85; }
.art table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0; }
.art th, .art td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; }
.art th { background: #f1f3f8; }
.art blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--gold); background: var(--gold-soft); }
.art .meta { color: var(--muted); font-size: 13px; }
.toc li { margin: 3px 0; }
.form-sheet { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 12px 0; }
.form-sheet .blank { border-bottom: 1px solid #b9c2d3; min-height: 1.8em; margin: 2px 0 10px; }

/* 바닥 */
footer.legal { color: var(--muted); font-size: 13px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 10px; }
footer.legal .ln { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
footer.legal a { color: var(--muted); }
footer.legal .sib { margin-top: 0; }   /* 연락처 옆 같은 줄(2026-09-27) */

/* 좁은 폭 */
@media (max-width: 400px) {
  .cards5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  nav.menu { margin-left: 0; width: 100%; }
  table.lad td { font-size: 12.5px; padding: 5px 0; }
  .vis svg text[font-size="10.5"], .vis svg text[font-size="11"] { font-size: 13.5px; }
}
@media (max-width: 360px) { table.t { font-size: 13px; } }

/* 넓은 화면: 왼쪽 그림 패널 + 오른쪽 문항 (슈왑 방식). 머리는 여전히 고정하지 않는다 */
@media (min-width: 980px) {
  .wrap { max-width: 1180px; padding: 16px 28px 40px; }
  .wrap.app { padding-bottom: 40px; }
  .shell { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; gap: 28px; align-items: start; }
  .shell > .vis { margin: 0; padding: 22px; min-height: 460px; position: sticky; top: 16px; display: flex; flex-direction: column; justify-content: center; }
  .shell.one { display: block; }
  h1 { font-size: 26px; }
  .tracks { grid-template-columns: 1fr 1fr; }
  .pol { grid-template-columns: repeat(3, 1fr); }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .bot { position: static; border: 0; background: none; padding: 16px 0 0; }
  .bot .in { max-width: none; }
}
@media (min-width: 1180px) {
  .xp.c3 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 290px; align-items: start; }
  .xp.c2 { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
}
@media print {
  header.top nav, .lang, .bot, .btns, footer.legal .ln, .skip { display: none !important; }
  body { background: #fff; } .wrap { max-width: none; padding: 0; }
  .form-sheet { border: 0; page-break-inside: avoid; }
}

/* 첫 화면 선택 (assets/mode.js) — 맨 주소로 처음 온 사람에게만 */
#choose { display: none; }
[data-choose] #choose { display: block; }
.choose { background: #fff; border: 2px solid var(--accent); border-radius: 16px; padding: 16px; margin: 12px 0; }
.choose h2 { margin: 0 0 8px; font-size: 18px; }
.choose .opts { grid-template-columns: 1fr; }
.choose .opt b { font-size: 17px; display: block; }
.choose .opt[aria-disabled="true"] { opacity: .55; cursor: default; }
nav.menu .expert { color: var(--muted); font-size: 13px; padding: 6px 0; min-height: 32px; display: inline-block; }
@media (min-width: 980px) { .choose .opts { grid-template-columns: 1fr 1fr; } }

/* 전문가 화면(lab/, 전문가 세션) — 넓은 폭 틀 */
@media (min-width: 980px) { .wrap.lab { max-width: 1440px; } }

/* 글자 하한 보완: 표 안 보조 이름, 패밀리 사이트 드롭다운(공용 부품은 고치지 않고 여기서 크기만) */
table.t small { font-size: 13px; }
footer.legal .fam, footer.legal .fam summary, footer.legal .fam a, footer.legal .fam span, footer.legal .fam small { font-size: 13px; }
.art sup { font-size: 13px; line-height: 0; }

/* 메인 점검(2026-09-24): 홈 히어로 그림 = 오른쪽 글 높이, 넓은 화면 본문 폭, 두 번째 쪽부터 한 줄 띠, 기호 보조 표기 */
.shell.hero > .vis { justify-content: center; }
@media (min-width: 980px) { .shell.hero { align-items: stretch; } .shell.hero > .vis { min-height: 0; position: static; } .shell.hero > .vis svg { max-height: 420px; } }
@media (min-width: 1280px) { .wrap { max-width: 1240px; } .art { max-width: 820px; } }
.ribbon.mini { padding: 6px 12px; font-size: 13px; border-width: 1px; }
small.sym { color: var(--muted); font-weight: 400; font-size: 12.5px; margin-left: 2px; }

/* 레버 막대(책 10장 값이 있을 때): 원화 변화 폭, 회색 = 미달 확률이 오르는 쪽 */
.lever.on { grid-template-columns: 7.5em 1fr 7.5em; }
.lever.on .bar { background: var(--ret-sidebar); overflow: hidden; }
.lever.on .bar i { display: block; height: 100%; border-radius: 5px; background: var(--ret-accent); }
.lever.on .bar i.up { background: #b9c2d3; }
.lever.on .v { color: var(--ink); font-weight: 700; }
.lever.on .v small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.lever.on .bar i.nd { background: repeating-linear-gradient(45deg, var(--ret-accent-line) 0 6px, var(--ret-sidebar) 6px 12px); }
/* 전문가 화면 머리의 "쉬운 화면" 버튼(사용자 지시 2026-09-25) */
nav.menu .expert.modebtn { color: var(--ret-accent); font-weight: 700; border: 1px solid var(--ret-accent-line); border-radius: 999px; padding: 5px 14px; background: var(--ret-accent-soft); text-decoration: none; }
nav.menu .expert.modebtn:hover { background: var(--ret-accent); color: #fff; }
table.t tr.na td { color: var(--muted); }   /* IRP·DC·연금저축 표에서 계좌 한도로 쓸 수 없는 경로(주식 100% 단을 거침) */
/* 대화 패널이 열려 본문이 380px 밀릴 때(guide.js: html.gd-open, 980px 이상) — 1280px 아래에서는 여러 칸을 한 칸으로(서버 운영 점검 2026-09-25) */
@media (min-width: 980px) and (max-width: 1279px) {
  html.gd-open .shell { display: block; }
  html.gd-open .shell > .vis { position: static; min-height: 0; margin-bottom: 14px; }
  html.gd-open .pol { grid-template-columns: 1fr; }
  html.gd-open .grid2, html.gd-open .tracks, html.gd-open .choose .opts { grid-template-columns: 1fr; }
  html.gd-open .xp.c3, html.gd-open .xp.c2 { grid-template-columns: 1fr; }
}
/* 설문 하단 고정 단추 줄 — 대화 패널의 떠 있는 단추(.gd-launch: 오른쪽 16px, 56px)에 "다음"이 가리지 않게 오른쪽 여백(메인 점검 2026-09-25) */
@media (max-width: 979px) { .bot .in { padding-right: 68px; } }