/* =========================================================
   다와요 한식뷔페 — 디자인 시스템
   색은 매장 로고에서 실측한 값을 그대로 쓴다.
   ========================================================= */

:root {
  /* ── 브랜드 색 (로고 실측) ───────────────────────── */
  --ink: #1f1a15;          /* 기와지붕 — 본문 텍스트 */
  --ink-soft: #5b504b;     /* 보조 텍스트 */
  --ink-faint: #6f645d;    /* 캡션, 출처 */

  /* 화면에서 쓰는 색은 먹색과 앰버뿐이다.
     로고의 초록·주황은 로고 이미지 안에서만 산다. */
  --yellow: #e0a015;       /* 포인트 — 배지·표식에만 */

  /* 로고 실측색 — 히어로 상호에만 쓴다 */
  --logo-orange: #d66c38;
  --logo-green: #25ad3f;
  --logo-yellow: #f5aa01;
  --yellow-soft: #f2d894;  /* 보조 버튼 */
  --amber-ink: #8a6209;    /* 앰버 계열 글자 */

  /* ── 바탕 ────────────────────────────────────────── */
  --cream: #fbf8f1;
  --cream-2: #f3ece0;
  --white: #ffffff;
  --line: #e7e6e3;    /* 테두리 — 중성 회색 */

  /* ── 형태 ────────────────────────────────────────── */
  --radius: 8px;
  --radius-lg: 12px;
  --maxw: 1400px;
  --header-h: 110px;
  --dock-h: 72px;

  /* ── 그림자 ──────────────────────────────────────── */
  --shadow: 0 10px 30px rgba(34, 24, 22, 0.08);
  --shadow-lg: 0 20px 50px rgba(34, 24, 22, 0.16);

  /* ── 글꼴 ────────────────────────────────────────── */
  --sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "Nanum Myeongjo", serif;
}

/* =========================================================
   리셋
   ========================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* 앵커로 이동할 때 고정 헤더가 제목을 가리지 않게 한다 */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  word-break: keep-all;   /* 한글이 단어 중간에서 줄바꿈되지 않게 */
  /* 등장 효과가 좌우로 100px 밀고 들어오는 동안 가로 스크롤바가 생기지 않게.
     hidden이 아니라 clip이어야 헤더의 position:sticky가 살아 있다. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock-h);  /* 모바일 고정 하단바가 콘텐츠를 덮지 않게 */
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;  /* 하단바는 모바일에서만 뜬다 */
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* 키보드 사용자에게만 포커스 링을 보여준다 */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   레이아웃
   ========================================================= */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 72px 0;
}

/* 레퍼런스는 섹션을 색으로 나누지 않는다. 여백만으로 구분한다.
   클래스는 페이지 마크업에 이미 박혀 있으니 규칙만 비운다. */
.section--tint {
  background: var(--white);
}

@media (min-width: 768px) {
  .section {
    padding: 104px 0;
  }
}

/* =========================================================
   타이포그래피
   ========================================================= */

.h-serif {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.32;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.section-head {
  margin-bottom: 36px;
}

.section-head--center {
  text-align: center;
}

/* 한 섹션 안에 표가 둘일 때 두 번째 제목 위에 숨을 틔운다 */
.section-head--gap {
  margin-top: 56px;
}

.section-head .h-serif {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}
/* 레퍼런스는 섹션 제목 앞에 주황 세로 막대를 세운다 */
.section-head .h-serif::before {
  content: ""; display: inline-block; vertical-align: 0.06em;
  width: 4px; height: 0.82em; margin-right: 14px; border-radius: 2px;
  background: var(--logo-orange);
}
.section-head--center .h-serif::before { display: none; }

.section-desc {
  color: var(--ink-soft);
  margin-top: 12px;
  font-size: 1.24rem;
  line-height: 1.8;
  /* 폭이 1400이라 그냥 두면 한 줄이 너무 길어져 읽기 어렵다 */
  max-width: 62ch;
}

/* =========================================================
   버튼
   채운 버튼은 먹색 하나. 보조는 연한 노랑, 그 외는 선.
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* 주요 행동 */
.btn--lunch { background: var(--ink); color: var(--cream); }
.btn--lunch:hover { background: #3a3028; }

/* 보조 행동 — 연한 노랑 */
.btn--store { background: var(--yellow-soft); color: var(--ink); }
.btn--store:hover { background: #ecca72; }

/* 그 외 */
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

/* =========================================================
   등장 애니메이션
   JS가 화면에 들어온 요소에 .is-visible을 붙인다.
   ========================================================= */

/* 레퍼런스(AOS)는 글은 왼쪽에서, 사진은 오른쪽에서 밀려 들어온다.
   이동 거리도 100px로 크다. 그 방향성과 거리를 그대로 가져왔다. */
.reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.2s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1.2s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.reveal--left  { transform: translateX(-100px); }   /* 왼쪽에서 */
.reveal--right { transform: translateX(100px); }    /* 오른쪽에서 */

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 좁은 화면에서 가로로 100px씩 밀면 가로 스크롤이 생긴다 */
@media (max-width: 900px) {
  .reveal--left,
  .reveal--right { transform: translateY(80px); }
}

/* 동작 최소화를 켠 사용자에게는 애니메이션을 걸지 않는다 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   스크린리더 전용 텍스트
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   레이아웃 보조
   ========================================================= */

.center { text-align: center; margin-top: 32px; }
.center--btns {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.muted { color: var(--ink-faint); font-weight: 400; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* =========================================================
   헤더
   ========================================================= */

.topnav {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.topnav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  height: var(--header-h); display: flex; align-items: center; gap: 22px;
}
.topnav__logo img { height: 62px; width: auto; }

/* 레퍼런스는 항목마다 180px 고정 폭으로 균등 분할하고,
   로고와 전화 버튼 사이 남는 공간 한가운데에 둔다. */
.topnav__nav {
  display: none; flex: 1; justify-content: center; gap: 0;
  font-weight: 400; font-size: 1.125rem; letter-spacing: -0.01em;
}

/* ── 메가 패널 (레퍼런스 gnb) ───────────────────────────
   어느 항목에 올려도 전체 폭 흰 띠가 펼쳐지고,
   모든 갈래의 하위가 각자 부모 아래에 한꺼번에 뜬다. */
.gnb__item { position: relative; width: clamp(120px, 12.6vw, 180px); text-align: center; }
.gnb__top {
  position: relative; display: inline-block;
  padding: 8px 0; white-space: nowrap;
}
.gnb__top.is-on { font-weight: 700; }
.gnb__top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px;
  height: 3px; background: var(--logo-orange);
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.gnb__item:hover .gnb__top::after,
.gnb__item:focus-within .gnb__top::after,
.gnb__top.is-on::after { transform: scaleX(1); }

.gnb__backdrop {
  position: absolute; left: 50%; top: 100%;
  width: 100vw; margin-left: -50vw;
  height: 0; overflow: hidden; z-index: 1;
  background: #fff; border-bottom: 1px solid var(--line);
  transition: height 0.22s ease;
}
.gnb__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 2; padding-top: 22px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.gnb__sub a {
  display: block; padding: 7px 10px; white-space: nowrap;
  font-size: 1rem; color: var(--ink-soft);
  transition: color 0.16s ease;
}
.gnb__sub a:hover { color: var(--ink); font-weight: 600; }

.topnav:has(#gnb:hover) .gnb__backdrop,
.topnav:has(#gnb:focus-within) .gnb__backdrop,
.topnav:has(.gnb__backdrop:hover) .gnb__backdrop { height: 128px; }
.topnav:has(#gnb:hover) .gnb__sub,
.topnav:has(#gnb:focus-within) .gnb__sub,
.topnav:has(.gnb__backdrop:hover) .gnb__sub { opacity: 1; visibility: visible; }

@supports not selector(:has(*)) {
  .gnb__item:hover .gnb__sub,
  .gnb__item:focus-within .gnb__sub { opacity: 1; visibility: visible; background: #fff; }
}

/* ── 배너 아래 띠 — 지금 갈래의 페이지만 ─────────────── */
.subnav { border-bottom: 1px solid var(--line); }
.subnav__inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 34px; padding-top: 20px; padding-bottom: 20px;
}
.subnav a {
  font-size: 1.06rem; color: var(--ink-faint); padding: 4px 0; white-space: nowrap;
  transition: color 0.16s ease;
}
.subnav a:hover { color: var(--ink); }
.subnav a.is-on { color: var(--ink); font-weight: 700; }

/* 오시는 길 지도 */
.map {
  width: 100%; aspect-ratio: 4 / 3; border: 0;
  border-radius: var(--radius); display: block;
  background: #f2f2f0;
}

/* 지도 — 오시는 길 페이지에서는 전체 폭 */
/* 전체 폭 × 21:9 면 1400px에서 높이가 600px이다. 너무 크다. */
.map--wide { aspect-ratio: 21 / 9; max-height: 380px; margin-bottom: 40px; }

.topnav__contact { margin-left: auto; flex: none; text-align: right; }
.topnav__call-label {
  display: none; font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.topnav__call-label .c1 { color: var(--logo-orange); }
.topnav__call-label .c2 { color: var(--logo-green); }
.topnav__call-label .c3 { color: var(--logo-yellow); }
.topnav__call {
  display: inline-flex; align-items: center; min-height: 46px;
  white-space: nowrap;
  padding: 0 22px; border-radius: 999px;
  background: var(--logo-green); color: #fff;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  transition: background-color 0.18s ease;
}
.topnav__call:hover { background: #1c8c31; }
.topnav__call:hover { background: #3a3028; }

@media (min-width: 1120px) {
  .topnav__nav { display: flex; }
  .topnav__contact { margin-left: 0; }
  .topnav__call-label { display: block; }
}

/* =========================================================
   페이지 헤더 (하위 페이지)
   ========================================================= */

/* 배너는 좌우 끝에만 피사체가 있고 가운데가 비어 있다.
   제목이 그 빈자리에 얹히므로 가운데 정렬이고 오버레이가 필요 없다. */
.pagehead { padding: 44px 0 40px; text-align: center; }

/* 본문 머리. 레퍼런스는 왼쪽 정렬이고, 정의 문장이 여기 큰 제목으로 온다. */
.pagelead { padding: 96px 0 80px; }
.pagelead__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  letter-spacing: -0.03em; line-height: 1.45; margin-bottom: 26px;
}
.pagelead__title b,
.section-desc b { color: var(--logo-orange); font-weight: 700; }
/* 설명이 이미 자리를 잡았으니 다음 섹션은 위 여백을 줄인다 */
.pagelead + .section { padding-top: 0; }
.pagehead h1 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  letter-spacing: -0.04em; margin: 0;
}
.pagehead .section-desc { margin-left: auto; margin-right: auto; }

/* 배너는 7.7:1로 아주 납작하다. cover 를 쓰면 좌우 피사체가 잘려
   가운데 빈 배경만 남는다. 폭을 100%로 깔아 통째로 보여주고,
   제목이 그 띠 안에 앉도록 위 여백을 맞춘다. 설명은 띠 아래 흰 바탕에 떨어진다. */
@media (min-width: 900px) {
  /* 띠 높이는 배너 비율(6.89:1)이 정한다. 여백을 vw로 주면 화면이
     넓어질 때 제목이 위로 밀리므로, 높이를 비율로 잡고 가운데에 세운다.
     바탕이 크림(#f9f4ee)이라 흰 본문과 자연스럽게 나뉜다. */
  .pagehead {
    aspect-ratio: 5072 / 736;
    display: grid; align-content: center;
    padding: 0;
    background: #f9f4ee url("/images/pagehead-2400.webp?v=6876408a") center top / 100% auto no-repeat;
  }
}

/* =========================================================
   히어로 (메인)
   ========================================================= */

.hero {
  padding: 64px 0 88px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.hero__inner { text-align: center; }

/* ── 히어로 글 (레퍼런스 3단 구성) ─────────────────── */
.hero__over {
  font-size: clamp(1.15rem, 3vw, 2.6rem);
  font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}
.hero__accent {
  font-size: clamp(1.15rem, 3vw, 2.6rem);
  font-weight: 700; color: var(--logo-orange); letter-spacing: -0.02em;
  margin-top: 4px;
}
.hero__title {
  font-size: clamp(2.4rem, 7vw, 4.25rem);
  line-height: 1.18; letter-spacing: -0.035em;
  margin: 12px 0 24px;
}
/* 로고의 ㄷ·ㅇ·ㅇ 색을 상호에 그대로 옮긴다 */
.hero__title .c1 { color: var(--logo-orange); }
.hero__title .c2 { color: var(--logo-green); }
.hero__title .c3 { color: var(--logo-yellow); }
.hero__tag {
  display: inline-block;
  padding: 13px 28px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: clamp(1.04rem, 2.4vw, 1.38rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink-faint);
}
.hero__tag .c1 { color: var(--logo-orange); }
.hero__tag .c2 { color: var(--logo-green); }
.hero__tag .c3 { color: var(--logo-yellow); }

/* 마우스를 올리면 어떤 사업인지 뜬다 */
.hero__cap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  background: rgba(31, 26, 21, 0.62);
  opacity: 0; transition: opacity 0.26s ease;
}
.hero__cap strong { color: #fff; font-size: 1.06rem; letter-spacing: -0.02em; }
.hero__cap em {
  font-style: normal; font-size: 0.86rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 34px;
}
.hero__grid a {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero__grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.hero__grid a:hover .hero__cap,
.hero__grid a:focus-visible .hero__cap { opacity: 1; }
.hero__grid a:hover img { transform: scale(1.05); }

@media (min-width: 900px) {
  .hero__inner {
    display: grid; grid-template-columns: 1fr 1.15fr;
    align-items: center; column-gap: 56px; text-align: left;
  }
  .hero__grid { margin-top: 0; gap: 14px; }
}

/* =========================================================
   2단 분할
   ========================================================= */

.split { display: grid; gap: 32px; align-items: center; }
.split__media img { width: 100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow); }
.split__body h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 12px; }

@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split--rev .split__media { order: 2; }
}

/* =========================================================
   갤러리
   ========================================================= */

.shots {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.shot { position: relative; border-radius: 10px; overflow: hidden; background: #f2f2f0; }
.shot img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; cursor: zoom-in; transition: transform 0.35s ease; }
.shot:hover img { transform: scale(1.05); }
.shot__date {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px;
  background: rgba(34, 24, 22, 0.62); color: #fff; font-size: 0.72rem; font-weight: 600;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.shot:hover .shot__date { opacity: 1; }
.shot.is-hidden { display: none; }

@media (min-width: 700px) {
  .shots { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
}

.blogcta { padding-bottom: 24px; }

/* =========================================================
   가격 카드
   ========================================================= */

.prices { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.price { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.price__body { padding: 18px 20px 22px; }
.price__body strong { display: block; font-size: 1.06rem; }
.price__body em { display: block; font-style: normal; font-size: 0.88rem; color: var(--ink-faint); margin-top: 3px; }

/* =========================================================
   운영 규칙
   ========================================================= */

.rules { display: grid; gap: 12px; counter-reset: r; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rules li {
  counter-increment: r; position: relative; padding: 20px 22px 20px 60px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 500;
}
.rules li::before {
  content: counter(r); position: absolute; left: 20px; top: 18px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--cream);
  font-size: 0.82rem; font-weight: 700; display: grid; place-items: center;
}

/* =========================================================
   영업시간 표
   ========================================================= */

/* 레퍼런스는 표를 상자로 두르지 않는다. 위에 주황 굵은 선 하나,
   행 사이 옅은 선. 라벨 칸에 배경을 깔면 표가 아니라 블록으로 보인다. */
.hours { background: none; border: 0; border-top: 2px solid var(--logo-orange); }
.hours th, .hours td { padding: 22px 4px; text-align: left; font-size: 1.06rem;
  border-bottom: 1px solid var(--line); }
.hours th { width: 22%; font-weight: 700; vertical-align: top; }
.hours td { font-weight: 500; color: var(--ink); }
.hours .brk { display: block; margin-top: 5px; font-size: 0.98rem; font-weight: 400; color: var(--ink-faint); }
.hours .off { color: var(--ink-faint); }

@media (max-width: 559px) {
  .hours th { width: 32%; }
  .hours th, .hours td { padding: 16px 2px; }
}

/* =========================================================
   CTA 배너
   푸터와 같은 어두운 색을 쓰면 둘이 하나의 긴 덩어리로 보인다.
   브랜드 초록을 써서 '연락하는 자리'임을 색으로 구분한다.
   ========================================================= */

.cta { background: #faf9f7; color: var(--ink); padding: 64px 0;
  border-top: 1px solid var(--line); }
.cta__inner {
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-start; justify-content: space-between;
}
.cta__eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; color: var(--ink-faint); }
.cta__lead { font-size: clamp(1.3rem, 3.4vw, 1.75rem); margin: 8px 0 10px; color: var(--ink); }
.cta__note { font-size: 0.9rem; color: var(--ink-soft); }

.cta__phone {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: none; transition: opacity 0.18s ease;
}
.cta__phone:hover { opacity: 0.72; }
.cta__phone span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-soft); }
.cta__phone strong {
  font-family: var(--sans); font-weight: 800; color: var(--logo-orange);
  font-size: clamp(2.1rem, 7vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.05;
}

@media (min-width: 780px) {
  .cta { padding: 54px 0; }
  .cta__inner { flex-direction: row; align-items: center; gap: 40px; }
}

/* =========================================================
   푸터
   정보를 세로로 길게 나열하면 페이지가 늘어져 보인다. 가로 격자로 묶는다.
   ========================================================= */

.foot { background: #1a1210; color: rgba(250, 247, 240, 0.82); padding: 42px 0 32px; font-size: 0.9rem; }

.foot__top {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: center; justify-content: space-between;
  padding-bottom: 22px; border-bottom: 1px solid rgba(250,247,240,0.1);
}
.foot__brand img { width: 100px; height: auto; }
.foot__micro { margin-top: 8px; color: rgba(250, 247, 240, 0.66); font-size: 0.85rem; }

.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.foot__links a { color: rgba(250,247,240,0.82); }
.foot__links a:hover { color: var(--yellow); }

.foot__info {
  margin: 22px 0 0; display: grid; gap: 9px 32px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.foot__info > div { display: flex; gap: 10px; }
.foot__info dt { flex: none; width: 90px; color: rgba(250, 247, 240, 0.62); }
.foot__info dd { color: rgba(250,247,240,0.86); }

@media (min-width: 920px) {
  .foot__info { grid-template-columns: repeat(4, 1fr); }
  .foot__info--wide { grid-column: span 2; }
}

.foot__copy { margin-top: 24px; font-size: 0.8rem; color: rgba(250, 247, 240, 0.55); }

/* =========================================================
   모바일 고정 하단바
   ========================================================= */

.dockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 247, 240, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.dockbar__call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; border-radius: 8px; background: var(--ink); color: var(--cream);
  font-weight: 700; font-size: 1rem;
}
.dockbar__call strong { font-size: 1.06rem; }

@media (min-width: 768px) { .dockbar { display: none; } }

/* =========================================================
   라이트박스
   ========================================================= */

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(20, 14, 12, 0.92); place-items: center; padding: 24px;
}
.lightbox.is-open { display: grid; }
.lightbox__img { max-width: min(100%, 1000px); max-height: 82vh; border-radius: 10px; }
.lightbox__cap { position: absolute; bottom: 22px; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }
.lightbox button {
  position: absolute; background: rgba(255, 255, 255, 0.12); border: 0; color: #fff;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; cursor: pointer;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
body.no-scroll { overflow: hidden; }

/* =========================================================
   슬라이드 (매일 이렇게 차렸습니다)
   한 장씩 보여주고 자동으로 넘긴다.
   ========================================================= */

.slideshow { margin-top: 6px; }

.slideshow__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.slideshow__tab {
  padding: 9px 20px; border: 1.5px solid var(--line); border-radius: 999px;
  background: transparent; font-family: var(--sans); font-size: 0.94rem; font-weight: 700;
  color: var(--ink-soft); cursor: pointer; transition: all 0.16s ease;
}
.slideshow__tab:hover { border-color: var(--ink-faint); }
.slideshow__tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.slideshow__stage:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.slideshow__stage {
  position: relative; margin: 0 auto; max-width: 720px;
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: #f2f2f0; box-shadow: var(--shadow-lg);
}
.slideshow__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s ease;
}
.slideshow__stage img.is-on { opacity: 1; }

.slideshow__meta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  margin-top: 16px; font-size: 0.9rem; color: var(--ink-faint);
}

/* 점이 16개면 26px씩 잡아 좁은 화면을 넘친다.
   작은 화면에서는 점 대신 "3 / 16" 으로 알린다. */
.slideshow__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.slideshow__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
/* 점은 작게 보이되 실제 버튼은 26px다.
   background-clip: content-box 로 안쪽 8px에만 색을 칠한다.
   가짜 영역(::after)은 손가락에는 통해도 검사 도구에는 안 통한다. */
.slideshow__dot {
  width: 26px; height: 26px; padding: 9px; border: 0;
  box-sizing: border-box; border-radius: 50%;
  background: var(--line); background-clip: content-box;
  cursor: pointer; transition: background-color 0.2s ease;
}
.slideshow__dot.is-on { background: var(--yellow); padding: 7px; }

@media (prefers-reduced-motion: reduce) {
  .slideshow__stage img { transition: none; }
}

/* =========================================================
   사례 (이동급식)
   ========================================================= */

.case { display: grid; gap: 26px; }
.case__shots { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.case__shots img {
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.case__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-faint); }
.case__title { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 8px 0 10px; }
.case__body .btn { margin-top: 20px; }

@media (min-width: 860px) {
  .case { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 44px; }
}

/* =========================================================
   혜택 안내
   상자에 담지 않는다. 문장 그대로 두고 굵기로만 짚는다.
   ========================================================= */

/* =========================================================
   사례 (이동급식)
   ========================================================= */

.case { display: grid; gap: 26px; }
.case__shots { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.case__shots img {
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.case__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-faint); }
.case__title { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 8px 0 10px; }
.case__body .btn { margin-top: 20px; }

@media (min-width: 860px) {
  .case { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 44px; }
}

.slideshow__date {
  font-size: 0.92rem; font-weight: 600; color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* 슬라이드 좌우 화살표 — 사진 위에 얹되 방해하지 않게 */
.slideshow__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(31, 26, 21, 0.42); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease;
}
.slideshow__stage:hover .slideshow__arrow,
.slideshow__arrow:focus,
.slideshow__arrow:focus-visible { opacity: 1; }
.slideshow__stage:focus-within .slideshow__arrow { opacity: 1; }
.slideshow__arrow:hover { background: rgba(31, 26, 21, 0.68); }
.slideshow__arrow--prev { left: 12px; }
.slideshow__arrow--next { right: 12px; }

/* 손가락으로 쓰는 화면에서는 늘 보이게 */
@media (hover: none) {
  .slideshow__arrow { opacity: 1; background: rgba(31, 26, 21, 0.36); }
}

/* 본문 뒤에 바로 붙는 버튼은 숨 쉴 자리를 준다 */
.section-desc + .btn,

/* 목록 자체도 아래쪽 여백을 갖는다 */
.split__body 
/* =========================================================
   정보 카드
   항목과 값만 둔다. 눈이 값을 찾으러 왼쪽 라벨을 훑고
   오른쪽에서 답을 얻는 구조.
   ========================================================= */

.facts {
  margin-top: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-faint); font-size: 0.92rem; }
.facts dd { color: var(--ink); font-size: 1rem; font-weight: 500; }
.facts dd b { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.facts dd span { color: var(--ink-faint); font-weight: 400; font-size: 0.9rem; }
.facts dd span::before { content: " · "; }

@media (max-width: 480px) {
  .facts > div { grid-template-columns: 84px 1fr; gap: 12px; padding: 13px 16px; }
}

.facts + .btn { margin-top: 26px; }

/* =========================================================
   오늘의 메뉴 — 블로그 최신글
   ========================================================= */

/* =========================================================
   인쇄
   등장 애니메이션은 화면에 들어와야 나타난다. 인쇄할 땐 스크롤이
   없으므로 안 나타난 섹션이 통째로 빈다. 여기서 되돌린다.
   ========================================================= */

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .topnav, .dockbar, .slideshow__arrow, .slideshow__dots,
  .lightbox { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .section { padding: 24px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.82em; color: #666; }
}

/* 점 16개는 26px씩 잡아 좁은 화면을 넘친다.
   작은 화면에서는 점 대신 "3 / 16" 으로 알린다.
   ─ 이 규칙은 .slideshow__dots 정의보다 뒤에 있어야 이긴다. */
@media (min-width: 560px) {
  .slideshow__count { display: none; }
}
@media (max-width: 559px) {
  .slideshow__dots { display: none; }
}

/* 사진을 버튼으로 감싼다 — img는 포커스를 못 받아 키보드로 열 수 없다 */
.shot__btn {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; border-radius: inherit;
}
.shot__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* =========================================================
   움직임

   목적 있는 것만 넣는다.
   - 첫 화면: 한 번의 등장으로 시선 순서를 만든다
   - 스크롤: 헤더가 줄어 내용에 자리를 내준다
   - 손이 닿는 곳: 눌리는 느낌을 준다
   전부 prefers-reduced-motion 에서 꺼진다.
   ========================================================= */

/* ── 첫 화면 등장 ─────────────────────────────────── */
.hero__over,
.hero__accent,
.hero__title,
.hero__tag {
  animation: rise 0.72s cubic-bezier(0.16, 0.84, 0.44, 1) backwards;
}
.hero__over   { animation-delay: 0.06s; }
.hero__accent { animation-delay: 0.14s; }
.hero__title  { animation-delay: 0.22s; }
.hero__tag    { animation-delay: 0.32s; }

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

/* ── 헤더: 스크롤하면 줄어든다 ────────────────────── */

/* ── 사진: 확대 ──────────────────────────────────── */
.shot img { transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1); }
.shot:hover img { transform: scale(1.06); }

/* ── 스크롤 등장: 사진은 조금씩 시차를 둔다 ────────── */
.shots .shot { transition-delay: calc(var(--i, 0) * 26ms); }

/* ── 누르는 느낌 ─────────────────────────────────── */
.btn:active { transform: translateY(1px); }

/* ── 라이트박스: 열릴 때 살짝 커진다 ──────────────── */
.lightbox { opacity: 0; transition: opacity 0.22s ease; }
.lightbox.is-open { opacity: 1; }
.lightbox__img { transform: scale(0.97); transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1); }
.lightbox.is-open .lightbox__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__over, .hero__accent, .hero__title, .hero__tag { animation: none; }
  .shot:hover img { transform: none; }
  .topnav__inner, .topnav__logo img { transition: none; }
  .lightbox, .lightbox__img { transition: none; }
}

/* =========================================================
   브랜드 이야기
   정보가 아니라 얼굴을 보여주는 자리. 문장이 주인공이다.
   ========================================================= */

/* =========================================================
   사업 세 가지 (레퍼런스 section01)
   컬러 라운드 타일 아이콘, 세로로 쌓고 가운데 정렬.
   ========================================================= */

.services { background: var(--white); border-bottom: 1px solid var(--line); }
.services__list {
  display: grid; gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: center;
}
.services__list a { display: block; }
.services__tile {
  position: relative;
  display: grid; place-content: center;
  width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 20px; background: var(--c);
  transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1),
              box-shadow 0.28s ease;
}
/* 타일 뒤로 같은 색 고리가 퍼진다 */
.services__tile::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; border: 2px solid var(--c);
  opacity: 0; transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.services__tile svg {
  width: 44px; height: 44px;
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.services__list strong {
  display: block; font-size: 1.18rem; letter-spacing: -0.02em;
  transition: color 0.2s ease;
}
.services__list em {
  display: block; font-style: normal; margin-top: 10px;
  font-size: 1.06rem; color: var(--ink-soft);
}

/* 마우스를 올리면 타일이 떠오르고, 고리가 밖으로 번지고, 이름이 그 색이 된다 */
.services__list a:hover .services__tile {
  transform: translateY(-8px);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--c) 38%, transparent);
}
.services__list a:hover .services__tile::after { opacity: 0.45; transform: scale(1.22); }
.services__list a:hover .services__tile svg { transform: scale(1.08); }
.services__list a:hover strong { color: var(--c); }

/* 세 칸이 차례로 올라온다 */
.services__list li:nth-child(2) { transition-delay: 0.12s; }
.services__list li:nth-child(3) { transition-delay: 0.24s; }

/* 좁은 화면에서는 세로로 쌓으면 한 칸이 화면 3분의 1을 먹는다.
   레퍼런스처럼 아이콘을 왼쪽에 두고 가로로 눕힌다. */
@media (max-width: 720px) {
  .services { padding: 36px 0; }
  .services__list { gap: 12px; text-align: left; }
  .services__list li {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .services__list a {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 18px;
  }
  .services__tile {
    width: 76px; height: 76px; margin: 0; flex: none;
    border-radius: 16px;
  }
  .services__tile svg { width: 40px; height: 40px; }
  .services__list strong { font-size: 1.12rem; }
  .services__list em { margin-top: 6px; font-size: 0.98rem; }
  /* 손가락 화면에서는 떠오르는 효과가 안 보인다 */
  .services__list a:hover .services__tile { transform: none; box-shadow: none; }

}

/* =========================================================
   브랜드 한 줄 (레퍼런스 section02)
   매장 사진 위에 어둡게 깔고 흰 글씨.
   ========================================================= */

.brandband {
  position: relative;
  padding: 104px 0;
  background: var(--ink) url("/images/special.webp?v=84e24fc7") center / cover no-repeat;
  background-attachment: fixed;   /* 스크롤하면 사진이 천천히 따라온다 */
}
.brandband::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(24, 20, 16, 0.76);
}
/* 모바일에서 fixed 배경은 렌더링이 튄다 */
@media (max-width: 900px) {
  .brandband { background-attachment: scroll; }
}
.brandband__inner { position: relative; max-width: 640px; }
.brandband .eyebrow { color: rgba(255, 255, 255, 0.72); }
.brandband__lead {
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.45; letter-spacing: -0.03em;
  color: #fff; margin: 4px 0 20px;
}
.brandband__body {
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.9; color: rgba(255, 255, 255, 0.86);
  margin-bottom: 28px;
}

/* =========================================================
   강점
   번호를 크게 두어 순서가 있는 약속처럼 읽히게 한다.
   ========================================================= */

.merits { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.merits li { background: var(--white); padding: 30px 28px; }
.merits__no {
  font-family: var(--serif); font-size: 0.9rem; font-weight: 700;
  color: var(--amber-ink); letter-spacing: 0.1em; margin-bottom: 12px;
}
.merits__title { font-size: 1.16rem; margin-bottom: 10px; letter-spacing: -0.02em; }
.merits__body { font-size: 1.04rem; line-height: 1.8; color: var(--ink-soft); }

@media (min-width: 700px)  { .merits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .merits { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   바로가기 4칸
   영문 라벨 + 국문 제목. 메인은 관문이므로 여기서 갈라진다.
   ========================================================= */

.links { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.links a {
  display: block; background: var(--white); padding: 30px 26px; height: 100%;
  transition: background-color 0.2s ease;
}
.links a:hover { background: #faf8f4; }
.links__en {
  display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ink-faint); text-transform: uppercase; margin-bottom: 12px;
}
.links strong { display: block; font-size: 1.16rem; letter-spacing: -0.02em; }
.links em {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 0.92rem; color: var(--ink-soft);
}
.links a::after {
  content: "→"; display: inline-block; margin-top: 16px;
  color: var(--ink-faint); transition: transform 0.24s ease, color 0.2s ease;
}
.links a:hover::after { transform: translateX(4px); color: var(--ink); }

@media (min-width: 700px)  { .links { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .links { grid-template-columns: repeat(4, 1fr); } }

/* 점 옆 화살표 — 사진 위 화살표는 마우스를 올려야 보이므로 여기도 둔다 */
.slideshow__nav { display: inline-flex; gap: 4px; }
.slideshow__step {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.slideshow__step:hover { border-color: var(--ink); color: var(--ink); }

/* =========================================================
   좁은 화면 메뉴 (햄버거)
   1120px 아래에서는 메뉴가 다 안 들어간다. 감추기만 하면
   하위 페이지로 갈 길이 없어지므로 서랍으로 옮긴다.
   ========================================================= */

.topnav__burger {
  display: grid; gap: 5px; place-content: center;
  width: 46px; height: 46px; margin-left: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; cursor: pointer; flex: none;
}
.topnav__burger span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform 0.24s ease, opacity 0.18s ease;
}
.topnav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topnav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 오른쪽에서 밀려 나오는 패널. hidden 은 열기 직전에 벗겨야
   transform 전환이 보인다 — display:none 상태에서는 애니메이션이 없다. */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(78vw, 340px);
  background: #fff;
  padding: 76px 26px 32px;
  box-shadow: -14px 0 40px rgba(42, 36, 52, 0.14);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateX(0); }

.drawer__dim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 20, 16, 0.42);
  opacity: 0; transition: opacity 0.28s ease;
}
.drawer__dim[hidden] { display: none; }
.drawer__dim.is-open { opacity: 1; }

.drawer__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-faint);
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: color 0.18s ease;
}
.drawer__close:hover { color: var(--ink); }
/* 열자마자 초점을 주면 동그란 링이 그려진다. 링은 키보드에서만 보인다. */
.drawer__close:focus { outline: none; }
.drawer__close:focus-visible { outline: 3px solid var(--ink); outline-offset: -4px; }

.drawer__nav { display: grid; }

/* 레퍼런스처럼 상위 갈래만 보이고 ⌄ 를 눌러 펼친다 */
.dnav__top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 2px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.14rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); text-align: left;
}
.dnav__caret {
  width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.24s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.dnav__top[aria-expanded="true"] .dnav__caret {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.dnav__sub { display: grid; padding: 0 0 14px 12px; }
.dnav__sub[hidden] { display: none; }
.dnav__sub a {
  padding: 11px 2px; font-size: 1.02rem; color: var(--ink-soft);
}
.dnav__sub a:hover { color: var(--ink); }
.dnav__item + .dnav__item { border-top: 1px solid var(--line); }

.drawer__call { width: 100%; margin-top: 26px; }
.drawer__note {
  margin-top: 14px; text-align: center; line-height: 1.7;
  font-size: 0.9rem; font-weight: 600; color: var(--ink-faint);
}

/* 서랍이 열리면 뒤 내용은 스크롤하지 않는다.
   하단 전화바는 z-index 가 같아 덮개 위로 떠오르므로 아예 감춘다. */
body.drawer-open { overflow: hidden; }
body.drawer-open .dockbar { display: none; }

@media (min-width: 1120px) {
  .topnav__burger { display: none; }
  .drawer { display: none !important; }
}

@media (max-width: 640px) {
  /* 전화 버튼이 사라지면 햄버거를 밀어줄 것이 없어진다. 직접 오른쪽으로 보낸다. */
  .topnav__contact { display: none; }
  .topnav__burger { margin-left: auto; }
}

/* 브랜드 이야기 옆 매장 사진 */
.story__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.story__shots img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
/* 매장이 어떤 곳인지 보여주는 유일한 사진이다. 넉넉하게 쓴다. */
.story__shots--wide { margin-top: 48px; max-width: 1040px; }

@media (min-width: 900px) {
  .story__shots { grid-template-columns: 1fr; gap: 14px; }
  .story__shots img { aspect-ratio: 16 / 10; }
  .story__shots--wide { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   사진 묶음 — 상세 페이지에서 갤러리로 가는 입구
   ========================================================= */

.strip {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 26px;
}
.strip a {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius);
}
.strip img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.strip a:hover img { transform: scale(1.06); }
.strip__date {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 9px; border-radius: var(--r-sm, 5px);
  background: rgba(31, 26, 21, 0.6); color: #fff;
  font-size: 0.74rem; font-weight: 600;
  opacity: 0; transition: opacity 0.2s ease;
}
.strip a:hover .strip__date { opacity: 1; }

@media (min-width: 620px)  { .strip { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1000px) { .strip { grid-template-columns: repeat(6, 1fr); } }

/* =========================================================
   아이콘 카드 (레퍼런스 '이동식 급식의 장점')
   흰 카드 + 옅은 테두리. 위에 선 아이콘, 아래 한 줄.
   ========================================================= */

.icons {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.icons li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 30px 30px;
}
.icons svg { width: 46px; height: 46px; display: block; }
.icons svg .ln { stroke: #8b8b8b; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.icons svg .ac { stroke: var(--logo-orange); stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
/* 레퍼런스는 제목 없이 한 줄뿐이다. 문장이 아니라 사양 목록이라
   말투가 드러나지 않는다. */
.icons p { margin-top: 26px; font-size: 1.06rem; line-height: 1.7; color: var(--ink); }

/* =========================================================
   원형 배지 (레퍼런스 '4가지 만족')
   사진을 도넛으로 두르고 가운데 흰 원에 한 마디.
   ========================================================= */

.rounds {
  display: grid; gap: 32px 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}
.rounds__ring {
  position: relative; width: min(220px, 100%); aspect-ratio: 1;
  margin: 0 auto; border-radius: 50%; overflow: hidden;
}
.rounds__ring img { width: 100%; height: 100%; object-fit: cover; }
/* 색 덮개는 사진 위, 가운데 흰 원 아래에 놓여야 한다 */
.rounds__ring::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--c); opacity: 0.42;
}
.rounds__ring b {
  position: absolute; inset: 21%; z-index: 2; border-radius: 50%;
  background: #fff; display: grid; place-content: center;
  color: var(--c); font-size: 1.14rem; letter-spacing: -0.03em;
}
.rounds p {
  margin-top: 20px; font-size: 1.04rem; line-height: 1.75; color: var(--ink-soft);
}

/* =========================================================
   가로형 카드 (레퍼런스 '메뉴관리')
   원형 아이콘 왼쪽, 번호·제목·본문 오른쪽. 세로로 쌓는다.
   ========================================================= */

.rows { display: grid; gap: 14px; }
.rows li {
  display: flex; align-items: center; gap: 40px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px 44px;
}
.rows__ico {
  flex: none; width: 100px; height: 100px; border-radius: 50%;
  background: #f4f4f2; display: grid; place-content: center;
}
.rows__ico svg { width: 50px; height: 50px; }
.rows__ico svg .ln { stroke: #8b8b8b; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.rows__ico svg .ac { stroke: var(--logo-orange); stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.rows__no { color: var(--logo-orange); font-weight: 700; margin-right: 8px; }
.rows h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.rows p { margin-top: 8px; font-size: 1.04rem; line-height: 1.75; color: var(--ink-soft); }

@media (max-width: 559px) {
  .rows li { gap: 20px; padding: 22px 20px; }
  .rows__ico { width: 60px; height: 60px; }
  .rows__ico svg { width: 32px; height: 32px; }
}

/* =========================================================
   약속 (레퍼런스 '한올푸드의 약속')
   카드 없이 구분선만. 번호는 주황, 제목은 굵게.
   ========================================================= */

.pledge { display: grid; border-top: 2px solid var(--logo-orange); }
.pledge li { padding: 26px 4px; border-bottom: 1px solid var(--line); }
.pledge h3 { font-size: 1.04rem; letter-spacing: -0.02em; }
.pledge h3 span { color: var(--logo-orange); margin-right: 8px; }
.pledge p { margin-top: 8px; font-size: 1.04rem; line-height: 1.8; color: var(--ink-soft); }

/* 사장님 서명 — 인사말 끝 */
/* =========================================================
   매장 소개 머리 (레퍼런스 about)
   인사말과 심볼. 전부 가운데 정렬.
   ========================================================= */

.intro { text-align: center; }
.intro__lead {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.55; letter-spacing: -0.025em;
  max-width: 22em; margin: 0 auto;
}

/* 로고의 ㄷ·ㅇ·ㅇ 색을 그대로 쓴 심볼 */
.intro__marks {
  display: flex; justify-content: center; gap: 14px;
  margin: 40px 0;
}
.intro__marks li {
  width: 68px; height: 68px; border-radius: 18px;
  display: grid; place-content: center;
  font-family: var(--serif); font-size: 1.9rem; font-weight: 800;
  color: #fff; line-height: 1;
}
.intro__marks .m1 { background: var(--logo-orange); }
.intro__marks .m2 { background: var(--logo-green); }
.intro__marks .m3 { background: var(--logo-yellow); }

.intro__quote {
  font-size: clamp(1.06rem, 2.4vw, 1.24rem);
  color: var(--ink); margin-bottom: 22px;
}
.intro__quote b { color: var(--logo-orange); }
.intro__body {
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  line-height: 1.9; color: var(--ink-soft);
  margin-bottom: 14px;
}
.intro__body:last-of-type { margin-bottom: 0; }
.intro .story__shots--wide { margin: 48px auto 0; }

/* 사장님 서명 — 인사말 끝 */
.intro__sign { margin-top: 22px; font-size: 0.98rem; color: var(--ink-faint); }

@media (max-width: 559px) {
  .intro__marks li { width: 56px; height: 56px; border-radius: 15px; font-size: 1.5rem; }
}

/* =========================================================
   모바일 다듬기
   ========================================================= */

@media (max-width: 899px) {
  /* 손가락으로 누르는 곳은 최소 44px. 서브 메뉴와 푸터 링크가 24~37px였다. */
  .subnav a { padding: 12px 0; }
  .foot__links a { padding: 10px 0; }
  .foot__info a { display: inline-block; padding: 6px 0; }

  /* 배너는 6.89:1이라 390px 화면에서 띠 높이가 57px밖에 안 된다.
     음식이 실오라기처럼 깔리고 제목만 아래로 밀린다.
     이미지를 빼고 배너와 같은 크림 바탕만 남긴다. */
  .pagehead {
    padding: 40px 0 36px;
    background: #f9f4ee;
  }

  /* 데스크톱 여백(96/80px)은 390px 화면에서 너무 크다 */
  .hero { padding: 36px 0 40px; }
  .pagelead { padding: 44px 0 40px; }
  .subnav__inner { padding-top: 14px; padding-bottom: 14px; }
  .section { padding: 56px 0; }
}

/* 손가락 화면에서는 사진 설명이 늘 떠 있다.
   두 줄로 넘어가면 윗줄이 어두운 자리를 벗어나 안 읽힌다. */
@media (hover: none) {
  .hero__cap {
    background: linear-gradient(180deg,
      rgba(31, 26, 21, 0.1) 0%, rgba(31, 26, 21, 0.55) 45%, rgba(31, 26, 21, 0.88) 100%);
  }
  .hero__cap strong { font-size: 1rem; }
  .hero__cap em { font-size: 0.82rem; }
}

/* =========================================================
   사진 격자 — 한 줄짜리 strip 보다 크게 보여야 할 때
   ========================================================= */

.photogrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.photogrid a {
  position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
}
.photogrid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.photogrid a:hover img { transform: scale(1.05); }
.photogrid .strip__date {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(31, 26, 21, 0.62); color: #fff;
  font-size: 0.78rem; font-weight: 600;
}

@media (max-width: 720px) {
  .photogrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =========================================================
   좁은 화면 마무리 — 뒤에 오는 기본 규칙에 덮이지 않도록 파일 끝에 둔다
   ========================================================= */

@media (max-width: 720px) {
  /* 레퍼런스는 좁은 화면에서도 아이콘 카드를 2열로 깐다.
     1열이면 카드 하나가 화면을 가로질러 허전하다. */
  .icons { grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: center; }
  .icons li { padding: 26px 16px 24px; }
  .icons svg { margin: 0 auto; }
  .icons p { margin-top: 18px; font-size: 0.98rem; line-height: 1.6; }

  /* 가로형 카드도 좁은 화면에서는 아이콘이 자리를 많이 먹는다 */
  .rows li { gap: 20px; padding: 22px 20px; }
  .rows__ico { width: 64px; height: 64px; }
  .rows__ico svg { width: 34px; height: 34px; }
  .rows h3 { font-size: 1.08rem; }
  .rows p { font-size: 0.98rem; }

  /* 원형 배지 2열 */
  .rounds { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .rounds__ring { width: min(160px, 100%); }
  .rounds__ring b { font-size: 0.98rem; }
  .rounds p { margin-top: 14px; font-size: 0.95rem; }

  .pledge li { padding: 22px 2px; }
  .case__shots { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}