[hidden]{display:none!important}
/* 꿈보다 해몽 — 밤하늘 남색 · 한지 아이보리 · 금 */
:root{
  --night:#0f1b33; --night2:#16264a; --panel:#f7f1e3; --panel2:#fffaf0;
  --ink:#241f18; --muted:#7a6f5d; --gold:#d9b45b; --gold-d:#b3903a; --red:#c0504d;
  --serif:"Gowun Batang",serif; --sans:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;word-break:keep-all}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:rgba(15,27,51,.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(217,180,91,.25)}
.brand{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--gold)}
.quota{font-size:13px;color:#cfc4a6}

/* 히어로 */
.hero{position:relative;min-height:560px;height:86svh;max-height:820px;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,51,.1) 30%,var(--night) 96%)}
.hero-copy{position:relative;z-index:2;padding:44px 22px 26px;color:#f6efe0;text-align:center;width:100%}
.hero-copy h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,7vw,44px);line-height:1.3;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-copy p{margin:12px 0 0;color:#d8ceb4;font-size:15.5px}

.wrap{max-width:560px;margin:0 auto;padding:18px 16px 70px;display:grid;gap:14px}
.card{background:var(--panel);border-radius:16px;padding:22px 20px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
textarea{width:100%;border:1.5px solid #d8cbaa;border-radius:12px;background:var(--panel2);padding:13px 14px;
  font-family:var(--sans);font-size:16px;color:var(--ink);resize:vertical;min-height:96px}
textarea:focus{outline:2px solid var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}
.chips button{border:1px solid #d3c39c;background:transparent;border-radius:999px;padding:7px 15px;letter-spacing:.02em;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);cursor:pointer}
.chips button:active{background:#efe5cc}
.cta{display:block;width:100%;margin-top:14px;border:1px solid rgba(201,169,97,.5);border-radius:14px;padding:16px;cursor:pointer;
  background:linear-gradient(180deg,#1c2650,#111834);color:var(--gold);font-family:var(--serif);font-weight:700;font-size:18px;
  letter-spacing:.18em;text-indent:.18em;box-shadow:0 10px 26px rgba(7,10,22,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.cta:focus-visible,.ghost:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ghost{border:1px solid #cbbd99;background:transparent;border-radius:12px;padding:13px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.02em;
  transition:background .15s ease,border-color .15s ease}
.ghost:hover{background:rgba(201,169,97,.08);border-color:#b3a37c}
.err{min-height:20px;margin:8px 0 0;color:var(--red);font-size:14px}

/* 로딩 */
.loading{text-align:center;padding:44px 20px}
.moon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4df9c,var(--gold) 65%,var(--gold-d));
  animation:breathe 1.6s ease-in-out infinite;box-shadow:0 0 34px rgba(217,180,91,.55)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.loading p{color:var(--muted);font-family:var(--serif)}

/* 결과 */
.res-head{text-align:center;padding-top:26px}
.res-img{width:150px;height:150px;object-fit:contain;margin:0 auto 6px;display:block}
.res-grade{display:flex;justify-content:center;align-items:center;gap:10px;margin:6px 0 4px}
.badge{font-family:var(--serif);font-weight:700;font-size:15px;background:var(--night);color:var(--gold);border-radius:999px;padding:5px 14px}
.badge.bad{background:#5a2626;color:#f1c8c8}
.score{font-size:14px;color:var(--muted)}
.res-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,6vw,30px);margin:6px 0 2px;line-height:1.35}
.res-title{margin:0;color:var(--muted);font-size:14px}
h3{font-family:var(--serif);font-size:16px;margin:14px 0 6px;color:var(--gold-d)}
.card h3:first-child{margin-top:0}
.card p{margin:0 0 4px}

.bars{display:grid;gap:9px;margin:4px 0 16px}
.bar{display:grid;grid-template-columns:38px 1fr 34px;gap:10px;align-items:center;font-size:14px}
.bar i{display:block;height:12px;background:#e6dcc2;border-radius:6px;overflow:hidden}
.bar b{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-d));border-radius:6px;width:0;transition:width .8s ease}
.bar em{font-style:normal;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.lucky{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.balls{display:flex;gap:6px;flex-wrap:wrap}
.balls span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--night);color:var(--gold);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.item{font-family:var(--serif);font-weight:700}
.advice{margin-top:14px!important;padding:12px 14px;background:var(--panel2);border-left:3px solid var(--gold);border-radius:8px;font-size:15px}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.actions .cta,.actions .ghost{margin:0;height:56px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:16.5px;font-weight:700;letter-spacing:.12em;text-indent:.12em;
  border-radius:14px;padding:0 12px}
.bm{padding:16px 18px;display:grid;gap:9px}
.bm .ghost{height:46px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  font-size:14.5px;letter-spacing:.03em;padding:0 12px}
.bm-row{display:flex;justify-content:space-between;font-size:14.5px}
.ghost.sm{padding:10px;font-size:13.5px}
.ghost.gold{border-color:var(--gold);color:var(--gold-d);font-weight:700}

footer{padding:30px 20px 46px;text-align:center;color:#6f788f;font-size:12.5px;line-height:1.9}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6px;margin-bottom:12px}
.foot-links a{color:#98a2b8;text-decoration:none;padding:5px 9px;border-radius:8px;font-size:12.5px;
  letter-spacing:.01em;transition:color .15s ease,background .15s ease}
.foot-links a:hover{color:var(--gold);background:rgba(201,169,97,.09)}
.foot-links i{font-style:normal;color:#39415a;font-size:10px;user-select:none}
.foot-brand{color:#5c6579;font-size:12px}
@media(prefers-reduced-motion:reduce){.moon{animation:none}.bar b{transition:none}}

/* 남색 바탕 위 고스트 버튼은 밝은 글자 */
.actions .ghost{color:#e8dcb2;border:1px solid rgba(201,169,97,.5);background:rgba(253,250,240,.05)}
.actions .ghost:hover{background:rgba(201,169,97,.12);border-color:rgba(201,169,97,.75)}

/* ── 달래 대화 스트림 ── */
#talk{display:grid;gap:12px}
.msg{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.msg.show{opacity:1;transform:none}
.avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);
  background:var(--night2);display:flex;align-items:center;justify-content:center;font-size:26px}
.avatar img{width:100%;height:100%;object-fit:cover}
.bubble{background:var(--panel);border-radius:4px 16px 16px 16px;padding:14px 16px;
  box-shadow:0 3px 14px rgba(0,0,0,.28);font-size:15.5px}
.bubble.accent{font-family:var(--serif);font-weight:700;font-size:17px}
.msg .who{grid-column:2;margin:-6px 0 2px;font-size:12px;color:#9aa4bd}
.typing{display:inline-flex;gap:5px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:#b3a67f;animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* 부적 카드 (대화 중간에 달래가 건네는) */
.charm{grid-column:1/-1;background:var(--panel);border:2px solid var(--gold);border-radius:16px;
  padding:20px;position:relative;opacity:0;transform:translateY(10px);transition:all .45s ease}
.charm.show{opacity:1;transform:none}
.charm::before{content:"부적";position:absolute;top:-11px;left:18px;background:var(--gold);color:var(--night);
  font-family:var(--serif);font-weight:700;font-size:12px;border-radius:999px;padding:2px 12px;letter-spacing:.2em}
.charm-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.charm-head img{width:64px;height:64px;object-fit:contain}
@media(prefers-reduced-motion:reduce){.msg,.charm{transition:none}}

.proof{margin:14px auto 0;display:inline-block;padding:6px 16px;border:1px solid rgba(217,180,91,.4);
  border-radius:999px;background:rgba(15,27,51,.5);color:var(--gold);font-size:13px}

/* ── 웹툰 뷰어 ── */
.webtoon{background:linear-gradient(180deg,#0f1b33,#0b1428 40%,#0f1b33)}
#strip{max-width:720px;margin:0 auto;overflow:hidden}
.panel{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.panel.show{opacity:1;transform:none}
.cut{position:relative;margin:0;overflow:hidden}
.cut img{width:100%;display:block}
.cut .fade-b{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,#0f1b33)}
.cut .fade-t{position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(0deg,transparent,#0f1b33)}
.speech{position:relative;max-width:520px;margin:26px auto;padding:20px 24px;background:#fdfaf0;color:var(--ink);
  border-radius:22px;font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.6;text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
.speech::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  border:12px solid transparent;border-bottom-color:#fdfaf0;border-top:0}
.narr{max-width:560px;margin:22px auto;padding:20px 24px;border:1px solid rgba(217,180,91,.45);
  background:rgba(15,23,45,.72);color:#efe6d2;border-radius:6px;font-size:15.5px;line-height:1.85;backdrop-filter:blur(4px)}
.narr b{color:var(--gold);font-family:var(--serif)}
.avatar-cut{width:150px;height:150px;border-radius:50%;overflow:hidden;margin:30px auto 0;
  border:3px solid var(--gold);box-shadow:0 0 34px rgba(217,180,91,.35)}
.avatar-cut img{width:100%;height:100%;object-fit:cover}
.charm-wrap{max-width:560px;margin:10px auto 26px;padding:0 16px}
.webtoon .charm{opacity:1;transform:none}
.w-space{height:38px}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}

/* ── 캐릭터 퍼스트 히어로 v2 ── */
.hero2{min-height:560px;align-items:stretch}
.hero-bunny{position:absolute;right:7%;top:13%;width:96px;z-index:2;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));animation:bunnyFloat 3.4s ease-in-out infinite}
@keyframes bunnyFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.hero-bunny{animation:none}}
.v-title{position:absolute;left:18px;top:34px;z-index:2;writing-mode:vertical-rl;
  font-family:"Nanum Brush Script",var(--serif);font-size:clamp(72px,19vw,116px);line-height:1.06;
  color:#f6efe0;text-shadow:0 3px 24px rgba(0,0,0,.65)}
.seal-stamp{position:absolute;left:26px;top:48%;z-index:2;width:46px;padding:7px 5px;text-align:center;
  background:#b8382b;color:#fdf3e3;font-family:var(--serif);font-weight:700;font-size:15px;line-height:1.25;
  border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.hero-greet{position:relative;z-index:3;margin-top:auto;width:100%;padding:0 18px 26px}
.hero-speech{margin:0 auto;max-width:420px;font-size:17px}
.hero-speech small{display:block;margin-top:6px;font-family:var(--sans);font-weight:500;font-size:13px;color:#8a7d63}
.hero2 .hero-veil{background:linear-gradient(180deg,rgba(15,27,51,.05) 40%,var(--night) 97%)}

/* 사례 리스트 */
.cases ul{list-style:none;margin:0;padding:0}
.cases li{display:flex;align-items:baseline;gap:8px;padding:9px 2px;border-bottom:1px dashed #ddd0ae;font-size:14.5px}
.cases li:last-child{border-bottom:0}
.cases .cg{flex:0 0 auto;font-family:var(--serif);font-weight:700;font-size:13px;color:var(--gold-d)}
.cases .cg.bad{color:var(--red)}
.cases .co{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 만화 컷 프레임 + 손글씨 효과음 */
.comic-cut{max-width:560px;margin:30px auto;padding:0 16px}
.comic-frame{position:relative;border:3px solid #f2ead6;background:#0d1730;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.45)}
.comic-frame img{width:100%;display:block}
.sfx{position:absolute;top:10px;right:14px;font-family:"Nanum Brush Script",cursive;font-size:44px;
  color:#f6efe0;text-shadow:0 2px 12px rgba(0,0,0,.7);transform:rotate(-8deg)}

/* ── 웹툰 캔버스 v2: 여백 제로, 텍스트는 그림 위에 ── */
#strip{display:block}
#strip .panel{margin:0}
.cut{position:relative;line-height:0}
.cut img{width:100%;display:block}
.cut-ov{position:absolute;left:0;right:0;line-height:1.6;padding:18px 16px}
.ov-bottom{bottom:0;padding-top:70px;background:linear-gradient(180deg,transparent,rgba(7,11,22,.82) 62%)}
.ov-bubble{position:relative;max-width:440px;margin:0 auto;padding:15px 20px;background:rgba(253,250,240,.96);
  color:var(--ink);border-radius:18px;font-family:var(--serif);font-weight:700;font-size:16.5px;text-align:center;
  box-shadow:0 4px 18px rgba(0,0,0,.4)}
.ov-bubble::after{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  border:11px solid transparent;border-bottom-color:rgba(253,250,240,.96);border-top:0}
.ov-text{max-width:520px;margin:0 auto;color:#f3ead6;font-size:15.5px;text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.8);font-family:var(--serif);font-weight:700}
/* 긴 풀이: 검은 블러 스크림 — 컷과 컷 사이를 잇는 띠 */
.scrim{width:100%;padding:30px 22px;background:rgba(8,12,24,.86);backdrop-filter:blur(10px);
  color:#ece3cd;font-size:15.5px;line-height:1.9}
.scrim>b{display:block;max-width:560px;margin:0 auto 10px;color:var(--gold);
  font-family:var(--serif);font-size:14px;letter-spacing:.14em}
.scrim{text-align:left}
.scrim:not(.charm-strip){text-align:justify}
.scrim:not(.charm-strip){display:block}
.scrim:not(.charm-strip)>b+*{margin:0 auto}
.scrim:not(.charm-strip){padding-left:max(22px,calc(50% - 280px));padding-right:max(22px,calc(50% - 280px))}
.charm-strip{padding:26px max(16px,calc(50% - 280px)) 30px}
.charm-strip .charm{margin:0}
/* 만화 컷 프레임: 풀블리드 */
.comic-cut{max-width:none;margin:0;padding:0}
.comic-frame{border-left:0;border-right:0;border-top:3px solid #f2ead6;border-bottom:3px solid #f2ead6;box-shadow:none}
/* 부적 카드는 밝은 패널 — 스크림 글자색 상속 차단 */
.charm-strip .charm{color:var(--ink)}
.charm-strip .charm .item{color:var(--ink)}
.charm-strip .charm .bar em{color:var(--muted)}
.charm-strip .charm h3{color:var(--gold-d)}

/* ── 디테일 폴리싱 ── */
::selection{background:rgba(217,180,91,.35)}
.top{padding-top:calc(env(safe-area-inset-top,0px) + 12px);box-shadow:0 2px 14px rgba(0,0,0,.25)}
.quota.pill{border:1px solid rgba(217,180,91,.35);border-radius:999px;padding:4px 12px;color:var(--gold);
  background:rgba(217,180,91,.08)}
/* 세로 타이틀 자간·위치 미세조정 */
.v-title{letter-spacing:.12em;line-height:1.02;top:30px;left:20px}
.seal-stamp{top:50%}
/* 히어로 말풍선: 꼬리 없는 안내형 */
.speech.no-tail::before{display:none}
.speech.no-tail{border-radius:16px}
/* 버튼 프레스 상태 */
.cta{transition:transform .08s ease,filter .15s ease}
.cta:active{transform:scale(.985)}
.cta:disabled{opacity:.55;cursor:default}
.ghost{transition:background .15s ease}
.ghost:active{background:rgba(0,0,0,.06)}
.chips button{transition:transform .08s ease,background .15s ease}
.chips button:active{transform:scale(.96)}
/* 스크림 타이포: 저스티파이 제거(한글 리버 방지), 왼끝 정렬 */
.scrim:not(.charm-strip){text-align:left}
/* 부적 카드 촉감 */
.charm{border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.35)}
/* 토스트 */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%) translateY(16px);
  background:rgba(15,23,45,.94);color:#f3ead6;border:1px solid rgba(217,180,91,.4);border-radius:999px;
  padding:11px 20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:60}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 사례 리스트 호버 */
.cases li{transition:background .15s ease}
@media(hover:hover){.cases li:hover{background:rgba(217,180,91,.07)}}
/* 히어로 별 반짝임 (은은하게) */
.hero-veil::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(2px 2px at 18% 22%,rgba(255,240,200,.9),transparent 60%),
             radial-gradient(1.6px 1.6px at 78% 14%,rgba(255,240,200,.8),transparent 60%),
             radial-gradient(1.4px 1.4px at 64% 38%,rgba(255,240,200,.7),transparent 60%);
  animation:twinkle 3.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.hero-veil::after{animation:none}}

/* ── PWA 앱 프레임: PC에서도 중앙 칼럼 고정 ── */
html{background:#080d1c;min-height:100%}
body{max-width:520px;margin:0 auto;position:relative;
  box-shadow:0 0 90px rgba(0,0,0,.75)}
@media(min-width:561px){
  html{background:
    radial-gradient(900px 500px at 50% -10%,rgba(217,180,91,.06),transparent 60%),
    radial-gradient(2px 2px at 20% 30%,rgba(244,223,156,.25),transparent 60%),
    radial-gradient(2px 2px at 80% 60%,rgba(244,223,156,.2),transparent 60%),
    #080d1c}
  body{border-left:1px solid rgba(217,180,91,.14);border-right:1px solid rgba(217,180,91,.14)}
}
/* 스트립·히어로가 칼럼 폭을 그대로 쓰도록 */
#strip{max-width:none}
.hero2{min-height:520px}

/* ── 심리스 캔버스: 흰 프레임 제거·톤 통일 ── */
.comic-frame{border:0!important}
.mid-cut{position:relative}
.mid-cut img{width:100%;display:block}
.mid-cut .fade-t{position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(0deg,transparent,rgba(9,13,25,.95))}
.mid-cut .fade-b{position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(180deg,transparent,rgba(9,13,25,.95))}
.mid-cut .sfx{position:absolute;top:16px;right:16px}
.cut .fade-b{height:120px;background:linear-gradient(180deg,transparent,rgba(9,13,25,.7) 55%,#090d19)}
.cut .fade-t{height:80px;background:linear-gradient(0deg,transparent,rgba(9,13,25,.7) 55%,#090d19)}
.cut .fade-t{background:linear-gradient(0deg,transparent,rgba(9,13,25,.96))}
.scrim{background:rgba(9,13,25,.92)}
.webtoon{background:linear-gradient(180deg,var(--night) 0,#090d19 140px);position:relative;overflow:hidden}

/* ── 세로 패널·말풍선 시스템 ── */
.ov-top{top:0;bottom:auto;padding-bottom:18px;padding-top:calc(env(safe-area-inset-top,0px) + 18px);
  background:linear-gradient(0deg,transparent,rgba(9,13,25,.8) 60%)}
.ov-bubble.dotted{background:rgba(253,250,240,.97);border:2px dashed #b9a06a;border-radius:20px}
.sfx-in{position:static;order:-1;align-self:flex-end;margin:0 4% 10px 0;font-family:"Nanum Brush Script",cursive;font-size:52px;
  color:#f6efe0;text-shadow:0 2px 14px rgba(0,0,0,.8);transform:rotate(-10deg)}
/* 세로 컷은 화면을 시원하게 채운다 */
.cut img{width:100%}

/* ── 타이포 스케일업 (다크 배경 가독 보정) ── */
body{font-size:17px}
.scrim{font-size:18px;line-height:1.95;color:#f3ecdb;padding-top:34px;padding-bottom:34px}
.scrim>b{font-size:17px;margin-bottom:14px;letter-spacing:.1em}
.ov-bubble{font-size:19px;padding:17px 22px;max-width:480px}
.ov-text{font-size:18px;line-height:1.75;max-width:540px}
.speech{font-size:19px}
.hero-speech{font-size:18px}
.hero-speech small{font-size:14px}
.hero-copy p,.dek{font-size:17px}
textarea{font-size:17px}
.chips button{font-size:14.5px;padding:8px 14px}
.cta{font-size:19px;padding:16px}
.charm-strip .charm h2{font-size:24px!important}
.charm .bars .bar{font-size:15.5px}
.balls span{width:36px;height:36px;font-size:16px}
.item{font-size:17px}
.advice{font-size:16.5px}
.bm-row{font-size:15.5px}
.ghost.sm{font-size:14.5px}
footer{font-size:13.5px}
label{font-size:13.5px}
.err{font-size:15px}
.loading p{font-size:16.5px}
.sfx-in{font-size:60px}

/* ── 사례 리스트: 콘텐츠 카드형 (청월당 스타일) ── */
.cases li{display:block;padding:13px 4px;font-size:15.5px;line-height:1.5}
.cases .cg{display:inline-block;margin-bottom:3px;font-size:14px}
.cases .co{display:block;white-space:normal;color:var(--ink);font-weight:600;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 입력 가이드 */
.tip{margin:10px 0 2px;border:1px dashed #d0c19a;border-radius:10px;background:var(--panel2)}
.tip summary{cursor:pointer;padding:11px 14px;font-size:14.5px;font-weight:700;color:var(--gold-d);list-style:none}
.tip summary::-webkit-details-marker{display:none}
.tip ol{margin:0;padding:0 16px 13px 34px;font-size:14.5px;color:var(--muted);line-height:1.9}

/* ── 말풍선: 패널 여백 존 앵커 + 일러스트풍 형태 ── */
.ov-bubble{max-width:64%;font-size:17px;padding:14px 18px;line-height:1.55;
  border-radius:48% 52% 50% 50% / 58% 55% 45% 42%;box-shadow:0 5px 20px rgba(0,0,0,.45)}
.ov-bubble.dotted{border-radius:50% 50% 46% 54% / 52% 48% 55% 45%}
.ov-bubble::after{display:none}
.cut-ov{display:flex;padding:22px 18px}
.ov-tr{top:7%;bottom:auto;justify-content:flex-end;background:none}
.ov-tl{top:7%;bottom:auto;justify-content:flex-start;background:none}
.ov-bl{bottom:3%;top:auto;flex-direction:column;justify-content:flex-end;align-items:flex-start;background:none}
.ov-br{bottom:3%;top:auto;justify-content:flex-end;background:none}
.ov-lm{top:0;bottom:0;justify-content:flex-start;align-items:center;background:none}
.ov-tc{top:4%;bottom:auto;justify-content:center;background:none}
.ov-bc{bottom:4%;top:auto;justify-content:center;background:none}
/* 코너 구역은 화면 절반쯤이라 말풍선이 넘치면 의미가 없다 */
.ov-tl .ov-bubble,.ov-tr .ov-bubble,.ov-bl .ov-bubble,.ov-br .ov-bubble{max-width:62%}
.ov-tc .ov-bubble,.ov-bc .ov-bubble{max-width:84%}
.ov-lm .ov-text{max-width:52%;text-align:left;margin:0}
/* 그라데이션은 텍스트 뒤에만 살짝 */
.ov-tr .ov-bubble,.ov-tl .ov-bubble,.ov-bl .ov-bubble,.ov-br .ov-bubble{backdrop-filter:none}

/* ── 말풍선 확대·숨통 ── */
.ov-bubble{max-width:78%;font-size:18px;line-height:1.7;padding:20px 28px}
.ov-bubble.dotted{padding:20px 28px}
.speech{padding:22px 28px}

/* ── 콘텐츠 보호 (억지력 계층) ── */
.hero,.webtoon,#strip,.res-img,.cut img{-webkit-user-select:none;user-select:none}
.cut img,.hero-img{-webkit-user-drag:none;pointer-events:none}

/* ── 시네마틱 모션: 컷 숨쉬기(스크롤 시차) ── */
.cut{overflow:hidden}
.cut img{will-change:transform;transform:translateY(var(--par,0)) scale(1.07);transition:none}
@media(prefers-reduced-motion:reduce){.cut img{transform:none}}

/* ── 구름 레이어 ── */

/* ── 말풍선 v3: 타원 폐기 → 넉넉한 유기형 라운드 사각 ── */
.ov-bubble{max-width:86%;font-size:19px;line-height:1.75;padding:24px 34px;
  border-radius:30px 38px 34px 42px / 38px 30px 42px 34px}
.ov-bubble.dotted{border-radius:36px 30px 40px 32px / 32px 40px 30px 38px}
.speech{font-size:19px;padding:24px 32px;border-radius:26px}
.hero-speech{max-width:460px}

/* ── 심볼 파츠 패널 (민화 일러스트 삽입) ── */
.sym-panel{padding:34px 20px 26px;background:rgba(9,13,25,.92);text-align:center}
.sym-panel img{max-height:250px;max-width:70%;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
.sym-panel .sym-label{display:block;margin-top:14px;font-family:var(--serif);font-weight:700;
  font-size:16px;color:var(--gold);letter-spacing:.14em}

/* 인트로 화자 칩 */
.speaker{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.speaker img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 10%;border:1.5px solid #c9a961}
.speaker b{font-size:14px;letter-spacing:.06em;color:#8a6d3b}

/* 해몽 중 — 밤 장면 */
.load-scene{position:relative;overflow:hidden;min-height:68vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;margin:18px 0;border-radius:26px;
  background:radial-gradient(ellipse at 50% 26%,#182350 0%,#0b1020 62%)}
.load-stars{position:absolute;inset:0;background-image:
  radial-gradient(1.4px 1.4px at 18% 24%,rgba(255,248,220,.9),transparent),
  radial-gradient(1px 1px at 72% 16%,rgba(255,248,220,.7),transparent),
  radial-gradient(1.2px 1.2px at 84% 52%,rgba(255,248,220,.8),transparent),
  radial-gradient(1px 1px at 30% 70%,rgba(255,248,220,.6),transparent),
  radial-gradient(1.3px 1.3px at 58% 82%,rgba(255,248,220,.75),transparent),
  radial-gradient(1px 1px at 8% 55%,rgba(255,248,220,.5),transparent);
  animation:twinkle 4.5s ease-in-out infinite}
.load-moonwrap{position:relative;width:132px;height:132px}
.load-moon{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffedb0,#eccb72 58%,#bb913f);
  box-shadow:0 0 54px 16px rgba(236,203,114,.32);animation:moonbreath 3.4s ease-in-out infinite}
.load-dalrae{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:88px;height:88px;
  border-radius:50%;object-fit:cover;object-position:50% 8%;border:2px solid #c9a961;
  box-shadow:0 6px 20px rgba(0,0,0,.5)}
.load-msg{font-family:var(--serif);font-size:19px;color:#f2e8cf;letter-spacing:.02em;
  animation:msgpulse 2.2s ease-in-out infinite;margin:6px 0 0}
.load-sub{font-size:13.5px;color:#93a0bf;margin:0}
@keyframes moonbreath{50%{transform:scale(1.045);box-shadow:0 0 72px 24px rgba(236,203,114,.48)}}
@keyframes msgpulse{50%{opacity:.62}}
@keyframes twinkle{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.load-moon,.load-msg,.load-stars{animation:none}}

/* 로딩: SD 달래 프레임 */
.load-sd{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:168px;max-width:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));animation:sdbob 1.6s ease-in-out infinite;z-index:2}
.load-sd.pop{animation:sdpop .45s cubic-bezier(.34,1.56,.64,1),sdbob 1.6s ease-in-out .45s infinite}
.load-moonwrap{width:150px;height:150px}
.load-moonwrap .load-dalrae{display:none}
.load-moonwrap.nosd .load-dalrae{display:block}
.load-moonwrap.nosd .load-sd{display:none}
@keyframes sdbob{50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes sdpop{0%{transform:translateX(-50%) scale(.82)}100%{transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.load-sd{animation:none}}

/* 히어로: 달래 마중 스탠딩 */
.hero-dalrae{position:absolute;right:-20%;bottom:-2%;height:101%;width:auto;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 74%,transparent 98%);
  filter:drop-shadow(-10px 14px 34px rgba(0,0,0,.55));
  animation:heroFloat 6s ease-in-out infinite;transform-origin:bottom center}
@keyframes heroFloat{50%{transform:translateY(-11px) rotate(.5deg)}}
@media(prefers-reduced-motion:reduce){.hero-dalrae{animation:none}}

/* 한국어 조판: 어절 유지 + 고아 줄 방지 */
.scrim,.ov-text,.ov-bubble,.load-msg,.speech,.charm h2,.item,.advice{word-break:keep-all;overflow-wrap:anywhere}
.ov-text,.ov-bubble,.charm h2,.load-msg{text-wrap:balance}
.scrim{text-wrap:pretty}
.ov-lm .ov-text{max-width:58%}

/* 먹글씨 로고 */
.logo-cal{position:absolute;left:14px;top:26px;z-index:2;width:46%;max-width:250px;height:auto;
  filter:drop-shadow(0 3px 22px rgba(0,0,0,.75)) drop-shadow(0 0 2px rgba(0,0,0,.4));
  pointer-events:none;user-select:none}

/* 햄버거·드로어 */
.top-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:4.5px;width:38px;height:38px;
  padding:8px;background:none;border:1px solid rgba(201,169,97,.4);border-radius:10px;cursor:pointer}
.menu-btn span{display:block;height:1.6px;background:var(--gold);border-radius:2px}
.drawer-veil{position:fixed;inset:0;background:rgba(5,8,18,.55);backdrop-filter:blur(2px);z-index:40}
.drawer{position:fixed;top:0;bottom:0;width:300px;max-width:82vw;z-index:41;
  right:max(0px,calc((100vw - 520px)/2));
  background:linear-gradient(180deg,#131c3a,#0d1428);border-left:1px solid rgba(201,169,97,.25);
  box-shadow:-18px 0 50px rgba(0,0,0,.5);padding:18px 20px;display:flex;flex-direction:column;
  transform:translateX(14px);opacity:0;transition:transform .22s ease,opacity .22s ease}
.drawer.open{transform:none;opacity:1}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer-title{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--gold);letter-spacing:.08em}
.drawer-close{background:none;border:0;color:#8f97a6;font-size:26px;cursor:pointer;line-height:1;padding:4px}
.drawer-hi{font-family:var(--serif);font-size:14.5px;color:#cfc7b2;line-height:1.7;margin:0 0 12px}
.kakao-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;
  background:#FEE500;color:rgba(0,0,0,.85);border:0;border-radius:12px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600}
.kakao-btn:active{filter:brightness(.96)}
.drawer-profile{display:flex;align-items:center;gap:12px;padding:4px 0 8px}
.drawer-profile img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 8%;border:1.5px solid #c9a961}
.drawer-profile b{display:block;color:#f2e8cf;font-size:15.5px}
.drawer-profile small{color:#8f97a6;font-size:12px}
.drawer-nav{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid rgba(201,169,97,.18)}
.drawer-nav a{padding:14px 2px;color:#ddd6c4;font-size:15px;border-bottom:1px solid rgba(201,169,97,.12);
  display:flex;justify-content:space-between;align-items:center;text-decoration:none}
.drawer-nav a em{font-style:normal;font-size:11px;color:#8f97a6;border:1px solid rgba(143,151,166,.4);
  border-radius:999px;padding:1px 8px}
.drawer-foot{margin-top:auto;font-size:11.5px;color:#5f6878;text-align:center}

/* ══ 되묻기 · 심층 리딩 ══ */
.deep-gate{text-align:center;border:1px solid rgba(201,169,97,.32);border-radius:20px;
  background:linear-gradient(180deg,rgba(28,38,80,.55),rgba(9,13,25,.72))}
.deep-coin img{width:58px;height:58px;object-fit:cover;border-radius:50%;margin-bottom:8px;border:1.5px solid rgba(201,169,97,.5);filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.deep-title{display:block;font-family:var(--serif);font-size:20px;color:var(--gold);margin-bottom:8px}
.deep-desc{font-size:15.5px;color:#c9c2ae;line-height:1.75;margin-bottom:18px}
.deep-go{display:block;width:100%;height:56px;border:1px solid rgba(201,169,97,.55);border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#f0d087,#d9ab4e);color:#241a05;
  font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.08em}
.deep-go:disabled{opacity:.6;cursor:default;background:linear-gradient(180deg,#40485f,#2b3145);color:#cfc7b2}
.deep-sub{margin-top:10px;font-size:13px;color:#8f97a6}
.deep-sub b{color:var(--gold)}

.q-card{border-left:2px solid rgba(201,169,97,.45)}
.q-num{display:block;font-family:var(--mono,monospace);font-size:12px;color:#8f97a6;letter-spacing:.12em;margin-bottom:6px}
.q-text{font-family:var(--serif);font-size:19px;color:#f2e8cf;line-height:1.6;margin-bottom:16px}
.q-opts{display:flex;flex-direction:column;gap:8px}
.opt{width:100%;padding:14px 16px;text-align:left;cursor:pointer;
  background:rgba(253,250,240,.05);border:1px solid rgba(201,169,97,.28);border-radius:12px;
  color:#e8dcb2;font-family:var(--sans);font-size:15.5px}
.opt:hover{background:rgba(201,169,97,.14);border-color:rgba(201,169,97,.6)}
.opt.own{color:#9aa4c0;font-size:14.5px}
.q-own{display:flex;gap:8px;margin-top:4px}
.q-own input{flex:1;padding:14px;border-radius:12px;border:1px solid rgba(201,169,97,.35);
  background:rgba(9,13,25,.5);color:#f2e8cf;font-size:15.5px;font-family:var(--sans)}
.q-own .send{width:auto;white-space:nowrap;padding:14px 18px}
.q-ans{font-family:var(--serif);font-size:17px;color:var(--gold);margin-top:4px}

.deep-load{text-align:center;color:#9aa4c0;font-size:15px}
.dots{display:inline-flex;gap:5px;margin-right:10px;vertical-align:middle}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:dotp 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.18s} .dots i:nth-child(3){animation-delay:.36s}
@keyframes dotp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.deep-mark{display:inline-block;font-family:var(--serif);font-size:12.5px;color:#241a05;background:var(--gold);
  padding:3px 12px;border-radius:999px;letter-spacing:.1em;margin-bottom:12px}
.deep-open{border-top:1px solid rgba(201,169,97,.3)}
.deep-verdict{font-family:var(--serif);font-size:19px;color:#f6efe0;line-height:1.85;
  border-left:2px solid var(--gold);background:rgba(201,169,97,.06)}
.deep-remedy b{display:block;font-family:var(--serif);font-size:17px;color:var(--gold);margin-bottom:12px}
.deep-remedy dl{display:grid;grid-template-columns:76px 1fr;gap:10px 14px;margin:0;font-size:15.5px}
.deep-remedy dt{color:#8f97a6;font-size:13.5px;padding-top:2px}
.deep-remedy dd{margin:0;color:#e8dcb2;line-height:1.6}

/* ══ 복채 충전 시트 ══ */
.sheet-veil{position:fixed;inset:0;background:rgba(5,8,18,.62);backdrop-filter:blur(3px);z-index:50}
.coin-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,18px);width:100%;max-width:520px;z-index:51;
  background:linear-gradient(180deg,#151f42,#0d1428);border:1px solid rgba(201,169,97,.3);border-bottom:0;
  border-radius:26px 26px 0 0;padding:26px 22px 30px;box-shadow:0 -18px 60px rgba(0,0,0,.6);
  opacity:0;transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .24s ease;
  max-height:92vh;overflow-y:auto}
.coin-sheet.open{transform:translate(-50%,0);opacity:1}
.sheet-close{position:absolute;top:12px;right:16px;background:none;border:0;color:#8f97a6;font-size:28px;cursor:pointer;line-height:1;padding:4px}
.sheet-head{text-align:center;margin-bottom:20px}
.sheet-head img{width:56px;height:56px;object-fit:cover;border-radius:50%;margin-bottom:8px;border:1.5px solid rgba(201,169,97,.5)}
.sheet-head h2{font-family:var(--serif);font-size:22px;color:var(--gold);margin:0 0 8px}
.sheet-head p{font-size:14px;color:#c9c2ae;line-height:1.7;margin:0}
.sheet-head b{color:#e8dcb2}
.coin-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.coin-items li{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;
  padding:16px 18px;border:1px solid rgba(201,169,97,.28);border-radius:14px;cursor:pointer;
  background:rgba(253,250,240,.04);transition:background .15s ease,border-color .15s ease}
.coin-items li:hover{background:rgba(201,169,97,.12);border-color:rgba(201,169,97,.6)}
.coin-items li.best{border-color:rgba(232,197,107,.65);background:rgba(232,197,107,.09);margin-top:8px}
.coin-items li.pass{border-style:dashed;margin-top:6px}
.ci-tag{position:absolute;top:-10px;left:16px;background:var(--gold);color:#241a05;font-size:11px;font-weight:700;
  padding:2px 10px;border-radius:999px;letter-spacing:.04em}
.ci-n{font-family:var(--serif);font-size:17px;color:#f2e8cf;font-weight:700}
.ci-n em{font-style:normal;font-size:14px;color:var(--gold)}
.ci-d{grid-column:1;font-size:12.5px;color:#8f97a6}
.ci-p{grid-column:2;grid-row:1 / span 2;font-family:var(--serif);font-size:18px;color:var(--gold);white-space:nowrap}
.sheet-foot{margin-top:18px;text-align:center;font-size:12.5px;color:#8f97a6;line-height:1.8}
.sheet-foot a{color:#9aa4c0}

/* 광고 슬롯 (승인 후 코드 삽입) */
/* 광고 지면 — 비어 있으면 아예 안 보이고, 뜨기로 결정된 순간 높이를 먼저 잡는다.
   순서: hidden 해제(높이 확보) → 광고 스크립트 주입. 반대로 하면 본문이 밀린다(CLS) */
.ad-slot{margin:18px 0}
.ad-slot[hidden]{display:none}
.ad-slot:not([hidden]){min-height:280px}
.ad-slot:not([hidden])::before{content:"광고";display:block;font-size:11px;letter-spacing:.08em;color:#5c6579;margin-bottom:6px}

/* ══ 언어 선택기 ══
   원색 국기가 밤남색·금색 화면에서 튀지 않도록 금색 링 안에 넣고 채도를 살짝 눌렀다.
   헤더가 sticky라 결과를 스크롤하는 중에도 언제든 언어를 바꿀 수 있다. */
.lang-wrap{position:relative;display:inline-flex}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(15,27,51,.55);
  border:1px solid rgba(217,180,91,.35);border-radius:999px;padding:3px 9px 3px 4px;
  color:#cfc4a6;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.lang-btn:hover{border-color:rgba(217,180,91,.7);background:rgba(15,27,51,.85)}
.lang-btn .flag{width:18px;height:18px}
.flag{display:block;border-radius:50%;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(217,180,91,.55), 0 1px 3px rgba(0,0,0,.35)}
.flag svg{display:block;width:100%;height:100%;filter:saturate(.88)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;margin:0;padding:5px;
  list-style:none;min-width:158px;background:#101a30;border:1px solid rgba(217,180,91,.32);
  border-radius:13px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.lang-menu li{margin:0}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;
  background:none;border:0;border-radius:9px;color:#ddd6c4;font-size:14px;font-family:inherit;
  text-align:left;cursor:pointer;transition:background .13s ease,color .13s ease}
.lang-menu button:hover{background:rgba(217,180,91,.1);color:#f6efe0}
.lang-menu button .flag{width:21px;height:21px}
.lang-menu button[aria-current]{color:var(--gold,#e8c56b)}
.lang-menu button[aria-current]::after{content:"";margin-left:auto;width:6px;height:11px;
  border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-2px)}
@media(max-width:360px){ .lang-btn span{display:none} .lang-btn{padding:4px} }

/* ══ 언어별 히어로 워드마크 ══
   한국어는 붓글씨 이미지, 일본어는 세로쓰기(Yuji Syuku), 영어는 가로.
   세로쓰기는 한중일에서만 성립한다. */
.hero-mark{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero-mark .logo-cal{pointer-events:auto}
.h-title{position:absolute;left:22px;top:34px;z-index:2;
  font-family:"Nanum Brush Script",var(--serif);font-size:clamp(46px,12.5vw,74px);
  line-height:1.02;letter-spacing:.01em;color:#f6efe0;text-shadow:0 3px 24px rgba(0,0,0,.65)}
/* 비한국어 낙관은 우상단으로. 세로 글씨(夢うらない) 아래 남는 띠가 낙관 높이와 거의 같아
   그 자리에 넣으면 좁은 화면에서 말풍선과 부딪힌다. 낙관은 원래 그림 가장자리에 찍는 것이라
   우상단이 어색하지도 않다. */
:root[lang="ja"] .seal-stamp,
:root[lang="en"] .seal-stamp{left:auto;right:20px;top:26px}
.v-title.mark-ja{font-family:"Yuji Syuku",var(--serif);
  font-size:clamp(52px,13.5vw,82px);letter-spacing:.05em;line-height:1.1}

/* ── 폰에서 말풍선이 얼굴을 덮지 않게 ──
   세로 컷의 달래 얼굴은 대략 컷 높이의 28~42% 에 있고 말풍선은 7% 에서 시작한다.
   좁은 화면에서는 같은 글이 줄수가 늘어 아래로 자라므로, 타이포를 조여 높이를 줄인다.
   (글 자체의 길이 상한은 main.js 의 splitFirst 가 담당한다) */
@media(max-width:480px){
  .ov-bubble{max-width:86%;font-size:16px;line-height:1.55;padding:14px 18px}
  .ov-bubble.dotted{padding:14px 18px}
  .ov-tr,.ov-tl{top:5%}
  .cut-ov{padding:16px 12px}
}

/* ══════════ K웹툰 시각 문법 ══════════
   세로 스크롤 웹툰의 표현 관습을 CSS로 옮긴 것.
   원칙 세 가지
   1) 말풍선이 감정을 구분한다 (말·생각·외침·속삭임·나레이션)
   2) 여백이 시간이다. 세로 스크롤에서 거터가 길수록 그 장면이 오래 걸린다
   3) 컷 크기가 강약을 만든다. 전부 같은 크기면 리듬이 없다
   우리 톤은 미형·차분이라 효과음과 집중선은 아껴 쓴다. 남발하면 유치해진다. */

/* ── 말풍선 종류 ── */
/* 생각: 뭉게구름 테두리 + 방울 꼬리 */
.ov-bubble.think{border-radius:46% 54% 52% 48% / 56% 50% 50% 44%;
  background:rgba(253,250,240,.93);border:0}
.ov-bubble.think::before,.ov-bubble.think::after{content:"";position:absolute;
  background:rgba(253,250,240,.93);border-radius:50%}
.ov-bubble.think::before{width:14px;height:14px;left:16%;bottom:-16px}
.ov-bubble.think::after{width:8px;height:8px;left:11%;bottom:-28px;display:block}

/* 외침·급박: 가시 테두리 + 굵은 글씨 */
.ov-bubble.shout{background:#fdfaf0;font-weight:800;letter-spacing:-.01em;
  border-radius:6px;clip-path:polygon(
    0% 12%, 5% 6%, 12% 10%, 20% 2%, 29% 9%, 38% 1%, 47% 8%, 56% 0%, 65% 8%,
    75% 2%, 84% 9%, 92% 4%, 100% 11%, 96% 22%, 100% 34%, 95% 46%, 100% 58%,
    96% 70%, 100% 82%, 94% 90%, 100% 100%, 88% 96%, 78% 100%, 68% 95%,
    57% 100%, 46% 96%, 35% 100%, 24% 95%, 13% 100%, 4% 94%, 0% 100%,
    3% 86%, 0% 74%, 4% 62%, 0% 50%, 4% 38%, 0% 26%);
  padding:26px 30px}
.ov-bubble.shout::after{display:none}

/* 속삭임: 점선 테두리, 작고 흐리게 */
.ov-bubble.whisper{background:rgba(253,250,240,.88);border:1.5px dashed rgba(140,125,95,.7);
  font-size:15.5px;font-weight:400;color:#3d3629;padding:13px 18px;max-width:76%}
.ov-bubble.whisper::after{border-bottom-color:rgba(253,250,240,.72)}

/* 나레이션: 꼬리 없는 사각 박스. 달래의 말이 아니라 화면 밖 서술 */
.narr{max-width:88%;margin:0 auto;padding:14px 18px;background:rgba(9,13,25,.86);
  border-left:3px solid var(--gold,#e8c56b);color:#e6dfcd;font-family:var(--serif);
  font-size:16px;line-height:1.75;border-radius:4px}
.narr::after{display:none}

/* ── 패널 리듬 ── */
/* 임팩트: 한 줄만. 크게, 가운데, 숨 쉴 공간을 넉넉히 */
.panel.beat{background:rgba(9,13,25,.92);padding:46px 22px;text-align:center;
  font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.5;
  color:#f6efe0;text-shadow:0 2px 16px rgba(0,0,0,.6);letter-spacing:-.01em}

/* 여백: 순수한 정적. 스크롤하는 시간이 곧 장면의 길이다 */
.panel.gap{background:#090d19;height:64px}
.panel.gap.long{height:132px}
.panel.gap .dot{display:block;text-align:center;color:#39415a;font-size:20px;
  letter-spacing:.5em;padding-top:22px}

/* ── 효과음 ── */
/* 한글 자모 자체가 그림이 된다. 컷 가장자리에 크게 걸치고 기울인다 */
/* 효과음은 UI 텍스트가 아니라 그림에 그려 넣은 글씨여야 한다.
   그림자만 준 흰 글씨는 화면 위에 떠 보인다. 실제 웹툰 효과음은
   두꺼운 먹선 테두리 + 밝은 속칠 + 어긋난 그림자로 그림에 박혀 있다. */
.sfx-k{position:absolute;z-index:3;font-family:"Nanum Brush Script",cursive;
  font-weight:700;color:#fdfaf0;pointer-events:none;line-height:.86;white-space:nowrap;
  -webkit-text-stroke:5px #090d19;paint-order:stroke fill;
  text-shadow:
    4px 5px 0 rgba(9,13,25,.95),      /* 어긋난 그림자: 종이에 눌러 쓴 두께 */
    0 0 26px rgba(0,0,0,.55);          /* 장면 조명에 녹아들게 */
  letter-spacing:-.02em}
/* 획을 지원하지 않는 브라우저를 위한 대체 외곽선 */
@supports not (-webkit-text-stroke: 1px #000){
  .sfx-k{text-shadow:
    -3px -3px 0 #090d19, 3px -3px 0 #090d19, -3px 3px 0 #090d19, 3px 3px 0 #090d19,
    0 -3px 0 #090d19, 0 3px 0 #090d19, -3px 0 0 #090d19, 3px 0 0 #090d19,
    4px 5px 0 rgba(9,13,25,.95), 0 0 26px rgba(0,0,0,.55)}
}
.sfx-k.big{font-size:clamp(52px,14vw,92px);-webkit-text-stroke-width:6px}
.sfx-k.mid{font-size:clamp(40px,10.5vw,66px)}
.sfx-k.gold{color:#f0cf7a}
.sfx-p-tr{top:5%;right:4%}
.sfx-p-tl{top:6%;left:4%}
.sfx-p-br{bottom:10%;right:4%}
.sfx-p-bl{bottom:12%;left:4%}

/* ── 집중선: 놀람·전환에만. 아껴 쓴다 ── */
.cut.focus::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 38%,
    rgba(255,255,255,.075) 0deg .9deg, transparent .9deg 5.2deg);
  -webkit-mask-image:radial-gradient(circle at 50% 38%, transparent 52%, #000 88%);
  mask-image:radial-gradient(circle at 50% 38%, transparent 52%, #000 88%)}

/* ── 컷 크기 변주 ── */
/* 띠 컷: 눈·손만 잘라 보여주는 클로즈업. 기존 이미지를 잘라 쓰므로 새 그림이 필요 없다 */
.cut.strip-cut{aspect-ratio:16/6;overflow:hidden}
.cut.strip-cut img{height:100%;width:100%;object-fit:cover;object-position:50% 30%}
.cut.strip-cut .fade-t,.cut.strip-cut .fade-b{height:40px}

/* 인셋 컷: 좁혀서 여백을 만든다. 큰 컷 사이에 끼면 리듬이 생긴다 */
.cut.inset{width:86%;margin:14px auto;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}

@media(max-width:480px){
  .panel.beat{font-size:20px;padding:38px 18px}
  .narr{font-size:15px;max-width:92%}
}

/* ══ 첫 갈림길 ══
   폼이 아니라 웹툰의 한 장면으로 보여야 참여감이 생긴다.
   선택지는 두 개뿐이라 나란히 놓고, 고르고 나면 답이 손님의 대사로 남는다. */
/* 갈림길 컷은 세로 컷 원본을 그대로 쓰면 선택지가 화면 밖으로 밀린다.
   높이를 잘라 질문과 선택지가 한 화면에 들어오게 한다. 얼굴이 남도록 위쪽을 보여준다. */
/* 히어로·푸터를 무대에서 내린 뒤로는 컷에 줄 높이가 생겼다.
   그래도 선택지가 접히면 안 되므로 화면 높이에서 고정 요소(헤더·나레이션·선택지)를
   뺀 만큼을 상한으로 둔다 — 작은 기기에서는 알아서 줄어든다 */
.fork-cut{max-height:min(52vh,calc(100svh - 372px));overflow:hidden}
.fork-cut img{height:min(52vh,calc(100svh - 372px));min-height:260px;
  width:100%;object-fit:cover;object-position:50% 26%}
.fork-cut .fade-b{height:56px}
.fork-cut .fade-t{height:34px}
.fork-pick{display:flex;gap:10px;padding:16px 18px 4px;background:rgba(9,13,25,.92)}
.fork-opt{flex:1 1 0;min-width:0;padding:16px 12px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#1c2650,#111834);color:#f0e6cd;
  border:1px solid rgba(217,180,91,.42);font-family:var(--serif);font-weight:700;
  font-size:16px;line-height:1.4;letter-spacing:-.01em;
  transition:border-color .15s ease,transform .12s ease,background .15s ease}
.fork-opt:hover,.fork-opt:focus-visible{border-color:rgba(217,180,91,.9);
  background:linear-gradient(180deg,#243063,#151d40);outline:none}
.fork-opt:active{transform:translateY(1px)}
.fork-ans{background:rgba(9,13,25,.92);padding:6px 18px 20px;text-align:right}
.fork-ans p{margin:0;display:inline-block;padding:11px 18px;border-radius:16px 16px 4px 16px;
  background:rgba(217,180,91,.14);border:1px solid rgba(217,180,91,.32);
  color:#f0e6cd;font-family:var(--serif);font-size:16px;max-width:82%}
@media(max-width:400px){
  .fork-opt{font-size:15px;padding:14px 10px}
}

/* ══ 몰입 모드 · 결과 꼬리 ══ (2026-09-02)
   갈림길에서 답을 고르는 화면에 "다시 해몽"과 "오늘 남은 해몽 3/3"이 같이 떠 있었다.
   손님이 이야기 안에 있는 동안에는 계기판도 출구도 보이면 안 된다. */
body.reading .top{background:rgba(15,27,51,.55);border-bottom-color:transparent;box-shadow:none}
.top-right .lang-wrap,.top-right .quota{transition:opacity .3s ease,transform .3s ease}
body.reading .top-right .lang-wrap,body.reading .top-right .quota{
  opacity:0;pointer-events:none;transform:translateY(-4px)}
/* 자리를 비워두지 않고 접으면 햄버거가 튄다 — 투명도만 내린다 */

#resultFoot{display:grid;gap:14px;animation:footIn .55s ease both}
@keyframes footIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#resultFoot{animation:none}}

/* 잔량 알림은 카드가 아니라 한 줄이다. 크림색 카드는 그림보다 밝아 시선을 뺏었다 */
.quota-note{margin:0;text-align:center;color:#7f8798;font-size:12.5px;letter-spacing:.02em}
.quota-note b{color:#b9ad8c;font-weight:700;font-variant-numeric:tabular-nums}

/* 드로어 지갑 — 잔액은 상시 계기판이 아니라 찾으면 있는 자리. 여기가 충전 입구다 */
.drawer-wallet{display:flex;align-items:center;gap:8px;width:100%;
  margin-top:14px;padding:11px 13px;border-radius:11px;cursor:pointer;
  background:rgba(217,180,91,.07);border:1px solid rgba(217,180,91,.22);
  color:#a9a290;font-family:inherit;font-size:13.5px;text-align:left;
  transition:background .15s ease,border-color .15s ease}
.drawer-wallet:hover{background:rgba(217,180,91,.14);border-color:rgba(217,180,91,.45)}
.drawer-wallet b{margin-left:auto;color:#e8c56b;font-size:15px}
.drawer-wallet i{font-style:normal;font-size:11.5px;color:#8f97a6;
  border:1px solid rgba(143,151,166,.4);border-radius:999px;padding:2px 8px}
/* 갈림길 컷은 화면을 다 채우지 않아 선택지 바로 밑에 푸터 링크가 걸린다.
   고를 것이 앞에 있는 순간에 이탈 링크를 놓지 않는다 — 리딩이 끝나면 돌아온다 */
body.reading footer{display:none}
/* 이야기 무대 — 히어로와 빈 입력 영역을 내린다.
   갈림길 컷이 짧아 그 위로 히어로 말풍선이 반쯤 걸쳐 보였다. 무대에는 이야기만 남긴다 */
body.story .hero{display:none}
body.story main.wrap{padding-top:0;padding-bottom:0}
body.story #result .wrap{padding-bottom:40px}
/* 전자상거래법 제10조 표시사항 — PG·카드사 입점심사도 이 자리를 본다 */
.foot-biz{color:#4d5470;font-size:11.5px;line-height:1.85;margin:10px 0 0}
/* 한국어 세로 워드마크 — .v-title 기본 크기는 일본어(夢/うらない)에 맞춰져 있어
   한글 2×2 배치에는 너무 크다. 달래 얼굴·귀를 덮지 않는 선까지 줄인다 */
.v-title.mark-ko{font-size:clamp(46px,12vw,72px);letter-spacing:.06em;line-height:1.14;top:30px;left:20px}
/* 청약철회 제한 고지 — 결제 지점에 있어야 법적 효력이 있다 (전자상거래법 제17조 제6항).
   상품 목록 바로 아래, 결제 버튼 앞자리. 작게 두되 읽히게 한다 */
.sheet-notice{margin:14px 0 0;padding:11px 13px;border-radius:10px;
  background:rgba(217,180,91,.08);border:1px solid rgba(217,180,91,.24);
  color:#a9a290;font-size:12.5px;line-height:1.72}
.sheet-notice b{color:#e8dcb2;font-weight:700}