/* ============================================================
   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;

  /* --- 차트 마크 ---
     문서는 팔레트 밖의 새 색을 금지합니다. 그래서 새 색을 만들지 않고
     잉크(--ink) 한 색의 농도만 달리해 4단계를 씁니다.
     파스텔로는 카테고리를 구분할 수 없었습니다 — 검증 결과 정상 시력에서도
     인접 색이 ΔE 6.3(하드 실패), 색각이상에서는 0.9 였습니다.
     농도 4단계는 ΔE 15.5 로 통과합니다. 그 이상은 '기타' 로 접습니다. */
  --m1:rgba(0,0,0,1); --m2:rgba(0,0,0,.66); --m3:rgba(0,0,0,.38); --m4:rgba(0,0,0,.18);
  --m-track:var(--hairline-soft);

  /* --- 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)}
.topbar-acts{display:flex;gap:var(--s-xs);flex:none}
.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)}

/* 컬러블록 위 보조 설명 — 흰 종이를 얹은 느낌 */
.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}

/* 잔액과 월 납입을 나란히 — 한 항목이 두 칸을 씁니다 */
.field.pair{display:block;margin-bottom:var(--s-md)}
.field.pair > span{display:block;font-size:var(--fs-body);font-weight:480;margin-bottom:var(--s-xs);letter-spacing:var(--ls-body)}
.pair-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xs)}
.pair-row label{display:block;min-width:0}
.pair-row .input-wrap input{padding:12px;font-size:var(--fs-body)}
.pair-row .input-wrap em{padding-right:10px}

/* 빚 — 체크한 것만 칸이 열립니다 */
.debt-picks{margin:var(--s-md) 0 var(--s-lg)}
/* 두 줄짜리 항목이라 체크박스를 첫 줄에 맞추고, 예시는 아래로 내려 이름과 구분합니다 */
.debt-picks .check{align-items:flex-start;min-height:0;padding:var(--s-xs) 0}
.debt-picks .check input{margin-top:2px}
.debt-picks .check span{font-weight:480}
.debt-picks .check i{
  display:block;font-style:normal;font-weight:330;
  font-size:var(--fs-small);letter-spacing:var(--ls-small);opacity:.6;margin-top:2px;
}
.debt-panel{margin-bottom:var(--s-lg)}
.debt-panel .solo{display:block;margin-bottom:var(--s-xs)}
.debt-panel .tip{margin-top:var(--s-xs)}
/* 값 옆에 붙는 짧은 단서 — 본문보다 한 단 내려 읽습니다 */
.sub-note{
  font-style:normal;font-family:var(--mono);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);opacity:.6;
}
.calc-out .sub-note{margin-left:var(--s-xs)}
.link-btn{
  display:inline-block;margin-top:var(--s-xs);padding:0;
  background:none;border:0;color:inherit;font:inherit;font-weight:540;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.cap{
  display:block;margin-bottom:5px;font-style:normal;
  font-family:var(--mono);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);text-transform:uppercase;opacity:.6;
}

/* 입력값의 실제 금액 — 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{font-weight:540}
.warn > b:first-child{display:block;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}

.lead{
  margin:0;font-size:var(--fs-display);font-weight:340;
  line-height:1;letter-spacing:var(--ls-display);
}
.lead small{font-size:var(--fs-head);font-weight:480;margin-left:var(--s-xxs)}

/* ===== 가로 스택바 =====
   부분-전체를 보여주는 기본 형태입니다. 파이는 쓰지 않습니다 —
   비슷한 값끼리 비교가 안 되고, 조각이 둘이면 막대만 못합니다. */
.sbar{
  display:flex;gap:2px;height:20px;margin:var(--s-md) 0 var(--s-sm);
  background:var(--canvas);
  /* 밝은 마지막 조각이 흰 바탕에 묻히지 않도록 테두리로 끝을 알려 줍니다 */
  outline:1px solid var(--hairline);outline-offset:0;border-radius:var(--r-sm);
}
.sbar > i{
  display:block;min-width:2px;background:var(--m1);
  transition:flex-basis .4s ease;
}
.sbar > i:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.sbar > i:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.sbar > i:only-child{border-radius:var(--r-sm)}
.sbar > i.s2{background:var(--m2)}
.sbar > i.s3{background:var(--m3)}
.sbar > i.s4{background:var(--m4)}

/* 직접 라벨 — 색만으로 구분하지 않기 위해 항상 붙입니다 */
.skey{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-xs) var(--s-md)}
.skey > div{display:flex;align-items:baseline;gap:var(--s-xs);font-size:var(--fs-small);font-weight:330}
.skey i{
  flex:none;width:10px;height:10px;border-radius:var(--r-xs);
  background:var(--m1);transform:translateY(1px);
}
.skey i.s2{background:var(--m2)}
.skey i.s3{background:var(--m3)}
.skey i.s4{background:var(--m4)}
.skey span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skey b{font-weight:540;font-variant-numeric:tabular-nums}

/* ===== 미터 — 한계 대비 하나의 비율 ===== */
.meter{margin:var(--s-md) 0 var(--s-xs)}
.meter-track{
  position:relative;height:10px;border-radius:var(--r-full);
  background:var(--m-track);overflow:hidden;
}
.meter-fill{
  display:block;height:100%;border-radius:var(--r-full);
  background:var(--ink);transition:width .5s ease;
}
.meter-mark{
  position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.45;
}
.meter-legend{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);opacity:.6;margin-top:5px;
}

/* ===== 추이 막대 ===== */
.trend{display:flex;align-items:flex-end;gap:3px;height:92px;margin:var(--s-md) 0 var(--s-xs)}
.trend > div{
  flex:1;min-height:3px;background:var(--m3);
  border-radius:var(--r-sm) var(--r-sm) 0 0;transition:height .4s ease;
}
.trend > div.now{background:var(--ink)}
.trend > div.neg{background:repeating-linear-gradient(45deg,var(--m2),var(--m2) 2px,transparent 2px,transparent 4px)}
.trend-x{display:flex;gap:3px;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);opacity:.55}
.trend-x span{flex:1;text-align:center;overflow:hidden}

/* ===== 할 일 =====
   흩어져 있던 안내를 한곳에 모은 목록입니다. */
.todo{border-top:1px solid var(--hairline)}
.todo-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:var(--s-md);width:100%;text-align:left;
  padding:var(--s-md) 0;border-bottom:1px solid var(--hairline-soft);
  font-family:inherit;
}
.todo-item:last-child{border-bottom:1px solid var(--hairline)}
.todo-item:active{background:var(--surface-soft)}
.todo-item > i{
  font-style:normal;flex:none;
  width:24px;height:24px;border-radius:var(--r-full);
  background:var(--ink);color:var(--inverse-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-caption);
}
.todo-item span{font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small)}
.todo-item span b{display:block;font-size:var(--fs-body);font-weight:540;margin-bottom:2px}
.todo-item > em{font-style:normal;opacity:.35;align-self:center}
.todo-item.quiet > i{background:var(--surface-soft);color:var(--ink)}
.todo-item.quiet span b{font-weight:480}

/* ===== 접이식 상세 ===== */
.fold{border-bottom:1px solid var(--hairline)}
.fold:first-of-type{border-top:1px solid var(--hairline);margin-top:var(--s-xxl)}
.fold summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);
  padding:var(--s-md) 0;min-height:52px;
  font-size:var(--fs-body);font-weight:480;letter-spacing:var(--ls-body);
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";font-family:var(--mono);font-size:var(--fs-head);opacity:.5}
.fold[open] summary::after{content:"−"}
.fold-body{padding:0 0 var(--s-lg)}
.sub-title{
  margin:var(--s-lg) 0 var(--s-xs);
  font-size:var(--fs-body);font-weight:540;letter-spacing:var(--ls-body);
}

/* ===== 청년 지원 ===== */
.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}

/* 스파크라인 — 검정 막대 */

/* ===== 알림 =====
   파스텔은 섹션 리듬 전용입니다. 알림은 흑백으로만 위계를 만듭니다.
   (같은 색이 '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{font-weight:540}
.alert > b:first-child{display:block;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 hr + h2{border-top:0;padding-top:0;margin-top:var(--s-lg)}
.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:normal;word-break:keep-all;
}
.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:first-child{white-space:nowrap}
/* 설명 열은 모두 같은 최소 폭을 가져야 합니다.
   마지막 열에만 최소 폭을 주면 그 열이 폭을 독점해 앞 열이 한 글자씩 쪼개집니다 */
.doc td:not(:first-child),.doc th:not(:first-child){min-width:112px}
.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-big{
  margin:var(--s-xs) 0 0;font-size:var(--fs-metric);font-weight:340;
  line-height:1;letter-spacing:var(--ls-metric);font-variant-numeric:tabular-nums;
}
.hero-big small{font-size:var(--fs-head);font-weight:480;margin-left:var(--s-xxs)}
.block-hero .bar{background:rgba(0,0,0,.14);margin-top:var(--s-md)}
.hero-note{margin:var(--s-sm) 0 0;font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small)}
/* 보조 지표 셋을 한 줄에 */
.hero-sub{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-sm);
  margin-top:var(--s-lg);padding-top:var(--s-md);
  border-top:1px solid rgba(0,0,0,.16);
}
.hero-sub em{
  display:block;font-family:var(--mono);font-style:normal;
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  text-transform:uppercase;opacity:.6;margin-bottom:3px;
}
.hero-sub b{font-size:var(--fs-body);font-weight:540;font-variant-numeric:tabular-nums}

.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)}


/* ===== 노트 위에 그리기 =====
   임시 낙서용입니다. 끄면 사라집니다. */
.drawlayer{
  position:absolute;inset:0;z-index:5;
  touch-action:none;cursor:crosshair;
}
.drawlayer.pass{pointer-events:none;cursor:auto}
body.drawing{overscroll-behavior:contain}

.drawbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(72px + env(safe-area-inset-bottom));
  z-index:40;display:flex;align-items:center;gap:var(--s-xs);
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:var(--s-xs);
  max-width:calc(100vw - var(--s-lg) * 2);
}
.pen{
  width:32px;height:32px;flex:none;border-radius:var(--r-full);
  background:var(--pen);border:2px solid var(--canvas);
  outline:1px solid var(--hairline);
}
.pen.on{outline:2px solid var(--ink);transform:scale(1.12)}
.dtool{
  min-height:32px;padding:6px var(--s-sm);flex:none;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--canvas);color:var(--ink);
  font-family:inherit;font-size:var(--fs-caption);font-weight:480;
  white-space:nowrap;
}
.dtool.on{background:var(--ink);border-color:var(--ink);color:var(--inverse-ink)}
.dtool.solid{background:var(--ink);border-color:var(--ink);color:var(--inverse-ink)}

/* ===== 사전 테스트 ===== */
.qtitle{font-size:var(--fs-title);font-weight:540;letter-spacing:var(--ls-title);margin:var(--s-lg) 0 var(--s-md)}
.qitem{
  background:var(--surface-soft);border-radius:var(--r-md);
  padding:var(--s-md);margin-bottom:var(--s-sm);
}
.qq{margin:0 0 var(--s-xs);font-size:var(--fs-body);font-weight:540;letter-spacing:var(--ls-body)}
.qhint{margin:0 0 var(--s-sm);font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small);opacity:.7}

/* 선택지 — 전부 pill */
.qpick{display:flex;flex-wrap:wrap;gap:var(--s-xxs);margin-top:var(--s-xs)}
.qopt{
  flex:1 1 auto;min-height:44px;padding:10px var(--s-sm);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--canvas);color:var(--ink);
  font-family:inherit;font-size:var(--fs-small);font-weight:480;letter-spacing:var(--ls-small);
  white-space:nowrap;
}
.qopt.on{background:var(--ink);border-color:var(--ink);color:var(--inverse-ink)}
.qpick.sm .qopt{min-height:38px;padding:7px var(--s-xs);font-size:var(--fs-caption);flex:1 1 0}

/* 문항 안의 각 줄 */
.qrow{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-sm);
  padding:var(--s-xs) 0;border-top:1px solid var(--hairline);
}
.qrow:first-of-type{border-top:0}
.qrow > span{font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small)}
.qrow.stack{grid-template-columns:1fr}
.qrow.stack .qpick{margin-top:var(--s-xxs)}
.qtri{display:flex;gap:var(--s-xxs);margin-top:var(--s-xxs)}
.qtri .qopt{flex:1 1 0;min-height:38px;padding:7px var(--s-xxs);font-size:var(--fs-caption)}

/* 영역별 항목 점검 목록 */
.qchecks{border-top:1px solid var(--hairline);margin-bottom:var(--s-lg)}
.qcheck{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-sm);
  padding:var(--s-sm) 0;border-bottom:1px solid var(--hairline-soft);
}
.qcheck > i{
  font-style:normal;width:20px;height:20px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--inverse-ink);
  font-size:var(--fs-caption);flex:none;
}
.qcheck.ok > i{background:var(--surface-soft);color:var(--ink)}
.qcheck span{font-size:var(--fs-small);font-weight:330;letter-spacing:var(--ls-small)}
.qcheck span b{display:block;font-weight:540;margin-bottom:2px}
.qcheck.ok span b{font-weight:480}

/* 결과 막대 */
.qbar{margin-bottom:var(--s-md)}
.qbar-top{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--s-xs);font-size:var(--fs-small);font-weight:330;
}
.qbar-top b{font-weight:540;font-variant-numeric:tabular-nums}

/* ===== 계정 시트 ===== */
.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}
}

/* 색 블록은 좁은 화면에서 가장자리까지 흐릅니다 (문서 Mobile-L 규칙).
   문서는 색 블록 뒤에 흰 캔버스를 {spacing.section} 만큼 두라고 정하고 있습니다.
   — "Between every colored panel and the next, the page returns to white
      canvas with {spacing.section} of breathing room."
   그 여백이 없으면 블록만 화면에 붙고 아래 항목과 어긋나 보입니다. */
@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)}
  .block-hero{margin-bottom:var(--s-sec)}
}

/* 인쇄 전용 창의 머리말 — 화면에서는 버튼이 있는 .print-top 이 대신합니다 */
.pr-h1{font-size:var(--fs-title);font-weight:540;letter-spacing:var(--ls-title)}
.pr-head{display:none}

/* ===== 인쇄 · PDF 저장 =====
   브라우저의 «PDF로 저장»을 그대로 씁니다. 화면에서 누르는 것들만 걷어내고
   막대·미터처럼 배경색으로 그린 그림은 잉크가 나오도록 따로 지정합니다. */
.print-only{display:none}
@media print{
  .tabbar,.sheet-wrap,.toast,.topbar-acts,.btn-row,
  .todo-item > em,.primary,.ghost,.solid,.link-btn{display:none !important}
  .print-only,.pr-head{display:block}
  .pr-head{margin-bottom:var(--s-lg)}
  /* 화면 밖으로 접어둔 것도 종이에는 다 실립니다 */
  .fold summary::after,.fold[open] summary::after{content:""}
  .view{padding:0}
  body{background:#fff}
  /* 제목이 페이지 끝에 홀로 남거나, 그림이 두 장에 걸쳐 잘리지 않게 합니다 */
  .sec-title{break-after:avoid}
  .sbar,.skey,.meter,.rows,.warn,.todo-item,.trend,.lead,.block-hero{break-inside:avoid}
  /* 기본값이면 배경이 안 찍혀서 막대가 빈 칸으로 나옵니다 */
  .sbar i,.meter-fill,.meter-track,.meter-mark,.trend > div,
  .todo-item > i,.block-hero,.warn.hard{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--fs-caption)}
}