/* 2026-09-23 타이트사주 참고 재조정: 보라빛 바탕 + 금색 테두리 투성이 → 거의 무채색 바탕 위에 흰 글씨,
   강조는 핑크 하나(금색은 가격·엽전에만). 배색 값은 참고 사이트 것을 옮기지 않고 따로 골랐다. */
:root{--ink:255,255,255;--hi:#fff;--gold-rgb:255,207,107;--gold-brand:#ffcf6b;--bg:#131217;--bg-card:#1b1a21;--bg-card-2:#24222b;--gold:#ffcf6b;--gold-soft:#e0a94a;--pink:#ff5f96;--pink-deep:#ff3d7a;--purple:#8b5cf6;--cream:#f5f3f8;--muted:#9d98aa;--border:rgba(var(--ink),0.10);--border-strong:rgba(var(--ink),0.18);
  /* ── 디자인 시스템: 통일된 스케일 ── */
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --surface-1:rgba(var(--ink),.035);--surface-2:rgba(var(--ink),.055);--surface-3:rgba(var(--ink),.09);
  --border-soft:rgba(var(--ink),.09);--border-med:rgba(var(--ink),.14);
  --sp-1:6px;--sp-2:10px;--sp-3:14px;--sp-4:20px;--sp-5:28px;
  --fs-xs:12px;--fs-sm:12.5px;--fs-base:14px;--fs-md:15px;--fs-title:22px;--fs-display:25px;
  --shadow-card:0 4px 24px rgba(0,0,0,.3);--shadow-pop:0 8px 24px rgba(0,0,0,.4);
  /* 글꼴 — 본문은 Pretendard, 썸네일·표지 제목은 송명체(붓맛 나는 명조), 부제는 나눔명조, 말풍선은 Jua */
  --font-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --font-display:'Song Myung','Nanum Myeongjo',serif;
  --font-serif:'Nanum Myeongjo',serif;
  --font-bubble:'Nanum Gothic',var(--font-sans);
  /* 읽는 글(풀이 본문·첫 문장·해설 네모) — 고운바탕(옛 책 느낌). 섹션 제목은 송명. 2026-09-24 사장님 "글씨체가 몰입이 안 돼" → 타이트사주(Noto Serif KR 본문)·청월당(명조 제목 + 바른고딕 대사) 참고 */
  --font-read:'Gowun Batang','Nanum Myeongjo',serif;   /* 2026-09-24 사장님 '더 고풍' → A안: 제목 송명 + 본문 고운바탕 */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;color-scheme:dark;}
body{font-family:var(--font-sans);background:var(--bg);color:var(--cream);min-height:100vh;position:relative;overflow-x:hidden;padding-bottom:90px;}
#stars{position:fixed;inset:0;pointer-events:none;z-index:0;}
.star{position:absolute;width:2px;height:2px;background:var(--gold);border-radius:50%;opacity:0.6;animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:0.15;}50%{opacity:0.9;}}
.wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:0 16px;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 4px 14px;}
.logo-tag{display:block;margin-top:1px;font-size:12px;font-weight:600;letter-spacing:0;color:rgba(var(--ink),.55);-webkit-text-fill-color:rgba(var(--ink),.55);}
.logo{font-family:var(--font-sans);font-weight:900;font-size:20px;letter-spacing:-.02em;background:linear-gradient(120deg,var(--gold-brand,#ffcf6b),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;cursor:pointer;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.topbar-left{display:flex;align-items:center;gap:8px;}
.topbar-back{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;border:.5px solid rgba(var(--ink),.1);background:rgba(var(--ink),.05);color:var(--cream);cursor:pointer;padding:0;flex:0 0 auto;transition:all .16s ease;-webkit-tap-highlight-color:transparent;}
.topbar-back svg{width:19px;height:19px;display:block;}
.topbar-back:active{transform:scale(.9);background:rgba(var(--ink),.12);}
.coin-btn{display:flex;align-items:center;gap:5px;background:rgba(255,207,107,.1);border:.5px solid rgba(255,207,107,.3);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:700;color:var(--gold);}
.coin-display{font-weight:800;}
.btn{width:100%;padding:15px;border-radius:var(--r-md);border:none;font-size:15px;font-weight:800;cursor:pointer;transition:all .16s ease;font-family:var(--font-sans);letter-spacing:.01em;}
.btn-primary{background:linear-gradient(135deg,#ffcf6b 0%,#ff8c42 45%,#ff5f96 100%);color:#1a1020;font-weight:900;box-shadow:0 4px 24px rgba(255,140,66,.35);letter-spacing:.01em;animation:pulse-cta 3s ease-in-out infinite;}
@keyframes pulse-cta{0%,100%{box-shadow:0 4px 24px rgba(255,140,66,.35);}50%{box-shadow:0 4px 32px rgba(255,140,66,.6),0 0 0 4px rgba(255,140,66,.1);}}
.btn-ghost{background:var(--surface-2);border:.5px solid var(--border);color:var(--cream);}
.btn-ai{background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(236,72,153,.2));border:.5px solid rgba(139,92,246,.4);color:#e9d5ff;font-size:var(--fs-base);font-weight:800;padding:14px;border-radius:var(--r-md);cursor:pointer;width:100%;text-align:center;}
.card{background:var(--surface-1);border:.5px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);line-height:1.7;}
.card-title{font-size:15px;font-weight:800;color:var(--cream);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.field input,.field select{width:100%;background:var(--surface-2);border:.5px solid var(--border-med);border-radius:var(--r-sm);padding:12px 14px;color:var(--cream);font-size:16px;font-family:var(--font-sans);color-scheme:dark;}
.field select option{background:var(--bg-card);color:var(--cream);}
select{color-scheme:dark;}
select option{background:var(--bg-card);color:var(--cream);}
.field input::placeholder{color:rgba(var(--ink),.32);}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;}
/* 양력/음력 토글 — 라벨 오른쪽에 붙는 작은 세그먼트 */
.cal-toggle{display:inline-flex;margin-left:8px;vertical-align:middle;border:1px solid var(--border-soft);border-radius:999px;overflow:hidden;}
.cal-toggle button{padding:8px 14px;min-height:32px;font-size:12px;font-weight:700;background:transparent;color:var(--muted);border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cal-toggle button.active{background:rgba(255,207,107,.16);color:var(--gold);}
.leap-row{display:none;margin-top:8px;font-size:12px;color:var(--muted);align-items:center;gap:6px;}
.leap-row{min-height:36px;cursor:pointer;}
.leap-row input{width:20px;height:20px;accent-color:var(--gold);}
.lunar-hint{margin-top:6px;font-size:12px;color:var(--gold);display:none;}
.error{font-size:12px;color:#fb7185;margin-top:6px;font-weight:600;display:none;}
.disclaimer{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6;}
/* 히어로: 캐릭터가 주인공이라 위에 겹치던 문구는 걷어낸다 */
.hero-card{min-height:392px!important;}
.hero-card .hero-trust,.hero-card #hero-day-hint{display:none!important;}
.hero-card .hero-slide-overlay{background:linear-gradient(180deg,rgba(10,6,20,0) 34%,rgba(10,6,20,.62) 64%,rgba(10,6,20,.94) 100%)!important;}
.hero-tag{font-size:12px!important;font-weight:800!important;color:var(--gold)!important;letter-spacing:.09em!important;background:none!important;border:none!important;padding:0!important;margin-bottom:5px!important;text-shadow:0 1px 8px rgba(0,0,0,.85);}
.hero-title{text-shadow:0 2px 14px rgba(0,0,0,.85);}
.hero-sub{text-shadow:0 1px 8px rgba(0,0,0,.8);}
.hero-tag,.hero-title,.hero-sub{transition:opacity .22s ease;}
.hero-card.hero-swapping .hero-tag,.hero-card.hero-swapping .hero-title,.hero-card.hero-swapping .hero-sub{opacity:0;}
/* 고정된 하단 네비가 마지막 카드를 가리지 않도록 */
#landing-section{padding-bottom:96px;}
/* 성별 선택 */
.gender-row{display:flex;gap:8px;}
.gender-btn{flex:1;padding:12px 8px;border-radius:var(--r-md);border:1.5px solid var(--border-soft);background:var(--surface-1);color:var(--muted);font-size:var(--fs-base);font-weight:700;cursor:pointer;transition:all .16s;-webkit-tap-highlight-color:transparent;}
.gender-btn.active{border-color:var(--gold);background:rgba(255,207,107,.12);color:var(--gold);}
/* 명식 카드의 대운 띠 */
.link-row{display:flex;gap:6px;}
.link-row input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:.5px solid var(--border-soft);background:rgba(0,0,0,.25);color:var(--cream);font-size:12px;}
.btn-mini{background:rgba(255,207,107,.15);border:.5px solid rgba(255,207,107,.35);color:var(--gold);border-radius:10px;padding:0 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;}
.btn-mini:disabled{opacity:.5;}
.kakao-btn{display:inline-flex;align-items:center;gap:8px;background:#FEE500;color:#191919;border:0;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:800;cursor:pointer;width:100%;justify-content:center;}
.kakao-ico{font-size:16px;}
.share-row{display:flex;gap:8px;margin-top:10px;}
.share-btn{flex:1;background:rgba(var(--ink),.05);border:.5px solid var(--border-soft);color:var(--cream);border-radius:var(--r-md);padding:12px 8px;font-size:13px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.share-btn:disabled{opacity:.6;}
.daeun-wrap{margin-top:14px;padding-top:12px;border-top:.5px solid var(--border-soft);}
.unse-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;padding-top:12px;border-top:.5px solid var(--border-soft);}
.unse-cell{background:rgba(var(--ink),.03);border:.5px solid var(--border-soft);border-radius:12px;padding:9px 8px;text-align:center;}
.unse-lab{font-size:12px;letter-spacing:.12em;color:rgba(var(--gold-rgb),.55);font-weight:700;margin-bottom:4px;}
.unse-gz{font-size:18px;font-weight:800;color:var(--hi);line-height:1.1;}
.unse-gz small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;}
.unse-meta{font-size:12px;color:var(--muted);margin-top:5px;}
.daeun-title{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.08em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.daeun-title span{font-weight:600;color:var(--muted);letter-spacing:0;}
.daeun-strip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.daeun-strip::-webkit-scrollbar{display:none;}
.daeun-cell{flex:0 0 auto;min-width:44px;text-align:center;padding:7px 4px 6px;border-radius:10px;background:var(--surface-1);border:.5px solid var(--border-soft);}
.daeun-cell.now{background:rgba(255,207,107,.14);border-color:var(--gold);}
.daeun-age{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:3px;}
.daeun-cell.now .daeun-age{color:var(--gold);}
.daeun-gz{font-size:14px;font-weight:900;color:var(--cream);line-height:1.2;}
.daeun-gz small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:1px;}
/* 후기 쓰기 카드 */
.review-card{background:linear-gradient(135deg,rgba(255,207,107,.08),rgba(139,92,246,.06));border:.5px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;}
.review-title{font-size:15px;font-weight:900;color:var(--cream);}
.review-sub{font-size:12px;color:var(--muted);margin:4px 0 10px;}
.star-row{display:flex;gap:6px;margin-bottom:10px;}
.star{font-size:28px;color:rgba(var(--ink),.18);cursor:pointer;transition:color .12s,transform .12s;user-select:none;}
.star.on{color:var(--gold);}
.star:active{transform:scale(.9);}
.review-text{width:100%;background:var(--surface-1);border:.5px solid var(--border-soft);border-radius:var(--r-md);color:var(--cream);font-size:14px;padding:10px 12px;resize:none;font-family:inherit;line-height:1.5;}
.review-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.review-count{font-size:12px;color:var(--muted);}
.review-done{font-size:13px;font-weight:700;color:var(--gold);text-align:center;padding:8px 0 2px;}
/* 카탈로그의 실제 후기 */
.rv-sec{margin-bottom:var(--sp-4);}
.rv-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.rv-head b{font-size:var(--fs-md);font-weight:800;color:var(--cream);}
.rv-head span{font-size:var(--fs-xs);color:var(--muted);}
.rv-strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.rv-strip::-webkit-scrollbar{display:none;}
.rv-item{flex:0 0 250px;background:var(--surface-1);border:.5px solid var(--border-soft);border-radius:var(--r-md);padding:12px 13px;}
.rv-item .rv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.rv-item .rv-who{font-size:12px;font-weight:800;color:var(--muted);}
.rv-item .rv-stars{font-size:12px;color:var(--gold);letter-spacing:1px;}
.rv-item .rv-txt{font-size:13px;color:var(--cream);line-height:1.55;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.rv-item .rv-topic{font-size:12px;color:var(--gold);margin-top:6px;font-weight:700;}
/* ── 상품 카탈로그 (캐릭터 카드) ── */
/* 섹션 = 회색 분야 라벨 + 질문형 제목 + 가로로 넘기는 세로 포스터 카드 줄(다음 카드가 옆에 살짝 보이게) */
.cat-sec{margin-bottom:30px;}
.cat-sec-kicker{font-size:12px;color:var(--muted);margin:0 0 4px;letter-spacing:.01em;}
.cat-sec-title{font-size:18px;font-weight:700;color:var(--cream);margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance;}
.cat-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none;-ms-overflow-style:none;}
.cat-row::-webkit-scrollbar{display:none;}
.cat-row .prod{flex:0 0 78%;scroll-snap-align:start;}
/* 분야에 상품이 하나뿐일 때도 다른 카드와 같은 세로 포스터로 — 가로로 눕히면 그림이 오른쪽에 작게 밀려 인물이 조그매졌다 */
.cat-row.single .prod{flex-basis:100%;aspect-ratio:4/5;}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.prod{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#0d0c11;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;transition:transform .16s ease;--acc:var(--gold);}
.prod:active{transform:scale(.97);}
/* 그림을 아래로 내려 위쪽에 제목 자리를 만든다 — 제목이 얼굴을 덮지 않게(썸네일 포스터 구성) */
/* 9/28 웹소설 그림체 썸네일은 배경이 밝다 — 그림 윗가장자리를 제목 판(어두운 색)으로 서서히 녹이고(마스크), 가장자리를 눌러 흰 배경이 튀지 않게(비네트) */
.prod-img{position:absolute;left:0;right:0;bottom:0;top:16%;width:100%;height:84%;object-fit:cover;object-position:center 12%;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 10%,#000 30%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 10%,#000 30%);}
.prod-shade{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 50%,rgba(13,12,17,0) 40%,rgba(13,12,17,.75) 100%),linear-gradient(180deg,#0d0c11 0%,#0d0c11 12%,rgba(13,12,17,.5) 24%,rgba(13,12,17,0) 40%,rgba(13,12,17,0) 58%,rgba(13,12,17,.72) 78%,rgba(13,12,17,.97) 100%);}
.prod-top{position:relative;padding:16px 16px 0;}
.prod-kicker{font-family:var(--font-serif);font-size:12.5px;font-weight:700;color:rgba(var(--ink),.78);letter-spacing:.02em;margin-bottom:6px;text-shadow:0 1px 8px rgba(0,0,0,.9);}
.prod-hook{font-family:var(--font-display);font-weight:400;font-size:27px;line-height:1.22;color:var(--hi);letter-spacing:-.01em;word-break:keep-all;text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.6);}
.prod-hook em{font-style:normal;display:block;font-size:1.18em;color:var(--acc);}
.prod-body{position:relative;padding:0 16px 16px;}
.prod-name{font-size:15px;font-weight:700;color:var(--hi);line-height:1.3;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.85);}
.prod-tag{font-size:12.5px;color:rgba(var(--ink),.7);margin-top:4px;line-height:1.45;text-shadow:0 1px 6px rgba(0,0,0,.8);}
.prod-price{margin-top:8px;font-size:14px;font-weight:800;color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.8);font-variant-numeric:tabular-nums;}
.prod-badge{position:absolute;top:10px;right:10px;z-index:2;font-size:12px;font-weight:900;padding:4px 9px;border-radius:var(--r-pill);background:var(--pink-deep);color:var(--hi);letter-spacing:.02em;box-shadow:0 2px 10px rgba(0,0,0,.5);}
.prod-badge.gold{background:var(--gold);color:#241a0a;}
.prod-badge.dim{background:rgba(20,12,32,.85);color:var(--cream);border:.5px solid var(--border-med);}
/* 상품을 고른 뒤 입력폼 위에 뜨는 헤더 */
.pick-head{display:flex;align-items:center;gap:11px;margin-bottom:var(--sp-3);}
.pick-back{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:.5px solid var(--border-soft);color:var(--cream);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pick-back:active{background:var(--surface-3);}
.pick-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:13px;object-fit:cover;object-position:center 16%;border:.5px solid var(--border);}
.pick-who{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.08em;}
.pick-name{font-size:15.5px;font-weight:900;color:var(--cream);line-height:1.3;margin-top:1px;}
.hero-card{border-radius:var(--r-lg);overflow:hidden;position:relative;margin-bottom:12px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 20px 20px;background:linear-gradient(160deg,#1a0a2e,#3d1060,#6b1595);box-shadow:var(--shadow-card);}
.hero-card .hero-slide{position:absolute;inset:0;z-index:0;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.hero-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.hero-slide-overlay{position:absolute;inset:0;pointer-events:none;display:none;background:linear-gradient(90deg,rgba(15,8,20,.96) 0%,rgba(15,8,20,.75) 32%,rgba(15,8,20,.15) 62%,transparent 100%),linear-gradient(0deg,rgba(10,6,16,.85) 0%,transparent 55%);}
.hero-card>*{position:relative;z-index:1;}
.hero-big-icon{position:absolute;right:-14px;bottom:-24px;font-size:150px;line-height:1;opacity:.18;transform:rotate(-9deg);pointer-events:none;z-index:0!important;}
.hero-badge{position:absolute;top:16px;right:16px;font-size:12px;font-weight:800;color:rgba(var(--ink),.8);background:rgba(var(--ink),.1);padding:5px 12px;border-radius:999px;border:.5px solid rgba(var(--ink),.2);backdrop-filter:blur(8px);}
.hero-tag{font-size:12px;font-weight:800;color:rgba(var(--gold-rgb),.7);letter-spacing:.08em;margin-bottom:8px;}
.hero-title{font-size:29px;font-weight:400;color:var(--hi);font-family:var(--font-display);line-height:1.3;margin-bottom:8px;letter-spacing:-.02em;}
.accent{background:linear-gradient(135deg,#ffc947 0%,#ff8c95 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{font-size:13px;color:rgba(var(--ink),.6);line-height:1.5;margin-bottom:12px;}
.hero-trust{display:flex;gap:6px;flex-wrap:wrap;}
.hero-trust-item{font-size:12px;font-weight:700;color:rgba(var(--ink),.5);background:rgba(var(--ink),.08);padding:3px 8px;border-radius:999px;}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;contain:layout;}
.product-card{border-radius:var(--r-md);padding:16px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;position:relative;cursor:pointer;transition:all .16s ease;}
.product-card:active{transform:scale(.97);}
.product-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.5);}
.lock-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.75);color:rgba(var(--ink),.9);font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px;backdrop-filter:blur(12px);border:.5px solid rgba(var(--ink),.1);letter-spacing:.03em;}
.free-badge{font-size:12px;font-weight:800;color:rgba(var(--ink),.6);background:rgba(var(--ink),.1);padding:3px 8px;border-radius:999px;display:inline-block;margin-bottom:8px;}
.product-title{font-size:14px;font-weight:900;color:var(--hi);line-height:1.4;margin-bottom:4px;}
.product-desc{font-size:12px;color:rgba(var(--ink),.55);line-height:1.4;}
.product-price{font-size:12px;font-weight:800;color:rgba(var(--gold-rgb),.8);margin-top:8px;}
.topic-pills{display:grid;gap:9px;margin-bottom:9px;}
.pill-scroll{display:flex;gap:8px;overflow-x:auto;padding:14px 4px 10px;scrollbar-width:none;-ms-overflow-style:none;position:sticky;top:0;z-index:50;background:var(--bg);}
.hero-counter{position:absolute;top:16px;left:16px;font-size:12px;font-weight:800;color:rgba(var(--ink),.9);background:rgba(0,0,0,.35);padding:5px 10px;border-radius:999px;backdrop-filter:blur(8px);}
.hero-dots{position:absolute;bottom:14px;right:18px;display:flex;gap:5px;}
.hero-dots span{width:5px;height:5px;border-radius:999px;background:rgba(var(--ink),.3);transition:background .3s,width .3s;}
.hero-dots span.active{background:rgba(var(--ink),.9);width:14px;}
/* 배너 넘기기(9/30) — 폰은 손으로 밀고, 마우스 있는 화면만 양옆 화살표. 세로 스크롤은 그대로(pan-y) */
.hero-card{touch-action:pan-y;}
.hero-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:999px;background:rgba(0,0,0,.35);color:rgba(var(--ink),.9);font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);}
.hero-nav.prev{left:10px;}.hero-nav.next{right:10px;}
.hero-nav:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.hero-nav{display:flex;align-items:center;justify-content:center;opacity:.75;}
@media (hover:hover) and (pointer:fine){.hero-nav{opacity:0;transition:opacity .2s;}.hero-card:hover .hero-nav,.hero-nav:focus-visible{opacity:1;}}
/* 상품 줄·후기 줄 화살표 — 같은 모양. 폰에서도 보이게(뒤로도 넘어간다는 표시), 처음·끝에선 한쪽을 숨김 */
.sl-wrap{position:relative;}
.sl-nav{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:rgba(var(--ink),.92);font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);transition:opacity .2s;}
.sl-nav.prev{left:4px;}.sl-nav.next{right:4px;}
.sl-nav:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.sl-start .sl-nav.prev,.sl-end .sl-nav.next,.sl-none .sl-nav{opacity:0;pointer-events:none;}
.pill-scroll::-webkit-scrollbar{display:none;}
.pill{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;background:transparent;border:1px solid transparent;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .16s ease;}
.pill.active{background:rgba(var(--ink),.08);border-color:rgba(var(--ink),.2);color:var(--hi);font-weight:700;}
.pill:active{transform:scale(.96);}
.topic-pill{border-radius:var(--r-md);padding:14px 6px;cursor:pointer;transition:all .16s ease;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-height:64px;background:var(--surface-1);}
.topic-pill .pill-emoji-wrap{font-size:18px;line-height:1;}
.topic-pill .pill-label-text{font-size:12px;font-weight:700;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.topic-pill.active{border-color:rgba(255,207,107,.4);background:rgba(255,207,107,.08);}
.pill-emoji{font-size:20px;}
.pill-label{font-size:14px;font-weight:800;color:var(--cream);}
.pill-desc{font-size:12px;color:var(--muted);margin-top:2px;}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(8px);}
.modal-sheet{background:var(--bg-card);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:480px;padding:24px 20px 40px;max-height:90vh;max-height:90dvh;overflow-y:auto;}
/* 풀이를 기다리는 1분 동안 이모지 하나만 떠 있었다.
   골라 들어온 캐릭터가 봐주고 있다는 게 보이도록 초상을 띄운다. */
.load-cast{position:relative;width:132px;height:132px;margin:0 auto 14px;animation:cast-breathe 3.2s ease-in-out infinite;}
.load-cast-img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 12%;border:1.5px solid rgba(255,207,107,.45);box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 40px rgba(255,207,107,.18);}
.load-cast-ring{position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,207,107,.28);border-top-color:rgba(255,207,107,.85);animation:cast-spin 2.4s linear infinite;}
.load-cast-who{font-size:12px;font-weight:900;color:var(--gold);letter-spacing:.09em;margin-bottom:14px;min-height:16px;}
@keyframes cast-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
@keyframes cast-spin{to{transform:rotate(360deg);}}
.loading-pct{font-size:56px;font-weight:900;background:linear-gradient(135deg,#ffc947,#ff8c95);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums;}
.loading-bar-wrap{width:200px;height:6px;background:rgba(var(--ink),.1);border-radius:3px;overflow:hidden;margin:0 auto 16px;}
.loading-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-brand,#ffcf6b),var(--pink));border-radius:3px;transition:width .3s ease;}
.loading-msg{font-size:13px;color:var(--muted);font-weight:600;min-height:20px;}
.load-live{width:100%;max-width:360px;margin:18px auto 0;text-align:left;background:rgba(var(--ink),.04);border:.5px solid var(--border-soft);border-radius:var(--r-md);padding:12px 14px;}
.load-live-list{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);}
.load-live-list .done{color:var(--cream);}
.load-live-list .done::before{content:'✓ ';color:var(--gold);font-weight:800;}
.load-live-list .now::before{content:'✎ ';color:var(--pink);font-weight:800;}
.load-live-list .now{color:var(--gold);font-weight:700;}
.load-live-list .todo{opacity:.45;}
.load-live-now{margin-top:8px;font-size:12px;line-height:1.55;color:rgba(var(--ink),.62);max-height:4.7em;overflow:hidden;font-family:var(--font-bubble);}
.load-live-now:empty{display:none;}
.myeongsik-section-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--gold);margin-bottom:12px;opacity:.8;}
.rel-label{font-size:12px;font-weight:800;color:var(--gold);margin-bottom:4px;}
.rel-text{font-size:13px;color:var(--muted);line-height:1.6;}
.oheng-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin-bottom:8px;gap:2px;}
.oheng-legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.oheng-item{display:flex;align-items:center;gap:4px;font-size:12px;}
.oheng-dot{width:8px;height:8px;border-radius:50%;}
.ms-pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.cut-scroll{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;will-change:scroll-position;padding:0 2px;}
.wt-panel{background:var(--surface-1);border:.5px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);padding:var(--sp-4) 18px;}
.wt-content{padding:18px 20px 16px;}
.wt-panel-idx{font-size:12px;font-weight:800;color:rgba(var(--gold-rgb),.55);letter-spacing:.04em;margin-bottom:8px;}
.wt-section-lbl{font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.wt-section-lbl::before{content:'';display:block;width:3px;height:14px;background:currentColor;border-radius:2px;opacity:.8;}
.wt-text{font-size:15.5px;line-height:1.95;color:rgba(var(--ink),.92);word-break:keep-all;letter-spacing:-.01em;}
.wt-text br{content:'';display:block;margin-top:8px;}
.wt-title{background:linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.7));padding:32px 20px 28px;text-align:center;border-radius:16px 16px 0 0;margin-bottom:0;position:relative;}
.wt-title-icon{font-size:44px;margin-bottom:12px;filter:drop-shadow(0 0 12px rgba(255,207,107,.5));}
.wt-title-kw{font-family:var(--font-sans);font-size:clamp(15px,4.2vw,19px);font-weight:700;color:rgba(var(--ink),.92);line-height:1.55;letter-spacing:-.01em;}
/* ── 리포트 본문: 세로 웹툰 ──
   장면 컷(전폭 그림 + 제목) → 해설(어두운 바탕 위 큰 글씨) → 여백 → 다음 장면.
   말풍선은 화자가 직접 말하는 섹션(첫인사·마지막 한 마디)에만 쓴다. 같은 그림이 다시 나와도 구도(.wt-f-*: 세로/정사각/가로)를 바꿔 다른 컷처럼 보이게 한다.
   확대(scale) 크롭은 쓰지 않는다 — 그림마다 얼굴 위치가 달라서 몸통만 잡히는 컷이 나왔다. */
#cut-scroll .wt-panel{padding:0;border:0;background:none;box-shadow:none;border-radius:0;}
.wt-scene{position:relative;overflow:hidden;isolation:isolate;margin:34px -2px 4px;background:#0c0b10;}
.wt-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wt-scene::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,8,14,0) 55%,rgba(10,8,14,.55) 78%,var(--bg) 100%);}
.wt-f-tall{aspect-ratio:4/5;}
.wt-f-tall img{object-position:center 18%;}
.wt-f-square{aspect-ratio:1/1;}
.wt-f-square img{object-position:center 8%;}
.wt-f-wide{aspect-ratio:4/3;}
.wt-f-wide img{object-position:center 12%;}
.wt-scene-cap{position:absolute;left:20px;right:20px;bottom:14px;z-index:2;}
.wt-scene-no{display:block;font-size:12px;font-weight:900;color:var(--gold);letter-spacing:.12em;margin-bottom:6px;text-shadow:0 1px 8px rgba(0,0,0,.9);}
#cut-scroll .wt-section-lbl{display:block;margin:0;font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:-.02em;line-height:1.35;color:var(--hi);word-break:keep-all;text-shadow:0 2px 18px rgba(0,0,0,.95);}
#cut-scroll .wt-section-lbl::before{display:none;}
.wt-title-only{margin:34px 0 0;padding:0 20px !important;text-align:center;}
.wt-narr{padding:14px 22px;text-align:center;font-size:16.5px;line-height:1.9;color:rgba(var(--ink),.9);word-break:keep-all;letter-spacing:-.01em;}
.wt-narr strong,.wt-narr em{color:var(--gold) !important;}
.wt-charm{margin:6px 4px;text-align:left;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 20px;}
.wt-speech{display:flex;align-items:flex-start;gap:10px;padding:8px 16px;}
.wt-speech-face{flex:0 0 auto;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 14%;border:1.5px solid rgba(255,207,107,.5);}
.wt-speech-gap{visibility:hidden;}
.wt-speech-txt{display:flex;align-items:center;justify-content:center;background:var(--pink-deep);color:var(--hi);font-size:18px;font-weight:900;border-color:rgba(var(--ink),.25);}
.wt-bubble{position:relative;background:#fff;color:#1a1020;border-radius:4px 18px 18px 18px;padding:13px 16px;font-family:var(--font-bubble);font-size:16px;line-height:1.55;word-break:keep-all;box-shadow:0 8px 24px rgba(0,0,0,.4);}
/* ── 안내 캐릭터 웹툰(2026-09-24) — 캐릭터가 한마디 던지고(말풍선) → 바로 아래 종이 글 상자에 긴 풀이.
   글 상자는 한 섹션의 조각들을 이어 붙여 한 장처럼 보이게(처음·끝만 둥근 모서리). 글 양은 줄이지 않는다. */
.wt-guide-hook{align-items:center;padding:14px 14px 0;}
.wt-guide-hook .wt-speech-face{width:52px;height:52px;}
.wt-guide-bubble{position:relative;background:#fff;color:#1a1020;border-radius:20px;padding:12px 16px;font-family:var(--font-bubble);font-size:16.5px;line-height:1.5;word-break:keep-all;box-shadow:0 2px 0 #1a1020,0 0 0 2px #1a1020;}
.wt-guide-bubble::before{content:'';position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fff;box-shadow:-2px 2px 0 #1a1020;transform:rotate(45deg);}
.wt-note{margin:0 14px;background:#f6f1ea;color:#4a4046;text-align:left;font-size:16px;line-height:1.85;padding:4px 20px;}
.wt-note-first{margin-top:12px;border-radius:14px 14px 0 0;padding-top:18px;}
.wt-note-last{border-radius:0 0 14px 14px;padding-bottom:18px;box-shadow:0 22px 24px -16px rgba(0,0,0,.6);}
.wt-note-first.wt-note-last{border-radius:14px;}
.wt-note strong,.wt-note em{color:#b4530a !important;}
/* 캐릭터가 직접 말하는 섹션 — 캐릭터 컷 + 큰 말풍선 */
.wt-guide-cut{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/5;margin:34px -2px 4px;background:#0c0b10;}
.wt-guide-cut img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;}
.wt-guide-cut::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,8,14,.55) 0%,rgba(10,8,14,0) 26%,rgba(10,8,14,0) 50%,rgba(10,8,14,.7) 100%);}
.wt-guide-cap{position:absolute;left:18px;right:18px;top:16px;z-index:2;}
.wt-guide-cap .wt-section-lbl{font-size:20px !important;}
.wt-guide-say{position:absolute;left:14px;right:14px;bottom:16px;z-index:2;}
.wt-guide-name{display:inline-block;background:var(--pink-deep);color:var(--hi);font-size:12px;font-weight:900;letter-spacing:.06em;padding:3px 10px;border-radius:999px;margin:0 0 6px 6px;}
.wt-guide-say .wt-bubble{border-radius:20px;font-size:17px;box-shadow:0 2px 0 #1a1020,0 0 0 2px #1a1020;}
/* 2026-09-24 안내 캐릭터 웹툰 2단계(화면) — 흰 글 상자 대신 캐릭터 말풍선, 긴 장면은 클로즈업으로 마무리 */
.wt-guide-say .wt-guide-bubble{font-size:17px;}
.wt-guide-say .wt-guide-bubble::before{display:none;}
.wt-say{padding:7px 18px 7px 16px;}
.wt-say .wt-bubble{border-radius:20px;font-size:16px;line-height:1.65;padding:13px 17px;box-shadow:0 2px 0 #1a1020,0 0 0 2px #1a1020;}
.wt-say .wt-bubble::before{content:'';position:absolute;left:18px;top:-7px;width:12px;height:12px;background:#fff;box-shadow:-2px -2px 0 #1a1020;transform:rotate(45deg);}
.wt-say + .wt-say .wt-bubble::before{display:none;}
.wt-say:nth-child(even){padding-left:28px;}
.wt-guide-close{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1/1;margin:18px 26px 10px;border-radius:18px;background:#0c0b10;border:2px solid #1a1020;}
.wt-guide-close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 14%;}
.wt-guide-close .wt-guide-say{bottom:12px;left:12px;right:12px;}
.wt-memo{margin:8px 22px;background:#fff6d8;color:#2a2024;border:2px solid #1a1020;border-radius:4px;box-shadow:3px 3px 0 #1a1020;padding:11px 15px;font-size:15px;line-height:1.6;text-align:left;word-break:keep-all;}
.wt-memo strong,.wt-memo em{color:#b4530a !important;}
/* 챕터 표지 — 안내 캐릭터 한 줄 */
.chapter-guide{display:flex;align-items:center;gap:10px;margin-top:14px;}
.chapter-guide img{flex:0 0 auto;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 12%;border:2px solid var(--pink);}
.chapter-guide span{background:#fff;color:#1a1020;font-family:var(--font-bubble);font-size:14px;line-height:1.45;padding:9px 13px;border-radius:16px 16px 16px 4px;word-break:keep-all;}
.cast-who span{color:var(--muted);font-weight:700;letter-spacing:0;margin-left:4px;}
/* ── 풀이를 시작할 때 나오는 캐릭터 소개 ──
   풀이 시작 인사 카드 *
   한 번도 안 나왔다. 골라 들어온 캐릭터가 읽어주는 느낌을 이어준다. */
.cast-intro{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(255,207,107,.09),rgba(139,92,246,.07));border:.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px 14px 14px;margin-bottom:12px;box-shadow:var(--shadow-card);}
.cast-portrait{flex:0 0 auto;width:74px;height:74px;border-radius:16px;object-fit:cover;object-position:center 14%;border:1px solid rgba(255,207,107,.35);box-shadow:0 4px 14px rgba(0,0,0,.45);}
.cast-body{min-width:0;}
.cast-who{font-size:12px;font-weight:900;color:var(--gold);letter-spacing:.09em;margin-bottom:4px;}
.cast-line{font-size:14.5px;font-weight:800;color:var(--cream);line-height:1.5;letter-spacing:-.01em;word-break:keep-all;}
.cast-sub{font-size:12px;color:var(--muted);margin-top:5px;font-weight:600;}
/* 챕터 커버에도 누가 읽어주는지 적는다 */
.chapter-who{font-size:12px;font-weight:900;color:var(--gold);letter-spacing:.09em;margin-bottom:7px;text-shadow:0 1px 8px rgba(0,0,0,.9);}
.chapter-cover{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:240px;aspect-ratio:4/5;margin-top:40px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 20px 22px;isolation:isolate;box-shadow:var(--shadow-card);}
.chapter-cover::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 15%,rgba(var(--ink),.12) 0%,transparent 35%),radial-gradient(circle at 85% 75%,rgba(var(--ink),.08) 0%,transparent 40%),repeating-linear-gradient(115deg,rgba(var(--ink),.02) 0px,rgba(var(--ink),.02) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:0;}
.chapter-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%);pointer-events:none;z-index:0;}
.chapter-cover>*{position:relative;z-index:1;}
.cast-intro+.chapter-cover{margin-top:0;}
.chapter-badge{display:inline-block;background:rgba(var(--ink),.15);backdrop-filter:blur(8px);border:.5px solid rgba(var(--ink),.25);padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--hi);letter-spacing:.06em;margin-bottom:12px;}
.chapter-title{font-size:36px;font-weight:400;color:var(--hi);font-family:var(--font-display);line-height:1.3;margin-bottom:8px;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.8),0 1px 0 rgba(0,0,0,.3);}
.chapter-sub{font-size:12px;color:rgba(var(--ink),.6);font-weight:600;}
.after-cuts-inner{padding:20px 2px 0;}
.card-pull{cursor:pointer;text-align:center;padding:40px 20px;}
.card-pull.pulling{opacity:.5;transform:scale(.96);transition:all .25s ease;}
.paywall-blur{filter:blur(9px);-webkit-filter:blur(9px);pointer-events:none;user-select:none;}
.paywall-gate{position:relative;z-index:5;text-align:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 60%,transparent 100%);padding:28px 20px 20px;margin-top:-40px;}
.paywall-gate-inner{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:24px 20px;box-shadow:var(--shadow-pop);}
.quick-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.quick-btn-sm{background:var(--surface-2);border:.5px solid rgba(255,207,107,.2);border-radius:var(--r-pill);padding:7px 12px;font-size:var(--fs-sm);font-weight:700;color:rgba(var(--ink),.65);cursor:pointer;}
.lucky-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px;}
.lucky-chip{text-align:center;background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--r-sm);padding:10px 6px;}
.lc-label{font-size:12px;color:rgba(var(--gold-rgb),.6);margin-bottom:3px;font-weight:800;letter-spacing:.04em;}
.lc-value{font-size:14px;font-weight:900;color:var(--cream);letter-spacing:-.01em;}
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 130px);}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 4px;display:flex;flex-direction:column;gap:12px;}
.msg-row{display:flex;}
.msg-row.user{justify-content:flex-end;}
.msg-row.ai{justify-content:flex-start;}
.msg-user{background:linear-gradient(135deg,rgba(255,207,107,.25),rgba(255,95,150,.2));border:.5px solid rgba(255,207,107,.3);border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);padding:12px 14px;max-width:80%;font-size:var(--fs-base);line-height:1.65;color:var(--cream);}
.msg-ai-wrap{display:flex;gap:8px;align-items:flex-start;max-width:90%;}
.msg-avatar{font-size:20px;flex-shrink:0;margin-top:2px;}
.msg-ava-sm{width:28px;height:28px;border-radius:50%;flex-shrink:0;margin-top:2px;object-fit:cover;object-position:center 15%;background:var(--surface-2);}
.msg-ava-txt{display:flex;align-items:center;justify-content:center;background:var(--pink-deep);color:var(--hi);font-size:13px;font-weight:900;}
.msg-ai{background:var(--surface-2);border:.5px solid var(--border-med);border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);padding:12px 14px;font-size:var(--fs-base);line-height:1.75;color:rgba(var(--ink),.9);}
.chat-input-row{display:flex;gap:8px;padding:12px 4px 0;border-top:.5px solid var(--border);}
.chat-input{flex:1;background:var(--surface-2);border:.5px solid var(--border-med);border-radius:var(--r-sm);padding:12px 14px;color:var(--cream);font-size:16px;font-family:var(--font-sans);resize:none;outline:none;max-height:120px;}   /* 16px 미만이면 iOS가 포커스 때 화면을 확대한다 */
.send-btn{background:linear-gradient(135deg,var(--gold-brand,#ffcf6b),var(--pink));border:none;border-radius:var(--r-sm);width:44px;height:44px;cursor:pointer;font-size:18px;flex-shrink:0;}
.quick-btn{background:var(--surface-1);border:.5px solid rgba(255,207,107,.15);border-radius:var(--r-pill);padding:9px 14px;font-size:var(--fs-sm);font-weight:700;color:rgba(var(--ink),.6);cursor:pointer;white-space:nowrap;transition:all .18s;}
.quick-btn:active,.quick-btn:hover{background:rgba(255,207,107,.1);color:var(--gold);border-color:rgba(255,207,107,.4);}
/* ── 1:1 채팅 개편(2026-09-26) — 대화 상대(그 상품 캐릭터)를 화면 중심에. 웹 조사: 인기 상담 서비스는 상담사 얼굴·이름·전문 분야 태그가 먼저 보인다 ── */
.chat-hd{display:flex;align-items:center;gap:10px;min-width:0;}
.chat-hd-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 15%;flex-shrink:0;background:var(--surface-2);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--pink);}
.chat-hd-txt{min-width:0;}
.chat-hd-name{font-size:16px;font-weight:900;color:var(--cream);letter-spacing:-.01em;line-height:1.2;}
.chat-hd-role{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-hd-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;}
.chat-free-pill{cursor:default;gap:0;}
.cprof{display:flex;gap:14px;align-items:stretch;background:linear-gradient(160deg,rgba(255,95,150,.10),rgba(255,207,107,.05) 60%,transparent);border:.5px solid var(--border-med);border-radius:var(--r-lg);padding:14px;margin:4px 0 6px;}
.cprof-photo{width:104px;flex-shrink:0;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);aspect-ratio:3/4;max-width:100%;}
.cprof-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;}
.cprof-body{min-width:0;display:flex;flex-direction:column;gap:6px;}
.cprof-name{font-family:var(--font-display);font-size:22px;color:var(--cream);line-height:1.1;}
.cprof-role{font-size:12px;color:var(--muted);font-weight:700;}
.cprof-tags{display:flex;flex-wrap:wrap;gap:5px;}
.cprof-tag{font-size:12px;font-weight:700;color:var(--gold);background:rgba(255,207,107,.08);border:.5px solid rgba(255,207,107,.25);border-radius:var(--r-pill);padding:3px 8px;}
.cprof-hello{font-size:13px;line-height:1.55;color:rgba(var(--ink),.88);border-left:2px solid var(--pink);padding-left:8px;margin-top:2px;}
.cprof-meta{font-size:12px;color:var(--muted);margin-top:auto;}
.cprof-open{margin-top:8px;align-self:flex-start;font:inherit;font-size:12.5px;font-weight:800;color:var(--pink);background:rgba(var(--ink),.06);border:1px solid var(--pink);border-radius:999px;padding:7px 14px;cursor:pointer;}
.cprof-open:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.msg-row.ai{gap:8px;align-items:flex-start;max-width:88%;}
.msg-row.ai.cont{margin-top:-6px;}
.msg-row.ai.cont .msg-ava-sm{visibility:hidden;}
.msg-row.ai .msg-ava-sm{width:34px;height:34px;}
.msg-ai-col{display:flex;flex-direction:column;gap:4px;min-width:0;}
.msg-name{font-size:12px;font-weight:800;color:rgba(var(--ink),.7);padding-left:2px;}
.chat-paywall{margin:8px 0 4px;background:linear-gradient(160deg,#241a2c,#1b1a21);border:1px solid rgba(255,95,150,.45);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-pop);}
.cpw-top{display:flex;gap:10px;align-items:flex-start;}
.cpw-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 15%;flex-shrink:0;box-shadow:0 0 0 2px var(--pink);}
.cpw-say{font-size:14.5px;line-height:1.5;color:var(--cream);background:var(--surface-2);border-radius:4px var(--r-md) var(--r-md) var(--r-md);padding:10px 12px;}
.cpw-say b{display:block;font-size:12px;color:var(--pink);margin-bottom:2px;}
.cpw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.cpw-list li{font-size:13px;color:rgba(var(--ink),.85);padding-left:20px;position:relative;}
.cpw-list li::before{content:'';position:absolute;left:4px;top:5px;width:8px;height:4px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);}
.cpw-btn{border:0;border-radius:var(--r-md);padding:14px;font-size:15px;font-weight:900;color:#1a1020;background:linear-gradient(135deg,var(--gold-brand,#ffcf6b),var(--pink));cursor:pointer;font-family:var(--font-sans);}
.cpw-btn:focus-visible{outline:2px solid var(--cream);outline-offset:2px;}
.cpw-note{font-size:12px;color:var(--muted);text-align:center;}
.quick-btns.followups{margin:0 0 4px 42px;gap:6px;}
.quick-btns.followups .quick-btn-sm{border-color:rgba(255,95,150,.35);color:var(--cream);background:rgba(255,95,150,.08);text-align:left;}
.quick-btns.followups .quick-btn-sm:active{background:rgba(255,95,150,.2);}
.msg-share{align-self:flex-start;background:none;border:0;padding:4px 2px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:var(--font-sans);text-decoration:underline;text-underline-offset:3px;}
.msg-share:active,.msg-share:hover{color:var(--pink);}
.msg-share:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:4px;}
.typing-cur{display:inline-block;width:2px;height:15px;background:var(--gold);margin-left:3px;animation:blink .6s infinite;vertical-align:middle;border-radius:1px;}
@keyframes blink{0%,100%{opacity:0;}50%{opacity:1;}}
/* ── 하단 네비게이션 ──
   예전엔 이모지 아이콘에 opacity로만 선택 표시를 해서, 위쪽 카탈로그와 톤이
   맞지 않고 "지금 어디인지"도 잘 안 보였다. 선으로 그린 아이콘 + 금색으로 바꿨다. */
/* 플로팅 필 내비게이션 — 타이트사주 참고(2026-09-12): 화면에 붙지 않고 좌우 여백을 두고 뜬 캡슐,
   반투명+블러, 선택 탭은 밑줄 대신 아이콘 뒤에 옅은 배경 필이 생기는 방식으로 변경. */
/* 2026-09-28 사장님: "아이폰처럼 투명 리퀴드 느낌" — 유리 캡슐 + 고른 탭으로 미끄러지는 유리 렌즈.
   바탕은 거의 투명(뒤가 비침) + 강한 흐림·채도, 가장자리는 빛 받는 테두리(::before), 위쪽 광택(::after).
   아이콘은 선(평소) → 채움(고른 탭). 색은 --glass-* 토큰이라 다크·라이트가 같이 따라간다. */
.bottom-nav{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 36px);max-width:420px;z-index:100;padding:5px;border-radius:999px;isolation:isolate;
  background:var(--glass-bg);backdrop-filter:blur(22px) saturate(1.9) brightness(var(--glass-bright));-webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(var(--glass-bright));
  box-shadow:var(--glass-shadow);}
.bottom-nav::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(140deg,var(--glass-rim-hi),var(--glass-rim-lo) 32%,var(--glass-rim-lo) 68%,var(--glass-rim-mid));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);}
.bottom-nav::after{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(180deg,var(--glass-sheen) 0%,transparent 48%);}
.nav-items{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);width:100%;flex:1 1 auto;}
/* width:100%와 flex:1을 같이 준 이유 — switchView()가 .bottom-nav에 display:flex를 직접 넣는다.
   그러면 .nav-items가 flex 아이템이 되어 내용물 크기로 줄어든다. 부모가 block이든 flex든 가로를 꽉 채우게 둘 다 지정. */
.nav-lens{position:absolute;top:0;bottom:0;left:0;width:25%;border-radius:999px;pointer-events:none;
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .55s cubic-bezier(.3,1.35,.45,1);
  background:var(--lens-bg);box-shadow:var(--lens-shadow);}
.nav-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 2px 6px;border-radius:999px;cursor:pointer;color:var(--nav-fg);transition:color .25s ease;-webkit-tap-highlight-color:transparent;}
.nav-icon{display:block;width:23px;height:23px;transition:transform .3s cubic-bezier(.3,1.5,.5,1);}
.nav-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;transition:fill .2s ease;}
.nav-item:active .nav-icon{transform:scale(.86);}
.nav-label{font-size:12px;font-weight:600;color:currentColor;letter-spacing:-.01em;}
.nav-item.active{color:var(--nav-accent);}
.nav-item.active .nav-icon svg{fill:currentColor;}
.nav-item.active .nav-label{font-weight:800;}
@media (prefers-reduced-motion:reduce){.nav-lens,.nav-icon{transition:none;}}
/* ── 결과 화면 하단 바 (컷 넘기기) — 위 네비와 같은 톤으로 맞춘다 ── */
.cardnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:100;background:rgba(14,10,26,.88);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-top:.5px solid rgba(var(--ink),.07);box-shadow:0 -8px 28px rgba(0,0,0,.5);padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:center;gap:10px;}
.cardnav::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,207,107,.4),transparent);}
.cn-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;border:.5px solid rgba(var(--ink),.1);background:rgba(var(--ink),.05);color:var(--cream);cursor:pointer;transition:all .16s ease;-webkit-tap-highlight-color:transparent;padding:0;}
.cn-btn svg{width:19px;height:19px;display:block;}
.cn-btn:active{transform:scale(.9);background:rgba(var(--ink),.11);}
.cn-btn.ghost{background:none;border-color:transparent;color:var(--muted);}
.cn-btn.ghost:active{background:rgba(var(--ink),.07);}
.cn-btn[disabled]{opacity:.28;pointer-events:none;}
.cn-div{width:1px;height:20px;background:rgba(var(--ink),.1);}
.cn-idx{font-size:12px;font-weight:800;color:var(--muted);min-width:56px;text-align:center;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.cn-idx b{color:var(--gold);font-weight:900;}
.coin-sheet{background:var(--bg-card);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:480px;padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));max-height:85vh;max-height:85dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;}
/* 시트 안의 동의 체크박스 — 손가락으로 누르는 자리라 최소 22px + 여백 */
.sheet-agree input[type=checkbox]{width:22px;height:22px;flex-shrink:0;}
.sheet-agree{padding:6px 0;}
.sheet-handle{width:36px;height:4px;border-radius:999px;background:rgba(var(--ink),.2);margin:0 auto 14px;}
.age-gate-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;}
.age-gate-inner{background:var(--bg-card);border-radius:var(--r-lg);padding:28px 24px;max-width:360px;width:100%;text-align:center;}
.legal-sheet{background:var(--bg-card);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:480px;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;}
.legal-tabs{display:flex;gap:6px;padding:16px 16px 0;flex-shrink:0;}
.legal-tab{flex:1;text-align:center;padding:10px 4px;border-radius:var(--r-sm);font-size:12.5px;font-weight:800;color:var(--muted);background:var(--surface-2);cursor:pointer;}
.legal-tab.active{background:rgba(255,207,107,.15);color:var(--gold);}
.legal-body{padding:16px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;font-size:12.5px;line-height:1.75;color:var(--muted);}
.legal-body h3{font-size:14.5px;color:var(--cream);margin:18px 0 8px;}
.legal-body h3:first-child{margin-top:0;}
.legal-body p,.legal-body li{margin-bottom:7px;}
.legal-doc{display:none;}
.legal-doc.active{display:block;}
@keyframes fade-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes slide-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes cat-bounce{0%,100%{transform:translateY(0) scale(1);}30%{transform:translateY(-14px) scale(1.05);}60%{transform:translateY(-6px) scale(0.98);}}
.hero-card{animation:slide-up .4s ease;}
.product-card{animation:slide-up .35s ease both;}
.card{animation:slide-up .3s ease;}
/* 채팅 뷰 */
#view-chat{display:none;flex-direction:column;height:100vh;}

/* 이달의 운 — 홈 상단. 생년월일을 한 번이라도 넣은 사람에겐 개인화된 카드, 아니면 입력 유도 */
.ml-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:var(--sp-4);box-shadow:var(--shadow-card);}
.ml-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.ml-title{font-size:var(--fs-md);font-weight:800;color:var(--cream);}
.ml-when{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600;}
.ml-row{display:flex;align-items:center;gap:12px;}
.ml-gz{font-size:30px;font-weight:900;color:var(--hi);line-height:1;font-family:serif;}
.ml-gz small{display:block;font-size:12px;color:var(--muted);font-weight:600;font-family:var(--font-sans);margin-top:2px;}
.ml-body{flex:1;min-width:0;}
.ml-grade{font-size:13px;font-weight:800;color:var(--gold);}
.ml-text{font-size:12.5px;color:rgba(var(--ink),.78);line-height:1.55;margin-top:3px;}
.ml-bar{display:flex;gap:3px;margin-top:10px;}
.ml-bar i{flex:1;height:6px;border-radius:3px;background:rgba(var(--ink),.08);}
.ml-bar i.on{background:var(--gold);} .ml-bar i.now{outline:1.5px solid #fff;}
.ml-foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--muted);}
.ml-foot button{margin-left:auto;background:rgba(255,207,107,.15);border:.5px solid rgba(255,207,107,.35);color:var(--gold);border-radius:999px;padding:9px 14px;min-height:36px;font-size:12px;font-weight:800;cursor:pointer;}

/* 움직임 줄이기 설정을 켠 사람에겐 애니메이션을 멈춘다 (접근성) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* 채팅 속 상품 추천 칩 */
.chat-upsell{margin:6px 0 10px 44px;background:linear-gradient(135deg,rgba(255,207,107,.10),rgba(255,95,150,.08));border:.5px solid rgba(255,207,107,.3);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.chat-upsell-txt{font-size:12.5px;color:var(--cream);line-height:1.5;}
.chat-upsell-btn{align-self:flex-start;background:var(--gold);color:#1a1020;border:0;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;}

/* 결제 유도 카드 — 잠긴 챕터 제목 목록 */
.pw-locked{text-align:left;background:rgba(0,0,0,.22);border:.5px solid var(--border-soft);border-radius:var(--r-md);padding:10px 12px;margin-bottom:14px;}
.pw-locked-item{font-size:12.5px;color:var(--cream);padding:4px 0;border-bottom:.5px dashed rgba(var(--ink),.06);}
.pw-locked-item:last-of-type{border-bottom:0;}
.pw-locked-more{font-size:12px;color:var(--muted);margin-top:6px;}
.pw-locked-head{font-size:13px;font-weight:800;color:var(--gold);margin:0 0 6px;}
.pw-locked-item em{display:block;font-style:normal;font-size:12px;color:var(--muted);padding-left:20px;margin-top:1px;}
/* 기간이 정해진 상품(월운)의 고지 — 결제 버튼 바로 위에서 "몇 월치인지"를 알려준다 */
.pw-note{text-align:left;font-size:12px;line-height:1.6;color:var(--muted);background:rgba(52,211,153,.08);border:.5px solid rgba(52,211,153,.28);border-radius:var(--r-md);padding:9px 11px;margin-bottom:12px;}

/* 명식 카드 하단 — 정적 사전 페이지 링크 */
.ms-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:.5px solid var(--border-soft);}
.ms-links a{font-size:12px;color:var(--muted);background:rgba(var(--ink),.04);border:.5px solid var(--border-soft);border-radius:999px;padding:5px 10px;text-decoration:none;}
.ms-links a:hover{color:var(--gold);}

/* 홈 FAQ */
.faq{background:var(--surface-1);border:.5px solid var(--border-soft);border-radius:var(--r-md);padding:10px 14px;margin:6px 0 10px;font-size:12.5px;color:var(--muted);}
.faq summary{cursor:pointer;font-weight:800;color:var(--cream);font-size:13px;list-style:none;}
.faq summary::before{content:'❓ ';}
.faq-item{margin-top:10px;} .faq-item b{color:var(--cream);display:block;margin-bottom:2px;} .faq-item p{margin:0;line-height:1.55;}

/* 포지셔닝 카드 — 저렴·쉬움·재미. 히어로 바로 아래(첫 화면)에 두는 카드라 눈에 띄게 강조한다(2026-09-20) */
.why-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px 16px;margin:10px 0 26px;}
.why-kicker{font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--pink,#ff5f96);margin-bottom:6px}
.why-head{font-size:17px;font-weight:800;line-height:1.45;margin-bottom:14px}
.why-head b{color:var(--pink)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.why-item{background:rgba(var(--ink),.04);border:0;border-radius:12px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center}
.why-ic{font-size:22px}
.why-item b{font-size:13px}
.why-item small{font-size:12px;line-height:1.4;color:var(--muted,#9a94ad)}
@media (max-width:360px){.why-grid{grid-template-columns:1fr}.why-head{font-size:16px}}

/* 명식 카드 쉬운 요약(기본) + 전문 영역 접기 — 2026-09-19 */
.ms-easy{text-align:center;padding:14px 4px 6px}
.ms-easy-alias{font-size:19px;font-weight:800;color:var(--hi);letter-spacing:-.01em;margin-bottom:6px}
.ms-easy-me{font-size:13.5px;color:rgba(var(--ink),.72);margin-bottom:10px}
.ms-easy-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.ms-easy-chips span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(var(--ink),.05);border:.5px solid rgba(var(--ink),.12);color:rgba(var(--ink),.7)}
.ms-easy-el{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px 6px 8px;border-top:.5px solid var(--border-soft);border-bottom:.5px solid var(--border-soft);margin-bottom:12px}
.ms-easy-el-bar{height:44px;display:flex;align-items:flex-end;justify-content:center}.ms-easy-el-bar i{display:block;width:14px;border-radius:6px 6px 2px 2px}
.ms-easy-el-pct{font-size:12px;font-weight:800;margin-top:4px}.ms-easy-el-name{font-size:12px;color:rgba(var(--ink),.45)}
.ms-guide{display:flex;align-items:center;gap:10px;text-align:left;margin:0 2px 14px;padding:10px 12px;border-radius:16px;background:rgba(var(--ink),.05);border:.5px solid var(--border-soft)}
.ms-guide img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none;border:1.5px solid rgba(var(--gold-rgb),.55)}
.ms-guide-say{font-size:13px;line-height:1.5;color:rgba(var(--ink),.8)}.ms-guide-say b{display:block;font-size:12px;color:rgba(var(--gold-rgb),.85);font-weight:800;margin-bottom:1px}
.cm-card{background:rgba(var(--ink),.04);border-radius:20px;padding:18px 18px 8px;margin:14px 0;text-align:center}
.cm-lab{font-size:12px;font-weight:700;color:rgba(var(--ink),.55)}.cm-lab b{color:rgba(var(--gold-rgb),.95);font-size:13px;margin-left:2px}
.cm-top{font-size:26px;font-weight:900;color:var(--hi);margin:8px 0 2px;letter-spacing:-.01em}.cm-top small{display:block;font-size:12px;font-weight:700;color:rgba(var(--ink),.45);margin-bottom:2px}
.cm-desc{font-size:13px;color:rgba(var(--ink),.7);margin-bottom:6px}
.cm-line{font-size:13px;font-weight:700;color:rgba(var(--gold-rgb),.85);margin-bottom:16px}
.cm-row{margin-bottom:12px;text-align:left}.cm-row-hd{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--hi);margin-bottom:5px}.cm-row-hd span+span{font-size:12.5px;font-weight:800}
.cm-bar{background:rgba(var(--ink),.08);border-radius:999px;height:8px;overflow:hidden}.cm-bar i{display:block;height:100%;border-radius:999px;transition:width .8s ease}
.ms-easy-sub{font-size:12px;font-weight:800;color:rgba(var(--ink),.45);margin:2px 0 6px}
.ms-easy-sinsal{list-style:none;margin:0 auto 12px;padding:0;display:inline-flex;flex-direction:column;gap:4px;text-align:left;font-size:12.5px;color:rgba(var(--ink),.75)}
.ms-easy-sinsal li{display:flex;align-items:center;gap:7px}.ms-easy-sinsal li i{width:7px;height:7px;border-radius:50%;flex:none}
.ms-easy-unse{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-size:12px;color:rgba(var(--ink),.7)}.ms-easy-unse span{background:rgba(var(--ink),.04);border:.5px solid var(--border-soft);border-radius:10px;padding:6px 10px}
.ms-pro{margin-top:10px;border-top:.5px solid var(--border-soft)}
.ms-pro summary{cursor:pointer;list-style:none;text-align:center;font-size:12px;font-weight:700;color:rgba(var(--gold-rgb),.75);padding:10px 0 6px;-webkit-tap-highlight-color:transparent}
.ms-pro summary::-webkit-details-marker{display:none}.ms-pro summary::after{content:" ▾";opacity:.7}.ms-pro[open] summary::after{content:" ▴"}
.ms-pro summary small{display:block;font-size:12px;font-weight:600;color:rgba(var(--ink),.35);margin-top:2px}
.ms-pro-body{padding-top:4px}
/* 사업자 정보 푸터 (홈 맨 아래) */
.biz-foot{margin:22px 0 8px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;line-height:1.75;color:var(--muted);}
.biz-links{margin-top:8px;}
.biz-links span{cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
/* 19금 배지 — 🔞 이모지는 폰에서 "18"로 그려져 만 19세 안내와 숫자가 어긋난다 */
.age19{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;border:3px solid #fb7185;color:#fb7185;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;}

/* 2026-09-24 청월당식 두 층(사장님 "맞아"): 웹툰 부분(.wt-strip) = 화면 끝까지 붙은 같은 캐릭터 그림 + 짧은 대사(그림 안 말풍선·해설 네모),
   풀이 부분(.rd-*) = AI 긴 글을 읽기 좋은 글로, 사이사이 정보 카드(.saju-card). 컷 사이는 검은 틈 대신 배경으로 번지게. */
.wt-strip{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:30px -18px 6px;}
.cast-intro.wt-strip{margin-top:0;border:0;border-radius:0;background:none;padding:0;aspect-ratio:auto;overflow:visible;}
.cast-intro.wt-strip::after{display:none;}
.chapter-cover.wt-strip{aspect-ratio:auto;min-height:0;padding:0;border-radius:0;background:none;display:flex;justify-content:flex-start;margin-top:36px;overflow:visible;}
.chapter-cover.wt-strip::before,.chapter-cover.wt-strip::after{display:none;}
.chapter-cover.wt-strip>*{position:relative;}
/* 얼굴이 잘리지 않게(사장님 9/24): 틀 비율 = 그림 비율(미드저니 --ar 3:4) → 잘라내는 곳이 없다. 대사·해설은 그림 아래쪽(몸통 쪽)에만 얹는다. */
.wt-frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:3/4;background:var(--bg);}
.wt-frame-sq{aspect-ratio:3/4;}
.wt-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.wt-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 72%,var(--bg) 100%);}
.wt-caption-box{position:absolute;z-index:2;left:16px;bottom:18px;max-width:80%;background:#fff6d8;color:#1a1020;border:2px solid #1a1020;box-shadow:3px 3px 0 #1a1020;padding:10px 14px;font-size:14px;line-height:1.55;word-break:keep-all;}
.wt-caption-box b{font-weight:900;}.wt-caption-box span{color:#6b5d63;font-weight:700;}
.wt-caption-box .cast-sub{color:#6b5d63;margin:4px 0 0;font-size:12px;}
.wt-cap-bottom{bottom:22px;}
.wt-caption-box .chapter-badge{background:#1a1020;color:#fff6d8;border:0;backdrop-filter:none;padding:2px 9px;font-size:12px;margin-bottom:6px;}
.wt-caption-box .chapter-title{font-size:24px;color:#1a1020;text-shadow:none;margin-bottom:4px;}
.wt-caption-box .chapter-sub{color:#6b5d63;font-size:12px;}
.wt-caption-box .wt-scene-no{color:#b4530a;text-shadow:none;margin-bottom:2px;}
#cut-scroll .wt-caption-box .wt-section-lbl{color:#1a1020;text-shadow:none;font-size:19px;}
.wt-balloon{position:absolute;z-index:2;bottom:20px;max-width:66%;background:#fff;color:#1a1020;border:2px solid #1a1020;border-radius:50%;padding:20px 22px;font-family:var(--font-bubble);font-size:16px;line-height:1.45;text-align:center;word-break:keep-all;}
.wt-balloon::after{content:'';position:absolute;top:-11px;width:16px;height:16px;background:#fff;border-left:2px solid #1a1020;border-top:2px solid #1a1020;transform:rotate(45deg) skew(12deg,12deg);}
.wt-b-right{right:16px;}.wt-b-right::after{left:26%;}
.wt-b-left{left:16px;}.wt-b-left::after{right:26%;}
.wt-b-bottom{bottom:18px;left:14px;right:14px;max-width:none;border-radius:22px;padding:14px 18px;text-align:left;}
.wt-b-bottom::after{left:30px;}
.wt-strip-title{padding:0 18px 10px;}
.wt-strip-title .wt-scene-no{text-shadow:none;margin-bottom:3px;}
#cut-scroll .wt-strip-title .wt-section-lbl{font-size:21px;text-shadow:none;}
.wt-b-bottom .wt-bubble{background:none;box-shadow:none;padding:0;border-radius:0;font-size:16px;}
.wt-toc{display:flex;flex-direction:column;gap:6px;padding:4px 18px 0;}
.wt-toc div{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;color:rgba(var(--ink),.85);background:rgba(var(--ink),.06);border-radius:10px;padding:9px 12px;}
.wt-toc b{color:var(--pink);font-size:12px;}
/* 풀이 부분 — 읽기 좋은 글 */
.rd-head{display:flex!important;align-items:center;gap:12px;margin:34px 4px 6px;}
.rd-face{flex:0 0 auto;width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 14%;border:1.5px solid var(--gold);}
#cut-scroll .rd-head .wt-section-lbl{font-size:21px;text-shadow:none;}
.rd-head .wt-scene-no{text-shadow:none;margin-bottom:3px;}
.rd-hook{margin:8px 4px 10px;padding:4px 0 4px 14px;border-left:3px solid var(--pink);font-family:var(--font-display);font-size:19px;line-height:1.55;color:var(--hi);word-break:keep-all;}
.rd-p{margin:0 6px 4px;font-size:16px;line-height:1.95;color:rgba(255,248,240,.88);word-break:keep-all;}
.rd-p strong,.rd-hook strong{color:var(--gold)!important;}
.rd-say{padding:6px 16px;}
.wt-speech-strip{margin-top:34px;}
/* 정보 카드 */
.saju-card{margin:18px 2px 6px;background:linear-gradient(160deg,rgba(var(--ink),.07),rgba(var(--ink),.02));border:1px solid rgba(255,207,107,.25);border-radius:16px;padding:16px 16px 14px;}
.sc-title{font-family:var(--font-display);font-size:18px;color:var(--hi);margin-bottom:12px;}
.sc-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px;color:rgba(var(--ink),.85);flex-wrap:wrap;}
.sc-k{width:28px;font-weight:800;}.sc-v{width:62px;color:var(--muted);font-size:12px;}
.sc-bar{flex:1;min-width:90px;height:10px;background:rgba(var(--ink),.08);border-radius:99px;overflow:hidden;}
.sc-bar i{display:block;height:100%;border-radius:99px;}
.sc-목{background:#4ade80}.sc-화{background:#fb7185}.sc-토{background:#fbbf24}.sc-금{background:#e5e7eb}.sc-수{background:#60a5fa}
.sc-tag{font-style:normal;font-size:12px;font-weight:800;padding:2px 7px;border-radius:99px;}
.sc-tag.good{background:rgba(74,222,128,.15);color:#4ade80}.sc-tag.bad{background:rgba(251,113,133,.15);color:#fb7185}
.sm-chart{display:flex;align-items:flex-end;gap:4px;height:110px;padding-top:6px;}
.sm-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;}
.sm-col i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:rgba(var(--ink),.18);}
.sm-col span{font-size:12px;color:var(--muted);}
.sm-col.best i{background:var(--gold);}.sm-col.worst i{background:#fb7185;}
.sm-col.now span{color:var(--hi);font-weight:900;}.sm-col.now i{outline:2px solid #fff;outline-offset:1px;}
.sc-foot{margin-top:10px;font-size:12px;color:var(--muted);}
.sc-k-wide{width:86px;}
.sc-dots{flex:1;display:flex;gap:6px;}.sc-dots i{flex:1;max-width:30px;height:10px;border-radius:99px;background:rgba(var(--ink),.1);}.sc-dots i.on{background:var(--gold);}
.sc-in{color:var(--gold);}.sc-out{color:#fb7185;}
.scal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.scal-cell{border-radius:10px;padding:8px 4px;text-align:center;background:rgba(var(--ink),.05);}
.scal-cell b{display:block;font-size:13px;color:var(--hi);}.scal-cell span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.scal-cell.best{background:rgba(255,207,107,.18);}.scal-cell.best span{color:var(--gold);font-weight:800;}
.scal-cell.worst{background:rgba(251,113,133,.12);}.scal-cell.worst span{color:#fb7185;}
.scal-cell.now{outline:2px solid #fff;outline-offset:-2px;}
.sc-line{display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:13px;line-height:1.55;color:rgba(var(--ink),.88);}
.sc-line b{display:block;font-size:12px;color:var(--gold);margin-bottom:2px;}
.sc-chip{flex:none;width:14px;height:14px;border-radius:4px;margin-top:3px;}
.wt-scene{margin-top:26px;}
/* 재연 컷은 아직 안 뽑은 게 많다 — 자리를 미리 잡지 않고(빈 3:4 칸 방지) 그림이 오면 그 높이만큼 */
.wt-scene .wt-frame{aspect-ratio:auto;min-height:0;}
.wt-scene .wt-frame img{position:static;width:100%;height:auto;display:block;}
.wt-say{margin-top:30px;}
.sm-chart.sm-4 .sm-col{flex:1;} .sm-chart.sm-4 span{font-size:12px;}
.mt-verdict{display:inline-block;font-family:var(--font-display);font-size:22px;color:var(--gold);margin:-4px 0 6px;}
.sc-dual{flex:1;min-width:90px;display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.sc-dual i{display:block;height:7px;border-radius:99px;}.sc-dual i.you{opacity:.55;}
.sc-legend{display:flex;gap:12px;font-size:12px;color:var(--muted);margin:-6px 0 6px;}
.sm-pair .sm-bars{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;height:100%;}
.sm-pair .sm-bars i{flex:1;border-radius:5px 5px 2px 2px;background:rgba(var(--ink),.18);}
.sm-pair .sm-col.best .sm-bars i{background:var(--gold);} .sm-pair .sm-bars i.you{opacity:.6;}
.pw-crisis{display:flex;gap:12px;align-items:center;text-align:left;background:rgba(var(--ink),.05);border-radius:12px;padding:10px 12px;margin:0 0 12px;}
.pw-crisis b{display:block;font-size:13px;color:var(--hi);}.pw-crisis span{font-size:12px;color:var(--muted);}
.pw-cal{flex:none;display:grid;grid-template-columns:repeat(4,12px);gap:3px;filter:blur(1.5px);}
.pw-cal i{width:12px;height:12px;border-radius:3px;background:rgba(var(--ink),.18);}.pw-cal i.on{background:#fb7185;border-radius:50%;}
.ch-score{display:flex;align-items:baseline;gap:6px;justify-content:center;}.ch-score b{font-family:var(--font-display);font-size:54px;color:var(--gold);line-height:1;}.ch-score span{color:var(--muted);}
.ch-dots{justify-content:center;margin:8px 0 2px;}
.sc-verdict{text-align:center;}.vd-stamp{display:inline-block;margin:6px auto 4px;padding:8px 26px;border:4px double currentColor;border-radius:10px;font-family:var(--font-display);font-size:40px;transform:rotate(-6deg);}
.v-go .vd-stamp{color:#4ade80;}.v-wait .vd-stamp{color:var(--gold);}.v-stop .vd-stamp{color:#fb7185;}
.kk-wrap{margin:14px 16px 6px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.kk-label{font-size:12px;color:var(--muted);}
.kk-bubble{max-width:82%;background:#fee500;color:#191919;border-radius:14px 14px 2px 14px;padding:10px 13px;font-size:14px;line-height:1.5;user-select:text;}
.kk-copy{font:inherit;font-size:12px;font-weight:800;padding:5px 12px;border-radius:99px;border:1px solid rgba(var(--ink),.35);background:transparent;color:var(--hi);cursor:pointer;}
.kk-blur{display:inline-block;filter:blur(3px);user-select:none;}
.pw-cal i.gold{background:var(--gold);}
.pw-cal.pw-bars{display:flex;align-items:flex-end;gap:3px;height:24px;}.pw-cal.pw-bars i{width:7px;border-radius:2px;}
.tz-row{display:flex;flex-direction:column;gap:10px;margin:14px 2px 6px;}
.tz-card{display:block;text-decoration:none;background:linear-gradient(160deg,rgba(var(--ink),.08),rgba(var(--ink),.02));border:1px solid rgba(255,207,107,.3);border-radius:14px;padding:12px 14px;color:var(--hi);}
.tz-card .tz-k{display:block;font-size:12px;color:var(--muted);}.tz-card b{display:block;font-family:var(--font-display);font-weight:400;font-size:19px;color:var(--gold);margin:2px 0 6px;}
.tz-card .tz-cta{font-size:12px;font-weight:800;color:var(--hi);}.tz-card .tz-cta::after{content:' →';}
.wy-name{font-size:14px;color:rgba(var(--ink),.8);}.wy-name.top{font-family:var(--font-display);font-size:20px;color:var(--gold);}
.pw-guide{display:flex;gap:10px;align-items:center;text-align:left;margin:0 0 12px;}
.pw-say{font-family:var(--font-bubble,inherit);background:#fff;color:#1a1020;border-radius:14px;padding:8px 12px;font-size:13px;line-height:1.45;}
.pw-guide img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;}
/* 미래 배우자 인상 — 결제 전엔 흐린 실루엣, 결제 뒤 제미나이 그림(3:4, 얼굴 위쪽 기준) */
.sp-frame{position:relative;width:100%;max-width:300px;margin:4px auto 12px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,rgba(255,143,179,.25),rgba(20,10,24,.9));}
.sp-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.sp-sil{position:absolute;inset:0;filter:blur(10px);opacity:.7;background:radial-gradient(circle at 50% 36%,rgba(var(--ink),.55) 0 17%,transparent 18%),radial-gradient(ellipse 46% 30% at 50% 88%,rgba(var(--ink),.45) 0 98%,transparent 100%);}
.sp-msg{position:absolute;left:10px;right:10px;bottom:12px;text-align:center;font-size:13px;color:var(--hi);line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.6);}
.sp-pick{display:flex;gap:8px;justify-content:center;margin-top:8px;}
.sp-pick button,.sp-retry,.sp-swap{font:inherit;font-size:12.5px;font-weight:800;padding:7px 14px;border-radius:99px;border:1px solid rgba(var(--ink),.5);background:rgba(0,0,0,.35);color:var(--hi);cursor:pointer;}
.sp-swap{position:absolute;right:10px;bottom:10px;padding:5px 10px;font-size:12px;}
/* 9/30 얼굴을 실사 사진풍으로 — 실제 사람처럼 보여서 'AI가 만든 가상 인물'을 그림 위에 늘 붙인다 */
.sp-ai{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.45);color:var(--hi);pointer-events:none;}
.sp-spin{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:2px solid rgba(var(--ink),.35);border-top-color:#fff;border-radius:50%;animation:sp-rot 1s linear infinite;}
@keyframes sp-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sp-spin{animation:none}}
.sp-name{font-family:var(--font-display);font-size:20px;color:var(--gold);text-align:center;}
.sp-desc{font-size:13px;color:rgba(var(--ink),.85);text-align:center;margin-top:4px;line-height:1.6;}
.sp-pro{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(var(--ink),.05);display:grid;gap:6px;text-align:left;}
.sp-pro>div{display:grid;grid-template-columns:5.5em 1fr;gap:8px;align-items:baseline;}
.sp-pro dt{font-size:12px;font-weight:700;color:var(--muted);}
.sp-pro dd{margin:0;font-size:14px;line-height:1.55;color:rgba(var(--ink),.9);}
.pw-spouse{display:flex;gap:12px;align-items:center;text-align:left;background:rgba(var(--ink),.05);border-radius:12px;padding:10px 12px;margin:0 0 12px;}
.pw-spouse .sp-sil{position:relative;flex:none;width:54px;height:72px;border-radius:10px;background-color:rgba(255,143,179,.15);}
.pw-spouse b{display:block;font-size:13px;color:var(--hi);}.pw-spouse span{font-size:12px;color:var(--muted);}
/* 이번 달(2026-09-24 콘티) — 날씨 4칸·행운의 날 달력. 그림 문자 대신 CSS 도형(해·구름·비) */
.wx-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;}
.wx-row.wx-one{grid-template-columns:1fr;max-width:140px;margin-left:auto;margin-right:auto;}
.wx-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:rgba(var(--ink),.05);}
.wx-cell b{font-size:12px;opacity:.8;font-weight:600;}
.wx-cell em{font-style:normal;font-size:14px;font-weight:700;}
.wx-ic{position:relative;width:26px;height:26px;display:block;}
.wx-sun .wx-ic{border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(255,207,107,.6);}
.wx-sun em{color:var(--gold);}
.wx-cloud .wx-ic::before,.wx-rain .wx-ic::before{content:"";position:absolute;left:1px;right:1px;top:8px;height:12px;border-radius:8px;background:#cbd5e1;}
.wx-cloud .wx-ic::after,.wx-rain .wx-ic::after{content:"";position:absolute;left:7px;top:2px;width:13px;height:13px;border-radius:50%;background:#cbd5e1;}
.wx-rain .wx-ic::before,.wx-rain .wx-ic::after{background:#94a3b8;}
.wx-rain .wx-ic{background:linear-gradient(#60a5fa,#60a5fa) 7px 22px/2px 4px no-repeat,linear-gradient(#60a5fa,#60a5fa) 13px 22px/2px 4px no-repeat,linear-gradient(#60a5fa,#60a5fa) 19px 22px/2px 4px no-repeat;}
.wx-rain em{color:#93c5fd;}
.mc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px;text-align:center;font-size:12px;}
.mc-cal span{width:28px;height:28px;line-height:28px;margin:0 auto;border-radius:50%;opacity:.75;}
.mc-cal .mc-h{opacity:.5;font-size:12px;border-radius:0;height:auto;line-height:1.6;}
.mc-cal .good{background:var(--gold);color:#1f1730;font-weight:700;opacity:1;}
.mc-cal .bad{box-shadow:inset 0 0 0 2px #60a5fa;color:#93c5fd;font-weight:700;opacity:1;}
.pw-cal i.rain{background:#60a5fa;}
/* 속궁합(2026-09-24 콘티) — 두 사람 밤 온도계 5칸 */
.ht-bar{display:flex;gap:4px;margin:8px 0 4px;}
.ht-bar i{flex:1;height:14px;border-radius:7px;background:rgba(var(--ink),.1);}
.ht-bar i.on{background:linear-gradient(90deg,#f472b6,#e11d48);box-shadow:0 0 8px rgba(225,29,72,.5);}
.pw-cal.ht-bar{display:flex;flex-direction:column-reverse;width:14px;gap:2px;margin:0;}
.pw-cal.ht-bar i{width:14px;height:6px;flex:none;border-radius:3px;background:linear-gradient(90deg,#f472b6,#e11d48);opacity:.6;}
/* 결제 전 카드 — 이름만, 값은 장식 값 + 흐림(2026-09-24) */
.sc-mask .sc-bar,.sc-mask .sc-dots{filter:blur(5px);opacity:.6;}
.sc-mask .sc-v{opacity:.7;}
.wx-q .wx-ic{border-radius:50%;background:rgba(var(--ink),.12);}
.wx-q em{opacity:.6;}
/* 끝 컷 떡밥 — 다음 캐릭터 상품으로(2026-09-24) */
.nx-cta{display:flex;align-items:center;gap:12px;margin:10px 16px 24px;padding:12px 14px;border-radius:14px;background:rgba(255,207,107,.08);border:1px solid rgba(255,207,107,.35);color:inherit;text-decoration:none;}
.nx-cta span{display:grid;gap:2px;}
.nx-cta b{font-size:15px;}
.nx-cta em{font-style:normal;font-size:13px;color:var(--gold);}
/* 심층판(2026-09-29) — 결제 벽 두 번째 버튼 · 리포트 끝 업그레이드 카드 · 심층 챕터 표지 */
.pw-plus{display:grid;gap:2px;width:100%;margin-top:10px;padding:12px 14px;border-radius:var(--r-md);border:1px solid rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.08);color:var(--cream);font-family:var(--font-sans);cursor:pointer;text-align:center;}
.pw-plus b{font-size:14.5px;font-weight:900;color:var(--gold);}
.pw-plus span{font-size:12px;color:var(--muted);}
/* 입력 화면 '심층판으로 바로 보기'(9/30) — 결제 벽 심층판 버튼과 같은 모양. 랜딩 심층판 카드에서 왔으면(is-pref) 금색 테두리를 한 단계 진하게 */
.plus-start{margin-top:10px;}
.plus-start.is-pref{border-width:2px;background:rgba(var(--gold-rgb),.16);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.14);}
.plus-zone{margin:18px 0 6px;}
.plus-card{margin:0 16px;padding:14px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border-soft);color:var(--cream);}
.plus-card .btn{margin-top:12px;}
.plus-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.plus-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;flex:none;}
.plus-head b{display:block;font-family:var(--font-display);font-weight:400;font-size:18px;color:var(--gold);}
.plus-head span{font-size:12.5px;color:var(--muted);}
.plus-list div{font-size:13px;padding:5px 0;border-bottom:.5px dashed var(--border-soft);}
.plus-list div:last-child{border-bottom:0;}
.plus-note{margin-top:8px;font-size:12px;color:var(--muted);text-align:center;}
.plus-wait{font-size:13.5px;line-height:1.6;}
.plus-wait .sp-spin{border-top-color:var(--gold);}
.plus-cover{margin:6px 16px 10px;padding:18px 14px;border-radius:14px;text-align:center;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.07);}
.plus-cover span{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--gold);}
.plus-cover b{display:block;font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--cream);margin:4px 0 6px;}
.plus-cover em{display:block;font-style:normal;font-size:12px;line-height:1.6;color:var(--muted);}
/* 아침 8시 운세 알림(2026-09-29) — 마이 탭 카드 · 신청 시트 · 이번 달 리포트 끝 권유 */
.dl-head{display:flex;align-items:center;gap:12px;margin:4px 0 12px;}
.dl-face{width:52px;height:52px;}
.dl-head b{display:block;font-size:14.5px;line-height:1.45;color:var(--cream);}
.dl-head span{font-size:12px;color:var(--muted);}
.dl-kakao{border-radius:14px;overflow:hidden;margin-bottom:12px;border:1px solid var(--border-soft);}
.dl-k-head{background:#fee500;color:#191600;font-size:12px;font-weight:800;padding:8px 12px;}
.dl-k-body{background:rgba(var(--ink),.04);color:var(--cream);font-size:13px;line-height:1.6;padding:12px;}
.dl-on{font-size:13px;color:var(--muted);margin:0 0 12px;}.dl-on b{color:var(--gold);}
.dl-note{margin-top:8px;font-size:12px;color:var(--muted);text-align:center;}
.dl-links{display:flex;justify-content:center;gap:16px;margin-top:12px;font-size:12.5px;color:var(--muted);}
.dl-links span{cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.dl-cta{display:grid;gap:4px;margin:14px 16px;padding:14px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.07);}
.dl-cta b{font-size:15px;color:var(--cream);}.dl-cta span{font-size:12.5px;color:var(--muted);line-height:1.5;}
.dl-cta .kk-copy{justify-self:start;margin-top:6px;}
.dl-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;}
.dl-sheet{width:100%;max-width:480px;background:var(--bg-card);color:var(--cream);border-radius:18px 18px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;}
.dl-title{font-size:17px;font-weight:900;}.dl-sub{font-size:12.5px;color:var(--muted);margin-top:-6px;}
.dl-lbl{display:grid;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted);}
.dl-lbl input{font:inherit;font-size:16px;font-weight:600;padding:11px 12px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(var(--ink),.04);color:var(--cream);}
.dl-chk{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--muted);}
.dl-chk input{margin-top:3px;flex:none;}
.dl-err{min-height:16px;font-size:12px;color:var(--pink);}
.dl-cancel{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;padding:6px;cursor:pointer;}
/* 글꼴 몰입(2026-09-24): 읽는 글은 명조, 캐릭터 대사는 굵은 고딕(웹툰 식자), 제목·표지·카드 이름은 송명 그대로 */
.rd-p{font-family:var(--font-read);font-size:16.5px;line-height:1.95;letter-spacing:-.01em;color:rgba(255,248,240,.9);}
.rd-hook{font-family:var(--font-read);font-weight:700;font-size:19px;line-height:1.6;letter-spacing:-.015em;}
#cut-scroll .wt-section-lbl{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;}
.wt-memo,.wt-caption-box,.wt-title-kw{font-family:var(--font-read);}
.wt-bubble,.wt-balloon,.wt-guide-bubble,.chapter-guide span,.pw-say{font-family:var(--font-bubble);font-weight:700;letter-spacing:-.02em;}

/* 리포트 흰 종이(2026-09-24 사장님: "배경색을 흰색으로" — 청월당은 흰 바탕 + 연회색 판(#F1F1F1·#E1E1E1)).
   리포트 칸(#cut-scroll) 안에서만 색 토큰을 밝게 바꾼다 — 홈·입력·결제 모달은 그대로 어둡다.
   결제 카드(.paywall-gate-inner)는 결제 버튼이 튀도록 일부러 어두운 판을 유지한다(토큰을 되돌림). */
#cut-scroll{--bg:#fff;--cream:#231c29;--muted:#665f70;--gold:#946000;--surface-1:#f4f2f6;--border-soft:#e7e2ea;
  background:#fff;color:#231c29;margin:0 -16px 20px;padding:10px 18px 30px;}
#cut-scroll .wt-section-lbl,#cut-scroll .rd-hook,#cut-scroll .sc-title,#cut-scroll .scal-cell b,#cut-scroll .pw-crisis b,#cut-scroll .pw-spouse b{color:#1a1020;text-shadow:none;}
#cut-scroll .wt-scene-no{color:#b4530a;text-shadow:none;}
#cut-scroll .rd-p{color:#3a3140;}
#cut-scroll .rd-p strong,#cut-scroll .rd-hook strong{color:#c2410c!important;}
#cut-scroll .wt-title-kw{color:#231c29;}
#cut-scroll .wt-toc div{background:#f3f1f5;color:#2a2230;}
#cut-scroll .wt-bubble{border:2px solid #1a1020;box-shadow:3px 3px 0 #1a1020;}
#cut-scroll .wt-b-bottom .wt-bubble{border:0;box-shadow:none;}   /* 말풍선 안 글(뼈 때리는 한 마디)엔 상자 테두리 없음 — 바로 위 규칙이 .wt-b-bottom 초기화를 이겨서 상자 속 상자가 됐다 */
#cut-scroll .saju-card,#cut-scroll .tz-card{background:#faf9fb;border:1px solid #e7e2ea;}
#cut-scroll .sc-bar,#cut-scroll .sc-dots i{background:#ece8ef;}
#cut-scroll .sc-dots i.on{background:var(--gold);}
#cut-scroll .sc-line,#cut-scroll .sp-desc,#cut-scroll .wy-name{color:#3a3140;}
#cut-scroll .sp-pro{background:rgba(58,49,64,.06);}
#cut-scroll .sp-pro dd{color:#3a3140;}
#cut-scroll .sc-tag.good{background:#dcfce7;color:#15803d;}#cut-scroll .sc-tag.bad{background:#ffe4e6;color:#be123c;}
#cut-scroll .sm-col i{background:#dcd6e0;}#cut-scroll .sm-col.best i{background:var(--gold);}#cut-scroll .sm-col.worst i{background:#fb7185;}
#cut-scroll .sm-col.now span{color:#1a1020;}#cut-scroll .sm-col.now i,#cut-scroll .scal-cell.now{outline-color:#1a1020;}
#cut-scroll .scal-cell{background:#f3f1f5;}
#cut-scroll .wx-cell{background:#f3f1f5;}#cut-scroll .wx-rain em{color:#2563eb;}#cut-scroll .mc-cal .bad{color:#2563eb;}
#cut-scroll .tz-card .tz-cta{color:#1a1020;}
#cut-scroll .kk-copy{border-color:#cfc8d6;color:#1a1020;}
#cut-scroll .nx-cta{background:#fff8e6;border-color:#f0d9a0;}#cut-scroll .nx-cta em{color:#b4530a;}
#cut-scroll .paywall-gate-inner{--cream:#f5f3f8;--muted:#8f8a9c;--gold:#ffcf6b;color:#f5f3f8;}
#cut-scroll .paywall-gate-inner .pw-crisis b,#cut-scroll .paywall-gate-inner .pw-spouse b{color:var(--hi);}
#cut-scroll .sc-row{color:#2a2230;}
#cut-scroll .wx-q .wx-ic{background:#e2dde6;}
/* 중요한 말 굵게·진하게 + 글씨 키우기(2026-09-24 사장님) */
.hl-n{font-weight:800;color:#b4530a;}
.hl-q{font-weight:800;}
.hl-i{font-weight:800;color:#c2266b;font-size:1.05em;}
.hl-t{font-style:normal;font-weight:700;color:#b4530a;}
.hl-s{font-weight:800;color:#c2266b;}
#cut-scroll .hl-q{color:#1a1020;background:linear-gradient(transparent 58%,#ffe3a1 58%);}
#cut-scroll .rd-p{font-size:18px;line-height:1.9;}
#cut-scroll .rd-p strong{color:inherit!important;}
#cut-scroll .rd-p .hl-n{color:#b4530a!important;}
#cut-scroll .rd-act{font-weight:700;color:#1a1020;background:#fff4d6;border-left:4px solid #d08a12;border-radius:6px;padding:12px 14px;margin:10px 6px 6px;}
#cut-scroll .rd-hook{font-size:22px;line-height:1.55;}
#cut-scroll .rd-head .wt-section-lbl{font-size:25px;}
#cut-scroll .wt-strip-title .wt-section-lbl{font-size:24px;}
#cut-scroll .wt-memo{font-size:17px;}
#cut-scroll .wt-caption-box{font-size:15.5px;}
.wt-bubble,.wt-balloon{font-size:17px;}
#cut-scroll .rd-p .hl-i{color:#c2266b!important;}


/* ═════════ 화면 모드 — 다크(기본) · 라이트 (2026-09-28 사장님) ═════════
   글씨·선·옅은 판의 흰색은 전부 rgba(var(--ink),a)·var(--hi)로 바꿔 두었다 — 다크는 흰색, 라이트는 짙은 보라 먹색.
   그림 위에 글이 얹히는 곳(상품 카드·홈 배너)과 리포트 흰 종이(#cut-scroll — 원래 두 모드에서 같은 종이)는 흰색 고정. */
:root{--glass-bg:rgba(38,34,46,.42);--glass-bright:1.05;--glass-rim-hi:rgba(255,255,255,.5);--glass-rim-mid:rgba(255,255,255,.28);--glass-rim-lo:rgba(255,255,255,.07);--glass-sheen:rgba(255,255,255,.1);
  --glass-shadow:0 14px 36px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.25);
  --lens-bg:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.1));--lens-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.25);
  --nav-fg:rgba(255,255,255,.72);--nav-accent:#ff7aa8;}
.prod,.hero-card,#cut-scroll,.paywall-gate-inner,.cast-card,.why-cta,.why-new .why-tag,.sl-nav,.fr-hero{--ink:255,255,255;--hi:#fff;--gold-rgb:255,207,107;}
.theme-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-2px 0;border-radius:999px;border:0;cursor:pointer;color:var(--cream);padding:0;
  background:rgba(var(--ink),.07);box-shadow:inset 0 0 0 .5px rgba(var(--ink),.14),inset 0 1px 0 rgba(var(--ink),.12);-webkit-tap-highlight-color:transparent;transition:transform .15s ease;}
.theme-btn:active{transform:scale(.9);}
.theme-btn svg{width:19px;height:19px;display:block;}
.theme-btn .ti-sun{display:none;}
[data-theme="light"] .theme-btn .ti-sun{display:block;}[data-theme="light"] .theme-btn .ti-moon{display:none;}
.theme-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:rgba(var(--ink),.06);}
.theme-seg button{border:0;border-radius:10px;padding:10px 4px;min-height:40px;font:700 13px var(--font-sans);color:var(--muted);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.theme-seg button.on{background:var(--bg-card);color:var(--cream);box-shadow:0 1px 4px rgba(0,0,0,.2);}


/* ── 입력 방(9/30 사장님 "랜딩 누르면 다른 창으로 전환돼서 거기서 정보 입력하는 느낌") — app.js openFormRoom ──
   #form-flow가 화면 전체를 덮는다(탭바 100 위, 모달 200~ 아래). 입력칸은 원래 폼 그대로, data-fr 묶음을 한 번에 하나씩(.fr-on) */
html.fr-pending .wrap{visibility:hidden;}   /* 랜딩에서 올 때 홈이 번쩍 보였다 사라지지 않게 — 방이 열리면 풀린다(늦어도 1.8초) */
.fr-top{display:none;}
body.form-room{overflow:hidden;}
body.form-room .bottom-nav{display:none!important;}   /* 방 안에선 탭바를 치운다(.wrap 안이라 z-index로는 못 덮는다) */
body.form-room #form-flow{position:fixed;inset:0;z-index:150;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg);padding:0 0 calc(28px + env(safe-area-inset-bottom));animation:frIn .5s cubic-bezier(.2,.8,.2,1) both;}
body.form-room #form-flow>*{max-width:480px;margin-left:auto;margin-right:auto;}
body.form-room #pick-head{display:none;}
body.form-room .fr-top{display:block;position:relative;}
.fr-hero{position:relative;height:44vh;min-height:260px;max-height:430px;overflow:hidden;}
.fr-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;animation:frZoom 9s ease-out both;}
.fr-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 58%,var(--bg) 100%);}
.fr-close{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:var(--hi);font-size:22px;line-height:38px;font-family:inherit;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.fr-who{display:flex;align-items:baseline;gap:8px;padding:0 20px;margin-top:-34px;position:relative;z-index:1;}
.fr-who b{font-family:var(--font-display);font-weight:400;font-size:24px;color:var(--cream);}
.fr-who span{font-size:13px;color:var(--muted);}
.fr-bubble{position:relative;margin:12px 18px 0;padding:14px 16px;border-radius:18px;border-top-left-radius:6px;background:var(--bg-card-2);color:var(--cream);font-family:var(--font-bubble);font-weight:700;font-size:16px;line-height:1.55;animation:frPop .35s ease both;}
.fr-prog{margin:14px 20px 0;height:4px;border-radius:4px;background:rgba(var(--ink),.08);overflow:hidden;}
.fr-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--gold-brand));transition:width .35s ease;}
body.form-room #topic-select-card{margin:14px 16px 0;}
body.form-room #topic-select-card [data-fr]:not(.fr-on){display:none!important;}
body.form-room #topic-select-card.fr-anim .fr-on{animation:frStep .32s ease both;}
.fr-nav{display:none;}
body.form-room .fr-nav{display:flex;gap:10px;justify-content:space-between;margin-top:12px;}
.fr-nav button{flex:1;min-height:50px;border-radius:14px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;}
.fr-prev{flex:0 0 96px!important;background:transparent;border:.5px solid var(--border-strong);color:var(--muted);}
.fr-next{border:0;background:linear-gradient(90deg,var(--pink),var(--pink-deep));color:var(--hi);}
.fr-sum{display:grid;gap:8px;margin-bottom:14px;padding:14px;border-radius:14px;background:rgba(var(--ink),.04);}
.fr-sum div{display:flex;justify-content:space-between;gap:12px;font-size:14px;}
.fr-sum span{color:var(--muted);}
.fr-sum b{color:var(--cream);text-align:right;}
@keyframes frIn{from{opacity:0;transform:translateY(28px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes frZoom{from{transform:scale(1.08);}to{transform:scale(1);}}
@keyframes frPop{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes frStep{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){body.form-room #form-flow,.fr-hero img,.fr-bubble,body.form-room #topic-select-card.fr-anim .fr-on{animation:none;}}

:root[data-theme="light"]{color-scheme:light;
  --ink:28,22,38;--hi:#17121f;--gold-rgb:148,96,0;
  --bg:#f6f4f8;--bg-card:#ffffff;--bg-card-2:#f0edf3;--cream:#1c1724;--muted:#6f6879;
  --gold:#946000;--gold-soft:#805200;--pink:#ff5f96;--pink-deep:#ff3d7a;--purple:#8b5cf6;   /* 9/30 사장님 '다크 기준으로 맞춰' — 핑크·보라는 다크와 같은 값, 금색 글씨만 흰 바탕에서 읽히게 한 단계 진하게 */
  --border:rgba(28,22,38,.1);--border-strong:rgba(28,22,38,.18);
  --surface-1:#ffffff;--surface-2:#f1eef4;--surface-3:#e8e4ec;--border-soft:rgba(28,22,38,.08);--border-med:rgba(28,22,38,.14);
  --shadow-card:0 2px 14px rgba(60,30,80,.07);--shadow-pop:0 8px 24px rgba(60,30,80,.14);
  --glass-bg:rgba(255,255,255,.38);--glass-bright:1.04;--glass-rim-hi:rgba(255,255,255,.95);--glass-rim-mid:rgba(255,255,255,.7);--glass-rim-lo:rgba(255,255,255,.35);--glass-sheen:rgba(255,255,255,.55);
  --glass-shadow:0 12px 32px rgba(70,40,90,.16),0 1px 3px rgba(70,40,90,.1),inset 0 0 0 .5px rgba(28,22,38,.06);
  --lens-bg:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));--lens-shadow:inset 0 1px 1px #fff,0 2px 10px rgba(70,40,90,.16),0 0 0 .5px rgba(28,22,38,.06);
  --nav-fg:rgba(28,22,38,.62);--nav-accent:#ff3d7a;}
[data-theme="light"] body{background:var(--bg);}
[data-theme="light"] #stars,[data-theme="light"] body>.star{display:none;}
[data-theme="light"] .card{box-shadow:var(--shadow-card);}
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] select{color-scheme:light;}
/* 9/30 다크 기준 통일 — 채팅 버튼은 다크 화면에서 보이는 색 그대로(반투명 보라를 어두운 카드 위에 얹은 결과 색) */
[data-theme="light"] .btn-ai{color:#e9d5ff;background:linear-gradient(135deg,#3c2e61,#452339);border-color:rgba(139,92,246,.4);}
/* 그림 위 카드(홈 상품·배너)는 어두운 그림이라 금색·핑크도 다크 값(라이트의 진한 금색은 어두운 그림 위에서 갈색으로 탁해졌다) */
[data-theme="light"] .prod,[data-theme="light"] .hero-card{--gold:#ffcf6b;--gold-soft:#e0a94a;--cream:#f5f3f8;--muted:#8f8a9c;--border-med:rgba(255,255,255,.14);}   /* 19+ 표시(글씨 --cream)가 어두운 그림 위에서 안 보이던 것 */
/* 로고는 흰 바탕 위 글자라 밝은 금색이면 흐리다 — 라이트에선 진한 금색에서 핑크로(두 모드 모두 금→핑크 같은 인상) */
[data-theme="light"] .logo{background:linear-gradient(120deg,var(--gold),var(--pink));-webkit-background-clip:text;background-clip:text;}
/* 상품 카드는 사진이라 라이트에서도 어둡다 — 밝은 바탕에 구멍처럼 보이지 않게 그림자로 띄운다 */
[data-theme="light"] .prod{box-shadow:0 8px 22px rgba(40,20,60,.18),0 1px 3px rgba(40,20,60,.12);}
[data-theme="light"] .cardnav{background:rgba(255,255,255,.72);box-shadow:0 -6px 24px rgba(70,40,90,.12);}
[data-theme="light"] .chat-paywall{background:linear-gradient(160deg,#fff4f8,#ffffff);}
[data-theme="light"] .theme-seg button.on{box-shadow:0 1px 4px rgba(60,30,80,.14);}
/* 데이터 색(기운 색·특별한 기운 색)으로 칠한 글씨는 어두운 바탕용 밝은 색이라 흰 바탕에선 흐리다 → 라이트에서만 한 단계 진하게 */
[data-theme="light"] .ms-easy-chips span[style],[data-theme="light"] .ms-easy-me b,[data-theme="light"] .ms-easy-el-pct{filter:brightness(.62) saturate(1.4);}
/* 결제·보내기 버튼·로딩 막대는 --gold-brand(두 모드 같은 밝은 금색)라 라이트 손질이 따로 필요 없다(9/30) */

/* 첫 방문 성별(2026-09-28) — 반대 성별 캐릭터가 읽어준다. 색은 토큰만(두 모드 공용) */
.vg-modal{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.vg-inner{width:100%;max-width:360px;background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--r-lg);padding:28px 20px 18px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45);}
.vg-kicker{font:800 12px var(--font-sans);letter-spacing:.08em;color:var(--pink);margin-bottom:10px;}
.vg-title{font-family:var(--font-display);font-size:26px;line-height:1.25;color:var(--cream);margin-bottom:8px;word-break:keep-all;}
.vg-sub{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:20px;word-break:keep-all;}
.vg-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.vg-btn{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:96px;padding:14px 8px;border-radius:16px;border:1px solid var(--border-med);background:rgba(var(--ink),.05);color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,border-color .12s ease;}
.vg-btn:active{transform:scale(.97);}
.vg-btn b{font:900 20px var(--font-sans);}
.vg-btn span{font-size:12px;color:var(--muted);line-height:1.4;word-break:keep-all;}
.vg-btn:hover{border-color:var(--pink);}
.lv-face{width:88px;height:88px;border-radius:50%;overflow:hidden;margin:0 auto 10px;border:2px solid rgba(var(--gold-rgb),.65);}
.lv-face img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}
.lv-say{font-family:var(--font-bubble);font-weight:700;font-size:16px;line-height:1.55;color:var(--cream);margin-bottom:8px;word-break:keep-all;}
.lv-stay{width:100%;min-height:50px;border:0;border-radius:14px;font:900 16px var(--font-sans);color:#1a1020;background:linear-gradient(135deg,var(--gold-brand,#ffcf6b),var(--pink));cursor:pointer;margin-bottom:4px;}
.lv-stay:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.load-stay{margin-top:14px;font-size:12px;line-height:1.5;color:rgba(var(--gold-rgb),.85);word-break:keep-all;max-width:300px;}
.vg-skip{border:0;background:transparent;color:var(--muted);font:600 13px var(--font-sans);padding:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* 왜 도파민사주야 — 확장(2026-09-28 사장님: "내용이 너무 적다, 홈에서 극대화해서 노출"). 색은 토큰만 */
.why-card{padding:22px 16px 18px;}
.why-head{font-size:20px;margin-bottom:6px;word-break:keep-all;}
.why-sub{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.5;}
.why-vs{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.why-vs-row{border-radius:14px;padding:12px 14px;text-align:left;}
.why-vs-row p{margin:6px 0 4px;font-size:13.5px;line-height:1.6;word-break:keep-all;}
.why-vs-row em{font-style:normal;font-size:12px;font-weight:700;}
.why-tag{display:inline-block;font-size:12px;font-weight:800;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.02em;}
.why-old{background:rgba(var(--ink),.035);border:1px dashed rgba(var(--ink),.18);}
.why-old p{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(var(--ink),.25);}
.why-old .why-tag{background:rgba(var(--ink),.08);color:var(--muted);}
.why-old em{color:var(--muted);}
.why-new{background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.35);}
.why-new p{color:var(--cream);font-weight:600;}
.why-new .why-tag{background:var(--pink-deep);color:var(--hi);}
.why-new em{color:var(--gold);}
.why-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0;}
.why-stats div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:rgba(var(--ink),.04);}
.why-stats b{font-size:17px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;}
.why-stats span{font-size:12px;color:var(--muted);}
.why-cast{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;}
.wc-row{display:flex;gap:10px;align-items:flex-start;}
.wc-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 15%;flex:0 0 44px;border:1px solid var(--border-med);background:rgba(var(--ink),.06);}
.wc-bub{flex:1;background:rgba(var(--ink),.05);border-radius:4px 14px 14px 14px;padding:9px 12px;font-size:13px;line-height:1.5;color:var(--cream);word-break:keep-all;}
.wc-bub b{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px;}
.why-cta{display:block;width:100%;min-height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--pink-deep),var(--pink));color:var(--hi);font:800 15px var(--font-sans);cursor:pointer;box-shadow:0 6px 18px rgba(var(--pink-rgb,255,95,150),.28);-webkit-tap-highlight-color:transparent;}
.why-cta:active{transform:scale(.98);}
.why-table{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px 14px 16px;margin:18px 0 22px;}
.wt-row{display:grid;grid-template-columns:64px 1fr 1fr;gap:6px;align-items:center;padding:10px 4px;border-top:1px solid rgba(var(--ink),.07);font-size:12.5px;line-height:1.45;word-break:keep-all;}
.wt-row span:first-child{font-weight:800;color:var(--muted);font-size:12px;}
.wt-row span:nth-child(2){color:var(--muted);}
.wt-row span:nth-child(3){color:var(--cream);font-weight:700;}
.wt-row.wt-hd{border-top:0;font-size:12px;font-weight:800;padding-top:4px;}
.wt-row.wt-hd span:nth-child(3){color:var(--pink);}
.why-table .why-cta{margin-top:12px;}
@media (max-width:360px){.why-stats{grid-template-columns:repeat(2,1fr);}.wt-row{grid-template-columns:52px 1fr 1fr;font-size:12px;}}

/* 9/29 웹툰식 풀이 + 기준 사진 1장 돌려쓰기 — 사장님 "그림 나왔다 글 나왔다 하니 가독성이 떨어져", "얼굴·몸매가 처음이랑 나중이랑 달라"
   그림은 전부 기준 사진(char/<키>.jpg)을 잘라 쓴 것(.wt-crop — 자르기 값은 app.js cropStyle이 인라인으로). 문단은 칸(.wt-pan) 아래로 걸친 말풍선(.wt-pb) */
.wt-crop{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;aspect-ratio:3/4;object-fit:cover;transform-origin:0 0;}
.wt-frame>img.wt-crop{inset:auto;height:auto;object-position:0 0;}
.rd-face,.pw-face,.plus-face,.dl-face,.end-chat-face,.later-face,.uw-face,.taste-face,.dex-face{position:relative;overflow:hidden;display:block;flex:none;border-radius:50%;}
.rd-face{width:42px;height:42px;border:1.5px solid var(--gold);}
.pw-face{width:56px;height:56px;}
.plus-face{width:44px;height:44px;}
.wt-pan{margin:16px -18px 0;}
.wt-pan-img{position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--bg);}
.wt-pan-img>img.wt-cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;}   /* 뽑아 둔 컷(3:4)을 가로 칸에 — 얼굴·상반신 쪽으로 */
.wt-pan-img::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 70%,var(--bg) 100%);}
.wt-pb{position:relative;z-index:1;margin:-44px 16px 6px;background:#fff;color:#231c29;border:2px solid #1a1020;border-radius:18px;box-shadow:3px 3px 0 #1a1020;padding:14px 16px 10px;}
.wt-pb::before{content:'';position:absolute;left:34px;top:-9px;width:14px;height:14px;background:#fff;border-left:2px solid #1a1020;border-top:2px solid #1a1020;transform:rotate(45deg);}
.wt-pb-cont{margin:12px 16px 6px 34px;}
.wt-pb-cont::before{left:18px;}
.wt-pb .rd-p{margin:0 0 8px;}
.wt-pb .rd-p:last-child{margin-bottom:4px;}
.wt-pb .rd-hook{margin:0 0 8px;padding:0;border-left:0;}
.wt-pb .wt-memo{margin:6px 0 8px;}
.wt-say-line{font-family:var(--font-bubble);font-weight:800;font-size:17px;line-height:1.5;color:#1a1020;margin:0 0 10px;padding:0 0 10px;border-bottom:1.5px dashed rgba(26,16,32,.25);}
.pw-guide .pw-face img.wt-crop,.plus-head .plus-face img.wt-crop,.rd-head .rd-face img.wt-crop,.dl-head .dl-face img.wt-crop,.end-chat .end-chat-face img.wt-crop,.later-go .later-face img.wt-crop,.uw-top .uw-face img.wt-crop,.taste-say .taste-face img.wt-crop,.dex-item .dex-face img.wt-crop{width:100%;height:auto;border-radius:0;object-fit:cover;object-position:0 0;border:0;}
/* 1순위 몰입 5종(2026-09-29) — ① 로딩 한 줄 ② 결제 벽 다음 장 ③ 리포트 끝 질문 ④ 다음 상품 한 줄 ⑤ 나중에 이어 보기 */
.load-say{font-family:var(--font-bubble);font-weight:700;font-size:14px;line-height:1.5;color:var(--cream);background:rgba(var(--ink),.08);border:1px solid rgba(var(--gold-rgb),.3);border-radius:16px;padding:10px 14px;max-width:300px;margin:0 auto 14px;}
.load-say[hidden],.later-card[hidden]{display:none;}
.pw-next{display:grid;gap:3px;text-align:left;border:1px dashed rgba(var(--gold-rgb),.5);border-radius:var(--r-md);padding:10px 12px;margin:0 0 12px;}
.pw-next span{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--gold);}
.pw-next b{font-size:14px;color:var(--cream);}
.pw-next em{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted);}
.pw-later{display:block;width:100%;margin-top:8px;padding:8px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.end-chat{display:flex;flex-direction:column;gap:8px;margin:6px 16px 18px;padding:14px;border-radius:16px;background:#fff;color:#1a1020;border:2px solid #1a1020;box-shadow:3px 3px 0 #1a1020;}
.end-chat-head{display:flex;align-items:center;gap:10px;}
.end-chat-head b{font-family:var(--font-bubble);font-size:15px;}
.end-chat-face{width:40px;height:40px;}
.end-chat-q{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid #e6c9d6;background:#fff4f8;color:#7a1f47;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.end-chat-q:focus-visible,.later-go:focus-visible,.pw-later:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.end-chat-note{font-size:12px;color:#6a6072;}
.nx-hook{display:block;font-style:normal;font-size:13px;line-height:1.5;color:rgba(var(--ink),.85);margin-bottom:4px;}
#cut-scroll .nx-hook{color:#3a2f40;}
.later-card{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
.later-go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:16px;background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.4);color:inherit;font:inherit;cursor:pointer;}
.later-go span{display:grid;gap:2px;min-width:0;}
.later-go b{font-size:14px;}
.later-go em{font-style:normal;font-size:12px;color:var(--muted);}
.later-face{width:44px;height:44px;}
.later-x{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(var(--ink),.06);border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;}
/* 2순위(2026-09-29) — 결제 벽 목차·키워드 · 결제 뒤 대기 · 맛보기 · 시간 몰라도 돼 · 묶음 */
.pw-kw{display:block;margin-top:6px;font-size:12px;font-weight:700;color:#8a3a5c;}
.pw-bundle{border-color:rgba(var(--ink),.25);background:rgba(var(--ink),.05);}
#unlock-waiting{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:900;background:var(--bg-card);color:var(--cream);border:1px solid rgba(var(--ink),.14);border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:480px;margin:0 auto;}
.uw-top{display:flex;gap:10px;align-items:center;}
.uw-face{width:44px;height:44px;border:1.5px solid var(--gold);}
.uw-now{font-size:12px;color:var(--gold);margin-top:2px;}
.uw-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--muted);}
.uw-list li::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:rgba(var(--ink),.18);vertical-align:middle;}
.uw-list li.done{color:var(--cream);}
.uw-list li.done::before{background:var(--pink);}
.uw-list li.now{color:var(--gold);font-weight:700;}
.uw-list li.now::before{background:var(--gold);}
.uw-list li.uw-more::before{display:none;}
.uw-track{margin-top:10px;height:4px;border-radius:4px;background:rgba(var(--ink),.12);overflow:hidden;}
.uw-bar{height:100%;background:var(--pink);transition:width .6s;}
.taste-card{background:var(--bg-card);border:1px solid rgba(var(--gold-rgb),.35);border-radius:16px;padding:16px;margin:0 0 22px;display:flex;flex-direction:column;gap:10px;}
.taste-head{font-size:14.5px;font-weight:800;color:var(--cream);}
.taste-form{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:6px;}
.taste-form input{min-width:0;padding:10px 8px;border-radius:10px;border:1px solid var(--border);background:rgba(var(--ink),.05);color:var(--cream);font:inherit;font-size:15px;text-align:center;}
.taste-go{padding:10px 12px;border-radius:10px;border:0;background:linear-gradient(135deg,#ffcf6b 0%,#ff8c42 45%,#ff5f96 100%);color:#1a1020;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;}
.taste-out[hidden]{display:none;}
.taste-say{display:flex;gap:10px;align-items:flex-start;}
.taste-say p{margin:0;font-size:14px;line-height:1.55;color:var(--cream);}
.taste-face{width:44px;height:44px;border:1.5px solid var(--gold);}
.taste-next{display:grid;gap:6px;margin-top:4px;}
.taste-next button{padding:11px 12px;border-radius:12px;border:1px solid var(--pink);background:rgba(var(--ink),.04);color:var(--cream);font:inherit;font-size:14px;font-weight:800;cursor:pointer;}
.taste-next button.ghost{border-color:var(--border);font-weight:700;color:rgba(var(--ink),.8);}
.hour-skip{margin-left:6px;padding:3px 10px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.1);color:var(--gold);font:inherit;font-size:12px;font-weight:800;cursor:pointer;vertical-align:middle;}
.taste-go:focus-visible,.taste-next button:focus-visible,.hour-skip:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}

/* 캐릭터 도감(9/30) */
.dex-count{font-size:13px;color:var(--muted);margin:-2px 0 10px;}
.dex-count b{color:var(--gold);font-size:16px;}
.dex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;}
.dex-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:rgba(var(--ink),.04);border:1px solid rgba(var(--ink),.08);cursor:pointer;font:inherit;color:inherit;min-width:0;}
.dex-item .dex-face{width:48px;height:48px;margin-bottom:4px;filter:grayscale(1);opacity:.4;}
.dex-item.met .dex-face{filter:none;opacity:1;box-shadow:0 0 0 2px rgba(var(--gold-rgb),.7);}
.dex-item b{font-size:12.5px;color:var(--cream);white-space:nowrap;}
.dex-item span{font-size:12px;color:rgba(var(--ink),.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.dex-item em{font-style:normal;font-size:12px;color:rgba(var(--gold-rgb),.85);}
.dex-item:not(.met) b,.dex-item:not(.met) span{opacity:.8;}
/* 홈 배너 캐릭터 한마디(9/30) — 그림 위라 흰 글씨 고정 토큰(.hero-card의 --ink) */
.hero-say{position:absolute;top:16px;left:16px;max-width:66%;word-break:keep-all;font-size:12px;line-height:1.45;color:rgba(var(--ink),.95);background:rgba(10,6,20,.55);border:.5px solid rgba(var(--ink),.22);border-radius:14px 14px 14px 4px;padding:7px 11px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .22s ease;}
.hero-say b{display:block;font-size:12px;color:var(--gold);font-weight:800;margin-bottom:1px;}
.hero-swapping .hero-say{opacity:0;}

/* 이름 한자 고르기(9/30) — 글자마다 소리 목록(드롭다운). 색은 토큰만 */
.hj-pick{display:flex;flex-direction:column;gap:6px;}
.hj-row{display:flex;gap:8px;align-items:stretch;}
.hj-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;margin:0;}
.hj-cell .hj-sy{font-size:12px;font-weight:700;color:var(--muted);}
.hj-sur{flex:0 0 64px;align-items:center;justify-content:flex-end;padding:0 0 6px;border-radius:var(--r-sm);}
.hj-sur b{font-size:26px;line-height:1.1;color:var(--cream);font-weight:700;}
.hj-sur em{font-style:normal;font-size:12px;color:var(--muted);}
.field .hj-sel{padding:12px 10px;font-size:16px;text-overflow:ellipsis;}
.hj-note{font-size:12px;color:var(--muted);line-height:1.5;word-break:keep-all;}
.hj-type{margin-top:6px;border:0;background:none;padding:4px 0;color:var(--muted);font:600 12px var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.field #user-hanja{margin-top:6px;}

/* 이름 풀이 카드 확장(9/30) — 81수리 뜻풀이 + 이름 소리 기운. 리포트 흰 종이 안이라 토큰만 */
.sr-row{padding:4px 0 8px;border-bottom:1px solid rgba(var(--ink),.06);}
.sr-row:last-of-type{border-bottom:0;}
.sr-mean{font-size:13px;line-height:1.55;color:var(--cream);margin:2px 0 0;word-break:keep-all;}
.sr-mean b{font-weight:800;}
.sr-mean span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.sc-sub{font-size:12.5px;font-weight:800;color:var(--muted);margin:14px 0 8px;}
.ns-chips{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.ns-chip{display:inline-flex;flex-direction:column;align-items:center;min-width:48px;padding:6px 8px;border-radius:12px;background:rgba(var(--ink),.05);font-size:12px;color:var(--muted);}
.ns-chip b{font-size:18px;color:var(--cream);font-weight:800;line-height:1.2;}
.ns-link{display:inline-block;width:18px;height:2px;border-radius:2px;background:rgba(var(--ink),.2);}
.ns-link.ns-help{background:#2f9e6e;height:3px;}
.ns-link.ns-clash{background:#d9485f;height:3px;}
.ns-yon b{color:var(--cream);}
.hj-sur-pick{flex:0 0 96px;}

/* ── 가독성(9/30 사장님 "홈페이지 모든 글씨 PC·모바일 가독성 점검" → 전부 고치기) ──
   ① 글씨는 최소 12px(10~11.5px였던 112곳) ② 흐린 글씨 진하게(명암비 4.5 이상 — 다크 회색·리포트 회색·라이트 금색·분홍)
   ③ 버튼·입력칸이 브라우저 기본 글꼴(Arial 등)로 빠지던 것 → 본문 글꼴 ④ 12~13px 명조(고운바탕·나눔명조)는 고딕으로
   ⑤ PC(마우스 있는 넓은 화면)는 폰 너비 한 줄이라 글씨가 작게 느껴져 전체를 한 단계 키운다 */
button,input,select,textarea{font-family:inherit;}
.wt-caption-box .cast-sub,.wt-caption-box .chapter-badge,.wt-caption-box .chapter-sub,.prod-kicker{font-family:var(--font-sans);}
.wt-caption-box .cast-sub,.wt-caption-box .chapter-sub{font-size:13px;color:#4f444a;}
#cut-scroll .wt-toc b{color:#c21a58;}
.why-old .why-tag{color:rgba(var(--ink),.78);}
.why-new .why-tag{background:#d81b60;}
[data-theme="light"] .why-kicker,[data-theme="light"] .why-head b,[data-theme="light"] .wt-row.wt-hd span:nth-child(3){color:#d42a6a;}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){html{zoom:1.15;}}
/* 카테고리 줄 좌우(9/30 사장님 "카테고리도 오른쪽으로 스크롤할 수 있게") — 줄 전체를 감싼 틀이 위에 붙고(sticky), 양끝에 화살표.
   화살표는 배경색으로 스며드는 띠 위에 — 가려진 탭이 더 있다는 표시. 처음엔 왼쪽, 끝에선 오른쪽 화살표를 숨긴다(syncSlider) */
.pill-wrap{position:sticky;top:0;z-index:50;background:var(--bg);}
.pill-wrap .pill-scroll{position:relative;top:auto;z-index:auto;scroll-behavior:smooth;}
.pill-wrap .pill-nav{--ink:inherit;top:0;bottom:0;transform:none;height:auto;width:44px;border-radius:0;backdrop-filter:none;font-size:24px;color:rgba(var(--ink),.9);}
.pill-wrap .pill-nav.prev{left:0;background:linear-gradient(90deg,var(--bg) 45%,transparent);}
.pill-wrap .pill-nav.next{right:0;background:linear-gradient(270deg,var(--bg) 45%,transparent);}


/* 19금 휴대폰 본인인증(10/1) — 나이 확인 창 안 두 번째 길 */
.age-iv{margin:6px 0 10px;padding:12px 12px 10px;border-radius:14px;background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.25);text-align:left}
.age-iv-say{font-size:13px;line-height:1.55;color:var(--cream);margin-bottom:8px}
.age-iv-btn{width:100%;font-size:14px;font-weight:800}
.age-iv-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
/* 아이폰처럼 미끄러지는 홈 슬라이드(10/1 사장님 "부드럽게 쓸려나가는 느낌으로, 모든 홈페이지에서")
   배너 = 그림 판 두 장(hero-slide-a·b)이 손가락을 따라 움직이고 놓으면 감속하며 넘어감(heroSlideTo). 글씨는 끄는 만큼 옅어짐(--hero-txt-o).
   가로 줄(상품·후기·카테고리) = 관성 스크롤 + 카드 자리에 멈춤, 가로 끝에서 뒤로 가기 제스처로 새지 않게, 마우스는 잡고 끌기(bindDragScroll). */
.hero-card{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.hero-card .hero-slide{transition:none;will-change:transform;backface-visibility:hidden;}
.hero-card:not(.hero-swapping) .hero-tag,.hero-card:not(.hero-swapping) .hero-title,.hero-card:not(.hero-swapping) .hero-sub,.hero-card:not(.hero-swapping) .hero-say{opacity:var(--hero-txt-o,1);}
.cat-row,.rv-strip,.pill-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-behavior:smooth;}
.rv-strip{scroll-snap-type:x proximity;}
.rv-strip>*{scroll-snap-align:start;}
.cat-row .prod{scroll-snap-stop:normal;}
.cat-row.sl-drag,.rv-strip.sl-drag,.pill-scroll.sl-drag{scroll-snap-type:none!important;scroll-behavior:auto!important;cursor:grabbing;}
@media (hover:hover) and (pointer:fine){.cat-row,.rv-strip{cursor:grab;}}
.sl-drag *{user-select:none;-webkit-user-select:none;}

/* ── 첫 화면 캐릭터 고르기(10/2) — 제목(캐릭터가 손님에게 하는 말) + 얼굴 카드 가로 넘기기 ── */
.cast-pick{margin:4px 0 18px;}
.cast-kicker{font-size:13px;font-weight:800;color:var(--pink);letter-spacing:.02em;}
.cast-title{margin-top:6px;font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.18;color:var(--hi);letter-spacing:-.01em;word-break:keep-all;}
.cast-title span{color:var(--gold);}
.cast-sign{margin:6px 0 12px;font-size:13px;font-weight:700;color:rgba(var(--ink),.62);min-height:18px;transition:opacity .2s;}
.cast-row .cast-card{flex:0 0 74%;scroll-snap-align:start;}
.cast-card{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;background:#0d0c11;aspect-ratio:3/4.15;--acc:var(--gold);box-shadow:0 10px 26px rgba(0,0,0,.35);}
.cast-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.cast-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,17,0) 38%,rgba(13,12,17,.55) 58%,rgba(13,12,17,.94) 80%,#0d0c11 100%);}
.cast-body{position:absolute;left:0;right:0;bottom:0;padding:0 16px 16px;}
.cast-role{font-size:13px;font-weight:700;color:var(--acc);text-shadow:0 1px 6px rgba(0,0,0,.8);}
.cast-name{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.1;color:var(--hi);text-shadow:0 2px 12px rgba(0,0,0,.9);}
.cast-line{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(var(--ink),.92);word-break:keep-all;text-shadow:0 1px 6px rgba(0,0,0,.85);}
.cast-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.cast-tags i{font-style:normal;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(var(--ink),.12);color:rgba(var(--ink),.9);}
.cast-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;}
.cast-price{font-size:15px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;}
.cast-btn{font-size:14px;font-weight:800;padding:10px 14px;border-radius:999px;background:linear-gradient(120deg,var(--pink-deep),var(--pink));color:var(--hi);box-shadow:0 4px 14px rgba(255,61,122,.35);}
.cast-foot{margin-top:10px;font-size:13px;color:rgba(var(--ink),.6);text-align:center;}
[data-theme="light"] .cast-card{--gold:#ffcf6b;--cream:#f5f3f8;--muted:#8f8a9c;}   /* 그림 카드 안은 다크 값(상품 카드와 같게) */

/* 구매 안내(제공 기간·교환·취소·환불) — 결제창·환불정책, PG 사전검수 필수 항목(10/5) */
.buy-info-box{margin:12px 0 2px;font-size:12px;color:var(--muted);line-height:1.6;}
.buy-info-box summary{cursor:pointer;color:var(--muted);text-decoration:underline;}
.buy-info{margin:8px 0 0;}
.buy-info dt{font-weight:700;color:rgba(var(--ink),.85);margin-top:8px;}
.buy-info dd{margin:2px 0 0;}