/* 첫 화면·메뉴 디자인 (10/14) — 2026-10-31 구조 정리로 index.html <style> 888~935줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ==== 2026-10-14 디자인 결정 반영 (시안: Design 캔버스 "Mycon 첫 화면 시안" N·O·P·Q~U) ==== */
/* 색: 밝은 미색 바탕 + 밝은 메뉴 막대 (어두운 화면에서는 기존 어두운 막대 유지) */
:root{--bg:#f7f4ee;--surface:#fff;--ink:#3a3631;--muted:#76706a;--line:#ebe5da;--accent:#3a3631;
  --chrome-bg:#fffdf8;--chrome-ink:#3a3631;--chrome-muted:#7a7369;--chrome-line:#ebe5da;--chrome-accent:#3a3631;--chrome-hover:rgba(60,50,30,.05);
  --field:#fbf9f5;--field-line:#e4ded3;--seg:#f1ece3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101010;--surface:#1b1b1b;--ink:#f0f0f0;--muted:#9a9a9a;--line:#2a2a2a;--accent:#d9d9d9;
  --chrome-bg:#1c1c1c;--chrome-ink:#f5f5f5;--chrome-muted:#a3a3a3;--chrome-line:rgba(255,255,255,.1);--chrome-accent:#f0f0f0;--chrome-hover:rgba(255,255,255,.06);
  --field:#141414;--field-line:#2c2c2c;--seg:#242424}}
:root[data-theme="dark"]{--bg:#101010;--surface:#1b1b1b;--ink:#f0f0f0;--muted:#9a9a9a;--line:#2a2a2a;--accent:#d9d9d9;
  --chrome-bg:#1c1c1c;--chrome-ink:#f5f5f5;--chrome-muted:#a3a3a3;--chrome-line:rgba(255,255,255,.1);--chrome-accent:#f0f0f0;--chrome-hover:rgba(255,255,255,.06);
  --field:#141414;--field-line:#2c2c2c;--seg:#242424}
.drawer{box-shadow:2px 0 10px rgba(60,50,30,.06)}
body.h-mode .drawer{box-shadow:0 2px 8px rgba(60,50,30,.06)}
@media (hover:hover){.drawer-toggle:hover,.drawer nav a:hover{background:var(--chrome-hover)}}

/* 메뉴 색 (오늘 운세 빨강 · 사주 풀이 파랑 · 테마 사주 초록 · 1:1 감정 황금) */
.t-today,.drawer nav a[data-view="today"]{--g1:var(--today-icon-top);--g2:var(--today-icon-mid);--g3:var(--today-icon-bot);--gs:var(--today-icon-shadow)}
.t-saju,.drawer nav a[data-view="saju"]{--g1:var(--saju-icon-top);--g2:var(--saju-icon-mid);--g3:var(--saju-icon-bot);--gs:var(--saju-icon-shadow)}
.t-theme,.drawer nav a[data-view="theme"]{--g1:var(--theme-icon-top);--g2:var(--theme-icon-mid);--g3:var(--theme-icon-bot);--gs:var(--theme-icon-shadow)}
.t-counsel,.drawer nav a[data-view="counsel"]{--g1:var(--counsel-icon-top);--g2:var(--counsel-icon-mid);--g3:var(--counsel-icon-bot);--gs:var(--counsel-icon-shadow)}

/* 첫 화면: 메뉴 막대 없이 아이콘 4개 */
body.at-home .drawer,body.at-home .scrim{display:none}
body.at-home .page-body{padding:0}
body.at-home #page-title{display:none}
#page-title{display:none} /* 카드 밖 큰 제목 없앰: 모든 화면 (테마 사주 10/15 → 오늘 운세·사주 풀이·1:1 감정 19:09 → 이용 안내·지첩함 19:11 사용자 요청) */
.home-view.active{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);padding:32px 8px}
.home-copy{margin:0;text-align:center;font-size:22px;font-weight:600;line-height:1.45;letter-spacing:-.2px;color:var(--muted);color:#4f4a43}
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;width:100%;max-width:340px;justify-items:center}
.home-tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:#45413b;-webkit-tap-highlight-color:transparent}
.home-icon{position:relative;overflow:hidden;width:108px;height:108px;border-radius:30px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),inset 0 -6px 10px rgba(0,0,0,.25),0 6px 14px var(--gs);transition:transform .12s ease}
.home-icon::before{content:"";position:absolute;left:4%;right:4%;top:3%;height:48%;border-radius:27px 27px 6px 6px;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.22) 100%)}
.home-icon::after{content:"";position:absolute;left:12%;right:12%;bottom:3%;height:18%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.35),rgba(255,255,255,0) 70%)}
.home-icon svg{position:relative;width:58px;height:58px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.home-tile:active .home-icon{transform:scale(.96)}
.home-tile:focus-visible{outline:none}.home-tile:focus-visible .home-icon{outline:3px solid var(--ink);outline-offset:3px}
.home-name{font-size:16px;font-weight:600;line-height:1.3}
.home-desc{font-size:12px;line-height:1.3;color:#76706a;margin-top:-6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home-copy,:root:not([data-theme="light"]) .home-tile{color:var(--ink)}:root:not([data-theme="light"]) .home-desc{color:var(--muted)}}
:root[data-theme="dark"] .home-copy,:root[data-theme="dark"] .home-tile{color:var(--ink)}:root[data-theme="dark"] .home-desc{color:var(--muted)}
@media (orientation:landscape) and (max-height:560px){.home-view.active{gap:24px;padding:20px 8px}.home-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:600px;gap:16px}.home-copy{font-size:19px}}
@media (max-height:640px){.home-view.active{gap:32px}.home-icon{width:92px;height:92px;border-radius:26px}.home-icon svg{width:50px;height:50px}.home-grid{gap:24px 20px}}

/* 메뉴 레이어: 방향 전환 버튼 없앰 (세로 화면 = 위쪽, 가로 화면 = 왼쪽 자동). 지금 메뉴는 아이콘만 그 메뉴 색 */
.orient-item{display:none!important}
.drawer nav a[aria-current="page"]{box-shadow:none!important;background:transparent;color:var(--chrome-ink);font-weight:600}