/* ===== 도화 결과 — 「태오가 새벽에 보낸 메시지」: 반복 영상 첫 장면 → 메신저 대화 (모서리 없음, 원만 50%) ===== */
.stage{max-width:430px}
.result.sc,.letter.dl{--sc-bg:#0a0a0d;--sc-b1:#1c1c21;--sc-b2:#26262c;--sc-ink:#f2f0ee;--sc-ink2:#a9a6a2;--sc-ink3:#6e6b68;--sc-pink:#ff8fa3;--sc-me:#f4d9de}
.result{position:absolute;inset:0;z-index:25;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .8s;scrollbar-width:none;background:#0a0a0d;color:#f2f0ee;-webkit-font-smoothing:antialiased}
.result::-webkit-scrollbar{display:none}
.stage.res .result{opacity:1;pointer-events:auto}
.result.sc *{border-radius:0}
.stage.res>.top.tsd{background:rgba(10,10,13,.94)!important;box-shadow:0 10px 14px -6px rgba(10,10,13,.94)!important}
.stage.res .backB{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.14);color:#fff}
.stage.res>.top.tsd .who{display:flex;padding:0 10px 0 0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage.res>.top.tsd .who .av{width:28px;height:28px;border-width:1px}
.stage.res>.top.tsd .who b{font-size:13px}
.stage.res>.top.tsd .who small{font-size:10.5px;color:var(--sc-ink2,#a9a6a2)}

/* 첫 장면: 태오 영상이 화면을 쥔다 */
.sc .op{position:relative;height:min(78svh,620px);min-height:480px;overflow:hidden;background:#000}
.sc .op .po,.sc .op video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.sc .op .po{background:#141418 center 22%/cover no-repeat}
.sc video.mv{opacity:0;transition:opacity .4s}
.sc video.mv.on{opacity:1}
.sc .op:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,13,.55) 0,rgba(10,10,13,0) 16%,rgba(10,10,13,0) 50%,rgba(10,10,13,.9) 86%,#0a0a0d 100%)}
.sc .ot{position:absolute;z-index:2;left:18px;right:18px;bottom:22px}
.sc .ot small{display:block;font-size:11px;color:rgba(255,255,255,.66);letter-spacing:.01em}
.sc .ot h1{margin:6px 0 0;font-family:var(--brush);font-weight:400;font-size:46px;line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.sc .ot p{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.86)}

/* 대화 */
.sc .th{position:relative;padding:6px 12px 24px;font-size:13.5px;line-height:1.45;letter-spacing:-.01em}
.sc .day{text-align:center;font-size:10.5px;color:var(--sc-ink3);margin:10px 0 14px}
.sc .row{display:flex;gap:8px;align-items:flex-end;margin-top:6px;opacity:0;transition:opacity .5s ease}
.sc .row.on{opacity:1}
.npill{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:32;transform:translate(-50%,10px);opacity:0;pointer-events:none;height:40px;padding:0 18px;border:1px solid rgba(255,182,193,.5);border-radius:0;background:rgba(20,18,24,.94);color:#ffd9de;font-size:14px;font-weight:700;letter-spacing:.01em;transition:opacity .3s,transform .3s;cursor:pointer}
.npill.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.npill{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.npill .dots{display:inline-flex;gap:3px}
.npill .dots i{width:5px;height:5px;border-radius:50%;background:#ffb6c1;animation:sctp 1s infinite}
.npill .dots i:nth-child(2){animation-delay:.15s}.npill .dots i:nth-child(3){animation-delay:.3s}
.npill:not(.ty) .dots{display:none}
.tmore{display:flex;align-items:center;gap:10px;margin:14px 0 0 38px;height:20px;font-size:13px;color:var(--sc-ink2);opacity:0;transition:opacity .4s}
.tmore.on{opacity:1}
.tmore .dots{display:inline-flex;gap:3px}
.tmore .dots i{width:5px;height:5px;border-radius:50%;background:var(--sc-ink2);animation:sctp 1s infinite}
.tmore .dots i:nth-child(2){animation-delay:.15s}.tmore .dots i:nth-child(3){animation-delay:.3s}
.sc .row .av{flex:none;width:30px;height:30px;border-radius:50%;background:#26262c url('../../img/taeo/base.jpg') center 18%/cover;visibility:hidden}
.sc .row.first{margin-top:12px}
.sc .row.first .av{visibility:visible}
.sc .row .col{min-width:0;max-width:calc(100% - 82px);display:flex;flex-direction:column;align-items:flex-start}
.sc .row .nm{font-size:11px;color:var(--sc-ink2);margin:0 0 4px}
.sc .row:not(.first) .nm{display:none}
.sc .bub{background:var(--sc-b1);padding:9px 12px;font-size:13.5px;line-height:1.45;color:var(--sc-ink);overflow-wrap:anywhere}
.sc .bub b{color:#fff;font-weight:700}
.sc .row .tm{font-size:9.5px;color:var(--sc-ink3);margin-left:6px;align-self:flex-end;flex:none;white-space:nowrap}
.sc .row.me{justify-content:flex-end}
.sc .row.me .bub{background:var(--sc-me);color:#1a1213}
.sc .row.me .col{align-items:flex-end;max-width:78%}
.sc .row.me .tm{margin:0 6px 0 0}
.sc .typing{display:inline-flex;gap:4px;padding:12px}
.sc .typing i{width:5px;height:5px;border-radius:50%;background:var(--sc-ink2);animation:sctp 1s infinite}
.sc .typing i:nth-child(2){animation-delay:.15s}.sc .typing i:nth-child(3){animation-delay:.3s}
@keyframes sctp{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* 메모 앱 화면 */
.sc .memo{width:236px;max-width:100%;background:#f6f4ef;color:#1b1a18;padding:12px 14px 14px;font-size:12px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.sc .memo .h{display:flex;justify-content:space-between;font-size:10px;color:#9a958c}
.sc .memo b.t{display:block;margin:6px 0 8px;font-size:15px;font-weight:900;letter-spacing:-.03em;color:#1b1a18}
.sc .memo .ln{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #e5e1d8;font-size:13px;line-height:1.3}
.sc .memo .ln>span{width:16px;flex:none;color:#9a958c;font-size:11px}
.sc .memo .ln em{font-style:normal;color:#9a958c;font-size:11px;margin-left:auto;text-align:right}
.sc .memo .ln.no .gz{color:#b5b0a6}
.sc .memo .gz{position:relative;display:inline-block;font-weight:700}
.sc .memo .gz svg{position:absolute;left:-12px;top:-8px;width:calc(100% + 24px);height:calc(100% + 16px);overflow:visible;pointer-events:none}
.sc .memo .gz svg path{stroke-dasharray:190;stroke-dashoffset:190;animation:scpen .9s .25s cubic-bezier(.4,0,.2,1) forwards}
@keyframes scpen{to{stroke-dashoffset:0}}
.sc .memo .pn{border-top:0;padding-top:8px;justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:2px}
.sc .pen{font-family:'Nanum Pen Script','Gaegu',cursive;color:#c23a3a;font-size:19px;line-height:1.05;text-align:right}
.sc .pen.s{font-size:16px;color:#8d6b67}

/* 사진 · 영상 메시지 */
.sc .ph{position:relative;width:200px;max-width:100%;height:250px;background:#1c1c21 center 20%/cover no-repeat;box-shadow:0 10px 24px rgba(0,0,0,.45);overflow:hidden}
.sc .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.sc .ph.wide{width:230px;height:172px}
.sc .ph.bl{background-color:#2a1a20;background-image:radial-gradient(60% 60% at 40% 30%,rgba(255,180,190,.35),rgba(255,180,190,0))}
.sc .ph .cap{position:absolute;left:8px;bottom:6px;font-size:10px;color:rgba(255,255,255,.7);z-index:2}

/* 사람 카드 두 장 */
.sc .two{display:flex;gap:6px;width:270px;max-width:100%}
.sc .two>div{flex:1;min-width:0;background:var(--sc-b2);padding:10px}
.sc .two small{display:block;font-size:10px;color:var(--sc-ink3)}
.sc .two b{display:block;margin-top:4px;font-size:15px;font-weight:900;letter-spacing:-.03em;color:#fff}
.sc .two em{display:block;margin-top:2px;font-style:normal;font-size:10px;color:var(--sc-pink)}
.sc .two p{margin:6px 0 0;font-size:11.5px;line-height:1.4;color:var(--sc-ink2)}
.sc .two .lk{color:transparent;text-shadow:0 0 6px rgba(255,255,255,.5);user-select:none;-webkit-user-select:none}

/* 지수 */
.sc .gg{position:relative;height:4px;margin:8px 0 2px;background:#2c2c33}
.sc .gg i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sc-pink);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.sc .gg i:after{content:"";position:absolute;right:-5px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--sc-pink)}
.sc .gs{display:flex;justify-content:space-between;font-size:9.5px;color:var(--sc-ink3)}

/* 잠긴 달력 사진 */
.sc .cal{position:relative;width:250px;max-width:100%;height:200px;background:#f6f4ef;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.sc .cal .im{position:absolute;inset:-12px;background:center/cover no-repeat;filter:blur(7px) saturate(.9)}
.sc .cal .veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:rgba(246,244,239,.42);text-align:center;color:#1b1a18;padding:0 12px}
.sc .cal .veil svg{width:18px;height:18px;margin-bottom:4px}
.sc .cal .veil b{font-size:13.5px;font-weight:900}
.sc .cal .veil small{font-size:10.5px;color:#5b5650}
.sc .cal .rg{position:absolute;left:10px;top:8px;z-index:2;font-size:10px;color:#6b665e}

/* 잠긴 음성 */
.sc .voice{display:flex;align-items:center;gap:10px;width:220px;max-width:100%;background:var(--sc-b1);padding:10px 12px}
.sc .voice .pl{width:30px;height:30px;border-radius:50%;background:#3a3a42;display:grid;place-items:center;flex:none;color:var(--sc-ink2)}
.sc .voice .wv{flex:1;height:22px;background:repeating-linear-gradient(90deg,var(--sc-ink3) 0 2px,transparent 2px 5px);opacity:.6;clip-path:polygon(0 40%,8% 20%,16% 55%,24% 10%,32% 45%,40% 25%,48% 60%,56% 15%,64% 50%,72% 30%,80% 55%,88% 20%,100% 45%,100% 100%,0 100%)}
.sc .voice small{font-size:10.5px;color:var(--sc-ink2);white-space:nowrap}

/* 왜 그렇게 봤냐면 */
.sc .why{margin-top:4px;font:inherit;font-size:11px;color:var(--sc-ink3);background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.sc .why[aria-expanded="true"]{color:var(--sc-ink2)}
.sc .whyT{display:none;max-width:270px;margin-top:4px;font-size:11.5px;line-height:1.55;color:var(--sc-ink2);border-left:2px solid var(--sc-b2);padding-left:8px}
.sc .whyT b{color:var(--sc-ink);font-weight:700}
.sc .whyT.on{display:block}

/* 바로 답하기 */
.sc .qr{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px;opacity:0;transition:opacity .3s}
.sc .qr.on{opacity:1}
.sc .qr button{border:1px solid var(--sc-me);background:none;color:var(--sc-me);font:inherit;font-size:13px;padding:8px 12px;cursor:pointer}
.sc .qr.ask button{border-color:#3a3a42;color:var(--sc-ink)}

/* 결제 메시지 */
.sc .act{display:flex;flex-direction:column;gap:6px;margin-top:6px;width:272px;max-width:100%}
.sc .act .pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--sc-ink2)}
.sc .act .pr s{color:var(--sc-ink3)}
.sc .act .pr b{font-size:15px;color:var(--sc-pink);font-weight:900}
.sc .act button{height:46px;border:0;background:var(--sc-pink);color:#1a1213;font:inherit;font-size:14px;font-weight:900;cursor:pointer}
.sc .act button.g{height:42px;background:none;border:1px solid var(--sc-b2);color:var(--sc-ink);font-weight:700;font-size:13px}
.sc .act ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid #1f1f24}
.sc .act li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #1f1f24;font-size:11.5px;line-height:1.35;color:var(--sc-ink2)}
.sc .act li svg{flex:none;width:12px;height:12px;color:var(--sc-pink)}
.sc .act li em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--sc-ink3);white-space:nowrap}

.sc .foot{font-size:10px;line-height:1.6;color:var(--sc-ink3);text-align:center;margin:18px 22px 0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}

/* 아래 입력줄 · 건너뛰기 */
.rbar{position:absolute;left:0;right:0;bottom:0;z-index:31;display:flex;gap:8px;align-items:center;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:rgba(10,10,13,.94);border-top:1px solid #1f1f24;transform:translateY(110%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility .5s}
.stage.res .rbar{transform:none;visibility:visible}
.rbar .in{flex:1;min-width:0;height:40px;display:flex;align-items:center;padding:0 12px;background:#1c1c21;border:0;font:inherit;font-size:13px;color:#6e6b68;text-align:left;cursor:pointer}
.rbar .go{width:40px;height:40px;border-radius:50%;border:0;background:#ff8fa3;display:grid;place-items:center;flex:none;cursor:pointer}
.skipB{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);z-index:31;border:1px solid #2c2c33;background:rgba(10,10,13,.82);color:#a9a6a2;font:inherit;font-size:11.5px;padding:6px 10px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.skipB.on{opacity:1;pointer-events:auto}
.pay{display:none!important}

/* ===== 결제 뒤 편지 — 같은 새벽 대화 위로 「태오가 보낸 긴 편지」가 도착한다 (모서리 없음, 원만 50%) =====
   대화(영상 편지) → 한 장의 긴 편지(읽는 만큼 잉크가 번진다) → 다시 대화(답장) */
.letter{position:absolute;inset:0;overflow-anchor:none;z-index:66;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .7s;scrollbar-width:none;-webkit-font-smoothing:antialiased;
  background:#0a0a0d linear-gradient(180deg,#0a0a0d 0,#0a0a0d 900px,#0e0d14 55%,#161320 88%,#1d1622 100%);background-attachment:local;color:#f2f0ee;color-scheme:dark}
.letter::-webkit-scrollbar{display:none}
.letter.on{opacity:1;pointer-events:auto}
.dl *{border-radius:0}
.dl [hidden]{display:none!important}
/* 머리줄 */
.dl-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;background:#0a0a0d;box-shadow:0 10px 14px -6px #0a0a0d}
.dl-x{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.dl-x svg{width:20px;height:20px}
.dl .av{flex:none;width:30px;height:30px;border-radius:50%;background:#26262c center 18%/cover no-repeat}
.dl-who b{display:block;font-size:14.5px;line-height:1.2}
.dl-who small{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--sc-ink2)}
.dl-who small:before{content:"";width:6px;height:6px;border-radius:50%;background:#5ee29b;box-shadow:0 0 6px #5ee29b}
/* 대화 */
.dl-th{padding:4px 12px 8px;font-size:15px;line-height:1.5;letter-spacing:-.01em}
.dl-day{text-align:center;font-size:12.5px;color:var(--sc-ink3);margin:14px 0 6px}
.dl-sys{display:block;width:max-content;max-width:100%;margin:10px auto 4px;padding:6px 12px;background:#141418;font-size:12.5px;color:var(--sc-ink2);text-align:center}
.dl-sys#dhst{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px;margin-top:18px}
.dl-sys#dhst i{width:7px;height:7px;border-radius:50%;background:var(--sc-pink);animation:sctp 1s infinite}
.dl-sys#dhst small{flex-basis:100%;font-size:12.5px;color:var(--sc-ink3)}
.dl-row{display:flex;gap:8px;align-items:flex-end;margin-top:6px}
.dl-row.first{margin-top:14px}
.dl-row .av{visibility:hidden}
.dl-row.first .av{visibility:visible}
.dl-row .col{min-width:0;max-width:calc(100% - 86px);display:flex;flex-direction:column;align-items:flex-start}
.dl-row .nm{font-size:12.5px;color:var(--sc-ink2);margin:0 0 4px}
.dl-row:not(.first) .nm{display:none}
.dl-row .tm{font-size:12px;color:var(--sc-ink3);flex:none;white-space:nowrap}
.dl .bub{background:var(--sc-b1);padding:10px 13px;font-size:15px;line-height:1.5;color:var(--sc-ink);overflow-wrap:anywhere}
/* 대화 줄 등장 */
.dl-th>.dl-row,.dl-th>.dl-sys,.dl-th>.dl-day,.dl-qr{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.dl-th>.on,.dl-qr.on{opacity:1;transform:none}
/* 영상 편지 */
.dl-vm{position:relative;width:min(280px,calc(100vw - 110px));aspect-ratio:2/3;background:#141418;overflow:hidden;cursor:pointer;box-shadow:0 16px 40px rgba(0,0,0,.55);outline:none}
.dl-vm .po,.dl-vm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.dl-vm .po{background:#141418 center 22%/cover no-repeat;transform:scale(1.04);animation:breathe 7s ease-in-out infinite alternate}
.dl-vm video{opacity:0;transition:opacity .3s}
.dl-vm video.on{opacity:1}
.dl-vm:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,13,.35) 0,rgba(10,10,13,0) 18%,rgba(10,10,13,0) 52%,rgba(10,10,13,.82) 100%)}
.dl-vm .ls{position:absolute;z-index:2;left:14px;right:14px;bottom:62px;text-align:center;font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.5;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.dl-vm .ls.on{opacity:1;transform:none}
.dl-vm .pb{position:absolute;z-index:3;left:50%;top:42%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(10,10,13,.55);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;opacity:0;transition:opacity .3s;pointer-events:none}
.dl-vm.idle .pb{opacity:1}
.dl-vm .vb{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 14px 14px}
.dl-vm .vb .k{display:flex;flex-direction:column;flex:none;line-height:1.25}
.dl-vm .vb .k b{font-size:12.5px;font-weight:700;color:#fff}
.dl-vm .vb .k em{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.7)}
.dl-vm .wv{position:relative;flex:1;height:22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.38) 0 2px,transparent 2px 5px);clip-path:polygon(0 45%,6% 25%,12% 60%,18% 15%,24% 50%,30% 30%,36% 65%,42% 20%,48% 55%,54% 10%,60% 45%,66% 25%,72% 60%,78% 20%,84% 50%,90% 30%,96% 55%,100% 40%,100% 100%,0 100%)}
.dl-vm .wv i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--sc-pink) 0 2px,transparent 2px 5px)}
.dl-vm .tt{flex:none;font-size:12.5px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
/* 편지 봉투 메시지 */
.dl-env{display:flex;align-items:center;gap:12px;width:250px;max-width:100%;padding:12px 14px;background:var(--sc-b1);border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dl-env svg{flex:none;width:34px;height:26px}
.dl-env b{display:block;font-size:15px;font-weight:700;color:#fff}
.dl-env small{display:block;margin-top:2px;font-size:12.5px;color:var(--sc-ink2)}

/* 한 장의 긴 편지: 새벽빛이 오른쪽 위에서 비친다 */
.dl-paper{position:relative;margin:22px 10px 8px;padding:40px 22px 44px;color:#ebe3dc;background-color:#141116;
  background-image:radial-gradient(110% 520px at 92% 0,rgba(255,178,150,.16),rgba(255,178,150,0) 70%),radial-gradient(90% 420px at 0 100%,rgba(255,143,163,.07),rgba(255,143,163,0) 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .86 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,226,214,.06);transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s}
.dl-paper.fold{opacity:.0;transform:perspective(1100px) rotateX(-10deg) translateY(16px)}
.dl-press{position:absolute;right:14px;top:16px;width:64px;height:64px;opacity:.7;transform:rotate(-16deg);pointer-events:none}
.dl-date{margin:0;font-family:'Nanum Pen Script',cursive;font-size:22px;line-height:1.1;color:var(--sc-ink2)}
.dl-to{margin:10px 0 18px;font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:38px;line-height:1.05;color:#fff;letter-spacing:0}
.dl-p{margin:0 0 16px;font-family:var(--bmj);font-size:16.5px;line-height:1.9;color:#ebe3dc;letter-spacing:-.005em}
.dl-p b{color:#fff;font-weight:400;background:linear-gradient(transparent 62%,rgba(255,143,163,.32) 62%)}
.dl-cue{display:flex;align-items:center;gap:12px;margin:42px 0 12px;font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:30px;line-height:1.1;color:var(--peach-2);letter-spacing:0}
.dl-cue:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,217,204,.35),rgba(255,217,204,0))}
.dl-pen{margin:6px 0 12px;font-family:'Nanum Pen Script',cursive;font-size:25px;line-height:1.2;color:var(--sc-pink)}
/* 잉크: 읽는 자리에 오면 왼쪽부터 번진다 */
.dl .ink{opacity:0;transform:translateY(6px);-webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 44%,transparent 56%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:opacity .9s ease,transform .9s ease,-webkit-mask-position 1.4s cubic-bezier(.3,.6,.2,1),mask-position 1.4s cubic-bezier(.3,.6,.2,1)}
.dl .ink.on{opacity:1;transform:none;-webkit-mask-position:0 0;mask-position:0 0}
.dl .ink.done{-webkit-mask-image:none;mask-image:none}
.dl .pop{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.dl .pop.on{opacity:1;transform:none}

/* 편지에 붙인 달력 사진 (대화에서 봉인돼 있던 그 달력) */
.dl-cal{position:relative;margin:22px -8px 6px;padding:18px 12px 14px;background:#f4f1ec;color:#2a2119;box-shadow:0 18px 40px rgba(0,0,0,.55);transform:rotate(-.8deg)}
.dl .dl-cal.ink{transform:rotate(-.8deg) translateY(10px)}
.dl .dl-cal.ink.on{transform:rotate(-.8deg)}
.dl-cal .tape{position:absolute;left:50%;top:-11px;width:96px;height:22px;margin-left:-48px;background:rgba(255,236,228,.42);transform:rotate(2deg);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.dl-cal .hd{display:flex;justify-content:space-between;font-size:12.5px;color:#7b6f66;padding:0 4px}
.dl-cal .pen{display:block;margin:6px 4px 0;font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:30px;line-height:1.1;color:#c23a3a}
.dl-cal .br svg{display:block;width:100%;height:auto;margin-top:2px}
.dl-cal .br{aspect-ratio:360/138;overflow:hidden} /* 가지와 꽃만: 달 이름 · 표시는 아래 표에 크게 */
.dl-cal .gr{display:grid;grid-template-columns:repeat(4,1fr);row-gap:12px;margin-top:8px;padding-top:12px;border-top:1px solid rgba(42,33,25,.12);text-align:center}
.dl-cal .c{position:relative;display:flex;flex-direction:column;align-items:center}
.dl-cal .c .y{height:15px;font-size:12px;line-height:15px;color:#9a8b7a}
.dl-cal .c>b{position:relative;font-size:19px;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#2a2119}
.dl-cal .c>b small{font-size:12.5px;font-weight:700;margin-left:1px}
.dl-cal .c>b svg{position:absolute;left:-16px;top:-9px;width:calc(100% + 32px);height:calc(100% + 18px);overflow:visible;pointer-events:none}
.dl-cal .c>b svg path{stroke-dasharray:200;stroke-dashoffset:200}
.dl-cal.on .c>b svg path{transition:stroke-dashoffset 1s .9s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0}
.dl-cal .c>svg{display:block;width:40px;height:40px;margin:2px auto 0}
.dl-cal .c .w{font-size:12.5px;font-weight:700;color:#6b5d4f;line-height:1.3}
.dl-cal .c.pk .w,.dl-cal .c.top .w{color:#c23a3a}
.dl-cal .c.ch .w{color:#8c8178}
.dl-cal .c .g{font-size:12px;color:#8c8178;line-height:1.35}
.dl-cal .lg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:14px;font-size:12.5px;color:#6b5d4f}
.dl-cal .lg span{display:inline-flex;align-items:center;gap:6px}
.dl-cal .lg i{display:inline-block;width:8px;height:8px}
.dl-cal .lg i.f{border-radius:50%;background:#ff8fa3}
.dl-cal .lg i.r{border-radius:50%;border:1.5px solid #ff8fa3}
.dl-cal .lg i.h{background:#a9a6a2;transform:rotate(45deg) scale(.8)}

/* 왜 그렇게 봤냐면 */
.dl-why{display:block;margin:4px 0 0;padding:6px 0;background:none;border:0;font:inherit;font-size:13px;color:var(--sc-ink3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.dl-why[aria-expanded="true"]{color:var(--sc-ink2)}
.dl-whyT{display:none;margin:2px 0 8px;padding-left:10px;border-left:2px solid #2c2830;font-size:13.5px;line-height:1.65;color:var(--sc-ink2)}
.dl-whyT.on{display:block}
.dl-whyT b{color:var(--sc-ink);font-weight:700}

/* 달마다 적은 줄 */
.dl-mos{margin:6px 0 18px;border-top:1px solid rgba(255,255,255,.08)}
.dl-mo{border-bottom:1px solid rgba(255,255,255,.08)}
.dl-mo .h{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 2px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dl-mo .m{flex:none;width:76px;white-space:nowrap;font-family:'Nanum Pen Script',cursive;font-size:27px;line-height:1;color:#fff}
.dl-mo .m small{display:block;margin-top:3px;font-family:var(--sans);font-size:12px;color:var(--sc-ink3)}
.dl-mo .t{flex:1;min-width:0;font-size:15px;line-height:1.4;color:var(--sc-ink)}
.dl-mo .t em{font-style:normal;color:var(--sc-ink2);margin-right:6px}
.dl-mo .t i{font-style:normal;font-family:'Nanum Pen Script',cursive;font-size:21px;line-height:1;color:var(--sc-pink);margin-left:8px;white-space:nowrap}
.dl-mo.lo .t i{color:#a9a6a2}
.dl-mo .s{flex:none;min-width:34px;text-align:right;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:24px;color:var(--sc-ink2)}
.dl-mo.hi .s{color:var(--sc-pink)}
.dl-mo .b{display:none;padding:0 2px 14px 88px}
.dl-mo.open .b{display:block}
.dl-mo .b .dl-p{font-size:15.5px;line-height:1.8;margin-bottom:10px}
.dl-tip{margin:0 0 4px;font-size:15px;line-height:1.5;color:var(--sc-ink)}
.dl-tip b{display:inline-block;margin-right:8px;font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:22px;color:var(--peach-2)}

/* 고백하기 좋은 날 */
.dl-days{margin:4px 0 6px}
.dl-dy{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(255,217,204,.16)}
.dl-dy:first-child{padding-top:4px}
.dl-dy>b{flex:none;min-width:84px;white-space:nowrap;font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:36px;line-height:1;color:#fff}
.dl-dy span{font-size:15px;line-height:1.5;color:var(--sc-ink)}
.dl-dy small{display:block;font-size:12.5px;color:var(--sc-ink2);margin-bottom:2px}

/* 끌리는 사람 · 끌려오는 사람 */
.dl-two{margin:8px 0 6px}
.dl-two .p{position:relative;padding:2px 0 2px 16px;border-left:2px solid var(--sc-pink)}
.dl-two .p.sk{border-left-color:rgba(255,217,204,.55)}
.dl-two .p small{display:block;font-size:13px;color:var(--sc-ink2)}
.dl-two .p b{display:block;margin:6px 0 2px;font-family:var(--brush);font-weight:400;font-size:46px;line-height:1;color:#fff}
.dl-two .p b span{font-family:var(--bmj);font-size:20px;margin-left:4px;color:var(--sc-ink)}
.dl-two .p em{display:block;font-style:normal;font-size:13px;color:var(--sc-pink)}
.dl-two .p.sk em{color:var(--peach-2)}
.dl-two .p p{margin:8px 0 0;font-family:var(--bmj);font-size:16px;line-height:1.75;color:#ebe3dc}
.dl-two .dl-pen{margin:18px 0 14px 16px}

/* 도화 살리는 색 · 향 · 시간 · 장소 */
.dl-kit{margin:4px 0 4px}
.dl-kit .k{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px dashed rgba(255,217,204,.16)}
.dl-kit .k>b{flex:none;width:58px;white-space:nowrap;font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:27px;line-height:1;color:var(--peach-2)}
.dl-kit .k span{font-size:15.5px;line-height:1.55;color:#ebe3dc}
.dl-kit .sws{display:flex;gap:6px;margin-bottom:6px}
.dl-kit .sw{display:inline-block;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}

/* 조심해야 할 인연 */
.dl-warn b{background:none;text-decoration:underline wavy rgba(255,143,163,.75);text-decoration-thickness:1.5px;text-underline-offset:5px}

/* 끝맺음 */
.dl-rule{height:1px;margin:40px 0 28px;background:linear-gradient(90deg,rgba(255,217,204,0),rgba(255,217,204,.3),rgba(255,217,204,0))}
.dl-sign{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:22px}
.dl-sign b{font-family:'Nanum Pen Script',cursive;font-weight:400;font-size:36px;color:#fff}
.dl-sign .seal{display:grid;place-items:center;width:44px;height:44px;background:#c23a3a;color:#fff3ef;font-style:normal;font-family:var(--brush);font-size:17px;line-height:1;transform:rotate(-5deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);opacity:.92}
.dl-note{margin:20px 0 0;font-size:12.5px;line-height:1.6;color:var(--sc-ink3)}

/* 다시 대화 */
.dl-ph{width:210px;max-width:100%;height:262px;background:#1c1c21 center 20%/cover no-repeat;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.dl-qr{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:16px 0 0}
.dl-qr button{min-height:46px;padding:0 16px;border:1px solid var(--sc-me);background:none;color:var(--sc-me);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.dl-qr button.f{background:var(--sc-pink);border-color:var(--sc-pink);color:#1a1213}
.dl-foot{margin:26px 22px 0;padding-bottom:20px;font-size:12.5px;line-height:1.6;color:var(--sc-ink3);text-align:center}
.dl-bar{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:rgba(10,10,13,.94);border-top:1px solid #1f1f24}
.dl-bar .in{flex:1;min-width:0;height:42px;display:flex;align-items:center;padding:0 12px;background:#1c1c21;border:0;font:inherit;font-size:14px;color:#8a8682;text-align:left;cursor:pointer}
.dl-bar .go{width:42px;height:42px;border-radius:50%;border:0;background:#ff8fa3;display:grid;place-items:center;flex:none;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .dl .ink,.dl .pop,.dl-th>.dl-row,.dl-th>.dl-sys,.dl-th>.dl-day,.dl-qr,.dl-paper,.dl-paper.fold{opacity:1;transform:none;transition:none;-webkit-mask-image:none;mask-image:none}
  .dl .dl-cal.ink,.dl .dl-cal.ink.on{transform:rotate(-.8deg)}
  .dl-vm .po{animation:none}.dl-sys#dhst i{animation:none}
  .dl-cal .c>b svg path,.dl-cal.on .c>b svg path{transition:none;stroke-dashoffset:0}
}
/* 결제 뒤 상세(premkit) — 어두운 판 */
#dprem.pkx{--pk-card:#141418;--pk-line:rgba(255,255,255,.1);--pk-acc:#ff8fa3;--pk-ink:#f2f0ee;--pk-ink2:#a9a6a2;--pk-ink3:#6e6b68;margin-top:30px}
#dprem.pkx.dark .pk-sec,#dprem.pkx.dark .pk-st,#dprem.pkx.dark .pk-cv{margin:14px 0 0}
#dprem.pkx .pk-sec>h3{font-size:16px}
#dprem.pkx .pk-row .pk-tag{color:#1a1213}
@media (prefers-reduced-motion:reduce){.sc .row,.sc .qr{transition:none}.sc .memo .gz svg path{animation:none;stroke-dashoffset:0}.sc .gg i{transition:none}.sc .typing i{animation:none}}