/* 바탕·메뉴 색 묶음·메뉴 막대·화면 전환 — 2026-10-31 구조 정리로 index.html <style> 9~131줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ==========================================================================
   ★ 메뉴 색 묶음 (2026-10-15) — 메뉴 색을 바꾸거나 맞바꿀 때는 여기만 고칩니다.
   메뉴마다 세 가지 묶음:
     icon-*  : 첫 화면 아이콘·메뉴 막대 아이콘의 유리 광택 (top 밝은 쪽 → mid 가운데 → bot 어두운 쪽, shadow 그림자)
     main/top/bot : 그 화면 안의 버튼·강조색 (main 기본, top 버튼 위쪽 밝은 색, bot 버튼 아래쪽 어두운 색)
     report-bg : 풀이 보고서의 조언 카드 면 (오늘 운세·사주 풀이·테마 사주만, soft-bg보다 옅게)
     soft-*  : 1:1 감정에서 이 메뉴 결과를 근거로 골랐을 때 상담 주제 버튼 (오늘 운세·사주 풀이·테마 사주만)
               line 켜진 주제 테두리 / text 켜진 주제 글씨 / bg 고른 주제 면 / ink 고른 주제 글씨
               — main보다 옅게(line·bg 밝게), ink는 bg 위에서 잘 읽히게 진하게. iOS 15는 자동 섞기(color-mix)가 안 되어 직접 적음
   바꾼 뒤에는 back-end/tools/palette-check-console.js 로 빠지거나 틀린 색을 확인합니다.
   ========================================================================== */
:root{
  /* 오늘 운세 */
  --today-icon-top:#ff6a52; --today-icon-mid:#e0261a; --today-icon-bot:#a3120a; --today-icon-shadow:rgba(154,42,23,.40);
  --today-main:#d8492e; --today-top:#f58a6c; --today-bot:#9a2a17;
  --today-soft-line:#ebb3a8; --today-soft-text:#c0705f; --today-soft-bg:#f6d9d2; --today-soft-ink:#9e3f2c;
  --today-report-bg:#fbefeb; /* 풀이 보고서 조언 카드 면 (2026-10-22 Ⓑ) — soft-bg보다 옅게 */
  /* 사주 풀이 (2026-10-16: 테마 사주의 초록 계열로) */
  --saju-icon-top:#5fd48e; --saju-icon-mid:#1f9a55; --saju-icon-bot:#0f6234; --saju-icon-shadow:rgba(24,96,60,.40);
  --saju-main:#1f9a55; --saju-top:#5fd48e; --saju-bot:#0f6234;
  --saju-soft-line:#9fd2b3; --saju-soft-text:#4f9a6e; --saju-soft-bg:#d3ecdd; --saju-soft-ink:#23704a;
  --saju-report-bg:#ebf6ef;
  /* 테마 사주 (2026-10-16: 1:1 감정의 황금 계열로, 옅은 색은 새로 맞춤) */
  --theme-icon-top:#ffd866; --theme-icon-mid:#e0a919; --theme-icon-bot:#9c700a; --theme-icon-shadow:rgba(149,112,18,.42);
  --theme-main:#b8891c; --theme-top:#ffd866; --theme-bot:#9c700a;
  --theme-soft-line:#e3cf9a; --theme-soft-text:#a5832c; --theme-soft-bg:#f4e8c6; --theme-soft-ink:#76560a;
  --theme-report-bg:#faf3e2;
  /* 1:1 감정 (2026-10-16: 사주 풀이의 파랑 계열로) */
  --counsel-icon-top:#6f9dff; --counsel-icon-mid:#2f62d6; --counsel-icon-bot:#173c97; --counsel-icon-shadow:rgba(28,65,146,.40);
  --counsel-main:#2f62d6; --counsel-top:#6f9dff; --counsel-bot:#173c97;
  --counsel-bubble-bg:#dce6fb; --counsel-bubble-ink:#1e3f8f; /* 1:1 내 질문 말풍선: 1:1 색의 옅은 면 + 진한 글씨 (버튼과 구별) */
}
:root{--on-accent:#ffffff;--scrim:rgba(0,0,0,.5);--hh:56px;--rail-w:var(--hh);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--on-accent:#101010;--scrim:rgba(0,0,0,.65)}}
:root[data-theme="dark"]{--on-accent:#101010;--scrim:rgba(0,0,0,.65)}
/* 메뉴 두께: 세로 레일 폭 = 가로 바 높이. 폰(600px 미만) 56px, 태블릿/PC(600px 이상) 64px */
@media (min-width:600px){:root{--hh:64px}}
html{scroll-padding-top:calc(var(--hh) + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",Roboto,sans-serif}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.drawer :focus-visible{outline-color:var(--chrome-accent)}
/* 초점 테두리는 키보드로 움직일 때만 (2026-10-16): 마우스·터치로 화면을 열면 꺽쇠 등에 focus()가 가도 테두리 숨김 — 입력칸은 그대로 (front-end.js 맨 위 pointer-mode) */
html.pointer-mode :focus-visible:not(input):not(textarea):not(select){outline:none!important}
html.pointer-mode .home-tile:focus-visible .home-icon{outline:none!important}

.burger{display:grid;gap:5px;flex:none;transition:transform .2s ease}
.burger i{display:block;width:22px;height:2px;background:var(--chrome-ink);border-radius:2px}
body.h-mode .burger{transform:rotate(90deg)}

.scrim{position:fixed;inset:0;z-index:20;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .25s}
.menu-open .scrim{opacity:1;pointer-events:auto}

/* 드로어 컨테이너: 세로(좌측 레일)와 가로(상단 바) 두 방향을 하나의 flex-wrap 레이아웃으로 전환 */
.drawer{position:fixed;top:0;left:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;background:var(--chrome-bg);color:var(--chrome-ink);overflow-y:auto;overflow-x:hidden;bottom:0;width:var(--rail-w);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);border-right:1px solid var(--chrome-line);transition:width .25s ease,height .25s ease}
/* 펼침 폭: 화면의 1/3을 기본으로, 폰에서 라벨이 잘리지 않도록 최소 220px, PC에서 과하게 넓어지지 않도록 최대 320px */
body.menu-open:not(.h-mode) .drawer{width:clamp(220px,33.333vw,320px)}

/* 가로(상단 바) 모드: 좌측 레일 대신 화면 상단에 고정 */
body.h-mode .drawer{top:0;left:0;right:0;bottom:auto;width:auto;height:calc(var(--hh) + env(safe-area-inset-top,0px));padding-bottom:0;border-right:none;border-bottom:1px solid var(--chrome-line)}
/* 실제 높이는 JS가 인라인 style로 지정(px)해 세로 레이어의 폭 전환과 동일하게 슬라이딩 애니메이션이 걸리도록 함 (height:auto는 transition이 되지 않아 JS로 대체) */
body.h-mode.menu-open .drawer{max-height:80vh;max-height:80dvh}

.drawer-toggle{all:unset;box-sizing:border-box;order:1;display:flex;align-items:center;justify-content:center;height:var(--hh);padding:0 16px;cursor:pointer;flex:none}
@media (hover:hover){.drawer-toggle:hover{background:rgba(255,255,255,.08)}}

.drawer-brand{order:2;flex:1;min-width:0;display:none;font-weight:700;font-size:.98rem;color:var(--chrome-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
body.menu-open:not(.h-mode) .drawer-brand{display:inline}
body.h-mode .drawer-brand{display:none}

/* 세로 모드: 상단 줄(햄버거+브랜드) 다음 새 줄에 목록이 세로로 나열 (가로 모드 항목도 동일한 a 태그/스타일 사용) */
.drawer nav{order:4;flex-basis:100%;display:flex;flex-direction:column;padding:8px 0}
.drawer nav a{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 0;color:var(--chrome-muted);text-decoration:none;font-weight:500;cursor:pointer}
.drawer nav a span{display:none;white-space:nowrap}

body.menu-open .drawer nav a span{display:inline}
@media (hover:hover){.drawer nav a:hover{background:rgba(255,255,255,.06);color:var(--chrome-ink)}}

/* 가로 모드: 목록이 햄버거 바로 옆, 같은 줄에서 가로로 나열 */
body.h-mode .drawer nav{flex-basis:auto;flex:1;flex-direction:row;padding:0}
body.h-mode .drawer nav a{flex-direction:row;padding:0;height:var(--hh)}
body.h-mode .drawer nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--chrome-accent)}
/* 가로-열림: 아이콘 "뒤"가 아니라 "위"에 라벨이 오도록 세로 배치로 전환 */
body.h-mode.menu-open .drawer nav a{flex-direction:column;justify-content:center;gap:10px;height:auto;padding:14px 4px;min-width:0}
/* 메뉴 이름: 평소에는 전체 이름, 좁은 폰에서 가로 메뉴를 펼쳤을 때만 두 글자 줄임 이름(홈·운세·사주·감정) */
body .drawer nav a span.lbl-short{display:none}

@media (max-width:599px){
  body.h-mode.menu-open .drawer nav a span.lbl-full{display:none}
  body.h-mode.menu-open .drawer nav a span.lbl-short{display:inline}
}
/* 방향전환 항목의 화살표는 다른 메뉴 아이콘과 달리 팔각형 테두리 없이 화살표만 표시, 가로모드에서는 좌우 대칭 */
.orient-item svg{transition:transform .2s ease}
/* "가로 모드"/"세로 모드" 글씨는 자리만 차지하고 메뉴 바탕색과 같은 색으로 해서 거의 보이지 않게 (화살표 아이콘은 그대로 보임) */
.orient-item span{color:var(--chrome-bg)}
body.h-mode .orient-item svg{transform:rotate(180deg)}
/* 가로 메뉴: 방향 전환 칸은 아이콘만 있으면 되므로 좁게 → 메뉴 7칸의 이름이 좁은 폰(360px)에서도 잘리지 않게 (2026-10-02) */
body.h-mode .drawer nav a.orient-item{flex:0 0 34px;min-width:0}
body.h-mode.menu-open .orient-item span{display:none}

.nav-icon{width:19px;height:19px;flex:none;color:currentColor}
.page-body{padding-left:var(--rail-w)}
body.h-mode .page-body{padding-left:0;padding-top:calc(var(--hh) + env(safe-area-inset-top,0px))}
.wrap{max-width:640px;margin:0 auto;padding:16px 16px 24px}
h1{margin:0 0 6px;font-size:clamp(1.5rem,1rem + 2vw,2.25rem);line-height:1.3}
.size{margin-top:12px;color:var(--muted);font-size:.9rem}

/* ---- 화면 전환(메뉴 선택 전에는 아무 콘텐츠도 보이지 않음) ---- */
.view{display:none}
.view.active{display:block}
.empty-state{padding:48px 16px;text-align:center;color:var(--muted)}
.empty-state p{margin:0}
/* 2026-11-05 05 사용자 결정: 폰을 가로로 돌려도 글씨가 저절로 커지지 않게 (아이폰 사파리는 가로에서 키운 크기가 세로로 돌아와도 남음) — 모든 화면 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}