/* PDF 암호 설정 전용 CSS (2026-10-21). '봉인대': 파일 띠 → [문서 카드 | 설정 → 잠그기·확인·저장].
   문서 카드는 줄 높이를 다 채우도록 미리 보기 칸이 늘어나고(유휴 공간 없음), 잠그면 흐림이 쪽을 왼쪽에서 오른쪽으로 덮으며 자물쇠 고리가 내려온다.
   강조색(--accent)은 조합 수 사다리의 지금 위치 한 곳에만 쓴다. 좁은 폭은 툴 폭 컨테이너 쿼리(@container ppw)로 접는다. 공용 부품은 assets/v2.css. */
.ppw-work{container:ppw / inline-size;position:relative}
.ppw-work.is-drag{outline:2px dashed var(--ink);outline-offset:-6px}
.ppw-work [hidden]{display:none!important}

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

/* 고르기 전: 끌어 놓기 상자 + 예시 카드 */
.ppw-drop{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:14px;padding:16px}
.ppw-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)}
.ppw-dropbox > b{max-width:30em;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
.ppw-dropbox > span:not(.v2-btn){max-width:34em;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ppw-dropbox .ppw-pickbtn{margin-top:8px;pointer-events:none}
.ppw-dropbox:hover,.ppw-work.is-drag .ppw-dropbox{background:var(--wash);border-color:var(--ink)}
.ppw-file:focus-within ~ .ppw-drop .ppw-dropbox{outline:2px solid var(--accent);outline-offset:2px}
.ppw-dropart{width:120px;height:84px;margin-bottom:4px;overflow:visible}
.ppw-da-page{fill:var(--card);stroke:var(--line);stroke-width:1.2;stroke-linejoin:round}
.ppw-da-fold{fill:none;stroke:var(--line);stroke-width:1.2}
.ppw-da-ln{fill:none;stroke:var(--soft);stroke-width:3;stroke-linecap:round}
.ppw-da-lock rect{fill:var(--fill)}
.ppw-da-sh{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;transform:translateY(-5px);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.ppw-da-key{stroke:var(--on-fill);stroke-width:2.4;stroke-linecap:round}
.ppw-dropbox:hover .ppw-da-sh,.ppw-work.is-drag .ppw-da-sh{transform:none}
.ppw-sample{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.ppw-sthumb{width:100%;height:auto;max-height:84px}
.ppw-sp{fill:var(--card);stroke:var(--line);stroke-width:.6}
.ppw-sp--lock{fill:color-mix(in srgb, var(--wash) 80%, var(--paper))}
.ppw-sb{fill:var(--fill)}
.ppw-sl{fill:none;stroke:var(--soft);stroke-width:2}
.ppw-slk path{fill:none;stroke:var(--ink);stroke-width:2.6}
.ppw-slk rect{fill:var(--fill)}
.ppw-sample p{display:flex;flex-direction:column;gap:3px;margin:0}
.ppw-sample p b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.ppw-sample p span{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.ppw-sample .v2-btn{align-self:flex-start}
.ppw-facts{margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--soft);list-style:none;display:grid;gap:4px}
.ppw-facts li{font-family:var(--sans);font-size:11.5px;color:var(--muted);padding-left:12px;position:relative}
.ppw-facts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--line)}

/* 봉인대: 문서 카드(왼쪽, 두 줄 높이) | 설정 → 잠그기·확인 */
.ppw-desk{display:grid;grid-template-columns:minmax(196px,.95fr) minmax(0,1.3fr);grid-template-areas:"doc set" "act act"}
.ppw-doc{grid-area:doc;display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:16px;border-right:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.ppw-docL{display:block;flex:0 0 auto}
.ppw-views{flex:0 0 auto}
.ppw-views button{flex:1 1 auto}
.ppw-frame{position:relative;flex:1 1 0;min-height:250px} /* 높이는 설정 칸이 정하고, 미리 보기는 남는 만큼만 늘어남 */
.ppw-frame canvas{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;background:#fff;box-shadow:0 0 0 1px var(--soft),0 2px 6px rgb(0 0 0 / .10)}
.ppw-cvl{filter:blur(7px) saturate(.35) brightness(1.04);clip-path:inset(0)}
.ppw-frame.is-locked .ppw-cvl{animation:ppw-seal .75s cubic-bezier(.4,0,.2,1) both}
@keyframes ppw-seal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ppw-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;text-align:center}
.ppw-pad{width:54px;height:63px;overflow:visible;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .18))}
.ppw-body{fill:var(--fill)}
.ppw-hole{stroke:var(--on-fill);stroke-width:3;stroke-linecap:round}
.ppw-shackle{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;transform:translateY(-9px);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .5s}
.ppw-frame.is-locked .ppw-shackle{transform:none}
.ppw-veil span{max-width:90%;padding:5px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;line-height:1.4;color:var(--ink);opacity:0;transition:opacity .3s ease .65s}
.ppw-frame.is-locked .ppw-veil span{opacity:1}
.ppw-blocks{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:0;list-style:none;pointer-events:none}
.ppw-blocks li{padding:3px 8px;border-radius:var(--radius);background:var(--fill);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--on-fill)}
.ppw-cap{margin:0;font-family:var(--sans);font-size:12px;color:var(--muted);text-align:center}
.ppw-leak{display:grid;gap:10px;flex:0 0 auto}
.ppw-lkL{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.ppw-lk ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.ppw-lk li{position:relative;padding-left:15px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.ppw-lk li::before{content:"";position:absolute;left:1px;top:.5em;width:7px;height:7px;border-radius:1.5px}
.ppw-lk--hid li::before{background:var(--fill)}
.ppw-lk--vis li::before{border:1.5px solid var(--line)}

.ppw-set{grid-area:set;display:grid;align-content:start;gap:8px;min-width:0;padding:16px}
.ppw-set > .v2-label{display:block;margin-top:4px}
.ppw-set > .v2-label:first-child{margin-top:0}
.ppw-mode button{flex:1 1 auto}
.ppw-pw{display:grid;gap:8px}
/* 비밀번호 두 칸: 라벨 | 입력 두 줄(subgrid로 라벨 열을 맞춤). 무작위 16자(19글자)가 어느 폭에서도 잘리지 않게 입력을 넓게 */
.ppw-two{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px}
.ppw-two > .ppw-f{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
.ppw-two > .ppw-f > .v2-label{display:block}
.ppw-in input{padding:0 8px;text-align:left;font-family:var(--mono);font-size:14px;letter-spacing:0}
.ppw-eye{flex:0 0 auto;width:40px;display:grid;place-items:center;border:0;border-left:1px solid var(--soft);background:var(--wash);color:var(--muted);cursor:pointer}
.ppw-eye:hover{color:var(--ink)}
.ppw-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ppw-ex{opacity:0}
.ppw-eye[aria-pressed="true"] .ppw-ex{opacity:1}
.ppw-gen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ppw-hint{flex:1 1 230px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.ppw-hint.is-error{color:var(--accent)}

/* 조합 수 사다리: log10 0~26, 10¹⁰ 점선, 눈금 네 개는 두 줄로 엇갈림 */
.ppw-meter{padding:10px 12px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.ppw-mhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0}
.ppw-mhead .v2-label{flex:1 0 100%}
.ppw-mhead b{font-family:var(--sans);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.ppw-mhead small{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.ppw-rail{position:relative;margin:4px 7px 0;padding:18px 0 36px}
.ppw-lineL{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.ppw-scale{position:relative;height:10px;border-radius:5px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--soft)}
.ppw-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:var(--fill);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.ppw-scale.is-weak .ppw-fill{background:var(--line)}
.ppw-scale.is-pattern .ppw-fill{background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb, var(--paper) 55%, transparent) 4px 7px)}
.ppw-line{position:absolute;top:-6px;bottom:-6px;width:0;border-left:1.5px dashed var(--ink)}
.ppw-mark{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--accent);transition:left .4s cubic-bezier(.2,.8,.2,1)}
.ppw-scale[aria-valuenow="0"] .ppw-mark{opacity:0}
.ppw-ticks{position:absolute;left:0;right:0;bottom:0;height:34px;margin:0;padding:0;list-style:none}
.ppw-tk{position:absolute;top:0;width:0;height:100%}
.ppw-tk::before{content:"";position:absolute;left:0;top:-4px;height:5px;border-left:1px solid var(--line)}
.ppw-tk span{position:absolute;left:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;line-height:1.35;color:var(--muted);white-space:nowrap}
.ppw-tk--r0 span{top:3px}
.ppw-tk--r1 span{top:18.5px}
.ppw-tk--r1::before{height:20.5px}
.ppw-tk--gen span{transform:translateX(calc(-100% + 6px))}
.ppw-warns{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0;padding:0;list-style:none}
.ppw-warns li{padding:2px 7px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink)}

/* 연 뒤에 막을 일: 2 × 2, 누르면 채움(막음) */
.ppw-perms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ppw-perm{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:9px;min-height:50px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.ppw-perm:hover{background:var(--btn)}
.ppw-perm svg{grid-row:1 / 3;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ppw-perm .ppw-no{stroke-width:2;opacity:0;transition:opacity var(--ease)}
.ppw-perm b{font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.3}
.ppw-perm small{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.ppw-perm[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.ppw-perm[aria-pressed="true"] small{color:var(--on-fill);opacity:.8}
.ppw-perm[aria-pressed="true"] .ppw-no{opacity:1}
.ppw-perm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ppw-phint{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}

/* 잠그기·확인·저장 */
.ppw-act{grid-area:act;display:grid;grid-template-columns:minmax(0,1fr);gap:10px 18px;min-width:0;padding:14px 16px;border-top:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 45%, var(--paper))}
.ppw-act:has(> .ppw-checks:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"checks out" "checks btns";align-items:start}
.ppw-act:has(> .ppw-checks:not([hidden])) .ppw-checks{grid-area:checks}
.ppw-act:has(> .ppw-checks:not([hidden])) .ppw-out{grid-area:out}
.ppw-act:has(> .ppw-checks:not([hidden])) .ppw-btns{grid-area:btns}
.ppw-checks{list-style:none;margin:0;padding:10px 12px;border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 0 0 1px var(--soft);align-content:start;display:grid;gap:5px;transition:opacity var(--ease)}
.ppw-checks li{position:relative;padding-left:23px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink)}
.ppw-checks li::before{position:absolute;left:0;top:.18em;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;line-height:1}
.ppw-checks li.is-ok::before{content:"✓";background:var(--fill);color:var(--on-fill)}
.ppw-checks li.is-warn::before{content:"!";background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ppw-checks li.is-none::before{content:"–";background:var(--paper);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.ppw-work.is-stale .ppw-checks{opacity:.45}
.ppw-out{display:grid;gap:4px}
.ppw-fnin input{font-family:var(--sans);font-size:14px;letter-spacing:0}
.ppw-fnhint{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ppw-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ppw-lockbtn[aria-disabled="true"]{opacity:.45}
.ppw-lockbtn,.ppw-savebtn{position:relative;overflow:hidden;min-width:168px;justify-content:center;padding:0 18px;font-size:13.5px}
.ppw-prog{position:absolute;left:0;bottom:0;height:3px;width:36%;background:var(--accent);animation:ppw-prog 1.1s ease-in-out infinite}
.ppw-work:not(.is-busy) .ppw-prog{display:none}
@keyframes ppw-prog{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
.ppw-size{flex:1 1 180px;margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.ppw-status{margin:0;padding:0 16px 14px;min-height:1.5em;line-height:1.5}
.ppw-work[data-state="empty"] .ppw-status:empty{display:none}
.ppw-noscript{margin:0;padding:14px 16px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* 좁은 툴 폭: 문서 카드를 위에 가로로(작은 미리 보기 | 설명), 그 아래 설정·잠그기 */
@container ppw (max-width:620px){
  .ppw-drop{grid-template-columns:1fr}
  .ppw-desk{grid-template-columns:minmax(0,1fr);grid-template-areas:"doc" "set" "act"}
  .ppw-act:has(> .ppw-checks:not([hidden])){grid-template-columns:minmax(0,1fr);grid-template-areas:"checks" "out" "btns"}
  /* [미리 보기 | 설명·숨는 것] 다음 줄에 '보이는 것'을 전체 폭으로: 미리 보기 칸 높이 ≈ 설명 + 숨는 것이라 쪽 위아래가 비지 않는다 */
  .ppw-doc{display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-areas:"views views" "frame cap" "frame hid" "vis vis";grid-template-rows:auto auto 1fr auto;align-content:start;gap:6px 14px;border-right:0;border-bottom:1px solid var(--soft)}
  .ppw-docL{display:none}
  .ppw-views{grid-area:views}
  .ppw-frame{grid-area:frame;min-height:164px}
  .ppw-cap{grid-area:cap;text-align:left;font-size:11.5px}
  .ppw-leak{display:contents}
  .ppw-lk--hid{grid-area:hid}
  .ppw-lk--vis{grid-area:vis;margin-top:4px}
  .ppw-pad{width:40px;height:47px}
  .ppw-veil span,.ppw-blocks{display:none!important}
  .ppw-frame.is-locked ~ .ppw-cap:not([data-veil=""])::before{content:attr(data-veil);display:block;margin-bottom:2px;font-weight:650;color:var(--ink)}
}
@container ppw (max-width:430px){
  .ppw-doc{grid-template-columns:92px minmax(0,1fr)}
  .ppw-frame{min-height:130px}
  .ppw-lockbtn,.ppw-savebtn{flex:1 1 100%}
}
@container ppw (max-width:330px){
  .ppw-two{grid-template-columns:minmax(0,1fr)}
  .ppw-two > .ppw-f{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .ppw-fill,.ppw-mark,.ppw-shackle,.ppw-da-sh,.ppw-veil span,.ppw-perm,.ppw-checks{transition:none}
  .ppw-frame.is-locked .ppw-cvl,.ppw-prog{animation:none}
}