/* PDF 페이지 번호 넣기 전용 CSS (2026-10-21). '제본 펼침면': 결과 띠 → 설정 막대 → 펼침면(쪽 넘김) → 번호 자 → 구간 표.
   종이(쪽)는 테마와 상관없이 흰색(실제 PDF), 책상은 --wash. 구간은 두 톤(--fill · 옅은 --fill)과 빗금(번호 없음), 강조색은 지금 보는 쪽 창·구간 깃발·자리 테두리에만.
   좁은 폭은 툴 폭 컨테이너 쿼리(@container pnb)로 접는다. 공용 부품은 assets/v2.css. */
.pnb-work{container:pnb / inline-size;position:relative}
.pnb-work.is-over{outline:2px dashed var(--ink);outline-offset:-6px}
.pnb-work [hidden]{display:none!important}

/* 파일 띠 */
.pnb-file{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.pnb-fico{flex:0 0 auto;width:30px;height:30px;color:var(--muted)}
.pnb-fname{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;margin:0}
.pnb-fname b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnb-fname span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.pnb-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.pnb-warn{margin:0;padding:9px 16px;border-bottom:1px solid var(--soft);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}

/* 고르기 전: 펼친 책 모양 끌어 놓기 상자 + 예시 카드 */
.pnb-drop{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px;padding:16px}
.pnb-dropbox{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 16px;border:1px dashed var(--line);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 55%, var(--paper));text-align:center;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.pnb-dropbox > b{max-width:30em;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
.pnb-dropbox > span:not(.v2-btn){max-width:36em;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.pnb-dropbox .pnb-pickbtn{margin-top:8px;pointer-events:none}
.pnb-dropbox:hover,.pnb-work.is-over .pnb-dropbox{background:var(--wash);border-color:var(--ink)}
.pnb-file:focus-within ~ .pnb-drop .pnb-dropbox{outline:2px solid var(--accent);outline-offset:2px}
.pnb-dart{width:180px;height:92px;margin-bottom:6px;overflow:visible}
.pnb-da-pg{fill:var(--card);stroke:var(--line);stroke-width:1}
.pnb-da-sp{stroke:var(--line);stroke-width:1}
.pnb-da-ln path{stroke:var(--soft);stroke-width:3;stroke-linecap:round}
.pnb-da-n{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--muted)}
.pnb-da-n--a{fill:var(--accent)}
.pnb-da-go{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pnb-dropbox:hover .pnb-da-go,.pnb-work.is-over .pnb-da-go{transform:translateY(-5px)}
.pnb-sample{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.pnb-sthumb{width:100%;height:auto}
.pnb-sp{fill:var(--card);stroke:var(--line);stroke-width:.6}
.pnb-sp--r{fill:color-mix(in srgb, var(--fill) 18%, var(--card))}
.pnb-sp--none{fill:var(--wash);stroke-dasharray:1.5 1.5}
.pnb-sn{font-family:var(--sans);font-size:4.6px;font-weight:700;fill:var(--ink)}
.pnb-sk{font-family:var(--mono);font-size:4.4px;fill:var(--muted)}
.pnb-sa{stroke:var(--line);stroke-width:.6}
.pnb-sample p{display:flex;flex-direction:column;gap:3px;margin:0}
.pnb-sample p b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.pnb-sample p span{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pnb-sample .v2-btn{align-self:flex-start}
.pnb-facts{margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--soft);list-style:none;display:grid;gap:4px}
.pnb-facts li{font-family:var(--sans);font-size:11.5px;color:var(--muted);padding-left:12px;position:relative}
.pnb-facts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--line)}

/* 결과 띠: 번호가 들어갈 쪽 수 | 저장 */
.pnb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;padding:14px 16px;border-bottom:1px solid var(--soft)}
.pnb-count{min-width:0}
.pnb-big{display:flex;align-items:baseline;gap:6px;margin:3px 0 0;font-family:var(--sans);font-weight:800;font-size:42px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.pnb-big small{font-size:16px;font-weight:700;letter-spacing:0;color:var(--muted)}
.pnb-osub{margin:7px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.pnb-save{flex:0 0 auto;padding:0 16px}
.pnb-work.is-busy .pnb-save{cursor:progress}

/* 설정 막대: 칸마다 라벨 + 42px 조절(세그먼트도 42px), 줄바꿈되면 칸이 줄 폭을 나눠 채운다 */
.pnb-bar{display:flex;flex-wrap:wrap;gap:12px 14px;padding:14px 16px;border-bottom:1px solid var(--soft)}
.pnb-g{flex:1 1 150px;min-width:0}
.pnb-g > .v2-label{display:block;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnb-g--tpl{flex-basis:100%} /* 칩 글자가 언어마다 길어(Page 1 of 8) 다른 칸과 한 줄에 두면 접힌 칩이 높이를 어긋나게 함 */
.pnb-g--pos{flex-basis:330px}
.pnb-g--font{flex-basis:190px}
.pnb-g--color{flex-basis:210px}
.pnb-g--custom,.pnb-g--lab{flex-basis:100%}
.pnb-g .v2-seg{display:flex;flex-wrap:nowrap}
#pnbTpls{flex-wrap:wrap} /* 칩 글자가 긴 언어(Page 1 of 8 · Página 1 de 8)는 좁은 폭에서 두 줄로 */
.pnb-g .v2-seg button{flex:1 1 auto;height:var(--v2-ctl);padding:0 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pnb-gc{display:flex;flex-wrap:wrap;gap:6px}
.pnb-gc .v2-seg:first-child{flex:0 0 auto}
.pnb-gc .v2-seg:last-child{flex:1 1 220px}
.pnb-ff--serif{font-family:var(--serif)!important}
.pnb-ff--mono{font-family:var(--mono)!important}
.pnb-sw{display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:50%;vertical-align:-1px;border:1px solid var(--line)}
.pnb-sw--black{background:#1a1a1a}
.pnb-sw--gray{background:#737373}
.pnb-sw--white{background:#fff}
.pnb-tplin input{text-align:left;font-family:var(--mono);font-size:14.5px}
.pnb-hint{display:block;margin-top:5px;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.pnb-g--lab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.pnb-g--lab .pnb-hint{margin:0}
.pnb-step{overflow:hidden}
.pnb-step input{flex:1 1 2.6em;width:2.6em;min-width:2.6em;text-align:center;padding:0 2px}
.pnb-step b{border-left:0!important;background:none!important;padding:0 8px 0 0!important;min-width:0!important;white-space:nowrap}
.pnb-sbtn{flex:0 0 36px;border:0;background:var(--wash);font-family:var(--sans);font-size:18px;font-weight:600;line-height:1;color:var(--ink);cursor:pointer}
.pnb-sbtn:first-child{border-right:1px solid var(--soft)}
.pnb-sbtn:last-child{border-left:1px solid var(--soft)}
.pnb-sbtn:hover{background:var(--btn)}

/* 펼침면 */
.pnb-desk{padding:12px 16px 14px;border-bottom:1px solid var(--soft)}
.pnb-nav{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.pnb-navb{width:34px;justify-content:center;padding:0}
.pnb-navb .i{width:18px;height:18px}
.pnb-where{margin:0;min-width:7.5em;text-align:center;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pnb-here{margin-left:auto}
.pnb-stage{position:relative;padding:18px;border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 80%, var(--soft));overflow:hidden;perspective:2200px;outline:0}
.pnb-stage:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.pnb-spread{position:relative;display:flex;justify-content:center;transform-style:preserve-3d}
.pnb-slot{flex:0 0 50%;display:flex;align-items:center;min-width:0}
.pnb-slot--l{justify-content:flex-end}
.pnb-slot--r{justify-content:flex-start}
.pnb-slot--s{flex-basis:100%;justify-content:center}
.pnb-pg{position:relative;flex:0 0 auto;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.10)}
.pnb-pg.is-blank{background:repeating-linear-gradient(135deg,#fff 0 10px,#f4f2ee 10px 11px)}
.pnb-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.pnb-ep{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 9%;border:1px dashed color-mix(in srgb, var(--line) 80%, transparent);background:color-mix(in srgb, var(--paper) 55%, transparent);font-family:var(--sans);text-align:left}
.pnb-ep b{font-size:13.5px;font-weight:700;color:var(--ink)}
.pnb-ep span{font-size:12px;line-height:1.6;color:var(--muted)}
.pnb-slot--l .pnb-ep,.pnb-face--l .pnb-ep{border-right:0}
.pnb-slot--r .pnb-ep,.pnb-face--r .pnb-ep{border-left:0}
/* 책 가운데 접히는 곳 그늘 */
.pnb-slot--l .pnb-pg::after,.pnb-slot--r .pnb-pg::after,.pnb-face--l .pnb-pg::after,.pnb-face--r .pnb-pg::after{content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none}
.pnb-slot--l .pnb-pg::after,.pnb-face--l .pnb-pg::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.10))}
.pnb-slot--r .pnb-pg::after,.pnb-face--r .pnb-pg::after{left:0;background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.10))}
.pnb-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pnb-no{transition:transform .42s cubic-bezier(.22,1,.36,1)}
.pnb-pg.is-new .pnb-no{transition:none}
.pnb-nt{white-space:pre}
.pnb-halo{fill:var(--accent);fill-opacity:.10;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0}
.pnb-pg.is-hl .pnb-halo{animation:pnb-hl 1.4s ease-out}
@keyframes pnb-hl{0%,40%{opacity:1}100%{opacity:0}}
.pnb-tag{position:absolute;left:6px;top:6px;z-index:2;padding:2px 6px;border:1px solid var(--soft);border-radius:3px;background:var(--paper);font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted)}
.pnb-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:minmax(22px,12%) 1fr minmax(22px,12%)}
.pnb-z{border:0;padding:0;background:none;cursor:pointer;border-radius:2px}
.pnb-z:nth-child(n+4){grid-row:3}
.pnb-z:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);outline:1px dashed var(--accent);outline-offset:-2px}
/* 넘어가는 장: 앞면 = 지금 쪽, 뒷면 = 새 쪽. 등을 축으로 돈다 */
.pnb-leaf{position:absolute;top:0;height:100%;width:50%;z-index:3;transform-style:preserve-3d;transition:transform .64s cubic-bezier(.45,.05,.25,1),opacity .64s ease}
.pnb-leaf.is-r{left:50%;transform-origin:left center}
.pnb-leaf.is-l{left:0;transform-origin:right center}
.pnb-leaf.is-s{left:0;width:100%;transform-origin:left center}
.pnb-leaf.is-r.is-go{transform:rotateY(-180deg)}
.pnb-leaf.is-l.is-go{transform:rotateY(180deg)}
.pnb-leaf.is-s.is-go{transform:rotateY(-100deg);opacity:0}
.pnb-leaf.is-s.is-back{transform:rotateY(-100deg);opacity:0}
.pnb-leaf.is-s.is-back.is-go{transform:none;opacity:1}
.pnb-face{position:absolute;inset:0;display:flex;align-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pnb-face--b{transform:rotateY(180deg)}
.pnb-face--l{justify-content:flex-end}
.pnb-face--r{justify-content:flex-start}
.pnb-face--s{justify-content:center}
.pnb-shint{margin:7px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 번호 자: 위 = PDF 쪽 순서, 아래 = 찍힐 번호 */
.pnb-ruler{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-top:12px}
.pnb-rkey{display:flex;flex-direction:column;justify-content:space-between;height:50px;margin:0;padding:2px 0 1px;font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:12px;color:var(--muted);text-align:right;white-space:nowrap}
.pnb-rkey span:last-child{color:var(--ink)}
.pnb-rbox{position:relative;height:50px;cursor:pointer;touch-action:pan-y;user-select:none}
.pnb-rsvg{display:block;overflow:visible}
.pnb-rb--0{fill:var(--fill)}
.pnb-rb--1{fill:color-mix(in srgb, var(--fill) 45%, var(--paper))}
.pnb-rb--none{fill:url(#pnbHatch)}
.pnb-hb{fill:var(--paper)}
.pnb-hl{stroke:var(--line);stroke-width:1.6}
.pnb-tick{stroke:var(--paper);stroke-width:1;opacity:.75}
.pnb-win{fill:none;stroke:var(--accent);stroke-width:2;transition:x .25s cubic-bezier(.22,1,.36,1),width .25s cubic-bezier(.22,1,.36,1)}
.pnb-rt{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.pnb-rn{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.pnb-rn.is-none{font-weight:400;fill:var(--muted)}
.pnb-flags{position:absolute;inset:0;pointer-events:none}
.pnb-flag{position:absolute;top:10px;width:24px;height:28px;margin-left:-12px;padding:0;border:0;background:none;cursor:ew-resize;pointer-events:auto;touch-action:none}
.pnb-flag i{position:absolute;left:11px;top:3px;width:2px;height:25px;background:var(--accent)}
.pnb-flag i::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:6px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}
.pnb-flag.is-err{opacity:.35}
.pnb-flag:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}

/* 구간 표: 넓으면 한 줄(subgrid), 좁으면 두 줄 */
.pnb-plan{padding:14px 16px}
.pnb-phead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px}
.pnb-phead .v2-label{font-size:12.5px;color:var(--ink)}
.pnb-rows{display:grid;grid-template-columns:auto minmax(7.6em,1fr) minmax(8.4em,1.15fr) minmax(5.4em,.8fr) minmax(0,1.5fr) 32px;gap:8px 10px;align-items:center}
.pnb-rh,.pnb-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.pnb-rh span{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.pnb-rsw{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted)}
.pnb-rsw i{width:14px;height:14px;border-radius:3px;background:var(--fill)}
.pnb-row[data-tone="1"] .pnb-rsw i{background:color-mix(in srgb, var(--fill) 45%, var(--paper))}
.pnb-row[data-tone="none"] .pnb-rsw i{background:repeating-linear-gradient(135deg,var(--paper) 0 2px,var(--line) 2px 3.5px);box-shadow:inset 0 0 0 1px var(--line)}
.pnb-fixed{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pnb-rf--from b{white-space:nowrap}
.pnb-sel{display:block;width:100%;height:var(--v2-ctl);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.pnb-rf--start input:disabled{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--soft) 4px 5px)}
.pnb-rr{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.pnb-rr.is-err{color:var(--accent);font-size:12px}
.pnb-rx{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);cursor:pointer}
.pnb-rx:hover{background:var(--btn);color:var(--ink)}
.pnb-rx svg{width:16px;height:16px}
.pnb-rx--none{border:0;background:none;cursor:default}
.pnb-pfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px}
.pnb-pfoot .pnb-hint{margin:0;flex:1 1 18em}
.pnb-status{display:block;margin:0;padding:10px 16px 14px;min-height:1.5em}
.pnb-status a{color:inherit;font-weight:700}
.pnb-noscript{margin:0;padding:12px 16px;font-family:var(--sans);font-size:13px}

@container pnb (max-width:560px){
  .pnb-drop{grid-template-columns:1fr}
  .pnb-big{font-size:36px}
  .pnb-bar,.pnb-desk,.pnb-plan{padding-left:12px;padding-right:12px}
  .pnb-stage{padding:12px}
  .pnb-here{flex-basis:100%;margin-left:0;justify-content:center}
  .pnb-nav{flex-wrap:wrap}
  .pnb-where{flex:1 1 auto}
  .pnb-rows{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.8fr)}
  /* 좁으면 칸 안 단위 글자(쪽부터·en adelante)를 빼고 머리줄 세 칸(시작 쪽 · 모양 · 첫 번호)을 위에 둔다 */
  .pnb-rh span:nth-child(1),.pnb-rh span:nth-child(5),.pnb-rh span:nth-child(6),.pnb-rf--from b{display:none}
  .pnb-row{grid-template-columns:subgrid;grid-template-areas:"sw rr x" "from style start";row-gap:6px;padding-bottom:10px;border-bottom:1px solid var(--soft)}
  .pnb-rsw{grid-area:sw}
  .pnb-rr{grid-area:rr}
  .pnb-rx{grid-area:x;justify-self:end}
  .pnb-rf--from{grid-area:from}
  .pnb-row > .pnb-rf:nth-of-type(2){grid-area:style}
  .pnb-rf--start{grid-area:start}
}
@media (prefers-reduced-motion:reduce){
  .pnb-no,.pnb-leaf,.pnb-win,.pnb-da-go{transition:none!important}
  .pnb-pg.is-hl .pnb-halo{animation:none}
}