/* PDF 페이지 회전기 전용 CSS (2026-10-21). '방향 교정대': 파일 띠 → [결과 · 방향 띠 · 설정표 | 확대 판] → 쪽 판.
   강조색(--accent)은 '글자가 누운 쪽'과 확대 판의 추천 가장자리에만 쓴다. 바꾼 쪽은 옅은 강조 바탕. 좁은 폭은 툴 폭 컨테이너 쿼리(@container ppr)로 접는다. 공용 부품은 assets/v2.css. */
.ppr-work{container:ppr / inline-size;position:relative}
.ppr-work.is-over{outline:2px dashed var(--ink);outline-offset:-6px}
.ppr-work [hidden]{display:none!important}

/* 파일 띠 */
.ppr-file{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.ppr-fico{flex:0 0 auto;width:30px;height:30px;color:var(--muted)}
.ppr-fname{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;margin:0}
.ppr-fname b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppr-fname span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.ppr-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ppr-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)}

/* 고르기 전: 끌어 놓기 상자 + 예시 카드 */
.ppr-drop{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:14px;padding:16px}
.ppr-dropbox{min-height:236px;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)}
.ppr-dropbox > b{max-width:30em;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
.ppr-dropbox > span:not(.v2-btn){max-width:34em;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ppr-dropbox .ppr-pickbtn{margin-top:8px;pointer-events:none}
.ppr-dropbox:hover,.ppr-work.is-over .ppr-dropbox{background:var(--wash);border-color:var(--ink)}
.ppr-file:focus-within ~ .ppr-drop .ppr-dropbox{outline:2px solid var(--accent);outline-offset:2px}
.ppr-art{width:132px;height:92px;margin-bottom:4px;overflow:visible}
.ppr-art-pg{transform:rotate(-90deg);transform-origin:66px 46px;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.ppr-art-pg rect{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.ppr-art-band{fill:var(--accent)}
.ppr-art-ln{stroke:var(--soft);stroke-width:2.2;stroke-linecap:round;fill:none}
.ppr-art-arc{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.ppr-dropbox:hover .ppr-art-pg,.ppr-work.is-over .ppr-art-pg{transform:none}
.ppr-dropbox:hover .ppr-art-band,.ppr-work.is-over .ppr-art-band{fill:var(--ink)}
.ppr-dropbox:hover .ppr-art-arc,.ppr-work.is-over .ppr-art-arc{opacity:0}
.ppr-sample{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.ppr-sthumb{width:100%;height:auto;max-height:44px}
.ppr-sp{fill:var(--card);stroke:var(--line);stroke-width:.8}
.ppr-sp--blank{fill:color-mix(in srgb, var(--wash) 80%, var(--paper));stroke-dasharray:2 1.5}
.ppr-sb{fill:var(--ink)}
.ppr-sb--side{fill:var(--accent)}
.ppr-sample p{display:flex;flex-direction:column;gap:3px;margin:0}
.ppr-sample p b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.ppr-sample p span{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.ppr-sample .v2-btn{align-self:flex-start}
.ppr-facts{margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--soft);list-style:none;display:grid;gap:4px}
.ppr-facts li{font-family:var(--sans);font-size:11.5px;color:var(--muted);padding-left:12px;position:relative}
.ppr-facts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--line)}

/* 방향 교정대: 왼쪽 = 결과 · 방향 띠 · 설정표, 오른쪽 = 확대 판 */
.ppr-desk{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,38%,320px);grid-template-areas:"head lens" "map lens" "set lens";grid-template-rows:auto auto 1fr;border-bottom:1px solid var(--soft)}
.ppr-head{grid-area:head;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--soft)}
.ppr-count{min-width:0}
.ppr-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}
.ppr-big b{display:inline-block}
.ppr-big b.is-pop{animation:ppr-pop .32s cubic-bezier(.3,1.4,.5,1)}
@keyframes ppr-pop{from{transform:translateY(5px);opacity:.3}}
.ppr-big small{font-size:16px;font-weight:700;letter-spacing:0;color:var(--muted)}
.ppr-osub{margin:7px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.ppr-acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.ppr-hb{height:var(--v2-ctl)}
.ppr-hb:disabled,.ppr-save:disabled,.ppr-rots .v2-btn:disabled,.ppr-lacts .v2-btn:disabled{opacity:.45;cursor:not-allowed}
.ppr-save{padding:0 16px}
/* 방향 띠: 쪽마다 지금 보이는 모양(세로·가로), 굵은 변 = 글자의 위(바로 서면 먹색, 누우면 강조색), 점무늬 = 글자 없음, 옅은 강조 바탕 = 돌린 쪽 */
.ppr-map{grid-area:map;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:11px 16px 10px;border-bottom:1px solid var(--soft)}
.ppr-strip{--u:22px;flex:1 1 200px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:max(2px,calc(var(--u) / 6));min-height:var(--u)}
.ppr-g{position:relative;display:block;box-sizing:border-box;width:calc(var(--u) * .72);height:var(--u);border:1px solid var(--line);background:var(--paper);cursor:pointer;transition:width .35s cubic-bezier(.3,.7,.3,1),height .35s cubic-bezier(.3,.7,.3,1),background .2s}
.ppr-g.is-land{width:var(--u);height:calc(var(--u) * .72)}
.ppr-g.is-sq{width:calc(var(--u) * .85);height:calc(var(--u) * .85)}
.ppr-g::before{content:"";position:absolute;background:var(--ink);transition:background .2s}
.ppr-g.up-t::before{left:-1px;right:-1px;top:-1px;height:max(2px,calc(var(--u) / 7))}
.ppr-g.up-b::before{left:-1px;right:-1px;bottom:-1px;height:max(2px,calc(var(--u) / 7))}
.ppr-g.up-l::before{top:-1px;bottom:-1px;left:-1px;width:max(2px,calc(var(--u) / 7))}
.ppr-g.up-r::before{top:-1px;bottom:-1px;right:-1px;width:max(2px,calc(var(--u) / 7))}
.ppr-g.up-b::before,.ppr-g.up-l::before,.ppr-g.up-r::before{background:var(--accent)}
.ppr-g.is-blank{background:radial-gradient(circle,var(--soft) 0 .8px,transparent 1.1px) 0 0 / 4px 4px,var(--paper)}
.ppr-g.is-chg{background-color:color-mix(in srgb, var(--accent) 18%, var(--paper))}
.ppr-g.is-sel{outline:1.5px solid var(--ink);outline-offset:1px}
.ppr-g.is-cur{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent)}
.ppr-g:hover{border-color:var(--ink)}
.ppr-strip.is-tiny .ppr-g{border-color:var(--soft)}
.ppr-strip.is-tiny .ppr-g.is-sel{outline:0;border-color:var(--ink)}
.ppr-legend{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ppr-lg{display:inline-block;width:9px;height:13px;margin-left:8px;border:1px solid var(--line);background:var(--paper);box-sizing:border-box}
.ppr-lg:first-child{margin-left:0}
.ppr-lg--up{border-top:3px solid var(--ink)}
.ppr-lg--side{border-left:3px solid var(--accent)}
.ppr-lg--blank{background:radial-gradient(circle,var(--soft) 0 .8px,transparent 1.1px) 0 0 / 4px 4px,var(--paper)}
.ppr-lg--chg{background:color-mix(in srgb, var(--accent) 18%, var(--paper))}
/* 설정표: 라벨 | 조절 */
.ppr-set{grid-area:set;display:grid;grid-template-columns:max-content minmax(0,1fr);align-content:start;align-items:center;gap:10px 14px;margin:0;padding:13px 16px 14px}
.ppr-sl{white-space:nowrap}
.ppr-sc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.ppr-set .v2-seg small{margin-left:3px;font-family:var(--mono);font-size:11.5px;opacity:.85}
.ppr-set .v2-seg button:disabled{opacity:.45;cursor:not-allowed}
.ppr-nf{flex:0 1 200px;min-width:120px}
.ppr-nf input{text-align:left;font-family:var(--mono);font-size:14px}
.ppr-nhint{flex:1 1 150px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.ppr-nhint.is-err{color:var(--accent);font-weight:600}
.ppr-rots{display:flex;flex-wrap:wrap;gap:6px}
.ppr-rots .v2-btn .i,.ppr-lacts .v2-btn .i{width:16px;height:16px}
.ppr-det{gap:8px 12px}
.ppr-dett{flex:1 1 190px;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.ppr-fix{flex:0 0 auto}
/* 확대 판: 가장자리 표(오른쪽·아래·왼쪽)의 글자는 그 변이 위일 때 바로 읽히는 방향으로 놓인다 */
.ppr-lens{grid-area:lens;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px 14px;border-left:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 45%, var(--card))}
.ppr-stage{position:relative;width:100%;max-width:300px;padding:24px;box-sizing:border-box}
.ppr-lbox{position:relative;width:100%;aspect-ratio:1 / 1;background:color-mix(in srgb, var(--wash) 70%, var(--paper));border-radius:2px}
.ppr-lbox canvas,.ppr-lbox .ppr-ph,.ppr-th canvas,.ppr-th .ppr-ph{position:absolute;left:50%;top:50%;display:block;box-sizing:border-box;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.3,.7,.3,1),width .5s cubic-bezier(.3,.7,.3,1),height .5s cubic-bezier(.3,.7,.3,1),opacity .2s}
.ppr-lbox canvas,.ppr-th canvas{background:#fff;box-shadow:0 0 0 1px var(--soft),0 2px 6px rgba(26,18,8,.16)}
.ppr-lbox canvas.is-new{opacity:0}
.ppr-lbox .ppr-ph{background:var(--paper);border:1px solid var(--soft)}
.ppr-lbox:has(canvas) .ppr-ph{visibility:hidden}
.ppr-top{position:absolute;left:50%;top:3px;transform:translateX(-50%);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.ppr-top::before{content:"";display:inline-block;margin-right:4px;border:4px solid transparent;border-bottom:5px solid currentColor;border-top:0;vertical-align:1px}
.ppr-edge{position:absolute;display:grid;place-items:center;padding:0;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.ppr-edge span{white-space:nowrap;line-height:1}
.ppr-edge--r,.ppr-edge--l{top:24px;bottom:24px;width:20px;margin:auto 0;height:min(76%,120px)}
.ppr-edge--r{right:0}
.ppr-edge--l{left:0}
.ppr-edge--b{left:24px;right:24px;bottom:0;height:20px;width:min(76%,150px);margin:0 auto}
.ppr-edge--r span,.ppr-edge--l span{writing-mode:vertical-rl;text-orientation:sideways}
.ppr-edge--l span{transform:rotate(180deg)}
.ppr-edge--b span{transform:rotate(180deg)}
.ppr-edge:hover,.ppr-edge:focus-visible{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--card)}
.ppr-lens[data-up="r"] .ppr-edge--r,.ppr-lens[data-up="b"] .ppr-edge--b,.ppr-lens[data-up="l"] .ppr-edge--l{border:1.5px solid var(--accent);background:var(--accent-wash);color:var(--accent);animation:ppr-hint 1.6s ease-in-out 2}
@keyframes ppr-hint{50%{box-shadow:0 0 0 4px var(--accent-wash)}}
.ppr-lnav{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;max-width:300px}
.ppr-nb{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);color:var(--ink);cursor:pointer}
.ppr-nb svg{width:18px;height:18px}
.ppr-nb:disabled{opacity:.4;cursor:not-allowed}
.ppr-linfo{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;margin:0;text-align:center}
.ppr-linfo b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ppr-linfo span{font-family:var(--sans);font-size:11.5px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums}
.ppr-lacts{display:flex;justify-content:center;gap:6px;width:100%;max-width:300px}
.ppr-lacts .v2-btn{padding:0 10px}
.ppr-lacts .ppr-lorig{padding:0 11px}
.ppr-lhint{width:100%;max-width:300px;margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.ppr-lhint.is-side{color:var(--accent);font-weight:600}

/* 쪽 판 */
.ppr-sheet{padding:12px 16px 6px}
.ppr-thead{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.ppr-bhint{margin:4px 0 8px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.ppr-bwrap{position:relative;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scroll-padding-top:6px;margin:0 -16px;padding:0 16px;transition:box-shadow .15s}
.ppr-bwrap.is-top{box-shadow:inset 0 10px 9px -9px rgba(26,18,8,.3)}
.ppr-bwrap.is-bot{box-shadow:inset 0 -10px 9px -9px rgba(26,18,8,.3)}
.ppr-bwrap.is-top.is-bot{box-shadow:inset 0 10px 9px -9px rgba(26,18,8,.3),inset 0 -10px 9px -9px rgba(26,18,8,.3)}
.ppr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;padding:6px 0 10px}
.ppr-cell{position:relative;scroll-snap-align:start;min-width:0}
.ppr-pg{width:100%;display:flex;flex-direction:column;gap:5px;min-width:0;padding:5px 5px 4px;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.ppr-pg:hover{border-color:var(--soft);background:color-mix(in srgb, var(--wash) 60%, transparent)}
.ppr-th{position:relative;display:block;width:100%;aspect-ratio:1 / 1;overflow:hidden;background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.ppr-th .ppr-ph{display:grid;place-items:center;background:var(--paper);border:1px solid var(--soft);font-family:var(--mono);font-size:20px;font-weight:700;color:var(--soft)}
.ppr-th.is-done .ppr-ph{display:none}
.ppr-no{display:flex;align-items:center;gap:6px;min-width:0;height:24px;padding-right:58px;font-family:var(--sans);font-size:12px;font-variant-numeric:tabular-nums}
.ppr-no b{padding:1px 5px;border-radius:2px;font-weight:700}
.ppr-chg{position:absolute;left:4px;bottom:4px;z-index:2;padding:2px 5px;border-radius:2px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.ppr-chg:empty{display:none}
.is-cur .ppr-no b{background:var(--ink);color:var(--paper)}
.ppr-mini{position:absolute;right:5px;bottom:4px;display:flex;gap:2px}
.ppr-mb{display:grid;place-items:center;width:27px;height:24px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);cursor:pointer}
.ppr-mb svg{width:15px;height:15px}
.ppr-mb:hover{border-color:var(--ink);color:var(--ink)}
.ppr-ck{position:absolute;left:10px;top:10px;display:none;width:20px;height:20px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--card)}
.ppr-ck::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.is-sel .ppr-ck{display:block;animation:ppr-ck .22s cubic-bezier(.3,1.4,.5,1)}
@keyframes ppr-ck{from{transform:scale(.4);opacity:0}}
.is-sel .ppr-pg{border-color:var(--ink);background:var(--card)}
.ppr-dot{position:absolute;right:10px;top:10px;display:none;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--card)}
.is-side .ppr-dot{display:block}
.is-chg .ppr-th{background:color-mix(in srgb, var(--accent) 12%, var(--paper))}
.ppr-status{margin:0;padding:10px 16px 12px;border-top:1px solid var(--soft)}
.ppr-status:empty{display:none}
.ppr-noscript{margin:0;padding:12px 16px;font-family:var(--sans);font-size:13px}

@container ppr (max-width:640px){
  .ppr-drop{grid-template-columns:minmax(0,1fr)}
  .ppr-dropbox{min-height:200px}
  .ppr-desk{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lens" "map" "set";grid-template-rows:none}
  .ppr-lens{border-left:0;border-bottom:1px solid var(--soft)}
  .ppr-stage{max-width:286px}
}
@container ppr (max-width:480px){
  .ppr-acts{flex:1 1 100%}
  .ppr-acts .ppr-save{flex:1;justify-content:center}
  .ppr-big{font-size:36px}
  .ppr-set{grid-template-columns:minmax(0,1fr);gap:5px}
  .ppr-set .ppr-sc + .ppr-sl{margin-top:8px}
  .ppr-no{padding-right:56px}
}
@media (prefers-reduced-motion:reduce){
  .ppr-work *,.ppr-work *::before,.ppr-work *::after{animation:none!important;transition:none!important}
}
html:lang(ko) .ppr-work{word-break:keep-all;overflow-wrap:anywhere}