/* / (홈) 의 스타일.

   2026-08-28 까지 장 안에 <style> 로 있었다. CSP 의
   `style-src 'self'`(unsafe-inline 없이)가 인라인 <style> 을 막는다 —
   스크립트와 같다. **한 글자도 안 바꿨다.** */

/* ── 페이지 사이를 옮겨 다닐 때 ─────────────────────────────────────
   같은 Optra 안에서 움직이는 느낌이 나야 한다. 차림표와 바닥글에 이름을
   주면 브라우저가 그 둘을 "같은 것" 으로 알아보고 그대로 둔 채 본문만
   바꾼다. 지원하지 않는 브라우저는 예전처럼 그냥 넘어간다 — 깨지지 않는다. */
@view-transition{navigation:auto}
.nav{view-transition-name:optra-nav}
footer{view-transition-name:optra-foot}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

:root{
  --ink:#0B1A21;
  --ink-2:#3D5560;
  --ink-3:#6E858F;
  --line:#DBE4E7;
  --line-2:#EDF2F3;
  --bg:#FFFFFF;
  --bg-2:#F4F8F8;
  --bg-3:#E8F0F1;
  --brand:#0C6B70;
  --brand-d:#084C50;
  --ok:#1B7A4C;
  --warn:#A96A0E;
  --ng:#B2342A;
  --sans:'IBM Plex Sans KR',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans KR',monospace;
}
*{box-sizing:border-box}
/* 700 은 싣지 않는다(DESIGN.md §3) — 가짜 굵게를 막는다 */
b,strong{font-weight:600}
/* 줄바꿈을 브라우저가 고르게 나눠 잡게 한다 — 마지막 줄에 한 낱말만
   떨어지는 것을 막는다. */
h1,h2,h3,h4{text-wrap:balance}
p,.sub,.tdesc{text-wrap:pretty}

html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--bg);
  line-height:1.7;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit}
button{font-family:inherit}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* **배너는 좁히지 않는다.** 본문은 1200 으로 내렸지만(DESIGN.md 4절) 차림표는
   1600 그대로다 — 배너는 읽는 것이 아니라 장을 이고 있는 띠라서, 본문과 같이
   좁히면 로고가 안쪽으로 들어와 장이 시작되기 전에 한 번 더 접힌 것처럼
   보인다. 띠는 화면을 물고, 글은 가운데로 모인다. (2026-08-29 정현님 지시)
   **다섯 파일이 같은 값이다** — 여기서 혼자 바꾸면 장을 옮길 때 로고가 튄다. */
.nav .wrap{max-width:1600px;display:flex;align-items:center;gap:34px;height:62px}
.logo{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:.13em;
  text-decoration:none;cursor:pointer}
.logo i{font-style:normal;color:var(--brand)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-2)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--brand)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
/* 로그인 상태. account.js 가 /api/me 에 물어 채운다. 채워지기 전에는 비워 둔다 —
   "로그인" 이 보였다가 "마이페이지" 로 바뀌면 깜빡임이 된다. */
.nav .who{font-size:14px;color:var(--ink-2)}
.nav .who[hidden]{display:none}
.btn{display:inline-block;border:1px solid var(--brand);background:var(--brand);color:#fff;
  padding:9px 18px;font-size:14px;font-weight:500;border-radius:3px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--bg-3);color:var(--brand-d)}
@media(max-width:880px){.nav ul{display:none}}

/* hero */
.hero{padding:64px 0 0;text-align:center;background:linear-gradient(180deg,#F4F8F8 0%,#FFFFFF 100%)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--brand);margin-bottom:18px}
.hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.28;letter-spacing:-.03em;font-weight:600;
  margin:0 auto 20px}
.hero h1 span{color:var(--brand)}
/* 폭은 px 로 잡는다 — ch 는 숫자 0 한 글자라 한글의 절반이다 (DESIGN.md §4).
   96ch 는 979px 이었고, 13px 이 모자라 문장이 90:10 으로 접혔다.
   balance 는 그래도 접히는 폭에서 두 줄을 고르게 나눈다. */
.hero p{font-size:17px;color:var(--ink-2);max-width:1040px;margin:0 auto 28px;
  text-wrap:balance}
.herobtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.tryhint{font-size:13px;color:var(--ink-3);margin:0 0 30px}

/* app window */
.app{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(11,26,33,.04),0 18px 44px -18px rgba(11,26,33,.22);
  text-align:left;margin-bottom:-70px;position:relative;z-index:2}
.appbar{display:flex;align-items:center;gap:14px;padding:0 16px;height:46px;
  background:var(--ink);color:#CBDBDD}
.appbar .t{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.appbar .t b{color:#fff;font-weight:500}
/* 맛보기는 보 하나만 본다 — 도구 장은 보·슬래브·기둥 셋이다. 이름만
   같으면 같은 것으로 읽히므로 여기서 갈라 적는다(2026-09-08). */
.appbar .t .tsub{margin-left:8px;padding:1px 6px;border-radius:3px;
  background:rgba(255,255,255,.10);color:#9FB6BC;font-size:11px;letter-spacing:.04em}
.appbar .proj{margin-left:auto;font-size:12px;color:#7D989D}
.appgrid{display:grid;grid-template-columns:320px minmax(0,1fr) 400px}
.pane{padding:18px 18px 22px}
.pane + .pane{border-left:1px solid var(--line)}
.paneh{font-size:11px;font-family:var(--mono);letter-spacing:.13em;color:var(--ink-3);
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center}

/* inputs */
.grp{font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.04em;margin:16px 0 7px}
.grp:first-of-type{margin-top:0}
.f{display:grid;grid-template-columns:1fr 84px 40px;align-items:center;gap:8px;
  padding:5px 0;font-size:13.5px}
.f label{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f input,.f select{font-family:var(--mono);font-size:13.5px;text-align:right;
  border:1px solid var(--line);border-radius:3px;padding:5px 7px;width:100%;
  background:#fff;color:var(--ink)}
.f select{text-align:left;padding:5px 4px}
.f input:focus,.f select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.f .u{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.optbtn{width:100%;margin-top:18px;border:1px solid var(--brand);background:#fff;color:var(--brand);
  padding:9px;font-size:13.5px;font-weight:500;border-radius:3px;cursor:pointer}
.optbtn:hover{background:var(--brand);color:#fff}

/* verdict */
.verdict{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.verdict .big{font-family:var(--mono);font-size:42px;font-weight:600;letter-spacing:-.03em;line-height:1}
.pill{font-family:var(--mono);font-size:12px;font-weight:500;padding:3px 10px;border-radius:2px;color:#fff}
.gov{font-size:12.5px;color:var(--ink-3);margin:0 0 20px}
.check{margin-bottom:15px}
.crow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:5px}
.crow .nm{color:var(--ink-2)}
.crow .vs{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.bar{height:7px;background:var(--bg-3);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:2px;transition:width .35s ease}
.limit{font-size:11.5px;color:var(--ink-3);font-family:var(--mono);margin-top:14px;
  border-top:1px solid var(--line-2);padding-top:12px}

/* trace */
.trace{max-height:352px;overflow-y:auto;padding-right:4px}
.tstep{border-bottom:1px solid var(--line-2);padding:10px 0}
.tstep:last-child{border-bottom:0}
.tstep .th{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px}
.tstep .th b{font-weight:500}
.tstep .th em{font-style:normal;font-family:var(--mono);color:var(--brand);white-space:nowrap;font-size:12.5px}
.tstep pre{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-2);
  margin:7px 0 0;white-space:pre-wrap;word-break:break-word}
.ref{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--brand);
  border:1px solid var(--line);padding:0 5px;border-radius:2px;margin-top:6px}
#sect{display:block;margin:0 auto}
.seccap{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:6px}
@media(max-width:1000px){
  .appgrid{grid-template-columns:1fr 1fr}
  .pane:nth-child(3){border-left:0;border-top:1px solid var(--line);grid-column:1/-1}
}
@media(max-width:700px){
  .appgrid{grid-template-columns:1fr}
  .pane + .pane{border-left:0;border-top:1px solid var(--line)}
  .app{margin-bottom:-40px}

  /* 세로로 한 줄이 되면 **답이 두 화면 아래**로 내려간다. 390px 에서 재 보니
     첫 검토비까지 1,283px 이었다 — "아래 프로그램은 실제로 동작합니다" 라고
     해 놓고 그 증거가 스크롤 두 번 뒤에 있었다. 그래서 셋의 순서를 바꾼다:
     **답 → 입력 → 계산서.** 계산기에서 눈이 먼저 가야 하는 것은 답이고,
     입력은 그 답을 바꾸는 손잡이다. */
  /* 순서를 바꾸면 `.pane + .pane` 의 칸막이가 엉뚱한 자리에 남는다.
     보이는 차례대로 다시 긋는다 — 맨 위만 없고 나머지 둘은 있다. */
  .pane:nth-child(1){order:2;border-top:1px solid var(--line)}
  .pane:nth-child(2){order:1;border-top:0}
  .pane:nth-child(3){order:3;border-top:1px solid var(--line)}

  /* 입력 열한 줄이 세로로 서면 그것만 657px 이다. **둘씩 짝지어 놓는다** —
     경간·부담폭, 폭·춤, 고정·활, fck·fy, 주근·본수. 원래 짝인 것들이라
     나란히 두는 편이 읽기도 낫다. 무리 이름은 두 칸을 걸친다. */
  .pane:nth-child(1) > .grp,
  .pane:nth-child(1) > .optbtn{grid-column:1/-1}
  .pane:nth-child(1){display:grid;grid-template-columns:1fr 1fr;
    column-gap:14px;align-content:start}
  .pane:nth-child(1) > .paneh{grid-column:1/-1}
  /* 한 줄에 이름·값·단위를 다 넣으면 150px 안에서 이름이 잘린다
     ("고정하중" 이 "고정…" 이 됐다). **이름을 값 위로 올린다** — 두 줄이
     되지만 폭이 도로 넉넉해져 어느 것도 안 잘린다. */
  .f{grid-template-columns:1fr auto;gap:3px 6px;padding:4px 0;font-size:13px}
  .f label{grid-column:1/-1;font-size:11.5px;color:var(--ink-3)}
  .f .u{font-size:11px}

  /* 계산서는 제 안에서 스크롤한다. 화면이 좁으면 그 창도 낮춘다. */
  .trace{max-height:260px}
}

/* sections */
section{padding:96px 0}
.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pad-first{padding-top:130px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;color:var(--brand);margin-bottom:12px}
h2{font-size:clamp(23px,3vw,32px);font-weight:600;letter-spacing:-.025em;margin:0 0 14px}
.sub{font-size:16px;color:var(--ink-2);margin:0}

/* table */
table{width:100%;border-collapse:collapse;margin-top:40px;font-size:14.5px;background:#fff;
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
thead th{background:var(--bg-2);font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;color:var(--ink-3);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
tbody td{padding:16px;border-bottom:1px solid var(--line-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
.tname{font-weight:500}
.tdesc{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.code{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.state{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:2px;white-space:nowrap;
  border:1px solid currentColor}
.s1{color:var(--ok)}.s2{color:var(--warn)}.s3{color:var(--ink-3)}
@media(max-width:680px){
  thead{display:none}
  tbody td{display:block;padding:3px 16px;border:0}
  tbody tr{display:block;padding:16px 0;border-bottom:1px solid var(--line-2)}
}

/* 이름 — 글자만 남기고 풀이는 아래 흐름 세 칸이 든다.
   2026-08-29 까지 여기에 `OPT / R / A` 세 줄짜리 표가 있었다. 표는 위에서
   아래로 **OPT → R → A** 로 읽히는데 바로 위 소개 문장은 "건축에서 출발해
   구조로 나누고 그 숫자로 찾는다" 였다 — 말과 그림이 반대였다(정현님이
   그림 제안을 보다 짚었다). 흐름은 문장의 순서를 따른다. */
.wm{margin-top:44px}
.wmword{font-family:var(--mono);font-weight:600;color:var(--ink);line-height:1;
  font-size:clamp(30px,4.6vw,50px);letter-spacing:.2em;display:flex;gap:12px;margin-bottom:38px}
.wmword span{border-bottom:2px solid var(--brand);padding-bottom:10px}

/* ── 소개 절 — 흐름 · 구조 도면 · 검토⟷탐색 · 원칙 넷 ────────────────

   DESIGN.md 를 지킨다: 그라디언트 없음 · 이모지/아이콘 없음 · 컬러 배경 카드
   없음 · 선은 1px --line · 색은 --brand 하나에 --ink 계열. 그림은 인라인 SVG
   이고 값은 클래스로만 준다 — CSP 의 style-src 'self' 가 style="" 를 막는다. */

/* ── 그림 공통 ─────────────────────────────────────────────────────── */
.dg{width:100%;height:auto;display:block}
/* 작은 그림은 **제 크기를 넘겨 키우지 않는다.** viewBox 를 실제 폭에 맞춰
   그렸는데 칸이 넓으면 그대로 확대돼 글자가 두 배가 된다(C안 2×2 에서 났다). */
.pcell .art .dg{max-width:272px}
.dg .ln{stroke:var(--line);stroke-width:1;fill:none}
.dg .ln-2{stroke:var(--line-2);stroke-width:1;fill:none}
.dg .ln-d{stroke:var(--ink-3);stroke-width:1;fill:none;stroke-dasharray:4 4}
.dg .bx{fill:#fff;stroke:var(--line);stroke-width:1}
.dg .ar{fill:var(--ink-3)}
.dg .track{fill:var(--bg-3)}
.dg .fill{fill:var(--ink-3)}
.dg .fill-b{fill:var(--brand)}
.dg text{font-family:var(--sans);font-size:13px;fill:var(--ink-2)}
.dg .t-ko{font-size:14px;fill:var(--ink);font-weight:500}
.dg .t-mono{font-family:var(--mono);font-size:11.5px;fill:var(--ink-3);letter-spacing:.06em}
.dg .t-brand{fill:var(--brand)}
.dg .t-sm{font-size:11.5px;fill:var(--ink-3)}
.dg .t-big{font-family:var(--mono);font-size:19px;font-weight:600;fill:var(--ink)}

/* ── ① 이름을 흐름으로 ──────────────────────────────────────────────
   지금 표는 OPT→R→A 로 읽히는데, 소개 문장은 A→R→OPT 로 말한다.
   그림은 문장의 순서를 따른다. 이름은 위에 그대로 둔다. */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:34px}
.flow > div{padding:26px 24px 24px;border-left:1px solid var(--line);position:relative}
.flow > div:first-child{border-left:0}
.flowk{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ink-3);
  margin-bottom:10px}
.flowk b{color:var(--brand);font-weight:600;font-size:15px;letter-spacing:.1em}
.flow h3{margin:0 0 8px;font-size:19px;font-weight:600}
.flow p{margin:0;font-size:14px;color:var(--ink-2)}
.flow .step{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--brand);
  border-top:1px solid var(--line-2);margin-top:16px;padding-top:12px}
@media(max-width:820px){
  .flow{grid-template-columns:1fr}
  .flow > div{border-left:0;border-top:1px solid var(--line)}
  .flow > div:first-child{border-top:0}
}

/* ── 원칙 — 2×2 격자 판 ───────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:40px}
.pcell{background:#fff;padding:24px 24px 20px;display:flex;flex-direction:column}
.pcell .n{font-family:var(--mono);font-size:11.5px;color:var(--brand);margin-bottom:9px}
.pcell h4{margin:0 0 5px;font-size:16.5px;font-weight:500}
.pcell p{margin:0 0 16px;font-size:14px;color:var(--ink-2)}
.pcell .art{margin-top:auto;border-top:1px solid var(--line-2);padding-top:16px}
@media(max-width:820px){.pgrid{grid-template-columns:1fr}}

/* 소개 아래로 한 단 들여쓴 블록 */
.under{margin-top:60px;padding-left:38px;border-left:1px solid var(--line)}
.under h3{margin:0 0 9px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.under .pgrid{margin-top:28px}
@media(max-width:640px){.under{padding-left:20px}}

.clients-note{margin:20px 0 0;font-size:13.5px;color:var(--ink-3)}

/* 연결 방법 3열 */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:40px}
.client{background:#fff;padding:26px 24px 26px;display:flex;flex-direction:column}
.client .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
.client h4{margin:0;font-size:17px;font-weight:600}
.client p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2)}
.client .where{margin-top:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  border-top:1px solid var(--line-2);padding-top:12px;word-break:break-all;line-height:1.7}
.client .where b{display:block;color:var(--ink-2);font-weight:400}
@media(max-width:820px){.clients{grid-template-columns:1fr}}


/* cta */
.cta{text-align:center;background:var(--ink);color:#fff;padding:76px 0}
.cta h2{color:#fff;margin:0 auto 14px;max-width:40ch}
.cta p{color:#A8C2C6;font-size:16px;max-width:80ch;margin:0 auto 26px}
/* **가운데 정렬 글은 `pretty` 로는 모자란다.** `pretty` 는 마지막 줄에 낱말
   하나만 떨어지는 것만 막는데, CTA 문단이 "…바로 쓸 / 수 있습니다." 로 갈려
   둘째 줄이 다섯 자만 남았다(2026-09-10). 가운데 정렬이라 더 눈에 띈다.
   `balance` 가 문장 경계에서 접는다.

   **`balance` 만 켜면 이번엔 `보` / `·슬래브` 로 갈린다** — `word-break:keep-all`
   은 한글 음절 사이만 막고 가운뎃점은 못 막는다. 붙여 쓴 것은 `.nb` 로 묶는다
   (도구 장은 `registry.js` 의 knitLede() 가 같은 일을 자동으로 한다). */
.cta h2,.cta p{text-wrap:balance}
/* 붙여 쓴 가운뎃점 묶음이 갈리지 않게 — 빈칸이 있는 `·` 는 정상 줄바꿈 자리다 */
.nb{white-space:nowrap}
.cta .btn{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn:hover{background:#D6E7E8;border-color:#D6E7E8;color:var(--ink)}

footer{border-top:1px solid var(--line);padding:30px 0 56px}
/* 바닥글도 배너와 같은 폭이다 — 위아래 띠가 짝이다. 위는 화면을 물고 아래만
   안으로 들어오면 장을 감싸던 틀이 아래에서 끊긴다. 본문만 1200 으로 모인다. */
footer .wrap{max-width:1600px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
footer a{color:var(--brand);text-decoration:none}
footer a:hover{text-decoration:underline}
.fmeta{display:flex;gap:18px;flex-wrap:wrap}
.flegal{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.fnote{flex:1 0 100%;margin:6px 0 0;font-family:var(--sans);font-size:12px;
  color:var(--ink-3);line-height:1.7;max-width:none}
@media(max-width:760px){.flegal{margin-left:0}}
/* intro — 로고가 중앙에서 배너 자리로 간다.
   JS 가 만들어 붙인다. 스크립트가 꺼져 있으면 아예 생기지 않는다. */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
/* 흰 바탕만 걷힌다. 로고는 덮개와 같이 사라지면 안 되므로 따로 둔다. */
.intro::before{content:"";position:absolute;inset:0;background:var(--bg);
  transition:opacity .5s ease}
.intro.out::before{opacity:0}
.intro-mark{position:relative;font-family:var(--mono);font-weight:600;letter-spacing:.13em;
  color:var(--ink);font-size:clamp(30px,4.6vw,50px);line-height:1;
  transform-origin:top left;will-change:transform;
  transition:transform .8s cubic-bezier(.62,.02,.2,1)}
.intro-mark i{font-style:normal;color:var(--brand)}
html.intro-on{overflow:hidden}
html.intro-on .nav .logo{visibility:hidden}
html.intro-on .scrollbar{opacity:0}

/* 스크롤 표시기 — 네이티브 스크롤바는 지우고 자리를 안 먹는 것으로 대신한다.
   폭을 차지하지 않으니 나타나고 사라져도 가운데 정렬이 밀리지 않는다. */
html{scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0}
.scrollbar{position:fixed;top:10px;right:6px;bottom:10px;width:4px;z-index:60;
  opacity:.2;transition:opacity .35s ease}
.scrollbar.on{opacity:.55}
.scrollbar:hover,.scrollbar.drag{opacity:.85}
.scrollbar i{display:block;width:100%;border-radius:2px;background:var(--ink-3);cursor:grab}
.scrollbar.drag i{cursor:grabbing}

/* 계산서 안쪽 스크롤도 같은 결로 맞춘다 */
.trace{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.trace::-webkit-scrollbar{width:4px}
.trace::-webkit-scrollbar-track{background:transparent}
.trace::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

@media(max-width:760px){
  .wrap{padding:0 20px}
  /* 섹션 여백은 모바일 64px (DESIGN.md §4) — 화면이 좁을수록 빈 곳이 아깝다 */
  section{padding:64px 0}
  .pad-first{padding-top:92px}
  .cta{padding:56px 0}
  .hero{padding-top:44px}
  /* 앱 창 타이틀바 — 46px 에 두 줄이 눌려 들어가 겹쳤다. 키를 글에 맡긴다 */
  .appbar{height:auto;min-height:46px;padding:10px 14px;align-items:baseline;
    flex-wrap:wrap;gap:3px 12px}
  .appbar .proj{margin-left:0;flex:1 0 100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ── 인라인 대신 쓰는 잔 규칙 ─────────────────────────────────
   2026-08-28 까지 이 값들이 장 안에 style="…" 로 박혀 있었다.
   CSP 의 style-src 'self'(unsafe-inline 없이)가 그 속성을 막는다.
   **값은 하나도 안 바꿨다** — 자리만 옮겼다. */
.u-brand{color:var(--brand) !important}
.u-brandlink{color:var(--brand) !important; text-decoration:none !important}
.u-plainlink{color:inherit !important; text-decoration:none !important}
.u-w110{width:110px !important}
.u-w120{width:120px !important}
.u-w86{width:86px !important}

/*  ↑ 위 규칙들에 `!important` 가 붙어 있다. **일부러다.**

    이 값들은 2026-08-28 까지 `style="…"` 로 그 요소에 직접 붙어 있었다.
    인라인은 어떤 선택자보다 세다 — 그대로 옮기려면 그 우선순위도 옮겨야 한다.

    처음엔 클래스를 두 번 적어(`.u-mt44.u-mt44`) 특이도를 올렸는데,
    `.panel .body p` 같은 더 센 규칙에 또 밀렸다. 자리마다 다시 재야 하고
    새 규칙이 생기면 조용히 또 밀린다. 계산된 스타일 지문이 두 번 잡아 줬다
    (`h3.u-mt44` 의 여백, `p.u-foot` 의 글자 크기·색).

    **여기 말고 다른 데서는 `!important` 를 쓰지 않는다.** 이 블록은
    "인라인이던 것" 이라는 한 가지 뜻만 갖는다. */