/* ============================================================
   금호정 디자인 토큰
   출처: design_handoff_geumhojeong/README.md § Design Tokens
   새 섹션을 추가할 때는 아래 변수만 사용할 것 (hex 직접 쓰지 않기)
   ============================================================ */
:root {
  color-scheme: light;     /* 안드로이드 브라우저 강제 다크모드 차단 */

  --page-bg: #EFE7D8;      /* 컬럼 바깥 배경 */
  --paper: #FFFBF2;        /* 컬럼 배경 */
  --paper-warm: #FFF3DE;   /* 보조 면 */
  --slot-bg: #F3EAD7;      /* 빈 플레이스홀더 */
  --border: #EADFC8;       /* 모든 2px 웜 보더 */
  --table-line: #000000;   /* 헤더 경계선(=고양이가 앉은 탁자 선). 아트워크와 같은 순수 검정 */
  --ink: #2A211A;          /* 본문 */
  --ink-60: #6B5D4E;       /* 보조 텍스트. 작은 글씨는 이보다 옅으면 대비(4.5:1) 미달 */
  --kicker: #A8977C;       /* 구분 라벨 (11px 대문자 — 장식이라 대비 예외) */
  /* 주 액션(전화 문의). 일러스트의 호박색(색상각 약 40°)과 172° 떨어진 보색이라
     그림을 더 따뜻하게 받쳐 주고, 캐치테이블 주황(157°)·네이버 초록(71°)과도 멀어
     나란히 놓아도 서로 죽지 않는다. 흰 글자 대비 8.83:1. */
  --brand: #2C4A7C;
  --brand-dark: #1D3355;   /* 주 액션 호버, 하드 섀도 */
  --open: #2E8B57;         /* 영업 중 */
  --naver: #03C75A;
  --naver-hover: #02A94D;
  --catchtable: #FF3D00;   /* 캐치테이블 브랜드 */
  --catchtable-hover: #D93100;

  --font-ui: 'Noto Sans KR', sans-serif;
}

@keyframes kh-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

html, body { margin: 0; padding: 0; background: var(--page-bg); }
/* 패널에 display:flex가 걸려 있어 hidden 속성만으로는 안 숨겨진다 */
[hidden] { display: none !important; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
a { color: var(--brand); text-decoration: none; }

/* 키보드 포커스만 표시 (터치·마우스에는 안 뜸) */
/* 버튼에도 검은 테두리가 생겼으므로 초점 링이 테두리에 붙어 보이지 않게
   간격을 3px로 둔다 (테두리 — 종이색 틈 — 초점 링 순으로 읽히게). */
:focus-visible {
  outline: 2px solid var(--table-line);
  outline-offset: 3px;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  display: flex;
  justify-content: center;
}

/* 컬럼 = 화면 전체 높이. 스크롤 없이 한 화면에 담는다. */
.col {
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(42, 33, 26, .12);
  display: flex;
  flex-direction: column;
  padding: 14px var(--col-pad-x) calc(14px + env(safe-area-inset-bottom));
}

.col {
  --hdr-pad: clamp(8px, 1.6vh, 12px);
  --col-pad-x: 18px; /* .lang이 화면 오른쪽 끝에 붙으려면 이 값만큼 상쇄해야 한다 */
}

/* ---------- 헤더: 매장 일러스트 배경 위에 워드마크 + 언어탭 ----------
   컬럼의 상·좌·우 패딩을 음수 마진으로 상쇄해 화면 위를 가득 채운다. */
.hdr {
  position: relative; /* .hdr-bg와 .lang의 기준 박스 */
  display: flex;
  align-items: center;
  flex: none;
  margin: -14px calc(var(--col-pad-x) * -1) 0;
  padding: 10px var(--col-pad-x);
  min-height: clamp(96px, 15vh, 170px);
  border-bottom: 2px solid var(--table-line);
  overflow: hidden;
}
/* 가로로 긴 그림이라 cover로 세로만 잘라 채운다. 건물이 왼쪽에 있어 위치는 가운데 기준 */
.hdr-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* 워드마크가 놓이는 왼쪽을 종이색으로 살짝 덮어 글자가 벽돌·창문 위에서도 읽히게 한다.
   글자에 두꺼운 헤일로를 두르는 것보다 자국이 덜 남는다. */
.hdr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    rgba(255, 251, 242, .72) 0%,
    rgba(255, 251, 242, .45) 34%,
    rgba(255, 251, 242, .12) 62%,
    rgba(255, 251, 242, 0) 100%);
  pointer-events: none;
}
/* 워드마크(투명 PNG이므로 multiply 블렌드 불필요).
   마스코트가 사라져 폭을 다툴 대상이 없으므로 높이 기준으로 잡는다.
   오른쪽 .lang(약 34~39px)과는 충분히 떨어져 있다. */
.brand-mark {
  position: relative;
  z-index: 1; /* 일러스트 위 */
  flex: none;
  height: clamp(30px, 5.5vh, 50px);
  width: auto;
  display: block;
  /* 스크림이 대부분을 처리하므로 헤일로는 가장자리를 또렷하게 하는 정도만 */
  filter: drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 3px rgba(255, 251, 242, .8));
}
/* 언어 선택 — 배치만 잡아둔 상태(동작 미구현). index.html 주석 참고.
   세로 3단으로 세워 화면 오른쪽 끝에 붙인다(컬럼 좌우 패딩을 음수 마진으로 상쇄). */
/* 흐름에서 빼는 이유: 세로 3단이 헤더 높이를 밀어올리면 짧은 화면(iPhone SE)에서
   페이지가 넘친다. 절대 배치하면 헤더 높이는 마스코트 기준으로 유지되고,
   기준 박스가 패딩 박스라 top:50%가 곧 경계선 기준 세로 가운데가 된다. */
.lang {
  position: absolute;
  z-index: 1; /* 일러스트 위 */
  top: 50%;
  right: 0; /* 헤더가 이미 화면 끝까지 차 있으므로 상쇄 불필요 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--table-line);
  border-right: 0;                    /* 화면 끝에 붙으므로 바깥쪽 선은 없앤다 */
  border-radius: 10px 0 0 10px;
  /* overflow:hidden을 쓰면 버튼의 ::after 히트 영역까지 잘린다 —
     모서리 클리핑은 첫/끝 버튼에 직접 radius를 줘서 해결 */
  background: var(--paper);
}
.lang-btn:first-child { border-top-left-radius: 8.5px; }
.lang-btn:last-child { border-bottom-left-radius: 8.5px; }
.lang-btn {
  position: relative; /* ::after 히트 영역의 기준 */
  font-family: inherit;
  /* 짧은 화면에서는 3단 높이가 헤더를 넘지 않도록 vh에도 반응시킨다 */
  font-size: clamp(9px, min(2.8vw, 1.45vh), 11.5px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  padding: clamp(3px, 0.62vh, 5px) clamp(8px, 2.4vw, 11px);
  border: 0;
  background: transparent;
  color: var(--ink-60);
  cursor: pointer;
  text-align: center;
}
.lang-btn + .lang-btn { border-top: 1.5px solid var(--table-line); }
.lang-btn.is-active { background: var(--table-line); color: var(--paper); }
/* 본체는 ~34×24px. 세 버튼이 세로로 붙어 있어 세로 확장은 서로의 탭을 가로채고
   (44px씩 늘리면 20px 겹침), 오른쪽은 화면 끝이라 확장하면 가로 스크롤이 생긴다.
   → 왼쪽으로만 44px 이상 확장 (right:0 앵커). */
.lang-btn::after {
  content: "";
  position: absolute;
  right: 0; top: 0;
  min-width: 48px;
  width: 100%;
  height: 100%;
}


/* ---------- 액션 영역 ----------
   center로 두면 남는 세로 공간을 위아래로 나눠 가져 그림과 영업시간 카드 사이가 벌어진다.
   위로 붙이고, 남는 공간은 아래 버튼들의 세로 여백(vh clamp)이 흡수하게 한다. */
.actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, 2vh, 20px);
  padding: clamp(8px, 1.5vh, 13px) 0 0;
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- 영업시간 카드 ---------- */
.hours-card {
  background: var(--paper-warm);
  border: 2px solid var(--table-line);
  border-radius: 14px;
  padding: clamp(8px, 1.5vh, 14px) 14px;
  text-align: center;
}
/* 현재 상태 / 다음 정보 두 줄을 묶어 아래 고정 안내와의 간격을 한 곳에서 준다 */
.hours-state { margin-bottom: clamp(4px, 1vh, 7px); }
.hours-now {
  margin: 0;
  font-size: clamp(14px, 3.9vw, 16px);
  font-weight: 700;
  color: var(--ink);
}
.hours-now.on { color: var(--open); }
.hours-next {
  margin: clamp(1px, .4vh, 3px) 0 0;
  font-size: clamp(12px, 3.4vw, 13.5px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-60);
}
.hours-next:empty { display: none; } /* 다음 정보가 없는 시간대 */
.hours-fixed {
  margin: 0;
  font-size: clamp(11px, 3.1vw, 12.5px);
  /* 고정 안내가 네 줄이라 행간을 넉넉히 두면 짧은 화면(iPhone SE)에서 페이지가 넘친다 */
  line-height: 1.5;
  color: var(--ink-60);
}

/* 그룹 구분 라벨 (양옆 실선) */
.label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .18em; color: var(--kicker);
  margin: clamp(2px, 1vh, 8px) 0 0;
}
.label::before, .label::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---------- 버튼 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: clamp(13px, 3vh, 28px) 8px;
  border-radius: 14px;
  font-size: clamp(15px, 4.2vw, 17px);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;

  /* 검은 테두리를 기본형에 둔다. 화면의 다른 검은 선(헤더 경계선, 영업시간 카드,
     메뉴 사진, 하단 탭)과 같은 체계로 묶기 위함 — 버튼이 추가돼도 배경색만
     정하면 자동으로 일관성이 유지된다.
     3D 그림자는 뺐다: 그 선들이 전부 평평한 먹선인데 버튼만 입체면 오히려 튄다.
     누르는 느낌은 :active의 배경 어두워짐이 대신한다. */
  border: 2px solid var(--table-line);
}
.btn .sub {
  font-size: .8em;
  font-weight: 500;
  opacity: .85;
  letter-spacing: .01em;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn-call { background: var(--brand); color: var(--paper); }
.btn-call:hover, .btn-call:active { background: var(--brand-dark); color: var(--paper); }

.btn-book { background: var(--catchtable); color: #fff; }
.btn-book:hover, .btn-book:active { background: var(--catchtable-hover); color: #fff; }

.btn-naver { background: var(--naver); color: #fff; }
.btn-naver:hover, .btn-naver:active { background: var(--naver-hover); color: #fff; }

/* 구글 브랜드색은 전부 기존 버튼과 충돌한다 — 파랑은 전화 남색과 색상각 0°,
   빨강은 캐치테이블과 10°, 초록은 네이버와 11°. 중립(종이+검은 테두리)으로 두어
   충돌을 피하고 화면의 검은 선 체계에 맞춘다. */
.btn-google { background: var(--paper); color: var(--ink); }
.btn-google:hover, .btn-google:active { background: var(--paper-warm); color: var(--ink); }

/* ---------- 메뉴 패널 ----------
   .actions와 형제이고 둘 중 하나만 보인다(tabs.js가 hidden 토글).
   사진은 메뉴 전체가 담긴 한 장만 쓰므로 aspect-ratio로 자리를 고정한다. */
.menu-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.4vh, 12px);
  padding: clamp(8px, 1.5vh, 13px) 0 0;
}
.menu-photo {
  flex: none;
  width: 100%;
  /* 이 비율이 곧 사장님께 요청할 사진 비율이다. 바꾸면 권장 픽셀도 함께 바꿀 것 */
  aspect-ratio: 16 / 9;
  background: var(--slot-bg);
  border: 2px solid var(--table-line); /* 영업시간 카드·경계선과 같은 검정 */
  border-radius: 14px;
  overflow: hidden;
}
.menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.menu-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: clamp(1px, .45vh, 5px) 2px;
}
.m-name { font-size: clamp(13px, 3.6vw, 15px); font-weight: 500; white-space: nowrap; }
.m-opt { font-size: clamp(11px, 3vw, 12.5px); color: var(--ink-60); white-space: nowrap; }
.m-dots { flex: 1; border-bottom: 1px dotted var(--border); transform: translateY(-.25em); }
.m-price {
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m-price i { font-style: normal; font-size: .82em; font-weight: 500; margin-left: 1px; }

/* ---------- 하단 탭 ----------
   보이는 패널이 flex:1로 남는 공간을 먹으므로 이 블록은 자연히 컬럼 맨 아래에 붙는다.
   버튼이 아니라 '탭'으로 읽히게 만든다 — 다른 액션 버튼들과 확실히 구분되도록
   둥근 알약꼴·하드 섀도를 쓰지 않는다.
   검은 선이 탭 바를 가로지르고, 선택된 탭에서만 그 선이 끊겨(위 테두리 투명)
   아래로 내려온 탭이 위 내용과 한 덩어리로 이어져 보인다. */
.tabs {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(10px, 2vh, 18px);
}
.tab {
  font-family: inherit;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 500;
  padding: clamp(12px, 2.2vh, 17px) 8px;
  border: 2px solid transparent;
  border-top-color: var(--table-line);
  background: transparent;
  color: var(--ink-60);
  cursor: pointer;
}
.tab.is-active {
  border-top-color: transparent;   /* 이 자리만 선이 끊긴다 */
  border-left-color: var(--table-line);
  border-right-color: var(--table-line);
  border-bottom-color: var(--table-line);
  border-radius: 0 0 14px 14px;
  background: var(--paper-warm);
  color: var(--ink);
  font-weight: 700;
}