/* ================================================
   styles_mobile.css — 자미두수 모바일 명반 전용 CSS
   PC styles_gemini.css 기반으로 재설계
   색상체계: 라이트 테마 (흰 카드 + 연보라 테두리 + 밝은 회색 배경)
   별 배치: writing-mode vertical-rl 세로쓰기 (PC와 동일)
   폰트: 모바일 최적화 축소 적용
   ================================================ */

/* ---------- CSS 변수 (PC와 동일한 색상 체계) ---------- */
:root {
  --bg-app: #f8f9fb;
  --primary-purple: #8b7ab8;
  --bg-palace: #ffffff; /* 가독성을 위해 불투명 배경 적용 */
  --bg-center: #faf8ff; /* 대운 박스의 배경색처럼 기존 f0edff 보다 연하고 밝은 색상으로 수정 */

  /* 모드 색상 */
  --basic-primary: #9fa8b7;
  --daehan-primary: #e2c29f;
  --yunyeon-primary: #48c9b0;
  --sohan-primary: #a8c5da;
  --daehan-dark: #c59d71;
  --yunyeon-dark: #209384;

  /* 별 색상 — PC 패치 적용 (대비 강화) */
  --star-jusung: #7b4f9d; /* PC --star-jusung 그대로 이식 */
  --star-gilsung: #3178c6; /* PC --star-gilsung 동일 */
  --star-salsung: #d32f2f; /* PC --star-salsung 동일 */
  --star-zabseong: #555555; /* PC --star-zabseong 동일 */
  --star-special: #7b4f9d;

  --star-daehan: #c9a870;
  --star-daehan-light: #e5d4b3;
  --star-yunyeon: #51b8a8;
  --star-yunyeon-light: #d0ede8;
  --star-yuwol: #df8f8f;
  --star-yuwol-light: #f5dede;

  /* 사화 */
  --sahwa-rok: #6dcf7a;
  --sahwa-gwon: #4a90e2;
  --sahwa-gwa: #c9a870;
  --sahwa-gi: #e57373;

  --border-palace: rgba(139, 122, 184, 0.28);
  --border-divider: rgba(139, 122, 184, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);

  --text-main: #333;
  --text-dim: #888;
  --accent: #8b7ab8;
}

/* ---------- 리셋 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: var(--bg-app);
  color: var(--text-main);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  overflow-x: hidden; /* 가로 스크롤 방지 */
  overflow-y: auto; /* 세로 스크롤 허용 (푸터 및 DB 기질카드 노출) */
  touch-action: manipulation;
  -webkit-font-smoothing: auto; /* 흐림 방지용 auto 적용 */
  -moz-osx-font-smoothing: auto;
}

/* ---------- 앱 컨테이너 ---------- */
.app-container {
  width: 100%;
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 66px; /* 상단 고정 내비게이션 바 공간 확보 (기존 10px + 56px) */
  background: var(--bg-app);
}

/* ════ NAV ════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 56px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-divider);
}
.nav-logo {
  font-family: "Noto Serif KR", serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-links {
  display: flex;
  gap: 0.8rem;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-decoration: none;
}
.nav-links .nav-cta {
  padding: 0.35rem 0.8rem;
  font-size: 0.65rem;
  background: var(--primary-purple);
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none;
}

.chart-container {
  width: 100%;
  max-width: 600px;
  /* height 100% 제거하고 내용물에 맞게 혹은 grid aspect-ratio 에 따르게 함 */
  height: auto;
  flex-shrink: 0;
  padding: 0 5px; /* 좌우 살짝 여백 */
}

/* ==========================================
   PALACE GRID (4×4)
   ========================================== */
.palace-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100%;
  /* 세로로 지나치게 길어지는 것을 방지 (가로 3 : 세로 4.2 비율 유지) */
  aspect-ratio: 3 / 4.4;
  height: auto;
  gap: 3px;
  padding: 3px;
  background: rgba(139, 122, 184, 0.1);
  border-radius: 8px;
}

/* ==========================================
   개별 궁 (카드)
   ========================================== */
.palace {
  background: var(--bg-palace);
  border-radius: 6px;
  border: 1px solid var(--border-palace);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: visible; /* 테두리가 잘리지 않도록 visible 설정 */
  position: relative;
  cursor: pointer;
  min-height: 0; /* 강제 높이 확장 방지 */
  min-width: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.palace:active,
.palace:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 12px rgba(139, 122, 184, 0.15);
  border-color: rgba(139, 122, 184, 0.4);
  z-index: 5;
}

/* ── 궁 클릭 하이라이트 및 삼방사정 테두리 효과 ── */
.palace.selected {
  border: 1.5px solid #9f8fca !important;
  box-shadow: 0 0 0 1px rgba(159, 143, 202, 0.3) !important;
  z-index: 20;
}

/* 삼합(Samhap) — 명궁 선택과 동일한 실선 (사용자 요청), 그림자 제거 */
.palace.samhap {
  border: 1.5px solid #9f8fca !important;
  box-shadow: none !important;
  z-index: 15;
}

/* 대궁(Daegung) — 명궁 선택과 동일한 실선 (사용자 요청), 그림자 제거 */
.palace.daegung {
  border: 1.5px solid #9f8fca !important;
  box-shadow: none !important;
  z-index: 15;
}

.palace-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 2px 3px;
}

/* ── 헤더 (궁 이름) ── */
.palace-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-divider);
  min-height: 16px;
  flex-shrink: 0;
}

.header-label {
  font-size: clamp(8px, 2.2vw, 11px);
  font-weight: 700; /* PC 패치 (600 -> 700) 반영 */
  line-height: 1;
  white-space: nowrap;
}

.header-label.basic {
  color: var(--palace-name);
  font-weight: 800; /* 600 -> 800 변경 */
}

.header-label.daehan {
  color: var(--star-daehan);
}

.header-label.yunyeon {
  color: var(--yunyeon-primary);
}

.header-label.sohan {
  color: var(--yunyeon-primary);
}

.header-label.yuwol {
  color: var(--star-yuwol);
}

.header-label.body-palace {
  color: var(--primary-purple);
  margin-left: auto; /* 신궁 구역 우측 끝으로 밀기 */
}

/* ── 바디 (별 영역) ── */
.palace-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  gap: 2px;
  padding: 4px 2px 1px; /* Increased top padding from 0px to 4px to lower the stars */
  overflow: visible;
  align-items: stretch;
  justify-content: flex-start;
}

/* ── 트랙 컨테이너 — CSS Grid로 2단 별 수평 정렬 보장 ── */
.star-tracks-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7개 트랙 균등 분할 */
  direction: rtl; /* track 0(grid-column:1)이 오른쪽 */
  justify-items: center; /* 각 셀 내 별 가운데 정렬 */
  align-items: start; /* 같은 row의 별들이 상단 정렬 → 수평 일치 */
  align-content: start; /* ★ 핵심: 행들이 상단에 붙어 row-gap만큼만 떨어지도록 */
  width: 100%;
  flex: 1;
  row-gap: 5px; /* 1단과 2단 사이 수직 간격 (사용자 요청 5px) */
  column-gap: 2px;
  overflow: visible; /* wrap 시 잘림 방지 */
}

/* 개별 트랙 — 균등 폭 분배로 일정한 간격 보장 */
.star-track {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap; /* 트랙 내부에선 한 줄(열)로 배치 */
  align-items: center;
  flex: 1 1 0; /* 7개 트랙이 컨테이너를 균등 분할 */
  min-width: 0; /* 축소 허용 */
  gap: 8px; /* 1단·2단 별 사이 간격 — 사화배지/묘왕함리와 간섭 방지 */
}

/* 비어있는 트랙 — 레이아웃 자리는 유지하되 내용만 숨김 (균등 정렬 보존) */
.star-track:empty {
  visibility: hidden;
  max-height: 0;
}

/* 별 컨테이너 (한 별 = 이름 글자들 + 사화배지) - flex item 역할 */
.star-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* Compress the gap between characters of the same star */
  direction: ltr;
  flex-shrink: 0;
}

/* ── 별 글자 ── */
.star-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(8.5px, 2.3vw, 10px); /* 하한선을 8px에서 8.5px로 살짝만 증가 */
  font-weight: 600; /* 별 글씨 두껍게 500 -> 600 */
  line-height: 1.2; /* 줄간격을 아주 살짝 좁힘 */
  letter-spacing: 0px; 
  color: var(--text-main);
  padding: 0;
}

.star-char.jusung {
  color: var(--star-jusung);
}

.star-char.gilsung {
  color: var(--star-gilsung);
}

.star-char.salsung {
  color: var(--star-salsung);
}

.star-char.zabseong {
  color: var(--star-zabseong);
}

.star-char.special {
  color: var(--star-gilsung); /* 천마/홍란/천희 → 길성 파랑 */
  font-weight: 700;
}

.star-char.daehan-star {
  color: var(--star-daehan);
  font-size: clamp(8.5px, 2.2vw, 10px);
}

.star-char.yunyeon-star {
  color: var(--star-yunyeon);
  font-size: clamp(8.5px, 2.2vw, 10px);
}

.star-char.sohan-star {
  color: var(--star-yunyeon);
  font-size: clamp(8.5px, 2.2vw, 10px);
}

.star-char.yuwol-star {
  color: var(--star-yuwol);
  font-size: clamp(8.5px, 2.2vw, 10px);
}

/* star-glyph: 개별 글자 블록 */
.star-glyph {
  display: block;
  line-height: 1.15;
  margin-bottom: 0px;
}

.star-glyph:last-child {
  margin-bottom: 0;
}

/* 묘왕함리 심볼 (모바일 간략 모드에서는 숨김, 전문가 모드에서만 표시) */
.star-status {
  font-size: clamp(6px, 1.6vw, 8px);
  color: #aaa;
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* ── 사화 배지 ── */
.sahwa-badge {
  writing-mode: horizontal-tb;
  font-size: clamp(6px, 1.5vw, 8px);
  font-weight: 600;
  padding: 0px 1px;
  border-radius: 2px;
  color: white !important;
  background: var(--star-jusung) !important;
  line-height: 1.1;
  display: inline-block;
  margin-top: 0px;
}

.sahwa-badge.daehan-sahwa {
  background: var(--star-daehan) !important;
}

.sahwa-badge.yunyeon-sahwa {
  background: var(--star-yunyeon) !important;
}

.sahwa-badge.yuwol-sahwa {
  background: var(--star-yuwol) !important;
}

/* ── 나이버튼 행 (좌우 간섭 방지를 위해 좌측 정렬 및 보호 배경) ── */
.age-btn-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Moved to left */
  width: 100%;
  gap: 1px;
  padding-left: 2px; /* Margin from the left border */
  padding-bottom: 1px;
  flex-shrink: 0;
  z-index: 10;
}

.yunyeon-age-btn,
.sohan-age-btn {
  font-size: clamp(6px, 1.5vw, 8px);
  font-weight: 800; /* PC 패치 (800) 반영 */
  color: var(--yunyeon-primary);
  background: rgba(255, 255, 255, 0.9); /* Protect against overlap */
  backdrop-filter: blur(2px);
  border: 1px solid var(--yunyeon-primary);
  border-radius: 6px;
  padding: 1px 3px;
  cursor: pointer;
  white-space: nowrap;
  font-family: "Noto Sans KR", sans-serif;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8); /* Glow to remain readable if overlapping */
}

.yuwol-age-btn {
  position: absolute;
  bottom: 0px;
  left: 2px;
  font-size: clamp(6px, 1.5vw, 8px);
  font-weight: 800; /* PC 패치 (800) 반영 */
  color: var(--star-yuwol);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  border: 1px solid var(--star-yuwol);
  border-radius: 6px;
  padding: 1px 3px;
  cursor: pointer;
  white-space: nowrap;
  font-family: "Noto Sans KR", sans-serif;
  z-index: 10;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* 대한 나이 버튼 */
.daeun-age-btn {
  font-size: clamp(7px, 1.8vw, 9px);
  font-weight: 800; /* PC 패치 (800) 반영 */
  color: #6b6b7e;
  background: white;
  border: 1px solid rgba(139, 122, 184, 0.4);
  border-radius: 12px; /* 둥근 박스 형태로 수정 */
  padding: 2px 8px; /* 패딩 약간 확대 */
  cursor: pointer;
  white-space: nowrap;
  font-family: "Noto Sans KR", sans-serif;
  min-width: 32px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 약간의 그림자 추가 */
}

.daeun-age-btn.daehan-active {
  background: var(--star-daehan);
  color: white;
  border-color: var(--star-daehan);
  font-weight: bold;
}

/* ── 푸터 ── */
.palace-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
  border-top: 1px solid var(--border-divider);
  min-height: 18px;
  flex-shrink: 0;
}

/* 12신 등 푸터 왼쪽 */
.footer-left {
  display: flex;
  gap: 1px;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  padding-left: 2px; /* Margin from the left */
}

/* 12신 세로쓰기 (전문가 모드에서 표시) */
.minor-star {
  display: none !important; /* 모바일 간략 버전에선 숨김 (사용자 요청) */
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(7px, 1.8vw, 9px);
  color: var(--text-dim);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
}

.minor-star.yunyeon {
  color: var(--yunyeon-primary);
  font-weight: 600;
}

.minor-star.yuwol {
  color: var(--star-yuwol);
  font-weight: 600;
}

/* 간략 모드 — 12신 숨김 (CSS 이중 보호) */
.footer-left:empty {
  visibility: hidden;
}

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.footer-right {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}

/* 간지 세로쓰기 */
.earthly-branch-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 700;
  color: var(--primary-purple);
  line-height: 1.3;
  letter-spacing: 1px;
}

/* 신궁 라벨 */
.body-palace-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(8px, 2.2vw, 10px); /* 12궁 간지와 동일하게 */
  font-weight: 700; /* 12궁 간지와 동일하게 */
  color: #d05c7a;
  line-height: 1.3; /* 12궁 간지와 동일하게 */
  letter-spacing: 1px; /* 12궁 간지와 동일하게 */
}

/* 소한/유년 명궁 라벨 */
.yunyeon-sohan-ming-label,
.sohan-yunyeon-ming-label {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: clamp(7px, 1.8vw, 9px);
  font-weight: 600;
  color: var(--primary-purple);
}

/* ==========================================
   중앙 영역
   ========================================= */
.center-area {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: var(--bg-center);
  border-radius: 6px;
  border: 1px solid var(--border-palace);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.center-area .lang-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 3px 6px;
  font-size: clamp(8px, 2.2vw, 10px);
  background: white;
  border: 1px solid rgba(139, 122, 184, 0.4);
  border-radius: 6px;
  color: var(--text-dim); /* 양력/음력과 동일하게 강제 지정 */
  font-weight: 400; /* 볼드체 해제 강제 지정 */
  cursor: pointer;
  z-index: 20;
}

/* ── 중앙 SVG ── */
.center-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999; /* 제일 최상단 레이어로 이동 (사용자 요청) */
  pointer-events: none;
  overflow: hidden; /* 가운데 영역 박스를 넘어가면 잘리도록 제한 (사용자 요청) */
}

.center-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 수직 중앙 정렬 추가 */
  gap: 4px; /* 3px -> 6px -> 4px 간격 축소하여 공간 절약 */
  padding: 4px 4px;
  width: 100%;
  height: 100%; /* 부모(center-area)를 꽉 채우도록 설정 */
  text-align: center;
  overflow: hidden;
}

/* ── 언어 변경 버튼 (중앙) ── */
.lang-btn {
  margin-top: 2px;
  padding: 3px 8px;
  background: white;
  border: 1px solid rgba(139, 122, 184, 0.4);
  border-radius: 6px;
  font-size: clamp(8px, 2.2vw, 10px);
  color: var(--text-dim); /* 양력/음력 정보 색상과 동일하게 수정 */
  font-weight: 400; /* 진하고 굵은 느낌 제거 */
  font-family: "Noto Sans KR", sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.lang-btn:active {
  background: #f0f0f0;
}

/* 이름 + 성별 그룹 */
.person-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 2px;
}

.person-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
}

.person-name-row h2 {
  font-size: clamp(12px, 3.5vw, 16px);
  font-weight: 800;
  color: #38305c; /* 사주 텍스트 값과 동일한 짙은 남보라색으로 수정 */
  letter-spacing: 1px;
}

.person-name-row .gender {
  font-size: clamp(8px, 2vw, 10px);
  padding: 3px 10px; /* 알약 형태 패딩 */
  border-radius: 12px; /* 충분히 둥근 모서리 */
  font-weight: 700;
  background: white; /* 웹버전처럼 기본 바탕 흰색 */
  border: 1px solid rgba(139, 122, 184, 0.4); /* 연보라색 테두리 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 은은한 입체감 */
}

/* 성별에 따른 텍스트 색상만 다르게 */
.gender.male {
  color: #3b7bc4;
}

.gender.female {
  color: #c04a68;
}

.birth-info-wrapper {
  margin-top: 4px;
}

.birth-info {
  font-size: clamp(9.5px, 2.6vw, 11.5px); /* 생년월일 폰트 확대 */
  color: var(--text-dim);
  line-height: 1.5;
}

/* 사주 및 대운 통합 영역/* ── 사주 테이블 (중앙) ── */
.saju-section {
  width: 95%; /* 기존 폭 유지 */
  max-width: 154px; /* 기존 최대폭 유지 */
  background: white;
  border-radius: 6px;
  padding: 4px 1px; /* 패딩 축소 */
  border: 1px solid rgba(139, 122, 184, 0.2);
  box-shadow: 0 1px 3px rgba(139, 122, 184, 0.15);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.saju-table {
  display: flex;
  justify-content: center;
  gap: 5px; /* 3px -> 5px로 수정하여 적당한 간격 확보 */
  width: 100%;
}

.saju-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.saju-header {
  font-size: clamp(7.5px, 2.2vw, 10px); /* 폰트 확대 (대한 폰트보다 크게) */
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 2px;
}

.saju-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.saju-value span {
  font-size: clamp(10.5px, 3.2vw, 15px); /* 사주 명식을 이전보다 더 크게 확대 */
  font-weight: 800; /* 조금 더 굵게 */
  color: #38305c; /* 더 짙은 색으로 강조 */
  line-height: 1.2;
}

/* ── 중앙 대운 리스트 ── */
.daeun-section {
  width: 100%;
  padding-top: 2px;
  border-top: 1px dashed rgba(139, 122, 184, 0.2);
}

.daeun-list {
  display: flex;
  width: 100%;
  flex-direction: row-reverse; /* 우측부터 나이 배열 (우->좌) */
  flex-wrap: nowrap; /* 2줄로 넘어가지 않고 무조건 한줄에 우겨넣기 */
  justify-content: space-between;
  gap: 1px; /* 극한으로 좁힘 */
  overflow: hidden; /* 간섭 방지 */
}

/* 중복 클래스 통합 및 단일 줄 맞춤용 압축 CSS */
.daeun-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* 아이템 내 간격 0 */
  background: linear-gradient(135deg, #faf8ff 0%, #f5f2fa 100%);
  border: 1px solid rgba(159, 143, 202, 0.25);
  border-radius: 4px;
  padding: 1px 1px; /* 패딩 최소화로 한 줄 보장 */
  min-width: 0; /* 박스 너비 완전축소 허용 */
  flex: 1 1 auto; /* 모자라면 넘치지 않고 꽉 맞게 유동 조절 */
}

.daeun-gz {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0px; /* 불필요한 공백 제거 */
  font-weight: 700;
  color: #5c4a7d;
  font-size: clamp(
    6.5px,
    1.6vw,
    9px
  ); /* 스마트폰 해상도에 맞춰 사주보다 작게 */
  line-height: 1.1;
}

.daeun-age {
  font-weight: bold;
  font-size: clamp(6px, 1.4vw, 7.5px); /* 사주보다 작게 */
  color: #8b7ab8;
  margin-top: 4px; /* 살짝 아래로 내림 */
  line-height: 1;
}

/* ── 전문가 모드 버튼 ── */
.expert-mode-btn {
  margin-top: 14px; /* 기존 3px에서 대폭 늘려 위아래 여백 균형 맞춤 */
  margin-bottom: 4px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #9f8fca 0%, #7668a6 100%);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: clamp(8px, 2.2vw, 10px);
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(102, 77, 159, 0.25);
}

.expert-mode-btn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px rgba(102, 77, 159, 0.2);
}

/* ── 모드 버튼 (전문가 모드 내부) ── */
.toggle-buttons.center-mode-controls {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
  margin-bottom: 2px;
  width: 90%;
  max-width: 300px;
}

.mode-btn {
  padding: 2px 5px;
  border-radius: 8px;
  font-size: clamp(7px, 1.8vw, 9px);
  cursor: pointer;
  border: 1px solid rgba(139, 122, 184, 0.4);
  color: var(--text-dim);
  background: white;
  font-family: "Noto Sans KR", sans-serif;
  transition: all 0.15s;
}

.mode-btn.active {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
  background: rgba(139, 122, 184, 0.1);
  font-weight: 700;
}

.mode-btn.daehan.active {
  border-color: var(--star-daehan);
  color: var(--star-daehan);
  background: rgba(201, 168, 112, 0.1);
}

.mode-btn.yunyeon.active {
  border-color: var(--yunyeon-primary);
  color: var(--yunyeon-primary);
  background: rgba(72, 201, 176, 0.1);
}

.mode-btn.sohan.active {
  border-color: var(--yunyeon-primary);
  color: var(--yunyeon-primary);
  background: rgba(72, 201, 176, 0.1);
}

.mode-btn.yuwol.active {
  border-color: var(--star-yuwol);
  color: var(--star-yuwol);
  background: rgba(223, 143, 143, 0.1);
}

/* 기본 명반 복귀 버튼 (가장자리 플로팅) */
.exit-expert-btn-floating {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-main);
  border: 1px solid rgba(139, 122, 184, 0.4);
  border-radius: 20px;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  font-family: "Noto Sans KR", sans-serif;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-expert-btn-floating:active {
  transform: scale(0.95);
  background: white;
}

/* ==========================================
   전문가 모드 오버레이 (90도 강제 회전)
   ========================================== */
.expert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-app);
  z-index: 9999;
  overflow: hidden;
}

.expert-inner {
  position: absolute;
  width: 100vh;
  height: 100vw;
  top: 100%;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: top left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expert-grid {
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(4, 25%);
}

/* ==========================================
   CSS Grid 배치 — 웹(styles_gemini.css)과 동일
   position 5(巳)가 좌상단(1,1)에서 시작, 반시계 회전
   ========================================== */

/* Row 1 (Top): 5, 6, 7, 8 */
.palace[data-position="5"] {
  grid-column: 1;
  grid-row: 1;
}
.palace[data-position="6"] {
  grid-column: 2;
  grid-row: 1;
}
.palace[data-position="7"] {
  grid-column: 3;
  grid-row: 1;
}
.palace[data-position="8"] {
  grid-column: 4;
  grid-row: 1;
}

/* Row 2: 4, [중앙], 9 */
.palace[data-position="4"] {
  grid-column: 1;
  grid-row: 2;
}
.palace[data-position="9"] {
  grid-column: 4;
  grid-row: 2;
}

/* Row 3: 3, [중앙], 10 */
.palace[data-position="3"] {
  grid-column: 1;
  grid-row: 3;
}
.palace[data-position="10"] {
  grid-column: 4;
  grid-row: 3;
}

/* Row 4 (Bottom): 2, 1, 0, 11 */
.palace[data-position="2"] {
  grid-column: 1;
  grid-row: 4;
}
.palace[data-position="1"] {
  grid-column: 2;
  grid-row: 4;
}
.palace[data-position="0"] {
  grid-column: 3;
  grid-row: 4;
}
.palace[data-position="11"] {
  grid-column: 4;
  grid-row: 4;
}

/* 중앙 영역 */
.palace-grid > .center-area {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

/* ==========================================
   한글/漢字 토글 버튼 — 모바일에서 숨김
   ========================================== */
.lang-toggle-btn,
#langToggleBtn {
  display: none !important;
}