/* ── M13 비주얼 싱크: 포스터형 카드 · 세로 포스터 캐러셀 · 가로 스크롤 줄 · 상세 웹툰 도입부 · 인터랙션 ──
   레이아웃·연출만. 그림·문구는 전부 오늘의사주 자산. 제목 글꼴은 config brand.titleFont(Google Fonts) — common.js 가 로드. */
:root{--title-font:"Song Myung","Noto Serif KR","Nanum Myeongjo",Georgia,serif}
body[data-app]{padding-bottom:64px}
body[data-app] .wrap{width:min(1080px,100% - 24px)}
/* 헤더 얇게 */
body[data-app] .hdr .wrap{height:52px}
body[data-app] .hdr nav a:not(.pill){display:none}
body[data-app] .hdr nav a.pill{padding:6px 12px;font-size:13px}

/* 포스터 카드 — 4:5 그림 위에 제목(하단 45% 검정 그라데이션 + 굵은 제목 2줄 + 캐릭터 태그 + 배지) */
.poster{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--bg-3);color:#fff;isolation:isolate;transition:transform .15s ease}
.poster:active{transform:scale(.97)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .15s ease;opacity:0}
.poster img.ld{opacity:1;filter:none}
.poster .shade{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.92) 100%)}
.poster .t{position:absolute;left:12px;right:12px;bottom:12px}
.poster .tag{display:inline-block;font-size:11px;letter-spacing:.06em;color:var(--gold);margin-bottom:6px;opacity:.95}
.poster h3{font-family:var(--title-font);font-weight:700;font-size:22px;line-height:1.22;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 18px rgba(242,217,154,.18);margin:0}
.poster .sub{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.78)}
.poster .badge{position:absolute;left:10px;top:10px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)}
.poster .badge.free{background:rgba(141,232,193,.18);border-color:rgba(141,232,193,.4);color:#bff5dd}
.poster .price{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18)}
.poster.seonnyeo h3{text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 18px rgba(255,170,210,.22)}
.poster.lg h3{font-size:clamp(26px,7.4vw,40px)}
.poster.lg .t{left:18px;right:18px;bottom:44px}.poster.lg .sub{font-size:14px;margin-top:8px}.poster.lg .tag{font-size:12px}
.poster.sm h3{font-size:17px}.poster.sm .sub{display:none}.poster.sm .t{left:10px;right:10px;bottom:10px}
@media (max-width:600px){.poster.lg[data-key="reconnect"] .sub{white-space:pre-line}}

/* 세로 포스터 캐러셀 — 한 화면 1장, 좌우 스와이프, 우하단 1 / N, 자동 넘김 */
.hero-pc{position:relative;margin:8px 0 4px}
.hero-pc .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hero-pc .track::-webkit-scrollbar{display:none}
.hero-pc .track>*{flex:0 0 100%;scroll-snap-align:center}
.hero-pc .poster{border-radius:20px}
.hero-pc .cnt{position:absolute;right:14px;bottom:14px;z-index:2;font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);color:#fff;letter-spacing:.06em}
.hero-pc .cta{position:absolute;left:18px;bottom:14px;z-index:2}
@media (min-width:700px){.hero-pc .track>*{flex-basis:46%}.hero-pc .poster{aspect-ratio:4/5}}

/* 가로 스크롤 줄 */
.hrow{margin:22px 0 0}
.hrow .rh{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.hrow .rh b{font-family:var(--title-font);font-size:19px;font-weight:700}
.hrow .rh small{color:var(--dim);font-size:12px}
.hrow .track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 0 6px}
.hrow .track::-webkit-scrollbar{display:none}
.hrow .track>*{flex:0 0 42%;scroll-snap-align:start}
@media (min-width:700px){.hrow .track>*{flex-basis:22%}}

/* 띠 배너(16:9 → 3:1) */
.strip{position:relative;margin:18px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:3/1;background:var(--bg-3)}
.strip a{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.strip a.on{opacity:1}
.strip img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.strip .txt{position:absolute;left:14px;bottom:10px;right:14px;font-size:13px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.strip .txt b{display:block;font-family:var(--title-font);font-size:17px}

/* 오늘의 한 줄 — 한 줄 카드 */
.daily.line{padding:10px 12px;border-radius:14px}
.daily.line img{width:40px;height:40px}
.daily.line .t b{font-size:12px;margin-bottom:2px}.daily.line .t span{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.daily.line .btn.sm{padding:8px 12px;font-size:13px}

/* 캐릭터 한 줄 배너 얇게 */
body[data-app] .char-banner{padding:10px 12px;margin-top:14px}
body[data-app] .char-banner img{width:44px;height:44px;border-radius:50%}
body[data-app] .char-banner .bubble{font-size:14px}

/* 하단 탭바: 아이콘 위주, 얇게 */
body[data-app] .bnav{height:56px;background:rgba(5,5,7,.92)}
body[data-app] .bnav a{font-size:11px;gap:1px}
body[data-app] .bnav a i{font-size:20px}

/* 상품 상세 = 웹툰 도입부 */
.pd-hero.poster{aspect-ratio:4/4.2;border-radius:0 0 22px 22px;margin:0 -12px 0}
.pd-hero.poster img{opacity:1;filter:none}
.pd-hero.poster .t{bottom:20px;left:18px;right:18px}
.pd-hero.poster h3{font-size:clamp(28px,7.6vw,40px)}
.pd-hero.poster .who{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--gold)}
.pd-hero.poster .who img{position:static;width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.35);opacity:1;filter:none}
.pd-strip{margin:14px 0 0}
.pd-strip .cut.speech.panel{margin:0 0 10px}
.pd-checks{list-style:none;margin:16px 0 0;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.pd-checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;padding:6px 0}
.pd-checks li::before{content:"✓";color:var(--gold);font-weight:800;flex:0 0 auto}
.pd-checks .h{font-family:var(--title-font);font-size:16px;color:var(--gold);margin:0 0 4px;display:block}
.pd-sticky{position:fixed;left:0;right:0;bottom:56px;z-index:45;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,5,7,0),rgba(5,5,7,.96) 40%)}
.pd-sticky .btn{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;font-size:17px;padding:15px}
.pd-sticky .btn small{font-weight:400;opacity:.85;font-size:13px}
body.has-sticky{padding-bottom:140px}
.pd-preview .cut.speech.panel{margin-bottom:10px}
.pd-blur{position:relative}.pd-blur .panel-img{filter:blur(2.5px)}.pd-blur::after{content:"결제 후 내 사주로 새로 씁니다";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:12px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;white-space:nowrap}

/* 화면 전환·눌림 */
/* Native page crossfades disabled: theme and content render once. */
.ccard,.tcard,.item,.btn{transition:transform .12s ease}
.ccard:active,.tcard:active,.item:active{transform:scale(.97)}
.help-steps{list-style:none;display:grid;gap:8px}.help-steps li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--bg-2)}.help-steps li b{font-size:15px}.help-steps li span{font-size:13px;color:var(--muted)}
.pd-toc-wrap summary{font-size:15px}
.pd-hero.poster{display:block;grid-template-columns:none;gap:0;margin-top:0}
.pd-hero.poster img{width:100%;height:100%;border-radius:0}
.pd-cta{position:static;padding:4px 0 0;background:none}
.poster.sm .badge:not(.free){display:none}.poster.sm .price,.poster.sm .badge{font-size:10px;padding:3px 7px;top:8px}.poster.sm .price{right:8px}.poster.sm .badge{left:8px}
.daily.line .t small{display:block;font-size:11px;color:var(--dim);margin-top:2px}

.poster[data-key="newyear"]{aspect-ratio:4/5!important;align-self:flex-start;background:#08383D}
.poster[data-key="newyear"] img{object-fit:cover;object-position:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}