/* ============================================================
   DESIGN-figma.md 적용
   모노크롬 코어 + 오버사이즈 파스텔 컬러블록 + pill CTA
   그림자 없음 · 미드그레이 텍스트 없음 (위계는 weight로)
   ============================================================ */

/* 한글+라틴 통합. Pretendard는 Inter를 기반으로 만든 한글 폰트라
   figmaSans 대체로 문서가 권장하는 Inter와 같은 계열을 유지합니다.
   로드 실패 시 시스템 폰트로 폴백되며 레이아웃은 그대로 동작합니다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root{
  /* --- colors --- */
  --ink:#000000;
  --canvas:#ffffff;
  --inverse-canvas:#000000;
  --inverse-ink:#ffffff;
  --hairline:#e6e6e6;
  --hairline-soft:#f1f1f1;
  --surface-soft:#f7f7f5;

  --lime:#dceeb1;
  --lilac:#c5b0f4;
  --cream:#f4ecd6;
  --pink:#efd4d4;
  --mint:#c8e6cd;
  --coral:#f3c9b6;
  --navy:#1f1d3d;

  --magenta:#ff3d8b;
  --success:#1ea64a;

  /* --- radius --- */
  --r-xs:2px; --r-sm:6px; --r-md:8px;
  --r-lg:24px; --r-xl:32px; --r-pill:50px; --r-full:9999px;

  /* --- spacing (8px base) --- */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px;
  --s-lg:24px; --s-xl:32px; --s-xxl:48px; --s-sec:96px;

  /* --- type scale ---
     문서의 위계를 앱 크기로 옮긴 7단계입니다. 중간값을 만들지 않습니다.
     자간은 px 대신 em 이라 크기가 바뀌어도 비율이 유지됩니다. */
  --fs-metric:48px;  --ls-metric:-.025em;   /* 결과 숫자 */
  --fs-display:34px; --ls-display:-.02em;   /* 페이지 제목 */
  --fs-title:26px;   --ls-title:-.01em;     /* 블록 제목 */
  --fs-head:20px;    --ls-head:-.01em;      /* 카드 제목 */
  --fs-body:16px;    --ls-body:-.009em;     /* 본문 */
  --fs-small:14px;   --ls-small:-.007em;    /* 보조 */
  --fs-mono:12px;    --ls-mono:.045em;      /* eyebrow */
  --fs-caption:11px; --ls-caption:.055em;   /* 캡션 */

  /* --- type --- */
  --sans:"Pretendard Variable",Pretendard,Inter,-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,
         "Pretendard Variable",monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

/* hidden 속성은 어떤 display 선언보다 우선해야 합니다.
   (.sheet-wrap 처럼 display:flex 를 준 요소에서 hidden 이 무시되던 문제) */
[hidden]{display:none!important}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body); font-weight:330; line-height:1.45; letter-spacing:var(--ls-body);
  font-feature-settings:"kern";
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
#app{max-width:640px;margin:0 auto}
/* 좌우 여백은 뷰 하나가 책임집니다. 요소를 추가해도 누락될 수 없습니다. */
.view{padding:0 var(--s-lg)}
h1,h2,h3{margin:0;font-weight:540;letter-spacing:var(--ls-title);line-height:1.35}
button{font-family:inherit;font-size:1rem;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%}

/* eyebrow / caption — figmaMono 역할. taxonomy 전용, 절대 본문에 쓰지 않음 */
.eyebrow{
  font-family:var(--mono); font-size:var(--fs-mono); font-weight:400;
  line-height:1.3; letter-spacing:var(--ls-mono); text-transform:uppercase;
  color:var(--ink);
}
.caption{
  font-family:var(--mono); font-size:var(--fs-caption); font-weight:400;
  line-height:1; letter-spacing:var(--ls-caption); text-transform:uppercase;
}

/* ===== 상단 ===== */
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-md);
  padding:calc(var(--s-xl) + env(safe-area-inset-top)) 0 var(--s-lg);
}
.topbar h1{font-size:var(--fs-display);font-weight:340;line-height:1;letter-spacing:var(--ls-display)}
.sub{margin:var(--s-xs) 0 0;font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small)}

/* ===== 진행 표시 ===== */
.progress{height:2px;background:var(--hairline);overflow:hidden}
.progress-bar{height:100%;background:var(--ink);transition:width .3s ease}
.step-label{
  margin:var(--s-sm) 0 var(--s-xl);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;
}

/* ===== 컬러블록 — 문서의 signature surface =====
   각 단계가 하나의 색 블록을 차지합니다. 한 화면에 블록은 하나뿐입니다. */
.step{
  border-radius:var(--r-lg);
  padding:var(--s-xl) var(--s-lg) var(--s-xl);
  background:var(--surface-soft);
}
.step[data-step="1"]{background:var(--lime)}
.step[data-step="2"]{background:var(--cream)}
.step[data-step="3"]{background:var(--mint)}
.step[data-step="4"]{background:var(--pink)}
.step[data-step="5"]{background:var(--lilac)}
.step h2{font-size:var(--fs-title);font-weight:540;letter-spacing:var(--ls-title);margin-bottom:var(--s-xs)}
.hint{margin:0 0 var(--s-lg);font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body)}

/* 화면이 좁으면 컬러블록만 가장자리까지 흐릅니다 (문서 Mobile-L 규칙).
   나머지 여백은 .view 가 그대로 유지합니다. */
@media (max-width:560px){
  .step,.block-hero{
    border-radius:0;
    margin-left:calc(var(--s-lg) * -1);
    margin-right:calc(var(--s-lg) * -1);
  }
  .step{padding-left:var(--s-lg);padding-right:var(--s-lg)}
}

/* 컬러블록 위 보조 설명 — 흰 종이를 얹은 느낌 */
.tip{
  background:var(--canvas);
  border-radius:var(--r-md);
  padding:var(--s-md);
  font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small);
  margin:var(--s-lg) 0 0;
}
.tip b{font-weight:540}

/* ===== 입력 ===== */
.field{display:block;margin-bottom:var(--s-md)}
.field>span{display:block;font-size:var(--fs-body);font-weight:480;margin-bottom:var(--s-xs);letter-spacing:var(--ls-body)}
.field i{font-style:normal;font-weight:330;font-size:var(--fs-small);margin-left:var(--s-xs)}
.input-wrap{
  display:flex;align-items:center;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  overflow:hidden;
}
/* 문서: focus는 fill 변경이 아니라 ring으로 표현 */
.input-wrap:focus-within{border-color:var(--ink);outline:1px solid var(--ink)}
.input-wrap input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
  font-family:inherit;
  padding:14px;font-size:var(--fs-head);font-weight:480;letter-spacing:var(--ls-body);
  font-variant-numeric:tabular-nums;
}
.input-wrap input[type=text],
.input-wrap input[type=password]{font-size:var(--fs-body);font-weight:330}
.input-wrap input::placeholder{color:var(--ink);opacity:.28}
.input-wrap em{
  font-family:var(--mono);font-style:normal;font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;padding-right:14px;white-space:nowrap;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* 입력값의 실제 금액 — mono caption (taxonomy 역할) */
.amt{
  display:block;margin-top:var(--s-xs);min-height:15px;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--ls-mono);
}
.amt:empty{margin-top:0}

/* 단계별 경고 — 새 색 없이 컬러블록 어휘 재사용 */
.warn-slot:empty{display:none}
.warn{
  background:var(--canvas);border-radius:var(--r-md);
  padding:var(--s-md);margin-top:var(--s-md);
  font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small);
}
.warn b{display:block;font-weight:540;margin-bottom:var(--s-xxs)}
.warn.hard{background:var(--ink);color:var(--inverse-ink)}

/* 접이식 안내 */
.howto{
  background:var(--canvas);border-radius:var(--r-md);
  margin-bottom:var(--s-md);overflow:hidden;
}
.howto summary{
  list-style:none;cursor:pointer;
  padding:14px var(--s-md);min-height:44px;
  font-size:var(--fs-small);font-weight:480;letter-spacing:var(--ls-small);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);
}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{
  content:"+";font-family:var(--mono);font-size:var(--fs-body);font-weight:400;flex:none;
}
.howto[open] summary::after{content:"−"}
.howto>div{padding:0 var(--s-md) var(--s-md);font-size:var(--fs-small);font-weight:330}
.howto p{margin:0 0 var(--s-xs)}
.howto ul{margin:var(--s-xs) 0;padding-left:var(--s-md)}
.howto li{margin:var(--s-xxs) 0}

/* 건너뛰기 — 텍스트 버튼 (button-tertiary-text) */
.skip{
  display:block;width:100%;min-height:44px;
  padding:var(--s-sm);margin-bottom:var(--s-lg);
  font-size:var(--fs-small);font-weight:480;letter-spacing:var(--ls-small);
  text-decoration:underline;text-underline-offset:3px;
}
.skip[hidden]{display:none}

/* 건너뜀 표시 */
.skip-flag{
  display:inline-block;margin-left:var(--s-xs);
  padding:2px var(--s-xs);border-radius:var(--r-pill);
  background:var(--ink);color:var(--inverse-ink);
  font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;
}

/* 버전 · 업데이트 노트 */
.verline{margin:var(--s-xxl) 0 var(--s-lg);text-align:center}
.verline button{
  font-family:var(--mono);font-size:var(--fs-caption);font-weight:400;
  letter-spacing:var(--ls-caption);text-transform:uppercase;
  padding:var(--s-sm);min-height:44px;
  text-decoration:underline;text-underline-offset:3px;
}

/* 입력 그룹 라벨 — mono eyebrow (taxonomy 역할) */
.group-label{
  margin:var(--s-lg) 0 var(--s-sm);
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--ls-mono);text-transform:uppercase;
}
.group-label:first-of-type{margin-top:0}

/* 계산 결과 줄 */
.calc-out{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-sm);
  background:var(--canvas);border-radius:var(--r-md);
  padding:var(--s-md);margin-top:var(--s-xs);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;
}
.calc-out.sub{margin-bottom:var(--s-xs);opacity:.65}
.calc-out.sub b{font-size:var(--fs-body)}
.calc-out b{
  font-family:var(--sans);font-size:var(--fs-head);font-weight:700;letter-spacing:0;
  text-transform:none;font-variant-numeric:tabular-nums;
}

/* ===== pill 토글 (문서: selected = primary surface) ===== */
.toggle{display:flex;gap:var(--s-xs);margin-bottom:var(--s-lg)}
.toggle button{
  flex:1;padding:10px var(--s-md);
  border-radius:var(--r-pill);
  background:var(--canvas);color:var(--ink);
  font-size:var(--fs-small);font-weight:480;letter-spacing:var(--ls-small);
  min-height:44px;
}
.toggle button.on{background:var(--ink);color:var(--inverse-ink)}

/* ===== O/X ===== */
.ox{
  background:var(--canvas);border-radius:var(--r-md);
  padding:var(--s-md);margin-bottom:var(--s-sm);
}
.ox p{margin:0 0 var(--s-sm);font-size:var(--fs-body);font-weight:480;letter-spacing:var(--ls-body)}
.ox div{display:flex;gap:var(--s-xs)}
.ox button{
  flex:1;min-height:44px;padding:10px 0;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  font-size:var(--fs-body);font-weight:480;
}
.ox button.on{background:var(--ink);border-color:var(--ink);color:var(--inverse-ink)}

/* ===== 버튼 =====
   모든 CTA가 pill 하나의 골격을 공유합니다. 채움 여부만 다릅니다.
   두 개가 나란히 놓이면 오른쪽이 강조입니다. */
.primary,
.ghost,
.btn-row button,
.kw{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-xs);
  min-height:48px;padding:12px var(--s-lg);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--canvas);color:var(--ink);
  font-family:inherit;font-size:var(--fs-body);font-weight:480;letter-spacing:var(--ls-body);
  text-decoration:none;white-space:nowrap;
  transition:transform .12s ease;
}
.primary:active,
.ghost:active,
.btn-row button:active,
.kw:active{transform:scale(.985)}

/* 채움 — 주 액션. 한 화면에 하나만 둡니다. */
.primary,
.btn-row button.solid{
  background:var(--ink);border-color:var(--ink);color:var(--inverse-ink);
}


.wide{width:100%;flex:none}

/* 작은 변형 */
.ghost.sm{min-height:36px;padding:6px var(--s-md);font-size:var(--fs-small)}

.primary:disabled,
.ghost:disabled,
.btn-row button:disabled{opacity:.35;pointer-events:none}

/* 두 버튼이 나란히 — 왼쪽 보조, 오른쪽 강조 */
.stepnav{display:flex;gap:var(--s-sm);margin:var(--s-xl) 0 var(--s-lg)}
.stepnav .ghost{flex:1}
.stepnav .primary{flex:2}

/* ===== 결과 — 메트릭도 컬러블록으로 ===== */
.metric{
  border-radius:var(--r-lg);
  padding:var(--s-xl) var(--s-lg);
  margin-bottom:var(--s-md);
  background:var(--canvas);
  border:1px solid var(--hairline);
}
.metric .k{
  margin:0 0 var(--s-sm);
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--ls-mono);text-transform:uppercase;
}
.metric .v{
  margin:0;font-size:var(--fs-metric);font-weight:340;line-height:1;letter-spacing:var(--ls-metric);
  font-variant-numeric:tabular-nums;
}
.metric .v small{font-size:var(--fs-head);font-weight:480;letter-spacing:var(--ls-head);margin-left:var(--s-xxs)}
.metric .d{margin:var(--s-md) 0 0;font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body)}
.metric .d b{font-weight:540}

/* 배지 — 컬러블록 위에서는 검정/흰색 pill */
.badge{
  display:inline-block;margin-top:var(--s-md);
  padding:6px var(--s-md);border-radius:var(--r-pill);
  font-size:var(--fs-mono);font-weight:480;letter-spacing:var(--ls-body);
  background:var(--ink);color:var(--inverse-ink);
}
.badge.b-quiet{background:var(--canvas);color:var(--ink)}

/* 바 — 흑백만 사용 */
.bar{height:4px;background:rgba(0,0,0,.14);border-radius:var(--r-full);overflow:hidden;margin-top:var(--s-lg)}
.bar>i{display:block;height:100%;background:var(--ink);border-radius:var(--r-full);transition:width .5s ease}

/* ===== 청년 지원 ===== */
.policy-me{
  margin:0 0 var(--s-sm);
  font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;
}
.policy-row i{font-style:normal;font-weight:330;opacity:.55}
.policy-row.mine{opacity:1}
.policy-row.mine b{
  background:var(--ink);color:var(--inverse-ink);
  padding:3px var(--s-sm);border-radius:var(--r-pill);
  font-size:var(--fs-small);
}
.policy-row.off span{text-decoration:line-through;text-decoration-thickness:1px}
.policy-row.off{opacity:.45}

/* 만기 구성 막대 — 검정 한 색, 정부 지원만 파스텔로 강조 */
.bars{margin-top:var(--s-lg)}
.bar-row{
  display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;
  gap:var(--s-sm);padding:5px 0;font-size:var(--fs-small);font-weight:330;
}
.bar-row b{font-weight:540;font-variant-numeric:tabular-nums}
.bar-fill{display:block;height:12px;border-radius:var(--r-xs);background:var(--ink);min-width:2px}
.bar-fill.gov{background:var(--lime);outline:1px solid var(--ink)}

/* 목표 도달 비교 */
.chart{display:block;width:100%;height:auto;margin:var(--s-md) 0 var(--s-xs);color:var(--ink)}
.rows.tight .row{padding:10px 0}
.fine{
  font-family:var(--mono);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);opacity:.55;margin-top:var(--s-sm);
}
.metric .d.fine{opacity:.55}
.linkish{
  font-family:inherit;font-size:inherit;letter-spacing:inherit;
  text-decoration:underline;text-underline-offset:3px;padding:0;
}
a.ghost{text-decoration:none}

/* ===== 섹션 ===== */
.sec-title{
  margin:var(--s-xxl) 0 var(--s-md);
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--ls-mono);text-transform:uppercase;
}
.rows{border-top:1px solid var(--hairline)}
.row{
  display:flex;justify-content:space-between;gap:var(--s-md);
  padding:14px 0;border-bottom:1px solid var(--hairline-soft);
  font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body);
}
.row:last-child{border-bottom:1px solid var(--hairline)}
.row b{font-weight:540;font-variant-numeric:tabular-nums}
.row span{font-weight:330}

/* 스파크라인 — 검정 막대 */
.spark{display:flex;align-items:flex-end;gap:var(--s-xxs);height:80px;margin:var(--s-lg) 0 var(--s-xs)}
.spark div{flex:1;background:var(--ink);border-radius:var(--r-xs);min-height:3px}
.spark div.neg{background:repeating-linear-gradient(45deg,var(--ink),var(--ink) 2px,transparent 2px,transparent 4px)}
.spark-x{display:flex;gap:var(--s-xxs);font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);text-align:center}
.spark-x span{flex:1}

/* ===== 알림 =====
   파스텔은 섹션 리듬 전용입니다. 알림은 흑백으로만 위계를 만듭니다.
   (같은 색이 '3단계'이면서 '성공'이면 색을 학습할 수 없습니다) */
.alert{
  background:var(--surface-soft);
  border-radius:var(--r-md);padding:var(--s-md);
  margin-bottom:var(--s-sm);
  font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body);
}
.alert b{display:block;font-weight:540;margin-bottom:var(--s-xxs)}
.alert a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* 진짜 중요한 것 하나만 반전시켜 화면에서 튀게 합니다 */
.alert.a-bad{background:var(--ink);color:var(--inverse-ink)}      /* 경고 */
.alert.a-warn{background:var(--surface-soft)}                     /* 주의 */
.alert.a-ok{background:var(--canvas);border:1px solid var(--hairline)}  /* 정보 */

/* ===== 버튼 행 ===== */
.btn-row{display:flex;gap:var(--s-xs);flex-wrap:wrap;margin-top:var(--s-md)}

.empty{padding:var(--s-xxl) 0;font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body)}
.empty b{font-weight:540}

/* ===== 노트 ===== */
/* 스터디 자료 카드 — 문서의 sticky-note 패턴.
   "pastel rectangles arranged like notes on a board — read as collage"
   섹션 블록이 아니라 보드 위의 메모지라, 여러 색이 나란히 놓여도 됩니다. */
.note-card{
  display:block;width:100%;text-align:left;
  border-radius:var(--r-lg);padding:var(--s-lg);margin-bottom:var(--s-sm);
  background:var(--surface-soft);
  transition:transform .12s ease;
}
.note-card:active{transform:scale(.99)}
.note-card:nth-child(6n+1){background:var(--lime)}
.note-card:nth-child(6n+2){background:var(--cream)}
.note-card:nth-child(6n+3){background:var(--mint)}
.note-card:nth-child(6n+4){background:var(--pink)}
.note-card:nth-child(6n+5){background:var(--lilac)}
.note-card:nth-child(6n+6){background:var(--coral)}
.note-card b{display:block;font-size:var(--fs-head);font-weight:540;letter-spacing:var(--ls-head);margin-bottom:var(--s-xxs)}
.note-card span{font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small)}

.doc{padding-bottom:var(--s-xxl);overflow-wrap:anywhere}
.doc h1{font-size:var(--fs-display);font-weight:340;line-height:1.05;letter-spacing:var(--ls-display);margin:var(--s-xl) 0 var(--s-md)}
.doc h2{font-size:var(--fs-title);font-weight:540;letter-spacing:var(--ls-title);margin:var(--s-xxl) 0 var(--s-sm);padding-top:var(--s-lg);border-top:1px solid var(--hairline)}
.doc h3{font-size:var(--fs-head);font-weight:540;letter-spacing:var(--ls-head);margin:var(--s-lg) 0 var(--s-xs)}
.doc p{margin:var(--s-sm) 0;font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body)}
.doc ul,.doc ol{padding-left:var(--s-lg);margin:var(--s-sm) 0}
.doc li{margin:var(--s-xxs) 0;font-size:var(--fs-body);font-weight:330}
.doc img{border-radius:var(--r-md);background:var(--canvas);margin:var(--s-md) 0;display:block}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.doc strong{font-weight:540}
.doc code{
  font-family:var(--mono);font-size:var(--fs-mono);
  background:var(--surface-soft);padding:2px 6px;border-radius:var(--r-xs);
}
.doc pre{
  font-family:var(--mono);font-size:var(--fs-mono);line-height:1.6;
  background:var(--surface-soft);padding:var(--s-md);
  border-radius:var(--r-md);overflow-x:auto;
}
.doc pre code{background:none;padding:0}
.doc blockquote{
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:var(--s-md);margin:var(--s-md) 0;font-size:var(--fs-body);
}
.doc blockquote p:first-child{margin-top:0}
.doc blockquote p:last-child{margin-bottom:0}
.doc hr{border:0;border-top:1px solid var(--hairline);margin:var(--s-xl) 0}
.tbl-wrap{overflow-x:auto;margin:var(--s-md) 0;-webkit-overflow-scrolling:touch}
.doc table{border-collapse:collapse;font-size:var(--fs-small);min-width:100%}
.doc th,.doc td{
  border-bottom:1px solid var(--hairline-soft);
  padding:10px var(--s-sm);text-align:left;vertical-align:top;white-space:nowrap;
}
.doc th{
  font-family:var(--mono);font-size:var(--fs-caption);font-weight:400;
  letter-spacing:var(--ls-caption);text-transform:uppercase;
  border-bottom:1px solid var(--hairline);white-space:nowrap;
}
.doc td:last-child,.doc th:last-child{white-space:normal;min-width:160px}
.doc input[type=checkbox]{accent-color:var(--ink);margin-right:var(--s-xxs)}

/* ===== 히어로 블록 =====
   각 탭의 대표 색을 씁니다. 하단 탭바의 활성 pill 과 같은 색이라
   지금 어느 탭에 있는지가 화면 위아래에서 함께 읽힙니다. */
.block-hero{
  background:var(--surface-soft);color:var(--ink);
  border-radius:var(--r-lg);padding:var(--s-xl) var(--s-lg);
  margin-bottom:var(--s-md);
}
#view-report .block-hero{background:var(--lime)}
#view-news   .block-hero{background:var(--cream)}

.block-hero h2{
  font-size:var(--fs-title);font-weight:540;
  letter-spacing:var(--ls-title);margin:var(--s-xs) 0 0;
}
.hero-eyebrow{
  margin:0;font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--ls-mono);text-transform:uppercase;opacity:.55;
}
.hero-d{
  margin:var(--s-md) 0 0;font-size:var(--fs-body);
  font-weight:330;letter-spacing:var(--ls-body);
}
.hero-rows{margin-top:var(--s-lg);border-top:1px solid rgba(0,0,0,.16)}
.hero-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-md);
  padding:12px 0;border-bottom:1px solid rgba(0,0,0,.1);
  font-size:var(--fs-body);font-weight:330;
}
.hero-row:last-child{border-bottom:0}
.hero-row b{font-size:var(--fs-head);font-weight:540;font-variant-numeric:tabular-nums}
.block-hero .primary{margin-top:var(--s-lg)}

/* ===== 뉴스 키워드 pill ===== */
.kw-row{display:flex;flex-wrap:wrap;gap:var(--s-xs);margin-bottom:var(--s-lg)}


/* ===== 메모 ===== */
.read-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-sm);padding-top:var(--s-lg);
}
#memo-read h1{
  font-size:var(--fs-display);font-weight:340;line-height:1.1;
  letter-spacing:var(--ls-display);margin:var(--s-lg) 0 var(--s-xs);
}
#memo-read .caption{margin:0 0 var(--s-lg);opacity:.55}
#memo-read-body:empty::before{
  content:"내용이 없습니다";opacity:.4;font-size:var(--fs-body);
}
.memo-card{
  display:block;width:100%;text-align:left;
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:var(--s-md);margin-bottom:var(--s-xs);
}
.memo-card b{display:block;font-size:var(--fs-head);font-weight:540;letter-spacing:var(--ls-head)}
.memo-card span{
  display:block;margin-top:var(--s-xxs);
  font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
}
.memo-empty{
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:var(--s-lg);font-size:var(--fs-body);font-weight:330;
}
textarea{
  width:100%;background:var(--canvas);color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:14px;font-family:inherit;font-size:var(--fs-body);font-weight:330;
  line-height:1.6;letter-spacing:var(--ls-body);resize:vertical;outline:0;
}
textarea:focus{border-color:var(--ink);outline:1px solid var(--ink)}


/* ===== 계정 시트 ===== */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.sheet{
  position:relative;width:100%;max-width:640px;
  background:var(--canvas);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s-xl) var(--s-lg) calc(var(--s-lg) + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;
  animation:up .24s ease;
}
@keyframes up{from{transform:translateY(24px)}}
.sheet h2{font-size:var(--fs-title);font-weight:540;letter-spacing:var(--ls-title);margin:var(--s-xs) 0 var(--s-sm)}
.sheet .hint{margin-bottom:var(--s-lg)}
.sheet .skip{margin-bottom:0}
.sheet .primary.wide{margin-top:var(--s-xs)}
.fineprint{
  margin:var(--s-md) 0 0;text-align:center;
  font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);opacity:.55;
}
/* 로그인 유지 체크박스 */
.check{
  display:flex;align-items:center;gap:var(--s-sm);
  min-height:44px;cursor:pointer;
  font-size:var(--fs-body);font-weight:330;letter-spacing:var(--ls-body);
}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:22px;height:22px;margin:0;
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--canvas);position:relative;cursor:pointer;
}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{
  content:"";position:absolute;left:7px;top:3px;
  width:5px;height:10px;border:solid var(--inverse-ink);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 입력칸에 딸린 체크 — 한 단 들여쓰고 조금 작게 */
.check.sub{
  min-height:38px;margin:calc(var(--s-md) * -1 + 2px) 0 var(--s-md) var(--s-sm);
  font-size:var(--fs-small);
}
.check.sub input{width:18px;height:18px}
.check.sub input:checked::after{left:5.5px;top:2px;width:4px;height:9px}

/* 제출 버튼 스피너 */
.sheet .primary.wide{margin-top:var(--s-xs)}
.spin{
  flex:none;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  /* 회전은 멈추되 진행 중임은 계속 보이게 둡니다 */
  .spin{animation:none;border-right-color:currentColor;opacity:.45}
}

/* 비밀번호 보기 토글 */
.eye{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:48px;align-self:stretch;
  border-left:1px solid var(--hairline);color:var(--ink);
}
.eye svg{width:20px;height:20px;opacity:.4;transition:opacity .15s ease}
/* 지금 상태를 그대로 보여줍니다 — 가려져 있으면 사선 눈, 보이면 뜬 눈 */
.eye .i-on{display:none}
.eye.on .i-off{display:none}
.eye.on .i-on{display:block}
.eye.on svg{opacity:1}

/* ===== 하단 탭 — 모노크롬, 그림자 없음 ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;background:var(--canvas);
  border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1;min-height:58px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-xxs);padding:6px 0 8px;color:var(--ink);
}
/* 아이콘을 감싼 pill — 선택된 탭에만 파스텔이 채워집니다 */
.ticon{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:30px;border-radius:var(--r-pill);
  transition:background .18s ease,transform .12s ease;
  background:transparent;
}
.ticon svg{width:21px;height:21px;display:block;transition:opacity .18s ease}
.tlabel{
  font-family:var(--mono);font-size:var(--fs-caption);font-weight:400;
  letter-spacing:var(--ls-caption);text-transform:uppercase;
  transition:opacity .18s ease;
}
/* 비활성 — 미드그레이 대신 불투명도로 낮춥니다 (문서 원칙) */
.tabbar button svg,.tabbar button .tlabel{opacity:.35}
.tabbar button.on svg{opacity:1}
.tabbar button.on .tlabel{opacity:1;font-weight:700}

.tabbar button.on[data-view="report"] .ticon{background:var(--lime)}
.tabbar button.on[data-view="news"]   .ticon{background:var(--cream)}
.tabbar button.on[data-view="memo"]   .ticon{background:var(--lilac)}

/* 누르는 순간 — 아직 선택되지 않은 탭도 색이 먼저 반응합니다 */
.tabbar button:active .ticon{transform:scale(.92)}
.tabbar button:active svg,.tabbar button:active .tlabel{opacity:1}
.tabbar button[data-view="report"]:active .ticon{background:var(--lime)}
.tabbar button[data-view="news"]:active   .ticon{background:var(--cream)}
.tabbar button[data-view="memo"]:active   .ticon{background:var(--lilac)}

.tabbar button:focus-visible .ticon{outline:2px solid var(--ink);outline-offset:2px}

/* ===== 토스트 — 검정 pill ===== */
.toast{
  position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:var(--ink);color:var(--inverse-ink);
  padding:12px var(--s-lg);border-radius:var(--r-pill);
  font-size:var(--fs-small);font-weight:480;letter-spacing:var(--ls-small);
  white-space:nowrap;z-index:50;animation:pop .2s ease;
}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}