/* ══════════════════════════════════════════════════════════════
   되는것만 — 앱 화면
   위는 보는 곳, 아래는 만지는 곳. 빗살은 오른쪽부터 꺼지고,
   제외된 것은 수면 아래 시트에 있다.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #0B1020;   /* 앱 바탕 · OLED */
  --ink-2:      #141B31;
  --ink-3:      #1D2743;
  --line:       #26314F;
  --line-2:     #1A2340;

  --paper:      #F0EADC;
  --paper-2:    #D9D0BD;
  --paper-ink:  #23201A;
  --paper-mute: #5E574B;

  --phosphor:   #FFB13D;   /* 카운터 */
  --seal-deep:  #A82D14;   /* 직인 · 종이 위 */
  --seal-lit:   #FF6B4F;   /* 숫자 · 잉크 위 */
  --cond:       #86B6DB;

  --text:       #EDF1F9;
  --text-2:     #9CA8C6;
  --text-3:     #7E8BB0;
  --off:        #232E4E;
  --hatch:      #46538A;

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

  --pad: 20px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* .rowlab{display:flex} 같은 작성자 스타일이 UA의 [hidden] 을 이긴다. 명시적으로 막는다. */
[hidden]{ display:none !important; }

body{
  margin:0;
  background:#05070F;
  color:var(--text);
  font-family:var(--ff-ui);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

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

/* ─────────── 무대 ─────────── */

.stage{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(20px, 4vw, 46px);
  padding:clamp(24px, 5vw, 56px) 16px 20px;
}

.slot{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.slot__cap{
  font-size:12px; color:var(--text-3); margin:0;
  display:flex; align-items:center; gap:8px;
}
.slot__k{
  font-family:var(--ff-num); font-size:10px; letter-spacing:.08em;
  color:var(--phosphor); border:1px solid var(--line);
  border-radius:2px; padding:2px 7px;
}

/* ─────────── 폰 프레임 ─────────── */

.phone{
  width:390px; height:844px; flex-shrink:0;
  background:#000; border-radius:46px; padding:9px;
  box-shadow:0 0 0 1.5px #2C3450, 0 34px 70px -30px #000;
}
.phone__screen{
  position:relative; overflow:hidden;
  width:100%; height:100%;
  background:var(--ink); border-radius:38px;
  display:flex; flex-direction:column;
}

/* 상태바 */
.statusbar{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px var(--pad) 4px;
  font-family:var(--ff-num); font-size:13px; font-weight:500;
  color:var(--text);
}
.statusbar__r{ display:flex; align-items:center; gap:6px; }
.sb-wifi, .sb-batt{ display:block; background:var(--text); border-radius:1px; }
.sb-wifi{ width:14px; height:10px; clip-path:polygon(50% 100%,0 34%,10% 24%,50% 62%,90% 24%,100% 34%); }
.sb-batt{ width:22px; height:11px; border-radius:2.5px; opacity:.9; }

/* 홈 인디케이터 */
.homebar{
  flex-shrink:0; height:22px;
  display:flex; align-items:center; justify-content:center;
}
.homebar::before{
  content:""; width:130px; height:4px; border-radius:2px;
  background:var(--text); opacity:.32;
}

/* ─────────── 앱바 + 빗살 ─────────── */

.appbar{ flex-shrink:0; padding:6px var(--pad) 0; }
.appbar__row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px;
}
.appbar__brand{ font-size:14px; font-weight:700; letter-spacing:-.02em; }
.appbar__step{ font-family:var(--ff-num); font-size:11px; color:var(--text-3); }

/* 시그니처 — 빗살 140개(70×2), 연료계처럼 오른쪽 아래부터 꺼진다.
   flex 로 짜면 폰 폭에서 개당 1.4px 라 서브픽셀로 뭉갠다. 그리드가 확정적이다. */
.comb{
  display:grid;
  grid-template-columns:repeat(70, 1fr);
  gap:3px 2px;
  align-items:end;
}
.comb__t{
  height:10px; min-width:0;
  background:var(--phosphor); opacity:.66;
  transform-origin:bottom;
  transition:opacity .45s ease, transform .45s ease, background .45s ease;
  animation:combin .45s backwards;
}
@keyframes combin{
  from{ opacity:0; transform:scaleY(.2); }
  to  { opacity:.66; transform:none; }
}
.comb__t.is-out{
  background:var(--off); opacity:.85;
  transform:scaleY(.34);
}
.comb__cap{
  font-size:10.5px; color:var(--text-3);
  margin:7px 0 0; padding-bottom:12px;
  border-bottom:1px solid var(--line-2);
}

/* ─────────── 보는 곳 (위) ─────────── */

.look{
  flex:1 1 auto; min-height:0;
  padding:18px var(--pad) 0;
  overflow-y:auto;
}
.look::-webkit-scrollbar{ width:0; }
.look__label{ font-size:11.5px; color:var(--text-2); margin:0 0 2px; letter-spacing:.03em; }
.look__row{ display:flex; align-items:baseline; gap:12px; }
.look__num{
  font-family:var(--ff-num); font-weight:500; font-size:82px;
  line-height:.9; letter-spacing:-.055em; color:var(--phosphor);
  font-variant-numeric:tabular-nums;
}
.look__delta{
  font-family:var(--ff-num); font-size:15px; font-weight:500;
  color:var(--seal-lit);
  opacity:0; transform:translateY(-3px);
  transition:opacity .28s, transform .28s;
}
.look__delta.is-on{ opacity:1; transform:none; }

.gain{
  display:flex; align-items:baseline; gap:7px;
  margin:20px 0 16px; padding-top:15px;
  border-top:1px dashed var(--line);
}
.gain__n{
  font-family:var(--ff-num); font-size:25px; font-weight:600;
  color:var(--phosphor); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.gain__t{ font-size:12.5px; color:var(--text-2); }

.ask__q{
  font-size:25px; font-weight:700; letter-spacing:-.03em;
  line-height:1.34; margin:0 0 8px;
}
.ask__note{ font-size:13px; color:var(--text-2); margin:0 0 14px; }

.why{ margin:0; }
.why__sum{
  font-size:11.5px; color:var(--text-3); cursor:pointer;
  list-style:none; display:inline-block;
  border-bottom:1px dotted var(--text-3); padding-bottom:1px;
}
.why__sum::-webkit-details-marker{ display:none; }
.why__body{
  font-size:12px; color:var(--text-2); margin:10px 0 0;
  padding-left:11px; border-left:2px solid var(--line);
}

/* ─────────── 만지는 곳 (엄지 구역) ─────────── */

.touch{
  flex-shrink:0;
  padding:14px var(--pad) 6px;
  display:flex; flex-direction:column; gap:7px;
  background:linear-gradient(180deg, transparent, rgba(20,27,49,.7) 26%);
}

.opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:56px; text-align:left;
  font-family:var(--ff-ui); color:var(--text);
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:13px; padding:11px 16px; cursor:pointer;
  transition:border-color .14s, background .14s, transform .08s;
}
.opt:active{ transform:scale(.985); background:var(--ink-3); }
@media (hover:hover){ .opt:hover{ border-color:var(--phosphor); } }

.opt__l{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.opt__lab{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.opt__sub{ font-size:11.5px; color:var(--text-3); }
.opt__d{
  font-family:var(--ff-num); font-size:14px; font-weight:500;
  color:var(--seal-lit); flex-shrink:0;
}
.opt--unknown{ border-style:dashed; background:transparent; }
.opt--unknown .opt__lab{ font-weight:500; color:var(--text-2); }
.opt--unknown .opt__d{ color:var(--cond); font-size:12px; }

/* ─────────── 판정 화면 ─────────── */

.vscroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:20px var(--pad) 0;
  -webkit-overflow-scrolling:touch;
}
.vscroll::-webkit-scrollbar{ width:0; }

.vhead{
  font-size:24px; font-weight:700; letter-spacing:-.03em;
  line-height:1.36; margin:0 0 8px;
}
.vhead__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;
}
.vhead__to{ font-family:var(--ff-num); font-weight:600; color:var(--phosphor); }

.vsub{ font-size:12.5px; color:var(--text-2); margin:0 0 24px; }

.rowlab{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding-top:13px; margin:26px 0 12px;
  border-top:1px solid var(--line);
}
.rowlab__g{
  font-family:var(--ff-doc); font-weight:700; font-size:12px;
  letter-spacing:.07em; padding:2px 9px; border-radius:2px;
}
.rowlab--ok   .rowlab__g{ background:var(--seal-deep); color:#fff; }
.rowlab--cond .rowlab__g{ background:transparent; color:var(--cond); border:1px solid var(--cond); }
.rowlab__n{
  font-family:var(--ff-num); font-size:19px; font-weight:600;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.rowlab--cond .rowlab__n{ color:var(--cond); }
.rowlab__d{ font-size:11.5px; color:var(--text-2); }

/* 확정 = 종이 + 직인 */
.papers{ display:flex; flex-direction:column; gap:11px; }

.paper{
  position:relative;
  background:var(--paper); color:var(--paper-ink);
  border-radius:11px; padding:19px 18px 15px;
  box-shadow:0 1px 0 var(--paper-2), 0 12px 26px -16px #000;
  animation:papin .5s backwards;
}
@keyframes papin{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
.paper__seal{
  position:absolute; top:14px; right:14px;
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--seal-deep); color:var(--seal-deep);
  font-family:var(--ff-doc); font-weight:800; font-size:13.5px;
  letter-spacing:.03em; 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:10px; color:var(--paper-mute);
  letter-spacing:.04em; margin:0 0 5px;
}
.paper__name{
  font-family:var(--ff-doc); font-weight:700; font-size:17.5px;
  line-height:1.36; margin:0 0 13px; padding-right:46px;
}
.paper__amt{
  font-family:var(--ff-num); font-size:21px; font-weight:600;
  letter-spacing:-.03em; margin:0 0 1px;
}
.paper__amtsub{ font-size:11px; color:var(--paper-mute); margin:0 0 13px; }
.paper__meta{
  border-top:1px solid var(--paper-2); padding-top:9px;
  display:flex; gap:16px; flex-wrap:wrap;
}
.paper__m{ display:flex; gap:6px; font-size:11.5px; }
.paper__mk{ color:var(--paper-mute); }
.paper__mv{ font-family:var(--ff-num); }
.paper__mv--live{ color:var(--seal-deep); font-weight:500; }

.nudge{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin:13px 0 0; padding:12px 14px;
  border:1px dashed var(--line); border-radius:10px;
  font-size:12.5px; color:var(--text-2);
}
.nudge__k{
  font-size:10.5px; font-weight:600; color:var(--phosphor);
  letter-spacing:.05em; white-space:nowrap;
}

/* 조건부 */
.conds{ list-style:none; margin:0; padding:0; }
.cond{
  padding:12px 0; border-bottom:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:3px;
}
.cond__top{ display:flex; justify-content:space-between; gap:12px; }
.cond__name{ font-size:14px; font-weight:500; }
.cond__amt{ font-family:var(--ff-num); font-size:11.5px; color:var(--text-3); white-space:nowrap; }
.cond__need{
  font-size:11.5px; color:var(--cond);
  display:flex; align-items:center; gap:6px;
}
.cond__need::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--cond); flex-shrink:0;
}
.conds__more{ padding:12px 0; font-size:11.5px; color:var(--text-3); }

.vspacer{ height:200px; }  /* CTA + 시트 손잡이 + 홈바에 가리지 않도록 */

/* ─────────── 수면 아래 · 제외 시트 ─────────── */

.sheet{
  /* 홈 인디케이터 위에 앉는다. bottom:0 이면 시트가 인디케이터를 덮는다. */
  position:absolute; left:0; right:0; bottom:22px; z-index:5;
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  box-shadow:0 -18px 40px -22px #000;
  /* --peek 은 손잡이 실제 높이. 폰트 로딩 뒤 JS 가 재어 넣는다. */
  transform:translateY(calc(100% - var(--peek, 76px)));
  transition:transform .38s cubic-bezier(.32,.72,0,1);
  max-height:78%;
  display:flex; flex-direction:column;
}
.sheet.is-up{ transform:translateY(0); }

.sheet__tab{
  flex-shrink:0; width:100%;
  background:none; border:0; cursor:pointer;
  padding:9px var(--pad) 14px;
  font-family:var(--ff-ui); color:inherit;
}
.sheet__grab{
  display:block; width:38px; height:4px; border-radius:2px;
  background:var(--line); margin:0 auto 11px;
}
.sheet__row{ display:flex; align-items:center; gap:9px; }
.sheet__lab{
  font-family:var(--ff-doc); font-weight:700; font-size:12px;
  letter-spacing:.07em; color:var(--text-3);
  border:1px solid var(--line); border-radius:2px; padding:2px 9px;
}
.sheet__n{
  font-family:var(--ff-num); font-size:19px; font-weight:600;
  color:var(--text-3); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.sheet__hint{ font-size:12px; color:var(--text-2); margin-left:auto; }
.sheet__car{ font-size:9px; color:var(--text-3); transition:transform .3s; }
.sheet.is-up .sheet__car{ transform:rotate(180deg); }

.sheet__body{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:0 var(--pad) 26px;
}
.sheet__body::-webkit-scrollbar{ width:0; }
.sheet__intro{
  font-size:11.5px; color:var(--text-3); margin:0 0 14px;
  padding-bottom:12px; border-bottom:1px dashed var(--line);
}

.hist{ display:flex; flex-direction:column; }
.hrow{ border-bottom:1px solid var(--line-2); }
.hrow__btn{
  width:100%; display:flex; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:11px 0;
  text-align:left; font-family:var(--ff-ui); font-size:12.5px; color:var(--text-2);
}
.hrow__lab{ flex:0 0 auto; width:104px; }
.hrow__bar{
  flex:1 1 auto; height:9px; min-width:26px; border-radius:1px;
  background:var(--ink); position:relative; overflow:hidden;
}
.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);
}
.hrow__n{
  font-family:var(--ff-num); font-size:12px; color:var(--text-3);
  width:26px; text-align:right; flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.hrow__car{ font-size:8px; color:var(--text-3); flex-shrink:0; }
.hrow__body{
  list-style:none; margin:0 0 14px; padding:0 0 0 12px;
  border-left:2px solid var(--line);
}
.hrow__i{ font-size:11.5px; color:var(--text-2); padding:3px 0; display:flex; gap:8px; }
.hrow__cite{ font-family:var(--ff-num); font-size:10px; color:var(--text-3); flex-shrink:0; width:92px; }

.hist__empty{ padding:20px 0; font-size:12.5px; color:var(--text-3); }

/* ─────────── 하단 행동 ─────────── */

.cta{
  /* 홈바 22 + 시트 손잡이 + 여백 8 */
  position:absolute; left:0; right:0; z-index:4;
  bottom:calc(30px + var(--peek, 76px));
  padding:0 var(--pad);
  animation:ctain .45s backwards;
}
@keyframes ctain{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
.cta__btn{
  width:100%; min-height:54px;
  font-family:var(--ff-ui); font-size:16px; font-weight:700;
  letter-spacing:-.01em;
  color:#1A1204; background:var(--phosphor);
  border:0; border-radius:14px; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(255,177,61,.7);
  transition:transform .08s;
}
.cta__btn:active{ transform:scale(.985); }

/* ─────────── 페이지 푸터 ─────────── */

.pagefoot{
  display:flex; justify-content:center; align-items:center;
  gap:18px; flex-wrap:wrap;
  padding:8px 20px 44px; text-align:center;
}
.pagefoot__t{ font-size:11.5px; color:#6C789A; margin:0; }
.pagefoot__btn{
  font-family:var(--ff-ui); font-size:12px; color:var(--text-3);
  background:none; border:1px solid #2A3554; border-radius:3px;
  padding:8px 15px; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.pagefoot__btn:hover{ border-color:var(--phosphor); color:var(--phosphor); }

/* ─────────── 작은 화면: 프레임 벗고 전체화면 앱 ─────────── */

@media (max-width:460px){
  .stage{ padding:0; gap:0; }
  .slot__cap{ display:none; }
  .phone{
    width:100vw; height:100svh; border-radius:0;
    padding:0; box-shadow:none;
  }
  .phone__screen{ border-radius:0; }
  .pagefoot{ padding:20px; }
  #verdict{ border-top:1px solid var(--line); }
}

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