/* renewal.css - 본 사이트 라이트 전환
   v2.css 계승 + 페이지별 덮어쓰기. main.css 는 건드리지 않는다. */

/* v2 타로 라인 — 팔레트 + nav 라이트 (main.css 미로드) */
:root {
  --bg: #f2ede6;
  --accent: #6b5e7d;
  --card: #cfc3d4;
  --card-light: #e2dae4;
  --sage: #cdd2c4;
  --cream: #ece0cf;
  --text: #2b2825;
  --gold: #e8d5a8;
}

/* nav 기본 레이아웃 (main.css 대체, backdrop-filter 없음) */
body .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(242, 237, 230, 0.95);
  border-bottom: 1px solid rgba(107, 94, 125, 0.14);
}

body .nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

body .nav-logo img {
  height: 28px;
  border-radius: 4px;
}

body .nav-logo span {
  color: #6b5e7d !important;
}

body .nav-langs {
  display: flex;
  gap: 4px;
}

body .lang-btn,
body .bsn-lang-toggle {
  background: none;
  color: #6b5e7d;
  border: 1px solid rgba(107, 94, 125, 0.22);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  cursor: pointer;
  font-family: "Noto Sans KR", sans-serif;
}

body .lang-btn:hover,
body .lang-btn.active,
body .bsn-lang-toggle:hover {
  background: #6b5e7d;
  color: #f2ede6;
  border-color: #6b5e7d;
}

body #navLoginBtn {
  color: #6b5e7d !important;
  border-color: rgba(107, 94, 125, 0.22) !important;
}

body #menuBtn {
  color: #6b5e7d !important;
}

@media (max-width: 600px) {
  body .nav {
    padding: 0 6px;
  }
  body .nav-langs {
    gap: 2px;
    margin-left: 4px !important;
  }
  body .lang-btn,
  body .bsn-lang-toggle {
    padding: 2px 5px;
    font-size: 9px;
  }
}

/* 햄버거 드로어 — nav.js 60행 주입 CSS 라이트 덮어쓰기 (.bsn-overlay 는 유지) */
body .bsn-drawer {
  top: 52px;
  background: rgba(10, 15, 30, 0.99);
  backdrop-filter: none;
  border-right: 1px solid rgba(201, 168, 76, 0.15);
}

body .bsn-drawer.open {
  transform: translateX(0);
}

body .drawer-acc {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body .drawer-acc summary {
  color: rgba(201, 168, 76, 0.7);
}

body .drawer-acc-arrow {
  color: rgba(201, 168, 76, 0.5);
}

body .drawer-acc[open] .drawer-acc-arrow {
  transform: rotate(180deg);
}

body .drawer-acc-body {
  padding-bottom: 6px;
}

/* 언어 메뉴 — nav.js 63행 주입 CSS 라이트 덮어쓰기 */
body .bsn-lang-menu {
  background: rgba(242, 237, 230, 0.98);
  border: 1px solid rgba(107, 94, 125, 0.22);
  box-shadow: 0 8px 24px rgba(43, 40, 37, 0.12);
}

body .bsn-lang-menu.open {
  display: block;
}

body .bsn-lang-menu a {
  color: #6b5e7d;
}

body .bsn-lang-menu a:hover {
  background: rgba(107, 94, 125, 0.1);
  color: #2b2825;
}

body .bsn-lang-menu a.cur {
  color: #f2ede6;
  background: #6b5e7d;
  font-weight: 700;
}

/* button → a 치환 후 CTA·추천카드 레이아웃 */
body a.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

body a.recommend-card {
  text-decoration: none;
}

/* nav.js가 <div style="height:52px"> 스페이서를 삽입하므로
   body .page { padding-top: 52px } 는 생략 — 단계 2 보고서 참조 */


/* ── v2 전용 푸터 (2026-09-19) ─────────────────────────
   nav.js 513행이 DOMContentLoaded에서
   if (!document.querySelector('footer')) 로 검사하므로,
   페이지에 이 <footer>가 정적으로 있으면 다크 푸터는 주입되지 않는다.
   nav.js는 수정하지 않는다. */
body .v2-footer {
  width: 100%;
  padding: 44px 20px 30px;
  background: #ece5da;
  border-top: 1px solid rgba(107, 94, 125, 0.12);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: -.02em;
}
body .v2-footer-inner { max-width: 430px; margin: 0 auto; }

body .v2-footer-brand {
  margin-bottom: 6px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 19px; font-weight: 900; letter-spacing: -.03em;
  color: #6f6035;
}
body .v2-footer-domain { color: #6b645c; }
body .v2-footer-tagline { margin-bottom: 12px; color: #6b645c; }
body .v2-footer-biz { color: #5f5952; line-height: 1.95; }

body .v2-footer-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px;
  margin: 26px 0 24px;
}
body .v2-footer-colhead {
  margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  color: #6b5e7d;
}
body .v2-footer a {
  display: block; margin-bottom: 7px;
  color: #4a443e; font-size: 13px; text-decoration: none;
}
body .v2-footer a:active { color: #6b5e7d; }

body .v2-footer-bottom {
  padding-top: 20px;
  border-top: 1px solid rgba(107, 94, 125, 0.12);
  text-align: center;
}
body .v2-footer-quote {
  margin: 0;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13px; font-weight: 700; line-height: 1.8;
  color: #6f6035;
}
body .v2-footer-sign { margin: 5px 0 0; color: #6b645c; }
body .v2-footer-copy { margin: 11px 0 0; color: #6b645c; }


/* tarot.html 라이트 전환 (2026-09-20)
   인라인 <style> 뒤에 로드된다. :root 는 동일 특이도 -> 이 파일이 이긴다.
   컴포넌트는 body 접두사로 특이도를 올려 덮는다.
   이 블록은 반드시 v2.css 계승분 뒤에 온다 (--gold 충돌). */

:root {
  --gold:   #6f6035;
  --gold2:  #5f5230;
  --ink:    #f2ede6;
  --white:  #2b2825;
  --gray:   rgba(43,40,37,.62);
  --border: rgba(107,94,125,.28);
}

body {
  background: var(--ink) url("/v2/images/paper.webp") repeat;
  color: var(--white);
}

body .spread-option,
body .reading-box,
body .gallery-card,
body .cta-secondary {
  background: rgba(255,255,255,.62);
}
body .cta-secondary { color: var(--white); }

body .spread-card {
  background: linear-gradient(135deg, #e2dae4, #cfc3d4);
  border-color: rgba(107,94,125,.45);
  color: #6b5e7d;
}

body .card-name     { color: rgba(43,40,37,.62); }
body .reading-text  { color: #2b2825; }
body .card-item img { box-shadow: 0 4px 16px rgba(107,94,125,.18); }

body .play-btn,
body .cta-primary {
  background: rgba(107,94,125,.10);
  border-color: rgba(107,94,125,.35);
  color: var(--gold2);
}

body .btn-draw { color: #fff; }

body .spinner {
  border: 4px solid rgba(107,94,125,.20);
  border-top-color: #6b5e7d;
}

body .modal-overlay   { background: rgba(43,40,37,.55); }
body .modal-box {
  background: #faf7f2;
  border: 1px solid rgba(107,94,125,.28);
}
body .modal-box p     { color: rgba(43,40,37,.78); }
body .modal-close     { color: var(--white); }
body .overlay-loading { background: rgba(242,237,230,.94); }



/* ── 모달 라이트 보정 (2026-09-20) ────────────────────
   billionaires.html body 안 <style> 의 다크 전제 모달 스타일을 덮는다.
   body 접두사로 특이도를 올려 선언 순서와 무관하게 이긴다.
   대비는 모달 배경 #faf7f2 기준. */
body .modal-role       { color: rgba(43,40,37,.62); }
body .modal-insight    { color: #2b2825; }
body .modal-section-title {
  color: #6f6035;
  border-bottom: 1px solid rgba(107,94,125,.20);
}
body .modal-pillar {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(107,94,125,.28);
}
body .modal-pillar-l   { color: rgba(43,40,37,.62); }
body .modal-pillar-v   { color: #5f5230; }
body .modal-peak {
  background: rgba(24,106,59,.08);
  border: 1px solid rgba(24,106,59,.25);
  color: #186a3b;
}
body .modal-btn        { color: #fff; }