/* dPaper 아카이브 필름 v2 — 256개 표지로 만든 벽 위를 카메라가 난다. A·C 공용, 필름은 늘 어두운 화면
   클래스는 모두 f- 로 시작(사이트 CSS 와 충돌 방지) */
.dpf{--k:#0B0B0A;--w:#F2F2EE;--w2:#C9C9C2;--w3:#86867F;--gr:#00C277;
  position:relative;container-type:inline-size;background:var(--k);color:var(--w);overflow:hidden;aspect-ratio:16/9;
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
.dpf *{box-sizing:border-box;margin:0}
.dpf h3,.dpf p,.dpf span,.dpf b{color:inherit}
.dpf .f-L{position:absolute;inset:0}

/* 벽 — 칸 비율 = 표지 원본 비율(305:101). 잘리지 않는다 */
.dpf .f-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.dpf .f-wall{display:grid;grid-template-columns:repeat(12,1fr);gap:0;will-change:filter}
.dpf .f-wall .f-tl{display:block;aspect-ratio:305/101;opacity:0;background-color:#151513;background-repeat:no-repeat}
.dpf .f-wall .f-nil{opacity:1;background:#121211}
.dpf .f-lit{position:absolute;outline:1px solid var(--gr);box-shadow:0 0 0 1px var(--gr),0 1.2cqw 3cqw rgba(0,0,0,.6);will-change:transform,opacity}
.dpf .f-lit img{display:block;width:100%;height:100%;object-fit:cover}
.dpf .f-gh{outline:0;box-shadow:none;opacity:0;mix-blend-mode:screen}

/* 글 쪽 어둡게 */
.dpf .f-scrim{background:linear-gradient(90deg,rgba(11,11,10,.96) 0,rgba(11,11,10,.82) 34%,rgba(11,11,10,.25) 62%,rgba(11,11,10,0) 80%),linear-gradient(0deg,rgba(11,11,10,.85),rgba(11,11,10,0) 26%),linear-gradient(180deg,rgba(11,11,10,.8),rgba(11,11,10,0) 18%);pointer-events:none}

/* 상징어 */
.dpf .f-tx{position:absolute;left:5.6cqw;bottom:8cqw;width:58cqw}
.dpf .f-meta{display:flex;align-items:center;gap:1.4cqw;font:500 1.1cqw/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--w3);margin-bottom:1.8cqw}
.dpf .f-meta::before{content:"";width:.8cqw;height:.8cqw;background:var(--gr)}
.dpf .f-meta b{color:var(--gr);font-weight:500}
.dpf .f-wd{font-family:"Roboto Serif","Noto Serif KR",serif;font-weight:600;letter-spacing:-.02em;line-height:1}
.dpf .f-wd .f-w{display:inline-block;white-space:nowrap;margin-right:.22em}
.dpf .f-wd .f-cm{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .08em;margin:-.12em 0 -.08em}
.dpf .f-wd .f-c{display:inline-block;will-change:transform}
.dpf .f-ko{margin-top:1.8cqw;font:500 1.7cqw/1.45 "Pretendard Variable",sans-serif;letter-spacing:-.02em;color:var(--w2);word-break:keep-all;will-change:opacity,transform}

/* 시작·끝 */
.dpf .f-in{display:flex;flex-direction:column;justify-content:center;padding-left:5.6cqw;pointer-events:none}
.dpf .f-in h3{font:600 13cqw/.9 "Roboto Serif","Noto Serif KR",serif;letter-spacing:-.025em}
.dpf .f-in h3 em{font-style:normal;color:var(--gr)}
.dpf .f-in p{margin-top:2.2cqw;font:500 1.3cqw/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--w2)}
.dpf .f-cnt{color:var(--gr)}
.dpf .f-ed{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at center,rgba(11,11,10,.86) 0,rgba(11,11,10,.55) 55%,rgba(11,11,10,.2));pointer-events:none}
.dpf .f-ed h3{font:600 9.4cqw/1 "Roboto Serif","Noto Serif KR",serif;letter-spacing:-.02em}
.dpf .f-ed h3 i{display:inline-block;width:1.6cqw;height:1.6cqw;background:var(--gr);margin-left:.8cqw;vertical-align:.2em}
.dpf .f-ed p{margin-top:2.4cqw;font:500 1.25cqw/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--w2)}
.dpf .f-fin{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--k);pointer-events:none;opacity:0}
.dpf .f-sig{position:absolute;left:0;right:0;bottom:9cqw;text-align:center;opacity:0}
.dpf .f-lg{font:700 2.4cqw/1 "Archivo",sans-serif;letter-spacing:-.04em;color:var(--w)}
.dpf .f-lg i{display:inline-block;width:.42em;height:.42em;background:var(--gr);margin:0 .06em}
.dpf .f-mt{margin-top:1.2cqw;font:500 1cqw/1 "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--w3)}
.dpf .f-fl{display:flex;align-items:center;gap:1.2cqw;font:600 5.2cqw/1 "Pretendard Variable",sans-serif;letter-spacing:-.04em;color:var(--w);white-space:nowrap}
.dpf .f-cur{display:inline-block;width:4.2cqw;height:4.2cqw;background:var(--gr);box-shadow:0 0 3cqw rgba(0,194,119,.55)}

/* 서사 */
.dpf .f-pro{pointer-events:none}
.dpf .f-pro>div{position:absolute;left:5.6cqw;right:5.6cqw;top:50%;transform:translateY(-50%);opacity:0}
.dpf .f-pro .f-y{font:600 13cqw/.95 "Roboto Serif","Noto Serif KR",serif;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.dpf .f-pro .f-s{margin-top:2.4cqw;font:500 2.1cqw/1.4 "Pretendard Variable",sans-serif;letter-spacing:-.02em;color:var(--w2)}
.dpf .f-pro .f-wm{font:400 9cqw/1 "Archivo",sans-serif;font-stretch:112%;letter-spacing:-.05em;white-space:nowrap;display:flex;align-items:baseline}
.dpf .f-pro .f-wm span{display:inline-block}
.dpf .f-pro .f-pa{overflow:hidden;vertical-align:bottom}
.dpf .f-pro .f-sq2{display:inline-block;width:0;height:0;background:var(--gr);align-self:center;transform:translateY(.06em)}
.dpf .f-pro .f-wm .f-dd{position:relative;display:inline-grid}.dpf .f-pro .f-dd b{grid-area:1/1;font-weight:400;justify-self:start;width:max-content}

/* 조작 */
.dpf .f-ctl{position:absolute;right:1.4cqw;bottom:1.4cqw;display:flex;align-items:center;gap:10px;z-index:5}
.dpf .f-ctl button{all:unset;cursor:pointer;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--w)}
.dpf .f-ctl button:hover{background:rgba(255,255,255,.2)}
.dpf .f-ctl button:focus-visible{outline:2px solid var(--gr);outline-offset:2px}
.dpf .f-ctl svg{width:14px;height:14px;fill:currentColor}
.dpf .f-ctl .f-t{font:500 11px/1 "IBM Plex Mono",monospace;color:var(--w3);min-width:74px;text-align:right}
.dpf .f-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);cursor:pointer;z-index:4}
.dpf .f-bar:hover{height:6px}
.dpf .f-bar .f-p{height:100%;width:0;background:var(--gr)}
.dpf.compact .f-ctl .f-t{display:none}

/* 휴대폰 — 세로(4:5). 글은 아래, 칸은 위쪽 */
@media (max-width:640px){
  .dpf{aspect-ratio:4/5}
  .dpf .f-scrim{background:linear-gradient(0deg,rgba(11,11,10,.97) 0,rgba(11,11,10,.85) 38%,rgba(11,11,10,.1) 62%,rgba(11,11,10,0))}
  .dpf .f-tx{left:6cqw;right:6cqw;width:auto;bottom:12cqw}
  .dpf .f-meta{font-size:2.6cqw;gap:2.4cqw;margin-bottom:3.4cqw}.dpf .f-meta::before{width:2cqw;height:2cqw}
  .dpf .f-ko{font-size:4cqw;margin-top:3.4cqw}
  .dpf .f-in{padding-left:6cqw}.dpf .f-in h3{font-size:22cqw}.dpf .f-in p{font-size:2.8cqw;margin-top:4cqw}
  .dpf .f-ed h3{font-size:15cqw}.dpf .f-ed h3 i{width:3cqw;height:3cqw}.dpf .f-fl{font-size:6.2cqw;gap:1.8cqw}.dpf .f-lg{font-size:5.4cqw}.dpf .f-mt{font-size:2.4cqw;margin-top:2.6cqw}.dpf .f-sig{bottom:16cqw}.dpf .f-cur{width:5.2cqw;height:5.2cqw}.dpf .f-ed p{font-size:2.8cqw;margin-top:4cqw}
  .dpf .f-ctl button{width:30px;height:30px}.dpf .f-ctl .f-t{display:none}
  .dpf .f-pro>div{left:6cqw;right:6cqw}.dpf .f-pro .f-y{font-size:22cqw}.dpf .f-pro .f-s{font-size:4.6cqw;margin-top:4cqw}.dpf .f-pro .f-wm{font-size:13.5cqw}
}