/*OBF*/@font-face{font-family:'OBrush';src:url('../../fonts/obrush_c21.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+C12D,U+C130-C131,U+C139-C140,U+C154-C168,U+C194-C27D,U+C2A8,U+C2B4,U+C2B7-C2B9,U+C2DD,U+C2EB,U+C2ED-C30D,U+C368-C53B,U+C545,U+C549,U+C54C,U+C555-C557,U+C559-C55E,U+C561-C571,U+C57D-C598,U+C5B5-C5BB,U+C5BD-C5C4,U+C5C7,U+C5C9-C5CC,U+C5D1,U+C5E0-C5E3,U+C5ED-C5EE,U+C5FC-C61B,U+C625,U+C62C-C62D,U+C633-C63B,U+C644,U+C655-C6A9,U+C6B1,U+C6C0-C6CC,U+C6DC-C6F9,U+C717-C721,U+C728-C735,U+C751,U+C775,U+C783,U+C787,U+C789-C78E,U+C794-C7A4,U+C7A6,U+C7C1-C800,U+C810,U+C813,U+C81D-C838,U+C871-C881,U+C88B-C8E0,U+C8FD,U+C904-C90D,U+C92C-C99D,U+C9CA-C9F1,U+CA0D-CC3E,U+CC45-CCA8,U+CCAD,U+CCD0-CCE4,U+CD09-CD1B,U+CD5C-CD95,U+CD9C-CE35,U+CE5C-CE6D,U+CE7C-CEA1,U+CEE8,U+CEF7-CF08,U+CF20-CF8C,U+CFFC-D06C,U+D074-D07D,U+D0A8-D0B9,U+D0C1-D0D5,U+D0ED-D0F1,U+D131-D134,U+D145,U+D150-D17C,U+D1A1-D1A4,U+D1F4,U+D230-D30E,U+D31D-D328,U+D380-D398,U+D39C-D3B4,U+D3D0,U+D3ED-D45C,U+D479-D47C,U+D488-D551,U+D559,U+D56B-D56D,U+D575-D588,U+D5C8,U+D5D0-D600,U+D608-D64D,U+D658-D669,U+D68D-D749,U+D754-D790,U+D799-D7A3}@font-face{font-family:'OBrush';src:url('../../fonts/obrush_c11.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+AC04-AC07,U+AC11-AC16,U+AC1A,U+AC1D-AC54,U+AC71-AC77,U+AC81,U+AC89,U+ACA0-ACAC,U+ACBD-ACC1,U+ACE1-ACE4,U+ACE8-ACF1,U+ACF5,U+AD04-AD50,U+AD70-AD73,U+AD76-AD7F,U+AD82-ADC8,U+ADE0,U+ADF9-ADFC,U+AE09-AE0B,U+AE34,U+AE40,U+AE43-AE4A,U+AE4E-AE65,U+AE7C,U+AEBE-AECF,U+AEF4-AFC0,U+AFD4-B04A,U+B053-B08D,U+B0A1,U+B0A9-B0AB,U+B0AD-B0B3,U+B0B8-B0E5,U+B109-B10C,U+B113-B123,U+B128-B141,U+B155,U+B179-B192,U+B194-B1A8,U+B20C-B290,U+B299-B2AC,U+B2CC-B2D0,U+B2DD,U+B2E5,U+B2EB,U+B2ED-B2EE,U+B2FF,U+B304-B313,U+B355-B35C,U+B365-B371,U+B3C5-B3D5,U+B3FC-B410,U+B41C-B429,U+B451-B454,U+B460-B4C8,U+B4DD,U+B4E3,U+B4EC-B545,U+B550-B5A1,U+B5A8-B755,U+B77D-B784,U+B78F-B790,U+B799-B7C9,U+B7F0-B801,U+B808-B818,U+B825-B840,U+B85D-B86D,U+B8B0-B8E1,U+B8EC-B960,U+B975,U+B985,U+B989,U+B9AD,U+B9BD-B9C1,U+B9C9,U+B9CE,U+B9D1-B9D9,U+B9DD,U+B9E1,U+B9E5-B9FA,U+BA3C-BA4D,U+BA58-BA74,U+BA87,U+BAA9-BABB,U+BB36,U+BB47-BBA4,U+BBFC-BBFF,U+BC0C-BC11,U+BC15-BC18,U+BC1C-BC1D,U+BC25,U+BC2D-BC43,U+BC85,U+BC8C-BC94,U+BC97-BCC0,U+BCCD-BCD1,U+BCF8-BD05,U+BD10-BD59,U+BD81,U+BD90-BE14,U+BE4C-BE5A,U+BE60-BF18,U+BFCC-C090,U+C0AD,U+C0B6,U+C0BD-C0BF,U+C0C9-C0D8,U+C11D-C11E,U+C124-C12C}@font-face{font-family:'OBrush';src:url('../../fonts/obrush_s1.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+21-27,U+2A-2B,U+2D,U+2F,U+33-34,U+36,U+38-3E,U+40,U+43-48,U+4A-4C,U+4E-53,U+55-7E,U+FC-314E,U+FF08-FF1F}@font-face{font-family:'OBrush';src:url('../../fonts/obrush_b1.woff2') format('woff2');font-weight:400;font-display:block;unicode-range:U+28-29,U+31,U+35,U+3F,U+41-42,U+49,U+4D,U+54,U+B7,U+AC01,U+AC08,U+AC19,U+AC1C,U+AC70,U+AC78-AC80,U+AC83,U+AC8C,U+ACB9-ACBC,U+ACC4-ACE0,U+ACF3,U+ACFC,U+AD6C-AD6D,U+AD74,U+ADDC,U+AE08,U+AE38,U+AE41,U+AE4C,U+AEBC,U+AED8,U+AFC8,U+B04C,U+B0A0,U+B0A8,U+B0AC,U+B108,U+B110,U+B150,U+B178,U+B193,U+B204-B208,U+B2C8,U+B2D8,U+B2E8,U+B2F5,U+B354,U+B3D9,U+B418,U+B458,U+B4E0,U+B5A4,U+B760-B77C,U+B78D,U+B791-B798,U+B807,U+B824,U+B8E8,U+B974,U+B978-B984,U+B987,U+B9B4-B9BC,U+B9CC,U+B9D0,U+B9DE,U+B9E4,U+BA38,U+BA54,U+BABD,U+BB35,U+BB3B,U+BBF8,U+BC00,U+BC14,U+BC24,U+BC84,U+BC88,U+BC95,U+BCC4,U+BCD5,U+BCF5,U+BD09,U+BD84-BD88,U+BE5B,U+C0B0,U+C0C8,U+C120-C123,U+C148-C14B,U+C190,U+C2A4,U+C2AC,U+C2DC,U+C313,U+C544,U+C548,U+C54A,U+C554,U+C558,U+C57C,U+C5BC,U+C5C5,U+C5D4,U+C628,U+C62E,U+C654,U+C6B8,U+C6D0-C6D4,U+C704,U+C77D,U+C785,U+C791,U+C804-C808,U+C811,U+C81C,U+C84C,U+C885,U+C900,U+C911-C918,U+C9C8,U+C9F8,U+CC44,U+CCAB,U+CCB4,U+CD08,U+CD1D,U+CD98,U+CE58-CE59,U+CEEC,U+CF1C,U+CFE0,U+D070,U+D0A4,U+D0DC,U+D130,U+D138,U+D14C,U+D22C,U+D310,U+D37C,U+D399,U+D3BC,U+D3EC,U+D478,U+D480,U+D589-D5A5,U+D5CC,U+D604,U+D750-D751,U+D798}@font-face{font-family:'OBrush';src:url('../../fonts/obrush_a1.woff2') format('woff2');font-weight:400;font-display:block;unicode-range:U+20,U+2C,U+2E,U+30,U+32,U+37,U+AC00,U+AC10,U+ACB0,U+ACE7,U+AD00,U+AD81,U+ADF8,U+AE00,U+AE30,U+AE68,U+B098-B09C,U+B0B4,U+B124,U+B144,U+B294-B298,U+B2E4,U+B2EC,U+B2F4,U+B2F9,U+B300,U+B35F,U+B3C4,U+B450,U+B4DC,U+B4E4,U+B54C,U+B78C,U+B7EC,U+B85C,U+B871,U+B9AC,U+B9B0,U+B9C8,U+B9DB,U+BA39,U+BA85,U+BAA8,U+BB18-BB34,U+BB38,U+BB3C,U+BC1B,U+BC29,U+BCF4,U+BD80,U+BD89,U+BE44-BE48,U+BF51,U+C0AC,U+C0B4,U+C0BC,U+C0C1,U+C0DD-C11C,U+C12F,U+C138,U+C18C-C18D,U+C2B5,U+C2E0-C2E4,U+C2EC,U+C560,U+C5B4,U+C5C6,U+C5C8,U+C5D0,U+C5EC,U+C5F0-C5F4,U+C624,U+C640,U+C6B0,U+C6B4,U+C724,U+C73C-C74C,U+C758-C774,U+C778-C77C,U+C784,U+C788,U+C790,U+C7A5,U+C7AC,U+C801,U+C815,U+C870,U+C8FC,U+C9C0-C9C4,U+CE74-CE78,U+CEE4,U+CFE8,U+D0C0,U+D0DD,U+D1A0,U+D1B5,U+D314,U+D3B8,U+D3C9,U+D558,U+D55C-D569,U+D574,U+D654-D655,U+D68C}/*OBF*/
/* 해와 달의 운세 — 노을 전용. 해 질 녘 남보라 바탕 + 금빛 + 해(붉은 금) · 달(은청). 모서리 각지게(원만 둥글게). */
:root{
  --bg:#120f1c; --bg2:#1b1528; --card:#1f1930; --line:rgba(227,194,122,.28); --line2:rgba(223,230,245,.16);
  --ink:#f3ecdf; --ink2:#cfc6b6; --ink3:#9a90a6; --gold:#e3c27a; --gold2:#f1dba4;
  --sun:#e8833a; --sun2:#f2b45a; --moon:#c9d6f0; --moon2:#8fa4cf;
  --brush:'OBrush','Noto Serif KR',serif; --bmj:'Song Myung','Noto Serif KR',serif; --serif:'Noto Serif KR',serif;
  --sans:'Noto Sans KR',"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:#07060b;color:var(--ink);font-family:var(--sans);display:flex;justify-content:center;overflow:hidden;word-break:keep-all;overflow-wrap:break-word}
button,select,input{font-family:inherit}
.stage{position:relative;width:100%;max-width:460px;height:100%;overflow:hidden;overflow:clip;background:var(--bg);background-image:radial-gradient(ellipse at 15% 0%,rgba(232,131,58,.16),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(143,164,207,.14),transparent 60%)}
@media (min-width:700px){.stage{height:min(100%,920px);margin:auto 0;box-shadow:0 30px 80px rgba(0,0,0,.6)}}
.scr{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;opacity:0;pointer-events:none;transition:opacity .7s}
.scr::-webkit-scrollbar{display:none}
.scr.on{opacity:1;pointer-events:auto}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 10px;background:linear-gradient(180deg,rgba(18,15,28,.92) 60%,rgba(18,15,28,0))}
.back{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(31,25,48,.7);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.back svg{width:18px;height:18px}
.top b{font-family:var(--serif);font-size:13.5px;font-weight:700;letter-spacing:.1em;color:var(--gold2)}
.top .tg{margin-left:auto;display:flex;gap:6px}
.orb{width:14px;height:14px;border-radius:50%;display:inline-block}
.orb.s{background:radial-gradient(circle at 35% 35%,#ffd08a,var(--sun) 60%,#a8441c)}
.orb.m{background:radial-gradient(circle at 35% 35%,#ffffff,var(--moon) 60%,#6c7ea8)}

/* ---------- 1. 입력: 노을과의 대화 — 노을이 화면 가득, 대사는 영화 자막처럼 ---------- */
/* 프롤로그: 웹툰처럼 내려 읽는 노을 이야기 */
.pro{position:relative}
.pp{height:min(calc(var(--sh,100vh)*.96),calc(min(100vw,460px)*16/9));min-height:480px}
.pp:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,14,.5) 0%,rgba(8,6,14,0) 22%,rgba(8,6,14,0) 52%,rgba(8,6,14,.9) 86%,var(--bg) 100%)}
.pp.first{height:var(--sh,100vh)}
.pp.first .ct:not(.tp){bottom:calc(env(safe-area-inset-bottom,0px) + 86px)}
.pp .ct{position:absolute;left:22px;right:22px;bottom:30px;z-index:1}
.pp .ct.tp{top:calc(env(safe-area-inset-top,0px) + 74px);bottom:auto}
.nar{display:inline-block;margin:0 0 10px;padding:10px 34px 10px 14px;background:linear-gradient(90deg,rgba(8,6,14,.82) 0%,rgba(8,6,14,.55) 60%,rgba(8,6,14,0) 100%);border-left:1px solid rgba(227,194,122,.85);font-family:var(--serif);font-size:14.5px;line-height:1.65;color:var(--ink)}
.nar b{color:var(--gold2);font-weight:700}
.nl{margin:0 0 10px;font-family:var(--bmj);font-size:24px;line-height:1.5;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.nl small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;color:var(--gold);font-weight:700;margin-bottom:4px;text-shadow:none}
.gut{padding:54px 30px;text-align:center;font-family:var(--serif);font-size:15px;line-height:1.9;color:var(--ink2)}
.gut b{display:block;font-family:var(--brush);font-weight:400;font-size:34px;line-height:1.2;color:var(--gold2);margin-bottom:10px}
.gut i{display:block;width:1px;height:46px;margin:0 auto 22px;background:linear-gradient(180deg,rgba(227,194,122,0),var(--gold))}
.scrollhint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:2;text-align:center;font-size:11px;letter-spacing:.3em;color:var(--gold);animation:hint 2.4s ease-in-out infinite}
.scrollhint:after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:var(--gold)}
@keyframes hint{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}
.pp .rv{transition-delay:.15s}.pp .rv+.rv{transition-delay:.55s}.pp .rv+.rv+.rv{transition-delay:.95s}
/* 만남: 노을이 화면 가득 고정, 대사는 자막처럼 */
.meetSec{position:relative;min-height:var(--sh,100vh)}
.meetBg{position:sticky;top:0;height:var(--sh,100vh);margin-bottom:calc(-1 * var(--sh,100vh));overflow:hidden}
.bgL{position:absolute;inset:0;background:#000 center 12%/cover no-repeat;opacity:0;transition:opacity 1.8s ease;transform-origin:50% 30%;animation:kb 26s ease-in-out infinite alternate}
.bgL.on{opacity:1}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translateY(-1.5%)}}
.bgSh{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(8,6,14,.55) 9%,rgba(8,6,14,0) 16%,rgba(8,6,14,0) 36%,rgba(8,6,14,.8) 60%,rgba(8,6,14,.97) 82%)}
#sTalk>.top{position:absolute;left:0;right:0;background:none}
.talk{position:relative;min-height:var(--sh,100vh);display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px calc(env(safe-area-inset-bottom,0px) + 22px)}
.ttl0{text-align:center;transition:opacity .8s,max-height .8s,margin .8s;max-height:200px;overflow:hidden;margin-bottom:18px}
.ttl0.off{opacity:0;max-height:0;margin:0}
.ttl0 small{display:block;font-size:11.5px;letter-spacing:.32em;color:var(--gold);font-weight:700}
.ttl0 h1{margin:8px 0 0;font-family:var(--brush);font-weight:400;font-size:50px;line-height:1.05;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.7)}
.ttl0 p{margin:6px 0 0;font-family:var(--bmj);font-size:17px;color:var(--ink2)}
.msgs{display:flex;flex-direction:column;gap:12px}
.ln{opacity:0;transform:translateY(10px);max-height:220px;overflow:hidden;transition:opacity .9s ease,transform .9s ease,font-size .6s ease,color .6s,max-height .7s ease .25s,margin .7s ease .25s}
.ln.gone{opacity:0!important;max-height:0;margin:0!important;transition:opacity .45s ease,max-height .7s ease .3s,margin .7s ease .3s}
.ln.on{opacity:1;transform:none}
.ln.n{font-family:var(--bmj);font-size:22px;line-height:1.55;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.ln.n.old{font-size:16px;color:rgba(243,236,223,.42)}
.ln.n small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;color:var(--gold);font-weight:700;margin-bottom:4px}
.ln.n.old small{display:none}
.ln.me{align-self:flex-end;font-size:14px;color:var(--gold2);letter-spacing:.02em}
.ln.me:before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:middle;margin-right:8px;opacity:.7}
.ln.me.old{opacity:.4}

.ask{margin-top:18px;display:none}
.ask.on{display:block;animation:up .5s ease}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.field{width:100%;height:50px;border:0;border-bottom:1px solid rgba(227,194,122,.6);background:transparent;color:#fff;padding:0 2px;font-family:var(--serif);font-size:19px;outline:none;border-radius:0}
.field::placeholder{color:rgba(207,198,182,.45)}
.field:focus{border-color:var(--gold)}
.seg{display:flex;border-bottom:1px solid var(--line2)}
.seg button{flex:1;height:40px;border:0;background:none;color:var(--ink3);font-size:14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.seg button.on{color:var(--gold2);font-weight:700;border-bottom-color:var(--gold)}
.grid3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:6px;margin-top:8px}
select{height:48px;border:0;border-bottom:1px solid rgba(227,194,122,.6);background:transparent;color:#fff;font-family:var(--serif);font-size:16px;padding:0 4px;width:100%;border-radius:0;-webkit-appearance:none;appearance:none}
select option{background:#16121f;color:var(--ink)}
.leap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);margin-top:8px}
.leap input{width:18px;height:18px;accent-color:var(--gold)}
.leap.off{opacity:.4}
.go{width:100%;height:52px;margin-top:16px;border:0;background:linear-gradient(90deg,#d9893f,var(--gold) 50%,#c9d0e4);color:#1a1206;font-size:15.5px;font-weight:900;letter-spacing:.04em;cursor:pointer;border-radius:0}
.go:active{transform:scale(.985)}
.go.ghost{background:none;border:1px solid var(--gold);color:var(--gold2);font-weight:700}
.fine{font-size:11px;color:var(--ink3);text-align:center;margin-top:16px;line-height:1.6;opacity:.8}

/* ---------- 2. 전환 ---------- */
.trans{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px;background:#000}
.trans video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.trans .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 40%,rgba(0,0,0,.75))}
.trans .in{position:relative;z-index:1;margin-top:auto;margin-bottom:calc(env(safe-area-inset-bottom,0px) + 90px)}
.trans .tl{position:absolute;inset:0;background:#000 center 14%/cover no-repeat;opacity:0;transition:opacity 2.2s ease;transform-origin:50% 28%}
.trans .tl.on{opacity:1;animation:tz 7s ease-out forwards}
@keyframes tz{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.trans h2{margin:0 0 10px;font-family:var(--bmj);font-size:24px;font-weight:400;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.trans p{margin:0;color:var(--gold2);font-size:12px;letter-spacing:.24em;min-height:20px;transition:opacity .4s}

/* ---------- 3. 결과(화보) ---------- */
/* 화보 사진은 .ph 층에 깔고 스크롤에 따라 천천히 움직여(시차) 깊이를 만든다 */
.px{position:relative;overflow:hidden;background:#000}
.px .ph{position:absolute;left:0;right:0;top:-3.5%;bottom:-3.5%;background:#000 center 12%/cover no-repeat;will-change:transform}
.px:after{z-index:0}
.stage:before{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.px .ph video.lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center var(--fy,18%);opacity:0;transition:opacity 1.4s ease}
.px .ph video.lv.on{opacity:1}
.pp.s{height:calc(var(--sh,100vh)*.62);min-height:380px}
/* 칸과 칸이 딱 끊기지 않게: 위아래 가장자리를 투명하게 녹이고 서로 겹쳐 디졸브처럼 이어지게 */
:root{--ov:56px}
.pro .pp{--mk:linear-gradient(180deg,transparent 0,#000 var(--ov),#000 calc(100% - var(--ov)),transparent 100%);-webkit-mask-image:var(--mk);mask-image:var(--mk);margin-top:calc(-1 * var(--ov))}
.pro .pp.first{--mk:linear-gradient(180deg,#000 0,#000 calc(100% - var(--ov)),transparent 100%);margin-top:0}
.pro .pp .ct{bottom:calc(var(--ov) + 14px)}
.pro .pp .ct.tp{top:calc(env(safe-area-inset-top,0px) + 74px)}
.pro .pp.first .ct:not(.tp){bottom:calc(env(safe-area-inset-bottom,0px) + var(--ov) + 56px)}
.pro .pp.first .scrollhint{bottom:calc(var(--ov) + 4px)}
.pro .gut{position:relative;z-index:1;margin-top:calc(-.6 * var(--ov));padding-top:20px}
.pro .gut+.pp{margin-top:calc(-.5 * var(--ov))}
.pp:after{background:linear-gradient(180deg,rgba(8,6,14,.35) 0%,rgba(8,6,14,0) 24%,rgba(8,6,14,0) 50%,rgba(8,6,14,.7) 82%,rgba(8,6,14,.85) 100%)!important}
.chHero{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px);margin-top:-40px!important}
.pan{--mk:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);-webkit-mask-image:var(--mk);mask-image:var(--mk)}
.toon{gap:0}.toon>.pan+.toon2,.toon2{margin-top:-30px}
.toon>.pan{height:calc(var(--sh,100vh)*.82);min-height:520px;margin:0 -18px}
#prem .toon>.pan{margin:0 -18px}
.toon>.pan .ph{background-position:center 18%}
.toon>.pan .cap{left:22px;right:22px;bottom:56px}
.toon2 .pan{height:300px}.toon2 .pan .ph{background-position:center 12%}
.toon2 .pan{--fy:10%}
.toon2 .pan{--mk:radial-gradient(120% 80% at 50% 45%,#000 55%,transparent 100%)}
.end{--mk:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 100px),transparent 100%);-webkit-mask-image:var(--mk);mask-image:var(--mk)}
.pp.m{height:calc(var(--sh,100vh)*.78);min-height:460px}
.px .ct{z-index:1}
.rep{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 110px)}
.cover{height:86vh;min-height:560px;max-height:760px}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,28,.4) 0%,rgba(18,15,28,0) 20%,rgba(18,15,28,0) 52%,rgba(18,15,28,.82) 80%,var(--bg) 100%)}
.cover .ct{position:absolute;left:22px;right:22px;bottom:28px;z-index:1}
.cover small{display:block;font-size:11.5px;letter-spacing:.3em;color:var(--gold);font-weight:700}
.cover h2{margin:10px 0 0;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink2)}
.cover h3{margin:2px 0 0;font-family:var(--brush);font-weight:400;font-size:58px;line-height:1.05;color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.6)}
.cover .ql{margin:14px 0 0;font-family:var(--bmj);font-size:17px;line-height:1.6;color:var(--gold2)}
.wrap{padding:0 18px}
/* 한눈에: 낮의 나 / 밤의 나 */
.vd{margin-top:6px}
.vd .two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2)}
.vd .two>div{background:var(--bg);padding:16px 14px 14px}
.vd .two>div.m{text-align:right}
.vd .two small{display:block;font-size:11px;letter-spacing:.24em;font-weight:700}
.vd .two .s small{color:var(--sun2)} .vd .two .m small{color:var(--moon)}
.vd .two b{display:block;margin-top:6px;font-family:var(--serif);font-size:44px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.vd .two .s b{color:var(--sun2)} .vd .two .m b{color:var(--moon)}
.vd .two b sup{font-size:14px;font-weight:700;margin-left:2px;vertical-align:18px}
.vd .two p{margin:8px 0 0;font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ink)}
.vd .two em{display:block;font-style:normal;margin-top:2px;font-size:11.5px;color:var(--ink3)}
.bar{position:relative;height:6px;display:flex;overflow:hidden;background:#0d0a14}
.bar i{display:block;height:100%;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.bar .s{background:linear-gradient(90deg,#a8441c,var(--sun),var(--sun2));width:50%}
.bar .m{background:linear-gradient(90deg,var(--moon2),var(--moon));width:50%}
.ans{margin-top:26px;display:grid;gap:0;border-top:1px solid var(--line)}
.ans>div{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line2);align-items:baseline}
.ans small{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--gold)}
.ans .s small{color:var(--sun2)} .ans .m small{color:var(--moon)}
.ans p{margin:0;font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.55;color:var(--ink)}
.ans .mt p{font-family:var(--serif);font-weight:900;font-size:26px;line-height:1.15;color:var(--gold2)}
.ans .mt p span{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink2);margin-top:6px}
.qt{margin:30px 4px 0;text-align:center}
.qt p{margin:0;font-family:var(--bmj);font-size:21px;line-height:1.6;color:#fff}
.qt p:before,.qt p:after{color:var(--gold);font-family:var(--serif)}
.qt p:before{content:"“"} .qt p:after{content:"”"}
.qt small{display:block;margin-top:10px;font-size:11px;letter-spacing:.32em;color:var(--gold);font-weight:700}
.basis{margin-top:30px;padding:16px 0 4px;border-top:1px solid var(--line2)}
.basis>small{display:block;font-size:11px;letter-spacing:.28em;color:var(--ink3);font-weight:700}
.basis .cap{margin:10px 0 0;font-size:13px;line-height:1.75;color:var(--ink2)}
.basis .cap b{color:var(--ink)}
.pil{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border-top:1px solid var(--line2)}
.pil div{text-align:center;padding:10px 0 2px}
.pil small{display:block;font-size:10.5px;color:var(--ink3)}
.pil b{display:block;font-family:var(--serif);font-size:21px;font-weight:900;line-height:1.15;margin-top:4px}
.pil b em{display:block;font-style:normal;font-size:21px}
.pil .me b{color:var(--gold2)}

/* 잠금 미리보기 */
.lock{position:relative;margin-top:22px;border:1px solid var(--line);overflow:hidden}
.lock .bl{filter:blur(6px);opacity:.7;pointer-events:none;user-select:none;padding:16px}
.lock .bl .ph{height:150px;background:#000 center 20%/cover;margin-bottom:12px}
.lock .bl p{margin:0 0 8px;font-size:14px;line-height:1.7;color:var(--ink2)}
.lock .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px;background:linear-gradient(180deg,rgba(18,15,28,.2),rgba(18,15,28,.92) 45%)}
.lock .ov b{font-family:var(--serif);font-size:18px;font-weight:900}
.lock .ov ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.lock .ov li{font-size:13.5px;color:var(--ink2);display:flex;gap:8px;align-items:baseline}
.lock .ov li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}

/* 장(章) */
#prem[hidden]{display:none}
.ch{margin-top:34px}
.chHero{height:82vh;min-height:520px;max-height:720px}
.chHero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,28,.0) 40%,rgba(18,15,28,.7) 78%,var(--bg) 100%)}
.chHero .ct{position:absolute;left:22px;right:22px;bottom:22px;z-index:1}
.chHero small{display:block;font-size:11.5px;letter-spacing:.32em;font-weight:700}
.chHero h3{margin:8px 0 0;font-family:var(--brush);font-weight:400;font-size:56px;line-height:1.05;color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.6)}
.chHero p{margin:8px 0 0;font-family:var(--bmj);font-size:17px;line-height:1.55}
.sunC small,.sunC p{color:var(--sun2)} .moonC small,.moonC p{color:var(--moon)}
.kick{margin:22px 0 0;font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--sun2)}
.kick.m{color:var(--moon)}
.kick+.lead{margin-top:8px}
.why{margin-top:16px;padding:14px 0 2px 16px;border-left:1px solid rgba(227,194,122,.5);background:linear-gradient(90deg,rgba(227,194,122,.08),rgba(227,194,122,0) 70%)}
.why small{display:block;font-size:10.5px;letter-spacing:.3em;color:var(--gold);font-weight:700;margin-bottom:6px}
.why p{margin:0 0 10px;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.why b{color:var(--ink)}
.todo{margin-top:18px;padding:16px 16px 6px;background:linear-gradient(180deg,rgba(232,131,58,.12),rgba(232,131,58,0))}
.todo.m{background:linear-gradient(180deg,rgba(143,164,207,.14),rgba(143,164,207,0))}
.todo small{display:block;font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--sun2);margin-bottom:8px}
.todo.m small{color:var(--moon)}
.todo ol{margin:0;padding-left:18px}
.todo li{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink)}
.pals{margin-top:18px}
.pals>small{display:block;font-size:11px;letter-spacing:.14em;color:var(--moon);font-weight:700;margin-bottom:8px}
.pals div{padding:12px 0 12px 14px;border-left:1px solid rgba(201,214,240,.4);background:linear-gradient(90deg,rgba(201,214,240,.07),rgba(201,214,240,0) 70%);margin-bottom:8px}
.pals b{display:block;font-size:12px;color:var(--moon);letter-spacing:.06em}
.pals p{margin:4px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.ans p span{display:block;margin-top:4px;font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.6;color:var(--ink2)}
.lead{margin:22px 0 0;font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.55;color:#fff}
.body{margin:12px 0 0;font-size:14.5px;line-height:1.8;color:var(--ink2)}
.body b{color:var(--ink)}
.chip{display:inline-block;margin:0 2px;padding:0 6px;border:1px solid var(--line);font-family:var(--serif);font-size:12px;color:var(--gold2);line-height:1.6;vertical-align:1px}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:16px;background:linear-gradient(180deg,rgba(223,230,245,.14),rgba(223,230,245,0))}
.areas div{background:linear-gradient(180deg,rgba(27,21,40,.96),rgba(18,15,28,.96));padding:13px 12px}
.areas small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.sunA small{color:var(--sun2)} .moonA small{color:var(--moon)}
.areas p{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--ink2)}
.ev{margin-top:14px;padding:13px 14px;border-left:1px solid rgba(227,194,122,.7);background:linear-gradient(90deg,rgba(227,194,122,.1),rgba(227,194,122,0) 75%)}
.ev b{display:block;font-size:12px;color:var(--gold);letter-spacing:.06em;margin-bottom:4px}
.ev p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.hid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.hid3 div{padding:14px 8px;text-align:center;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(201,214,240,.08),rgba(201,214,240,0))}
.hid3 b{display:block;font-family:var(--serif);font-size:30px;font-weight:900;color:var(--moon)}
.hid3 em{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:2px}
.hid3 span{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}
.hid3 p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--ink2)}
/* 열두 달: 두 줄 그래프 + 웹툰 칸 */
.ttl2{margin:0 0 4px;font-family:var(--brush);font-weight:400;font-size:40px;line-height:1.1}
.sub2{margin:0;font-size:13px;color:var(--ink3)}
.chart{width:100%;height:auto;display:block;margin-top:14px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink2);margin-top:6px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:16px;height:3px}
.toon{display:grid;gap:10px;margin-top:22px}
.pan{height:340px}
.pan .ph{background-position:center 8%}
.pan:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(8,6,14,.88))}
.pan .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.pan .cap small{display:block;font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--gold)}
.pan .cap b{display:block;font-family:var(--serif);font-weight:900;font-size:28px;line-height:1.15;color:#fff;margin-top:4px}
.pan .cap p{margin:6px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.55}
.pan .cap q{display:block;margin-top:6px;font-family:var(--bmj);font-size:15px;color:var(--gold2);quotes:"“" "”"}
.toon2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toon2 .pan{height:280px}
.toon2 .pan .cap b{font-size:22px}
.mrows{margin-top:18px;border-top:1px solid var(--line2)}
.mr{display:grid;grid-template-columns:38px 54px 1fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2);font-size:13px}
.mr .mm{font-weight:700}
.mr .gz{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);line-height:1.25}
.mr .gz small{display:block;font-size:11px;font-weight:500;color:var(--ink3);letter-spacing:.04em}
.mr .tx{font-size:12.5px;color:var(--ink2);margin-bottom:5px}
.mr.meet .tx{color:var(--gold2);font-weight:700}
.mr .dv{display:grid;gap:4px}
.mr .dv div{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
.mr .dv i{display:block;height:5px}
.mr .dv .s i{background:var(--sun)} .mr .dv .m i{background:var(--moon)}
.mr.meet .mm{color:var(--gold2)}
/* 처방 */
.rx{display:grid;gap:10px;margin-top:16px}
.rx div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:14px;border:1px solid var(--line2);background:var(--bg2)}
.rx .orb{width:36px;height:36px}
.rx small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.rx p{margin:4px 0 0;font-size:14px;line-height:1.6}
.talis{position:relative;margin-top:16px;padding:26px 20px 22px;text-align:center;background:linear-gradient(180deg,#2a1d12,#1a1220);border:1px solid rgba(227,194,122,.55)}
.talis small{display:block;font-size:11px;letter-spacing:.32em;color:var(--gold);font-weight:700}
.talis p{margin:12px 0 0;font-family:var(--brush);font-size:30px;line-height:1.35;color:var(--gold2)}
.talis .seal{display:inline-grid;place-items:center;width:46px;height:46px;margin-top:14px;background:#a8321f;color:#fff3e6;font-family:var(--serif);font-weight:900;font-size:13px;line-height:1.05;transform:rotate(-4deg)}
/* 엔딩 + 카드 */
.end{margin-top:34px;height:86vh;min-height:560px;max-height:760px}
.end:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(18,15,28,.0) 58%,rgba(18,15,28,.6) 84%,var(--bg) 100%)}
.end video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0;transition:opacity 2s ease}
.end.playing video{opacity:1}
.end .ct{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;text-align:center;font-family:var(--bmj);font-size:21px;line-height:1.6;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7);opacity:0;transform:translateY(8px);transition:opacity 1.2s ease,transform 1.2s ease}
.end .ct.on{opacity:1;transform:none}
.end .sub{position:absolute;left:20px;right:20px;bottom:120px;z-index:2;text-align:center;font-family:var(--bmj);font-size:22px;line-height:1.5;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.9);opacity:0;transition:opacity .9s ease}
.end .sub.on{opacity:1}
.fin{height:calc(var(--sh,100vh)*.9);min-height:540px;margin:-60px -18px 0;--mk:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 120px),transparent 100%);-webkit-mask-image:var(--mk);mask-image:var(--mk)}
.fin:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(8,6,14,.15),rgba(8,6,14,.7) 75%)}
.fin .ct{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);z-index:1;text-align:center}
.fin small{display:block;font-size:11px;letter-spacing:.36em;color:var(--gold);font-weight:700}
.fin b{display:block;margin-top:14px;font-family:var(--brush);font-weight:400;font-size:46px;line-height:1.15;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.fin p{margin:16px 0 0;font-family:var(--bmj);font-size:17px;line-height:1.7;color:var(--ink)}
.fin em{display:block;margin-top:18px;font-style:normal;font-size:11px;letter-spacing:.4em;color:var(--gold2)}
.cardH{text-align:center;margin-top:10px}
.cardH small{display:block;font-size:11px;letter-spacing:.3em;color:var(--gold);font-weight:700}
.cardH b{display:block;margin-top:6px;font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
#sndB{position:absolute;right:14px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:30;width:36px;height:36px;border-radius:50%;border:1px solid rgba(227,194,122,.5);background:rgba(18,15,28,.55);color:var(--gold2);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#sndB svg{width:17px;height:17px}
#shrB{position:absolute;right:58px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:30;width:36px;height:36px;border-radius:50%;border:1px solid rgba(227,194,122,.5);background:rgba(18,15,28,.55);color:var(--gold2);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#shrB svg{width:16px;height:16px}
.fromF{display:block;margin-bottom:10px;font-size:11px;letter-spacing:.3em;color:var(--gold);font-weight:700}
.outro{margin:26px 0 0;display:grid;gap:10px}
.outro .go{margin-top:0}
.outro .ghost2{height:48px;border:1px solid var(--line);background:none;color:var(--ink2);font-size:14px;font-weight:700;cursor:pointer}
.inv{margin-top:26px;padding:18px 0 4px;text-align:center;border-top:1px solid var(--line2)}
.inv p{margin:0;font-family:var(--bmj);font-size:17px;color:var(--ink)}
.inv button{margin-top:12px;height:46px;padding:0 22px;border:1px solid rgba(227,194,122,.6);background:linear-gradient(90deg,rgba(227,194,122,.14),rgba(227,194,122,.04));color:var(--gold2);font-size:14.5px;font-weight:700;cursor:pointer}
.outro .lnk{border:0;height:40px;color:var(--ink3);font-weight:500;text-decoration:underline;text-underline-offset:4px}
#sndB .x{display:none}#sndB.off .x{display:block}#sndB.off .w{display:none}
.top .tg{display:none}
.end .snd{position:absolute;right:14px;top:14px;z-index:3;display:none;height:32px;padding:0 12px;border:1px solid rgba(241,219,164,.6);background:rgba(18,15,28,.45);color:var(--gold2);font-size:12px;cursor:pointer}
.end .snd.on{display:block}
.flip{perspective:1200px;margin:20px auto 0;width:min(78%,300px);aspect-ratio:3/4.4;cursor:pointer}
.flip .in{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#000 center 18%/cover no-repeat;border:1px solid rgba(227,194,122,.6);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.face:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.82))}
.face>*{position:relative}
.face.bk{transform:rotateY(180deg)}
.face small{font-size:10.5px;letter-spacing:.3em;font-weight:700}
.face.ft small{color:var(--sun2)} .face.bk small{color:var(--moon)}
.face b{display:block;margin-top:6px;font-family:var(--brush);font-weight:400;font-size:34px;line-height:1.1;color:#fff}
.face p{margin:8px 0 0;font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--ink2)}
.face em{display:block;font-style:normal;margin-top:10px;font-size:11px;color:var(--ink3);letter-spacing:.1em}
.fliphint{text-align:center;font-size:12px;color:var(--ink3);margin-top:10px}
.note{font-size:11.5px;color:var(--ink3);line-height:1.6;margin:22px 4px 0}
/* 결제 바 */
.pay{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:28px 16px calc(env(safe-area-inset-bottom,0px) + 14px);background:linear-gradient(180deg,rgba(18,15,28,0),rgba(18,15,28,.95) 22px,var(--bg) 34px);transform:translateY(110%);transition:transform .6s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.pay.on{transform:none;visibility:visible}
.pay .pr{text-align:center;font-size:12.5px;color:var(--ink2);margin-bottom:8px}
.pay .pr b{color:var(--gold2);font-size:15px}
.pay .pr .free{display:block;margin-top:4px;font-size:13px;color:var(--gold2);letter-spacing:.01em}
.pay.done .pr .free{display:none}
.pay .go{margin-top:0}
.pay.done .pr{display:none}
.toast{position:absolute;left:50%;bottom:120px;transform:translate(-50%,8px);z-index:60;background:var(--gold);color:#1a1206;font-size:13.5px;font-weight:700;padding:10px 16px;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
#prem .wrap{padding:0}
#prem .chHero,#prem .end{margin:0 -18px}
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}