/* 시아빌 매거진 — flipbook */
body.mag{background:#2a2720;overflow:hidden;height:100dvh}
body.mag .site-hdr{background:color-mix(in srgb,#2a2720 92%,transparent);border-bottom-color:#3d3830}
body.mag .site-hdr .brand span,body.mag .nav a{color:#CFC7B6}
body.mag .nav a[aria-current="page"],body.mag .nav a:hover{color:#FBF8F1;background:#3a352c}
body.mag .brand img{filter:brightness(1.45)}
body.mag .menu-btn{color:#EEE7D9;border-color:#4a443a}
@media(max-width:860px){body.mag .nav{background:#2a2720;border-bottom-color:#3d3830}body.mag .nav a{border-bottom-color:#3d3830}}
.stage{position:relative;height:calc(100dvh - var(--hdr) - 66px);padding:14px 12px 6px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#3a352b 0%,#24211b 70%)}
#book{width:100%;height:100%;max-width:1500px;margin:0 auto}
#book .stf__wrapper{position:relative;width:100%;height:100%}
.ctrl{height:66px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px calc(env(safe-area-inset-bottom));background:#24211b;border-top:1px solid #3d3830;color:#E7DFCF}
.ctrl button,.ctrl select,.ctrl a{font:inherit;font-size:14px;color:#EEE7D9;background:#36322a;border:1px solid #4a443a;border-radius:999px;min-height:42px;padding:0 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ctrl button:hover,.ctrl select:hover{background:#433d33}
.ctrl .arrow{width:46px;padding:0;justify-content:center;font-size:20px}
.ctrl .count{min-width:86px;text-align:center;font-family:"Cormorant Garamond",serif;font-size:18px;letter-spacing:.06em;color:#E7DFCF}
.ctrl a.join{background:var(--clay);border-color:var(--clay);color:#FBF8F1;font-weight:500}
.ctrl select{max-width:170px;padding-right:10px}
@media(max-width:560px){.ctrl{gap:6px}.ctrl select{max-width:96px;font-size:13px;padding:0 8px}.ctrl a.join{padding:0 12px;font-size:13px}.ctrl .count{min-width:64px;font-size:16px}}
.hint-swipe{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(20,18,14,.7);color:#EEE7D9;font-size:13px;padding:8px 14px;border-radius:999px;pointer-events:none;transition:opacity .6s;z-index:5}

/* ---------- pages (sized by the flip engine; type scales with page width) ---------- */
.pg{container-type:size;background:#F7F3EA;color:#2A2723;overflow:hidden;position:relative;font-family:"Noto Sans KR",sans-serif;font-weight:300;word-break:keep-all;line-height:1.72}
.pg.L{box-shadow:inset -7cqw 0 6cqw -6cqw rgba(60,45,25,.28)}
.pg.R{box-shadow:inset 7cqw 0 6cqw -6cqw rgba(60,45,25,.28)}
.pg .pin{position:absolute;inset:0;padding:8cqw 8.5cqw 9cqw;display:flex;flex-direction:column}
.pg .folio{position:absolute;bottom:3.6cqw;font-family:"Cormorant Garamond",serif;font-size:2.6cqw;letter-spacing:.12em;color:#8b8373;z-index:3}
.pg.L .folio{left:8.5cqw}.pg.R .folio{right:8.5cqw}
.pg .folio i{font-style:normal;margin:0 .6em;color:#A5613C}
.pg .eb{font-weight:500;font-size:2.3cqw;letter-spacing:.3em;color:#A5613C;display:flex;gap:2.4cqw;align-items:baseline;margin-bottom:1.6cqw}
.pg .eb em{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;letter-spacing:.03em;font-size:3.1cqw;color:#6E7656}
.pg .cn{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:15cqw;line-height:.78;color:#EAE4D7;-webkit-text-stroke:.25cqw #D3C8B3;margin-bottom:-1.6cqw}
.pg h2{font-family:"Nanum Myeongjo",serif;font-weight:800;font-size:5.9cqw;line-height:1.32;letter-spacing:-.01em;margin:0 0 3.4cqw;color:#2A2723}
.pg h2.big{font-size:7.4cqw}
.pg p{font-size:3.45cqw;margin:0 0 2.4cqw}
.pg .ql{font-family:"Nanum Myeongjo",serif;font-weight:700;color:#565D42;font-size:3.7cqw;line-height:1.55;border-left:.4cqw solid #A5613C;padding-left:3.2cqw;margin:1cqw 0 0}
.pg .ph{display:block;width:calc(100% + 17cqw);max-width:none;margin:-8cqw -8.5cqw 5cqw;height:auto;flex:none}
.pg .ph.top{height:64cqw;object-fit:cover;object-position:center top}
.pg .cap{font-size:2.5cqw;color:#6b6457;margin-top:auto;display:flex;gap:2cqw;align-items:baseline}
.pg .cap::before{content:"";flex:0 0 5cqw;height:.25cqw;background:#A5613C;transform:translateY(-.8cqw)}
.pg strong{font-weight:500}

/* full-bleed photo page */
.pg.full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg.full .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,8,0) 45%,rgba(15,12,8,.78) 100%)}
.pg.full .over{position:absolute;left:8.5cqw;right:8.5cqw;bottom:11cqw;color:#FBF8F1;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:4.4cqw;line-height:1.5;text-shadow:0 .3cqw 1.6cqw rgba(0,0,0,.6)}
.pg.full .folio{color:#E7DFCF}
.pg .nb{position:absolute;left:3cqw;top:2.4cqw;font-size:1.9cqw;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.8);z-index:3}

/* split spread (aerial) */
.pg.half>img.sp{position:absolute;top:0;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.pg.half.L>img.sp{left:100%}.pg.half.R>img.sp{left:0}
.pg .zbtn{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:1.6cqw;font:500 2.7cqw/1 "Noto Sans KR",sans-serif;color:#2A2723;background:rgba(251,248,241,.92);border:none;border-radius:999px;padding:2.2cqw 3.6cqw;cursor:zoom-in;box-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.28)}
.pg .zbtn svg{width:3.4cqw;height:3.4cqw}
.pg .zbtn:hover{background:#fff}
.pg .zbtn:focus-visible{outline:.5cqw solid #A5613C;outline-offset:.5cqw}
.pg.half .over{position:absolute;left:8.5cqw;right:8.5cqw;bottom:11cqw;color:#FBF8F1;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:4.2cqw;line-height:1.5;text-shadow:0 .3cqw 1.6cqw rgba(0,0,0,.7)}
.pg.half .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,8,0) 55%,rgba(15,12,8,.7) 100%)}

/* cover */
.pg.cover{background:#1d1a14;color:#FBF8F1}
.pg.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% center}
.pg.cover .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,6,.62) 0%,rgba(12,10,6,.05) 30%,rgba(12,10,6,.12) 55%,rgba(12,10,6,.86) 100%)}
.pg.cover .mast{position:absolute;left:7cqw;right:7cqw;top:6.5cqw;text-align:center}
.pg.cover .mast .t{font-family:"Nanum Myeongjo",serif;font-weight:800;font-size:11.5cqw;letter-spacing:.06em;line-height:1.05;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.5)}
.pg.cover .mast .s{font-size:2.5cqw;letter-spacing:.32em;margin-top:2cqw;color:#F3DFB8;font-weight:500}
.pg.cover .bot{position:absolute;left:7cqw;right:7cqw;bottom:8cqw}
.pg.cover .bot .h{font-family:"Nanum Myeongjo",serif;font-weight:800;font-size:7.2cqw;line-height:1.28;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.6)}
.pg.cover .bot .l{font-size:2.7cqw;letter-spacing:.08em;margin-top:3cqw;color:#F1EADB;font-weight:400}
.pg.cover .issue{position:absolute;right:7cqw;top:30cqw;writing-mode:vertical-rl;font-size:2.3cqw;letter-spacing:.4em;color:#F3DFB8;opacity:.9}

/* back cover */
.pg.back{background:#4c5239;color:#EEE7D9}
.pg.back .pin{justify-content:center;align-items:center;text-align:center;gap:3cqw}
.pg.back img.lg{width:42cqw;height:auto;margin-bottom:2cqw}
.pg.back .ety{font-family:"Nanum Myeongjo",serif;font-size:3.4cqw;letter-spacing:.06em}
.pg.back .soy{font-family:"Nanum Myeongjo",serif;font-style:italic;font-size:3cqw;color:#D9D2BE;margin-top:3cqw}
.pg.back .meta{font-size:2.6cqw;line-height:1.8;color:#D4CDBA;margin-top:6cqw}
.pg.back img.sg{width:22cqw;height:auto;margin:3cqw auto 0}

/* toc */
.pg .toc{list-style:none;margin:2cqw 0 0;padding:0;border-top:.2cqw solid #D8CFBE}
.pg .toc li{border-bottom:.2cqw solid #D8CFBE}
.pg .toc a{display:grid;grid-template-columns:9cqw 1fr auto;align-items:baseline;gap:2cqw;padding:.7cqw 0;text-decoration:none;color:#2A2723;cursor:pointer}
.pg .toc .n{font-family:"Cormorant Garamond",serif;font-size:3.6cqw;color:#6E7656}
.pg .toc .t{font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:3.15cqw}
.pg .toc .t small{font-family:"Noto Sans KR";font-weight:300;font-size:2.4cqw;color:#7a7365;margin-left:1.4cqw}
.pg .toc .p{font-family:"Cormorant Garamond",serif;font-size:3cqw;color:#A5613C}
.pg .toc a:hover .t{color:#A5613C}

/* verse */
.pg .kw{text-align:center;font-family:"Nanum Myeongjo",serif;font-weight:800;font-size:6cqw;color:#565D42;letter-spacing:.1em;margin:4cqw 0 1cqw}
.pg .kw span{color:#A5613C;font-size:.72em;margin-left:.2em}
.pg .verse p{padding-left:4.6cqw;text-indent:-4.6cqw;font-size:3.35cqw;margin:0 0 1.8cqw}
.pg .verse .ini{font-family:"Nanum Myeongjo",serif;font-weight:800;font-size:1.5em;color:#6E7656;line-height:1}

/* palette lines */
.pg .pal{margin-top:auto;border-top:.2cqw solid #D8CFBE;padding-top:2.6cqw}
.pg .pal div{display:grid;grid-template-columns:20cqw 1fr;gap:2cqw;font-size:2.85cqw;padding:.9cqw 0}
.pg .pal b{font-family:"Nanum Myeongjo",serif;font-weight:700;color:#565D42}

/* timeline */
.pg .tl{margin-top:1cqw;border-top:.2cqw solid #D8CFBE}
.pg .tl div{display:grid;grid-template-columns:17cqw 1fr;gap:2.6cqw;padding:2.2cqw 0;border-bottom:.2cqw solid #D8CFBE}
.pg .tl b{font-weight:500;font-size:2.5cqw;letter-spacing:.12em;color:#A5613C;padding-top:.5cqw}
.pg .tl span{font-size:3.2cqw;line-height:1.6}

/* mini cards */
.pg .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;margin-top:auto}
.pg .mini img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1cqw}
.pg .mini b{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:3cqw;margin:1.6cqw 0 .4cqw}
.pg .mini span{display:block;font-size:2.4cqw;line-height:1.5;color:#5B554C}

/* feature rows */
.pg .feat{display:flex;flex-direction:column;gap:4cqw;margin-top:1cqw}
.pg .feat div{display:grid;grid-template-columns:30cqw 1fr;gap:4cqw;align-items:center}
.pg .feat img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1cqw}
.pg .feat b{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:3.7cqw;margin-bottom:1cqw}
.pg .feat span{font-size:3cqw;line-height:1.6;color:#4a453d}

/* steps on page */
.pg .st{display:grid;grid-template-columns:1fr 1fr;gap:3.4cqw 4cqw;margin-top:1cqw}
.pg .st div{border-top:.2cqw solid #D8CFBE;padding-top:2cqw}
.pg .st i{font-style:normal;font-family:"Cormorant Garamond",serif;font-size:5.4cqw;color:#6E7656;line-height:1}
.pg .st b{display:block;font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:3.3cqw;margin:.8cqw 0 .4cqw}
.pg .st span{font-size:2.75cqw;line-height:1.55;color:#5B554C;display:block}

/* price table */
.pg table.pt{width:100%;border-collapse:collapse;margin-top:1cqw}
.pg .pt th,.pg .pt td{border-bottom:.2cqw solid #D8CFBE;padding:2.5cqw 1cqw;text-align:left;vertical-align:baseline}
.pg .pt thead th{font-weight:500;font-size:2.4cqw;letter-spacing:.16em;color:#A5613C;border-bottom-color:#B9AE98}
.pg .pt tbody th{font-family:"Nanum Myeongjo",serif;font-weight:700;font-size:3.3cqw;width:34%}
.pg .pt td{font-family:"Nanum Myeongjo",serif;font-weight:800;font-size:3.6cqw;color:#565D42;white-space:nowrap}
.pg .pt td.sm{font-size:3cqw}
.pg .note{font-size:2.6cqw;line-height:1.65;color:#5B554C;margin-top:3cqw}

/* join */
.pg .jbtn{display:inline-flex;align-items:center;justify-content:center;gap:2cqw;background:#A5613C;color:#FBF8F1;text-decoration:none;font-weight:500;font-size:3.6cqw;padding:3.4cqw 7cqw;border-radius:999px;margin-top:3cqw;align-self:flex-start}
.pg .jsteps{list-style:none;padding:0;margin:2cqw 0 0;counter-reset:j}
.pg .jsteps li{counter-increment:j;display:grid;grid-template-columns:8cqw 1fr;gap:2cqw;padding:1.9cqw 0;border-bottom:.2cqw solid #D8CFBE;font-size:3.1cqw}
.pg .jsteps li::before{content:counter(j,decimal-leading-zero);font-family:"Cormorant Garamond",serif;font-size:3.8cqw;color:#6E7656}
.pg .jsteps b{font-family:"Nanum Myeongjo",serif;font-weight:700}
.pg.full .jbtn{position:absolute;left:8.5cqw;bottom:22cqw}

/* 표지(하드 커버)가 넘어갈 때 3D 원근이 과해 왼쪽으로 크게 튀어나가던 현상 완화 */
#book .stf__block{perspective:9000px}