@charset "utf-8";
/* ============================================================
   직산 막국수 — 홈 전용 스타일
   ============================================================ */

/* ── 섹션 리듬 ── */
.sec { padding: var(--pad-md) 0; }
.sec-feature  { padding: var(--pad-lg) 0; }
.sec-menu-cat { padding: var(--pad-lg) 0; }

/* ============================================================
   HERO — aspect-ratio 방식 (Momofuku 실측)
   ------------------------------------------------------------
   사진이 3200x1988 = 1.61:1 입니다.
   100vh 로 잡으면 1920px 화면에서 자연높이가 110vh 라 반드시 잘립니다.
   → 높이를 뷰포트가 아니라 '비율'이 정하게 하면 잘림이 사라집니다.
   ============================================================ */
/* 여백 없이 화면에 완전히 붙입니다 (헤더는 사진 위에 얹힘) */
.hero {
  padding: 0;
  background: var(--brown-900);
}
.hero-frame {
  position: relative;
  width: 100%;
  /* ※ aspect-ratio 와 max-height 를 같이 쓰면 높이에 맞춰 '폭'이 줄어듭니다.
     폭은 100% 로 고정하고, 높이만 clamp 로 직접 지정합니다. */
  height: clamp(460px, 54vw, 92vh);
  overflow: hidden;
  background: var(--brown-900);
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 55%;
  opacity: 0; transition: opacity 1.2s var(--ease) .3s;
}
.load .hero-img { opacity: 1; }

/* Noma 실측: 상단 진하게 → 중앙 옅게. 사진 중앙부를 죽이지 않음 */
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20,15,11,.60) 0%, rgba(20,15,11,.14) 26%,
                    rgba(20,15,11,.30) 66%, rgba(20,15,11,.82) 100%),
    linear-gradient(to right, rgba(20,15,11,.80) 0%, rgba(20,15,11,.55) 28%, rgba(20,15,11,.14) 52%, transparent 70%);
}

/* Robuchon 실측: 안쪽 얇은 테두리가 조여들어옴 */
.hero-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border: 1px solid rgba(255,255,255,.30);
  opacity: 0; transition: inset 1s var(--ease) .8s, opacity 1s var(--ease) .8s;
}
.load .hero-frame::before { inset: 18px; opacity: 1; }

/* 그릇(화면 중앙)과 겹치지 않도록 좌측 하단 정렬.
   ※ 넓은 화면에서 좌측 끝에 몰리지 않도록 컨테이너(--wrap) 기준으로 정렬합니다. */
.hero-center {
  position: absolute; left: 50%; bottom: 0; z-index: 5;
  transform: translateX(-50%);
  width: 100%; max-width: var(--wrap);
  padding: 0 var(--container-space) clamp(72px, 8vw, 140px);
  text-align: left; color: #fff;
}
.hero-logo {
  /* 화면이 넓어지면 로고도 같이 커지도록 */
  width: clamp(240px, 30vw, 560px); height: auto; margin: 0;
  /* 투명 PNG는 box-shadow 가 안 먹습니다 — drop-shadow 필수 */
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.55));
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s var(--ease) 1.3s, transform 1s var(--ease) 1.3s;
}
.load .hero-logo { opacity: 1; transform: none; }

.hero-tag, .hero-rule, .hero-sub, .hero-btns {
  opacity: 0; transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero-tag  { transition-delay: 1.6s; }
.hero-rule { transition-delay: 1.75s; }
.hero-sub  { transition-delay: 1.9s; }
.hero-btns { transition-delay: 2.05s; }
.load .hero-tag, .load .hero-rule,
.load .hero-sub, .load .hero-btns { opacity: 1; transform: none; }

.hero-tag {
  margin-top: clamp(18px, 2.2vw, 30px);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 44px); letter-spacing: -.025em;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.hero-rule {
  display: block; width: clamp(44px, 4vw, 72px); height: 1px;
  background: rgba(255,255,255,.55); margin: clamp(12px, 1.4vw, 18px) 0;
}
.hero-sub {
  font-size: clamp(14px, 1.35vw, 22px); color: rgba(255,255,255,.88);
  letter-spacing: .04em; text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.hero-btns {
  margin-top: clamp(20px, 2.6vw, 40px);
  display: flex; gap: clamp(10px, 1vw, 16px); flex-wrap: wrap;
}
.hero-btns .btn {
  height: clamp(46px, 4.2vw, 72px);
  padding: 0 clamp(24px, 2.6vw, 46px);
  font-size: clamp(14px, 1.15vw, 19px);
}

/* Robuchon 방식 1px 세로선 — 화살표보다 정제됨.
   ※ 이전에 있던 ::before 어두운 그라데이션은 제거했습니다.
     width:300% 라 화면 밖까지 퍼져 모바일에서 마스킹처럼 보였습니다.
     가독성은 히어로 자체의 하단 그늘(.hero-shade)로 이미 충분합니다. */
.hero-scroll {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 34px; z-index: 8;
  color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .3em; line-height: 15px;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
  opacity: 0; transition: opacity 1s var(--ease) 2.4s;
}
.load .hero-scroll { opacity: 1; }
.hero-scroll::after {
  content: ''; position: absolute; left: 50%; top: -46px;
  width: 1px; height: 36px; background: rgba(255,255,255,.5);
  transform-origin: top;
  animation: lineDown 2.4s ease-in-out infinite;
}
@keyframes lineDown {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-logo, .hero-tag, .hero-rule,
  .hero-sub, .hero-btns, .hero-scroll, .hero-frame::before {
    transition: none; opacity: 1; transform: none;
  }
  .hero-scroll::after { animation: none; }
}

/* ============================================================
   섹션 제목
   ============================================================ */
.sec-h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(27px, calc(42 / var(--inner) * 100vw), 42px);
  line-height: 1.3; letter-spacing: -.03em; color: var(--ink);
  text-align: center; margin-bottom: var(--pad-md);
}

/* ============================================================
   FEATURE — 직산막국수, 이렇게 다릅니다 (4단계)
   전달받은 '약속' 시안의 갈색 원형 아이콘을 그대로 사용
   ============================================================ */
.sec-feature {
  position: relative; overflow: hidden;
  background: var(--paper-50);
}
.sec-feature::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 72px; pointer-events: none; opacity: .5;
  background: url('../img/weave.png') repeat;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 78%);
          mask-image: linear-gradient(0deg, transparent, #000 78%);
}

.feat-list {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1240px; margin: 0 auto;
}
.feat-item {
  position: relative; text-align: center;
  padding: clamp(22px, 2.6vw, 36px) clamp(14px, 1.8vw, 26px);
}
/* 카드 사이 얇은 세로선 */
.feat-item + .feat-item::before {
  content: ''; position: absolute; left: 0; top: 14%; bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--brown-200) 20%,
                              var(--brown-200) 80%, transparent);
}

/* 갈색 원형 아이콘판 (시안 그대로) */
.feat-ico {
  width: clamp(78px, calc(104 / var(--inner) * 100vw), 104px);
  aspect-ratio: 1/1; margin: 0 auto clamp(16px, 1.8vw, 22px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brown-800); color: #fff;
  transition: transform .45s var(--ease), background .45s var(--ease);
}
.feat-ico svg { width: 50%; height: 50%; }
.feat-item:hover .feat-ico { transform: scale(1.07); background: var(--brown-900); }

.feat-no {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--brown-400);
}

.feat-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(18px, calc(23 / var(--inner) * 100vw), 23px);
  line-height: 1.35; color: var(--ink); letter-spacing: -.025em;
}
.feat-title::after {
  content: ''; display: block; width: 26px; height: 2px;
  background: var(--brown-400); margin: 13px auto 0;
  transition: width .45s var(--ease), background .45s var(--ease);
}
.feat-item:hover .feat-title::after { width: 46px; background: var(--brown-800); }

.feat-desc {
  margin-top: 14px;
  font-size: clamp(14px, calc(16 / var(--inner) * 100vw), 16px);
  font-weight: 500; line-height: 1.8; color: var(--ink-2);
  letter-spacing: -.02em; word-break: keep-all;
}

/* ============================================================
   QUOTE — 사진 위 카피 배너 (시안 01)
   ============================================================ */
.sec-quote {
  position: relative; overflow: hidden;
  padding: clamp(48px, calc(90 / var(--inner) * 100vw), 90px) 0;
  color: var(--white);
}
.quote-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(46,38,32,.62), rgba(46,38,32,.62)),
    url('../img/grain-box.jpg') center/cover no-repeat,
    var(--brown-800);
}
/* 국수 짜임 패턴 — 하단 띠로만 (전면에 깔면 부산스러움) */
.sec-quote::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 96px; z-index: 1; pointer-events: none;
  background: url('../img/weave.png') repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 72%);
          mask-image: linear-gradient(180deg, transparent, #000 72%);
}
.quote-inner { position: relative; z-index: 2; text-align: center; }
.quote-txt {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(19px, calc(30 / var(--inner) * 100vw), 30px);
  line-height: 1.6; letter-spacing: -.02em;
}

/* ============================================================
   대표 메뉴 — 사각 사진 + 아래 이름 (시안 01)
   ============================================================ */
.sec-menu-cat { background: var(--paper-100); }
.cat-list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, calc(24 / var(--inner) * 100vw), 24px);
}
.cat-card { display: block; text-align: center; }
.cat-thumb {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 6px; background: var(--paper-200);
}
/* 사진이 정사각(900x900)이므로 틀도 정사각으로 — cover 로 자르면 접시가 잘립니다 */
.cat-thumb::before { content: ''; display: block; padding-bottom: 100%; }
.cat-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s var(--ease);
}
.cat-card:hover .cat-thumb img { transform: scale(1.06); }
.cat-thumb.ph {
  background:
    repeating-linear-gradient(45deg, var(--paper-200) 0 10px, var(--paper-100) 10px 20px) !important;
  color: var(--brown-400); font-size: 13px;
}
.cat-txt h3 {
  margin-top: 14px;
  font-size: clamp(14px, calc(16 / var(--inner) * 100vw), 16px);
  font-weight: 600; color: var(--ink); letter-spacing: -.02em;
  transition: color .3s var(--ease);
}
.cat-card:hover .cat-txt h3 { color: var(--brown-600); }
.sec-more { margin-top: var(--pad-sm); text-align: center; }

.sec-visit {
  position: relative; overflow: hidden;
  padding: var(--pad-lg) 0; text-align: center;
  background:
    linear-gradient(rgba(26,25,23,.90), rgba(26,25,23,.90)),
    url('../img/store.jpg') center/cover no-repeat, var(--ink);
  color: var(--white);
}
.sec-visit::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 96px; z-index: 1; pointer-events: none;
  background: url('../img/weave.png') repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 72%);
          mask-image: linear-gradient(180deg, transparent, #000 72%);
}
.visit-inner { position: relative; z-index: 2; }
.visit-inner .label { color: var(--crimson-lt); margin-bottom: var(--sp-20); }
.visit-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, calc(44 / var(--inner) * 100vw), 44px);
  line-height: 1.25; letter-spacing: -.03em;
}
.visit-addr { margin-top: var(--sp-20); font-size: 17px; color: rgba(255,255,255,.78); }
.visit-btns {
  margin-top: var(--pad-sm); display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.visit-btns .btn-solid { background: var(--crimson); }
.visit-btns .btn-solid:hover { background: var(--white); color: var(--ink); }
.visit-btns .btn-line { border-color: rgba(255,255,255,.6); color: var(--white); }
.visit-btns .btn-line:hover { background: var(--white); color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cat-list { grid-template-columns: repeat(2, 1fr); }
  .feat-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* 모바일은 세로 비율로 전환 (Momofuku 와 동일 전략) —
     같은 사진이라도 세로 프레임이면 그릇이 크게 보입니다 */
  .hero { padding: 0; }
  .hero-frame { height: clamp(460px, 125vw, 88vh); }
  .hero-img { object-position: 62% 52%; }
  .hero-center { padding-bottom: clamp(56px, 9vw, 90px); }
  .load .hero-frame::before { inset: 12px; }
  .hero-logo { width: min(300px, 72vw); }
  .hero-btns .btn { height: 44px; padding: 0 20px; font-size: 14px; }
  .hero-scroll { bottom: 26px; font-size: 11px; letter-spacing: .22em; }
  .hero-scroll::after { height: 26px; top: -36px; }

  .feat-list { grid-template-columns: repeat(2, 1fr); }
  .feat-item { padding: 20px 10px; }
  .feat-item + .feat-item::before { display: none; }
  .feat-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .feat-item:nth-child(even)::before { content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px; background: var(--line); }
  .cat-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-15); }

  .quote-txt { font-size: 18px; }
}