/* ============================================================
   태양사주 — 디자인 시스템 (밝은 태양 · 골드 · 아이보리)
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

:root {
  --sun: #F7A11A; --sun-deep: #E5820E; --sun-glow: #FFD166; --gold: #F2C14E; --gold-deep: #C9911A;
  --peach: #FFE3B8; --cream: #FFF6E3; --ivory: #FFFDF8; --sky: #FFF1D3;
  --ink: #3B2A10; --ink-2: #5E4622; --muted: #9C8256; --line: #F2E3C5; --line-2: #E9D5AE;
  --white: #fff; --red: #E4553E; --green: #2F9E6B; --blue: #3B7DD8;
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 12px 34px rgba(201, 145, 26, .14); --shadow-sm: 0 4px 14px rgba(201, 145, 26, .12);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'Gowun Batang', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); line-height: 1.55; font-size: 15px;
  background: #FFF3DA;
  background-image: radial-gradient(1200px 700px at 50% -10%, #FFE9B8 0%, rgba(255, 233, 184, 0) 60%), radial-gradient(900px 600px at 100% 100%, #FFE0C2 0%, rgba(255, 224, 194, 0) 55%), linear-gradient(180deg, #FFF7E6, #FFEFD2);
  background-attachment: fixed;
}
a { color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
.app { min-height: 100dvh; position: relative; }
.app.stage { max-width: 520px; margin: 0 auto; background: var(--ivory); box-shadow: 0 0 80px rgba(201, 145, 26, .15); }
.page { max-width: 1120px; margin: 0 auto; padding: 0 0 96px; }
.page.narrow { max-width: 780px; }
.page.mid { max-width: 920px; }
.container { padding: 0 18px; }
.hidden { display: none !important; }

/* ---------- 상단바 / 하단 내비 ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 253, 248, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1120px; margin: 0 auto; height: 58px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; }
.topbar-title { font-weight: 700; font-size: 16px; white-space: nowrap; }
.site-nav { display: none; align-items: center; gap: 2px; margin-left: 18px; }
.site-nav a { padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.site-nav a:hover, .site-nav a.active { background: var(--cream); color: var(--sun-deep); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topbar .cta { display: none; margin-right: 6px; }
.menu-btn { display: inline-flex; }
.mobile-menu { display: none; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 16px 30px rgba(59, 42, 16, .12); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 14px 20px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-menu a.active { color: var(--sun-deep); }
@media (min-width: 900px) { .site-nav { display: flex; } .topbar .cta { display: inline-flex; } .menu-btn, .mobile-menu { display: none !important; } .topbar-inner { height: 70px; padding: 0 24px; } }
.app.stage .site-nav, .app.stage .cta, .app.stage .menu-btn, .app.stage .mobile-menu { display: none !important; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .5px; color: var(--ink); }
.logo .sun { width: 26px; height: 26px; color: var(--sun); display: inline-flex; animation: spin 40s linear infinite; }
.logo .sun svg { width: 100%; height: 100%; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--ink-2); text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:hover { background: var(--cream); }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; height: 66px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); display: flex; z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--muted); text-decoration: none; font-weight: 600; }
.bottom-nav a svg { width: 24px; height: 24px; }
.bottom-nav a.active { color: var(--sun-deep); }
@media (min-width: 768px) { .bottom-nav { display: none; } .page { padding-bottom: 40px; } }

/* ---------- 버튼 / 칩 / 배지 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 14px; border: 0; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .2s ease, opacity .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, #FFC24A 0%, #F7A11A 55%, #EF8A0C 100%); color: #fff; box-shadow: 0 10px 24px rgba(239, 138, 12, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(239, 138, 12, .45); }
.btn-dark { background: var(--ink); color: #FFE9B8; }
.btn-ghost { background: #fff; color: var(--ink-2); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { background: var(--cream); }
.btn-kakao { background: #FEE500; color: #191919; }
.btn-naver { background: #03C75A; color: #fff; }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn-lg { height: 58px; font-size: 17px; }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cream); color: var(--ink-2); font-size: 13px; font-weight: 600; border: 1px solid var(--line); }
.chip.on { background: var(--ink); color: #FFE9B8; border-color: var(--ink); }
.badge { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .3px; background: var(--sun); color: #fff; }
.badge.red { background: var(--red); }
.badge.dark { background: var(--ink); color: #FFE9B8; }
.badge.soft { background: var(--cream); color: var(--sun-deep); border: 1px solid var(--line-2); }

/* ---------- 카드 / 섹션 ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; }
.section { padding: 26px 18px 6px; }
.section-title { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.section-title .sun-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(247, 161, 26, .18); }
.section-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* ---------- 홈 히어로 ---------- */
.hero { position: relative; margin: 12px 14px 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3.6; background: #FFE7B8; box-shadow: var(--shadow); }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; transform: scale(1.02); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 244, 220, 0) 35%, rgba(255, 236, 200, .55) 62%, rgba(255, 244, 222, .96) 100%); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; z-index: 2; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sun-deep); background: rgba(255, 255, 255, .8); padding: 5px 10px; border-radius: 999px; margin-bottom: 8px; }
.hero-title { font-family: var(--serif); font-size: 27px; line-height: 1.25; margin: 0 0 6px; color: var(--ink); text-shadow: 0 1px 0 #fff; }
.hero-title em { font-style: normal; color: var(--sun-deep); }
.hero-desc { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.rays { position: absolute; inset: -40%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 8deg, rgba(255, 255, 255, .35) 12deg, rgba(255, 255, 255, 0) 16deg 30deg, rgba(255, 255, 255, .28) 34deg, rgba(255, 255, 255, 0) 38deg 60deg, rgba(255, 255, 255, .35) 64deg, rgba(255, 255, 255, 0) 68deg 90deg, rgba(255, 255, 255, .3) 94deg, rgba(255, 255, 255, 0) 98deg 120deg, rgba(255, 255, 255, .35) 124deg, rgba(255, 255, 255, 0) 128deg 150deg, rgba(255, 255, 255, .3) 154deg, rgba(255, 255, 255, 0) 158deg 180deg, rgba(255, 255, 255, .35) 184deg, rgba(255, 255, 255, 0) 188deg 210deg, rgba(255, 255, 255, .3) 214deg, rgba(255, 255, 255, 0) 218deg 240deg, rgba(255, 255, 255, .35) 244deg, rgba(255, 255, 255, 0) 248deg 270deg, rgba(255, 255, 255, .3) 274deg, rgba(255, 255, 255, 0) 278deg 300deg, rgba(255, 255, 255, .35) 304deg, rgba(255, 255, 255, 0) 308deg 330deg, rgba(255, 255, 255, .3) 334deg, rgba(255, 255, 255, 0) 338deg 360deg); animation: spin 60s linear infinite; pointer-events: none; mix-blend-mode: screen; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-120px) scale(.6); opacity: 0; } }
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particles i { position: absolute; bottom: 10%; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFF6C7, #FFC85C); box-shadow: 0 0 10px #FFD98A; animation: floaty 6s ease-in infinite; }

/* ---------- 카테고리 탭 ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 16px 18px 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .chip { flex: 0 0 auto; cursor: pointer; }

/* ---------- 상품 카드 ---------- */
.products { display: grid; gap: 16px; padding: 8px 14px 4px; }
@media (min-width: 640px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .products { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.product { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease; }
.product:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.product .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream); }
.product .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product .thumb .badge { position: absolute; left: 12px; top: 12px; }
.product .body { padding: 14px 16px 16px; }
.product .cat { font-size: 12px; color: var(--sun-deep); font-weight: 700; margin-bottom: 4px; }
.product .name { font-family: var(--serif); font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.product .tagline { font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-row .rate { color: var(--red); font-weight: 800; font-size: 17px; }
.price-row .price { font-weight: 800; font-size: 19px; }
.price-row .orig { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.product .meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.product .meta b { color: var(--sun-deep); }

/* ---------- 무료 콘텐츠 ---------- */
.free-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 14px; }
@media (min-width: 768px) { .free-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .free-card { padding: 22px 20px; min-height: 140px; } .free-card b { font-size: 17px; } .free-card span { font-size: 13.5px; } }
.free-card { text-decoration: none; background: linear-gradient(160deg, #FFF8E8, #FFEBC4); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 14px; min-height: 118px; position: relative; overflow: hidden; }
.free-card .ico { font-size: 26px; margin-bottom: 8px; }
.free-card b { display: block; font-size: 15px; margin-bottom: 4px; }
.free-card span { font-size: 12px; color: var(--ink-2); }
.free-card::after { content: ''; position: absolute; right: -24px; bottom: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 205, 90, .55), rgba(255, 205, 90, 0) 70%); }

/* ---------- 후기 ---------- */
.reviews { display: flex; gap: 12px; overflow-x: auto; padding: 8px 14px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.review { flex: 0 0 82%; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.review .stars { color: var(--sun); letter-spacing: 1px; font-size: 13px; margin-bottom: 6px; }
.review p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.review .who { font-size: 12px; color: var(--muted); }
.review .tag { font-size: 11px; color: var(--sun-deep); font-weight: 700; margin-right: 6px; }
.review-list { display: grid; gap: 10px; padding: 4px 14px; }
.review-list .review { flex: none; }
@media (min-width: 768px) { .reviews { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } .review { flex: none; } }

/* ---------- 푸터 ---------- */
.site-footer { margin-top: 40px; background: var(--cream); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 30px 18px 10px; display: grid; gap: 24px; }
.footer-brand .logo { font-size: 20px; margin-bottom: 8px; }
.footer-brand p { margin: 0; line-height: 1.6; max-width: 320px; }
.footer-col b, .footer-biz b { display: block; font-weight: 800; margin-bottom: 8px; color: var(--ink); font-size: 13px; }
.footer-col a { display: block; padding: 4px 0; text-decoration: none; color: var(--ink-2); }
.footer-col a:hover { color: var(--sun-deep); }
.biz { margin: 0; display: grid; gap: 3px; }
.biz div { display: flex; gap: 10px; }
.biz dt { flex: 0 0 104px; color: var(--muted); }
.biz dd { margin: 0; }
.footer-note { margin: 10px 0 0; }
.footer-copy { max-width: 1120px; margin: 0 auto; padding: 14px 18px 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.5; }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1.2fr .7fr .7fr 1.6fr; padding: 40px 24px 16px; } .footer-copy { padding: 16px 24px 34px; } }
.app.stage .footer-inner { grid-template-columns: 1fr !important; padding: 26px 18px 6px; }

/* ---------- 폼 ---------- */
.field { margin-bottom: 18px; }
.field > label, .field .lbl { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.field .help { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.field .req { color: var(--red); margin-left: 2px; }
.input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 13px; background: #fff; font-size: 16px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.input:focus { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(247, 161, 26, .15); }
.input.err { border-color: var(--red); }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 13px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 700; cursor: pointer; transition: all .15s; }
.seg input:checked + span { background: var(--ink); color: #FFE9B8; border-color: var(--ink); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--sun-deep); }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .92); font-weight: 700; font-size: 15px; cursor: pointer; transition: all .15s; }
.opt.on { background: var(--ink); color: #FFE9B8; border-color: var(--ink); }
.err-msg { color: var(--red); font-size: 12.5px; margin-top: 6px; }

/* ---------- 스토리(퍼널) ---------- */
.story { position: relative; min-height: 100dvh; overflow: hidden; background: #FFE7B8; display: flex; flex-direction: column; }
.story-bg { position: absolute; inset: 0; z-index: 0; }
.story-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.6s ease, object-position 1.6s ease, filter .6s ease; }
.story-bg.zoom img { transform: scale(1.5); object-position: 12% 100%; }
.story-bg.dim img { filter: brightness(.72) saturate(.9); }
.story-bg.blur img { filter: blur(6px) brightness(.8); transform: scale(1.06); }
.story-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 240, 210, .0) 0%, rgba(255, 240, 210, 0) 55%, rgba(60, 40, 10, .55) 100%); }
.story-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 0; }
.story-top .brand { font-family: var(--serif); font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); font-size: 15px; letter-spacing: .5px; display: flex; gap: 6px; align-items: center; }
.story-top .brand svg { width: 18px; height: 18px; color: #FFD166; }
.story-top .icon-btn { color: #fff; background: rgba(0, 0, 0, .2); }
.story-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 18px 110px; }
.story-line { font-size: 18px; font-weight: 700; color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); line-height: 1.5; margin: 0 0 8px; animation: fadeUp .6s ease both; }
.story-line.serif { font-family: var(--serif); font-size: 21px; }
.bubble { position: absolute; z-index: 3; max-width: 62%; background: rgba(255, 255, 255, .95); color: var(--ink); border-radius: 20px; padding: 12px 16px; font-size: 14.5px; font-weight: 700; line-height: 1.45; box-shadow: 0 8px 24px rgba(60, 40, 10, .18); animation: pop .5s ease both; }
.bubble::after { content: ''; position: absolute; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.bubble.tr { top: 12%; right: 8%; }
.bubble.tr::after { bottom: -6px; left: 28px; }
.bubble.tl { top: 10%; left: 8%; }
.bubble.tl::after { bottom: -6px; right: 28px; }
.bubble.bl { bottom: 34%; left: 8%; }
.bubble.bl::after { top: -6px; right: 30px; }
.bubble.delay { animation-delay: .9s; }
.story-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(60, 40, 10, 0), rgba(60, 40, 10, .35)); }
.story-actions .btn-back { flex: 0 0 52px; width: 52px; padding: 0; background: rgba(255, 255, 255, .92); color: var(--ink); }
.story-actions .btn-back svg { width: 22px; height: 22px; }
.story-actions .btn-primary { flex: 1; }
.story-form { position: relative; z-index: 2; margin: 0 14px 96px; background: rgba(255, 253, 248, .94); backdrop-filter: blur(6px); border-radius: 22px; padding: 22px 18px 8px; box-shadow: var(--shadow); animation: fadeUp .5s ease both; }
.story-form h2 { font-family: var(--serif); font-size: 21px; margin: 0 0 4px; }
.story-form .sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.story-form.ask h2 { text-align: center; }
.story-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, .35); z-index: 6; }
.story-progress i { display: block; height: 100%; background: linear-gradient(90deg, #FFD166, #F7A11A); transition: width .4s ease; }
.deity-tag { position: absolute; z-index: 3; left: 16px; top: 58px; background: rgba(60, 40, 10, .55); color: #FFE9B8; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* ---------- 상품 소개(인트로) ---------- */
.intro-card { margin: 0 14px 96px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); position: relative; z-index: 2; animation: fadeUp .5s ease both; }
.intro-card .thumb { aspect-ratio: 16 / 9; }
.intro-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.intro-card .body { padding: 18px 18px 14px; }
.intro-card h1 { font-family: var(--serif); font-size: 24px; margin: 6px 0 6px; }
.intro-card .desc { color: var(--ink-2); font-size: 14.5px; margin: 0 0 14px; }
.includes { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.includes li { display: flex; gap: 8px; font-size: 14px; }
.includes li::before { content: '☀'; color: var(--sun); font-size: 12px; margin-top: 3px; }
.stat-row { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.stat-row b { color: var(--ink); }

/* ---------- 결제 ---------- */
.checkout { padding: 14px 14px 0; display: grid; gap: 14px; }
.checkout .banner { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-sm); }
.checkout .banner img { width: 100%; height: 100%; object-fit: cover; }
.amount-card .row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14.5px; }
.amount-card .row.sub { color: var(--muted); padding-left: 10px; font-size: 13.5px; }
.amount-card .row.total { border-top: 1.5px dashed var(--line-2); margin-top: 6px; padding-top: 14px; font-weight: 800; font-size: 16px; }
.amount-card .row.total b { font-size: 24px; color: var(--sun-deep); }
.agree { display: grid; gap: 10px; }
.agree .row { display: flex; align-items: center; justify-content: space-between; }
.agree .all { font-weight: 800; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.agree a { font-size: 12.5px; color: var(--muted); }
.pay-buttons { display: grid; gap: 10px; }
.coupon-ok { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; background: #FFF4DC; border: 1px dashed var(--gold-deep); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.coupon-ok b { color: var(--sun-deep); }
.coupon-ok button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12.5px; text-decoration: underline; }
.test-note { font-size: 12px; color: var(--muted); background: var(--cream); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }

/* ---------- 대기 화면 ---------- */
.waiting { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; background: radial-gradient(600px 400px at 50% 30%, #FFF2CF, #FFFDF8 70%); }
.sunrise { position: relative; width: 150px; height: 150px; margin-bottom: 24px; }
.sunrise .disc { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF3B0, #FFB020 70%); box-shadow: 0 0 40px 10px rgba(255, 190, 60, .45); animation: pulse 2.4s ease-in-out infinite; }
.sunrise .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(247, 161, 26, .5); animation: spin 14s linear infinite; }
.sunrise .ring.r2 { inset: 8px; border-style: dotted; animation-direction: reverse; animation-duration: 22s; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.waiting h1 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; }
.waiting .msg { min-height: 48px; color: var(--ink-2); font-size: 15px; transition: opacity .4s; }
.waiting .note { margin-top: 26px; font-size: 12.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.waiting .bar { width: 220px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 18px; }
.waiting .bar i { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, #FFD166, #F7A11A); border-radius: 6px; transition: width .6s ease; }

/* ---------- 리포트 ---------- */
.report { padding: 0 14px 110px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.report > * { min-width: 0; max-width: 100%; }
.report-hero > div { min-width: 0; flex: 1; }
.report-hero { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #FFF3D2, #FFE1A8); box-shadow: var(--shadow); padding: 22px 20px 20px; display: flex; gap: 14px; align-items: center; }
.report-hero .avatar { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(201, 145, 26, .3); }
.report-hero .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.report-hero h1 { font-family: var(--serif); font-size: 21px; margin: 0 0 6px; line-height: 1.3; }
.report-hero .quote { font-size: 14px; color: var(--ink-2); font-style: italic; margin: 0 0 6px; line-height: 1.5; }
.report-hero .who { font-size: 12px; color: var(--muted); }
.rs { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px; box-shadow: var(--shadow-sm); }
.rs h2 { font-family: var(--serif); font-size: 19px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs .sub { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
.rs p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.rs p:last-child { margin-bottom: 0; }
.rs .keywords { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.rs .keywords span { background: var(--cream); color: var(--sun-deep); font-weight: 700; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }
.sunquote { margin-top: 12px; background: linear-gradient(135deg, #FFF6E0, #FFEBC2); border-left: 4px solid var(--sun); border-radius: 12px; padding: 12px 14px; font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.6; }
.sunquote small { display: block; margin-top: 6px; font-family: var(--font); font-size: 12px; color: var(--muted); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 10px; }
.pillar { text-align: center; }
.pillar-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.pillar-label em { font-style: normal; color: var(--sun-deep); }
.pillar .cell { --c: #C9911A; border-radius: 12px; padding: 10px 4px 8px; margin-bottom: 6px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--c) 45%, #fff); }
.pillar .cell b { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--c); }
.pillar .cell small { display: block; font-size: 10.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.3; }
.pillar.day .cell { box-shadow: 0 0 0 3px rgba(247, 161, 26, .25); }
.pillar.empty .cell { background: var(--cream); border-color: var(--line-2); color: var(--muted); font-size: 24px; padding: 14px 4px; }
.pillar-meta { font-size: 10.5px; color: var(--muted); }
.elem-bars { display: grid; gap: 8px; margin: 8px 0 14px; }
.elem-row { display: grid; grid-template-columns: 62px 1fr 26px; align-items: center; gap: 10px; font-size: 13px; }
.elem-name { font-weight: 800; }
.elem-bar { height: 12px; border-radius: 8px; background: var(--cream); overflow: hidden; }
.elem-bar i { display: block; height: 100%; border-radius: 8px; transition: width .8s ease; }
.elem-count { text-align: right; font-weight: 700; color: var(--ink-2); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { background: var(--ink); color: #FFE9B8; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.pill.gold { background: linear-gradient(135deg, #FFC24A, #EF8A0C); color: #fff; }
.cards { display: grid; gap: 10px; }
.cards .item { background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.cards .item h3 { margin: 0 0 6px; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cards .item h3 .lv { font-size: 11px; font-weight: 800; color: var(--sun-deep); background: var(--cream); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cards .item p { margin: 0; font-size: 13.5px; }
.sinsal-list { display: grid; gap: 10px; }
.sinsal-item { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.sinsal-item .mark { flex: 0 0 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 15px; background: var(--cream); color: var(--muted); }
.sinsal-item.on .mark { background: linear-gradient(135deg, #FFC24A, #EF8A0C); color: #fff; box-shadow: 0 6px 14px rgba(239, 138, 12, .3); }
.sinsal-item h3 { margin: 0 0 4px; font-size: 14.5px; }
.sinsal-item p { margin: 0; font-size: 13.5px; }
.dw-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.dw-scroll::-webkit-scrollbar { display: none; }
.dw { flex: 0 0 74px; text-align: center; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 4px; background: #fff; }
.dw.cur { border-color: var(--sun); background: #FFF6E0; box-shadow: 0 0 0 3px rgba(247, 161, 26, .18); }
.dw .age { font-size: 11px; color: var(--muted); font-weight: 700; }
.dw .gj { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.2; margin: 4px 0; }
.dw .tg { font-size: 10.5px; color: var(--ink-2); }
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; }
.mon { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 8px; background: #fff; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.mon b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.mon small { display: block; color: var(--muted); font-size: 10.5px; margin-bottom: 4px; }
.mon.good { border-color: var(--sun); background: #FFF6E0; }
.mon.good b::after { content: ' ☀'; color: var(--sun-deep); }
.mon.warn { border-color: #F2C7BF; background: #FFF4F1; }
.mon.warn b::after { content: ' ⚠'; color: var(--red); font-size: 11px; }
.score-wrap { text-align: center; padding: 8px 0 14px; }
.score-ring { width: 150px; height: 150px; margin: 0 auto 10px; border-radius: 50%; background: conic-gradient(#F7A11A calc(var(--s) * 1%), #FFEFD2 0); display: flex; align-items: center; justify-content: center; position: relative; }
.score-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.score-ring b { position: relative; font-family: var(--serif); font-size: 42px; color: var(--sun-deep); }
.score-ring b small { font-size: 16px; color: var(--muted); }
.score-band { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 10px 0 14px; }
.vs .person { text-align: center; background: var(--ivory); border: 1px solid var(--line); border-radius: 16px; padding: 14px 8px; }
.vs .person .lbl { font-size: 11px; color: var(--muted); font-weight: 700; }
.vs .person .nm { font-weight: 800; font-size: 15px; margin: 2px 0; }
.vs .person .gj { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--c); line-height: 1.2; }
.vs .person .il { font-size: 12px; color: var(--ink-2); }
.vs .person .sym { font-size: 11px; color: var(--muted); margin-top: 4px; }
.vs .heart { font-size: 22px; color: var(--sun); }
.rel { border-left: 3px solid var(--gold); padding: 4px 0 4px 12px; margin-bottom: 12px; }
.rel .tag { font-size: 11px; color: var(--sun-deep); font-weight: 800; }
.rel h3 { margin: 2px 0 4px; font-size: 15px; }
.rel p { margin: 0; font-size: 13.5px; }
.report-actions { display: grid; gap: 10px; padding: 6px 0; }
.share-row { display: flex; gap: 8px; }
.share-row .btn { flex: 1; }
.report-foot { font-size: 11.5px; color: var(--muted); line-height: 1.5; text-align: center; padding: 8px 6px 0; }

/* ---------- 보관함 / 검색 / 정책 ---------- */
.list { display: grid; gap: 10px; padding: 8px 14px; }
.order-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-decoration: none; box-shadow: var(--shadow-sm); }
.order-item .ico { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #FFE7B8, #FFC85C); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 46px; }
.order-item b { display: block; font-size: 15px; }
.order-item span { font-size: 12px; color: var(--muted); }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.policy { padding: 10px 18px 40px; font-size: 14px; color: var(--ink-2); }
.policy h1 { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.policy h2 { font-size: 16px; color: var(--ink); margin: 22px 0 8px; }
.policy p, .policy li { line-height: 1.7; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 15px; }
.faq p { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- 토스트 ---------- */
#toast-box { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: rgba(59, 42, 16, .94); color: #FFE9B8; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center; opacity: 0; transform: translateY(8px); transition: all .3s; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: rgba(228, 85, 62, .96); color: #fff; }

@media (min-width: 560px) { .app.stage { margin: 18px auto; min-height: calc(100dvh - 36px); border-radius: 30px; overflow: hidden; } .app.stage .story, .app.stage .waiting { min-height: calc(100dvh - 36px); } }
@media (prefers-reduced-motion: reduce) { .rays, .logo .sun, .particles i, .sunrise .ring { animation: none; } }

/* ---------- 타로 ---------- */
.tarot-hero { margin: 12px 14px 14px; border-radius: 22px; background: radial-gradient(500px 240px at 20% 0%, #2A3158, #141A2E 70%); color: #FFF3D6; padding: 22px 20px 20px; display: flex; gap: 16px; align-items: center; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tarot-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 161, 26, .35), rgba(247, 161, 26, 0) 70%); }
.tarot-hero h1 { font-family: var(--serif); font-size: 23px; margin: 6px 0 6px; color: #FFE9B8; }
.tarot-hero p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #E8DDC4; }
.tarot-hero .badge { background: var(--sun); }
.deck-mini { position: relative; flex: 0 0 96px; height: 110px; }
.deck-mini i { position: absolute; left: 22px; top: 12px; width: 50px; height: 80px; border-radius: 6px; background: #1B2140; border: 1.5px solid #E7C36A; box-shadow: inset 0 0 0 3px #1B2140, inset 0 0 0 4px rgba(231, 195, 106, .6), 0 6px 14px rgba(0, 0, 0, .35); transform-origin: 50% 120%; }
.deck-mini i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid #E7C36A; box-shadow: 0 0 8px rgba(231, 195, 106, .6); }
.deck-mini i:nth-child(1) { transform: rotate(-28deg); } .deck-mini i:nth-child(2) { transform: rotate(-14deg); } .deck-mini i:nth-child(3) { transform: rotate(0); } .deck-mini i:nth-child(4) { transform: rotate(14deg); } .deck-mini i:nth-child(5) { transform: rotate(28deg); }
.tarot-banner { display: flex; align-items: center; gap: 14px; margin: 14px 14px 0; padding: 14px 16px; border-radius: 20px; background: linear-gradient(120deg, #1B2140, #2A3158); color: #FFF3D6; text-decoration: none; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tarot-banner::after { content: ''; position: absolute; right: -30px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 161, 26, .35), rgba(247, 161, 26, 0) 70%); }
.tarot-banner .deck-mini { flex: 0 0 84px; height: 92px; transform: scale(.85); transform-origin: left center; }
.tarot-banner .txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.tarot-banner .txt b { display: block; font-family: var(--serif); font-size: 19px; color: #FFE9B8; margin: 4px 0 2px; }
.tarot-banner .txt span.desc { font-size: 12.5px; color: #E8DDC4; }
.tarot-banner .btn { position: relative; z-index: 1; flex: 0 0 auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { cursor: pointer; height: 38px; font-size: 14px; }
.pick-head { padding: 4px 0 10px; }
.slots { display: flex; justify-content: center; gap: 12px; padding: 6px 0 14px; }
.slot { text-align: center; }
.slot-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.slot-card { width: 92px; height: 149px; margin: 0 auto; position: relative; }
.slot-empty { width: 100%; height: 100%; border-radius: 10px; border: 2px dashed var(--line-2); background: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; color: var(--line-2); }
.slot-card .tcard { --w: 92px; }
.fan-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 30px 0 0; -webkit-overflow-scrolling: touch; }
.fan-scroll::-webkit-scrollbar { display: none; }
.fan { position: relative; width: 560px; height: 215px; margin: 0 auto; }
.fan-card { position: absolute; left: calc(50% - 34px); top: 0; transform-origin: 50% 430px; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; cursor: pointer; }
.fan-card .tcard { transition: transform .25s ease, filter .25s ease; }
.fan-card:hover .tcard, .fan-card:focus-visible .tcard { transform: translateY(-22px); filter: drop-shadow(0 10px 14px rgba(201, 145, 26, .45)); }
.fan-card.picked { opacity: 0; pointer-events: none; }
.fan-card.picked .tcard { transform: translateY(-60px) scale(1.06); }
.fan-hint { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 16px 14px; }
/* 카드 본체 (뒷면 SVG + 앞면 도안) */
.tcard { --w: 68px; width: var(--w); height: calc(var(--w) * 1.62); position: relative; perspective: 900px; font-size: calc(var(--w) * 0.11); }
.tcard .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.tcard.flipped .inner { transform: rotateY(180deg); }
.tcard .back, .tcard .front { position: absolute; inset: 0; border-radius: calc(var(--w) * 0.11); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.tcard .back { background: #151A2E; box-shadow: 0 6px 14px rgba(20, 24, 46, .45); }
.tcard .back svg { width: 100%; height: 100%; display: block; }
.back-art { fill: none; stroke: #E7C36A; stroke-width: 1.1; }
.back-art .fill { fill: #E7C36A; stroke: none; }
.tcard .front { transform: rotateY(180deg); background: #FFF9EC; border: 2px solid #D9B25A; box-shadow: 0 6px 14px rgba(201, 145, 26, .35); }
.tcard .front-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 0.55em 0.3em 0.5em; color: #8E6A1E; box-shadow: inset 0 0 0 0.25em #FFF9EC, inset 0 0 0 0.35em #E7C36A; }
.tcard .front-inner.rev { transform: rotate(180deg); }
.tcard .num { font-family: var(--serif); font-weight: 700; font-size: 1.1em; letter-spacing: .05em; }
.tcard .emb { width: 58%; aspect-ratio: 1; }
.tcard .emb svg { width: 100%; height: 100%; fill: none; stroke: #B8871F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tcard .nm { text-align: center; line-height: 1.15; }
.tcard .nm small { display: block; font-size: 0.62em; letter-spacing: .08em; color: #B8955A; white-space: nowrap; transform: scale(.9); }
.tcard .nm b { display: block; font-size: 1em; color: #6B4E12; font-family: var(--serif); }
.tcard.mini { --w: 60px; flex: 0 0 60px; }
.tcard.pop .inner { animation: cardpop .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes cardpop { from { transform: translateY(24px) scale(.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.tarot-rs-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.tarot-rs-head .pos { font-size: 11.5px; font-weight: 800; color: var(--sun-deep); }
.tarot-rs-head h2 { margin: 2px 0 6px; }
.tarot-rs-head h2 small { font-family: var(--font); font-size: 12px; color: var(--muted); font-weight: 600; }
.tarot-rs-head .keywords { margin: 8px 0 0; }
@media (max-width: 400px) { .slot-card { width: 78px; height: 126px; } .slot-card .tcard { --w: 78px; } .slots { gap: 8px; } }


/* ---------- 홈페이지 레이아웃 (히어로 2단 · 섹션 · 이용 방법 · 타로 밴드) ---------- */
.sec { padding: 34px 14px 6px; }
.sec-head { margin-bottom: 14px; }
.sec-head h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 6px; letter-spacing: -.2px; }
.sec-head p { margin: 0; color: var(--muted); font-size: 14px; }
.sec .tabs { padding-left: 0; padding-right: 0; }
.sec .products, .sec .free-grid, .sec .reviews { padding-left: 0; padding-right: 0; }
.hero2 { display: grid; gap: 18px; padding: 14px 14px 0; align-items: center; }
.hero2-visual { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); background: #FFE7B8; order: -1; }
.hero2-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%; }
.hero2-visual .glow { position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); pointer-events: none; z-index: 1; }
.hero2-text { padding: 4px 4px 0; }
.hero2-text h1 { font-family: var(--serif); font-size: 32px; line-height: 1.22; margin: 10px 0 12px; letter-spacing: -.3px; }
.hero2-text h1 em { font-style: normal; color: var(--sun-deep); }
.hero2-text p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 520px; }
.hero2-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hero2-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); font-weight: 600; }
@media (min-width: 900px) {
  .hero2 { grid-template-columns: 1.05fr 1fr; gap: 40px; padding: 34px 24px 10px; min-height: 520px; }
  .hero2-visual { order: 0; aspect-ratio: 5 / 4; }
  .hero2-text h1 { font-size: 46px; }
  .hero2-text p { font-size: 17px; }
  .sec { padding: 54px 24px 10px; }
  .sec-head h2 { font-size: 30px; }
  .sec-head p { font-size: 15.5px; }
}
.steps-grid { display: grid; gap: 12px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: start; }
.step i { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #FFC24A, #EF8A0C); color: #fff; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(239, 138, 12, .3); }
.step b { font-size: 16px; }
.step span { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .step { padding: 24px 20px; grid-template-columns: 1fr; gap: 8px; } .step i { grid-row: auto; margin-bottom: 4px; } }
.tarot-band { margin: 30px 14px 0; border-radius: 26px; background: radial-gradient(600px 300px at 15% 0%, #2A3158, #141A2E 70%); color: #FFF3D6; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tarot-band::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 161, 26, .35), rgba(247, 161, 26, 0) 70%); }
.tarot-band-inner { position: relative; z-index: 1; display: grid; gap: 14px; padding: 24px 22px; align-items: center; justify-items: start; }
.tarot-band h2 { font-family: var(--serif); font-size: 24px; margin: 8px 0 8px; color: #FFE9B8; }
.tarot-band p { margin: 0; color: #E8DDC4; line-height: 1.65; font-size: 14.5px; max-width: 520px; }
.tarot-band .deck-mini { flex: none; }
@media (min-width: 768px) { .tarot-band { margin: 50px 24px 0; } .tarot-band-inner { grid-template-columns: 120px 1fr auto; gap: 28px; padding: 36px 40px; } .tarot-band h2 { font-size: 30px; } }
.faq-sec .faq { padding: 6px 18px; }
.home .site-footer { margin-top: 50px; }

/* ---------- 타로: 데스크톱 크기 · 테이블 느낌 · 자연스러운 움직임 ---------- */
.fan-scroll { background: radial-gradient(52% 46% at 50% 68%, rgba(201, 145, 26, .18), rgba(201, 145, 26, 0) 72%); }
.fan { --card: 68px; }
.fan-card { left: calc(50% - var(--card) / 2); }
.fan-card .tcard { --w: var(--card); }
.fan-card:hover { z-index: 60 !important; }
@media (min-width: 768px) {
  .fan { --card: 84px; width: 740px; height: 258px; }
  .fan-card { transform-origin: 50% 540px; }
  .slot-card { width: 112px; height: 181px; }
  .slot-card .tcard { --w: 112px; }
  .slots { gap: 18px; }
  .tarot-hero { padding: 30px 32px 28px; gap: 26px; }
  .tarot-hero h1 { font-size: 30px; }
  .tarot-hero p { font-size: 15px; }
  .deck-mini { transform: scale(1.15); transform-origin: left center; }
}
.tcard.ghost .inner { transition: none; }

/* ---------- 스토리 전환 ---------- */
.story { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* ============================================================
   화려하게 — 황금빛 태양 테마 강화 (광선 · 반짝임 · 입자 · 등장 효과)
   ============================================================ */
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 10px 24px rgba(239, 138, 12, .35); } 50% { box-shadow: 0 14px 44px rgba(255, 190, 60, .75), 0 0 0 7px rgba(255, 209, 102, .18); } }
@keyframes ringPulse { 0%, 100% { box-shadow: 0 6px 14px rgba(239, 138, 12, .3), 0 0 0 0 rgba(255, 209, 102, .5); } 50% { box-shadow: 0 6px 14px rgba(239, 138, 12, .3), 0 0 0 12px rgba(255, 209, 102, 0); } }
@keyframes twinkle { 0% { opacity: .35; } 100% { opacity: 1; } }
@keyframes skyFloat { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: .85; } 90% { opacity: .6; } 100% { transform: translateY(-110vh) scale(.5); opacity: 0; } }
@keyframes sunPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

/* 배경: 더 진한 황금빛 + 회전하는 태양 광선 */
body { background: #FFEFD0; background-image: radial-gradient(1200px 700px at 50% -10%, #FFDF98 0%, rgba(255, 223, 152, 0) 60%), radial-gradient(900px 600px at 100% 100%, #FFD5B8 0%, rgba(255, 213, 184, 0) 55%), radial-gradient(800px 500px at 0% 60%, #FFF0B8 0%, rgba(255, 240, 184, 0) 60%), linear-gradient(180deg, #FFF7E4, #FFE7C2); background-attachment: fixed; }
body::before { content: ''; position: fixed; left: 50%; top: -60vw; width: 140vw; height: 140vw; margin-left: -70vw; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .55; animation: spin 120s linear infinite;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 6deg, rgba(255, 236, 170, .55) 9deg, rgba(255, 255, 255, 0) 12deg 24deg, rgba(255, 236, 170, .45) 27deg, rgba(255, 255, 255, 0) 30deg 42deg, rgba(255, 236, 170, .55) 45deg, rgba(255, 255, 255, 0) 48deg 60deg, rgba(255, 236, 170, .45) 63deg, rgba(255, 255, 255, 0) 66deg 78deg, rgba(255, 236, 170, .55) 81deg, rgba(255, 255, 255, 0) 84deg 96deg, rgba(255, 236, 170, .45) 99deg, rgba(255, 255, 255, 0) 102deg 114deg, rgba(255, 236, 170, .55) 117deg, rgba(255, 255, 255, 0) 120deg 132deg, rgba(255, 236, 170, .45) 135deg, rgba(255, 255, 255, 0) 138deg 150deg, rgba(255, 236, 170, .55) 153deg, rgba(255, 255, 255, 0) 156deg 168deg, rgba(255, 236, 170, .45) 171deg, rgba(255, 255, 255, 0) 174deg 186deg, rgba(255, 236, 170, .55) 189deg, rgba(255, 255, 255, 0) 192deg 204deg, rgba(255, 236, 170, .45) 207deg, rgba(255, 255, 255, 0) 210deg 222deg, rgba(255, 236, 170, .55) 225deg, rgba(255, 255, 255, 0) 228deg 240deg, rgba(255, 236, 170, .45) 243deg, rgba(255, 255, 255, 0) 246deg 258deg, rgba(255, 236, 170, .55) 261deg, rgba(255, 255, 255, 0) 264deg 276deg, rgba(255, 236, 170, .45) 279deg, rgba(255, 255, 255, 0) 282deg 294deg, rgba(255, 236, 170, .55) 297deg, rgba(255, 255, 255, 0) 300deg 312deg, rgba(255, 236, 170, .45) 315deg, rgba(255, 255, 255, 0) 318deg 330deg, rgba(255, 236, 170, .55) 333deg, rgba(255, 255, 255, 0) 336deg 348deg, rgba(255, 236, 170, .45) 351deg, rgba(255, 255, 255, 0) 354deg 360deg); }
.app { z-index: 1; }
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.sky i { position: absolute; bottom: -12px; border-radius: 50%; background: radial-gradient(circle, #FFF8D6, #FFC85C); box-shadow: 0 0 14px 2px rgba(255, 217, 138, .8); opacity: 0; animation: skyFloat linear infinite; }

/* 헤더: 금빛 라인 + 로고 그라데이션 */
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #FFD166 25%, #F7A11A 50%, #FFD166 75%, transparent); opacity: .9; }
.logo span:last-child { background: linear-gradient(90deg, #6B4E12, #C9911A, #6B4E12); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.site-nav a.active { box-shadow: inset 0 -2px 0 var(--sun); }

/* 버튼: 빛 스침 + 은은한 맥동 */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: -60%; left: -70%; width: 45%; height: 220%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; }
.btn-primary:hover::after { left: 140%; }
.hero2-cta .btn-primary, .tarot-band .btn-primary, .story-actions .btn-primary { animation: glowPulse 2.8s ease-in-out infinite; }
.btn-ghost { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--sun); color: var(--sun-deep); box-shadow: 0 10px 24px rgba(239, 138, 12, .18); }

/* 히어로: 태양 원반 · 광선 · 금테 · 떠다니는 배지 · 반짝이는 제목 */
.hero2-art { position: relative; }
.sun-disc { position: absolute; left: 12%; top: -14%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF6BF 0%, #FFCF57 40%, rgba(255, 207, 87, 0) 70%); filter: blur(10px); animation: sunPulse 5s ease-in-out infinite; z-index: 0; pointer-events: none; }
.rays-bg { position: absolute; inset: -34%; z-index: 0; pointer-events: none; opacity: .75; mix-blend-mode: screen; animation: spin 70s linear infinite; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 10deg, rgba(255, 244, 200, .9) 13deg, rgba(255, 255, 255, 0) 16deg 34deg, rgba(255, 244, 200, .7) 37deg, rgba(255, 255, 255, 0) 40deg 58deg, rgba(255, 244, 200, .9) 61deg, rgba(255, 255, 255, 0) 64deg 82deg, rgba(255, 244, 200, .7) 85deg, rgba(255, 255, 255, 0) 88deg 106deg, rgba(255, 244, 200, .9) 109deg, rgba(255, 255, 255, 0) 112deg 130deg, rgba(255, 244, 200, .7) 133deg, rgba(255, 255, 255, 0) 136deg 154deg, rgba(255, 244, 200, .9) 157deg, rgba(255, 255, 255, 0) 160deg 178deg, rgba(255, 244, 200, .7) 181deg, rgba(255, 255, 255, 0) 184deg 202deg, rgba(255, 244, 200, .9) 205deg, rgba(255, 255, 255, 0) 208deg 226deg, rgba(255, 244, 200, .7) 229deg, rgba(255, 255, 255, 0) 232deg 250deg, rgba(255, 244, 200, .9) 253deg, rgba(255, 255, 255, 0) 256deg 274deg, rgba(255, 244, 200, .7) 277deg, rgba(255, 255, 255, 0) 280deg 298deg, rgba(255, 244, 200, .9) 301deg, rgba(255, 255, 255, 0) 304deg 322deg, rgba(255, 244, 200, .7) 325deg, rgba(255, 255, 255, 0) 328deg 346deg, rgba(255, 244, 200, .9) 349deg, rgba(255, 255, 255, 0) 352deg 360deg); }
.hero2-visual { z-index: 1; padding: 4px; background: linear-gradient(135deg, #FFE9B8, #F7A11A, #FFF6D8, #E5820E, #FFE9B8); background-size: 300% 300%; animation: gradientMove 8s ease infinite; box-shadow: 0 30px 80px rgba(239, 138, 12, .38), 0 0 0 1px rgba(255, 255, 255, .6) inset; transition: transform .25s ease; will-change: transform; }
.hero2-visual img { border-radius: 22px; }
.hero2-visual .glow { border-radius: 22px; }
.float-chip { position: absolute; z-index: 3; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid rgba(247, 161, 26, .45); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; color: var(--ink); box-shadow: 0 12px 28px rgba(201, 145, 26, .28); animation: floatY 5s ease-in-out infinite; white-space: nowrap; }
.float-chip.c1 { left: -6px; top: 10%; }
.float-chip.c2 { right: -6px; top: 44%; animation-delay: 1.3s; }
.float-chip.c3 { left: 10%; bottom: -10px; animation-delay: 2.4s; }
.hero2-text h1 { text-shadow: 0 2px 0 #fff, 0 10px 30px rgba(247, 161, 26, .2); }
.hero2-text h1 em { background: linear-gradient(90deg, #E5820E, #FFD166, #F7A11A, #FFB627, #E5820E); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; filter: drop-shadow(0 3px 12px rgba(247, 161, 26, .35)); }
.hero-eyebrow { background: linear-gradient(90deg, #FFF6DC, #FFE3A6); border: 1px solid rgba(247, 161, 26, .5); box-shadow: 0 6px 16px rgba(247, 161, 26, .25); }
.hero2-trust span { background: rgba(255, 255, 255, .7); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }
@media (min-width: 900px) { .float-chip { font-size: 13.5px; padding: 10px 16px; } .float-chip.c1 { left: -28px; top: 12%; } .float-chip.c2 { right: -30px; top: 46%; } .float-chip.c3 { left: 6%; bottom: -14px; } .hero2 { min-height: 560px; } }

/* 섹션 제목 장식 */
.sec-head h2 { position: relative; padding-left: 0; }
.sec-head h2::before { content: ''; display: block; width: 52px; height: 4px; border-radius: 4px; margin-bottom: 12px; background: linear-gradient(90deg, #F7A11A, #FFD166); box-shadow: 0 0 14px rgba(247, 161, 26, .7); }
.sec-head h2 { background: linear-gradient(90deg, #3B2A10, #8E5A0F 60%, #3B2A10); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }

/* 상품 카드: 금테 · 이미지 확대 · 글로우 */
.product { position: relative; transition: transform .28s ease, box-shadow .28s ease; }
.product::after { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, #FFD166, #F7A11A, #FFF3C4, #EF8A0C, #FFD166); background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; animation: gradientMove 4s ease infinite; }
.product:hover::after { opacity: 1; }
.product:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(239, 138, 12, .3); }
.product .thumb img { transition: transform .7s ease; }
.product:hover .thumb img { transform: scale(1.07); }
.product .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(60, 40, 10, .25)); pointer-events: none; }
.product .badge { box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.price-row .price { background: linear-gradient(90deg, #C9911A, #E5820E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip.on { background: linear-gradient(135deg, #3B2A10, #6B4E12); box-shadow: 0 6px 14px rgba(59, 42, 16, .3); }

/* 무료 콘텐츠 · 단계 · 후기 */
.free-card { background: linear-gradient(135deg, #FFF8E8, #FFE3A6, #FFF2CF, #FFE7B8); background-size: 250% 250%; animation: gradientMove 10s ease infinite; transition: transform .25s, box-shadow .25s; }
.free-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(239, 138, 12, .25); }
.free-card .ico { filter: drop-shadow(0 6px 10px rgba(239, 138, 12, .35)); font-size: 30px; }
.step { transition: transform .25s, box-shadow .25s; }
.step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(239, 138, 12, .22); }
.step i { animation: ringPulse 2.8s ease-out infinite; }
.step:nth-child(2) i { animation-delay: .9s; } .step:nth-child(3) i { animation-delay: 1.8s; }
.review { position: relative; overflow: hidden; }
.review::before { content: '“'; position: absolute; right: 14px; top: -6px; font-family: var(--serif); font-size: 64px; line-height: 1; color: rgba(247, 161, 26, .22); }
.review .stars { text-shadow: 0 0 10px rgba(247, 161, 26, .6); }

/* 타로 밴드 · 타로 페이지: 별이 반짝이는 밤하늘 */
.tarot-band::before, .tarot-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9; animation: twinkle 2.6s ease-in-out infinite alternate;
  background-image: radial-gradient(2px 2px at 12% 28%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 26% 68%, #FFE9B8 50%, transparent 52%), radial-gradient(2px 2px at 41% 18%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 55% 78%, #FFD166 50%, transparent 52%), radial-gradient(2.5px 2.5px at 66% 32%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 78% 62%, #FFE9B8 50%, transparent 52%), radial-gradient(2px 2px at 88% 22%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 94% 74%, #FFD166 50%, transparent 52%), radial-gradient(1.5px 1.5px at 6% 84%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 48% 50%, #FFF3C4 50%, transparent 52%); }
.tarot-band .txt, .tarot-band .btn, .tarot-band .deck-mini, .tarot-hero-txt, .tarot-hero .deck-mini { position: relative; z-index: 1; }
.tarot-band h2, .tarot-hero h1 { background: linear-gradient(90deg, #FFE9B8, #FFD166, #FFF3C4, #FFD166, #FFE9B8); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }
.deck-mini i { animation: floatY 4s ease-in-out infinite; }
.deck-mini i:nth-child(2) { animation-delay: .3s; } .deck-mini i:nth-child(3) { animation-delay: .6s; } .deck-mini i:nth-child(4) { animation-delay: .9s; } .deck-mini i:nth-child(5) { animation-delay: 1.2s; }
.deck-mini i:nth-child(1) { transform: rotate(-28deg); } .deck-mini i:nth-child(2) { transform: rotate(-14deg); } .deck-mini i:nth-child(3) { transform: rotate(0); } .deck-mini i:nth-child(4) { transform: rotate(14deg); } .deck-mini i:nth-child(5) { transform: rotate(28deg); }
.slot-empty { background: linear-gradient(110deg, #FFF6E3 30%, #FFE3A6 50%, #FFF6E3 70%); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
.fan-card:hover .tcard { filter: drop-shadow(0 12px 18px rgba(201, 145, 26, .55)) brightness(1.08); }
.tcard .front { box-shadow: 0 6px 14px rgba(201, 145, 26, .35), 0 0 22px rgba(255, 209, 102, .45); }

/* 리포트: 금빛 헤더 */
.report-hero::before { content: ''; position: absolute; inset: -40%; pointer-events: none; opacity: .5; mix-blend-mode: screen; animation: spin 80s linear infinite; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 12deg, rgba(255, 255, 255, .8) 15deg, rgba(255, 255, 255, 0) 18deg 42deg, rgba(255, 255, 255, .8) 45deg, rgba(255, 255, 255, 0) 48deg 72deg, rgba(255, 255, 255, .8) 75deg, rgba(255, 255, 255, 0) 78deg 102deg, rgba(255, 255, 255, .8) 105deg, rgba(255, 255, 255, 0) 108deg 132deg, rgba(255, 255, 255, .8) 135deg, rgba(255, 255, 255, 0) 138deg 162deg, rgba(255, 255, 255, .8) 165deg, rgba(255, 255, 255, 0) 168deg 192deg, rgba(255, 255, 255, .8) 195deg, rgba(255, 255, 255, 0) 198deg 222deg, rgba(255, 255, 255, .8) 225deg, rgba(255, 255, 255, 0) 228deg 252deg, rgba(255, 255, 255, .8) 255deg, rgba(255, 255, 255, 0) 258deg 282deg, rgba(255, 255, 255, .8) 285deg, rgba(255, 255, 255, 0) 288deg 312deg, rgba(255, 255, 255, .8) 315deg, rgba(255, 255, 255, 0) 318deg 342deg, rgba(255, 255, 255, .8) 345deg, rgba(255, 255, 255, 0) 348deg 360deg); }
.report-hero > * { position: relative; z-index: 1; }
.report-hero .avatar { box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), 0 10px 30px rgba(201, 145, 26, .45); }
.rs { transition: box-shadow .25s; }
.rs:hover { box-shadow: 0 16px 40px rgba(201, 145, 26, .18); }
.pillar.day .cell { box-shadow: 0 0 0 3px rgba(247, 161, 26, .35), 0 0 22px rgba(255, 209, 102, .6); }
.score-ring { box-shadow: 0 0 40px rgba(255, 209, 102, .55); }

/* 푸터: 짙은 남색 · 금빛 (무대 페이지는 밝은 톤 유지) */
.app:not(.stage) .site-footer { background: radial-gradient(900px 340px at 15% 0%, #2A3158, #141A2E 70%); color: #D6CBB0; border-top: 0; position: relative; overflow: hidden; }
.app:not(.stage) .site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: radial-gradient(2px 2px at 8% 30%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 30% 70%, #FFE9B8 50%, transparent 52%), radial-gradient(2px 2px at 52% 20%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 74% 60%, #FFD166 50%, transparent 52%), radial-gradient(2px 2px at 92% 35%, #fff 50%, transparent 52%); animation: twinkle 3s ease-in-out infinite alternate; }
.app:not(.stage) .site-footer .footer-inner, .app:not(.stage) .site-footer .footer-copy { position: relative; z-index: 1; }
.app:not(.stage) .site-footer .logo { color: #FFE9B8; }
.app:not(.stage) .site-footer .logo span:last-child { background: linear-gradient(90deg, #FFE9B8, #FFD166, #FFE9B8); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
.app:not(.stage) .site-footer .footer-col b, .app:not(.stage) .site-footer .footer-biz b { color: #FFD166; }
.app:not(.stage) .site-footer .footer-col a { color: #D6CBB0; }
.app:not(.stage) .site-footer .footer-col a:hover { color: #FFD166; }
.app:not(.stage) .site-footer .biz dt { color: #9A9078; }
.app:not(.stage) .site-footer .footer-note a { color: #FFD166; }
.app:not(.stage) .site-footer .footer-copy { border-top-color: rgba(255, 255, 255, .1); color: #9A9078; }

/* 스토리(퍼널): 빛 입자 · 버튼 맥동 */
.story .particles { z-index: 1; }
.story .particles i { opacity: 0; }

/* 스크롤 등장 효과 */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } body::before, .rays-bg, .sun-disc, .sky i, .float-chip, .deck-mini i, .btn-primary, .step i { animation: none !important; } }

/* 보정: 가로 넘침 방지 · 미니 카드 부채꼴 유지하며 떠다니기 */
html, body { overflow-x: hidden; }
@keyframes floatRot { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(var(--r, 0deg)) translateY(-8px); } }
.deck-mini i { animation: floatRot 4s ease-in-out infinite; }
.deck-mini i:nth-child(1) { --r: -28deg; } .deck-mini i:nth-child(2) { --r: -14deg; } .deck-mini i:nth-child(3) { --r: 0deg; } .deck-mini i:nth-child(4) { --r: 14deg; } .deck-mini i:nth-child(5) { --r: 28deg; }
.hero2-art { order: -1; }
@media (min-width: 900px) { .hero2-art { order: 0; } }

/* 한글 제목·문장은 단어 단위로 줄바꿈 (어색한 글자 끊김 방지) */
h1, h2, h3, .story-line, .bubble, .story-form h2, .opt, .hero2-text p, .sec-head p, .tarot-band p, .tarot-hero p { word-break: keep-all; overflow-wrap: anywhere; }
.story-form.ask h2 { font-size: 20px; }

/* ---------- 영상 배경 · 태양신 목소리 · 소리 버튼 ---------- */
.story-top-right { display: flex; align-items: center; gap: 6px; }
.story-top .sound-btn { color: #fff; background: rgba(0, 0, 0, .28); }
.story-top .sound-btn.on { background: rgba(247, 161, 26, .9); box-shadow: 0 0 0 4px rgba(247, 161, 26, .25); }
.sound-btn svg { width: 22px; height: 22px; }
.sound-btn.with-label { width: auto; height: 40px; padding: 0 14px 0 10px; gap: 6px; border-radius: 999px; background: #fff; color: var(--ink-2); border: 1.5px solid var(--line-2); font-weight: 700; font-size: 13.5px; margin-top: 12px; }
.sound-btn.with-label.on { background: linear-gradient(135deg, #FFC24A, #EF8A0C); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(239, 138, 12, .35); }
.story-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transition: opacity 1.2s ease, transform 1.6s ease, filter .6s ease; }
.story-bg video.on { opacity: 1; }
.story-bg.zoom video { transform: scale(1.5); object-position: 12% 100% !important; }
.story-bg.dim video { filter: brightness(.72) saturate(.9); }
.story-bg.blur video { filter: blur(6px) brightness(.8); transform: scale(1.06); }
.hero2-visual video { position: absolute; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; object-position: 62% 28%; border-radius: 22px; opacity: 0; transition: opacity 1s ease; z-index: 1; }
.hero2-visual video.on { opacity: 1; }
.hero2-visual .glow, .hero2-visual .particles { z-index: 2; }
.report-hero .avatar { position: relative; }
.report-hero .avatar video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.spk { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gold-deep); background: #fff; color: var(--sun-deep); cursor: pointer; vertical-align: middle; margin: 0 8px 4px 0; padding: 0; transition: transform .15s, background .15s; }
.spk svg { width: 16px; height: 16px; }
.spk:hover { transform: scale(1.1); }
.spk.playing { background: var(--sun); color: #fff; border-color: var(--sun); animation: ringPulse 1.4s ease-out infinite; }
.tarot-hero .sound-btn.with-label { margin-top: 14px; }

/* 소리 켜기 안내 말풍선 (첫 장면, 소리 꺼져 있을 때) */
.sound-hint { position: absolute; z-index: 6; top: 60px; right: 14px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 12px; box-shadow: 0 8px 20px rgba(60, 40, 10, .2); animation: fadeUp .5s ease both; }
.sound-hint::before { content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.sound-hint.hide { opacity: 0; transition: opacity .6s; pointer-events: none; }

/* ============================================================
   더 화려하게 v2 — 일출 인트로 · 오로라 · 별똥별 · 커서 반짝임 · 회전 금테 · 코로나 · 렌즈 플레어
   · 스크롤 진행 바 · 티커 · 통계 카운트 · 금박 카드 · 리플 · 섹션 장식
   ============================================================ */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes angSpin { to { --ang: 360deg; } }
@keyframes auroraA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(12vw, 8vh) scale(1.25); } }
@keyframes auroraB { 0% { transform: translate(0, 0) scale(1.1); } 100% { transform: translate(-14vw, -6vh) scale(.9); } }
@keyframes auroraC { 0% { transform: translate(0, 0) scale(.9); } 100% { transform: translate(8vw, -12vh) scale(1.2); } }
@keyframes shoot { 0% { transform: rotate(150deg) translateX(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: rotate(150deg) translateX(70vw); opacity: 0; } }
@keyframes coronaRing { 0% { transform: translate(-50%, -50%) scale(.72); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.28); opacity: 0; } }
@keyframes flareMove { 0% { transform: translate(-20%, -10%); opacity: 0; } 12% { opacity: .95; } 50% { transform: translate(90%, 70%); opacity: .8; } 88% { opacity: .95; } 100% { transform: translate(170%, 150%); opacity: 0; } }
@keyframes sparkTwinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .15; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes wordIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes sparkleFly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -30px))) scale(.15) rotate(90deg); } }
@keyframes rippleOut { to { transform: scale(1); opacity: 0; } }
@keyframes srRise { from { transform: translateY(0); } to { transform: translateY(-58vmin); } }
@keyframes srFade { to { opacity: 1; } }
@keyframes srLogo { 0% { opacity: 0; transform: translateY(16px) scale(.94); letter-spacing: .5em; } 100% { opacity: 1; transform: none; letter-spacing: .12em; } }
@keyframes srOut { to { opacity: 0; transform: scale(1.06); } }
@keyframes haloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes glowText { 0%, 100% { text-shadow: 0 0 8px rgba(255, 209, 102, .45); } 50% { text-shadow: 0 0 18px rgba(255, 209, 102, 1), 0 0 34px rgba(247, 161, 26, .6); } }
@keyframes eyebrowPulse { 0% { box-shadow: 0 0 0 0 rgba(247, 161, 26, .6); } 100% { box-shadow: 0 0 0 9px rgba(247, 161, 26, 0); } }
@keyframes bandShoot { 0%, 78% { opacity: 0; transform: rotate(160deg) translateX(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(160deg) translateX(420px); } }
@keyframes haloPulse { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: .8; transform: translate(-50%, -50%) scale(1.1); } }

/* 화면 전체: 오로라 · 별똥별 · 스크롤 진행 바 · 커서 반짝임 */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .8; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; left: -12vmax; top: -22vmax; background: radial-gradient(circle, rgba(255, 209, 102, .6), rgba(255, 209, 102, 0) 62%); animation: auroraA 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { left: 45vw; top: 8vh; background: radial-gradient(circle, rgba(255, 168, 140, .5), rgba(255, 168, 140, 0) 62%); animation: auroraB 27s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 12vw; top: 48vh; background: radial-gradient(circle, rgba(255, 246, 205, .7), rgba(255, 246, 205, 0) 62%); animation: auroraC 31s ease-in-out infinite alternate; }
.sky .shoot { position: absolute; width: 180px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFE9B8 60%, #fff); box-shadow: 0 0 10px rgba(255, 233, 184, .9); transform-origin: 100% 50%; animation: shoot 1.6s ease-out forwards; opacity: 0; }
.sky .shoot::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(255, 244, 200, .95); }
.scroll-glow { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 60; background: linear-gradient(90deg, #FFD166, #F7A11A, #FFF3C4, #F7A11A, #FFD166); background-size: 200% auto; box-shadow: 0 0 12px rgba(255, 182, 39, .9); animation: shimmer 3s linear infinite; pointer-events: none; }
.sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.sparkles i { position: absolute; border-radius: 50%; background: radial-gradient(circle, #FFF8D6 0%, #FFC24A 55%, rgba(255, 194, 74, 0) 72%); box-shadow: 0 0 8px rgba(255, 209, 102, .9); animation: sparkleFly .9s ease-out forwards; will-change: transform, opacity; }
.sparkles i.star { background: none; box-shadow: none; border-radius: 0; color: #FFD166; text-shadow: 0 0 8px #FFB627, 0 0 2px #fff; line-height: 1; font-size: var(--fs, 12px); width: auto !important; height: auto !important; }

/* 일출 인트로 */
.sun-intro { position: fixed; inset: 0; z-index: 100; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #171B33 0%, #3E2A4C 45%, #A65E2E 80%, #F7A11A 100%); cursor: pointer; }
.sun-intro .sr-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #FFD98A 0%, #FFB347 50%, #FFF1CF 100%); opacity: 0; animation: srFade 1.3s ease-in .35s forwards; }
.sun-intro .sr-rays { position: absolute; left: 50%; top: 100%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; border-radius: 50%; opacity: 0; animation: spin 40s linear infinite, srFade 1s ease .5s forwards; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 10deg, rgba(255, 240, 200, .5) 13deg, rgba(255, 255, 255, 0) 16deg 34deg, rgba(255, 240, 200, .4) 37deg, rgba(255, 255, 255, 0) 40deg 58deg, rgba(255, 240, 200, .5) 61deg, rgba(255, 255, 255, 0) 64deg 82deg, rgba(255, 240, 200, .4) 85deg, rgba(255, 255, 255, 0) 88deg 106deg, rgba(255, 240, 200, .5) 109deg, rgba(255, 255, 255, 0) 112deg 130deg, rgba(255, 240, 200, .4) 133deg, rgba(255, 255, 255, 0) 136deg 154deg, rgba(255, 240, 200, .5) 157deg, rgba(255, 255, 255, 0) 160deg 178deg, rgba(255, 240, 200, .4) 181deg, rgba(255, 255, 255, 0) 184deg 202deg, rgba(255, 240, 200, .5) 205deg, rgba(255, 255, 255, 0) 208deg 226deg, rgba(255, 240, 200, .4) 229deg, rgba(255, 255, 255, 0) 232deg 250deg, rgba(255, 240, 200, .5) 253deg, rgba(255, 255, 255, 0) 256deg 274deg, rgba(255, 240, 200, .4) 277deg, rgba(255, 255, 255, 0) 280deg 298deg, rgba(255, 240, 200, .5) 301deg, rgba(255, 255, 255, 0) 304deg 322deg, rgba(255, 240, 200, .4) 325deg, rgba(255, 255, 255, 0) 328deg 346deg, rgba(255, 240, 200, .5) 349deg, rgba(255, 255, 255, 0) 352deg 360deg); }
.sun-intro .sr-sun { position: absolute; left: 50%; top: 100%; width: 64vmin; height: 64vmin; margin-left: -32vmin; border-radius: 50%; background: radial-gradient(circle, #FFFBE6 0%, #FFE08A 28%, #FFB627 48%, rgba(255, 182, 39, 0) 70%); filter: blur(4px); animation: srRise 1.5s cubic-bezier(.2, .75, .25, 1) .1s both; }
.sun-intro .sr-logo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-family: var(--serif); font-weight: 700; opacity: 0; animation: srLogo 1s cubic-bezier(.2, .8, .2, 1) .55s forwards; text-shadow: 0 4px 24px rgba(120, 60, 0, .35); }
.sun-intro .sr-logo .sun { width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 0 16px rgba(255, 255, 255, .9)); animation: spin 12s linear infinite; }
.sun-intro .sr-logo .sun svg { width: 100%; height: 100%; }
.sun-intro .sr-logo span:not(.sun) { font-size: 40px; letter-spacing: .12em; }
.sun-intro .sr-logo small { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: .2em; opacity: .9; }
.sun-intro.out { animation: srOut .7s ease forwards; pointer-events: none; }
.sun-intro-on .reveal { transition-delay: 1.5s !important; }
@media (max-width: 600px) { .sun-intro .sr-logo span:not(.sun) { font-size: 32px; } .sun-intro .sr-logo small { font-size: 12px; } }

/* 헤더 · 버튼 */
.logo .sun svg { filter: drop-shadow(0 0 6px rgba(255, 182, 39, .85)); }
.topbar::after { background-size: 200% auto; animation: shimmer 4s linear infinite; }
.btn { position: relative; overflow: hidden; }
.btn .ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 60%); transform: scale(0); animation: rippleOut .7s ease-out forwards; pointer-events: none; }
.btn-primary { background: linear-gradient(120deg, #FFC24A, #F7A11A, #FFD166, #EF8A0C, #FFC24A); background-size: 300% auto; animation: gradientMove 5s ease infinite; }
.hero2-cta .btn-primary, .tarot-band .btn-primary, .story-actions .btn-primary { animation: gradientMove 5s ease infinite, glowPulse 2.8s ease-in-out infinite; }
.btn-ghost:hover { box-shadow: 0 10px 24px rgba(239, 138, 12, .18), 0 0 0 3px rgba(255, 209, 102, .35); }

/* 히어로: 회전 금테 · 코로나 링 · 렌즈 플레어 · 반짝이 · 단어 등장 */
.hero-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); animation: eyebrowPulse 1.8s ease-out infinite; }
.hero2-visual { --ang: 0deg; background: conic-gradient(from var(--ang), #FFE9B8, #F7A11A, #FFF6D8, #E5820E, #FFD166, #FFF3C4, #FFE9B8); animation: angSpin 7s linear infinite; }
.hero2-art .corona { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero2-art .corona i { position: absolute; left: 50%; top: 50%; width: 104%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 209, 102, .8); box-shadow: 0 0 22px rgba(255, 209, 102, .55), inset 0 0 22px rgba(255, 209, 102, .35); transform: translate(-50%, -50%) scale(.72); opacity: 0; animation: coronaRing 4.5s ease-out infinite; }
.hero2-art .corona i:nth-child(2) { animation-delay: 1.5s; } .hero2-art .corona i:nth-child(3) { animation-delay: 3s; }
.hero2-art .flare { position: absolute; z-index: 3; left: 0; top: 0; width: 40%; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; animation: flareMove 11s ease-in-out infinite; }
.hero2-art .flare::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 236, 170, .6) 25%, rgba(255, 209, 102, 0) 60%); }
.hero2-art .flare::after { content: ''; position: absolute; left: -45%; right: -45%; top: 50%; height: 3px; margin-top: -1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); filter: blur(1px); }
.hero2-art .spark { position: absolute; z-index: 4; color: #FFD166; font-size: 18px; font-style: normal; line-height: 1; text-shadow: 0 0 10px #FFB627, 0 0 2px #fff; pointer-events: none; animation: sparkTwinkle 2.6s ease-in-out infinite; }
.hero2-text h1 .w { display: inline-block; animation: wordIn .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i, 0) * 110ms); }
.hero2-text h1 em .w { background: linear-gradient(90deg, #E5820E, #FFD166, #F7A11A, #FFB627, #E5820E); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wordIn .9s cubic-bezier(.2, .8, .2, 1) both, shimmer 4s linear infinite; }
.hero2-text h1 em { filter: none; }
.hero2-trust span { transition: transform .2s, box-shadow .2s; }
.hero2-trust span:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(247, 161, 26, .25); border-color: var(--sun); }

/* 한눈에 보는 숫자 · 흐르는 금빛 띠(티커) */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 14px 0; }
.stat { position: relative; overflow: hidden; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(247, 161, 26, .38); border-radius: 18px; padding: 16px 12px; text-align: center; box-shadow: 0 10px 30px rgba(201, 145, 26, .14); transition: transform .25s, box-shadow .25s; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(201, 145, 26, .24); }
.stat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 4s linear infinite; pointer-events: none; }
.stat::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 209, 102, .35), rgba(255, 209, 102, 0) 55%); pointer-events: none; }
.stat b { position: relative; display: block; font-family: var(--serif); font-size: 32px; line-height: 1; background: linear-gradient(90deg, #C9911A, #F7A11A, #E5820E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat b::after { content: attr(data-suffix); font-size: 15px; margin-left: 2px; }
.stat span { position: relative; display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ticker { position: relative; width: 100vw; margin: 28px 0 0 calc(50% - 50vw); padding: 13px 0; overflow: hidden; background: linear-gradient(90deg, #141A2E, #2A3158 50%, #141A2E); color: #FFE9B8; box-shadow: 0 14px 34px rgba(20, 26, 46, .22); border-top: 1px solid rgba(255, 209, 102, .4); border-bottom: 1px solid rgba(255, 209, 102, .4); }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #141A2E, rgba(20, 26, 46, 0)); }
.ticker::after { right: 0; background: linear-gradient(270deg, #141A2E, rgba(20, 26, 46, 0)); }
.ticker-track { display: flex; gap: 44px; width: max-content; animation: ticker 36s linear infinite; font-weight: 800; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.ticker-track span { display: inline-flex; align-items: center; gap: 10px; }
.ticker-track em { font-style: normal; color: #FFD166; animation: glowText 2.4s ease-in-out infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 30px 24px 0; } .stat { padding: 20px 16px; } .stat b { font-size: 42px; } .stat b::after { font-size: 18px; } .stat span { font-size: 14px; margin-top: 8px; } .ticker { margin-top: 44px; padding: 15px 0; } .ticker-track { font-size: 15px; gap: 56px; } }

/* 섹션 제목 장식: 선 – 태양 – 선 */
.sec-head h2::before { width: 132px; height: 16px; border-radius: 0; box-shadow: none; margin-bottom: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 16'%3E%3Cg stroke='%23F7A11A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 8h44M86 8h44'/%3E%3C/g%3E%3Ccircle cx='66' cy='8' r='4' fill='%23F7A11A'/%3E%3Cg stroke='%23F7A11A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M66 1v2M66 13v2M59 8h2M71 8h2M61 3l1.4 1.4M69.6 11.6L71 13M61 13l1.4-1.4M69.6 4.4L71 3'/%3E%3C/g%3E%3Ccircle cx='24' cy='8' r='1.6' fill='%23FFD166'/%3E%3Ccircle cx='108' cy='8' r='1.6' fill='%23FFD166'/%3E%3C/svg%3E") left center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(247, 161, 26, .55)); transform-origin: left center; transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .8, .2, 1) .2s; }
.sec-head.in h2::before, .sec-head:not(.reveal) h2::before { transform: scaleX(1); }

/* 상품 카드: 금박 반사 · 회전 금테 · 이미지 빛 스침 · 반짝이는 할인율 */
.product { transform-style: preserve-3d; }
.product::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 20px; opacity: 0; transition: opacity .35s; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 38%), conic-gradient(from 0deg at var(--mx, 50%) var(--my, 50%), rgba(255, 209, 102, .55), rgba(255, 255, 255, 0), rgba(247, 161, 26, .55), rgba(255, 255, 255, 0), rgba(255, 209, 102, .55)); }
.product:hover::before { opacity: 1; }
.product::after { --ang: 0deg; background: conic-gradient(from var(--ang), #FFD166, #F7A11A, #FFF3C4, #EF8A0C, #FFD166); animation: angSpin 3s linear infinite; }
.product .thumb::before { content: ''; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; z-index: 2; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); transform: skewX(-18deg); transition: left .9s ease; pointer-events: none; }
.product:hover .thumb::before { left: 130%; }
.product .badge.red { animation: glowPulse 2s ease-in-out infinite; }
.product:hover .name { background: linear-gradient(90deg, #3B2A10, #C9911A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price-row .rate { position: relative; }
.price-row .rate::after { content: '✦'; position: absolute; right: -14px; top: -7px; font-size: 11px; color: #FFB627; animation: sparkTwinkle 2s ease-in-out infinite; }

/* 이용 방법 · 무료 콘텐츠 · 후기 · FAQ */
.step i { position: relative; overflow: visible; }
.step i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed rgba(247, 161, 26, .65); animation: spin 9s linear infinite; }
.step { position: relative; overflow: hidden; }
.step::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 209, 102, .3), rgba(255, 209, 102, 0) 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.step:hover::before { opacity: 1; }
.free-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.free-card:hover::before { opacity: 1; }
.free-card .ico { animation: floatY 3.6s ease-in-out infinite; }
.free-card:nth-child(2) .ico { animation-delay: .6s; } .free-card:nth-child(3) .ico { animation-delay: 1.2s; }
.review::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #FFD166, #F7A11A, #FFF3C4, #F7A11A, #FFD166); background-size: 200% auto; animation: shimmer 4s linear infinite; }
.review .stars { animation: glowText 2.6s ease-in-out infinite; }
.review:nth-child(2n) .stars { animation-delay: .8s; } .review:nth-child(3n) .stars { animation-delay: 1.6s; }
.review:hover { box-shadow: 0 18px 40px rgba(201, 145, 26, .2); }
.faq summary { list-style: none; position: relative; padding-left: 26px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '☀'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--sun); text-shadow: 0 0 8px rgba(255, 182, 39, .8); transition: transform .4s; }
.faq details[open] summary::before { transform: translateY(-50%) rotate(180deg); }

/* 타로 밴드·타로 히어로: 별똥별 · 카드 뒤 빛 고리 */
.tarot-band-inner::before, .tarot-band-inner::after { content: ''; position: absolute; top: 12%; left: 72%; width: 140px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFE9B8 60%, #fff); box-shadow: 0 0 8px rgba(255, 233, 184, .8); opacity: 0; pointer-events: none; animation: bandShoot 9s ease-in-out infinite; }
.tarot-band-inner::after { top: 60%; left: 88%; animation-delay: 4.5s; width: 110px; }
.deck-mini::before { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed rgba(255, 209, 102, .55); transform: translate(-50%, -50%); animation: haloSpin 22s linear infinite; }
.deck-mini::after { content: ''; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 209, 102, .5), rgba(255, 209, 102, 0) 65%); transform: translate(-50%, -50%); animation: haloPulse 3.4s ease-in-out infinite; pointer-events: none; }
.deck-mini i { z-index: 1; }
.tarot-band .btn-primary { box-shadow: 0 10px 30px rgba(255, 182, 39, .45); }

/* 푸터: 흐르는 금선 */
.app:not(.stage) .site-footer::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #FFD166, #F7A11A, #FFF3C4, #F7A11A, #FFD166, transparent); background-size: 200% auto; animation: shimmer 5s linear infinite; }

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .aurora, .sky .shoot, .sparkles, .sun-intro { display: none !important; }
  .hero2-visual, .product::after, .hero2-art .corona i, .hero2-art .flare, .hero2-art .spark, .ticker-track, .scroll-glow, .stat::before, .step i::after, .review::after, .review .stars, .free-card .ico, .hero2-text h1 .w, .hero2-text h1 em .w, .btn-primary, .topbar::after, .ticker-track em, .deck-mini::before, .deck-mini::after, .tarot-band-inner::before, .tarot-band-inner::after, .price-row .rate::after, .hero-eyebrow::before { animation: none !important; }
  .sec-head h2::before { transform: none; transition: none; }
}

/* ============================================================
   반짝임 완화 — 빠르게 깜빡이던 효과를 느리고 은은하게 (사용자 요청: "화면이 떨리는 느낌")
   · 2~3초 주기의 깜빡임/맥동은 전부 5초 이상으로, 밝기 변화 폭은 절반으로
   · 글자 그림자·박스 그림자를 매 프레임 바꾸던 효과는 정지(정적 글로우)
   · 상품 카드 금테 회전은 마우스를 올렸을 때만
   ============================================================ */
@keyframes twinkle { 0% { opacity: .72; } 100% { opacity: 1; } }
@keyframes sparkTwinkle { 0%, 100% { transform: scale(.75); opacity: .35; } 50% { transform: scale(1); opacity: .9; } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 10px 24px rgba(239, 138, 12, .35); } 50% { box-shadow: 0 12px 34px rgba(255, 190, 60, .55); } }
@keyframes sunPulse { 0%, 100% { transform: scale(1); opacity: .88; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes ringPulse { 0%, 100% { box-shadow: 0 6px 14px rgba(239, 138, 12, .3), 0 0 0 0 rgba(255, 209, 102, .4); } 50% { box-shadow: 0 6px 14px rgba(239, 138, 12, .3), 0 0 0 10px rgba(255, 209, 102, 0); } }
@keyframes coronaRing { 0% { transform: translate(-50%, -50%) scale(.8); opacity: .5; } 100% { transform: translate(-50%, -50%) scale(1.22); opacity: 0; } }
@keyframes sweepX { 0% { transform: translateX(0) skewX(-15deg); } 45%, 100% { transform: translateX(320%) skewX(-15deg); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 별·반짝이: 천천히, 은은하게 */
.tarot-band::before, .tarot-hero::before, .app:not(.stage) .site-footer::before { animation-duration: 8s; }
.hero2-art .spark { animation-duration: 6s; font-size: 15px; }
.ticker-track em { animation: none; text-shadow: 0 0 10px rgba(255, 209, 102, .6); }
.review .stars { animation: none; }
.price-row .rate::after { animation: none; opacity: .8; transform: none; }
.hero-eyebrow::before { animation: none; box-shadow: 0 0 0 4px rgba(247, 161, 26, .18); }
.product .badge.red { animation: none; }

/* 맥동·회전: 주기를 길게 */
.hero2-cta .btn-primary, .tarot-band .btn-primary, .story-actions .btn-primary { animation: gradientMove 9s ease infinite, glowPulse 5s ease-in-out infinite; }
.btn-primary { animation-duration: 9s; }
.step i { animation-duration: 5.5s; }
.sun-disc { animation-duration: 10s; }
.hero2-visual { animation-duration: 14s; }
.hero2-art .corona i { animation-duration: 8s; border-color: rgba(255, 209, 102, .6); }
.hero2-art .corona i:nth-child(2) { animation-delay: 2.7s; } .hero2-art .corona i:nth-child(3) { animation-delay: 5.4s; }
.hero2-art .flare { animation-duration: 16s; }
.float-chip { animation-duration: 7s; }
.free-card .ico { animation-duration: 5.5s; }
.deck-mini::after { animation-duration: 6s; }
.deck-mini i { animation-duration: 6s; }
.slot-empty { animation-duration: 4s; }
.product::after { animation: none; }
.product:hover::after { animation: angSpin 6s linear infinite; }

/* 빛 스침(shimmer): 느리게 */
.topbar::after { animation-duration: 9s; }
.review::after { animation-duration: 9s; }
.scroll-glow { animation-duration: 7s; }
.app:not(.stage) .site-footer::after { animation-duration: 10s; }
.logo span:last-child { animation-duration: 9s; }
.sec-head h2 { animation-duration: 12s; }
.hero2-text h1 em { animation-duration: 7s; }
.hero2-text h1 em .w { animation-duration: .9s, 7s; }
.tarot-band h2, .tarot-hero h1 { animation-duration: 8s; }

/* 숫자 카드: 배경 블러 제거(스크롤 떨림 방지) + 빛 스침은 transform 기반으로 */
.stat { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .86); }
.stat::before { inset: auto; top: -20%; bottom: -20%; left: -70%; width: 45%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); background-size: auto; animation: sweepX 7s ease-in-out infinite; }
.stat:nth-child(2)::before { animation-delay: .8s; } .stat:nth-child(3)::before { animation-delay: 1.6s; } .stat:nth-child(4)::before { animation-delay: 2.4s; }

/* 커서 반짝임: 더 작고 드물게 */
.sparkles i { box-shadow: 0 0 5px rgba(255, 209, 102, .7); animation-duration: 1.1s; }
.sparkles i.star { text-shadow: 0 0 5px #FFB627; }

/* ---------- 상담사 소개 · 자격증 · 실제 후기(더 보기 · 캡처 갤러리 · 라이트박스) ---------- */
.counselor { display: grid; gap: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 246, 224, .92)); border: 1px solid rgba(247, 161, 26, .38); border-radius: 26px; padding: 24px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.counselor::before { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 209, 102, .5), rgba(255, 209, 102, 0) 70%); pointer-events: none; }
.counselor-text { position: relative; }
.counselor h2 { font-family: var(--serif); font-size: 26px; margin: 12px 0 10px; line-height: 1.25; }
.counselor h2 em { font-style: normal; background: linear-gradient(90deg, #E5820E, #FFD166, #F7A11A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counselor p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.7; font-size: 15px; }
.cred-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cred-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; }
.cred-list li::before { content: '✦'; color: var(--sun); }
.cred-list b { font-size: 15px; }
.cred-list span { font-size: 12.5px; color: var(--muted); }
.counselor-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; }
.cert { margin: 0; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 12px 30px rgba(201, 145, 26, .22); border: 1px solid var(--line-2); transform: rotate(-1.5deg); transition: transform .3s; }
.cert:nth-child(2) { transform: rotate(1.5deg); }
.cert:hover { transform: rotate(0) scale(1.03); }
.cert img { width: 100%; height: auto; border-radius: 8px; display: block; }
.cert figcaption { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 8px 0 2px; }
@media (min-width: 900px) { .counselor { grid-template-columns: 1.15fr 1fr; gap: 36px; padding: 40px 44px; align-items: center; } .counselor h2 { font-size: 32px; } .certs { gap: 18px; } }
.review .txt { white-space: pre-line; }
.review .more { background: none; border: 0; color: var(--sun-deep); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; margin: -4px 0 8px; }
.review .who a { color: var(--sun-deep); text-decoration: none; font-weight: 700; }
.shots-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
.shots-head b { font-size: 15px; }
.shots-head span { font-size: 12.5px; color: var(--muted); }
.shots { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.shots::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 150px; height: 150px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #E9EDF5; padding: 0; cursor: zoom-in; scroll-snap-align: start; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.shot:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(201, 145, 26, .25); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (min-width: 768px) { .shot { flex-basis: 190px; height: 190px; } }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20, 26, 46, .88); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 720px); max-height: 88vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #fff; cursor: default; }
.lightbox .lb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 18px; cursor: pointer; }

/* ---------- 긴 리포트: 목차 · 인쇄(PDF) ---------- */
.toc { background: linear-gradient(160deg, #FFF9EC, #FFF1D6); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 18px 18px 14px; box-shadow: var(--shadow-sm); }
.toc > b { display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 18px; margin-bottom: 12px; }
.toc > b span { font-family: var(--font); font-size: 12.5px; font-weight: 700; color: var(--sun-deep); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; }
.toc-list { display: grid; gap: 6px; counter-reset: toc; }
@media (min-width: 720px) { .toc-list { grid-template-columns: 1fr 1fr; gap: 6px 18px; } }
.toc-list a { counter-increment: toc; display: flex; gap: 8px; align-items: baseline; text-decoration: none; color: var(--ink-2); font-size: 14px; line-height: 1.5; padding: 5px 8px; border-radius: 9px; transition: background .15s, color .15s; word-break: keep-all; }
.toc-list a::before { content: counter(toc, decimal-leading-zero); font-weight: 800; font-size: 11.5px; color: var(--gold-deep); flex: none; }
.toc-list a:hover { background: #fff; color: var(--sun-deep); }
.toc-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; word-break: keep-all; }
.report .rs { scroll-margin-top: 76px; }

@media print {
  @page { size: A4; margin: 16mm 14mm; }
  html, body { background: #fff !important; }
  body::before, .sky, .aurora, .sparkles, .scroll-glow, .topbar, .bottom-nav, .site-footer, .report-actions, .toc, .spk, .sound-btn, video { display: none !important; }
  .app, .page, .report { padding: 0 !important; margin: 0 !important; max-width: none !important; box-shadow: none !important; }
  .report { gap: 0 !important; }
  /* 긴 글이 든 섹션은 쪽을 넘겨 이어지게 두고(빈 공간 낭비 방지), 짧은 카드만 통째로 유지 */
  .rs, .report-hero { break-inside: auto; page-break-inside: auto; box-shadow: none !important; border: 0 !important; border-top: 1px solid #E7DCC4 !important; border-radius: 0 !important; margin: 0 0 6mm !important; padding: 4mm 0 0 !important; background: #fff !important; }
  .rs h2 { break-after: avoid; page-break-after: avoid; margin-top: 0 !important; }
  .report .item, .report .sinsal-item, .report .mon, .report .dw, .report .rel, .report .sunquote, .report .keywords { break-inside: avoid; page-break-inside: avoid; }
  .report p { orphans: 2; widows: 2; }
  .report .cards { gap: 3mm !important; }
  .report .item, .report .sinsal-item { box-shadow: none !important; border: 1px solid #EFE6D2 !important; background: #FFFDF8 !important; }
  .report-hero::before, .rs::before { display: none !important; }
  .report p, .report li, .report .item p, .report .sinsal-item p { font-size: 11pt !important; line-height: 1.75 !important; color: #2A1E0A !important; }
  .rs h2 { font-size: 15pt !important; color: #3B2A10 !important; -webkit-text-fill-color: #3B2A10 !important; }
  .report-foot { font-size: 9pt !important; color: #6B5A3A !important; }
  a[href]::after { content: '' !important; }
}

/* 긴 리포트: 목차로 돌아가는 떠 있는 버튼 */
.to-top { position: fixed; right: 16px; bottom: 84px; z-index: 45; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-2); font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 10px 26px rgba(201, 145, 26, .28); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top::before { content: '↑'; font-size: 15px; color: var(--sun-deep); }
.to-top:hover { border-color: var(--sun); color: var(--sun-deep); }
@media (min-width: 768px) { .to-top { bottom: 28px; right: 28px; } }
@media print { .to-top { display: none !important; } }

/* 긴 리포트: 분야별 목차 */
.toc-group + .toc-group { margin-top: 14px; }
.toc-group h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--sun-deep); display: flex; align-items: center; gap: 8px; }
.toc-group h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(247, 161, 26, .45), rgba(247, 161, 26, 0)); }
.toc-list { counter-reset: none; }
.toc-list a::before { content: '·'; font-size: 14px; color: var(--gold-deep); }