/* ============================================================
   onep-hanji.css — 한지·단청 테마 레이어 (전통 정제)
   onep.css '다음'에 로드되어 토큰·컴포넌트를 덮어씀.
   무드: 한지(닥종이) 바탕 · 먹선 · 단청 오방색 포인트 · 프레임형 UI.
   ============================================================ */

/* ── 1. 토큰 재정의(오방색·한지·먹) ── */
:root{
  /* 브랜드=단청 주홍(赤), 보조=청록(靑)/군청, 보상=황(黃) */
  --pink:#C0392B; --pink-deep:#8E2A20; --pink-light:#F1E1D3;   /* 주홍 계열로 재매핑 */
  --mint:#1E6E5C; --mint-deep:#12513F; --mint-light:#DEEAE1;   /* 청록 */
  --indigo:#2B4C7E; --indigo-deep:#1D3860; --indigo-light:#DEE5EE; /* 군청 */
  --yellow:#C8922E; --yellow-ink:#33240A;                      /* 치자·황토 */

  /* 먹(글자) */
  --ink:#2C2620; --ink-2:#5B5142; --ink-3:#726752; --ink-4:#9A8D71;

  /* 한지(면) */
  --canvas:#F4ECD6; --page:#DBCDA9;
  --tile:#EFE5CB; --tile-2:#EADFC0;
  --line:#D6C7A0; --line-2:#DED0AA; --line-3:#E4D8B8;

  /* 오행 스탯(살짝 톤다운) */
  --el-mok:#5E8C1E; --el-hwa:#C0392B; --el-to:#B07C1C; --el-geum:#7C7663; --el-su:#2E6FA6;

  /* 프레임 라운드(전통=각지게) */
  --r-pill:999px; --r-lg:12px; --r-md:9px; --r-sm:7px; --r-xs:5px;
  --shadow-cta:0 8px 18px -10px rgba(44,38,32,.5);

  --font-head:"Song Myung","Gowun Batang",serif;
}

/* ── 2. 한지 질감 바탕 ── */
body{background:var(--page)}
.app{
  background-color:var(--canvas);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
  border:1px solid #C9B98F;
}
@media(min-width:480px){
  .app{box-shadow:0 40px 90px -34px rgba(60,48,24,.5)}
}

/* ── 3. 타이포: 헤드라인=명조 세리프 ── */
.h2,.land-h1,.sheet-title,.cc-name,.char-name,.result-title,.verdict-head{
  font-family:var(--font-head);letter-spacing:-.2px}
.land-h1{font-weight:400;letter-spacing:-.5px}
.eyebrow{font-family:var(--font-head);color:var(--pink);letter-spacing:1px}

/* ── 4. 상단바 ── */
.tb-logo{background:var(--pink);border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.tb-name{font-family:var(--font-head)}
.coin-chip{background:var(--tile-2);color:var(--pink-deep);border:1px solid var(--line)}

/* ── 5. 진행 도트 → 먹점/주홍 알약 ── */
.dot{background:#C9B98F;width:6px;height:6px}
.dot.done{background:#D8A98F}
.dot.active{background:var(--pink)}

/* ── 6. 버튼: 프레임형(고전 현판 느낌) ── */
.btn{
  background:var(--pink);color:#FBF4E4;border:1.5px solid var(--pink-deep);
  border-radius:var(--r-md);font-family:var(--font-head);font-weight:400;letter-spacing:.3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 2px rgba(251,244,228,.14), 0 6px 14px -8px rgba(44,38,32,.55);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.ghost{background:var(--tile);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.mint{background:var(--mint);border-color:var(--mint-deep)}
.btn.yellow{background:var(--yellow);color:var(--yellow-ink);border:1.5px solid #9A6F1E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -8px rgba(44,38,32,.4)}
.link-btn{color:var(--ink-3)}

/* ── 7. 면(패널·카드·필드) = 한지 + 먹 헤어라인 ── */
.feat,.char-card,.sheet-panel,.metric,.cc-metric,.cc-special,.sex-opt,
.date-row select,.chip,.cc-stage,.menu-pop,.lf-section,.consult-log,.input{
  background:var(--tile);border-color:var(--line)!important;border-radius:var(--r-sm);
}
.feat{border:1px solid var(--line)}

/* 말풍선: 한지 톤 + 먹 헤어라인 */
.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)}

/* ── 8. 뱃지·칩 ── */
.pill-badge{background:var(--tile);border:1.5px solid var(--pink);color:var(--pink-deep);border-radius:var(--r-pill)}
.pill-badge b{color:var(--pink)}
.chip.on,.sex-opt.on,.cc-chip.on{border-color:var(--pink)!important;background:var(--pink-light)!important;color:var(--pink-deep)}
.char-tag,.cc-tag{border-radius:var(--r-pill)}

/* ── 9. 캐릭터 가이드 도상: 먹 프레임 + 단청 상단 리본 ── */
.guide-fig,.char-ill,.cc-ill{border:2px solid var(--ink);box-shadow:0 16px 34px -18px rgba(44,38,32,.5)}
.guide-fig{position:relative}
.guide-fig::after{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--mint) 0 14px,var(--pink) 14px 28px,var(--yellow) 28px 42px,var(--indigo) 42px 56px)}

/* 캐러셀 무대 */
.cc-stage{background:var(--tile);border:1px solid var(--line)}
.cc-dot.on{background:var(--pink)}

/* ── 10. 특화서비스 강조(단청 청록 라인) ── */
.cc-special{border:1.5px solid var(--mint)!important;background:var(--mint-light)!important}
.cc-special .cc-ml,.cc-special .cc-desc{color:var(--mint-deep)}

/* ── 11. 결과 오행 스탯바 트랙 ── */
.metric-bar,.el-bar,.stat-track{background:#E4D8B8}

/* ── 12. 충전/시트 상단 그랩 ── */
.sheet-grab{background:var(--line)}

/* ── 13. 모션: 먹 번지듯 부드럽게 ── */
.screen{animation:hanjiIn .5s cubic-bezier(.22,.8,.3,1) both}
@keyframes hanjiIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── 14. 나머지 화면 마감(타로·결과·심층·선물·상담) ── */
/* 타로 카드백: 군청 + 먹 프레임 + 크림 문양색 */
.deck-card{border:2px solid var(--indigo-deep);color:#E7DFC6;
  box-shadow:inset 0 0 0 3px rgba(231,223,198,.14),0 3px 8px rgba(44,38,32,.32)}
.deck-card.sel{border-color:var(--pink);box-shadow:0 8px 18px -4px rgba(192,57,43,.45)}
.slot{border:1.5px dashed var(--line);background:var(--tile)}
.slot.filled{border:none;color:#E7DFC6}

/* 결과 타로 미니카드: 흰색 → 한지 */
.tcard{background:var(--tile);border:1px solid var(--line)}
.tcard-top{color:#E7DFC6}
.tcard-k{font-family:var(--font-head)}

/* 크로스 결론·딥 히어로: 그라데이션 제거 → 한지 + 먹 프레임 + 단청 상단선 */
.cross-box{border-radius:var(--r-lg);border:1px solid var(--line)}
.deep-sec{border:1px solid var(--line)}
.verdict-hero{background:var(--tile);border:1.5px solid var(--line);position:relative;overflow:hidden}
.verdict-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--mint) 0 12px,var(--pink) 12px 24px,var(--yellow) 24px 36px,var(--indigo) 36px 48px)}
.verdict-hero .vnum{font-family:var(--font-head)}

/* 심층 페이월 카드: 그라데이션 제거 → 한지 + 주홍 프레임 */
.lf-pw-card{background:var(--tile);border:1.5px solid var(--pink);border-radius:var(--r-lg)}
.lf-pw-t{font-family:var(--font-head)}

/* 상담 토픽칩 흰 배경 → 한지 */
.consult-topics .chip{background:var(--tile)}

/* 무료권 티켓: 먹 액자 + 단청 주홍 이중선 + 한지 톤 보정(래스터 임시) */
.ticket-hero{border:2px solid var(--ink);border-radius:var(--r-md);
  filter:sepia(.42) saturate(.78) hue-rotate(-8deg) brightness(1.03) contrast(1.02);
  box-shadow:inset 0 0 0 3px rgba(251,244,228,.5), 0 12px 26px -14px rgba(44,38,32,.5)}
.ticket-ico{border:1px solid var(--line)}

/* 지갑 히어로·패키지 강조 라운드 정리 */
.wallet-hero,.lf-block,.deep-sec,.cross-box{border-radius:var(--r-lg)}

/* 오행 스탯 트랙(회색 → 한지) */
.oheng-track{background:#E4D8B8}
.oheng-val{font-family:var(--font-head)}

/* 충전 시트: 패키지·결제수단 흰색 → 한지 */
.pkg{background:var(--tile)}
.pkg.sel{background:var(--pink-light)}
.seg{background:var(--tile-2)}
.seg button.on{background:var(--canvas)}
.sheet-title{font-family:var(--font-head)}