/* 종류 ② 포토북 · 리넨 남색 표지 + 금박, 종이 쪽, 사진 모서리 끼우개 */
:root{
  --page:#BDB3A4; --paper:#F3EDE2; --fg:#2A2520; --sub:#7C7166; --line:#DCD2C2;
  --accent:#7B5B3A; --on-accent:#fff; --sun:#A0533F; --navy:#1C2433; --gold:#C8A869;
  --font:'Noto Serif KR','Nanum Myeongjo',serif; --disp:'Cormorant Garamond','Times New Roman',serif;
  --card:#F7F2E9; --fab-bg:rgba(28,36,51,.55);
}
html{scroll-snap-type:y proximity;scroll-behavior:smooth}
body{background:var(--page);font-weight:300}
.album{max-width:480px;margin:0 auto;background:var(--paper);box-shadow:0 0 60px rgba(40,30,20,.25)}
.pg{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:70px 30px 64px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 14px 0 22px -16px rgba(60,40,20,.35)}
.pg+.pg{border-top:1px solid rgba(120,100,80,.18)}
.pg-f{position:absolute;bottom:20px;left:0;right:0;font:italic 500 13px/1 var(--disp);letter-spacing:.2em;color:var(--sub)}
.pg-f::before,.pg-f::after{content:"—";margin:0 8px;opacity:.5}
.kick{font:500 12px/1 var(--disp);letter-spacing:.42em;text-transform:uppercase;color:var(--accent);padding-left:.42em}
h1,h2{font-weight:400;font-size:25px;letter-spacing:.06em;margin:14px 0 26px}
.names{font:500 26px/1.3 var(--disp);letter-spacing:.06em;margin-top:26px}
.names i{font-style:italic;color:var(--gold);margin:0 .35em}
.when{font-size:14px;line-height:1.9;color:var(--fg);margin-top:10px}
.when small{color:var(--sub);font-size:12.5px}
.letter{font-size:14.5px;line-height:2.15}
.orn{font-size:22px;color:var(--gold);margin:22px 0 16px}
.fam{font-size:14px}
/* 사진 끼우개 */
.mount{position:relative;display:block;background:#fff;padding:10px;box-shadow:0 10px 24px rgba(60,40,20,.18),0 1px 2px rgba(0,0,0,.08);transform:rotate(-.6deg)}
.mount img{width:100%;height:auto}
.mount.hero{width:82%;max-width:340px}
.ph-mount .mount{width:88%}
.cn{position:absolute;width:22px;height:22px;background:#3A2E24;opacity:.88}
.cn.tl{top:-4px;left:-4px;clip-path:polygon(0 0,100% 0,0 100%)}
.cn.tr{top:-4px;right:-4px;clip-path:polygon(0 0,100% 0,100% 100%)}
.cn.bl{bottom:-4px;left:-4px;clip-path:polygon(0 0,0 100%,100% 100%)}
.cn.br{bottom:-4px;right:-4px;clip-path:polygon(100% 0,0 100%,100% 100%)}
.cap{font:italic 400 17px/1.5 var(--disp);color:var(--fg);margin-top:24px;max-width:300px}
.ph-bleed{padding:0;justify-content:flex-end}
.ph-bleed .ph{position:absolute;inset:0}
.ph-bleed .ph img{width:100%;height:100%;object-fit:cover}
.ph-bleed::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(transparent,rgba(20,14,8,.66));pointer-events:none}
.ph-bleed .cap{position:relative;z-index:2;color:#fff;margin:0 28px 60px;pointer-events:none}
.ph-bleed .pg-f{z-index:2;color:rgba(255,255,255,.8)}
.ph-duo{gap:0}
.ph-duo .mount.sm{width:66%}
.ph-duo .mount.sm:first-child{align-self:flex-start;transform:rotate(-3deg)}
.ph-duo .mount.sm:nth-child(2){align-self:flex-end;margin-top:-34px;transform:rotate(2.5deg)}
.day .big{font:400 112px/1 var(--disp);margin:6px 0 4px}
.day .big span{display:block;font-size:15px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.day .cal{margin:24px 0 10px;max-width:330px}
.dd{font-size:14px;margin:6px 0 20px}.dd b{font:600 22px var(--disp);color:var(--accent);margin:0 3px}
.place .map{width:100%;margin-top:22px}
.place .maplinks,.place .ways{width:100%;text-align:left}
.thanks{justify-content:flex-start;padding-top:80px}
.thanks .btn-solid{max-width:340px}
.gb,.accs,.cts{width:100%;text-align:left;margin-top:34px}
.gb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.gb-head h3{font:500 20px var(--disp);letter-spacing:.04em}
/* 뒤표지 */
.back{background:#1C2433;padding:0;box-shadow:none}
.bk-back{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;width:100%;color:var(--gold);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px),linear-gradient(135deg,#25304A,#161C28)}
.bk-back .bc-mono{font:italic 400 64px/1 var(--disp);margin:20px 0}
.bk-back .bc-mono i{font-size:.6em;margin:0 .15em}
.bb-t{font-size:14px;color:#E9DDC0;letter-spacing:.1em}
.bb-btn{display:flex;gap:8px;margin-top:34px}
.bb-btn .btn-line{color:#E9DDC0}
.bc-k{font:500 11px/1 var(--disp);letter-spacing:.5em;padding-left:.5em}
/* 진행 막대·쪽 번호 */
.prog{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,480px);height:2px;z-index:50;background:rgba(0,0,0,.06)}
.prog i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.pgno{position:fixed;bottom:12px;left:max(14px,calc(50% - 240px + 14px));z-index:50;font:500 10px/1 var(--disp);letter-spacing:.3em;color:var(--sub);background:rgba(243,237,226,.85);padding:6px 9px}
/* 표지 넘기기 */
.bk-intro{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:radial-gradient(110% 80% at 50% 40%,#3A2E24,#120E0B 72%);transition:opacity 1s ease,visibility 1s}
.bk-intro.gone{opacity:0;visibility:hidden}
.bk-scene{position:relative;width:min(74vw,320px);aspect-ratio:.74;perspective:1600px}
.bk-first,.bk-cover{position:absolute;inset:0}
.bk-first{background:#F3EDE2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;box-shadow:0 30px 60px rgba(0,0,0,.5);color:var(--fg)}
.bf-k{font:500 11px/1 var(--disp);letter-spacing:.4em;color:var(--accent)}
.bf-t{font-size:14px;line-height:1.9}
.bk-edge{position:absolute;top:4px;bottom:4px;right:-7px;width:8px;background:repeating-linear-gradient(90deg,#E9E1D2 0 1px,#CFC5B4 1px 2px);border-radius:0 2px 2px 0}
.bk-cover{display:block;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.6,.05,.3,1)}
.bc-face,.bc-in{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 4px 4px 2px}
.bc-in{transform:rotateY(180deg);background:radial-gradient(circle at 30% 30%,#E8DCC4 0 2px,transparent 3px) 0 0/14px 14px,linear-gradient(135deg,#EFE6D4,#DCCDB0);box-shadow:inset -12px 0 20px rgba(0,0,0,.25)}
.bc-face{background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px),linear-gradient(135deg,#27324C,#161C28);
  box-shadow:inset 12px 0 20px rgba(0,0,0,.4),0 30px 60px rgba(0,0,0,.55);border-radius:2px 4px 4px 2px}
.bk-intro.opening .bk-cover{transform:rotateY(-168deg)}
.bc-frame{position:absolute;inset:16px;border:1px solid rgba(200,168,105,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background-image:linear-gradient(110deg,#A88A4F,#F3DFA6 40%,#B8955A 60%,#E9D39A);-webkit-background-clip:text;background-clip:text;color:transparent}
.bc-frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(200,168,105,.35)}
.bc-mono{font:italic 400 58px/1 var(--disp)}
.bc-mono i{font-size:.6em;margin:0 .12em}
.bc-nm{font:500 14px/1 var(--font);letter-spacing:.2em}
.bc-d{font:500 12px/1 var(--disp);letter-spacing:.4em}
.bk-hint{color:#E9DDC0;text-align:center;font-size:13.5px;letter-spacing:.06em;line-height:1.8}
.bk-hint small{opacity:.65;font-size:11.5px}
@media (prefers-reduced-motion:reduce){.bk-cover{transition:none}}