@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
/* =========================================================================
 * 토닥 메인 — Astral 테마 (보라 천문도 · 낮/밤 토글)   v27
 *
 * @author  정경하
 * @since   2026.07.13
 * @version 3.11 (콤보박스 커스텀 화살표 제거 — 밤 타일링 버그, 옵션 목록 색만 유지)
 * @version 3.10 (콤보박스 select 통일 — 낮/밤 테마 + 커스텀 화살표 + 옵션 목록 대비)
 * @version 3.9  (헤더 등급 배지 글자색 override 제거 — 등급별 대비색 복원)
 * @version 3.8  (마이페이지 허브 밤 hover 대비 + 중앙 오브 글자 그림자)
 * @version 3.7  (마이페이지 허브 밤 카드 글자 대비 보정 — 등급색 유지 + 밝기 반전)
 * @version 3.6  (채팅 영역·전송버튼 등급색)
 *
 * ▸ 전부 body.astral 스코프. style.css 를 건드리지 않고 '덮어쓰기'만 한다.
 *   → 이 클래스가 없는 페이지(관리자/상담사콘솔/마이페이지 등)는 완전히 무영향.
 * ▸ 낮(기본) = 연보라 천문도.  밤 = body.astral.night (딥퍼플 별밤).
 * ▸ 등급 테마는 --primary/--accent/--glow 재정의로 연동 (블랙=핑크골드).
 * ▸ style.css 뒤에 로드되어 동일 특이도에서 우선한다.
 *
 * Copyright Neosgen Co,Ltd. All right reserved.
 * ========================================================================= */

/* ── 낮(기본) 토큰 ── */
body.astral{
  --text:#332c52; --text-muted:#584f77;
  --primary:#6b4ddb; --primary-light:#8b6ff0;
  --accent:#b8902a; --gold-2:#d9ab3e;
  --bg:#f1ecfb; --bg2:#e6dcf7;
  --card:rgba(255,255,255,.80);
  --border:rgba(106,77,219,.16);
  --shadow:0 12px 40px rgba(106,77,219,.14);
  --glow:rgba(157,123,255,.20);
  --disp:'Gowun Batang',serif;
  --topbar:rgba(248,246,253,.94);
  /* 성도(별자리 연결선+별) — 낮 배경 */
  --skyfield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='340'%3E%3Cg fill='none' stroke='%236b4ddb' stroke-width='1' opacity='0.24'%3E%3Cpolyline points='42,58 98,88 142,66 188,108 162,168'/%3E%3Cpolyline points='278,46 322,88 362,66 340,138'/%3E%3Cpolyline points='196,214 250,244 304,218 346,258'/%3E%3Cpolyline points='58,256 104,228 154,264'/%3E%3C/g%3E%3Cg fill='%23b8902a'%3E%3Ccircle cx='42' cy='58' r='2.6'/%3E%3Ccircle cx='98' cy='88' r='2'/%3E%3Ccircle cx='142' cy='66' r='2.4'/%3E%3Ccircle cx='188' cy='108' r='2'/%3E%3Ccircle cx='162' cy='168' r='2.6'/%3E%3Ccircle cx='278' cy='46' r='2.4'/%3E%3Ccircle cx='322' cy='88' r='2'/%3E%3Ccircle cx='362' cy='66' r='2.7'/%3E%3Ccircle cx='340' cy='138' r='2'/%3E%3Ccircle cx='196' cy='214' r='2'/%3E%3Ccircle cx='250' cy='244' r='2.6'/%3E%3Ccircle cx='304' cy='218' r='2'/%3E%3Ccircle cx='346' cy='258' r='2.4'/%3E%3Ccircle cx='58' cy='256' r='2'/%3E%3Ccircle cx='104' cy='228' r='2.4'/%3E%3Ccircle cx='154' cy='264' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background:
    radial-gradient(1100px 650px at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(184,144,42,.13), transparent 55%),
    linear-gradient(165deg,#f8f5fe 0%,#ece6fa 55%,#e2daf6 100%);
  background-attachment:fixed;
  color:var(--text);
}
/* ── 밤 토큰 ── */
body.astral.night{
  --text:#ece7fa; --text-muted:#a89fc9;
  --primary:#9d7bff; --primary-light:#c8b4ff;
  --accent:#e8c97a; --gold-2:#f6e8be;
  --bg:rgba(255,255,255,.05); --bg2:rgba(255,255,255,.02);
  --card:rgba(255,255,255,.055);
  --border:rgba(200,180,255,.15);
  --shadow:0 10px 44px rgba(8,6,26,.55);
  --glow:rgba(157,123,255,.30);
  --topbar:rgba(14,11,26,.9);
  --skyfield:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='340'%3E%3Cg fill='none' stroke='%23b9a3ff' stroke-width='1.1' opacity='0.5'%3E%3Cpolyline points='42,58 98,88 142,66 188,108 162,168'/%3E%3Cpolyline points='278,46 322,88 362,66 340,138'/%3E%3Cpolyline points='196,214 250,244 304,218 346,258'/%3E%3Cpolyline points='58,256 104,228 154,264'/%3E%3C/g%3E%3Cg fill='%23f6e8be'%3E%3Ccircle cx='42' cy='58' r='2.9'/%3E%3Ccircle cx='98' cy='88' r='2.2'/%3E%3Ccircle cx='142' cy='66' r='2.6'/%3E%3Ccircle cx='188' cy='108' r='2.2'/%3E%3Ccircle cx='162' cy='168' r='2.9'/%3E%3Ccircle cx='278' cy='46' r='2.6'/%3E%3Ccircle cx='322' cy='88' r='2.2'/%3E%3Ccircle cx='362' cy='66' r='3'/%3E%3Ccircle cx='340' cy='138' r='2.2'/%3E%3Ccircle cx='196' cy='214' r='2.2'/%3E%3Ccircle cx='250' cy='244' r='2.9'/%3E%3Ccircle cx='304' cy='218' r='2.2'/%3E%3Ccircle cx='346' cy='258' r='2.6'/%3E%3Ccircle cx='58' cy='256' r='2.2'/%3E%3Ccircle cx='104' cy='228' r='2.6'/%3E%3Ccircle cx='154' cy='264' r='2.2'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.9'%3E%3Ccircle cx='98' cy='88' r='1'/%3E%3Ccircle cx='340' cy='138' r='1'/%3E%3Ccircle cx='250' cy='244' r='1'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 66% 22%,rgba(255,255,255,.85),transparent),radial-gradient(1.4px 1.4px at 82% 60%,#f6e8be,transparent),radial-gradient(1px 1px at 40% 72%,rgba(200,180,255,.9),transparent);
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(232,201,122,.14), transparent 55%),
    linear-gradient(160deg,#15123a 0%,#0a0918 55%,#060512 100%);
}
/* ── 별/성도 레이어 ── */
body.astral::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--skyfield); background-repeat:repeat; opacity:1;
}
body.astral.night::before{ opacity:.85; animation:astralTw 5.5s ease-in-out infinite alternate; }
@keyframes astralTw{0%{opacity:.6}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){ body.astral::before{animation:none;} }

/* ── 등급 액센트 (낮/밤 공통 · 별밤 base 뒤에 와서 우선) ── */
body.astral.grade-bronze  { --primary:#c07d33; --primary-light:#d89a55; --accent:#b07d20; --glow:rgba(201,140,60,.22); }
body.astral.grade-silver  { --primary:#6b7794; --primary-light:#8a95ad; --accent:#8a8fa0; --glow:rgba(150,162,190,.20); }
body.astral.grade-gold    { --primary:#c99a1c; --primary-light:#e0b23e; --accent:#c99a1c; --glow:rgba(224,176,52,.24); }
body.astral.grade-diamond { --primary:#0e9bc4; --primary-light:#3bbfe0; --accent:#2699b4; --glow:rgba(60,200,235,.22); }
body.astral.grade-black   { --primary:#e05f97; --primary-light:#f2a6c6; --accent:#c08a1e; --glow:rgba(232,110,168,.22); }

/* ========================= 헤더 (반투명) ========================= */
/* ⚠ header 에 backdrop-filter/transform/filter 금지!
   그러면 position:fixed 인 .mobile-menu 의 컨테이닝 블록이 header 로 바뀌어
   모바일 메뉴가 뷰포트가 아닌 헤더 기준으로 찌그러져 '안 열림/스크롤 안 됨' 버그 발생.
   → 블러 없이 불투명 배경만 사용한다. */
body.astral header{
  background:var(--topbar);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 14px rgba(80,60,140,.06);
}
body.astral .logo{ color:var(--text); }
body.astral .logo em{ color:var(--accent); }
body.astral .logo-icon{
  background:radial-gradient(circle at 32% 28%,var(--gold-2),var(--accent) 72%,#8a6a1c);
  color:#241a08; box-shadow:0 0 14px var(--glow), inset 0 0 8px rgba(255,255,255,.5);
}
body.astral nav#mainNav a{ color:var(--text); }
body.astral nav#mainNav a:hover{ color:var(--primary); }
body.astral .mega-panel{ background:var(--card); backdrop-filter:blur(16px); border:1px solid var(--border); }
body.astral .mega-item:hover{ background:var(--bg); }
body.astral .mega-head{ color:var(--primary); }
body.astral .point-badge{ background:var(--bg); border:1px solid var(--border); color:var(--accent); }
body.astral .header-user-link{ color:var(--text); }
/* [삭제] body.astral .header-user-grade{ color:var(--primary); } (v3.9)
   이유: astral이 style.css 뒤에 로드돼 이 줄이 style.css의 등급별 pill 글자색(흰/#333/금색 등)을
         전부 --primary(등급색)로 덮어써 → 배경과 같은 계열이 되어 글자가 묻혔음
         (게스트=보라on보라 안보임, 브론즈=갈색on갈색, 골드=금색on금색, 다이아=파랑on파랑).
   해결: 이 override를 제거해 style.css의 잘 대비된 등급별 색을 그대로 사용. [추가] 없음. */
body.astral .logout-btn{ color:var(--text-muted); }
body.astral .logout-btn:hover{ color:var(--primary); }
body.astral .session-timer{ color:var(--text-muted); border-color:var(--border); }
body.astral .hamburger span{ background:var(--primary); }
body.astral .mobile-menu{ background:var(--bg); border-left:1px solid var(--border); }
body.astral.night .mobile-menu{ background:#0f0d1c; }
body.astral .mobile-menu-user{ color:var(--text); }
/* 별자리(.mobile-constellation)는 항상 다크 배경 → .m-node 라벨은 원본 밝은색 유지(색 덮어쓰지 않음) */

/* ========================= 버튼 ========================= */
body.astral .btn-primary{ background:var(--primary-vivid,var(--primary)); color:var(--on-primary,#fff); }
body.astral .btn-primary:hover{ background:var(--primary-light); }
/* 전역: 골드 CTA(btn-accent)를 등급색으로 통일 (별점·장식 골드는 유지) */
body.astral .btn-accent{ background:linear-gradient(135deg,var(--primary-vivid,var(--primary)),var(--primary-light)); color:var(--on-primary,#fff); }
body.astral .btn-accent:hover{ filter:brightness(1.05); }
/* 현재 페이지 활성 메뉴 — 등급색으로 뚜렷하게 (기본 lavender 알약은 헤더에서 잘 안 보임) */
body.astral nav ul li a.active{
  color:var(--primary); font-weight:800;
  background:color-mix(in srgb, var(--primary) 12%, transparent);
}
body.astral nav ul li a.active::before{
  background:var(--primary);
  box-shadow:0 0 8px 2px color-mix(in srgb, var(--primary) 55%, transparent);
}
/* 메뉴 hover 별점도 등급색 (골드 잔재 제거) */
body.astral nav ul li a:hover::before{
  background:var(--primary);
  box-shadow:0 0 8px 2px color-mix(in srgb, var(--primary) 55%, transparent);
}
/* 상담사 찾기 메가패널: '전체 상담사 보기' 버튼 골드 → 등급색 */
body.astral .mega-all{ background:linear-gradient(135deg,var(--primary-vivid,var(--primary)),var(--primary-light)); color:var(--on-primary,#fff); }
/* 헤더 별자리 연결선 — 골드 잔재 제거, 등급색 톤으로 */
body.astral svg.nav-constellation line{ stroke:color-mix(in srgb, var(--primary) 26%, transparent); }
body.astral svg.nav-constellation line.lit{ stroke:var(--primary); stroke-width:1.6; }

/* ========================= 공지사항: 별 배지·강조 등급색 ========================= */
body.astral .ntcpub-badge{ background:linear-gradient(135deg,var(--primary-vivid,var(--primary)),var(--primary-light)); color:var(--on-primary,#fff); }
body.astral .ntcpub-shine{ background:linear-gradient(90deg,var(--primary) 0%,var(--primary-light) 30%,var(--primary) 50%,var(--primary-light) 70%,var(--primary) 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
body.astral .ntcpub-row-pinned{ background:linear-gradient(90deg, color-mix(in srgb,var(--primary) 10%,transparent), transparent 60%); }

/* 마이페이지 사이드바 활성 메뉴 — 등급색 틴트 (헤더 활성과 통일) */
body.astral .mypage-nav a.active{ background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }

/* 약관/정책: '현행' 배지·현행 행 등급색 */
body.astral .plcy-badge{ background:linear-gradient(135deg,var(--primary-vivid,var(--primary)),var(--primary-light)); color:var(--on-primary,#fff); }
body.astral .plcy-row-current{ background:linear-gradient(90deg, color-mix(in srgb,var(--primary) 10%,transparent), transparent 60%); }

/* 페이지네이션 박스 — 낮 화이트 / 밤 다크 (활성은 등급색) */
body.astral .page-item a, body.astral .page-item span{ background:#fff; border-color:var(--border); color:var(--text); }
body.astral.night .page-item a, body.astral.night .page-item span{ background:rgba(255,255,255,.05); color:var(--text); }
body.astral .page-item a:hover{ background:var(--bg); color:var(--primary); }
body.astral .page-item.gap span{ background:none; border:none; }
/* 활성 페이지 = 등급색 (위 .page-item span 규칙보다 특이도 높게) */
body.astral .page-item.active span{ background:var(--primary-vivid,var(--primary)); border-color:var(--primary-vivid,var(--primary)); color:var(--on-primary,#fff); font-weight:700; }

/* ========================= 상담방(화상/채팅) 헤더바 등급색 ========================= */
/* 방은 .tc-page 스코프에서 브라운 팔레트를 자체 정의. --primary/--accent만 astral 등급색으로 상속시켜
   방 안의 강조색(문구·버튼 등)을 등급색으로. (WebRTC 레이아웃/JS 불변, 색만) */
body.astral .tc-page{ --primary:inherit; --primary-light:inherit; --accent:inherit; }
/* 헤더바(.tc-head)는 .tc-page 로컬 변수 가림 문제를 피해 등급별로 직접 지정: 다크 → 등급색 */
body.astral.grade-guest   .tc-head{ background:linear-gradient(150deg,#17122e 0%,#6b4ddb 100%); }
body.astral.grade-bronze  .tc-head{ background:linear-gradient(150deg,#17122e 0%,#c07d33 100%); }
body.astral.grade-silver  .tc-head{ background:linear-gradient(150deg,#17122e 0%,#6b7794 100%); }
body.astral.grade-gold    .tc-head{ background:linear-gradient(150deg,#17122e 0%,#c99a1c 100%); }
body.astral.grade-diamond .tc-head{ background:linear-gradient(150deg,#17122e 0%,#0e9bc4 100%); }
body.astral.grade-black   .tc-head{ background:linear-gradient(150deg,#17122e 0%,#e05f97 100%); }
/* 상태화면(대기/호출/종료) 크림 배경 → 연한 등급 틴트 */
body.astral .tc-stage{ background:color-mix(in srgb, var(--primary) 5%, #ffffff); }
/* 골드 원/아바타/버튼 → 등급색 (색만) */
body.astral .tc-ava,
body.astral .tc-orbit,
body.astral .tc-pill-btn.gold{ background:linear-gradient(135deg,var(--primary-light),var(--primary-vivid,var(--primary))); color:var(--on-primary,#fff); }
/* 채팅 내 말풍선(내 메시지) 골드 → 등급색 */
body.astral .tc-line.me .tc-bub{ background:linear-gradient(135deg,var(--primary-light),var(--primary)); color:#fff; }
/* 채팅 메시지 영역 크림 → 연한 등급 틴트 */
body.astral .tc-body{ background:color-mix(in srgb, var(--primary) 5%, #ffffff); }
/* 전송 버튼 골드 → 등급색 */
body.astral .tc-send{ background:linear-gradient(135deg,var(--primary-light),var(--primary)); box-shadow:0 6px 16px -6px var(--glow); }
body.astral .tc-send svg{ fill:#fff; }
body.astral .btn-outline{ background:var(--card); border:2px solid var(--border); color:var(--primary); }
body.astral .btn-outline:hover{ background:var(--primary); color:#fff; }

/* 모바일 로그인/회원가입: 기본은 중립(테두리), 마우스 올리면 색 채워짐 (요청 반영) */
body.astral .mobile-login-buttons .btn{
  background:transparent; color:var(--primary); border:2px solid var(--border);
  transition:background .18s, color .18s, border-color .18s;
}
body.astral .mobile-login-buttons .btn:hover{
  background:var(--primary); color:#fff; border-color:var(--primary);
}

/* ========================= Hero ========================= */
body.astral .hero{
  background:linear-gradient(150deg,var(--primary),var(--accent));
  color:#fff;
}
body.astral .hero-title em{ color:#ffe9b8; }
body.astral .hero-stat-value{ color:#ffe9b8; }
body.astral .hero-promo-coin{ color:#ffe9b8; }

/* ========================= 섹션 ========================= */
/* index 의 인라인 background:#fff 섹션 → 투명 처리(천문도 배경 노출) */
body.astral section[style*="background:#fff"]{ background:transparent !important; }
body.astral .section-title{ font-family:var(--disp); color:var(--text); }
body.astral .cat-bar{ background:transparent; border-bottom:1px solid var(--border); }
body.astral .cat-link{ background:var(--card); border:1.5px solid var(--border); color:var(--text); }
body.astral .cat-link:hover,
body.astral .cat-link.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ========================= 상담사 카드 ========================= */
body.astral .counselor-card{
  background:var(--card); border:1px solid var(--border);
  backdrop-filter:blur(12px); box-shadow:var(--shadow);
}
body.astral .counselor-card:hover{ box-shadow:0 20px 44px -22px var(--glow); }
body.astral .c-card-img{
  background:radial-gradient(circle at 50% 40%,var(--glow),transparent 62%), var(--bg2);
}
body.astral .c-avatar{ color:var(--primary); }
body.astral .c-name{ color:var(--text); }
body.astral .c-price{ color:var(--primary); }
body.astral .c-price strong{ color:var(--accent); }

/* ========================= 등급 카드 ========================= */
/* 블랙 카드만 핑크골드로 (나머지는 style.css 고유 그라디언트 유지) */
body.astral .grade-card.black{
  background:radial-gradient(120% 120% at 22% 0%,rgba(236,134,176,.34),transparent 55%),
             linear-gradient(150deg,#f9cbe0,#e6a63e);
  color:#6e2a4a; border:1px solid rgba(223,160,54,.45);
  box-shadow:0 14px 30px -16px rgba(200,90,140,.4);
}

/* ========================= 푸터 ========================= */
body.astral footer{
  background:linear-gradient(180deg,transparent, color-mix(in srgb,var(--primary) 8%,transparent));
  border-top:1px solid var(--border); color:var(--text);
}
body.astral .footer-desc,
body.astral .footer-links a,
body.astral .footer-biz,
body.astral .footer-copy{ color:var(--text-muted); }
body.astral .footer-links a:hover{ color:var(--primary); }
body.astral .footer-logo{ color:var(--text); }
body.astral .footer-logo em{ color:var(--accent); }
body.astral .footer-head{ color:var(--text); font-weight:800; }

/* ========================= 인증(로그인 / 회원가입 공용) ========================= */
body.astral .auth-wrap{ background:transparent; }           /* astral 천문도 배경 노출 */
body.astral .auth-card{
  background:#fff; border:1px solid var(--border);
  box-shadow:0 20px 54px -22px var(--glow);
}
body.astral.night .auth-card{
  background:rgba(255,255,255,.045); backdrop-filter:blur(14px);
  box-shadow:0 22px 56px -22px rgba(0,0,0,.6);
}
body.astral .auth-title{ color:var(--primary); }
body.astral .auth-sub{ color:var(--text-muted); }
body.astral .form-label{ color:var(--text); }
body.astral .form-control{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
body.astral.night .form-control{ background:rgba(255,255,255,.05); color:var(--text); }
body.astral .form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.astral .form-control::placeholder{ color:color-mix(in srgb, var(--text) 42%, transparent); }
body.astral .divider{ color:var(--text-muted); }
body.astral .signup-guide-text{ color:var(--text-muted); }
body.astral .welcome-bonus{ background:var(--bg); color:var(--primary); border:1px solid var(--border); }
body.astral .login-remember{ color:var(--text-muted); }
body.astral .login-find-pwd{ color:var(--primary); font-weight:700; }
body.astral .pwd-toggle{ color:var(--text-muted); }
body.astral .pwd-toggle:hover{ color:var(--primary); }
body.astral .modal-box{ background:#fff; }
body.astral.night .modal-box{ background:#1b1830; border:1px solid var(--border); }
body.astral .modal-title{ color:var(--primary); }
body.astral .modal-step-info{ color:var(--text-muted); }

/* ── 회원가입 전용 보강 ── */
body.astral .agree-title{ color:var(--text); }
body.astral .login-guide{ color:var(--text-muted); }
body.astral.night .pwd-strength-bar{ background:rgba(255,255,255,.12); }
/* 경고/암호화 안내 박스 — 밤 모드 다크 변형(낮은 원본 크림 유지) */
body.astral.night .pwd-encrypt-warn{ background:rgba(245,158,11,.12); color:#f4d9a0; border-left-color:#e0a94a; }
body.astral.night .pwd-encrypt-warn strong{ color:#f6c86a; }
body.astral.night .pwd-encrypt-warn .warn-strong{ color:#ff9a8a; }
body.astral.night .agree-label.agree-encryption{ background:rgba(245,158,11,.12); }
body.astral.night .agree-label.agree-encryption .agree-sub{ color:#f0c78a; }
/* 가입 확인 모달 — 밤 모드 */
body.astral.night .signup-modal-card{ background:#1b1830; }
body.astral.night .modal-lead{ color:var(--text); }
body.astral.night .modal-warn-box{ background:rgba(239,68,68,.14); color:#f4b4b4; }
body.astral.night .modal-warn-box strong{ color:#ff9a9a; }
body.astral.night .modal-confirm-check{ background:rgba(255,255,255,.05); color:var(--text); }

/* ── 상담사 가입: 사업자 유무 세그먼트 토글 ── */
body.astral .biz-seg{ border:1px solid var(--border); }
body.astral .biz-seg-btn{ background:var(--card); color:var(--text-muted); }
body.astral .biz-seg-btn + .biz-seg-btn{ border-left:1px solid var(--border); }
body.astral .biz-seg-btn.is-on{ background:var(--primary); color:#fff; }

/* ========================= 오늘의 운세 (fortune.css 위 덮기) ========================= */
body.astral .ft-hero{ background:radial-gradient(1200px 300px at 50% -120px, var(--glow), transparent 70%); }
body.astral .ft-hero h1{ color:var(--primary); }
body.astral .ft-hero h1 em{ color:var(--accent); }
body.astral .ft-hero p{ color:var(--text-muted); }
body.astral .ft-card{ background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); }
body.astral.night .ft-card{ background:rgba(255,255,255,.05); backdrop-filter:blur(14px); }
body.astral .ft-form-title{ color:var(--primary); }
body.astral .ft-field > label{ color:var(--text-muted); }
body.astral .ft-seg{ background:var(--bg); border:1px solid var(--border); }
body.astral .ft-seg button{ color:var(--text-muted); }
body.astral .ft-seg button.on{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; box-shadow:0 4px 12px -4px var(--glow); }
body.astral .ft-input, body.astral .ft-select{ background:#fff; border:1px solid var(--border); color:var(--text); }
body.astral.night .ft-input, body.astral.night .ft-select{ background:rgba(255,255,255,.05); color:var(--text); }
body.astral .ft-input:focus, body.astral .ft-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); }
body.astral .ft-submit{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); box-shadow:0 10px 26px -10px var(--glow); }
body.astral .ft-hint{ color:var(--text-muted); }
/* 결과 뷰(회원) */
body.astral .ft-zodiac .zt, body.astral .ft-total .score, body.astral .ft-cat .cn,
body.astral .ft-lucky .it .v, body.astral .ft-chip, body.astral .ft-cta h3{ color:var(--primary); }
body.astral .ft-zodiac .zs, body.astral .ft-cat .cmsg,
body.astral .ft-lucky .it .k, body.astral .ft-cta p{ color:var(--text-muted); }
body.astral .ft-total .label, body.astral .ft-cat .cp,
body.astral .ft-stars, body.astral .ft-cat .cn i{ color:var(--accent); }
body.astral .ft-stars .off{ color:color-mix(in srgb,var(--text) 20%,transparent); }
body.astral .ft-cat, body.astral .ft-lucky .it, body.astral .ft-chip{ background:var(--bg); border:1px solid var(--border); }
body.astral .ft-bar{ background:var(--bg); }
body.astral .ft-bar > span{ background:linear-gradient(90deg,var(--accent),var(--primary)); }
body.astral .ft-cta{ background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 10%,transparent), var(--bg)); border:1px solid var(--border); }
body.astral .ft-cta a{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; }
body.astral .ft-share button{ background:#fff; border:1px solid var(--border); color:var(--primary); }
body.astral.night .ft-share button{ background:rgba(255,255,255,.05); }
body.astral .ft-share button:hover{ background:var(--bg); }
/* 게스트 잠금 커버(공용) — astral 톤 */
body.astral .guest-lock-cover{ background:rgba(20,16,42,.5); }
body.astral .guest-lock-cover .ic{ background:color-mix(in srgb,var(--primary) 20%,transparent); color:var(--primary); }
body.astral .guest-lock-cta .lk-login{ border-color:var(--primary); color:var(--primary); }
body.astral .guest-lock-cta .lk-signup{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; }

/* ========================= AI 사주 상담사 (ai-*) ========================= */
body.astral .ai-hero p{ color:var(--text-muted); }
body.astral .ai-card{ background:#fff; border:1.5px solid var(--border); box-shadow:var(--shadow); }
body.astral.night .ai-card{ background:rgba(255,255,255,.05); backdrop-filter:blur(14px); }
body.astral .ai-card label{ color:var(--text); }
body.astral .ai-card label small{ color:var(--text-muted); }
body.astral .ai-card input, body.astral .ai-card select{ background:#fff; border:1.6px solid var(--border); color:var(--text); }
body.astral.night .ai-card input, body.astral.night .ai-card select{ background:rgba(255,255,255,.05); color:var(--text); }
body.astral .ai-card input:focus, body.astral .ai-card select:focus{ border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent); }
body.astral .ai-card input::placeholder{ color:color-mix(in srgb,var(--text) 42%,transparent); }
body.astral .ai-hour-tip{ color:var(--text-muted); }
body.astral .ai-hour-tip b{ color:var(--accent); }
body.astral .seg{ background:var(--bg); border:1.6px solid var(--border); }
body.astral .seg-btn{ color:var(--text-muted); }
body.astral .seg-btn:hover{ color:var(--primary); }
body.astral .seg-btn.is-on{ background:var(--card); color:var(--text); outline:2px solid var(--primary); }
body.astral.night .seg-btn.is-on{ background:rgba(255,255,255,.12); color:#fff; }
body.astral .ai-card input:disabled{ background:var(--bg); }
body.astral .ai-read{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; box-shadow:0 6px 18px -6px var(--glow); }
body.astral .ai-newyear-btn{ background:transparent; border:1.6px solid var(--primary); color:var(--primary); }
body.astral .ai-newyear-btn:hover{ background:color-mix(in srgb,var(--primary) 12%,transparent); }
body.astral .ai-hint, body.astral .ai-note{ color:var(--text-muted); }
body.astral .ai-livebar .lv-meta{ color:var(--text-muted); }
body.astral .ai-inbar input{ background:#fff; border:1.6px solid var(--border); color:var(--text); }
body.astral.night .ai-inbar input{ background:rgba(255,255,255,.06); color:var(--text); }
body.astral .ai-chip{ border:1px solid var(--primary); color:var(--primary); }
body.astral .ai-send{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; }

/* ========================= 토정비결 (tj-*) ========================= */
body.astral .tj-hero h1{ color:var(--text); }
body.astral .tj-hero p{ color:var(--text-muted); }
body.astral .tj-card, body.astral .tj-sum, body.astral .tj-m{ background:#fff; border:1px solid var(--border); }
body.astral.night .tj-card, body.astral.night .tj-sum, body.astral.night .tj-m{ background:rgba(255,255,255,.05); }
body.astral .tj-f label{ color:var(--text-muted); }
body.astral .tj-f input, body.astral .tj-f select, body.astral .tj-nick{ background:#fff; border:1.4px solid var(--border); color:var(--text); }
body.astral.night .tj-f input, body.astral.night .tj-f select, body.astral.night .tj-nick{ background:rgba(255,255,255,.05); color:var(--text); }
body.astral .tj-f input:focus, body.astral .tj-f select:focus{ border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent); }

/* ========================= 콤보박스(select) 옵션 목록 대비 (v3.11) =========================
   [유지] 옵션 목록(native 팝업) 낮/밤 색만. 닫힌 박스는 기존 계열 규칙(색+네이티브 화살표) 그대로 둔다.
   [삭제] v3.10에서 넣었던 커스텀 화살표(appearance:none + background-image)와 일반 select 베이스 규칙 제거
          — 밤 모드에서 기존 background 숏핸드가 repeat를 리셋해 화살표가 가로로 타일링(체크마크처럼)되던 문제. */
/* 옵션 목록 낮/밤 대비 — 밤에 흰 팝업+밝은 글자로 안 보이던 문제 해결 */
body.astral select option{ background:#ffffff; color:#2a2540; }
body.astral.night select option{ background:#1d1836; color:#ece7fa; }
body.astral select option:disabled{ color:rgba(42,37,64,.45); }
body.astral.night select option:disabled{ color:rgba(236,231,250,.4); }

body.astral .tj-seg{ background:var(--bg); }
body.astral .tj-seg button{ color:var(--text-muted); }
body.astral .tj-seg button.is-on{ background:var(--card); color:var(--text); outline:2px solid var(--primary); }
body.astral.night .tj-seg button.is-on{ background:rgba(255,255,255,.12); color:#fff; }
body.astral .tj-go{ background:transparent; border:1.6px solid var(--primary); color:var(--primary); }
body.astral .tj-go:hover{ background:color-mix(in srgb,var(--primary) 12%,transparent); }
body.astral .tj-hint, body.astral .tj-disc{ color:var(--text-muted); }
body.astral .tj-gwa{ background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%,transparent), var(--bg)); border:1px solid var(--border); }
body.astral .tj-gwa .yr, body.astral .tj-gwa .ttl{ color:var(--accent); }
body.astral .tj-gwa .no{ color:var(--primary); }
body.astral .tj-gwa .lab, body.astral .tj-facts li{ color:var(--text); }
body.astral .tj-sum .t, body.astral .tj-m .tj-m-h{ color:var(--accent); }
body.astral .tj-sum .d, body.astral .tj-m .tj-m-d{ color:var(--text); }
body.astral .tj-year{ background:var(--bg); border:1px solid var(--border); color:var(--text); }
body.astral .tj-lock{ background:var(--card); border:1px dashed var(--accent); }
body.astral .tj-lock .lt{ color:var(--text-muted); }
body.astral .tj-lock .lt b{ color:var(--accent); }
body.astral .tj-unlock{ background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; }

/* ========================= 마이페이지 별자리 대시보드 ========================= */
/* 자체 테마 토글 숨김 → astral 헤더 낮/밤 토글로 일원화 */
body.astral .constellation-theme-toggle{ display:none; }
/* 무대 배경은 astral 본문 배경(천문도)이 비치도록 투명화 */
body.astral .constellation-stage{ background:transparent; }
/* 별자리 연결선 */
body.astral .constellation-lines .line{ stroke:color-mix(in srgb,var(--accent) 45%,transparent); }
/* 중앙 프로필 오브 (등급 astral 색 반영: 블랙=핑크골드) */
body.astral .constellation-center{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; box-shadow:0 0 40px -6px var(--glow), inset 0 0 30px rgba(0,0,0,.15);
}
body.astral .center-aura{ background:radial-gradient(circle, color-mix(in srgb,var(--primary) 32%,transparent) 0%, transparent 70%); }
/* [수정] 중앙 오브 글자 — 밝은 등급색(기본/게스트·골드·다이아 등) 위에서 흰글자가 묻히지 않도록
   강한 다크 그림자로 대비 확보. 오브 배경이 --primary→--accent 그라데이션이라 색 뒤집기보다 그림자가 안전.
   [삭제] 기존 center-nickname/grade/point 색 지정 → [추가] 아래(그림자 포함)로 대체. */
body.astral .center-nickname{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.5); }
body.astral .center-grade, body.astral .center-point{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.5); }
/* 메뉴 카드 */
body.astral .constellation-card{ background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); }
body.astral.night .constellation-card{ background:rgba(255,255,255,.06); backdrop-filter:blur(12px); }
body.astral .card-title{ color:var(--primary); }
body.astral .card-sub{ color:var(--text-muted); }
/* ── 밤 모드 카드 글자 대비 보정 (v3.7) ──
   [추가] body.astral.night .card-title / .card-sub — 특이도 (0,3,1)로
          기존 body.astral .card-title/.card-sub (0,2,1) 및
          style.css의 .constellation-stage.theme-light .card-sub (0,3,0)까지 이겨서
          밤에는 항상 이 규칙이 적용됨.
   이유: 밤엔 카드가 rgba(255,255,255,.06) 어두운 반투명 + 뒤에 보라 글로우가 깔려
         제목(등급 --primary)·서브(--text-muted 흐린 라벤더/또는 theme-light 잔존 시 갈색)가 묻힘.
   해결: 제목은 등급 밝은톤(--primary-light)을 흰색쪽으로 섞어 '등급색 유지 + 대비 보장'(반대밝기로 뒤집힘),
         서브는 덜 보라·밝은 회백으로. [삭제] 없음(낮 규칙 그대로 둠). */
body.astral.night .card-title{ color:color-mix(in srgb, var(--primary-light) 78%, #fff); }
body.astral.night .card-sub{ color:rgba(236,231,250,.82); }
/* ── 밤 모드 hover 대비 보정 (v3.8) ──
   [추가] body.astral.night .constellation-card:hover — 특이도 (0,4,1)로
          style.css의 .constellation-stage.theme-light .constellation-card:hover (0,4,0, 흰 배경)를 이김.
   문제: 밤에 카드에 마우스를 올리면 theme-light hover가 카드를 흰색으로 바꿔,
         위 밝은 제목/서브 글자가 흰 배경에 묻혀 안 보였음.
   해결: hover도 어두운 반투명(.12)로 유지 → 밝은 글자 그대로 읽힘. 글자색은 위 규칙이 유지되므로 재지정 불필요.
   [삭제] 없음. */
body.astral.night .constellation-card:hover{ background:rgba(255,255,255,.12); border-color:var(--primary-light); box-shadow:0 12px 30px -8px var(--glow); }
body.astral .card-glow{ background:radial-gradient(circle at center, color-mix(in srgb,var(--accent) 25%,transparent) 0%, transparent 70%); }

/* ========================= 상담사 찾기: 선택상태를 등급색(primary)으로 통일 ========================= */
/* 방식 칩(궁합 등)·페이지당(12/24/48) 선택색이 골드(--accent)라 등급색과 안 맞던 것 → --primary */
body.astral .cf-row-method .cf-chip.active{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 6px 16px -6px var(--glow);
}
body.astral .cr-size-btn.active{ background:var(--primary); color:#fff; }

/* ========================= 게시판: 선택상태를 등급색(primary)으로 통일 ========================= */
/* 필터 탭(전체/고민상담/…)·현재 페이지 번호가 골드(--accent)라 등급색과 안 맞던 것 → --primary */
body.astral .brdc-chip.on{ background:var(--primary); border-color:transparent; color:#fff; }
body.astral .brdc-paging span.now{ background:var(--primary); border-color:transparent; color:#fff; }
body.astral .brdc-paging a:hover{ background:var(--primary); border-color:transparent; color:#fff; }

/* ========================= 낮/밤 토글 버튼 ========================= */
body.astral .astral-theme-btn{
  width:38px; height:38px; flex-shrink:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:.95rem;
  background:var(--card); border:1px solid var(--border); color:var(--accent);
  transition:.18s;
}
body.astral .astral-theme-btn:hover{ transform:translateY(-1px); box-shadow:0 0 16px var(--glow); }
body.astral.night .astral-theme-btn{ color:var(--gold-2); }

/* 모바일 낮/밤 토글 (모바일 메뉴 상단 · 데스크톱에선 숨김) */
.astral-theme-mini{ display:none; }
body.astral .astral-theme-mini{
  display:none; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:13px; font-family:inherit; font-weight:800; font-size:.92rem; cursor:pointer;
  color:var(--accent); background:var(--bg); border:none; border-bottom:1px solid var(--border);
}
@media(max-width:768px){ body.astral .mobile-menu.open .astral-theme-mini{ display:flex; } }
@media(max-width:1200px){ body.astral .mobile-menu.open .astral-theme-mini{ display:flex; } }