/* ══════════════════════════════════════════════════════════════
   되는것만 — 소상공인 정책자금 판정
   팔레트: "장부와 직인"
   잉크 네이비 위에서 카운터가 내려가고, 확정된 것만 종이로 뒤집힌다.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #10162A;
  --ink-2:      #171F38;
  --ink-3:      #1E2947;
  --line:       #263254;

  --paper:      #EDE7DA;
  --paper-2:    #D8CFBC;
  --paper-ink:  #23201A;
  --paper-mute: #5E574B;

  --phosphor:   #F2A93B;   /* 카운터 · 계산 중 */
  --seal:       #D9412A;   /* 직인 — 확정에만 */
  --seal-deep:  #A82D14;   /* 종이 위 · 흰 글씨 칩 */
  --seal-lit:   #FF6B4F;   /* 잉크 위 숫자 */
  --cond:       #7FB0D4;   /* 조건부 — 미해결 */

  --text:       #E9EDF6;
  --text-2:     #97A3C0;
  --text-3:     #7C89AD;
  --tick-off:   #2A3557;
  --hatch:      #46538A;

  --ff-ui:   "IBM Plex Sans KR", system-ui, sans-serif;
  --ff-num:  "IBM Plex Mono", ui-monospace, monospace;
  --ff-doc:  "Nanum Myeongjo", serif;

  --gut: clamp(18px, 4vw, 40px);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ff-ui);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.skiplink{
  position:absolute; left:-9999px;
  background:var(--phosphor); color:var(--ink);
  padding:10px 16px; border-radius:2px; font-weight:600; z-index:99;
}
.skiplink:focus{ left:12px; top:12px; }

:focus-visible{
  outline:2px solid var(--phosphor);
  outline-offset:3px;
}

.wrap{
  width:100%; max-width:1000px;
  margin:0 auto; padding:0 var(--gut);
}

/* ─────────── 상단바 ─────────── */

.topbar{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:rgba(16,22,42,.88);
  backdrop-filter:blur(10px);
}
.topbar__in{
  width:100%; max-width:1000px; margin:0 auto;
  padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.brand{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.brand__mark{
  font-size:16px; font-weight:700; letter-spacing:-.02em;
}
.brand__sub{
  font-family:var(--ff-num);
  font-size:11px; color:var(--text-3); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.seg{
  display:flex; gap:2px; padding:2px;
  border:1px solid var(--line); border-radius:3px;
  flex-shrink:0;
}
.seg__btn{
  font-family:var(--ff-ui); font-size:12px; font-weight:500;
  color:var(--text-3); background:none; border:0;
  padding:5px 14px; border-radius:2px; cursor:pointer;
  transition:color .15s, background .15s;
}
.seg__btn:hover{ color:var(--text-2); }
.seg__btn.is-on{ background:var(--ink-3); color:var(--text); }

/* ─────────── 화면 ─────────── */

.screen{ display:none; padding:clamp(32px,6vw,64px) 0 96px; }
.screen.is-on{ display:block; }

/* ─────────── 카운터 ─────────── */

.count__head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:8px; margin-bottom:14px;
}
.count__label{
  font-size:12px; color:var(--text-2); letter-spacing:.04em;
}
.count__step{
  font-family:var(--ff-num); font-size:11px; color:var(--text-3);
}

.count__row{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }

.count__num{
  font-family:var(--ff-num); font-weight:500;
  font-size:clamp(76px, 15vw, 132px);
  line-height:.86; letter-spacing:-.05em;
  color:var(--phosphor);
  font-variant-numeric:tabular-nums;
  display:block;
}

.count__delta{
  font-family:var(--ff-num); font-size:clamp(16px,3vw,22px);
  font-weight:500; color:var(--seal-lit);
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s, transform .3s;
}
.count__delta.is-on{ opacity:1; transform:none; }

/* ─────────── 시그니처: 140개 눈금 ─────────── */

.field{
  display:flex; flex-wrap:wrap; gap:4px;
  margin:26px 0 10px;
}
.tick{
  width:7px; height:26px; border-radius:1px;
  background:var(--phosphor); opacity:.62;
  transition:opacity .5s ease, transform .5s ease, background .5s ease;
  animation:tickin .5s backwards;
}
@keyframes tickin{
  from{ opacity:0; transform:translateY(-7px) scaleY(.5); }
  to  { opacity:.62; transform:none; }
}
.tick.is-out{
  background:var(--tick-off);
  opacity:.5;
  transform:translateY(7px) scaleY(.42);
}
.field__cap{
  font-size:12px; color:var(--text-3); margin:0 0 40px;
}

/* ─────────── 질문 카드 ─────────── */

.q{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(24px,4vw,38px);
}

.q__gain{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--line);
}
.q__gainNum{
  font-family:var(--ff-num); font-size:30px; font-weight:600;
  color:var(--phosphor); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.q__gainTxt{ font-size:13px; color:var(--text-2); }

.q__title{
  font-size:clamp(22px,3.6vw,30px); font-weight:700;
  letter-spacing:-.025em; line-height:1.35;
  margin:0 0 10px;
}
.q__note{
  font-size:14px; color:var(--text-2); margin:0 0 26px;
  max-width:52ch;
}

.opts{ display:flex; flex-direction:column; gap:8px; }

.opt{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; text-align:left;
  font-family:var(--ff-ui); font-size:15px; font-weight:500; color:var(--text);
  background:var(--ink); border:1px solid var(--line);
  border-radius:3px; padding:15px 18px; cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s;
}
.opt:hover{ border-color:var(--phosphor); background:var(--ink-3); }
.opt:active{ transform:translateY(1px); }
.opt__hint{
  font-family:var(--ff-num); font-size:11px; color:var(--text-3);
  white-space:nowrap;
}
.opt--unknown{ border-style:dashed; color:var(--text-2); }
.opt--unknown:hover{ border-color:var(--cond); }

.why{ margin-top:22px; }
.why__sum{
  font-size:12px; color:var(--text-3); cursor:pointer;
  list-style:none; display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px dotted var(--text-3); padding-bottom:2px;
}
.why__sum::-webkit-details-marker{ display:none; }
.why__sum:hover{ color:var(--text-2); }
.why__body{
  font-size:13px; color:var(--text-2); margin:12px 0 0;
  padding-left:14px; border-left:2px solid var(--line);
  max-width:56ch;
}

/* ─────────── 영수증(지나온 질문) ─────────── */

.tape{ margin-top:36px; }
.tape__head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; color:var(--text-3); letter-spacing:.06em;
  border-bottom:1px solid var(--line); padding-bottom:7px;
}
.tape__sum{ font-family:var(--ff-num); color:var(--text-2); }
.tape__list{ list-style:none; margin:0; padding:0; }
.tape__row{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px dotted var(--line);
  font-size:13px; color:var(--text-2);
}
.tape__ans{ color:var(--text-3); font-size:12px; }
.tape__d{
  font-family:var(--ff-num); font-size:13px; color:var(--seal-lit);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tape__d--zero{ color:var(--cond); }

/* ═════════════ 화면 2 · 판정 ═════════════ */

.verdict__head{ margin-bottom:44px; }
.verdict__eyebrow{
  font-family:var(--ff-num); font-size:11px; color:var(--text-3);
  letter-spacing:.08em; margin:0 0 14px;
}
.verdict__title{
  font-size:clamp(26px,4.6vw,42px); font-weight:700;
  letter-spacing:-.03em; line-height:1.3; margin:0 0 12px;
}
.verdict__from{
  font-family:var(--ff-num); font-weight:400;
  color:var(--text-3); text-decoration:line-through;
  text-decoration-color:var(--seal-lit); text-decoration-thickness:2px;
}
.verdict__to{
  font-family:var(--ff-num); font-weight:600; color:var(--phosphor);
}
.verdict__sub{
  font-size:15px; color:var(--text-2); margin:0; max-width:52ch;
}

.band{ margin:0 0 18px; padding-top:34px; }
.band__label{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:14px;
}
.band__glyph{
  font-family:var(--ff-doc); font-weight:700; font-size:13px;
  padding:3px 10px; border-radius:2px; letter-spacing:.08em;
}
.band__label--ok   .band__glyph{ background:var(--seal-deep); color:#fff; }
.band__label--cond .band__glyph{ background:var(--ink-3); color:var(--cond);  border:1px solid var(--cond); }
.band__label--out  .band__glyph{ background:transparent;  color:var(--text-3);border:1px solid var(--line); }

.band__n{
  font-family:var(--ff-num); font-size:22px; font-weight:600;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.band__label--ok   .band__n{ color:var(--text); }
.band__label--cond .band__n{ color:var(--cond); }
.band__label--out  .band__n{ color:var(--text-3); }

.band__desc{ font-size:13px; color:var(--text-2); }

/* ─────────── 확정 = 종이 + 직인 ─────────── */

.papers{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));
}

.paper{
  position:relative;
  background:var(--paper); color:var(--paper-ink);
  border-radius:3px; padding:24px 22px 20px;
  box-shadow:0 1px 0 var(--paper-2), 0 14px 30px -18px #000;
}

.paper__seal{
  position:absolute; top:16px; right:16px;
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--seal-deep); color:var(--seal-deep);
  font-family:var(--ff-doc); font-weight:800; font-size:15px;
  letter-spacing:.04em;
  display:grid; place-items:center;
  transform:rotate(-11deg);
}
.paper__seal::before{
  content:""; position:absolute; inset:3px;
  border:1px solid var(--seal-deep); border-radius:50%; opacity:.45;
}

.paper__org{
  font-family:var(--ff-num); font-size:10.5px;
  color:var(--paper-mute); letter-spacing:.05em; margin:0 0 7px;
}
.paper__name{
  font-family:var(--ff-doc); font-weight:700;
  font-size:19px; line-height:1.4; letter-spacing:-.01em;
  margin:0 0 18px; padding-right:52px;
}
.paper__amt{
  font-family:var(--ff-num); font-size:23px; font-weight:600;
  letter-spacing:-.03em; margin:0 0 2px;
}
.paper__amtsub{ font-size:11.5px; color:var(--paper-mute); margin:0 0 18px; }

.paper__meta{
  border-top:1px solid var(--paper-2); padding-top:12px;
  display:flex; flex-direction:column; gap:6px;
}
.paper__mrow{
  display:flex; justify-content:space-between; gap:10px; font-size:12px;
}
.paper__mk{ color:var(--paper-mute); }
.paper__mv{ font-family:var(--ff-num); color:var(--paper-ink); }
.paper__mv--live{ color:var(--seal-deep); font-weight:500; }

.nudge{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  margin:20px 0 0; padding:14px 16px;
  border:1px dashed var(--line); border-radius:3px;
  font-size:13.5px; color:var(--text-2);
}
.nudge__k{
  font-size:11px; font-weight:600; color:var(--phosphor);
  letter-spacing:.06em; white-space:nowrap;
}

/* ─────────── 조건부 ─────────── */

.conds{ list-style:none; margin:0; padding:0; }
.cond{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.cond__name{ font-size:15px; font-weight:500; flex:1 1 210px; }
.cond__need{
  font-size:12.5px; color:var(--cond);
  display:flex; align-items:center; gap:7px;
}
.cond__need::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--cond); flex-shrink:0;
}
.cond__amt{
  font-family:var(--ff-num); font-size:12.5px; color:var(--text-3);
  white-space:nowrap;
}
.conds__more{
  padding:15px 0; font-size:13px; color:var(--text-3);
}

/* ─────────── 제외 사유 히스토그램 ─────────── */

.hist{ display:flex; flex-direction:column; }

.hrow{
  border-bottom:1px solid var(--line);
}
.hrow__btn{
  width:100%; display:flex; align-items:center; gap:14px;
  background:none; border:0; cursor:pointer;
  padding:13px 0; text-align:left;
  font-family:var(--ff-ui); font-size:13.5px; color:var(--text-2);
  transition:color .15s;
}
.hrow__btn:hover{ color:var(--text); }
.hrow__label{ flex:0 0 auto; width:min(200px, 42vw); }
.hrow__bar{
  flex:1 1 auto; height:10px; border-radius:1px;
  background:var(--ink); position:relative; overflow:hidden;
  min-width:40px;
}
.hrow__fill{  /* 빗금 = 무효 처리된 것들 */
  position:absolute; inset:0 auto 0 0;
  background:repeating-linear-gradient(-45deg,
    var(--hatch) 0 2px, transparent 2px 5px);
  border-right:2px solid var(--text-3);
}

.hist__empty{
  padding:26px 0 6px; font-size:13.5px; color:var(--text-3);
  border-top:1px dashed var(--line);
}
.hrow__n{
  font-family:var(--ff-num); font-size:13px; color:var(--text-3);
  width:38px; text-align:right; font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.hrow__caret{ color:var(--text-3); font-size:10px; flex-shrink:0; }

.hrow__body{
  padding:2px 0 18px; margin:0;
  list-style:none;
  border-left:2px solid var(--line); padding-left:14px;
}
.hrow__item{
  font-size:12.5px; color:var(--text-3); padding:4px 0;
  display:flex; gap:9px;
}
.hrow__cite{
  font-family:var(--ff-num); font-size:11px; color:var(--tick-off);
  flex-shrink:0;
}

/* ─────────── 푸터 ─────────── */

.foot{
  margin-top:48px; padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.foot__t{
  font-size:12px; color:var(--text-3); margin:0; max-width:58ch;
}
.foot__btn{
  font-family:var(--ff-ui); font-size:12.5px; font-weight:500;
  color:var(--text-2); background:none;
  border:1px solid var(--line); border-radius:3px;
  padding:9px 16px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.foot__btn:hover{ border-color:var(--phosphor); color:var(--phosphor); }

/* ─────────── 모바일 ─────────── */

@media (max-width:600px){
  .tick{ width:6px; height:21px; }
  .field{ gap:3px; }
  .brand__sub{ display:none; }
  .hrow__label{ width:min(140px, 40vw); }
}

/* ─────────── 모션 최소화 ─────────── */

@media (prefers-reduced-motion:reduce){
  *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
  }
}