/* 돈워크 — 공유 스타일시트
   ────────────────────────────────────────────────────────────
   CSS 가 13개 페이지에 복제돼 있어 손으로 고치면 반드시 어긋났다. 여기로 모았다.
   층 순서는 ITCSS 를 따른다 — 뒤로 갈수록 구체적이고, 앞의 것을 덮는다.

     Settings    토큰(:root). **디자인 변경은 대개 여기서 끝난다**
     Generic     리셋
     Elements    태그 기본값 (body · h1 · input · table …)
     Objects     뼈대 (.wrap · .pad)
     Components  부품 (.verdict · .calc · .law · .warn …)
     Utilities   한 가지만 하는 것 (.muted · [hidden])

   페이지 고유 규칙(홈 카드 · 약관 본문 · 404)은 그 페이지의 <style> 에 남아 있고,
   이 파일 **뒤에** 실려 덮어쓴다.

   규칙과 근거는 DESIGN.md 에 있다. 색·크기를 바꾸기 전에 그 파일을 읽는다.
   ──────────────────────────────────────────────────────────── */


/* ═══ Settings — 토큰. 여기만 고치면 전체가 따라온다 ═══ */
:root{
  --paper:#FFFFFF; --surface:#F7F8F4; --sunk:#EDEFE7;
  --ink:#0E0E0E; --ink-2:#5A5A57; --ink-3:#8A8A84;
  --rule:#DFE1D8; --rule-2:#BFC2B5;
  --lime:#C6FF00; --lime-ink:#0E0E0E; --lime-deep:#5E7A00;
  --alert:#B3261E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E0E0E; --surface:#191A16; --sunk:#121310;
    --ink:#F2F3EE; --ink-2:#A8AAA0; --ink-3:#76786F;
    --rule:#2A2C26; --rule-2:#414439;
    --lime:#C6FF00; --lime-ink:#0E0E0E; --lime-deep:#C6FF00;
    --alert:#F2837B;
  }
}
:root[data-theme="dark"]{
  --paper:#0E0E0E; --surface:#191A16; --sunk:#121310;
  --ink:#F2F3EE; --ink-2:#A8AAA0; --ink-3:#76786F;
  --rule:#2A2C26; --rule-2:#414439;
  --lime:#C6FF00; --lime-ink:#0E0E0E; --lime-deep:#C6FF00;
  --alert:#F2837B;
}

/* ═══ Generic — 리셋 ═══ */
*{box-sizing:border-box}
html{scrollbar-color:var(--rule-2) transparent}

/* ═══ Elements — 태그 기본값 ═══ */
body{
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
h1{font-size:1.45rem;font-weight:700;margin:0;line-height:1.35;letter-spacing:-.01em}
h2{font-size:1.12rem;font-weight:600;margin:0;line-height:1.45;text-wrap:balance}
h3{font-size:.95rem;font-weight:600;margin:0}
p{margin:0}
input[type=text],select{
  width:100%;font-size:1.05rem;font-weight:500;
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--rule-2);border-radius:3px;
  padding:.7rem;min-height:48px;-webkit-appearance:none;appearance:none;
}
input[type=text]{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
select{font-family:inherit;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--lime);outline-offset:1px}
table{border-collapse:collapse;width:100%;font-size:.87rem}
caption{text-align:left;font-size:.74rem;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase;padding-bottom:.5rem}
thead th{font-weight:600;font-size:.73rem;color:var(--ink-2);letter-spacing:.05em;text-transform:uppercase;border-bottom:1.5px solid var(--rule-2)}
tbody tr:last-child td{border-bottom:none}
details{border:1px solid var(--rule);border-radius:4px;background:var(--surface)}
summary{cursor:pointer;padding:.8rem 1rem;font-weight:600;font-size:.93rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.5rem;min-height:48px}
summary::-webkit-details-marker{display:none}
footer{border-top:1px solid var(--rule);padding-top:1.1rem;font-size:.79rem;color:var(--ink-3);line-height:1.7;display:flex;flex-direction:column;gap:.55rem}
caption{font-family:inherit;font-size:.78rem;font-weight:500}
thead th{font-size:.78rem;font-weight:600}
::selection{background:var(--lime);color:var(--lime-ink)}
input,select,textarea{caret-color:var(--lime-deep)}
a{text-underline-offset:.18em;text-decoration-thickness:.06em}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:99px;
  border:3px solid var(--paper);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:padding-box}

/* ═══ Objects — 뼈대 ═══ */
.wrap{max-width:44rem;margin:0 auto;padding:0 0 4rem;display:flex;flex-direction:column;gap:1.9rem}
.pad{padding-left:clamp(1rem,4vw,1.5rem);padding-right:clamp(1rem,4vw,1.5rem)}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══ Components — 부품 ═══ */
header{background:var(--lime);color:var(--lime-ink);padding:1.05rem clamp(1rem,4vw,1.5rem) 1.15rem}
header .kicker{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
header h1{margin-top:.3rem}
.verdict{background:var(--ink);color:var(--paper);border-radius:4px;padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:.75rem}
.verdict .one{font-size:1.02rem;font-weight:500;line-height:1.6}
.verdict .one b{color:var(--lime);font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:600;font-size:1.28rem}
.verdict .rows{display:flex;flex-direction:column;gap:.1rem;border-top:1px solid rgba(255,255,255,.16);padding-top:.7rem}
.rrow{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;padding:.2rem 0}
.rrow span:last-child{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:500}
.rrow.em{font-weight:600;border-top:1px solid rgba(255,255,255,.16);margin-top:.3rem;padding-top:.5rem}
.rrow.off span{opacity:.45}
.calc{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.05rem;display:flex;flex-direction:column;gap:.95rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.86rem;font-weight:500}
.readout{font-size:.8rem;color:var(--ink-2);font-family:"IBM Plex Mono",monospace;min-height:1.2em}
.seg{display:flex;border:1.5px solid var(--rule-2);border-radius:3px;overflow:hidden}
.seg button{flex:1;min-height:48px;border:0;background:var(--paper);color:var(--ink-2);font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;padding:.4rem .3rem;line-height:1.35}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chips button{border:1.5px solid var(--rule-2);background:var(--paper);color:var(--ink-2);border-radius:999px;padding:.5rem .9rem;font-family:"IBM Plex Mono",monospace;font-size:.85rem;cursor:pointer;min-height:44px}
.chips button:hover{border-color:var(--ink)}
th,td{padding:.48rem .6rem;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
td.n,th.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
tr.hit td{background:var(--lime);color:var(--lime-ink);font-weight:600}
summary::after{content:"＋";font-family:"IBM Plex Mono",monospace;color:var(--ink-3)}
details[open] summary::after{content:"－"}
.det-body{padding:0 1rem 1rem;display:flex;flex-direction:column;gap:.9rem}
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:1fr auto;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--rule);align-items:baseline}
.step:first-child{border-top:0}
.step-t{font-size:.88rem}
.step-f{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-3);display:block;margin-top:.1rem}
.step-v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.92rem;font-weight:600;white-space:nowrap}
.law{display:inline-block;font-size:.72rem;color:var(--lime-deep);border:1px solid var(--rule-2);border-radius:2px;padding:.02rem .32rem;font-weight:500;white-space:nowrap;text-decoration:none}
a.law:hover{border-color:var(--lime-deep);background:var(--lime);color:var(--lime-ink)}
a.law::after{content:"↗";font-size:.62em;margin-left:.15em;opacity:.6}
.faq{display:flex;flex-direction:column;gap:1.3rem}
.qa{display:flex;flex-direction:column;gap:.35rem}
.qa .a1{font-weight:600;font-size:.97rem}
.warn{border-left:1px solid var(--alert);background:var(--surface);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.warn h3{color:var(--alert);font-size:.88rem}
.warn p{font-size:.86rem;color:var(--ink-2);line-height:1.65}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.updated{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--ink-2);padding:.55rem .8rem;background:var(--surface);border:1px solid var(--rule);border-radius:3px;line-height:1.5}
.updated .dot{width:.42rem;height:.42rem;border-radius:50%;background:#3FA34D;flex:none}
.updated b{font-weight:600;color:var(--ink)}
.updated a{color:inherit;text-decoration:underline;text-underline-offset:.16em;text-decoration-color:var(--rule-strong,var(--rule))}
.updated a:hover{text-decoration-color:currentColor}
.updated .dot{position:relative;background:#3FA34D}
.updated .dot::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);border-radius:50%;background:#3FA34D;
  animation:dw-pulse 2.6s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes dw-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.55}
  70%{transform:translate(-50%,-50%) scale(3.2);opacity:0}
  100%{transform:translate(-50%,-50%) scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.updated .dot::after{animation:none}}
.hl-target{transition:background .18s ease, border-color .18s ease}
.hl-target.on{background:var(--lime);color:var(--lime-ink);border-radius:3px;
  box-shadow:0 0 0 .45rem var(--lime)}
.hl-why{display:none;margin-top:.5rem;font-size:.82rem;line-height:1.6;
  border-left:1px solid var(--lime-deep);padding:.5rem .7rem;background:var(--surface);color:var(--ink-2)}
.hl-why.on{display:block}
.hl-why b{color:var(--ink)}
.hl-badge{display:inline-block;background:var(--lime);color:var(--lime-ink);
  font-size:.66rem;font-weight:700;letter-spacing:.04em;border-radius:2px;
  padding:.08rem .32rem;margin-right:.35rem;vertical-align:.08em}
@media (prefers-reduced-motion:reduce){.hl-target{transition:none}}
.xlink{margin-top:1.4rem;border:1px solid var(--rule);border-radius:3px;padding:.85rem 1rem;background:var(--surface)}
.xlink a{color:inherit;font-weight:600;text-decoration:none}
.xlink div{font-size:.8rem;color:var(--ink-2);margin-top:.2rem}
.updated a{color:inherit;text-decoration:underline;text-underline-offset:.16em;text-decoration-color:var(--rule-2)}
.calc-nav{border-top:1px solid var(--rule);padding-top:1.1rem}
.calc-nav h2{font-size:.92rem;margin-bottom:.7rem}
.calc-nav ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.calc-nav a{display:block;border:1px solid var(--rule);border-radius:3px;padding:.7rem .9rem;text-decoration:none;color:inherit;background:var(--surface)}
.calc-nav a:hover{border-color:var(--ink)}
.calc-nav b{display:block;font-size:.92rem;font-weight:600}
.calc-nav span{display:block;font-size:.79rem;color:var(--ink-2);margin-top:.15rem}
.home-link{display:inline-flex;align-items:center;gap:.35rem;min-height:48px;padding:.1rem .8rem .1rem .65rem;margin-bottom:.35rem;border:1.5px solid rgba(0,0,0,.35);border-radius:999px;color:inherit;text-decoration:none;font-size:.82rem;font-weight:600;background:rgba(255,255,255,.35)}
.home-link:hover{background:rgba(255,255,255,.75);border-color:currentColor}
.home-link:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.verdict{padding:1.35rem 1.2rem 1.25rem}
.lead-label{font-family:inherit;font-size:.78rem;font-weight:500;letter-spacing:0;
  text-transform:none;opacity:.66;margin-bottom:.2rem}
.lead{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(2.15rem,9.5vw,3.1rem);font-weight:600;line-height:1.02;
  letter-spacing:-.035em;color:var(--lime);word-break:keep-all}
.result .lead{font-size:clamp(2.15rem,9.5vw,3.1rem);letter-spacing:-.035em}
.verdict .one{font-size:.92rem;font-weight:400;line-height:1.65;opacity:.82;margin-top:.55rem}
.verdict .one b{color:inherit;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-weight:600;font-size:1em}
.verdict .rows{padding-top:.85rem;margin-top:.15rem}
header{padding-top:1.25rem;padding-bottom:1.3rem}
header h1{margin-top:0;font-size:clamp(1.45rem,5.2vw,1.72rem);letter-spacing:-.02em}
caption,thead th,.hl-badge,.lead-label{letter-spacing:0;text-transform:none}
.readout,.ad-label{font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:0;
  text-transform:none}
.readout{font-size:.82rem;line-height:1.55}
.hl-badge{letter-spacing:0}
header h1{font-size:clamp(1.5rem,5.2vw,2.05rem)}
header p{font-size:clamp(.86rem,2.6vw,.95rem)}
summary::after{content:"";width:.72rem;height:.72rem;flex:none;
  background:currentColor;color:var(--ink-3);
  -webkit-mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
          mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
details[open] summary::after{content:"";
  -webkit-mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat;
          mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat}
a.law::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.25em;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg) translateY(.06em);opacity:.55}
a.law:hover::after{opacity:1}
.home-link .arw{width:.62rem;height:.62rem;flex:none;border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-right:.1rem}
.warn{background:color-mix(in srgb,var(--alert) 6%,var(--surface));border-radius:0 3px 3px 0}
.hl-why{background:color-mix(in srgb,var(--lime) 9%,var(--surface));border-radius:0 3px 3px 0}
.why{background:color-mix(in srgb,var(--lime) 8%,var(--surface));border-radius:0 3px 3px 0;
  padding:.9rem 1rem}
.updated{word-break:keep-all;line-height:1.55}
a.card i{font-size:.86rem}

/* ═══ Utilities — 한 가지만 하는 것 ═══ */
.fig{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2);font-size:.9rem;line-height:1.65}
.tiny{color:var(--ink-3);font-size:.8rem;line-height:1.6}
[hidden]{display:none!important}
.grp{font-size:.76rem;font-weight:600;letter-spacing:.1em;color:var(--ink-3);text-transform:none;margin:1.5rem 0 .6rem;display:flex;align-items:center;gap:.6rem}.grp::after{content:'';flex:1;height:1px;background:var(--rule)}ul.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem}a.card i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.82rem;font-weight:600;color:var(--lime-deep,#5E7A00);margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--rule)}@media (prefers-color-scheme:dark){:root:not([data-theme='light']) a.card i{color:var(--lime)}}:root[data-theme='dark'] a.card i{color:var(--lime)}

/* ═══ Theme — impeccable 패스의 결과 ═══ */
/* @theme */
/* ── 결론이 봉우리다. 사람들이 보러 온 숫자가 제목보다 작으면 안 된다 ── */
.verdict{padding:1.35rem 1.2rem 1.25rem}
.lead-label{font-family:inherit;font-size:.78rem;font-weight:500;letter-spacing:0;
  text-transform:none;opacity:.66;margin-bottom:.2rem}
.lead{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(2.15rem,9.5vw,3.1rem);font-weight:600;line-height:1.02;
  letter-spacing:-.035em;color:var(--lime);word-break:keep-all}
.result .lead{font-size:clamp(2.15rem,9.5vw,3.1rem);letter-spacing:-.035em}
/* 봉우리가 하나여야 봉우리다 — 문장 속 숫자는 강조를 거둔다 */
.verdict .one{font-size:.92rem;font-weight:400;line-height:1.65;opacity:.82;margin-top:.55rem}
.verdict .one b{color:inherit;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-weight:600;font-size:1em}
.verdict .rows{padding-top:.85rem;margin-top:.15rem}

/* ── 제목 위 라벨을 지웠으니 제목이 숨 쉴 자리를 준다 ── */
header{padding-top:1.25rem;padding-bottom:1.3rem}
header h1{margin-top:0;font-size:clamp(1.45rem,5.2vw,1.72rem);letter-spacing:-.02em}

/* ── 한글에 라틴 트래킹을 걸지 않는다 ──
   .12em 은 영문 스몰캡스 관습이다. 한글에 걸면 「내 야 할 세 금」처럼 흩어져 보인다.
   uppercase 도 한글에는 아무 일도 안 하면서 라틴이 섞이면 튄다. */
caption,thead th,.hl-badge,.lead-label{letter-spacing:0;text-transform:none}
/* 모노는 숫자·코드·측정값의 목소리다. 한글 문장에 씌우면 의상이 된다.
   숫자 정렬은 tabular-nums 가 맡으므로 서체를 바꿀 이유가 없다. */
.readout,.ad-label{font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:0;
  text-transform:none}
.readout{font-size:.82rem;line-height:1.55}
caption{font-family:inherit;font-size:.78rem;font-weight:500}
thead th{font-size:.78rem;font-weight:600}
.hl-badge{letter-spacing:0}

/* ── 넓은 화면에서 제목이 라임 바를 채우게 ── */
header h1{font-size:clamp(1.5rem,5.2vw,2.05rem)}
header p{font-size:clamp(.86rem,2.6vw,.95rem)}

/* ── 브라우저가 그리는 것도 우리 것이다 ── */
::selection{background:var(--lime);color:var(--lime-ink)}
html{scrollbar-color:var(--rule-2) transparent}
input,select,textarea{caret-color:var(--lime-deep)}
a{text-underline-offset:.18em;text-decoration-thickness:.06em}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:99px;
  border:3px solid var(--paper);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:padding-box}

/* ── 글자를 아이콘으로 쓰지 않는다 ── */
summary::after{content:"";width:.72rem;height:.72rem;flex:none;
  background:currentColor;color:var(--ink-3);
  -webkit-mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
          mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
details[open] summary::after{content:"";
  -webkit-mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat;
          mask:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat}
a.law::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.25em;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg) translateY(.06em);opacity:.55}
a.law:hover::after{opacity:1}
.home-link .arw{width:.62rem;height:.62rem;flex:none;border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-right:.1rem}

/* ── 굵은 색 띠는 장식이다. 1px 과 바탕으로 말한다 (3px 선언은 원본에서 지운다) ── */
.warn{background:color-mix(in srgb,var(--alert) 6%,var(--surface));border-radius:0 3px 3px 0}
.hl-why{background:color-mix(in srgb,var(--lime) 9%,var(--surface));border-radius:0 3px 3px 0}
.why{background:color-mix(in srgb,var(--lime) 8%,var(--surface));border-radius:0 3px 3px 0;
  padding:.9rem 1rem}

.updated{word-break:keep-all;line-height:1.55}

/* ── 홈 목록: 값이 카드의 주인공이다 ── */
a.card i{font-size:.86rem}
/* @/theme */