/* PDF 잠금 해제 전용 CSS (2026-10-21). '열쇠 대조표': 비밀번호 줄 → 파일 줄 목록 [1쪽 | 파일 | 열기 비밀번호 | 연 뒤 제한 | 저장] → 결과 막대·ZIP.
   넓은 작업면에서는 목록이 subgrid로 열을 맞춰 표처럼 읽히고, 좁으면(@container pdu) 줄마다 [1쪽 | 이름·자물쇠 두 줄·안내]로 쌓는다.
   움직임은 하나: 풀린 순간 자물쇠 고리가 올라가고 봉인이 걷히며 1쪽이 드러난다(동작 줄이기면 끔). 강조색(--accent)은 푸는 중인 줄의 진행 표시에만 쓴다. */
.pdu-work{container:pdu / inline-size;position:relative}
html:lang(ko) .pdu-work{word-break:keep-all;overflow-wrap:anywhere}
.pdu-work.is-drag{outline:2px dashed var(--ink);outline-offset:-6px}
.pdu-work [hidden]{display:none!important}
.pdu-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* 넣기 전: 끌어 놓기 상자 | 열쇠별로 풀리는 것 + 예시 */
.pdu-drop{display:grid;grid-template-columns:minmax(0,1fr) minmax(232px,.8fr);gap:14px;padding:16px}
.pdu-dropbox{min-height:280px;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)}
.pdu-dropbox > b{max-width:30em;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
.pdu-dropbox > span:not(.v2-btn){max-width:34em;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.pdu-dropbox > small{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.pdu-dropbox .pdu-pickbtn{margin:8px 0 2px;pointer-events:none}
.pdu-dropbox:hover,.pdu-work.is-drag .pdu-dropbox{background:var(--wash);border-color:var(--ink)}
.pdu-input:focus-visible ~ .pdu-drop .pdu-dropbox{outline:2px solid var(--accent);outline-offset:2px}
.pdu-dropart{width:132px;height:84px;margin-bottom:4px;overflow:visible}
.pdu-da-page{fill:var(--card);stroke:var(--line);stroke-width:1.2;stroke-linejoin:round}
.pdu-da-back{fill:color-mix(in srgb, var(--wash) 80%, var(--paper))}
.pdu-da-ln{fill:none;stroke:var(--soft);stroke-width:3;stroke-linecap:round}
.pdu-da-lock rect{fill:var(--fill)}
.pdu-da-sh{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;transform-box:view-box;transform-origin:103px 44px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pdu-da-key{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pdu-dropbox:hover .pdu-da-sh,.pdu-work.is-drag .pdu-da-sh{transform:translate(-3px,-5px) rotate(-16deg)}
.pdu-dropbox:hover .pdu-da-key,.pdu-work.is-drag .pdu-da-key{transform:translateX(-6px)}
.pdu-guide{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.pdu-guide > .v2-label{margin:0}
.pdu-keys{display:grid;gap:6px;margin:0}
.pdu-gk{padding:8px 10px 9px;border-radius:var(--radius);background:var(--wash)}
.pdu-gk dt{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.pdu-gk dt svg{flex:0 0 auto;width:18px;height:18px}
.pdu-gk dd{margin:3px 0 0 25px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pdu-gk--owner{background:var(--fill)}
.pdu-gk--owner dt,.pdu-gk--owner dd{color:var(--on-fill)}
.pdu-gk--owner dd{opacity:.82}
.pdu-gk--none{background:none;box-shadow:inset 0 0 0 1px var(--soft)}
.pdu-sample{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--soft)}
.pdu-sample p{display:flex;flex-direction:column;gap:3px;margin:0}
.pdu-sample p b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.pdu-sample p span{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pdu-sample .v2-btn{align-self:flex-start}

/* 비밀번호 줄: [열쇠 | 비밀번호 칸 | 잠금 해제] + 안내 */
.pdu-key{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico f btns" ". hint hint";align-items:end;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 55%, var(--paper))}
.pdu-kico{grid-area:ico;width:var(--v2-ctl,42px);height:var(--v2-ctl,42px);display:grid;place-items:center;border-radius:var(--radius);background:var(--fill);color:var(--on-fill)}
.pdu-kico svg{width:24px;height:24px}
.pdu-f{grid-area:f;min-width:0}
.pdu-f > .v2-label{display:block}
.pdu-in input{padding:0 10px;text-align:left;font-family:var(--mono);font-size:14.5px;letter-spacing:0}
.pdu-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}
.pdu-eye:hover{color:var(--ink)}
.pdu-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.pdu-ex{opacity:0}
.pdu-eye[aria-pressed="true"] .pdu-ex{opacity:1}
.pdu-btns{grid-area:btns;display:flex;gap:8px}
.pdu-go{min-width:150px;justify-content:center;padding:0 18px;font-size:13.5px}
.pdu-go .pdu-pad{width:18px;height:18px}
.pdu-go .pdu-pad-sh{stroke:currentColor}
.pdu-go .pdu-pad-b{fill:currentColor}
.pdu-go:hover .pdu-pad-sh{transform:translate(-1.6px,-2.4px) rotate(-16deg)}
.pdu-work.is-busy .pdu-go{opacity:.6}
.pdu-hint{grid-area:hint;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pdu-hint.is-error{color:var(--accent)}
.pdu-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)}

/* 자물쇠 그림(머리 줄·버튼·칸 공용): 고리는 오른쪽 다리를 축으로 들린다 */
.pdu-pad{overflow:visible}
.pdu-pad-sh{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;transform-box:view-box;transform-origin:16px 11px;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.pdu-pad-b{fill:var(--fill);stroke:none}

/* 파일 줄 목록: 넓으면 표(subgrid로 열 맞춤) */
.pdu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:60px minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.15fr) auto;column-gap:14px}
.pdu-list > li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;padding:12px 16px;border-bottom:1px solid var(--soft)}
.pdu-head{padding-block:7px!important;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:color-mix(in srgb, var(--wash) 35%, var(--paper))}
.pdu-hd-file{grid-column:1 / 3}
.pdu-hd-open{grid-column:3}
.pdu-hd-perm{grid-column:4}
.pdu-row{position:relative;grid-template-rows:auto 1fr;row-gap:6px;align-items:center}
.pdu-th{grid-column:1;grid-row:1 / 3;align-self:start;position:relative}
.pdu-th canvas{display:block;width:100%;height:auto;border-radius:1px;background:#fff;box-shadow:0 0 0 1px var(--soft),0 1px 4px rgb(0 0 0 / .1)}
.pdu-seal{display:block;width:100%;height:auto;overflow:visible}
.pdu-sp{fill:color-mix(in srgb, var(--wash) 80%, var(--paper));stroke:var(--line);stroke-width:1}
.pdu-sl{fill:none;stroke:var(--soft);stroke-width:3.2;stroke-linecap:round}
.pdu-slk rect{fill:var(--fill)}
.pdu-slk-sh{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;transform-box:view-box;transform-origin:37px 47px;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.pdu-slk{transition:opacity .35s ease .4s}
/* 1쪽을 그린 뒤에는 봉인이 덮개가 되고, 자물쇠만 남는다 */
.pdu-th canvas:not([hidden]) + .pdu-seal{position:absolute;inset:0;height:100%}
.pdu-th canvas:not([hidden]) + .pdu-seal .pdu-sp,.pdu-th canvas:not([hidden]) + .pdu-seal .pdu-sl{display:none}
.pdu-row[data-st="done"] .pdu-slk-sh{transform:translate(-5px,-7px) rotate(-20deg)}
.pdu-row[data-st="done"] .pdu-slk{opacity:0}
.pdu-row[data-st="part"] .pdu-slk rect{fill:var(--line)}
.pdu-row[data-st="bad"] .pdu-th{opacity:.45}
.pdu-row[data-kind="none"] .pdu-slk{display:none} /* 잠금 없는 파일에 자물쇠를 그리지 않는다 */
.pdu-row.is-fresh canvas{animation:pdu-reveal .7s cubic-bezier(.4,0,.2,1) both}
@keyframes pdu-reveal{from{filter:blur(6px) saturate(.3);opacity:.35}to{filter:none;opacity:1}}

.pdu-nm{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0;margin:0}
.pdu-nm b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdu-nm span{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pdu-lk{grid-row:1;display:flex;align-items:center;gap:7px;min-width:0;margin:0}
.pdu-lk--open{grid-column:3}
.pdu-lk--perm{grid-column:4}
.pdu-lk .pdu-pad{flex:0 0 auto;width:22px;height:22px}
.pdu-lkk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pdu-lk b{font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.35;color:var(--ink)}
.pdu-lk[data-v="unk"] .pdu-pad-b{fill:none;stroke:var(--line);stroke-width:1.4;stroke-dasharray:2.5 2}
.pdu-lk[data-v="unk"] .pdu-pad-sh{stroke:var(--line)}
.pdu-lk[data-v="unk"] b,.pdu-lk[data-v="off"] b{color:var(--muted);font-weight:600}
.pdu-lk[data-v="off"] .pdu-pad{opacity:.28}
.pdu-lk[data-v="off"] .pdu-pad-b{fill:none;stroke:var(--ink);stroke-width:1.4}
.pdu-lk[data-v="gone"] .pdu-pad-sh{transform:translate(-2.6px,-3.4px) rotate(-22deg)}
.pdu-lk[data-v="gone"] .pdu-pad-b{fill:none;stroke:var(--fill);stroke-width:1.8}
.pdu-lk[data-v="kept"] .pdu-pad-b{fill:var(--line)}
.pdu-msg{grid-column:2 / 5;grid-row:2;align-self:start;position:relative;margin:0;padding-left:22px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.pdu-msg::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1px var(--line)}
.pdu-row[data-st="done"] .pdu-msg,.pdu-row[data-st="part"] .pdu-msg,.pdu-row[data-st="need"] .pdu-msg{color:var(--ink)}
.pdu-row[data-st="done"] .pdu-msg::before{content:"✓";background:var(--fill);color:var(--on-fill);box-shadow:none}
.pdu-row[data-st="part"] .pdu-msg::before{content:"";background:linear-gradient(90deg,var(--fill) 50%,var(--paper) 50%);box-shadow:inset 0 0 0 1.5px var(--fill)}
.pdu-row[data-st="need"] .pdu-msg::before{content:"!";color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pdu-row[data-st="bad"] .pdu-msg::before{content:"–";color:var(--muted)}
.pdu-row[data-st="work"] .pdu-msg::before,.pdu-row[data-st="probe"] .pdu-msg::before{border:2px solid var(--soft);border-top-color:var(--ink);box-shadow:none;box-sizing:border-box;animation:pdu-spin .8s linear infinite}
@keyframes pdu-spin{to{transform:rotate(360deg)}}
.pdu-acts{grid-column:5;grid-row:1 / 3;display:flex;align-items:center;gap:4px}
.pdu-dl{height:34px}
.pdu-x{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer}
.pdu-x:hover{background:var(--wash);color:var(--ink)}
.pdu-x svg{width:18px;height:18px}
.pdu-prog{position:absolute;left:0;bottom:-1px;height:2px;width:34%;background:var(--accent);animation:pdu-prog 1.1s ease-in-out infinite}
.pdu-row:not([data-st="work"]) .pdu-prog{display:none}
@keyframes pdu-prog{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.pdu-row.is-fresh .pdu-lk[data-v="gone"] .pdu-pad-sh{animation:pdu-lift .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pdu-lift{from{transform:none}to{transform:translate(-2.6px,-3.4px) rotate(-22deg)}}
.pdu-addrow{padding:0!important}
.pdu-add{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:11px 16px;font-family:var(--sans);cursor:pointer;transition:background var(--ease)}
.pdu-add:hover,.pdu-work.is-drag .pdu-add{background:var(--wash)}
.pdu-add svg{width:20px;height:20px;padding:3px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink);box-sizing:content-box}
.pdu-add b{font-size:13px;font-weight:700;color:var(--ink)}
.pdu-add small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pdu-input:focus-visible ~ .pdu-desk .pdu-add{outline:2px solid var(--accent);outline-offset:-2px}

/* 결과 막대(파일마다 한 칸)·셈·ZIP */
.pdu-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bar btns" "count btns";align-items:center;gap:6px 16px;padding:12px 16px;background:color-mix(in srgb, var(--wash) 45%, var(--paper))}
.pdu-bar{grid-area:bar;display:flex;gap:3px;height:12px}
.pdu-seg{flex:1 1 0;min-width:4px;border-radius:2px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--soft);transition:background var(--ease)}
.pdu-seg[data-st="done"]{background:var(--fill);box-shadow:none}
.pdu-seg[data-st="part"]{background:repeating-linear-gradient(135deg,var(--fill) 0 3px,color-mix(in srgb, var(--fill) 35%, var(--paper)) 3px 6px);box-shadow:none}
.pdu-seg[data-st="need"]{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pdu-seg[data-st="bad"]{background:var(--line);box-shadow:none}
.pdu-seg[data-st="work"]{background:var(--accent);box-shadow:none;animation:pdu-pulse 1s ease-in-out infinite alternate}
@keyframes pdu-pulse{to{opacity:.45}}
.pdu-count{grid-area:count;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.pdu-sbtns{grid-area:btns;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.pdu-status{margin:0;padding:10px 16px 14px;min-height:1.5em;line-height:1.5}
.pdu-work[data-state="empty"] .pdu-status:empty{display:none}
.pdu-noscript{margin:0;padding:14px 16px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* 좁은 툴 폭: 줄마다 [1쪽 | 이름 · 저장 / 자물쇠 두 줄 / 안내], 머리 줄은 숨기고 칸마다 이름표를 보인다 */
@container pdu (max-width:680px){
  .pdu-drop{grid-template-columns:minmax(0,1fr)}
  .pdu-dropbox{min-height:220px}
  .pdu-list{grid-template-columns:48px minmax(0,1fr) auto;column-gap:12px}
  .pdu-head{display:none!important}
  .pdu-row{grid-template-rows:auto auto auto auto;row-gap:4px}
  .pdu-th{grid-row:1 / 5}
  .pdu-acts{grid-column:3;grid-row:1}
  .pdu-lk--open,.pdu-lk--perm{grid-column:2 / 4}
  .pdu-lk--open{grid-row:2}
  .pdu-lk--perm{grid-row:3}
  .pdu-msg{grid-column:2 / 4;grid-row:4;margin-top:2px}
  .pdu-lk .pdu-pad{width:18px;height:18px}
  .pdu-lkk{position:static;width:auto;height:auto;overflow:visible;clip-path:none;flex:0 0 auto;font-family:var(--sans);font-size:12px;color:var(--muted)}
  .pdu-lk{flex-wrap:wrap;gap:2px 7px}
}
@container pdu (max-width:520px){
  .pdu-key{grid-template-columns:minmax(0,1fr);grid-template-areas:"f" "btns" "hint"}
  .pdu-kico{display:none}
  .pdu-go{flex:1 1 auto}
  .pdu-sum{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "count" "btns"}
  .pdu-sbtns{justify-content:stretch}
  .pdu-sbtns .v2-btn{flex:1 1 auto;justify-content:center}
  .pdu-dl span{display:none}
  .pdu-dl{width:34px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pdu-pad-sh,.pdu-slk-sh,.pdu-slk,.pdu-da-sh,.pdu-da-key,.pdu-seg{transition:none}
  .pdu-row.is-fresh canvas,.pdu-row.is-fresh .pdu-lk[data-v="gone"] .pdu-pad-sh,.pdu-prog,.pdu-seg[data-st="work"],.pdu-msg::before{animation:none!important}
}