/* 특집 '오방도감의 마음'(10/9). 장마다 화면 가득 움직이는 장면 + 한두 줄, 펼치면 깊이 읽기. 모서리는 원형만 */
:root{--bg:#07070b;--ink:#efe9df;--ink2:#c7c0b5;--mute:#8b857c;--gold:#d9b46a;--red:#c8273c;
  --e0:#5fa77f;--e1:#d4553f;--e2:#c9a24a;--e3:#d9dbe0;--e4:#5b7fd1;
  --kr:"Hahmlet",serif;--hj:"Noto Serif KR",serif;--ui:"Pretendard Variable",Pretendard,system-ui,sans-serif;--sa:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--kr);-webkit-font-smoothing:antialiased}
button{font-family:var(--ui);border:0;background:none;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.home{position:fixed;z-index:30;left:6px;top:calc(var(--sa) + 6px);width:44px;height:44px}
.home:before{content:"";position:absolute;left:17px;top:15px;width:11px;height:11px;border-left:1.5px solid rgba(239,233,223,.8);border-bottom:1.5px solid rgba(239,233,223,.8);transform:rotate(45deg)}
.snd{position:fixed;z-index:30;right:12px;top:calc(var(--sa) + 12px);padding:7px 12px;border:1px solid rgba(239,233,223,.28);background:rgba(7,7,11,.45);font-size:12px;font-weight:600;color:var(--ink2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.snd[aria-pressed=true]{color:var(--gold);border-color:rgba(217,180,106,.6)}

/* 장 */
.ch{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ch .bg{position:absolute;inset:0;background:#0b0b10 50% 40%/cover no-repeat}
.ch .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.ch .bg video.on{opacity:1}
.ch:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,11,.35) 0,rgba(7,7,11,0) 26%,rgba(7,7,11,.15) 46%,rgba(7,7,11,.88) 78%,var(--bg) 100%);pointer-events:none}
.tx{position:relative;z-index:2;padding:0 26px calc(var(--sb) + 56px);max-width:560px;width:100%;margin:0 auto}
.tx.top{position:absolute;left:0;right:0;top:calc(var(--sa) + 78px);padding-bottom:0}
.mk{margin:0 0 10px;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold)}
h1{margin:0;font-weight:500;font-size:clamp(42px,13vw,64px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.no{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font-family:var(--hj);font-weight:900;font-size:26px;color:var(--gold)}
.no span{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink2)}
.ln{margin:0 0 10px;font-weight:400;font-size:clamp(26px,7.6vw,34px);line-height:1.42;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.75);word-break:keep-all}
.ln.s{margin-bottom:18px;font-weight:300;font-size:18px;line-height:1.7;color:var(--ink2)}
/* 장면 문장은 화면에 들어올 때 한 번만 */
.ch .ln,.ch .pair,.ch .five,.ch .big{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s ease}
.ch.in .ln,.ch.in .pair,.ch.in .five,.ch.in .big{opacity:1;transform:none}
.ch.in .ln.s{transition-delay:.5s}
.ch.in .pair,.ch.in .five{transition-delay:.9s}
.rm .ch .ln,.rm .ch .pair,.rm .ch .five,.rm .ch .big{opacity:1;transform:none;transition:none}

/* 깊이 읽기 */
.dp{margin:4px 0 0;border-top:1px solid rgba(239,233,223,.16)}
.dp summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 0;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--gold);cursor:pointer}
.dp summary::-webkit-details-marker{display:none}
.dp summary:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.dp[open] summary:after{transform:rotate(225deg)}
.dp p{margin:0 0 6px;padding:14px 16px;background:rgba(7,7,11,.72);border-left:2px solid var(--gold);font-size:16px;line-height:1.95;color:var(--ink);word-break:keep-all;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-top:20px;background:var(--ink);color:#111;font-size:16px;font-weight:700;text-decoration:none}
.go i{width:0;height:0;border-left:10px solid #111;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ghost{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:10px;border:1px solid rgba(239,233,223,.3);font-size:15px;font-weight:600;color:var(--ink2)}

/* 一 명 · 운 */
.pair{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:10px 12px;margin:6px 0 18px}
.pair b{font-family:var(--hj);font-weight:900;font-size:40px;line-height:1;color:var(--ink)}
.pair b:nth-of-type(2){color:#9fc2ff}
.pair span{font-family:var(--ui);font-size:13px;color:var(--ink2)}
/* 三 다섯 기운 */
.five{display:flex;gap:10px;margin:6px 0 18px}
.five b{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-family:var(--hj);font-weight:900;font-size:20px;color:#0b0b10}
.e0{background:var(--e0)}.e1{background:var(--e1)}.e2{background:var(--e2)}.e3{background:var(--e3)}.e4{background:var(--e4)}
/* 四 518,400 · 빈칸 */
.big{margin:0;font-family:var(--ui);font-weight:800;font-size:clamp(54px,17vw,84px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.mine{margin:18px 0 0;padding:18px 16px;background:rgba(7,7,11,.74);border:1px solid rgba(217,180,106,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mine .q{margin:0 0 12px;font-size:18px;font-weight:500}
.mine .q small{display:block;margin-top:4px;font-family:var(--ui);font-size:12px;color:var(--mute)}
.mine .row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.mine select{height:44px;padding:0 8px;border:1px solid rgba(239,233,223,.25);background:#0f0f15;color:var(--ink);font:500 15px var(--ui);border-radius:0;-webkit-appearance:none;appearance:none}
.sub{width:100%;height:46px;margin-top:10px;background:var(--gold);color:#17120a;font-size:15px;font-weight:700}
.ans{margin-top:16px}
.ans .el{display:flex;align-items:center;gap:14px}
.ans .el b{flex:none;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;font-family:var(--hj);font-weight:900;font-size:28px;color:#0b0b10;box-shadow:0 0 0 6px rgba(239,233,223,.06),0 0 30px currentColor}
.ans .el p{margin:0;font-size:19px;line-height:1.5}
.ans .care{margin:14px 0 0;font-size:15.5px;line-height:1.85;color:var(--ink2);word-break:keep-all}
.quote{margin:22px 0 0;padding-left:14px;border-left:2px solid var(--red);font-size:16.5px;line-height:1.75;color:var(--ink);word-break:keep-all}
.quote small{display:block;margin-bottom:4px;font-family:var(--ui);font-size:12px;font-weight:700;color:#ff5a6e}
/* 六 약속 */
.ch.pr .tx{padding-top:calc(var(--sa) + 90px)}
.pledge{list-style:none;margin:0;padding:0;counter-reset:pl}
.pledge li{position:relative;counter-increment:pl;padding:14px 0 14px 58px;border-top:1px solid rgba(239,233,223,.14);opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s}
.pledge li.on{opacity:1;transform:none}
.pledge li:before{content:"";position:absolute;left:0;top:16px;width:40px;height:40px;background:var(--red);transform:scale(1.6) rotate(-8deg);opacity:0;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.pledge li:after{content:counter(pl);position:absolute;left:0;top:16px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:800;font-size:17px;color:#fbe9e7;opacity:0;transition:opacity .3s .2s}
.pledge li.on:before{transform:rotate(-4deg);opacity:.95}.pledge li.on:after{opacity:1}
.pledge b{display:block;font-size:18px;font-weight:500;line-height:1.45}
.pledge span{display:block;margin-top:5px;font-family:var(--ui);font-size:14px;line-height:1.7;color:var(--ink2);word-break:keep-all}
.rm .pledge li,.rm .pledge li:before,.rm .pledge li:after{opacity:1;transform:none;transition:none}
/* 結 숨 */
.breath{display:flex;flex-direction:column;align-items:center;margin:8px 0 0}
#bBtn{position:relative;width:168px;height:168px;border-radius:50%;background:radial-gradient(circle,rgba(239,233,223,.16),rgba(239,233,223,.02) 70%);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform 4s ease-out}
#bBtn.in{transform:scale(1.18)}#bBtn.out{transform:scale(.92);transition:transform 6s ease-in-out}
#bBtn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#bBtn circle{fill:none;stroke:var(--bc,var(--ink));stroke-width:2.5;stroke-dasharray:465;stroke-dashoffset:465}
#bBtn span{position:relative;font-size:15px;font-weight:600;color:var(--ink)}
.bline{min-height:56px;margin:18px 0 0;text-align:center;font-size:20px;line-height:1.5}
.dots{display:flex;gap:10px;margin:6px 0 0}
.dots i{width:12px;height:12px;border-radius:50%;opacity:.18;transition:opacity .6s,box-shadow .6s}
.dots i.on{opacity:1;box-shadow:0 0 14px currentColor}
.dots .e0{color:var(--e0)}.dots .e1{color:var(--e1)}.dots .e2{color:var(--e2)}.dots .e3{color:var(--e3)}.dots .e4{color:var(--e4)}
.fin{display:none;margin-top:20px;text-align:center}
.fin.on{display:block;animation:fin 1.6s ease both}
@keyframes fin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.last{margin:0;font-size:clamp(28px,8vw,36px);line-height:1.45}
.sig{margin:14px 0 0;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.acts{margin-top:18px}
.help{margin:28px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--mute);text-align:center;word-break:keep-all}
.c8 .tx{padding-top:calc(var(--sa) + 90px)}
@media (min-width:700px){.ln{font-size:36px}}
/* 10/9 실서버 확인: 긴 장(빈칸 · 약속)에서 위 버튼과 겹침, 약속 글자 뒤 그림이 복잡함 */
.tx{padding-top:calc(var(--sa) + 84px)}
.tx.top{padding-top:0}
.c0 .tx:not(.top){padding-top:0}
.ch.pr:after,.ch.c8:after{background:linear-gradient(180deg,rgba(7,7,11,.78) 0,rgba(7,7,11,.72) 50%,rgba(7,7,11,.9) 85%,var(--bg) 100%)}

/* 10/9 은주: 깊이 읽기 접지 말고 다 펼쳐 둠 */
.dp.dpo{margin:16px 0 0;border-top:0}
.ch .dp.dpo{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease 1s,transform 1.1s ease 1s}
.ch.in .dp.dpo{opacity:1;transform:none}
.rm .ch .dp.dpo{opacity:1;transform:none;transition:none}

/* 10/9 21:29 은주: 첫 화면 序가 제목과 겹침. 깊이 읽기를 펼친 뒤 아래 글이 길어져 위 제목(절대 위치)을 덮었음 → 제목도 흐름 안에 두고 아래 글은 그 밑으로 */
.ch.c0{justify-content:flex-start}
.c0 .tx.top{position:relative;top:auto;left:auto;right:auto;padding:calc(var(--sa) + 78px) 26px 28px}
.c0 .tx:not(.top){margin-top:auto}

/* 10/10 17:50 은주: 그림과 글자가 겹치고 중간에 빈 공간이 길다 → 장마다 [그림 → 글] 순서로. 위 버튼 줄은 바탕을 깔아 글자 위에 겹치지 않게 */
.topbar{position:fixed;z-index:25;left:0;right:0;top:0;height:calc(var(--sa) + 56px);background:rgba(7,7,11,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(239,233,223,.06);pointer-events:none}
.snd{background:transparent}
#film{padding-top:calc(var(--sa) + 56px)}
.ch,.ch.c0{min-height:0;display:block;overflow:visible}
.ch:after{display:none}
.ch .bg{position:relative;inset:auto;width:100%;aspect-ratio:4/5;max-height:70vh;overflow:hidden}
.ch .bg:after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(7,7,11,0),var(--bg));z-index:1;pointer-events:none}
.tx,.ch.pr .tx,.c8 .tx{padding:18px 24px 56px}
.c0 .tx.top{position:relative;top:auto;left:auto;right:auto;padding:14px 24px 0}
.c0 .tx:not(.top){margin-top:0;padding-top:22px}
.c0 .tx:not(.top) .no{margin-top:0}
.ch + .ch{border-top:0}
.aiN{margin:26px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--mute);text-align:center} /* 10/14 AI 고지 한 줄 */