/* PDF 이미지 변환기 — 밀착 인화지. 작업면 ≥640: [인화지(파일 줄 + 필름 판) | 저장 전표 276px], 그보다 좁으면 파일 줄 → 판 → 전표(DOM 순서 그대로).
   필름 판은 두 테마 모두 어두운 고정 색이라, 판 위 글자·표시는 테마 토큰이 아니라 고정 색(--pi-*)끼리 대비를 맞춘다. */
.pi-work{container:piw/inline-size;position:relative;--pi-film:#20170e;--pi-edge:#e9a862;--pi-on:#f08a4b;--pi-txt:#f1e6cf;--pi-dim:rgba(241,230,207,.62)}
:root[data-theme="dark"] .pi-work{--pi-film:#130d08}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pi-work{--pi-film:#130d08} }
.pi-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.pi-sheet{display:flex;flex-direction:column;min-width:0}
.pi-slip{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--soft)}
.pi-status{margin:0;padding:8px 14px 10px;border-top:1px solid var(--soft);min-height:1.45em;font-size:12.5px}
.pi-status:empty{padding-top:4px;padding-bottom:4px}
.pi-work [hidden]{display:none !important}

/* 파일 줄 */
.pi-head{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;border-bottom:1px solid var(--soft)}
.pi-docic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--accent)}
.pi-docic svg{width:22px;height:22px}
.pi-doc{flex:1 1 120px;min-width:0;margin:0;display:flex;flex-direction:column;gap:1px;font-family:var(--sans)}
.pi-doc b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:var(--ink)}
.pi-doc span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pi-range{flex:0 1 auto;display:flex;align-items:center;gap:8px;min-width:0}
.pi-range .v2-label{white-space:nowrap}
.pi-range .v2-input{width:112px;min-width:0}
.pi-range input{text-align:left;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pi-range input[aria-invalid="true"]{color:var(--accent)}
.pi-all{flex:0 0 auto;height:var(--v2-ctl,42px);white-space:nowrap}
.pi-other{flex:0 0 auto;white-space:nowrap}
.pi-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;display:none}
.pi-prog.is-on{display:block}
.pi-prog i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform var(--ease)}

/* 필름 판 */
.pi-body{position:relative;flex:1 1 auto;min-height:340px;background:var(--pi-film);overflow:hidden}
.pi-drop,.pi-pw,.pi-frames,.pi-loupe{position:absolute;inset:0}
.pi-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pi-drop{display:grid;place-content:center;justify-items:center;gap:12px;padding:20px 16px}
.pi-ghost{position:absolute;inset:16px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:16px 14px;pointer-events:none}
.pi-ghost i{position:relative;border:1px dashed rgba(241,230,207,.2);border-radius:2px}
.pi-ghost b{position:absolute;left:6px;bottom:5px;font:600 10px/1 var(--mono);color:var(--pi-edge);opacity:.75}
.pi-dropbox{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:420px;padding:22px 22px 20px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 32px rgba(0,0,0,.4);cursor:pointer;font-family:var(--sans);transition:transform var(--ease)}
.pi-dropbox b{font-size:15px;line-height:1.45;color:var(--ink)}
.pi-dropbox span{font-size:12.5px;line-height:1.55;color:var(--muted)}
.pi-dropbox .pi-pick{margin-top:4px;height:var(--v2-ctl,42px);padding:0 18px;color:var(--on-fill)}
.pi-dropbox:hover .pi-pick{background:var(--fill-hover)}
.pi-file:focus-visible + .pi-ghost + .pi-dropbox{outline:2px solid var(--pi-on);outline-offset:3px}
.pi-work.is-over .pi-dropbox{transform:scale(1.02);border-color:var(--accent)}
.pi-work.is-over .pi-body{box-shadow:inset 0 0 0 2px var(--pi-on)}
.pi-facts{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.pi-facts li{padding:2px 8px;border-radius:var(--radius);background:rgba(0,0,0,.45);color:var(--pi-txt);font:500 11.5px/1.6 var(--sans)}

.pi-pw{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px;background:var(--card)}
.pi-pwtitle{margin:0;display:flex;flex-direction:column;gap:3px;font-family:var(--sans)}
.pi-pwtitle b{font-size:15px;color:var(--ink)}
.pi-pwtitle span{font-size:12.5px;color:var(--muted);line-height:1.55}
.pi-pwrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:520px}
.pi-pwbtns > div{display:flex;gap:6px}
.pi-pwbtns > .v2-label{display:block;margin:0 0 5px} /* 버튼 위 빈 라벨도 옆 칸 라벨(label, block)과 같은 높이로 */

.pi-work .pi-sheet .pi-body{container:pibody/size} /* 테마가 form을 바로 담은 요소를 v2in(inline-size)으로 덮으므로 선택자를 높인다 */
.pi-frames{margin:0;padding:16px 16px 18px;list-style:none;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 14px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(241,230,207,.3) transparent}
.pi-frames[data-n="1"],.pi-frames[data-n="2"],.pi-frames[data-n="3"],.pi-frames[data-n="4"]{align-content:center}
.pi-frames[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.pi-frames[data-n="2"],.pi-frames[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.pi-frames[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pi-fr{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
/* 칸(.pi-th)은 크기 컨테이너: 그림은 칸의 가로·세로(cqw·cqh) 안에 비율대로 들어가고, 표시(.pi-pg)는 그림에 붙는다 */
.pi-th{container:pith/size;position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4 / 5;padding:0;border:0;background:none;cursor:zoom-in;border-radius:2px}
/* 쪽이 4개 이하면 판을 채우되, 칸 높이는 판 높이와 '칸 폭 × A4 비율' 중 작은 쪽(그림과 체크 줄이 붙어 가운데 모임) */
.pi-frames[data-n="1"] .pi-th{aspect-ratio:auto;height:calc(100cqh - 76px)}
.pi-frames[data-n="2"] .pi-th{aspect-ratio:auto;height:min(calc(100cqh - 76px),calc((100cqw - 46px) / 2 * 1.415))}
.pi-frames[data-n="3"] .pi-th{aspect-ratio:auto;height:min(calc(100cqh - 76px),calc((100cqw - 60px) / 3 * 1.415))}
.pi-frames[data-n="4"] .pi-th{aspect-ratio:auto;height:min(calc(50cqh - 58px),calc((100cqw - 46px) / 2 * 1.415))}
.pi-pg{position:relative;display:block;line-height:0}
.pi-pg img,.pi-ph{display:block;max-width:100cqw;max-height:100cqh;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.45);transition:transform var(--ease),opacity var(--ease)}
.pi-ph{aspect-ratio:var(--ar,210 / 297);height:min(100cqh,calc(100cqw / var(--arn,.7071)));background:rgba(241,230,207,.07);box-shadow:none;outline:1px dashed rgba(241,230,207,.18)}
.pi-pg img:not([src]),.pi-fr.is-ready .pi-ph{display:none}
.pi-fr.is-ready .pi-pg img{animation:pi-print .7s ease-out both}
@keyframes pi-print{from{filter:invert(1) sepia(.55) saturate(1.6) hue-rotate(-12deg) brightness(.85);opacity:.4}to{filter:none;opacity:1}}
.pi-fr.is-on .pi-pg img{outline:2px solid var(--pi-on);outline-offset:3px}
.pi-fr:not(.is-on) .pi-pg img{opacity:.55}
.pi-th:hover .pi-pg{transform:translateY(-2px)}
.pi-pg{transition:transform var(--ease)}
.pi-th:focus-visible{outline:2px solid var(--pi-txt);outline-offset:2px}
.pi-fr.is-bad .pi-ph{outline-color:var(--pi-on);background:repeating-linear-gradient(135deg,rgba(240,138,75,.18) 0 6px,transparent 6px 12px)}
.pi-tag{position:absolute;top:5px;right:5px;z-index:1;padding:1px 5px;border-radius:2px;background:rgba(19,13,8,.78);color:var(--pi-edge);font:700 10px/1.5 var(--mono);letter-spacing:.02em}
.pi-ck{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--pi-dim);font:600 11.5px/1 var(--mono);letter-spacing:.04em}
.pi-ck input{position:absolute;inset:-4px;width:auto;height:auto;margin:0;opacity:0;cursor:pointer}
.pi-box{width:15px;height:15px;border:1.5px solid var(--pi-dim);border-radius:3px;display:grid;place-items:center}
.pi-ck input:checked + .pi-box{background:var(--pi-on);border-color:var(--pi-on)}
.pi-ck input:checked + .pi-box::after{content:"";width:7px;height:4px;border:solid #1d140b;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.pi-ck input:checked ~ .pi-no{color:var(--pi-edge)}
.pi-ck input:focus-visible + .pi-box{outline:2px solid var(--pi-txt);outline-offset:2px}

/* 크게 보기 */
.pi-loupe{z-index:2;display:flex;flex-direction:column;background:var(--pi-film)}
.pi-lbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 10px;background:rgba(0,0,0,.35)}
.pi-lbar .v2-btn{height:32px}
.pi-arrow{width:32px;padding:0;justify-content:center}
.pi-left{transform:rotate(180deg)}
.pi-pos{min-width:64px;text-align:center;font:600 12.5px var(--mono);color:var(--pi-txt);font-variant-numeric:tabular-nums}
.pi-linfo{flex:1 1 120px;min-width:0;font-size:12px;color:var(--pi-dim);font-variant-numeric:tabular-nums}
.pi-x{width:32px;padding:0;justify-content:center;margin-left:auto}
.pi-lview{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;outline:none}
.pi-lview img{position:absolute;inset:0;margin:auto;max-width:calc(100% - 28px);max-height:calc(100% - 28px);background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.55);transition:filter var(--ease)}
.pi-lview.is-wait img{filter:blur(1.5px) brightness(.9)}
.pi-lview.is-pix{overflow:auto;padding:14px}
.pi-lview.is-pix img{position:static;margin:0 auto;max-width:none;max-height:none}
.pi-lview:focus-visible{box-shadow:inset 0 0 0 2px var(--pi-on)}

/* 저장 전표 */
.pi-out{padding:14px 16px 14px;border-bottom:1px solid var(--soft)}
.pi-sample{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center}
.pi-sample p{margin:0;display:flex;flex-direction:column;gap:3px;font-family:var(--sans)}
.pi-sample b{font-size:14px;color:var(--ink)}
.pi-sample span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.pi-sample .v2-btn{grid-column:1 / -1;justify-self:start;height:var(--v2-ctl,42px)}
.pi-sfan{position:relative;width:46px;height:58px}
.pi-sfan i{position:absolute;inset:0 6px 0 6px;background:var(--paper);border:1px solid var(--line);border-radius:1px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pi-sfan i:nth-child(1){transform:rotate(-9deg) translateX(-4px)}
.pi-sfan i:nth-child(2){transform:rotate(7deg) translateX(4px)}
.pi-sfan i:nth-child(3){padding:9px 6px;background:repeating-linear-gradient(var(--paper) 0 7px,var(--soft) 7px 8px) content-box,var(--paper)} /* 맨 위 종이: 글줄 */
.pi-res .v2-big{margin-top:6px}
.pi-sub{margin:8px 0 0;font-size:13px;line-height:1.5}
.pi-sub2{margin:2px 0 0;min-height:1.5em;font-size:12px;line-height:1.5;color:var(--muted)}
.pi-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pi-acts .v2-btn{height:var(--v2-ctl,42px)}
.pi-save{position:relative;overflow:hidden}
.pi-sbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--on-fill);opacity:0;transform-origin:left;transform:scaleX(var(--p,0))}
.pi-save.is-busy .pi-sbar{opacity:.75}

.pi-set{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:14px 16px 16px}
.pi-g{display:flex;flex-direction:column;gap:6px;min-width:0}
.pi-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.pi-dpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.pi-dpi.has-extra{grid-template-columns:repeat(3,minmax(0,1fr))} /* 스캔 원본 단추가 더해지면 3 + 2(다섯 칸이면 단추 45px라 낱말이 끊김) */
.pi-seg button{height:auto;min-height:44px;padding:5px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.15;min-width:0}
.pi-seg button b{font:700 13.5px var(--sans);font-variant-numeric:tabular-nums}
.pi-seg button small{max-width:100%;font-size:10.5px;font-weight:500;overflow-wrap:anywhere;text-align:center}
.pi-seg button.is-native:not([aria-pressed="true"]) small{color:var(--accent);font-weight:700}
.pi-hint{font-size:11.5px;line-height:1.5;color:var(--muted)}
.pi-scan{color:var(--ink)}
.pi-q .v2-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pi-q output{font:700 12.5px var(--mono);color:var(--ink)}
.pi-q input[type=range]{width:100%;height:20px;margin:0;accent-color:var(--accent)}
.pi-q .pi-hint{min-height:20px;display:flex;align-items:center}
.pi-q.is-off output{opacity:0}

@container piw (min-width:640px){
  .pi-grid{grid-template-columns:minmax(0,1fr) 276px}
  .pi-slip{border-top:0;border-left:1px solid var(--soft)}
}
@container piw (max-width:639px){
  .pi-work .pi-sheet .pi-body{container-type:normal;min-height:300px}
  .pi-work[data-state="doc"] .pi-body{min-height:0}
  .pi-work.is-loupe .pi-body{height:min(72vh,520px)}
  .pi-frames,.pi-frames[data-n]{position:static;max-height:min(64vh,460px);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));align-content:start;padding:14px 12px;gap:16px 10px}
  .pi-frames[data-n="1"]{grid-template-columns:minmax(0,1fr)}
  .pi-frames[data-n] .pi-th{aspect-ratio:4 / 5;height:auto}
  .pi-frames[data-n="1"] .pi-th{aspect-ratio:auto;height:min(56vh,400px)}
  .pi-range{flex:1 1 100%}
  .pi-range .v2-input{flex:1 1 auto;width:auto}
}
@container piw (max-width:420px){
  .pi-ghost{grid-template-columns:repeat(3,1fr)}
  .pi-ghost i:nth-child(n+7){display:none}
  .pi-dropbox{padding:18px 14px 16px}
  .pi-lbar .pi-linfo{order:9;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .pi-fr.is-ready .pi-pg img{animation:none}
  .pi-pg,.pi-pg img,.pi-dropbox,.pi-prog i,.pi-lview img{transition:none}
}