@charset "utf-8";
/* ============================================================
   직산 막국수 — 공통 스타일
   Palette: 로고에서 추출 (브라운 / 낙관 레드 / 메밀 베이지)
   ============================================================ */

/* ---------- Fonts ----------
   제목: 고운바탕 — 명조 계열이되 획이 부드러워 전통+캐주얼 양쪽을 잡음
   본문: Pretendard
   포인트: 을지로체(우아한형제) — 숫자·라벨 등 아주 소량만 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
@font-face {
  font-family: 'BMEuljiro';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.2/BMEULJIRO.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ── 팔레트 ──
     레퍼런스 실측 기반:
     · 사라시나 호리이(1789 도쿄 소바 노포) — #fff 23회 + #a71d25 37회, 백색 90%+
     · Momofuku — 배경 #faf7ee (순백 아님, R>G>B 크림)
     · Koya — 웜 오프화이트 #f0ebdc
     핵심 규칙: 배경은 순백 금지(R>G>B 크림), 텍스트는 순검정 금지,
               채도 높은 포인트색 딱 하나 */
  /* ── 시안 팔레트 (웜 브라운 / 베이지) ──
     로고의 다크 브라운을 그대로 주색으로. 味 낙관 빨강은 로고 안에만. */
  --brown-900: #2E2620;   /* 푸터·히어로 오버레이 */
  --brown-800: #4A3B2E;   /* 주색 — 버튼·제목 */
  --brown-600: #6B5642;   /* 중간 브라운 */
  --brown-400: #9C866D;   /* 아이콘·캡션 */
  --brown-200: #C9B99F;

  --seal:      #A63328;   /* 味 낙관 — 아주 소량(로고 옆 점 등) */

  --paper-0:   #FFFFFF;
  --paper-50:  #FDFBF7;
  --paper-100: #F7F2E9;   /* 페이지 바탕 (시안 배경) */
  --paper-200: #F0E9DC;   /* 섹션 교차 */
  --paper-300: #E3D8C6;

  --line:      #E5DCCB;
  --white:     #FFFFFF;

  --ink:       #2E2620;
  --ink-2:     #5C5046;
  --ink-3:     #8B7F72;
  --ink-4:     #B0A596;

  --logo-brown: #3E332C;

  /* 이전 토큰 호환 */
  --crimson:    var(--brown-800);
  --crimson-dk: var(--brown-900);
  --crimson-lt: var(--brown-400);
  --green-900: var(--brown-900);
  --green-800: var(--brown-800);
  --green-600: var(--brown-600);
  --green-400: var(--brown-400);
  --green-200: var(--brown-200);
  --brass:      var(--brown-600);
  --brass-soft: var(--brown-400);

  /* Type */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Malgun Gothic', system-ui, sans-serif;
  --serif: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --display: 'BMEuljiro', var(--serif);

  /* ---------- 스케일 시스템 ----------
     레퍼런스(국수나무)와 동일하게 "1600px 기준 뷰포트 비례" 방식.
     모든 치수가 화면 폭에 따라 같은 비율로 줄어들어 균형이 유지됩니다.
     calc(N / var(--inner) * 100vw) = 1600px에서 정확히 N px */
  --inner: 1600;

  --fz-14: clamp(13px, calc(14 / var(--inner) * 100vw), 14px);
  --fz-16: clamp(14px, calc(16 / var(--inner) * 100vw), 16px);
  --fz-18: clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
  --fz-20: clamp(16px, calc(20 / var(--inner) * 100vw), 20px);
  --fz-22: clamp(17px, calc(22 / var(--inner) * 100vw), 22px);
  --fz-24: clamp(18px, calc(24 / var(--inner) * 100vw), 24px);
  --fz-28: clamp(21px, calc(28 / var(--inner) * 100vw), 28px);
  --fz-32: clamp(22px, calc(32 / var(--inner) * 100vw), 32px);
  --fz-40: clamp(26px, calc(40 / var(--inner) * 100vw), 40px);
  --fz-44: clamp(27px, calc(44 / var(--inner) * 100vw), 44px);
  --fz-48: clamp(28px, calc(48 / var(--inner) * 100vw), 48px);
  --fz-64: clamp(34px, calc(64 / var(--inner) * 100vw), 64px);

  --sp-15:  clamp(8px,  calc(15  / var(--inner) * 100vw), 15px);
  --sp-20:  clamp(10px, calc(20  / var(--inner) * 100vw), 20px);
  --sp-24:  clamp(12px, calc(24  / var(--inner) * 100vw), 24px);
  --sp-30:  clamp(15px, calc(30  / var(--inner) * 100vw), 30px);
  --sp-40:  clamp(20px, calc(40  / var(--inner) * 100vw), 40px);
  --sp-48:  clamp(24px, calc(48  / var(--inner) * 100vw), 48px);
  --sp-60:  clamp(30px, calc(60  / var(--inner) * 100vw), 60px);
  --sp-80:  clamp(40px, calc(80  / var(--inner) * 100vw), 80px);
  --sp-100: clamp(44px, calc(100 / var(--inner) * 100vw), 100px);
  --sp-120: clamp(48px, calc(120 / var(--inner) * 100vw), 120px);
  --sp-140: clamp(56px, calc(140 / var(--inner) * 100vw), 140px);
  --sp-180: clamp(64px, calc(180 / var(--inner) * 100vw), 180px);

  /* ── 섹션 padding 3단 (Momofuku 실측 156/64/32 = 4.9:2:1) ──
     모든 섹션에 같은 padding을 주면 정확히 "AI가 만든 흔한 레이아웃"이 됩니다 */
  --pad-lg: clamp(64px, calc(156 / var(--inner) * 100vw), 156px);
  --pad-md: clamp(40px, calc(84  / var(--inner) * 100vw), 84px);
  --pad-sm: clamp(24px, calc(40  / var(--inner) * 100vw), 40px);

  /* 이전 토큰 호환 */
  --sec-sm: var(--pad-sm);
  --sec-md: var(--pad-md);
  --sec-lg: var(--pad-lg);

  /* 본문 텍스트 단락 최대폭 — 1500px에 꽉 채우면 '엉성'해 보임 */
  --measure: 736px;

  /* 모서리 — 레퍼런스는 40px로 매우 둥글지만,
     직산 로고가 전통 계열이라 절반 수준으로 조정 */
  --radius-16: clamp(8px,  calc(16 / var(--inner) * 100vw), 16px);
  --radius-24: clamp(12px, calc(24 / var(--inner) * 100vw), 24px);

  /* Layout */
  --wrap: 1500px;
  --container-space: clamp(16px, calc(30 / var(--inner) * 100vw), 30px);
  --header-h: clamp(72px, calc(110 / var(--inner) * 100vw), 110px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  /* 레퍼런스와 동일: line-height 1.5 + letter-spacing -.03em
     (1.75는 너무 헐렁해서 글이 작고 비어 보임) */
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -.02em;
  color: var(--ink);
  background: var(--paper-100);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p { margin: 0; }
address { font-style: normal; }

/* ---------- Utility ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--container-space); }
.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;
}

/* ── 타이포 유틸 ──
   조사 결과: 밝고 세련된 사이트는 제목:본문 = 4배, 칙칙한 사이트는 2배.
   그리고 크기를 키울수록 line-height / letter-spacing 을 줄인다. */

/* 영문 라벨 — Koya .22em 실측. 이 장치 하나로 고급스러워짐 */
.label {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--crimson);
}

/* 대제목 — 본문 17px의 약 3.8배 */
.t-hero { font-size: clamp(34px, calc(64 / var(--inner) * 100vw), 64px);
          line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.t-lg   { font-size: clamp(28px, calc(48 / var(--inner) * 100vw), 48px);
          line-height: 1.2;  letter-spacing: -.03em;  font-weight: 700; }
.t-md   { font-size: clamp(22px, calc(32 / var(--inner) * 100vw), 32px);
          line-height: 1.3;  letter-spacing: -.025em; font-weight: 700; }
.t-sm   { font-size: clamp(18px, calc(24 / var(--inner) * 100vw), 24px);
          line-height: 1.35; letter-spacing: -.02em;  font-weight: 700; }

.measure { max-width: var(--measure); }

/* 섹션 헤더 — 좌측 정렬 (중앙정렬은 템플릿 기본값이라 흔합니다) */
.sec-head { text-align: left; margin-bottom: var(--pad-md); }
.sec-head .eng {
  display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--crimson); font-weight: 700; margin-bottom: var(--sp-15);
}
.sec-head .kor {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, calc(48 / var(--inner) * 100vw), 48px);
  line-height: 1.2; letter-spacing: -.03em;
}
.sec-head .sub {
  margin-top: var(--sp-20); max-width: var(--measure);
  color: var(--ink-2); font-size: 17px; line-height: 1.8;
}

/* 낙관 포인트 구분선 */
.seal-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 14px; }
.seal-rule::before, .seal-rule::after {
  content: ''; width: 34px; height: 1px; background: var(--green-200);
}
.seal-rule i {
  width: 7px; height: 7px; background: var(--brass); border-radius: 1px;
  transform: rotate(45deg);
}

/* 버튼 — 레퍼런스처럼 알약형(pill). 브랜드 톤에 맞춰 채도만 낮춤 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: clamp(46px, calc(58 / var(--inner) * 100vw), 58px);
  padding: 0 clamp(24px, calc(44 / var(--inner) * 100vw), 44px);
  border-radius: 100px;
  font-size: var(--fz-16); font-weight: 600; letter-spacing: .02em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-solid { background: var(--green-800); color: var(--white); }
.btn-solid:hover { background: var(--brass); }
.btn-line { border: 1px solid var(--green-800); color: var(--green-800); }
.btn-line:hover { background: var(--green-800); color: var(--white); }
.btn-ghost { border: 1px solid rgba(255,255,255,.6); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--green-800); }

/* 스크롤 등장 애니메이션 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   HEADER
   ============================================================ */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
.hd .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.hd-logo img {
  height: clamp(46px, calc(68 / var(--inner) * 100vw), 68px); width: auto;
  transition: height .4s var(--ease), filter .4s var(--ease);
}

.hd-nav ul { display: flex; gap: clamp(28px, calc(56 / var(--inner) * 100vw), 56px); }
.hd-nav a {
  position: relative; display: block;
  font-size: var(--fz-18); font-weight: 600; letter-spacing: -.01em;
  padding: 6px 0; transition: color .3s var(--ease);
}
.hd-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--ease);
}
.hd-nav a:hover::after, .hd-nav a[aria-current="page"]::after { transform: scaleX(1); }

.hd-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-weight: 700; font-size: var(--fz-22); letter-spacing: .01em;
  transition: color .3s var(--ease);
}
.hd-tel svg { width: 1em; height: 1em; }

/* 헤더 - 히어로 위 투명 상태 (홈)
   로고를 단색 반전하면 味 낙관과 가는 획이 뭉개져서,
   흰색으로 반전하되 그림자로 가독성을 확보합니다. */
.hd.over {
  background: linear-gradient(180deg, rgba(27,49,36,.45), transparent);
  color: var(--white);
}
.hd.over .hd-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.6)); }
/* 히어로에 큰 로고가 있으므로 헤더 로고는 숨김 (스크롤하면 다시 등장) */
.hd.over.has-hero-logo .hd-logo { opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }


/* 헤더 - 스크롤 / 서브페이지
   ※ 높이·로고 크기는 건드리지 않습니다.
     페이지를 이동할 때마다 헤더가 튀어 보이던 원인이었습니다.
     달라지는 것은 '배경색과 글자색'뿐입니다. */
.hd.solid {
  background: rgba(249,244,232,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.hd.solid .hd-logo img { filter: none; }

/* 모바일 토글 */
.hd-burger { display: none; width: 40px; height: 40px; position: relative; }
.hd-burger span {
  position: absolute; left: 9px; right: 9px; height: 2px; background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.hd-burger span:nth-child(1) { top: 14px; }
.hd-burger span:nth-child(2) { top: 20px; }
.hd-burger span:nth-child(3) { top: 26px; }
body.nav-open .hd-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .hd-burger span:nth-child(2) { opacity: 0; }
body.nav-open .hd-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   FOOTER
   ============================================================ */
.ft { background: var(--green-900); color: rgba(255,255,255,.7); padding: var(--sp-80) 0 var(--sp-40); }
.ft-top { display: flex; flex-wrap: wrap; gap: var(--sp-48); justify-content: space-between; }
.ft-logo img { height: clamp(40px, calc(52 / var(--inner) * 100vw), 52px); filter: brightness(0) invert(1); opacity: .92; }
.ft-tel {
  display: block; margin-top: var(--sp-24); font-family: var(--serif); font-weight: 800;
  font-size: var(--fz-48); color: var(--white); letter-spacing: .01em;
}
.ft-hours { margin-top: 10px; font-size: var(--fz-16); }
.ft-info { font-size: var(--fz-16); line-height: 2.1; }
.ft-info dt { display: inline-block; min-width: 68px; color: rgba(255,255,255,.45); }
.ft-info dd { display: inline; margin: 0; }
.ft-info div + div { margin-top: 2px; }
.ft-sns { display: flex; gap: 10px; margin-top: 22px; }
.ft-sns a {
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.ft-sns a:hover { background: var(--brass); border-color: var(--brass); }
.ft-sns svg { width: 17px; height: 17px; }
.ft-bot {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: rgba(255,255,255,.4);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

/* ============================================================
   플로팅 (전화 / TOP)
   ============================================================ */
.floats { position: fixed; right: 22px; bottom: 26px; z-index: 90; display: grid; gap: 10px; }
.float-btn {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; gap: 2px;
  background: var(--green-800); color: var(--white);
  box-shadow: 0 6px 22px rgba(27,49,36,.28);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.float-btn:hover { background: var(--brass); transform: translateY(-3px); }
.float-btn.call { background: var(--brass); }
.float-btn.call:hover { background: var(--brass-soft); }
.float-btn svg { width: 19px; height: 19px; }
.float-btn b { font-size: 10px; font-weight: 600; letter-spacing: -.02em; }
#toTop { opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), background .3s, transform .3s; }
#toTop.show { opacity: 1; pointer-events: auto; }

/* ============================================================
   SUB PAGE HERO (식당소개/메뉴/오시는길 공통)
   ============================================================ */
.sub-hero {
  position: relative;
  /* 홈 히어로(680px)보다 낮게 — 페이지 간 리듬 */
  height: clamp(240px, calc(380 / var(--inner) * 100vw), 380px);
  display: grid; align-items: end; text-align: left;
  background: var(--ink);
  overflow: hidden;
}
.sub-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,25,23,.45), rgba(26,25,23,.80));
  z-index: 1;
}
.sub-hero-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.sub-hero .inner {
  position: relative; z-index: 2; color: var(--white);
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: var(--header-h) var(--container-space) var(--pad-md);
}
.sub-hero .eng {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--crimson-lt);
}
.sub-hero .kor {
  margin-top: var(--sp-15); font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, calc(56 / var(--inner) * 100vw), 56px);
  line-height: 1.15; letter-spacing: -.035em;
}

/* 이미지 없을 때 placeholder
   ※ .story-img / .intro-img 등이 자체 background 를 갖고 있으므로
     !important 로 확실히 덮어씁니다. (실사진 넣으면 .ph 자체가 사라짐) */
.ph {
  background:
    repeating-linear-gradient(45deg, var(--paper-200) 0 10px, var(--paper-100) 10px 20px) !important;
  display: grid !important; place-items: center;
  color: var(--green-400); font-size: 13px; letter-spacing: .04em; text-align: center;
}
.ph::after { content: attr(data-ph); }

/* ============================================================
   RESPONSIVE — 공통
   ============================================================ */
@media (max-width: 1024px) {
  .hd-nav ul { gap: 30px; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }

  .hd-burger { display: block; }
  .hd-tel { display: none; }

  /* 모바일 전체화면 메뉴.
     ※ 헤더(.hd)가 z-index:100 이라 그 안의 nav 는 페이지 위로 못 올라갑니다.
       열릴 때 z-index 를 헤더보다 낮게(=헤더 아래) 두되 페이지보다는 위로,
       그리고 배경을 완전 불투명 + 스크롤 잠금으로 비침을 없앱니다. */
  .hd-nav {
    position: fixed; inset: 0; z-index: -1;
    background: var(--paper-50);
    display: grid; place-items: center;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
  }
  body.nav-open .hd-nav {
    opacity: 1; pointer-events: auto; visibility: visible; z-index: 1;
    /* 헤더 높이만큼 아래에서 시작하되 화면 끝까지 채워야
       뒤 콘텐츠가 비치지 않습니다 (bottom/left/right 명시 필수) */
    top: var(--header-h); right: 0; bottom: 0; left: 0;
    /* height:auto 를 주면 bottom:0 이 무시되고 콘텐츠 높이로 줄어듭니다.
       뷰포트에서 헤더를 뺀 높이를 명시해야 화면 전체가 덮입니다. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    align-content: start; padding-top: 8vh;
    overflow-y: auto;
  }
  .hd-nav ul { flex-direction: column; gap: 4px; text-align: center; }
  .hd-nav a {
    color: var(--ink); font-family: var(--serif); font-weight: 800;
    font-size: 26px; padding: 16px 40px;
  }
  .hd-nav a::after { display: none; }
  .hd-nav li + li { border-top: 1px solid var(--line); }

  /* 모바일 메뉴 열렸을 때 헤더는 항상 진하게 */
  body.nav-open .hd {
    background: var(--paper-50); color: var(--ink);
    height: var(--header-h);
  }
  body.nav-open .hd .hd-logo img { filter: none; }
  body.nav-open .hd .wrap { position: relative; z-index: 3; }
  /* 뒤 페이지 스크롤 잠금 + 플로팅 버튼 숨김 */
  body.nav-open { overflow: hidden; }
  body.nav-open .floats { opacity: 0; pointer-events: none; }

  .sec-head { margin-bottom: 40px; }
  .sub-hero { height: 260px; }

  .ft { padding: 56px 0 32px; }
  .ft-top { flex-direction: column; gap: 34px; }
  .ft-tel { font-size: 28px; }
  .ft-bot { flex-direction: column; gap: 6px; }

  .floats { right: 14px; bottom: 16px; gap: 8px; }
  .float-btn { width: 50px; height: 50px; }
}