/* ============================================================
   CoinLAB 공용 크롬 (chrome.css)
   ------------------------------------------------------------
   탑바(header) · 메뉴 모달(overlay) · 푸터(site-footer)의 '옷(스타일)'.
   화면마다 베껴 두던 걸 한 곳에 모았다 → 한 번 고치면 전 화면 통일.
   골격(HTML)은 chrome.js가 꽂고, 이 파일이 스타일을 입힌다.
   색은 각 화면 :root 변수(--gold/--ink/--muted/--long 등)를 그대로 참조한다.

   이 파일은 각 HTML의 <style> '뒤'에서 불러 옛 인라인 크롬 CSS를 덮어쓴다.
   ============================================================ */

/* ── 탑바 ────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;   /* ★ 따라다님 — 스크롤 어디서든 메뉴가 손에 닿음 */
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin: 0 auto 30px;                       /* ★ auto 항상 — 펴질 때 margin auto→0 'snap'이 좌측 점프를 만든다. 양쪽 다 auto로 통일 */
  width: 100%;                               /* width:100%면 auto margin이어도 전체폭 stretch(랜딩 flex가 좁아지던 것 방지) */
  max-width: 1240px;                         /* .wrap 폭과 동일 — 680↔1240 px↔px 보간이라 부드럽게 */
  padding: 8px 0 18px;
  border: 1px solid transparent;             /* 알약 테두리 자리(맨 위엔 투명) */
  border-radius: 0;
  /* 스크롤 시 '스르륵' 알약으로 — 전부 한 박자에 부드럽게 */
  transition: max-width .45s cubic-bezier(.4,0,.2,1), padding .45s cubic-bezier(.4,0,.2,1),
              margin-top .45s cubic-bezier(.4,0,.2,1), background-color .4s, border-color .4s,
              border-radius .45s, box-shadow .45s, backdrop-filter .4s;
}
/* 탑바 아래 골드 경계선 — ★ 스크롤 내리면 스르륵 사라지고, 맨 위로 오면 다시 생김 */
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,130,.5), transparent);
  opacity: 1; transition: opacity .4s ease;
}

/* ── 스크롤 상태: 떠 있는 유리 알약 (chrome.js가 .tb-scrolled 토글) ───────── */
header.tb-scrolled {
  max-width: 680px; width: 100%;             /* width:100% = block·flex(랜딩) 모두 680에 꽉 차게(랜딩이 콘텐츠폭으로 더 쪼그라들던 것 통일) */
  margin: 12px auto 30px;                    /* 알약(680px) 가운데 — auto는 여기서만(flex·block .wrap 양쪽 작동) */
  padding: 9px 20px;
  background-color: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);       /* 유리 — 본문이 밑으로 흐려져 흐름 */
}
header.tb-scrolled::after { opacity: 0; }    /* 알약일 땐 경계선 숨김(알약 자체 테두리로 대체) */

/* 폰: 유리 블러는 스크롤을 무겁게 한다 → 불투명 바로(블러 비용 0). 데스크탑만 블러. */
@media (max-width: 767px) {
  header.tb-scrolled {
    max-width: 100%;                         /* 폰에선 풀폭이 안정적(알약 축소 안 함) */
    margin-top: 0;
    padding: 10px 14px;
    background-color: rgba(10,11,16,.92);     /* 불투명 — 블러 없이도 본문 안 비침 */
    border-color: transparent;
    border-radius: 0;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
/* brand는 화면에 따라 <a>(홈 링크) 또는 <div id=brandHome>(새로고침)로 꽂힌다.
   둘 다 클릭 가능해야 하므로 cursor:pointer를 공통으로 보장. */
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; cursor: pointer; transition: opacity .15s ease; }
.brand:hover { opacity: .78; }
.brand-title { font-size: 24px; font-weight: 600; letter-spacing: -.3px; color: var(--ink); line-height: 1; }
.brand-title .lab { color: var(--gold); }
.brand-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
}
.header-right { display: flex; align-items: center; gap: 10px; }
.clock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .5px; color: var(--muted); white-space: nowrap;
}
.menu-btn {
  /* a(Back 등 링크)와 button(Menu)이 태그는 달라도 높이·세로정렬 일치 — 전 화면 공용 기준.
     line-height 명시 필수: a는 본문 1.7을 상속, button은 UA 'normal' → 안 맞추면 높이 어긋남. */
  display: inline-flex; align-items: center; line-height: 1;
  flex-shrink: 0;                            /* 탑바가 빡빡해도 버튼이 안 찌그러짐(detail·indicators 의도 보존) */
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing: .8px; color: var(--muted);
  border: 1px solid rgba(255,255,255,.07);   /* 테두리 더 은은하게 — 덜 각짐 */
  border-radius: 9px;
  padding: 8px 15px;                          /* 살짝 슬림 */
  background: var(--glass); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);   /* 유리 카드와 같은 윗면 하이라이트 → 평평함 제거(전 화면 결 통일) */
  cursor: pointer; text-decoration: none;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.menu-btn:hover {
  border-color: rgba(200,168,130,.45);
  color: var(--gold-hi);                       /* 호버 글자 골드로 — 브랜드 연결 */
  background: rgba(200,168,130,.06);            /* 은은한 골드 기운 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(200,168,130,.13);
}
/* 키보드 포커스 링 — 브랜드 골드로 통일(마우스 클릭엔 안 뜨고 Tab 이동 때만 표시). 순수 추가라 마우스 사용엔 영향 0. */
.brand:focus-visible, .menu-btn:focus-visible, .mr-head:focus-visible,
.mr-link:focus-visible, .mrow-link:focus-visible, .footer-links a:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

/* ── 로그인 영역 (chrome.js authArea가 채움) ───────────────── */
/* SIGN(로그아웃) · PAGE(로그인) 버튼은 .menu-btn 을 그대로 입어 MENU와 한 세트로 보인다
   (추가 버튼 스타일 불필요 — 동그라미 아바타는 안 쓴다). */
/* ── 헤더 카운터 칩(2026-07-13 준 통일) — 크레딧·저장·시그널 한도를 전 화면 같은 알약으로.
   ID 카운터(#bt-count·#sv-count·#wh-count·팩/부띠크 mk-*)를 이 클래스로 교체하고, JS가 채운 뒤 .on 부여(빈 칩 숨김).
   칩 전체가 링크(CREDITS→/credits · SAVED→/mypage · SIGNALS→/webhooks). .warn = 소진/만실 경고(빨강). ── */
.hdr-chip { display: none; align-items: center; gap: 7px; text-decoration: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px; padding: 8px 15px; white-space: nowrap;
  transition: border-color .2s ease, color .2s ease; }
.hdr-chip.on { display: inline-flex; }
.hdr-chip:hover { border-color: rgba(200,168,130,.45); color: var(--gold-hi); }
.hdr-chip b { color: var(--gold-hi); font-weight: 700; }
.hdr-chip.warn { border-color: rgba(201,95,95,.38); }
.hdr-chip.warn b { color: #c95f5f; }
.hdr-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 카드·버튼 UI 화면(팩·부띠크·옥션)은 전면 선택 차단(2026-07-13 준) ──
   coinlab-fx.css가 '읽는 텍스트 복사 허용'으로 p·h1~h6·li·.big-price 등에 user-select:text를 전역으로 건다.
   그 규칙이 이 화면들의 <h1>/<p> 제목·설명까지 선택 가능하게 만들어, body의 user-select:none을 무력화했다.
   → data-page 지정 + 높은 특이도(body[data-page] :is)로 그 셀렉트-텍스트를 되돌린다.
   ★ 읽기가 목적인 화면(가이드·노트·법적·가격)엔 손대지 않아 복사 기능은 그대로 산다. */
body[data-page="pack"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,blockquote,code,pre,.big-price),
body[data-page="boutique"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,blockquote,code,pre,.big-price),
body[data-page="auction"] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,blockquote,code,pre,.big-price) {
  -webkit-user-select: none; user-select: none;
}

.cl-auth { display: inline-flex; align-items: center; }
.cl-userwrap { position: relative; display: inline-flex; }

/* PAGE 클릭 시 뜨는 작은 계정 메뉴 */
.cl-usermenu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; padding: 8px;
  background: linear-gradient(165deg, rgba(26,27,35,.97), rgba(13,14,20,.98));
  border: 1px solid var(--glass-edge); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right;
  pointer-events: none; z-index: 60;
  transition: opacity .2s ease, transform .2s cubic-bezier(.65,0,.35,1);
}
.cl-usermenu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* ── 메뉴 = 4구역(신원 · 크레딧 · 활동 링크 · Sign out) — 2026-07-10 정리.
   구역 경계는 전부 같은 헤어라인(rgba .07) + 같은 여백 리듬(위 10 · 아래 12 · 좌우 12).
   마이크로 라벨(ACCOUNT)·↗ 힌트는 제거 — 구역선이 그 역할을 대신한다(덜어내는 쪽이 정답). */
.cl-um-id {
  padding: 8px 12px 12px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cl-um-email {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 등급 줄 = 구독 입구(알약 + 우측 Manage/Upgrade 힌트). 하단 링크 대신 여기가 구독 관리 문. */
.cl-um-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px -6px 0; padding: 4px 6px; border-radius: 8px;
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.cl-um-plan:hover { background: rgba(200,168,130,.06); }
.cl-um-plan:hover .cl-um-manage { color: var(--gold-hi); }
.cl-um-manage {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); transition: color .15s;
}
/* 등급 배지 — 작은 알약. 유료=골드, 무료=뮤트. */
.cl-um-tier {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(200,168,130,.4); background: rgba(200,168,130,.08);
}
.cl-tier-free { color: var(--muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
/* BT 크레딧 잔액 — 작은 체력바(현재 / 한도). backtest 페이지 막대와 같은 언어.
   ★ <a>(2026-07-10) — 클릭 = /credits(잔액+충전팩). 블록 전체 호버 틴트가 '눌린다'는 신호. */
.cl-um-credits {
  display: block; text-decoration: none; cursor: pointer;
  padding: 10px 12px 12px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 8px 8px 0 0;
  transition: background .15s;
}
.cl-um-credits:hover { background: rgba(200,168,130,.06); }
.cl-um-credits:hover .cl-um-clabel { color: var(--gold-hi); }
.cl-um-crow { display: flex; align-items: baseline; justify-content: space-between; }
.cl-um-clabel {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); transition: color .15s;
}
.cl-um-cnum { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--gold-hi); }
.cl-um-cnum b { font-weight: 700; }
.cl-um-cbar {
  position: relative; height: 6px; margin-top: 7px; border-radius: 4px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.cl-um-cbar > i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transition: width .55s cubic-bezier(.22,1,.36,1);
}
.cl-um-cpaid {
  margin-top: 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .5px; color: var(--gold-hi);
}
.cl-um-cpaid:empty { display: none; }
.cl-um-credits.empty .cl-um-cnum { color: var(--short); }
.cl-um-credits.empty .cl-um-cbar > i { background: var(--short); }
.cl-um-logout,
.cl-um-link {
  display: block; padding: 10px 12px; border-radius: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: background .18s, color .18s;
}
.cl-um-logout:hover,
.cl-um-link:hover { background: rgba(200,168,130,.08); color: var(--gold-hi); }
/* 첫 활동 링크 — 크레딧 구역 헤어라인 아래 숨 고르기(구역 리듬 통일). */
.cl-um-credits + .cl-um-link { margin-top: 4px; }
/* PAGE = 계정 메뉴(이메일·크레딧·알림함·우편함·Sign out). 네비(전략/웹훅)는 메인 MENU.
   Sign out은 '되돌리기(세션 종료)' 성격이라 위에 헤어라인 1개로 활동 링크와 분리(다른 divider와 동일 색).
   ⚠위험색(--short) 금지 — 빨강은 청산/위험 전용. Sign out은 뮤트→골드hi 호버 그대로(색으로 겁주지 않음). */
.cl-um-logout {
  border-radius: 9px;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px; padding-top: 14px;
}

/* ── 새 알림 배지 ──────────────────────────────────────────
   PAGE 버튼 우상단 골드 카운트(안 본 발송 로그 수, 9+ 캡). chrome.js가
   /api/notifications/unseen 결과로 단다. 알림함을 열면 열람 처리돼 다음 화면부턴 사라짐. */
.cl-notifbadge {
  position: absolute; top: -6px; right: -7px; z-index: 1;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  color: #16140f;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  line-height: 17px; text-align: center;
  box-shadow: 0 3px 10px rgba(200,168,130,.35);
  pointer-events: none;
}
/* 계정 메뉴 'Notifications' 항목 옆 카운트 칩(같은 숫자, 은은한 버전) */
.cl-um-link .cl-um-nbadge {
  float: right; min-width: 17px; padding: 0 5px; border-radius: 999px;
  background: rgba(200,168,130,.14); border: 1px solid rgba(200,168,130,.4);
  color: var(--gold-hi); font-size: 9.5px; font-weight: 700;
  line-height: 15px; text-align: center;
}

/* ── 사이트 배너(긴급 공지 한 줄) — 관리자 '우편함' 탭에서 게시. 탑바 위 골드 줄. ── */
#cl-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 18px; padding: 11px 16px; border-radius: 12px;
  background: rgba(200,168,130,.10);
  border: 1px solid rgba(200,168,130,.38);
}
#cl-banner .cl-banner-text {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .4px;
  color: var(--gold-hi); text-align: center; min-width: 0;
}
#cl-banner .cl-banner-x {
  background: none; border: 0; cursor: pointer; flex: none;
  color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 4px;
  transition: color .18s;
}
#cl-banner .cl-banner-x:hover { color: var(--gold-hi); }

/* ── 인앱 신호 토스트 — 사이트 켜둔 동안 새 발송이 오면 우하단에 잠깐(클릭=알림함) ── */
#cl-toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  max-width: min(380px, calc(100vw - 44px));
  padding: 13px 18px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(165deg, rgba(26,27,35,.97), rgba(13,14,20,.98));
  border: 1px solid rgba(200,168,130,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 24px rgba(200,168,130,.08);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
#cl-toast.show { opacity: 1; transform: translateY(0); }
#cl-toast .cl-toast-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#cl-toast .cl-toast-main {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;   /* 긴 우편 제목이 유리 밖으로 안 새게(…처리) */
}
#cl-toast .cl-toast-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) { #cl-toast { transform: none; transition: opacity .35s ease; } }

/* ── 메뉴 모달 ───────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,9,.55); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: min(560px, 92vw); padding: 28px 0 18px;
  max-height: min(88vh, calc(100dvh - 24px));         /* 작은 화면 안전망 — dvh=주소창 있어도 실제 보이는 높이 */
  overflow-y: auto; overscroll-behavior: contain;     /* 내부 스크롤이 뒤 페이지로 안 새게 */
  scrollbar-width: thin; scrollbar-color: rgba(200,168,130,.28) transparent;
  background: linear-gradient(165deg, rgba(26,27,35,.95), rgba(13,14,20,.97));
  border: 1px solid var(--glass-edge); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: scale(.92) translateY(8px); opacity: .4;
  transition: transform .32s cubic-bezier(.65,0,.35,1), opacity .32s ease;
}
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: rgba(200,168,130,.28); border-radius: 3px; }
.overlay.open .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,130,.6), transparent);
}
.modal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 26px 18px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 10px;
}
.modal-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 3px; color: var(--gold); text-transform: uppercase;
}
.modal-close {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase;
  background: none; border: none; cursor: pointer; transition: color .2s;
}
.modal-close:hover { color: var(--gold-hi); }
/* ── 벤토 메뉴(2026-07-02 리디자인) — 룸 카드(개수 따라 자동 배치) + 하단 슬림 칩 줄 ── */
.menu-body { padding: 6px 18px 4px; }
.menu-rooms { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 12px; margin-bottom: 12px; }
.menu-room {
  position: relative;
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--glass-edge); border-radius: 16px;
  padding: 6px; overflow: hidden;
  transition: border-color .25s ease;
}
.menu-room::before {                                  /* 윗변 골드 헤어라인 — 사이트 시그니처 */
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,130,.5), transparent);
}
.menu-room:hover { border-color: rgba(200,168,130,.35); }
/* 룸 헤더(LAB/LIVE) = 방 문패. 클릭하면 그 방의 홈(/lab · /main). */
.mr-head {
  display: flex; align-items: center; gap: 11px;
  margin: 0 6px 4px; padding: 13px 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--ink); text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 13.5px; letter-spacing: 2.5px; text-transform: uppercase;
  transition: color .18s;
}
.mr-head .m-ic { color: var(--gold); }
.mr-head:hover, .mr-head.active { color: var(--gold-hi); }
/* 룸 안 목적지 행 */
.mr-link {
  display: flex; align-items: center; gap: 11px;
  padding: 12px; border-radius: 10px;
  color: var(--text); text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  letter-spacing: 1px; text-transform: uppercase;
  transition: background .18s, color .18s;
}
.mr-link:hover { background: linear-gradient(90deg, rgba(200,168,130,.14), rgba(200,168,130,.02)); color: var(--ink); }
.mr-link.active { color: var(--gold-hi); }
/* 하단 슬림 칩(HOF·Pricing·Guides·Notes) */
.menu-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mrow-link {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 8px; border-radius: 13px;
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--glass-edge);
  color: var(--text); text-decoration: none;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: border-color .2s, color .2s;
}
.mrow-link:hover { border-color: rgba(200,168,130,.4); color: var(--gold-hi); }
.mrow-link.active { color: var(--gold-hi); border-color: rgba(200,168,130,.45); }
.mrow-link .m-lb { flex: none; }                       /* 칩은 가운데 정렬 — 라벨이 안 밀리게 */
.mrow-link .m-ar { display: none; }                    /* 칩엔 화살표 생략(중앙 정렬 유지) */

/* 아이콘 · 화살표 공통 */
.m-ic { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none; color: var(--muted); transition: color .2s ease, transform .2s ease; }
.m-ic svg { width: 17px; height: 17px; display: block; }
.m-lb { flex: 1; }
/* 예약석 표식(Auction SOON) — 라벨 옆 초소형 골드 칩. 호버 화살표와 자리 다툼 없게 flex:none. */
.m-tag {
  flex: none; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--gold); opacity: .85;
  border: 1px solid rgba(200,168,130,.35); border-radius: 5px; padding: 2px 6px;
}
.m-ar { font-family: 'JetBrains Mono', monospace; color: var(--gold-hi); opacity: 0; transform: translateX(-7px); transition: opacity .2s ease, transform .2s ease; }
.mr-head:hover .m-ic, .mr-link:hover .m-ic, .mrow-link:hover .m-ic { color: var(--gold-hi); transform: translateX(1px); }
.mr-head:hover .m-ar, .mr-link:hover .m-ar { opacity: 1; transform: translateX(0); }
.mr-link.active .m-ic, .mrow-link.active .m-ic { color: var(--gold); }
.mr-head.active .m-ar, .mr-link.active .m-ar { opacity: 1; transform: translateX(0); color: var(--gold); }

/* 메뉴 열릴 때 룸→칩 순서로 스르륵 차오름(스태거) */
@keyframes mRowIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.overlay.open .menu-room, .overlay.open .mrow-link { animation: mRowIn .4s cubic-bezier(.4,0,.2,1) both; }
.overlay.open .menu-room:nth-child(1) { animation-delay: .04s; }
.overlay.open .menu-room:nth-child(2) { animation-delay: .11s; }
.overlay.open .mrow-link:nth-child(1) { animation-delay: .18s; }
.overlay.open .mrow-link:nth-child(2) { animation-delay: .23s; }
.overlay.open .mrow-link:nth-child(3) { animation-delay: .28s; }
.overlay.open .mrow-link:nth-child(4) { animation-delay: .33s; }
@media (prefers-reduced-motion: reduce) {
  .overlay.open .menu-room, .overlay.open .mrow-link { animation: none; }
  .m-ic, .m-ar { transition: none; }
}
/* 좁은 화면: 룸 카드 세로 스택 + 하단 칩 슬림(PRICING 7자가 375px 칩에 들어가게) */
@media (max-width: 520px) {
  .menu-rooms { grid-auto-flow: row; }
  .menu-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }  /* 칩 4개 → 2×2 (한 줄 4개는 375px에서 터짐) */
  .mrow-link { gap: 6px; letter-spacing: 1px; padding: 13px 4px; }
}
@media (max-width: 360px) {
  .mrow-link .m-ic { display: none; }                  /* 초소형: 라벨만(아이콘 생략) */
}

/* ── 푸터 ────────────────────────────────────────────────── */
.site-footer {
  position: relative;   /* 위 골드 라인(::before) 배치 기준 */
  margin-top: 48px; padding: 24px 0 0;
  border-top: none;   /* 회색 보더 끔 — 라인은 ::before 골드로 (탑바와 짝) */
  text-align: center;
}
/* 푸터 위 골드 헤어라인 — 탑바 아래 라인과 짝을 이뤄 페이지를 위아래 골드로 감쌈 */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,130,.5), transparent);
}
.footer-links {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-links a { color: var(--muted); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: var(--gold-hi); }
.footer-links a.active { color: var(--gold); }
.footer-links .sep { color: rgba(255,255,255,.18); margin: 0 9px; }
.footer-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .5px; color: var(--muted);
}
.footer-copy .lab { color: var(--gold); }

/* ── 모바일: 폰에선 태그·시계 숨겨 햄버거 자리 확보 ──────────── */
@media (max-width: 600px) {
  .brand-tag { display: none; }
  .clock { display: none; }
  .menu-btn { flex-shrink: 0; min-height: 40px; }   /* ★ 폰 터치 타깃 확보(기존 ~30px → 40px); align-items:center라 글자 세로중앙 유지 */
}