/* Triaeon 메인 화면 (index.html #menu 블록 전용). style.css의 메뉴 기본값을 #menu 범위에서 덮어쓴다.
   방향 (unslop by @heydamir, CC BY 4.0 방식으로 정리, 2026-11-08): 야전 지휘 막사 — 짙은 회갈색 중립색, 놋쇠 금색 강조 하나.
   메뉴 뒤에는 실제 전장 화면(캔버스)이 비치고, 버튼·패널은 조용하게 둔다. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&display=swap');

#menu {
  --m-bg: #161513; --m-card: #1c1a18; --m-raised: #262421;
  --m-line: rgba(239, 233, 222, 0.08); --m-line-hi: rgba(239, 233, 222, 0.16);
  --m-text: #efe9de; --m-text2: #aaa398; --m-muted: #8a847a;
  --m-brass: #d4a24c; --m-brass-ink: #1a1307;
  --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m-pad: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  display: block; padding: 0; overflow: hidden; isolation: isolate;
  /* 반투명 막: 뒤의 전장이 비친다 */
  background: linear-gradient(180deg, rgba(22, 21, 19, 0.35) 0%, rgba(22, 21, 19, 0.5) 55%, rgba(22, 21, 19, 0.82) 100%); /* 뒤의 시범 전투가 보이게 옅게 */
}

/* ---- 화면 틀 ---- */
#menu .menu-box {
  position: relative; width: 100%; height: 100%; max-width: 1180px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) var(--m-pad) max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  overflow-y: auto; overscroll-behavior: contain;
}

/* ---- 로고: 단색 놋쇠 글자와 납작한 세 점 삼각 문양 ---- */
#menu .logo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#menu .tri-mark { width: 40px; height: 36px; color: var(--m-brass); }
#menu .logo h1 {
  margin: 0; font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-weight: 600;
  font-size: clamp(40px, 8vw, 80px); line-height: 1; letter-spacing: 0.08em; color: #e8d3a2;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); /* 전장 위에서 읽히게, 중립 그림자만 */
}

/* 타이틀은 도트 이미지 에셋 (assets/ui/title-logo.png, 190x55, 2026-11-08). 정수배로 키워 도트가 고르게 */
#menu .logo h1 { line-height: 0; }
#menu .title-logo { display: block; width: 570px; max-width: 92vw; height: auto; image-rendering: pixelated; }
#menu:has(#menu-main[hidden]) .title-logo { width: 190px; }

/* ---- 공통 하위 페이지 (AI 대전·튜토리얼·연습·온라인·로비·방법) ---- */
#menu .menu-page {
  width: min(560px, 100%); background: var(--m-card); border: 1px solid var(--m-line);
  border-radius: 16px; padding: 16px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); backdrop-filter: none;
}
#menu .menu-page h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 20px; color: var(--m-text); letter-spacing: 0.02em; }
#menu .menu-btn, #menu .fpick, #menu select, #menu input:not([type=checkbox]):not([type=range]) { min-height: 44px; }
#menu .menu-btn, #menu .fpick { border-radius: 10px; background: var(--m-raised); border: 1px solid var(--m-line); color: var(--m-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: background-color 120ms var(--m-ease), border-color 120ms var(--m-ease), transform 120ms var(--m-ease); }
#menu .menu-btn:hover:not(:disabled), #menu .fpick:hover { border-color: var(--m-line-hi); background: #2d2a26; }
#menu .menu-btn:active:not(:disabled) { transform: scale(0.98); }
#menu .menu-btn.primary { background: var(--m-brass); border-color: var(--m-brass); color: var(--m-brass-ink); font-weight: 600; box-shadow: none; }
#menu .menu-btn.primary:hover:not(:disabled) { background: #dfae58; border-color: #dfae58; }
#menu .fpick.on { background: #2f2a22; border-color: var(--m-brass); box-shadow: none; }
#menu .fpick .crest { color: var(--m-text2); }
#menu .fpick.on .crest { color: var(--m-brass); }
#menu .menu-page > .menu-row:last-of-type { position: sticky; z-index: 2; bottom: -16px; margin: 4px -16px -16px; padding: 12px 16px 16px;
  background: var(--m-card); border-top: 1px solid var(--m-line); border-radius: 0 0 16px 16px; }
#menu .lesson-list .menu-btn { text-align: left; }
body:has(#menu-online:not([hidden])) #menu .menu-page { width: min(700px, 100%); }
/* 하위 페이지: 로고는 작게, 창은 화면 가운데 (사용자 지시 2026-11-08). 넘치면 위부터 스크롤 */
#menu:has(#menu-main[hidden]) .menu-box { justify-content: safe center; gap: 16px; }
#menu:has(#menu-main[hidden]) .logo { flex-direction: row; gap: 12px; }
#menu:has(#menu-main[hidden]) .tri-mark { width: 24px; height: 22px; }
#menu:has(#menu-main[hidden]) .logo h1 { font-size: 28px; }

/* ---- 첫 화면: 제목과 버튼 한 묶음, 가운데 ---- */
#menu .menu-home { width: 100%; background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none;
  display: grid; gap: 16px; grid-template-columns: 1fr; justify-items: center; }
#menu .home-modes { display: grid; grid-template-columns: 1fr; gap: 8px; width: min(340px, 100%); }

/* 도트 버튼 (2026-11-09): 타이틀 도트에 맞춘 놋쇠 9-slice 테두리(assets/ui/btn-frame*.png, 16px·slice 6)를
   2배(12px)로, 아이콘은 16px 도트를 2배(32px)로. tools/make-ui-pixels.mjs로 다시 만든다. */
#menu .menu-home .menu-btn {
  --frame: url('../../assets/ui/btn-frame.png'); --frame-hi: url('../../assets/ui/btn-frame-hover.png');
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 6px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--frame) 6 fill / 12px / 0 stretch; image-rendering: pixelated;
  color: #f3e6c4; font-weight: 700; text-shadow: 0 2px 0 #0d0905;
  transition: transform 80ms steps(2);
}
#menu .menu-home .menu-btn:hover:not(:disabled), #menu .menu-home .menu-btn:focus-visible { border-image-source: var(--frame-hi); background: none; color: #fff6dc; }
#menu .menu-home .menu-btn:active:not(:disabled) { transform: translateY(2px); }
#menu .menu-home .menu-btn:focus-visible { outline: 2px solid var(--m-brass); outline-offset: 2px; }
#menu .px-ico { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }

#menu .mode-btn { min-height: 56px; padding: 6px 12px; font-size: 17px; }
#menu .mode-btn b { font-weight: 700; letter-spacing: 0.02em; }
/* 주 모드(컴퓨터 대전): 놋쇠 채움 판, 더 크게 */
#menu .menu-home .mode-btn.m-play {
  --frame: url('../../assets/ui/btn-frame-primary.png'); --frame-hi: url('../../assets/ui/btn-frame-primary-hover.png');
  justify-content: center; min-height: 68px; font-size: 21px; color: var(--m-brass-ink); text-shadow: 0 1px 0 #f8dc98;
}
#menu .menu-home .mode-btn.m-play:hover:not(:disabled) { color: var(--m-brass-ink); }
#menu .mode-btn.m-test { opacity: 0.85; }

#menu .home-util { display: flex; gap: 8px; }
#menu .util-btn { min-height: 48px; padding: 2px 12px 2px 6px; font-size: 14px; gap: 6px; }
#menu .menu-home .util-btn { color: #cbbd9c; }
#menu .util-btn .px-ico { width: 32px; height: 32px; }
/* 가로 폰(낮은 높이): 버튼은 PC와 같이 한 줄 가운데 (사용자 지시 2026-11-09: 테스트장이 없는 배포판에서도 모양이 같게). 로고·버튼을 줄여 한 화면에 */
@media (max-height: 460px) {
  #menu .menu-box { gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #menu .logo { gap: 4px; }
  #menu .logo h1 { font-size: clamp(36px, 14vh, 56px); }
  #menu .tri-mark { width: 28px; height: 24px; }
  #menu .title-logo { width: 285px; }
  #menu .home-modes { grid-template-columns: 1fr; width: min(300px, 100%); gap: 4px; }
  #menu .mode-btn { min-height: 44px; padding: 0 12px; font-size: 15px; }
  #menu .menu-home .px-ico { width: 16px; height: 16px; }
  #menu .menu-home .mode-btn.m-play { min-height: 48px; font-size: 17px; }
  #menu .menu-home { gap: 8px; }
  #menu .util-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  #menu .menu-page:not(.menu-home) { width: min(760px, 100%); padding: 12px 16px; gap: 8px; }
  #menu .menu-page > .menu-row:last-of-type { bottom: -12px; margin: 4px -16px -12px; padding: 8px 16px 12px; }
  #menu:has(#menu-main[hidden]) .menu-box { gap: 8px; }
  #menu:has(#menu-main[hidden]) .logo { display: none; }
  /* 진영 고르기 등 세로 목록을 가로로 */
  #menu .format-pick, #menu .faction-pick { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
}
/* 세로 폰 */
@media (max-width: 639px) {
  #menu .title-logo { width: 380px; }
  #menu .menu-box { justify-content: safe center; padding-top: max(32px, env(safe-area-inset-top)); }
  #menu:has(#menu-main:not([hidden])) .menu-box { justify-content: center; }
}

/* unslop by @heydamir, CC BY 4.0 */