@import url('https://fonts.googleapis.com/css2?family=Song+Myung&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ============================================================
   운도감 2026 — 새 랜딩 (시각화 괴물) · C-refined Twilight
   ============================================================ */
:root{
  --bg:#15101f; --bg-2:#181228; --bg-card:#1e1733; --bg-glow:#2b1f4c;
  --ink:#f1ecf6; --pearl:#ece7f2; --muted:#9a90ac; --muted2:#7a7191;
  --rose:#d9b6a3; --rose-bright:#e7c9b8; --lilac:#b9a8d6;
  --sage:#7fb39a; --coral:#d98c84; --teal:#6f9fb8;
  --gold:#d9b6a3; --cream:#ece7f2; --sand:#9a90ac;   /* 차트 레거시 변수 매핑 */
  --hair:rgba(217,182,163,.20); --hair-cool:rgba(155,144,172,.13);
  --r:18px; --r-sm:12px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Pretendard',-apple-system,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none} p{margin:0}
[hidden]{display:none!important}
::selection{background:rgba(217,182,163,.28);color:#fff}
h1,h2,h3,h4{font-family:'Song Myung',serif;font-weight:400;color:var(--ink);line-height:1.4;letter-spacing:-.01em;margin:0}
strong,b{color:var(--pearl);font-weight:600}
.serif{font-family:'Song Myung',serif} .mono{font-family:'IBM Plex Mono',monospace}
#legacy-compat{display:none!important}

.u-shell{max-width:540px;margin:0 auto;background:var(--bg);position:relative;overflow:hidden;padding-bottom:198px}
.u-eyebrow{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:3px;color:var(--rose);text-transform:uppercase;font-weight:600}
.u-pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--rose);border:1px solid var(--hair);border-radius:999px;padding:5px 14px;background:rgba(217,182,163,.06)}
.u-card{background:var(--bg-card);border:1px solid var(--hair-cool);border-radius:var(--r);padding:22px}
.u-sec{padding:46px 22px;border-bottom:1px solid var(--hair-cool)}
.u-sec h2{font-size:clamp(23px,6vw,30px)}

/* ---- topbar ---- */
.u-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:13px 22px;background:rgba(21,16,31,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-cool)}
.u-top .wm{font-family:'Song Myung',serif;font-size:15px;letter-spacing:5px;color:var(--rose)}
.u-top .reset{font-size:12px;color:var(--muted);background:none;border:1px solid var(--hair-cool);border-radius:999px;padding:6px 13px}

/* ---- HERO ---- */
.u-hero{position:relative;padding:clamp(290px,60vw,420px) 24px 48px;text-align:center;
  background:linear-gradient(180deg,rgba(13,10,20,.5) 0%,rgba(13,10,20,.08) 26%,rgba(13,10,20,.5) 58%,rgba(13,10,20,.93) 100%),
             url('./assets/web/a1-hero.jpg') center 6%/cover no-repeat,var(--bg-2)}
.u-hero .u-pill{margin-bottom:18px}
.u-hero h1{font-size:clamp(30px,8.6vw,44px);line-height:1.3;margin:6px 0}
.u-hero h1 em{font-style:normal;color:var(--rose)}
.u-hero .lead{color:var(--muted);font-size:14.5px;line-height:1.85;margin:16px auto 0;max-width:32ch}
.u-hero .shock{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted2);letter-spacing:.4px;margin-top:18px}
.u-hero .cta{margin-top:26px}
/* sealed dossier mark */
.u-dossier{margin:30px auto 0;max-width:300px;border:1px solid var(--hair);border-radius:var(--r);padding:24px;background:linear-gradient(160deg,rgba(43,31,76,.5),rgba(30,23,51,.7));position:relative;overflow:hidden}
.u-dossier::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 0%,rgba(217,182,163,.1),transparent 70%)}
.u-dossier .seal{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Song Myung',serif;font-size:20px;color:#1a1322;background:radial-gradient(circle at 35% 30%,var(--rose-bright),var(--rose));box-shadow:0 6px 20px rgba(217,182,163,.3)}
.u-dossier .dl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--muted2);position:relative}
.u-dossier .dt{font-family:'Song Myung',serif;font-size:17px;color:var(--ink);margin:6px 0;position:relative}

/* ---- CTA buttons ---- */
.btn-primary,.checkout-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--rose-bright),var(--rose));color:#1a1322;border:none;border-radius:999px;padding:16px 28px;font-weight:700;font-size:15px;letter-spacing:.2px;box-shadow:0 10px 30px rgba(217,182,163,.22);transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(217,182,163,.3)}
.btn-primary.wide,.checkout-action.wide{width:100%}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--pearl);border:1px solid var(--hair);border-radius:999px;padding:13px 22px;font-weight:600;font-size:14px}

/* ---- intake form ---- */
.u-intake{padding:44px 22px;border-bottom:1px solid var(--hair-cool)}
.u-intake .u-card{padding:24px 20px}
.u-form-head{font-family:'Song Myung',serif;font-size:18px;margin-bottom:4px}
.u-form-sub{color:var(--muted);font-size:12.5px;margin-bottom:18px}
.u-field{margin-bottom:16px}
.u-field>label,.u-field>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px;letter-spacing:.2px}
.u-field input,.u-field select{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:14px;color:var(--ink);font:15px 'Pretendard';outline:none;transition:border-color .15s}
.u-field input::placeholder{color:var(--muted2)}
.u-field input:focus,.u-field select:focus{border-color:var(--rose);background:rgba(217,182,163,.05)}
.u-field small{display:block;color:var(--muted2);font-size:11px;margin-top:6px}
.u-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a90ac' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.u-gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.u-gender label{position:relative;cursor:pointer;margin:0}
.u-gender input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.u-gender span{display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--hair-cool);border-radius:var(--r-sm);color:var(--muted);font:15px 'Pretendard';font-weight:700;transition:border-color .15s,background .15s,color .15s}
.u-gender input:checked+span{border-color:var(--rose);background:rgba(217,182,163,.08);color:var(--ink)}
.u-gender input:focus-visible+span{border-color:var(--rose)}
.u-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.u-privacy{font-size:11px;color:var(--muted2);line-height:1.7;border-top:1px solid var(--hair-cool);padding-top:12px;margin-top:2px}
.u-consent{display:flex;gap:9px;align-items:flex-start;font-size:11px;color:var(--muted2);line-height:1.6;margin:14px 0}
.u-consent input{accent-color:var(--rose);margin-top:2px}
.u-submit{width:100%;margin-top:6px}
.u-err{color:var(--coral);font-size:12.5px;margin-top:10px}

/* ============================================================
   MONSTER FREE-RESULT
   ============================================================ */
.u-result{opacity:0}
.u-result.is-revealed{opacity:1}
.u-result.is-revealed > section{opacity:0;animation:ucReveal .9s cubic-bezier(.16,.84,.34,1) both}
.u-result.is-revealed > section:nth-child(1){animation-delay:.04s}
.u-result.is-revealed > section:nth-child(2){animation-delay:.18s}
.u-result.is-revealed > section:nth-child(3){animation-delay:.32s}
.u-result.is-revealed > section:nth-child(4){animation-delay:.46s}
.u-result.is-revealed > section:nth-child(5){animation-delay:.60s}
.u-result.is-revealed > section:nth-child(6){animation-delay:.74s}
.u-result.is-revealed > section:nth-child(n+7){animation-delay:.88s}
@keyframes ucReveal{
  0%{opacity:0;transform:translateY(38px) scale(.965);filter:blur(9px)}
  55%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
/* 첫 등장 순간 헤드라인 뒤로 로즈골드 글로우가 한 번 번졌다 사라짐 */
.u-result-intro{position:relative}
.u-result.is-revealed .u-result-intro::before{content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:140%;height:150%;pointer-events:none;z-index:-1;
  background:radial-gradient(58% 100% at 50% 0%, rgba(231,201,184,.30), rgba(185,168,214,.10) 45%, transparent 72%);
  animation:ucGlowBloom 1.6s ease-out both}
@keyframes ucGlowBloom{0%{opacity:0;transform:translateX(-50%) scale(.7)}28%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.15)}}
.u-result-intro h2{animation:ucHeadline 1s cubic-bezier(.16,.84,.34,1) both;animation-delay:.12s}
@keyframes ucHeadline{0%{letter-spacing:-.04em;opacity:0}100%{letter-spacing:normal;opacity:1}}
@media (prefers-reduced-motion: reduce){
  .u-result.is-revealed > section,.u-result.is-revealed .u-result-intro::before,.u-result-intro h2{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
}
.u-result-intro{padding:40px 22px 10px;text-align:center}
.u-result-intro .u-eyebrow{margin-bottom:10px}
.u-result-intro h2{font-size:clamp(22px,5.6vw,28px);line-height:1.4}

/* identity reveal */
.u-identity{padding:30px 22px 8px;text-align:center}
.u-identity .u-eyebrow{display:block;margin-bottom:14px}
.u-identity .symbol{font-family:'Song Myung',serif;font-size:clamp(28px,8vw,40px);line-height:1.3;color:var(--ink)}
.u-identity .symbol b{color:var(--rose);font-weight:400}
.u-identity .rarity{display:inline-block;margin-top:18px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--rose);border:1px solid var(--hair);border-radius:999px;padding:7px 16px;background:rgba(217,182,163,.07);box-shadow:0 0 24px rgba(217,182,163,.12)}
.u-identity .solar{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted2);margin-top:14px;line-height:1.7}

/* generic result section */
.u-rsec{padding:34px 22px;border-top:1px solid var(--hair-cool)}
.u-rsec .u-eyebrow{display:block;margin-bottom:8px}
.u-rsec h3{font-size:19px;margin-bottom:4px}
.u-rsec .note{color:var(--muted2);font-size:12px;margin-bottom:6px}
.u-rsec .cap{color:var(--muted);font-size:13px;line-height:1.8;margin-top:14px}
.u-rsec .cap b{color:var(--pearl)}

/* chart containers */
[data-uc-donut],[data-uc-area]{width:100%;margin:8px auto 0;display:flex;justify-content:center}
[data-uc-donut] svg,[data-uc-area] svg{max-width:100%;height:auto}

/* concern memo */
.u-memo{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--rose);text-align:left}
.u-memo .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted2);letter-spacing:1px}
.u-memo .q{font-family:'Song Myung',serif;font-size:17px;color:var(--ink);margin-top:8px;line-height:1.55}

/* month chips */
.u-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.u-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--hair-cool);border-radius:999px;padding:6px 13px}
.u-chip i{width:8px;height:8px;border-radius:50%}
.u-chip.good i{background:var(--sage)} .u-chip.good b{color:var(--sage)}
.u-chip.care i{background:var(--coral)} .u-chip.care b{color:var(--coral)}

/* golden teaser (locked) */
.u-golden{margin-top:18px;padding:20px;border:1px solid var(--hair);border-radius:var(--r);background:radial-gradient(120% 120% at 50% 0%,rgba(217,182,163,.12),var(--bg-card) 70%);text-align:center}
.u-golden .lbl{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:2px;color:var(--rose);text-transform:uppercase}
.u-golden .big{font-family:'Song Myung',serif;font-size:24px;color:var(--ink);margin:8px 0}
.u-golden .locked{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted2);margin-top:4px}

/* lock + CTA block */
.u-lock{margin:8px 22px 0;padding:30px 22px;border:1px solid var(--hair);border-radius:var(--r);text-align:center;background:radial-gradient(120% 120% at 50% 0%,var(--bg-glow),var(--bg-card) 72%)}
.u-lock .lockrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);letter-spacing:.3px;margin-bottom:14px}
.u-lock h3{font-size:21px;line-height:1.5}
.u-lock ul{margin:18px 0;display:flex;flex-direction:column;gap:10px}
.u-lock li{font-size:13.5px;color:var(--pearl);display:flex;align-items:center;justify-content:center;gap:9px}
.u-lock li .d{width:5px;height:5px;border-radius:50%;background:var(--rose);flex:0 0 5px}
.u-price{font-family:'IBM Plex Mono',monospace;margin:18px 0 2px}
.u-price .now{font-size:27px;color:var(--rose)} .u-price .u{font-size:13px;color:var(--muted)}
.u-lock .reassure{font-size:11.5px;color:var(--muted2);margin-top:12px;line-height:1.7}

/* ACTION3: 희소도 게이지 + 해금 진행바 + 블러 티저 (후킹 최강) */
.u-rarity-gauge{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:18px}
.u-rarity-gauge .rg-top{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--rose);letter-spacing:.3px}
.u-rarity-gauge .rg-top b{font-size:16px}
.u-rarity-gauge .rg-bar{width:210px;max-width:62vw;height:6px;border-radius:99px;background:rgba(217,182,163,.14);overflow:hidden}
.u-rarity-gauge .rg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),#ecd2c1);border-radius:99px;transition:width 1.1s ease}
.u-rarity-gauge .rg-sub{font-size:11px;color:var(--muted2)}
.u-unlock-progress{margin:0 0 18px}
.u-unlock-progress .upbar{height:7px;border-radius:99px;background:rgba(217,182,163,.13);overflow:hidden;max-width:330px;margin:0 auto}
.u-unlock-progress .upbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),#ecd2c1);border-radius:99px;transition:width 1.2s ease}
.u-unlock-progress .uptxt{font-size:12px;color:var(--muted);margin-top:9px}
.u-unlock-progress .uptxt b{color:var(--rose);font-family:'IBM Plex Mono',monospace}
.u-teasers{display:flex;flex-direction:column;gap:11px;margin:20px 0 6px;text-align:left}
.u-teaser{position:relative;border:1px solid var(--hair);border-radius:14px;padding:15px 16px 17px;background:var(--bg-card);overflow:hidden}
.u-teaser-title{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:9px;position:relative;z-index:2}
.u-teaser-body{font-size:12.5px;color:var(--pearl);line-height:1.7;filter:blur(2.4px);-webkit-filter:blur(2.4px);user-select:none;pointer-events:none;opacity:.92;margin:0}
.u-teaser-lock{position:absolute;right:12px;top:12px;font-size:10px;color:var(--rose);background:rgba(217,182,163,.1);border:1px solid var(--hair);border-radius:999px;padding:3px 9px;z-index:3}
.u-teaser::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(to bottom,transparent,var(--bg-card));z-index:1;pointer-events:none}

/* 강점 스탯 (정직 게임화 — 점수마다 근거 인라인 = 모순 제로) */
.u-statcard{display:flex;flex-direction:column;gap:14px;margin-top:18px;text-align:left}
.u-stat .st-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.u-stat .st-name{font-size:14px;color:var(--ink);font-weight:600}
.u-stat .st-val{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--muted)}
.u-stat.is-top .st-name{color:var(--rose);font-size:15px} .u-stat.is-top .st-val{color:var(--rose);font-size:17px}
.u-stat .st-bar{height:7px;border-radius:99px;background:rgba(217,182,163,.13);overflow:hidden}
.u-stat .st-bar i{display:block;height:100%;width:0;border-radius:99px;background:rgba(217,182,163,.42);transition:width 1s ease}
.u-stat.is-top .st-bar i{background:linear-gradient(90deg,var(--rose),#ecd2c1)}
.u-stat .st-why{font-size:11px;color:var(--muted2);margin-top:5px}
.u-stats .pot{margin-top:16px;font-size:13px;color:var(--pearl);line-height:1.75;border-left:2px solid var(--rose);padding-left:13px;text-align:left}
.u-identity .u-animal{width:128px;height:128px;border-radius:50%;object-fit:cover;margin:6px auto 14px;display:block;border:2px solid var(--hair);box-shadow:0 10px 34px rgba(0,0,0,.28)}
.u-identity .persona{font-family:'Song Myung',serif;font-size:16px;color:var(--rose);margin-top:10px;letter-spacing:.3px}
/* 분석 로딩 연출 (단계 문구는 실제 계산값) */
#uc-loading{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;text-align:center;padding:34px;background:radial-gradient(120% 90% at 50% 0%,#1a1218,#0d0a0c 62%);opacity:1;transition:opacity .55s ease}
#uc-loading.out{opacity:0;pointer-events:none}
#uc-loading .ld-glyph{font-family:'Song Myung',serif;font-size:44px;color:var(--rose);margin-bottom:16px;animation:ldp 2s ease-in-out infinite}
@keyframes ldp{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
#uc-loading .ld-pillar{font-family:'Song Myung',serif;font-size:30px;color:#f3ece1;letter-spacing:5px;min-height:38px;margin-bottom:6px}
#uc-loading .ld-step{font-size:13.5px;color:var(--rose);letter-spacing:.3px;min-height:20px;margin-bottom:22px;transition:opacity .3s}
#uc-loading .ld-bar{width:240px;max-width:64vw;height:5px;border-radius:99px;background:rgba(217,182,163,.16);overflow:hidden;margin:0 auto}
#uc-loading .ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),#ecd2c1);border-radius:99px;transition:width .55s ease}
/* 공유 카드 버튼 */
.u-sharewrap{text-align:center;margin:14px 0 2px}
.u-sharebtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--rose);background:rgba(217,182,163,.08);border:1px solid var(--hair);border-radius:999px;padding:10px 20px;cursor:pointer;font-family:inherit;transition:.15s}
.u-sharebtn:active{transform:scale(.97)} .u-sharebtn.done{color:var(--win,#1f7a4d)}
/* 유형코드 배지 */
.u-identity .u-typecode{display:inline-block;margin-top:13px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#1a1206;background:linear-gradient(135deg,#e9cdbb,#d9b6a3);border-radius:999px;padding:6px 15px;letter-spacing:.5px;font-weight:600}
/* 성향 스펙트럼 (MBTI식) */
.u-spectrum{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.sp-axis{display:flex;align-items:center;gap:10px}
.sp-axis .sp-l,.sp-axis .sp-r{font-size:12px;color:var(--muted);flex:0 0 64px}
.sp-axis .sp-r{text-align:right}
.sp-track{position:relative;flex:1;height:6px;border-radius:99px;background:rgba(217,182,163,.14)}
.sp-track i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ecd2c1,var(--rose));transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(217,182,163,.5);border:2px solid var(--bg-card)}
.sp-axis.lean-r .sp-r,.sp-axis.lean-l .sp-l{color:var(--rose);font-weight:600}

/* ---- paid preview (tight) ---- */
.u-paid h2{font-size:clamp(21px,5.4vw,26px)}
.u-paid .chapters{margin-top:18px;display:flex;flex-direction:column;gap:0}
.u-paid .chapters li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair-cool);font-size:14px;color:var(--pearl)}
.u-paid .chapters li .n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--rose);flex:0 0 28px;padding-top:2px}
.u-paid .chapters li span small{display:block;color:var(--muted2);font-size:12px;margin-top:3px;font-weight:400}

/* ---- trust ---- */
.u-trust .tgrid{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.u-trust .tgrid .u-card .te{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--rose);letter-spacing:1px}
.u-trust .tgrid .u-card h4{font-size:15px;margin:8px 0 6px}
.u-trust .tgrid .u-card p{font-size:13px;color:var(--muted);line-height:1.8}

/* ---- reviews ---- */
.u-reviews .rgrid{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.u-reviews .rgrid .u-card{font-size:13.5px;color:var(--muted);line-height:1.85}
.u-reviews .rgrid .u-card .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted2);margin-top:10px}

/* ---- footer ---- */
.u-footer{padding:34px 22px;font-size:11.5px;color:var(--muted2);line-height:1.85;border-top:1px solid var(--hair-cool)}
.u-footer b{color:var(--muted)}

/* ---- 하단 할인/한정 바 (실험) ---- */
.u-offer{position:fixed;bottom:0;left:0;right:0;z-index:80;max-width:540px;margin:0 auto;
  background:linear-gradient(180deg,rgba(24,18,40,.84),rgba(20,15,30,.98));backdrop-filter:blur(18px);
  border-top:1px solid var(--hair);box-shadow:0 -14px 44px rgba(0,0,0,.55);padding:11px 18px 13px}
.u-offer-live{text-align:center;font-size:11.5px;color:var(--muted);margin-bottom:9px;letter-spacing:.2px}
.u-offer-live .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sage);margin-right:6px;vertical-align:middle;animation:offPulse 2s infinite}
.u-offer-live b{color:var(--pearl);font-family:'IBM Plex Mono',monospace;font-weight:500}
@keyframes offPulse{0%{box-shadow:0 0 0 0 rgba(127,179,154,.55)}70%{box-shadow:0 0 0 7px rgba(127,179,154,0)}100%{box-shadow:0 0 0 0 rgba(127,179,154,0)}}
.u-offer-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.u-offer-time{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;color:var(--ink)}
.u-offer-time .clk{font-size:12px}
.u-offer-time b{font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--rose-bright);letter-spacing:.5px;font-weight:500}
.u-offer-time em{font-style:normal;font-size:11px;color:var(--muted2)}
.u-offer-spots{font-size:12.5px;color:var(--muted)}
.u-offer-spots b{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--rose);font-weight:600;margin:0 1px}
.u-offer-spots span{color:var(--muted2);font-size:12px}
.u-offer-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:12px}
.u-offer-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--rose-bright) 60%,var(--rose));box-shadow:0 0 12px rgba(217,182,163,.55);transition:width 1.2s cubic-bezier(.2,.7,.3,1);animation:offGaugePulse 2.4s ease-in-out infinite}
@keyframes offGaugePulse{0%,100%{box-shadow:0 0 7px rgba(217,182,163,.4)}50%{box-shadow:0 0 16px rgba(217,140,132,.75)}}
.u-offer-row2{display:flex;align-items:stretch;gap:10px}
.u-offer-ghost{flex:0 0 auto;background:transparent;border:1px solid var(--hair-cool);border-radius:13px;color:var(--muted);font-size:13px;padding:0 16px;font-weight:600;transition:border-color .15s,color .15s}
.u-offer-ghost:hover{border-color:var(--hair);color:var(--pearl)}
.u-offer-buy{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,var(--rose-bright),var(--rose));color:#1a1322;border-radius:13px;padding:13px 14px;font-weight:700;box-shadow:0 10px 30px rgba(217,182,163,.3);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.u-offer-buy:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(217,182,163,.4)}
.u-offer-buy::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:offShine 4.8s infinite}
@keyframes offShine{0%{left:-60%}28%{left:135%}100%{left:135%}}
.u-offer-buy .pct{background:#1a1322;color:var(--rose-bright);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;border-radius:7px;padding:3px 8px;letter-spacing:.3px;position:relative;z-index:1}
.u-offer-buy .was{color:rgba(26,19,34,.5);font-size:12.5px;text-decoration:line-through;position:relative;z-index:1}
.u-offer-buy .now{font-size:17px;letter-spacing:-.2px;position:relative;z-index:1}
.u-offer-buy .go{font-size:16px;margin-left:1px;position:relative;z-index:1}
.u-offer-note{text-align:center;font-size:10.5px;color:var(--muted2);margin-top:9px;line-height:1.6}
.u-offer.is-ended .u-offer-buy{background:linear-gradient(135deg,#3a3350,#2b2640);color:var(--muted);box-shadow:none}
.u-offer.is-ended .u-offer-buy::after{display:none}
.u-offer.is-ended .u-offer-buy .pct,.u-offer.is-ended .u-offer-buy .was{display:none}
.u-offer.is-ended .u-offer-bar span{background:var(--muted2);box-shadow:none}
.u-offer.is-ended .u-offer-time b,.u-offer.is-ended .u-offer-spots b{color:var(--muted2)}

@media(min-width:600px){
  .u-sec,.u-rsec,.u-intake{padding-left:40px;padding-right:40px}
  .u-hero{padding-left:40px;padding-right:40px}
}

/* 만세력 명식 그리드 (命式) */
.u-manse-grid{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:6px; }
.ms-tbl{ width:100%; border-collapse:collapse; font-family:'Song Myung',serif; }
.ms-tbl th,.ms-tbl td{ text-align:center; padding:11px 6px; border:1px solid var(--hair-cool); }
.ms-tbl thead th{ font-size:13px; color:var(--rose); font-family:'Cormorant Garamond',serif; letter-spacing:2px; border-top:0; }
.ms-tbl thead th:first-child{ border-left:0; }
.ms-rh{ font-size:11px; color:var(--muted2); font-family:'Pretendard',sans-serif; width:40px; border-left:0 !important; }
.ms-c{ cursor:pointer; transition:background .15s; }
.ms-c:hover{ background:rgba(217,182,163,.06); }
.ms-c b{ display:block; font-size:25px; line-height:1.05; font-weight:400; }
.ms-c i{ font-style:normal; font-size:11px; color:var(--muted2); font-family:'Pretendard',sans-serif; }
.ms-g{ font-size:12px; color:var(--lilac); font-family:'Pretendard',sans-serif; }
.u-manse-note{ margin-top:12px; padding:11px 14px; background:rgba(217,182,163,.06); border-left:2px solid var(--rose); border-radius:0 8px 8px 0; font-size:13px; color:var(--rose); }

/* 귀인/악인 (정직버전 — 오행 상생상극 기운 카드) */
.u-guin-cards{ display:grid; gap:12px; margin-top:8px; }
.gn-card{ border-radius:var(--r-sm); padding:16px 18px; border:1px solid var(--hair-cool); }
.gn-good{ background:rgba(217,182,163,.07); border-color:rgba(217,182,163,.25); }
.gn-bad{ background:rgba(155,144,172,.06); position:relative; }
.gn-h{ font-size:12.5px; color:var(--rose); margin-bottom:5px; }
.gn-bad .gn-h{ color:var(--muted); }
.gn-el{ font-family:'Song Myung',serif; font-size:18px; color:var(--ink); margin-bottom:7px; }
.gn-d{ font-size:13px; color:var(--pearl); line-height:1.7; }
.gn-blur{ filter:blur(3px); -webkit-filter:blur(3px); user-select:none; opacity:.8; }
.gn-lock{ display:inline-block; margin-top:9px; font-size:11px; color:var(--rose); }

/* intro 미끼 인사이트 (첫 화면 완성형 한 줄) */
.u-hook{ font-family:'Song Myung',serif; font-size:16.5px; color:var(--rose); line-height:1.6; margin-top:16px; padding:13px 17px; background:rgba(217,182,163,.06); border:1px solid var(--hair); border-radius:var(--r-sm); }

/* ===== MBTI × 사주 (재미 코너) ===== */
.u-mbti-intro{ font-size:14.5px; line-height:1.7; color:rgba(241,236,246,.82); margin:0 0 14px; }
.u-mbti-intro b{ color:var(--rose); font-weight:600; }
.u-mbti-axes{ display:grid; gap:9px; }
.mb-axis{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.mb-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:11px 14px; background:rgba(255,255,255,.03); border:1px solid var(--hair); border-radius:var(--r-sm); color:var(--ink); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; text-align:left; transition:border-color .15s, background .15s, color .15s; }
.mb-opt small{ font-size:11.5px; font-weight:400; color:rgba(241,236,246,.55); letter-spacing:0; }
.mb-opt:hover{ border-color:rgba(217,182,163,.4); }
.mb-opt.on{ background:rgba(217,182,163,.1); border-color:var(--rose); color:var(--rose); }
.mb-opt.on small{ color:rgba(217,182,163,.78); }
.u-mbti-read{ margin-top:14px; padding:15px 16px; background:var(--bg-card); border:1px solid var(--hair); border-radius:var(--r-sm); }
.mb-code{ font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:600; color:var(--rose); letter-spacing:.04em; margin-bottom:11px; }
.mb-code span{ opacity:.5; padding:0 3px; }
.mb-line{ font-size:14px; line-height:1.6; color:rgba(241,236,246,.85); padding:5px 0; display:flex; gap:9px; align-items:baseline; }
.mb-tag{ flex:none; display:inline-block; min-width:22px; text-align:center; font-weight:700; color:var(--rose); font-size:13px; }
.mb-cross{ margin-top:11px; padding-top:11px; border-top:1px solid var(--hair); font-size:13.5px; line-height:1.7; color:rgba(241,236,246,.72); }
.mb-cross b{ color:var(--rose); font-weight:600; }

/* ===== 올해 행동 처방 (도/돈 2색 박스) ===== */
.u-act-box{ display:grid; gap:10px; }
.act-row{ padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--hair); }
.act-do{ background:rgba(124,170,118,.08); border-color:rgba(124,170,118,.32); }
.act-dont{ background:rgba(201,124,124,.07); border-color:rgba(201,124,124,.3); }
.act-h{ font-weight:700; font-size:14px; margin-bottom:6px; }
.act-do .act-h{ color:#9ec99a; }
.act-dont .act-h{ color:#dba6a6; }
.act-d{ font-size:14px; line-height:1.65; color:rgba(241,236,246,.85); }
.act-d b{ color:var(--rose); font-weight:600; }
.act-dont .act-d b{ color:#e6bcbc; }
.act-lock{ display:inline-block; margin-top:9px; font-size:12px; color:rgba(241,236,246,.5); }

/* ===== 영역별 운 카드 ===== */
.u-area-grid{ display:grid; gap:11px; }
.ar-card{ padding:14px 16px; background:rgba(255,255,255,.025); border:1px solid var(--hair); border-radius:var(--r-sm); }
.ar-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.ar-nm{ font-weight:600; font-size:15px; color:var(--ink); }
.ar-lvl{ font-size:12px; font-weight:700; padding:2px 10px; border-radius:20px; }
.ar-lvl.st-hi{ color:#e6c79a; background:rgba(217,182,163,.16); }
.ar-lvl.st-mid{ color:#aab3ca; background:rgba(155,164,196,.14); }
.ar-lvl.st-lo{ color:#9aa0ab; background:rgba(155,160,171,.12); }
.ar-bar{ height:6px; background:rgba(255,255,255,.05); border-radius:6px; overflow:hidden; margin-bottom:9px; }
.ar-bar i{ display:block; height:100%; border-radius:6px; }
.ar-bar i.st-hi{ background:linear-gradient(90deg,#d9b6a3,#e6c79a); }
.ar-bar i.st-mid{ background:rgba(169,178,201,.6); }
.ar-bar i.st-lo{ background:rgba(155,160,171,.45); }
.ar-d{ font-size:13.5px; line-height:1.6; color:rgba(241,236,246,.78); }

/* ===== 챕터 디바이더 ===== */
.u-chap{ display:flex; align-items:center; gap:14px; margin:36px 4px 2px; }
.u-chap-line{ flex:1; height:1px; background:var(--hair); }
.u-chap-txt{ font-family:'Song Myung',serif; font-size:15px; color:rgba(241,236,246,.72); white-space:nowrap; letter-spacing:.02em; }
.u-chap-txt b{ font-family:'Cormorant Garamond',serif; color:var(--rose); font-weight:600; margin-right:8px; font-size:17px; letter-spacing:.05em; }

/* ===== 십성 5계열 범례 ===== */
.ms-legend{ display:flex; flex-wrap:wrap; gap:9px 14px; margin-top:12px; justify-content:center; }
.ms-lg{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:rgba(241,236,246,.6); }
.ms-lg i{ width:9px; height:9px; border-radius:50%; display:inline-block; }


/* ===== 정직 경계 브릿지 ===== */
.u-bridge{ margin:30px 0 8px; padding:18px 20px; background:var(--bg-card); border:1px solid var(--hair); border-radius:var(--r); }
.u-bridge-h{ font-family:'Song Myung',serif; font-size:16.5px; color:var(--rose); margin-bottom:13px; }
.u-bridge-list{ margin:0 0 14px; padding:0; list-style:none; }
.u-bridge-list li{ font-size:14px; line-height:1.55; color:rgba(241,236,246,.82); padding:6px 0 6px 22px; position:relative; }
.u-bridge-list li::before{ content:"✓"; position:absolute; left:0; top:6px; color:var(--rose); font-size:13px; }
.u-bridge-list b{ color:var(--ink); font-weight:600; }
.u-bridge-next{ font-size:13.5px; line-height:1.7; color:rgba(241,236,246,.72); padding-top:13px; border-top:1px solid var(--hair); }
.u-bridge-next b{ color:var(--rose); font-weight:600; }

/* ===== 영역별 자기이해 카드 (점수 X · 서술) ===== */
.u-area-cards{ display:grid; gap:11px; }
.asc{ padding:13px 15px; background:var(--bg-card); border:1px solid var(--hair); border-radius:var(--r-sm); }
.asc-h{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.asc-ic{ font-size:17px; }
.asc-h b{ font-size:15.5px; color:var(--ink); font-weight:600; }
.asc-lvl{ margin-left:auto; font-size:11.5px; font-weight:700; padding:2px 10px; border-radius:20px; }
.asc-hi{ color:var(--rose); background:rgba(217,182,163,.13); }
.asc-mid{ color:rgba(241,236,246,.7); background:rgba(255,255,255,.05); }
.asc-lo{ color:rgba(150,165,200,.9); background:rgba(150,165,200,.1); }
.asc-bar{ height:5px; background:rgba(255,255,255,.05); border-radius:3px; overflow:hidden; margin-bottom:10px; }
.asc-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, rgba(217,182,163,.5), var(--rose)); border-radius:3px; transition:width .7s ease; }
.asc-d{ font-size:13.5px; line-height:1.65; color:rgba(241,236,246,.82); }

/* ===== 친언니 내레이터 말풍선 ===== */
.u-narr{ display:flex; gap:11px; align-items:flex-start; margin:2px 2px; }
.u-narr-av{ flex:none; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, rgba(217,182,163,.28), rgba(217,182,163,.07)); border:1px solid rgba(217,182,163,.32); display:flex; align-items:center; justify-content:center; font-size:18px; }
.u-narr-bub{ flex:1; background:rgba(217,182,163,.06); border:1px solid var(--hair); border-radius:4px 15px 15px 15px; padding:11px 15px; font-size:14px; line-height:1.7; color:rgba(241,236,246,.9); }
.u-narr-nm{ display:block; font-size:11.5px; color:var(--rose); margin-bottom:3px; font-weight:600; letter-spacing:.02em; }
.u-narr-bub b{ color:var(--rose); font-weight:600; }

/* ===== 유형 세분 정의 ===== */
.u-typedef{ font-size:13px; line-height:1.6; color:rgba(241,236,246,.72); margin:8px 0 0; }

/* 한지·수묵 프리미엄 톤 — 미묘 종이 질감 (은은, 가독성 우선) */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='hanji'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hanji)'/%3E%3C/svg%3E")}