/* ════════════════════════════════════════════════════════════════════
   menu.css — 전체 메뉴 / MY MENU (2026-09-16 [전체 메뉴 리디자인])
   ────────────────────────────────────────────────────────────────────
   새 팔레트를 만들지 않는다 — 값은 전부 today-ui.css 의 --tw-* 토큰이다
   (my-fate.html·history.html·destiny-box.html 과 같은 디자인 시스템, 지시 §0·§13).
   HERO 에는 대형 캐릭터 일러스트·꽃 배경을 넣지 않는다(§4·§6·§17 — 절제된 카드 하나).
   ════════════════════════════════════════════════════════════════════ */

body.today-warm.menu-page .tw-main{ max-width:420px; gap:18px; }

/* ── 헤더 — 아주 간결하게(§4). [‹ 마을] 알약은 back-home.js 가 이미 좌상단에 띄운다. ── */
.menu-head{ padding:2px 4px 0; text-align:left; }
.menu-title{
  margin:0; color:var(--tw-ink); font-size:1.28rem; font-weight:800; letter-spacing:-.01em;
}
.menu-head-sub{ margin:4px 0 0; color:var(--tw-ink2); font-size:.8rem; line-height:1.4; }

/* ── HERO — 나의 운명(§5·§6). 절제된 카드: warm ivory + 샴페인 골드 테두리 +
   아주 옅은 라벤더/골드 광채 하나. 텍스트 가독성을 가리지 않는다. ── */
.menu-row-pick{ display:inline-flex; align-items:center; gap:2px; margin-top:2px; font-size:.72rem; line-height:1.2; color:var(--tw-ink2); font-weight:700; }
.menu-row-pick svg{ width:12px; height:12px; flex:none; }
.menu-hero{
  position:relative; overflow:hidden; display:block; width:100%;
  margin:0; padding:18px 20px 16px; text-align:left; cursor:pointer;
  border:1px solid var(--tw-gold); border-radius:var(--tw-r-lg);
  background:var(--tw-surface); box-shadow:var(--tw-sh2);
  -webkit-tap-highlight-color:transparent; font-family:inherit;
}
.menu-hero:active{ background:var(--tw-surface2); }
.menu-hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 88% -10%, rgba(233,209,159,.55), transparent 62%),
    radial-gradient(50% 70% at -6% 110%, rgba(201,183,232,.28), transparent 60%);
}
/* 아주 작은 초승달 하나(§4 허용 모티프 1~2개 중 하나) — 장식은 interaction 보다 뒤(z-index) */
.menu-hero-moon{
  position:absolute; top:14px; right:18px; z-index:0; width:26px; height:26px;
  background:radial-gradient(circle at 62% 38%, transparent 0 40%, var(--tw-gold-lt) 41% 100%);
  border-radius:50%; opacity:.55;
}
.menu-hero-top{
  position:relative; z-index:1; display:block;
  color:var(--tw-ink); font-size:.98rem; font-weight:800;
}
.menu-hero-stats{
  position:relative; z-index:1; display:block; margin-top:10px;
  color:var(--tw-ink2); font-size:.86rem; font-weight:600; line-height:1.5; word-break:keep-all;
}
/* 2026-09-16 2차 미세조정 — 3-column stat(숫자 크게 · 라벨 작게). 값이 하나도 없을 때만
   위 일반 텍스트(.menu-hero-stats 만)로 남는다 — 로직은 안 건드리고 표현만 바꿨다. */
.menu-hero-stats.menu-hero-row{ display:flex; gap:0; }
.menu-hero-stat{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:0 4px;
}
.menu-hero-stat + .menu-hero-stat{ border-left:1px solid rgba(139,114,184,.16); }
.menu-hero-stat b{ color:var(--tw-ink); font-size:1.22rem; font-weight:800; line-height:1.15; }
.menu-hero-stat small{ color:var(--tw-muted); font-size:.68rem; font-weight:700; }
.menu-hero-cta{
  position:relative; z-index:1; display:inline-block; margin-top:10px;
  color:var(--tw-gold-dp); font-size:.8rem; font-weight:700;
}

/* ── 섹션 제목 — 왼쪽 큰 라벨 + 오른쪽 옅은 보조 카피(§7 wireframe) ── */
.menu-sec{ margin:0; }
.menu-sec-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 0 8px 2px; color:var(--tw-ink); font-size:.92rem; font-weight:800;
}
.menu-sec-sub{ color:var(--tw-muted); font-size:.7rem; font-weight:600; }

/* ── 카드 — 공통 컴포넌트 가족(§18). HERO 만 약간 강조, 나머지는 이 한 벌 ── */
.menu-card{
  background:var(--tw-surface); border:1px solid var(--tw-line); border-radius:var(--tw-r-md);
  box-shadow:var(--tw-sh); overflow:hidden;
}
.menu-card + .menu-card{ margin-top:10px; }
/* 2026-09-16 2차 미세조정 — [설정 · 계정]이 [나의 기록]보다 시각적으로 커 보이지 않게
   행 높이·타일 크기만 줄인다(정보·기능은 그대로, §2 "vertical density를 미세 조정") */
.menu-card-compact .menu-row{ min-height:46px; padding:6px 14px; gap:10px; }
.menu-card-compact .menu-tile{ width:32px; height:32px; border-radius:10px; }
.menu-card-compact .menu-tile svg{ width:18px; height:18px; }
.menu-card-compact .menu-row-title{ font-size:.82rem; }
.menu-card-compact .menu-row-desc{ font-size:.68rem; }

/* ── 행(row) — [아이콘 타일] [제목/설명] [›] ── */
.menu-row{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:60px; padding:9px 14px; margin:0;
  border:0; border-bottom:1px solid var(--tw-line); background:none;
  text-align:left; font-family:inherit; cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
a.menu-row{ color:inherit; }
.menu-card > .menu-row:last-child{ border-bottom:0; }
.menu-row:active{ background:rgba(139,114,184,.07); }

/* 아이콘 타일 — 모든 타일 동일 크기·라운드·그림자 무게(§14) */
.menu-tile{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(139,114,184,.10);
}
.menu-tile svg{ width:22px; height:22px; display:block; }
.menu-tile.t-gold{ background:var(--tw-gold-lt); }
.menu-tile.t-lavender{ background:var(--tw-lavender-lt); }
.menu-tile.t-peach{ background:var(--tw-apricot-lt); }
.menu-tile.t-pink{ background:var(--tw-softpink); }
.menu-row{ position:relative; }

.menu-row-body{ flex:1 1 auto; min-width:0; }
.menu-row-title{ display:block; color:var(--tw-ink); font-size:.86rem; font-weight:700; word-break:keep-all; }
.menu-row-desc{ display:block; margin-top:1px; color:var(--tw-muted); font-size:.72rem; font-weight:500; word-break:keep-all; }
.menu-row-arrow{ flex:0 0 auto; color:var(--tw-muted); font-size:1.05rem; opacity:.7; }
.menu-row-value{ flex:0 0 auto; color:var(--tw-muted); font-size:.76rem; font-weight:600; }

/* 스위치(배경음·효과음·알림) — 파스텔 안에서만, 값을 새로 고르지 않는다 */
.menu-sw{
  flex:0 0 auto; min-width:52px; min-height:30px; padding:0 12px;
  border:1px solid var(--tw-line-str); border-radius:999px;
  background:var(--tw-surface2); color:var(--tw-muted);
  font-weight:700;font-size:15px;line-height:1;font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.menu-sw.on{ background:var(--tw-lavender-lt); border-color:var(--tw-lavender); color:var(--tw-lavender-dp); }

/* 2026-09-29 [상단 HUD 개편] 마을 시간대 칩 [자동][낮][노을][밤] — 스위치(.menu-sw)와 같은 재질·같은 [켜짐] 색.
   제목 행 바로 아래 한 줄로 붙는다(제목 행의 아래 선을 걷고 이 줄이 선을 갖는다). 칩 높이 36 + 위아래 여백으로 탭 44. */
.menu-row:has(+ .menu-chip-row){ border-bottom:0; min-height:0; padding-bottom:2px; }
.menu-chip-row{ display:flex; gap:8px; padding:4px 14px 12px 66px; border-bottom:1px solid var(--tw-line); }
.menu-chip{
  flex:1 1 0; min-width:0; min-height:36px; padding:0 4px;
  border:1px solid var(--tw-line-str); border-radius:999px;
  background:var(--tw-surface2); color:var(--tw-muted);
  font-weight:700;line-height:1;font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; position:relative;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.menu-chip::after{ content:""; position:absolute; inset:-4px 0; }
.menu-chip.on{ background:var(--tw-lavender-lt); border-color:var(--tw-lavender); color:var(--tw-lavender-dp); }

/* ── 이용 안내 — 낮은 시각 우선순위(§12): 타일 없이 작은 글자만 ── */
.menu-card-plain .menu-row{ min-height:46px; padding:0 14px; gap:0; }
.menu-card-plain .menu-row-title{ font-size:.8rem; font-weight:600; }
.menu-card-plain .menu-row-arrow{ font-size:.95rem; }
/* 2026-09-16 2차 미세조정 §4 — [이용 안내] 안 옅은 구분선. 새 제목 없이 두 무리만 가른다 */
.menu-divider{ height:8px; background:var(--tw-bg); border-bottom:1px solid var(--tw-line); }
.menu-plain-ver{
  display:flex; align-items:center; justify-content:space-between;
  min-height:44px; padding:0 14px; color:var(--tw-muted); font-size:.76rem; font-weight:600;
}
.menu-plain-ver b{ color:var(--tw-ink2); font-weight:700; }

/* ── 계정 카드 — village-account.js 의 실제 로그인 위젯(구글/카카오)을 그대로 담는 그릇 ── */
.menu-card-account{ margin-top:10px; padding:10px 14px 4px; }
.menu-account-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.menu-account-title{ color:var(--tw-ink); font-size:.8rem; font-weight:700; }
.menu-account-note{ margin:6px 2px 10px; color:var(--tw-muted); font-size:.72rem; line-height:1.5; }
.menu-account-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; }
.menu-account-go{
  flex:0 0 auto; min-height:32px; padding:0 14px; border:1px solid var(--tw-line-str);
  border-radius:999px; background:var(--tw-surface2); color:var(--tw-ink2);
  font-weight:700;font-size:15px;line-height:1;font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.menu-account-slot{ display:flex; flex-direction:column; gap:6px; align-items:stretch; margin-bottom:6px; }
/* village-account.js 카카오버튼그리기() 가 만드는 실제 버튼 클래스 — Kakao 공식 색(§16, 임의 변경 금지) */
.vg-account-kakao-btn{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  min-height:44px; padding:0 14px; border:0; border-radius:var(--tw-r-sm);
  background:#FEE500; color:#191600; font-weight:700;font-size:15px;line-height:1;font-family:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vg-account-kakao-btn:active{ background:#F6DC00; }
.menu-choice-row{ display:flex; gap:8px; }
.menu-choice-row button{
  flex:1 1 0; min-height:38px; border:1px solid var(--tw-line-str); border-radius:999px;
  background:var(--tw-surface2); color:var(--tw-ink2); font-weight:700;font-size:15px;line-height:1;font-family:inherit; cursor:pointer;
}
.menu-choice-row button:active{ background:var(--tw-lavender-lt); }

/* ── 내 정보(생년월일) 펼침 폼 — village-onboarding.css 의 .vg-onb-* 를 그대로 쓴다 ── */
.menu-profile-form{ padding:0 14px 14px; }

@media (min-width:600px){
  body.today-warm.menu-page .tw-main{ max-width:480px; }
}

/* ═══ WO-24(2026-10-03) — 두 보기: 마을 생활(기본) · 설정(?view=settings). 같은 menu.html · 구역만 가른다 ═══ */
body.menu-s2-pending:not(.s2set-on) #menu-settings .menu-tile, body.menu-s2-pending:not(.s2set-on) #menu-account .menu-tile, body.menu-s2-pending:not(.s2set-on) #menu-legal .menu-tile{ visibility:hidden; }
body.menu-view-life .menu-sec[aria-label="설정 · 계정"], body.menu-view-life .menu-sec[aria-label="이용 안내"]{ display:none; }
body.menu-view-settings #menu-hero, body.menu-view-settings #s2v3-grid,
body.menu-view-settings .menu-sec[aria-label="마을 안내"], body.menu-view-settings .menu-sec[aria-label="친구 초대"], body.menu-view-settings .menu-sec[aria-label="나의 기록"]{ display:none !important; }
/* 아래에서 고르는 시트(화면 비율 · 마을 시간대) */
.menu-sheet-scrim{ position:fixed; inset:0; z-index:9650; display:flex; align-items:flex-end; justify-content:center; background:rgba(40,28,20,.45); }
.menu-sheet{ width:100%; max-width:480px; box-sizing:border-box; padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background:#fffaf2; border-radius:24px 24px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.25); }
.menu-sheet-title{ margin:0 0 10px; font-size:18px; font-weight:800; color:#3a2f2a; }
.menu-sheet-list{ display:flex; flex-direction:column; gap:8px; }
.menu-sheet-opt{ min-height:48px; padding:0 16px; border:1.5px solid #e6d3b8; border-radius:14px; background:#fff; color:#3a2f2a; font-weight:600;font-size:16px;line-height:1;font-family:inherit; font-family:inherit; text-align:left; cursor:pointer; }
.menu-sheet-opt.on{ border-color:#8b72b8; background:#efe9fa; color:#4a3a78; font-weight:800; }
.menu-sheet-close{ margin-top:10px; width:100%; min-height:48px; border:0; border-radius:14px; background:#f1e6d3; color:#5a3320; font-weight:800;font-size:16px;line-height:1;font-family:inherit; font-family:inherit; cursor:pointer; }