@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Noto+Serif+KR:wght@300;400;500&display=swap");

/* ═══════════════════════════════════════════════════════
   CSC FNB — 디자인 토큰
   명도 구조는 fluid.glass 실측(2톤 교대·강조색 0개)을 따르되,
   보유 사진이 전부 저조도라 명암을 반전시켰다.
   한글 타이포 값은 국내 고급 외식 사이트 실측치 기준.
   ═══════════════════════════════════════════════════════ */
:root {
  /* 면 — 순흑 금지. 따뜻한 먹색 계열 */
  --c-void:   #0E0A07;
  --c-base:   #16110D;
  --c-raise:  #1F1913;
  --c-cream:  #F2EBE0;
  --c-mute:   #A2968A;
  --c-line:   rgba(242, 235, 224, .12);
  --c-line-s: rgba(242, 235, 224, .28);

  /* 신호 — 면으로 쓰지 않는다. 화면 면적 1% 이하 */
  --c-signal: #F2662A;   /* 어두운 배경 기준 대비 6.0:1 */
  --c-gold:   #C6A661;

  /* 브랜드 — 각 브랜드 구획에서만 등장 */
  --b-italyguksi: #A47555;
  --b-dosan:      #D61618;
  --b-woodook:    #6B4A2F;

  /* 서체 3역할: 디스플레이 / 본문 / 라벨 */
  --f-display: "Cormorant Garamond", "Noto Serif KR", serif;
  --f-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --f-label: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;

  /* 타이포 — 한글은 같은 px에서 영문보다 시각적 부피가 크다.
     국내 고급 외식 사이트 실측(다인힐 히어로 36px / 비채나 제목 29px)을 감안해
     영문 사이트 기준보다 한 단계 낮춰 잡았다. */
  --t-label:   clamp(10px, 0.72vw, 12px);
  --t-caption: clamp(12px, 0.85vw, 14px);
  --t-body:    clamp(15px, 1.02vw, 17px);
  --t-lead:    clamp(17px, 1.35vw, 22px);
  --t-h3:      clamp(19px, 1.55vw, 26px);
  --t-h2:      clamp(26px, 2.5vw, 42px);
  --t-h1:      clamp(30px, 3.4vw, 56px);
  --t-display: clamp(34px, 4.6vw, 74px);

  /* 여백 */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2.5rem;
  --s-5: 4rem;   --s-6: 6rem;   --s-7: 9rem;   --s-8: 14rem;
  --pad: clamp(20px, 4vw, 64px);
  --measure: 62ch;
  --ratio-p: .811;              /* 세로 크롭 단일 비율 */

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
}

/* ═══ 리셋 ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
img, video { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }

body {
  background: var(--c-base);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -.02em;      /* 한글은 조인다 */
  word-break: keep-all;        /* 한글 페이지의 첫 번째 규칙 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* ═══ 타이포 ═══ */
.label {
  font-family: var(--f-label);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .2em;         /* 영문 대문자는 벌린다 */
  color: var(--c-mute);
  font-weight: 500;
}
.label--signal { color: var(--c-signal) }

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 400;             /* 굵기로 힘주지 않는다 */
  letter-spacing: -.03em;
  line-height: 1.16;            /* 한글은 1.0이면 답답하다 */
}
.h1 { font-size: var(--t-h1) }
.h2 { font-size: var(--t-h2) }
.h3 { font-size: var(--t-h3); line-height: 1.35 }
.display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.04em }

.lead { font-size: var(--t-lead); line-height: 1.65; font-weight: 300 }
.muted { color: var(--c-mute) }
.measure { max-width: var(--measure) }
.caption { font-size: var(--t-caption); color: var(--c-mute); line-height: 1.6 }

/* ═══ 레이아웃 ═══ */
.wrap { padding-inline: var(--pad) }
.grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--s-3) }
section { position: relative }
.sec { padding-block: clamp(64px, 7.5vw, 124px) }
.sec--tight { padding-block: clamp(48px, 5vw, 80px) }
.sec--dark { background: var(--c-void) }

.rule { height: 1px; background: var(--c-line); border: 0 }

/* 풀블리드 — 미디어는 화면 끝까지, 글자는 좁게 (실측 공통 규칙) */
.bleed { margin: clamp(48px, 6vw, 96px) calc(var(--pad) * -1) 0; position: relative }
.bleed img { width: 100%; aspect-ratio: 16/7; object-fit: cover }
.bleed figcaption { padding: var(--s-2) var(--pad) 0; max-width: 46ch }

/* 섹션 머리 — 라벨 + 제목을 24컬럼에 비대칭으로 */
.sechead { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--s-3); align-items: start }
.sechead__label { grid-column: 1 / 6 }
.sechead__body { grid-column: 7 / 20 }
.sechead__label::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  background: var(--c-signal); margin-right: .8em; vertical-align: .25em;
}

/* ═══ 내비 ═══ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--pad);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(14, 10, 7, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--c-line);
}
.nav__logo img { height: 26px; width: auto; display: block }
.nav__menu { display: flex; gap: clamp(16px, 2vw, 34px); align-items: center }
.nav__menu a {
  font-family: var(--f-label); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: .18em; color: var(--c-mute);
  transition: color .3s var(--ease); position: relative; padding-block: 4px;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--c-signal); transition: width .4s var(--ease);
}
.nav__menu a:hover { color: var(--c-cream) }
.nav__menu a:hover::after { width: 100% }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px }
.nav__toggle span { display: block; width: 22px; height: 1px; background: var(--c-cream); margin: 5px 0 }

/* ═══ 히어로 ═══ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden }
.hero__media { position: absolute; inset: 0 }
.hero__media img { width: 100%; height: 100%; object-fit: cover }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,10,7,.72) 0%, rgba(14,10,7,.30) 42%, rgba(22,17,13,.96) 100%);
}
.hero__inner { position: relative; width: 100%; padding-bottom: clamp(48px, 7vw, 104px) }
.hero__title { max-width: 18ch }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c-line);
}
.hero__meta div { min-width: 96px }
.hero__meta dt { font-family: var(--f-label); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .18em; color: var(--c-mute) }
.hero__meta dd { font-family: var(--f-display); font-size: var(--t-h3); margin-top: 4px }

/* ═══ 브랜드 ═══ */
.brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3) }
.brand {
  position: relative; display: block; overflow: hidden;
  background: var(--c-raise); isolation: isolate;
}
.brand__img { aspect-ratio: var(--ratio-p); overflow: hidden }
.brand__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  filter: saturate(.82) brightness(.78);
}
.brand:hover .brand__img img { transform: scale(1.045); filter: saturate(1) brightness(.92) }
.brand__body { position: absolute; inset: auto 0 0; padding: var(--s-4); z-index: 2 }
.brand__body::before {
  content: ""; position: absolute; inset: -110% 0 0; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(14,10,7,.55) 48%, rgba(14,10,7,.94) 82%);
}
.brand__en { font-family: var(--f-label); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .22em; color: var(--c-mute) }
.brand__ko { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.1; margin: var(--s-1) 0 }
.brand__tag { font-size: var(--t-caption); color: var(--c-mute) }
.brand__bar { height: 2px; width: 40px; margin-top: var(--s-2); transition: width .5s var(--ease) }
.brand:hover .brand__bar { width: 88px }

/* ═══ 서비스 ═══ */
.svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5) var(--s-4) }
.svc__item { border-top: 1px solid var(--c-line-s); padding-top: var(--s-3) }
.svc__no { font-family: var(--f-label); font-size: var(--t-label); color: var(--c-signal); letter-spacing: .2em }
.svc__t { font-family: var(--f-display); font-size: var(--t-h3); margin: var(--s-2) 0 var(--s-2) }
.svc__d { color: var(--c-mute); font-size: var(--t-caption); line-height: 1.85 }

/* ═══ 매장 ═══ */
.stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3) }
.store__img { aspect-ratio: var(--ratio-p); overflow: hidden; background: var(--c-raise) }
.store__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.82); transition: transform 1.1s var(--ease), filter 1.1s var(--ease) }
.store:hover .store__img img { transform: scale(1.04); filter: saturate(1) brightness(.95) }
.store__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3) }
.store__name { font-family: var(--f-display); font-size: var(--t-h3) }
.store__brand { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute); white-space: nowrap }
.store__meta { margin-top: var(--s-2); border-top: 1px solid var(--c-line); padding-top: var(--s-2) }
.store__row { display: flex; gap: var(--s-2); font-size: var(--t-caption); color: var(--c-mute); padding: 3px 0 }
.store__row dt { flex: 0 0 4.5em; color: rgba(242,235,224,.45) }
.store__link {
  display: inline-flex; align-items: center; gap: .5em; margin-top: var(--s-2);
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-cream);
  border-bottom: 1px solid var(--c-line-s); padding-bottom: 3px; transition: border-color .35s var(--ease), color .35s var(--ease);
}
.store__link:hover { color: var(--c-signal); border-bottom-color: var(--c-signal) }

/* ═══ 대표 메뉴 갤러리 ═══
   낱장을 여백으로 띄우지 않고 벽처럼 붙인다. 사진 24장이 모여야 힘이 생긴다. */
.gbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  background: var(--c-void); padding-block: clamp(28px, 3.4vw, 52px) clamp(20px, 2.4vw, 34px);
}
.gbar__t { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 400; letter-spacing: -.03em }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--c-void) }
.dish { position: relative; overflow: hidden; display: block }
.dish img {
  width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.86);
  transition: filter .6s var(--ease), transform .9s var(--ease);
}
.dish:hover img { filter: brightness(1); transform: scale(1.05) }
.dish figcaption {
  position: absolute; inset: auto 0 0; padding: 12px 14px; z-index: 2;
  font-size: var(--t-caption); line-height: 1.45; opacity: 0; transition: opacity .35s var(--ease);
  background: linear-gradient(180deg, transparent, rgba(14,10,7,.94));
}
.dish:hover figcaption { opacity: 1 }
.dish__n { display: block; font-weight: 500 }
.dish__p { color: var(--c-mute); font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .08em }

/* ═══ 대표 / 자격 ═══ */
.chef { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--s-4) }
.chef__l { grid-column: 1 / 11 }
.chef__r { grid-column: 13 / 25 }
.chef__img { margin-top: var(--s-4); aspect-ratio: var(--ratio-p); object-fit: cover; width: 100%; max-width: 340px }
.chef__list { list-style: none; margin-top: var(--s-3) }
.chef__list li {
  display: grid; grid-template-columns: 4.6em 1fr; gap: var(--s-2);
  padding: var(--s-2) 0; border-top: 1px solid var(--c-line);
  font-size: var(--t-caption); line-height: 1.65;
}
.chef__list li span:first-child { font-family: var(--f-label); font-size: var(--t-label); color: var(--c-mute); letter-spacing: .1em; padding-top: .25em }

/* ═══ 언론 ═══ */
.press { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3) }
.press__item { border-top: 1px solid var(--c-line); padding-top: var(--s-2) }
/* uppercase를 걸지 않는다 — tvN 같은 매체 표기가 TVN으로 망가진다 */
.press__src { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em; color: var(--c-signal) }
.press__outlet { font-family: var(--f-display); font-size: var(--t-h3); margin-top: 6px; line-height: 1.3 }
.press__prog { font-size: var(--t-caption); color: var(--c-mute); margin-top: 6px }

/* ═══ 문의 폼 ═══ */
.ask { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--s-4) }
.ask__l { grid-column: 1 / 10 }
.ask__r { grid-column: 12 / 25; margin-top: var(--s-4) }
.ask__r-lead { display: none }
.field { margin-bottom: var(--s-3) }
.field label {
  display: block; font-family: var(--f-label); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: .18em; color: var(--c-mute); margin-bottom: var(--s-1);
}
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--c-line-s);
  padding: var(--s-1) 0; font-size: var(--t-body); letter-spacing: -.02em;
  transition: border-color .35s var(--ease); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 5.5em }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer }
.field select option { background: var(--c-raise) }
.field :focus { outline: 0; border-bottom-color: var(--c-signal) }
.field--half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) }
.req { color: var(--c-signal) }

.btn {
  display: inline-flex; align-items: center; gap: .8em; cursor: pointer;
  background: transparent; border: 1px solid var(--c-line-s); border-radius: 0;
  padding: var(--s-2) var(--s-4); margin-top: var(--s-2);
  font-family: var(--f-label); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: .2em;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
/* CTA는 무채색 — 미슐랭 20곳 전수에서 채도 있는 버튼은 0건이었다.
   오렌지는 라벨·괘선에서 이미 신호 역할을 하므로 여기까지 오면 과해진다. */
.btn:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-void) }
.btn[disabled] { opacity: .45; cursor: not-allowed }
.formnote { font-size: var(--t-caption); color: var(--c-mute); margin-top: var(--s-2) }
.formnote a { border-bottom: 1px solid var(--c-line-s) }

/* ═══ 푸터 ═══ */
.foot { border-top: 1px solid var(--c-line); padding-block: var(--s-5) var(--s-4) }
.foot__grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--s-4) }
.foot__brand { grid-column: 1 / 9 }
.foot__info { grid-column: 11 / 18 }
.foot__sns { grid-column: 19 / 25 }
.foot img { height: 30px; width: auto; display: block }
.foot__wordmark { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .24em; text-transform: uppercase; color: var(--c-mute); margin-top: var(--s-2); width: fit-content }
.foot__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--c-line) }

/* ═══ 스크롤 등장 ═══
   .js가 붙어야만 숨긴다. 자바스크립트가 죽으면 페이지가 백지가 되는 걸 막는 안전장치. */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.js .rise.is-in { opacity: 1; transform: none }

/* ═══ 모바일 ═══ */
@media (max-width: 900px) {
  .brands, .svc, .stores, .press { grid-template-columns: 1fr 1fr }
  .gallery { grid-template-columns: repeat(3, 1fr) }
  .dish figcaption { opacity: 1; font-size: 11px; padding: 8px 10px }
  /* 24컬럼을 그대로 두면 컬럼 간격 23개(≈550px)만으로 화면을 밀어낸다.
     grid-column 지정만 풀어선 안 되고 트랙 자체를 1개로 접어야 한다. */
  .sechead, .chef, .ask, .foot__grid { grid-template-columns: 1fr }
  .sechead__label, .sechead__body,
  .chef__l, .chef__r, .ask__l, .ask__r,
  .foot__brand, .foot__info, .foot__sns { grid-column: auto }
  .sechead { gap: var(--s-2) }
  .ask__r { margin-top: 0 }
  /* 좌우 배치가 세로로 접히면 태블릿 챗 목업이 브랜드 로고 바로 뒤에 맥락 없이 튀어나온다 —
     여백 대신 짧은 헤드라인을 넣어 문맥을 이어준다 */
  .ask__r-lead {
    display: block; font-family: var(--f-display); font-size: var(--t-h3);
    margin: var(--s-5) 0 var(--s-3); text-align: center;
  }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px) {
  .brands, .svc, .stores, .press { grid-template-columns: 1fr }
  .nav__menu { display: none }
  .nav__toggle { display: block }
  .nav.is-open .nav__menu {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
    position: absolute; inset: 100% 0 auto; background: rgba(14,10,7,.97);
    padding: var(--s-4) var(--pad); border-bottom: 1px solid var(--c-line);
  }
  .nav.is-open .nav__menu a { font-size: var(--t-caption) }
  .field--half { grid-template-columns: 1fr }
  .hero__meta { gap: var(--s-3) }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}