/* 포인파이 백서 — app.css 위에 얹는 것만 (2026-09-02)
   ★ 공시(disclosure.css)와 같은 방식이다. 색·글꼴·상자는 app.css 것을 그대로 쓴다. */

/* ─────────── 머리 (2026-09-02) ───────────
   ★ app.css 의 header 는 「38px 1fr auto auto」 네 칸 격자이고
     **첫 칸은 뒤로 가기 단추 자리**다. 이 페이지엔 그 단추가 없어
     브랜드가 그 38px 칸에 갇혀 세로로 접히고 「백서」가 아래로 흘러 겹쳤다.
     공시(disclosure.css)가 같은 이유로 같은 고침을 갖고 있다. */
header{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  height:auto; min-height:58px; padding:9px 12px; gap:2px 10px;
}
header > strong{grid-column:1; grid-row:1; text-align:left; white-space:nowrap}
header > .network{grid-column:1; grid-row:2; min-width:0}
header > .hchips{grid-column:2; grid-row:1 / span 2; display:flex; gap:6px; align-items:center}
@media (max-width:359px){ header > .hchips .chip{padding:7px 9px; font-size:10.5px} }

header strong em{margin-left:7px;color:var(--sub);font-style:normal;font-size:11.5px;font-weight:800}
header .netlabel{font-size:10.5px;font-weight:800;color:var(--sub);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

h2.sec{margin:26px 2px 9px;font-size:13px;font-weight:900;color:var(--txt);scroll-margin-top:14px}
h2.sec small{margin-left:7px;color:var(--sub);font-size:10.5px;font-weight:800}

h3.sub{margin:17px 0 8px;font-size:11.5px;font-weight:900;color:var(--blue);
  letter-spacing:.2px}

.card + .card{margin-top:9px}
.lead.tight{margin:9px 0 0;line-height:1.72}
.lead.tight:first-child{margin-top:0}

/* ─────────── 차례 ─────────── */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:14px 0 4px;
  padding:13px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.toc a{color:var(--sub);font-size:11px;font-weight:700;text-decoration:none;
  padding:4px 0;line-height:1.5}
.toc a:hover{color:var(--blue)}
@media (max-width:420px){ .toc{grid-template-columns:1fr} }

/* ─────────── 칩 줄 ─────────── */
.pillrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pillrow .pill{background:var(--card2);border:1px solid var(--line);color:var(--blue);
  font-size:10.5px;font-weight:800;padding:5px 10px;border-radius:99px}

/* ─────────── 차례대로 밟는 단계 ─────────── */
ol.steps{margin:12px 0 0;padding:0;list-style:none;counter-reset:st}
ol.steps li{counter-increment:st;position:relative;padding:9px 0 9px 30px;
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.65;color:var(--txt)}
ol.steps li:first-child{border-top:0}
ol.steps li::before{content:counter(st);position:absolute;left:0;top:9px;
  width:19px;height:19px;border-radius:50%;background:var(--card2);
  border:1px solid var(--line);color:var(--blue);
  font-size:10px;font-weight:900;display:grid;place-items:center}
.tag{display:inline-block;background:var(--card2);border:1px solid var(--line);
  color:var(--sub);font-size:10.5px;font-weight:800;padding:2px 7px;
  border-radius:7px;margin:2px 3px 0 0;white-space:nowrap}

/* ─────────── 함수 목록 ─────────── */
.fnlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;
  background:var(--card2);border:1px solid var(--line);color:var(--green);
  padding:4px 9px;border-radius:8px}
.fn.none{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--red)}

/* ─────────── 배분 표 ─────────── */
.atable{margin-top:13px}
.arow{display:grid;grid-template-columns:1fr auto auto;gap:6px 11px;align-items:start;
  padding:11px 0;border-top:1px solid var(--line)}
.arow.head{border-top:0;padding-bottom:7px;color:var(--sub);font-size:10.5px;font-weight:800}
.arow.head b,.arow.head em{color:var(--sub);font-size:10.5px;font-weight:800;font-style:normal}
.arow > span{min-width:0}
.arow > span > b{display:block;font-size:12.5px;font-weight:800;color:var(--txt);line-height:1.4}
.arow > span > small{display:block;margin-top:3px;color:var(--sub);
  font-size:10.5px;font-weight:600;line-height:1.55}
.arow > span > code{display:block;margin-top:5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--dim);
  word-break:break-all;line-height:1.4}
.arow > b{font-size:13px;font-weight:900;color:var(--txt);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.arow > em{font-style:normal;font-size:10px;font-weight:800;color:var(--sub);
  background:var(--card2);border:1px solid var(--line);border-radius:7px;
  padding:3px 7px;white-space:nowrap;max-width:118px;text-align:center;line-height:1.35}
.arow > em.hard{color:var(--green);border-color:var(--edge-green)}
@media (max-width:430px){
  .arow{grid-template-columns:1fr auto}
  .arow > em{grid-column:1 / -1;justify-self:start;max-width:none}
}

/* ─────────── 경고 상자 ───────────
   ★ 색 숫자를 토큰으로 (2026-09-03, 주간/야간). 예전엔 올리브·밤색 단색이었는데
     app.css 의 .warning.gold / .warning.red 와 같은 금·빨강 tint 로 맞췄다 — 주간에서도 읽힌다. */
.warnbox{margin-top:15px;padding:13px 14px;border-radius:13px;
  background:var(--tint-gold);border:1px solid var(--edge-gold)}
.warnbox > b{display:block;color:var(--gold);font-size:12px;font-weight:900;margin-bottom:6px}
.warnbox p{margin:7px 0 0;color:var(--on-gold-tint);font-size:11.5px;line-height:1.7}
.warnbox p:first-of-type{margin-top:0}
.warnbox a{color:var(--gold)}
.warnbox.danger{background:var(--tint-red);border-color:var(--edge-red)}
.warnbox.danger > b{color:var(--red)}
.warnbox.danger p{color:var(--on-red-tint)}
.warnbox code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px}

/* ─────────── 위험 항목 ─────────── */
.risk{padding:12px 0;border-top:1px solid var(--line)}
.risk:first-of-type{border-top:0;padding-top:4px}
.risk > b{display:block;color:var(--txt);font-size:12.5px;font-weight:800;margin-bottom:5px}
.risk p{margin:0;color:var(--sub);font-size:11.5px;line-height:1.72}

/* ─────────── 약속하지 않는 것 ─────────── */
ul.nolist{margin:12px 0 0;padding:0;list-style:none}
ul.nolist li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--txt)}
ul.nolist li:first-child{border-top:0}
ul.nolist li::before{content:'×';position:absolute;left:3px;top:8px;
  color:var(--red);font-weight:900;font-size:13px}

/* ─────────── 컨트랙트 목록 ─────────── */
.clist{margin-top:12px}
.crow{padding:10px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow > span{display:block;font-size:11.5px;font-weight:700;color:var(--sub)}
.crow > span > b{color:var(--txt);font-weight:800}
.crow > span > em{font-style:normal;color:var(--dim);font-size:10.5px;margin-left:4px}
.crow > code{display:block;margin-top:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--blue);
  word-break:break-all;line-height:1.45}
.crow > em{font-style:normal;font-size:10px;font-weight:700;color:var(--dim)}

/* ─────────── 꼬리 ─────────── */
.foot{margin:26px 2px 30px;color:var(--dim);font-size:10.5px;line-height:1.75}
.foot p{margin:5px 0}
.foot b{color:var(--sub)}
.foot a{color:var(--blue)}
.foot .legal{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);color:var(--sub)}