/* ============================================================
   onep-asadal.css — 아사달 사주 테마 (다크 + 오방색)
   onep.css '다음'에 로드되어 토큰·컴포넌트를 덮어씀.
   무드: 딥 다크 배경 · 오방색(청·적·황) 포인트 · 카드형 UI.
   기준: asadal-demo.html 팔레트/레이아웃.
   ============================================================ */

/* ── 1. 토큰(오방색 + 다크) ── */
:root{
  --cheong:#2E6FDB; --jeok:#E23B4E; --hwang:#E7B84B; --baek:#F2F2F2; --heuk:#22252B;

  /* 브랜드=적(CTA), 보조=청, 보상=황 */
  --pink:#E23B4E; --pink-deep:#C22A3B; --pink-light:rgba(226,59,78,.16);
  --mint:#2E6FDB; --mint-deep:#2457AE; --mint-light:rgba(46,111,219,.16);
  --indigo:#4A5BC4; --indigo-deep:#36409A; --indigo-light:rgba(74,91,196,.18);
  --yellow:#E7B84B; --yellow-ink:#2a2205;

  /* 글자 */
  --ink:#e8ebf2; --ink-2:#c4ccdc; --ink-3:#9aa3b5; --ink-4:#6b7488;

  /* 면(다크 카드) */
  --canvas:#0f1117; --page:#080a0e;
  --tile:#181c26; --tile-2:#1f2432;
  --line:#2b3140; --line-2:#2b3140; --line-3:#232834;

  /* 오행 스탯(다크 위에서 선명하게) */
  --el-mok:#6BBF3A; --el-hwa:#E23B4E; --el-to:#E7B84B; --el-geum:#AEB6C4; --el-su:#3E9BE8;

  --r-pill:999px; --r-lg:16px; --r-md:12px; --r-sm:10px; --r-xs:8px;
  --shadow-cta:0 10px 26px -10px rgba(46,111,219,.5);
  --font-head:Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}

/* ── 2. 배경 ── */
body{background:var(--page)}
.app{background:var(--canvas);border:1px solid var(--line)}
@media(min-width:480px){ .app{box-shadow:0 40px 100px -30px rgba(0,0,0,.7)} }

/* ── 3. 타이포(굵은 산세리프) ── */
.h2,.land-h1,.sheet-title,.cc-name,.char-name,.lf-h,.lf-title,.tcard-k,.oheng-val,.verdict-hero .vnum{
  font-family:var(--font-head);letter-spacing:-.4px}
.h2,.land-h1{font-weight:800}
.eyebrow,.block-eyebrow{color:var(--cheong);letter-spacing:.4px}

/* ── 4. 상단바 ── */
.tb-logo{background:linear-gradient(135deg,var(--cheong),var(--jeok));color:#fff;border-radius:8px;font-weight:800}
.tb-name{color:var(--ink)}
.topbar{border-bottom:1px solid var(--line)}
.icon-btn{background:var(--tile-2);color:var(--ink);border:1px solid var(--line)}
.menu-pop{background:var(--tile);border:1px solid var(--line);box-shadow:0 16px 40px -12px rgba(0,0,0,.6)}
.menu-pop button{color:var(--ink)}
.menu-pop button:active,.menu-pop button:hover{background:var(--tile-2)}

/* ── 5. 진행 도트 ── */
.dot{background:#333a49}
.dot.done{background:#7a4552}
.dot.active{background:var(--jeok)}

/* ── 6. 버튼: 청→적 그라데이션 ── */
.btn{background:linear-gradient(135deg,var(--cheong),var(--jeok));color:#fff;border:0;
  border-radius:var(--r-md);font-weight:700;box-shadow:var(--shadow-cta)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;box-shadow:none}
.btn.ghost{background:var(--tile-2);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.btn.mint{background:linear-gradient(135deg,var(--cheong),#3a86e0)}
.btn.yellow{background:linear-gradient(135deg,var(--hwang),#d99b2e);color:var(--yellow-ink);box-shadow:0 10px 26px -10px rgba(231,184,75,.5)}
.btn.pink{background:linear-gradient(135deg,#e2564e,var(--jeok))}
.link-btn{color:var(--ink-3)}

/* ── 7. 면(패널·카드·필드·칩) ── */
.feat,.char-card,.metric,.cc-metric,.cc-special,.sex-opt,.date-row select,.chip,
.cc-stage,.lf-section,.lf-sec,.consult-log,.input,.gift-preview,.deep-sec,.hist-item,
.cross-box,.verdict-hero,.lf-pw-card,.wallet-hero{
  background:var(--tile);border-color:var(--line)!important;color:var(--ink)}
.feat{border:1px solid var(--line);border-radius:var(--r-sm)}
input,select,.input{background:var(--tile-2);color:var(--ink);border:1px solid var(--line)}
.muted,.sub,.land-note,.dim,.note,.tcard-pos,.lf-cat,.cc-ml{color:var(--ink-3)}

/* 말풍선 */
.mention-bubble,.guide-bubble{background:var(--tile-2);border:1px solid var(--line);color:var(--ink)}
.guide-bubble::before{background:var(--tile-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* 뱃지·칩 */
.pill-badge{background:var(--pink-light);border:1px solid var(--jeok);color:#ffb3bd}
.pill-badge b{color:var(--jeok)}
.land-h1 .em,.gift-h .em{color:var(--jeok)}
.chip.on,.sex-opt.on,.cc-chip.on{border-color:var(--cheong)!important;background:var(--mint-light)!important;color:#bcd3f5}
.badge,.cc-tag,.char-tag{background:var(--tile-2);border:1px solid var(--line);color:var(--ink-3)}

/* ── 8. 캐릭터 도상: 다크 액자 + 오방색 리본 ── */
.guide-fig,.char-ill,.cc-ill{background:var(--tile-2);border:2px solid var(--line);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
.guide-fig{position:relative}
.guide-fig::after{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--cheong) 0 16px,var(--jeok) 16px 32px,var(--hwang) 32px 48px)}
.guide-fig img,.cc-ill img,.char-ill img{object-fit:contain}
.guide-fig{padding:6px}.cc-ill{padding:4px}
.cc-stage{background:var(--tile);border:1px solid var(--line)}
.cc-dot.on{background:var(--jeok)}
.cc-special{border:1px solid var(--cheong)!important;background:var(--mint-light)!important}
.cc-special .cc-ml,.cc-special .cc-desc{color:#bcd3f5}

/* ── 9. 타로 카드 이미지 배선 ── */
.deck-card{background:url(../img/ui/tarot-back.png) center/cover no-repeat;color:transparent;font-size:0;
  border:2px solid var(--line);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.deck-card.sel{border-color:var(--cheong);box-shadow:0 8px 20px -4px rgba(46,111,219,.6)}
.slot{border:1.5px dashed var(--line);background:var(--tile-2);color:var(--ink-4)}
.slot.filled{border:none;background:url(../img/ui/tarot-back.png) center/cover no-repeat;color:transparent}
.flip-back{background:url(../img/ui/tarot-back.png) center/cover no-repeat;border:2px solid var(--line);color:transparent;font-size:0}
.flip-front{padding:0;border:2px solid var(--line);background:var(--tile-2);overflow:hidden;justify-content:flex-end}
.flip-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.flip-img.rev{transform:rotate(180deg)}
.flip-nm{position:relative;z-index:1;width:100%;box-sizing:border-box;
  background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;padding:10px 3px 4px}
.flip-pos{color:var(--ink-3)}
.flip-card.up .flip-pos{color:var(--cheong)}
/* 결과 미니카드 */
.tcard{background:var(--tile);border:1px solid var(--line)}
.tcard-top{height:112px;position:relative;background:var(--tile-2);overflow:hidden;display:block;padding:0}
.tcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tcard-img.rev{transform:rotate(180deg)}
.tcard-n{position:absolute;left:0;right:0;bottom:0;z-index:1;box-sizing:border-box;
  background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;padding:10px 2px 3px}
.tcard-k{color:var(--cheong)}

/* ── 10. 결과·심층·상담 ── */
.oheng-track,.metric-bar,.el-bar,.stat-track{background:#232834}
.oheng-key{border:1px solid rgba(255,255,255,.08)}
.dm-trait b{color:var(--hwang)}
.verdict-hero{position:relative;overflow:hidden}
.verdict-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--cheong) 0 14px,var(--jeok) 14px 28px,var(--hwang) 28px 42px)}
.verdict-hero .vnum{color:var(--jeok)}
.cross-t{color:var(--cheong)}
.cross-box p,.deep-sec p{color:var(--ink-2)}
.deep-sec p strong,.lf-body strong{color:var(--hwang)}
.lf-body{color:var(--ink-2)}
.consult-topics .chip{background:var(--tile-2)}
.consult-send,#consult-send{background:linear-gradient(135deg,var(--cheong),var(--jeok));color:#fff}
.sign{background:var(--tile-2);border-left:3px solid var(--hwang)}

/* ── 11. 선물·티켓 ── */
.gift-badge{background:var(--pink-light);border:1px solid var(--jeok);color:#ffb3bd}
.gift-badge b{color:var(--jeok)}
.ticket-cap,.ticket-sub{color:var(--ink-3)}
.ticket-hero{border:1px solid var(--line);box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}

/* ── 12. 사업자 푸터 ── */
.biz-foot{margin-top:8px;padding:22px 22px 30px;border-top:1px solid var(--line);color:var(--ink-4);font-size:11.5px;line-height:1.65}
.biz-disc{color:var(--ink-3);font-size:12px;margin-bottom:14px}
.biz-disc b{color:var(--ink-2);font-weight:600}
.biz-info{display:grid;gap:4px 16px;margin:0}
.biz-info>div{display:flex;gap:8px}
.biz-info dt{color:var(--ink-4);min-width:96px;flex:none}
.biz-info dd{margin:0;color:var(--ink-3)}
.biz-copy{margin-top:14px;color:var(--ink-4);font-size:10.5px;letter-spacing:.3px}

/* ── 13. 모션 ── */
.screen{animation:asadalIn .45s cubic-bezier(.22,.8,.3,1) both}
@keyframes asadalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}