/* ============================================================
   Gold Apple — 공통 모바일 하단 퀵메뉴 + 헤더 언어 select(지구본) + 드로어
   적용 대상: mirror/index.html + mirror/web/*.html (10 페이지 공통)
   추가 시점: 2026-04-27 (고객 요청 모바일 최적화)
   ============================================================ */

:root {
  --gan-paper:#f5efe0;
  --gan-canvas:#ebe2cb;
  --gan-line:#d3c7a7;
  --gan-ink:#1a1208;
  --gan-subink:#3a2f1a;
  --gan-gold:#c7a24a;
  --gan-gold-deep:#8c6b1f;
  --gan-gold-bright:#e6c06a;
}

/* ───── 1. 헤더 우측 언어 select(지구본) ─────
   skin-v2 legacy CSS(bootstrap/common/main)의 button 룰을 specificity로 이김.
   selector 기준: body > .goldapple-topnav (legacy-fix.css 와 동일 패턴) */
body > .goldapple-topnav .ga-lang {
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-left:auto;
}
body > .goldapple-topnav .ga-lang > .ga-lang__btn {
  /* skin-v2 의 `body.skin-v2 button { border:0 !important; padding:14px 28px !important; ... }` 를 이기기 위해 !important 매칭 */
  width:40px !important; height:40px !important;
  min-width:40px !important; min-height:40px !important;
  padding:0 !important; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important;
  border:1.5px solid rgba(243,239,223,0.85) !important;
  border-radius:50% !important;
  color:#f6efd9;
  box-shadow:none !important;
  box-sizing:border-box;
  cursor:pointer;
  transition:background 180ms ease, border-color 180ms ease, color 180ms ease;
}
body > .goldapple-topnav .ga-lang > .ga-lang__btn:hover {
  background:rgba(243,239,223,0.1);
  border-color:var(--gan-gold-bright);
  color:var(--gan-gold-bright);
}
body > .goldapple-topnav .ga-lang > .ga-lang__btn svg {
  width:20px; height:20px;
  stroke:currentColor; stroke-width:2.1;
}
body > .goldapple-topnav .ga-lang__menu {
  display:none;
  position:absolute; top:48px; right:0;
  min-width:180px;
  background:#fff;
  border:1px solid var(--gan-line);
  border-radius:10px;
  box-shadow:0 14px 40px rgba(26,18,8,0.12);
  padding:6px;
  z-index:1100;
}
body > .goldapple-topnav .ga-lang.is-open .ga-lang__menu { display:block; }
body > .goldapple-topnav .ga-lang__opt {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  font-family:'Pretendard Variable','Pretendard',sans-serif;
  font-size:14px; color:var(--gan-ink);
  cursor:pointer;
  border-radius:6px;
  background:transparent; border:0;
  width:100%; text-align:left;
}
body > .goldapple-topnav .ga-lang__opt:hover { background:var(--gan-canvas); }
body > .goldapple-topnav .ga-lang__opt[aria-selected="true"] { color:var(--gan-gold-deep); font-weight:600; }
body > .goldapple-topnav .ga-lang__opt-flag { width:20px; text-align:center; font-size:14px; }

/* ───── 2. 모바일 드로어 (햄버거 클릭) ───── */
.ga-drawer {
  position:fixed;
  inset:0;
  background:rgba(26,18,8,0.55);
  opacity:0; pointer-events:none;
  transition:opacity 220ms ease;
  z-index:1200;
}
.ga-drawer.is-open { opacity:1; pointer-events:auto; }
.ga-drawer__panel {
  position:absolute; top:0; right:0; bottom:0;
  width:min(82vw, 360px);
  background:var(--gan-paper);
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(0.22,1,0.36,1);
  display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(0,0,0,0.18);
  overflow-y:auto;
}
.ga-drawer.is-open .ga-drawer__panel { transform:translateX(0); }
.ga-drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--gan-line);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gan-gold-deep);
}
.ga-drawer__close {
  background:transparent; border:0;
  width:36px; height:36px; min-width:36px;
  font-size:22px; color:var(--gan-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ga-drawer__menu { list-style:none; margin:0; padding:14px 0; }
.ga-drawer__menu a {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  font-family:'Pretendard Variable',sans-serif;
  font-size:16px; color:var(--gan-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(211,199,167,0.5);
  min-height:44px;
}
.ga-drawer__menu a[aria-current="page"] {
  background:rgba(199,162,74,0.08);
  color:var(--gan-gold-deep); font-weight:600;
}
.ga-drawer__menu a:hover { background:rgba(199,162,74,0.06); }
.ga-drawer__menu .arrow {
  font-family:'JetBrains Mono', monospace;
  color:var(--gan-gold-deep);
}
.ga-drawer__cta {
  padding:18px 22px;
  border-top:1px solid var(--gan-line);
  margin-top:auto;
}
.ga-drawer__cta a {
  display:block;
  background:var(--gan-ink); color:var(--gan-paper);
  text-align:center; padding:14px;
  border-radius:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  text-decoration:none;
  min-height:44px;
}

/* ───── 3. 모바일 하단 fixed 퀵메뉴 (Bottom Nav) ───── */
.ga-bottomnav {
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(26,18,8,0.96);
  border-top:1px solid var(--gan-gold-deep);
  z-index:1000;
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  backdrop-filter:saturate(140%) blur(12px);
}
.ga-bottomnav__list {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  list-style:none; margin:0; padding:0;
}
.ga-bottomnav__list a {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  padding:8px 4px;
  color:rgba(243,239,223,0.78);
  text-decoration:none;
  font-family:'Pretendard Variable', sans-serif;
  font-size:10.5px; line-height:1.1;
  letter-spacing:0;
  min-height:54px;
  transition:color 180ms ease;
}
.ga-bottomnav__list a:hover,
.ga-bottomnav__list a[aria-current="page"] {
  color:var(--gan-gold-bright);
}
.ga-bottomnav__list svg {
  width:22px; height:22px; flex:none;
  stroke:currentColor;
}
.ga-bottomnav__label { white-space:nowrap; }

/* 모바일에서만 노출 */
@media (max-width: 820px) {
  .ga-bottomnav { display:block; }
  body.ga-has-bottomnav { padding-bottom:74px; }
}
@media (min-width: 821px) {
  .ga-drawer { display:none !important; }
}