/* =========================================================
   FOODTRUCK1 — 메인 (Home)
   Production stylesheet reproducing the high-fidelity design.
   Design system: 모노크롬 아키텍처 + 웜 아이보리 + 매거진 숫자 + 2색 액센트
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* surfaces */
  --paper: #F5F2EC;        /* page base (warm ivory) */
  --section-soft: #FBFAF7; /* alternating section */
  --card: #FFFFFF;

  /* ink + text */
  --ink: #16140F;          /* headline / strong text / dark sections */
  --ink-2: #2A251D;        /* quote body */
  --body: #6E695E;
  --muted: #8A8178;
  --nav: #3A352B;

  /* hairlines */
  --line: #DDD8CD;
  --line-card: #EFE9DE;

  /* accents — 2색 규칙 */
  --teal: #0E6B58;         /* 위생·신뢰 */
  --teal-deep: #0E5546;
  --teal-light: #9FD4C5;
  --terra: #BC4B2A;        /* CTA / 강조 */
  --ember: #E0855C;

  /* footer */
  --footer-text: #C8C2B4;
  --footer-muted: #9A9382;
  --footer-muted-2: #7A7568;

  /* kakao */
  --kakao: #FAE100;
  --kakao-ink: #3A1D1D;

  /* layout */
  --maxw: 1240px;
  --pad: 40px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }

.mono { font-family: 'Inter', sans-serif; }
.kick {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Image slots (real <img>, ratio-locked) ---------- */
.shot {
  position: relative;
  overflow: hidden;
  background: #E7E1D5;
}
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 242, 236, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.wordmark {
  font-family: 'Inter', sans-serif;
  font: 600 17px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
}
.wordmark .one { color: var(--terra); }

.gnb {
  display: flex;
  align-items: center;
  gap: 32px;
  font: 500 14px 'Pretendard', sans-serif;
  color: var(--nav);
}
.gnb a { transition: color 0.15s ease; }
.gnb a:hover { color: var(--ink); }
.gnb a.is-active { color: var(--ink); font-weight: 700; }
.gnb a.is-active.is-teal { color: var(--teal); }

.btn {
  display: inline-block;
  font-family: 'Pretendard', sans-serif;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn:hover { filter: brightness(0.92); }
.btn--ink { background: var(--ink); color: var(--paper); padding: 11px 20px; font: 600 13px 'Pretendard', sans-serif; }
.btn--terra { background: var(--terra); color: #fff; }
.btn--lg { padding: 17px 32px; font: 600 15px 'Pretendard', sans-serif; }

/* link with hairline underline */
.ul {
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  font: 600 15px 'Pretendard', sans-serif;
  transition: opacity 0.15s ease;
}
.ul:hover { opacity: 0.6; }
.ul--sm { font: 600 14px 'Pretendard', sans-serif; padding-bottom: 2px; }
.ul--teal { color: var(--teal); border-bottom-color: var(--teal); }

/* mobile nav toggle (hidden on desktop) */
.nav-toggle { display: none; }

/* ---------- S1 Hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.42fr 0.58fr;
}
.hero-copy {
  padding: 92px 56px 84px 0;
  border-right: 1px solid var(--line);
}
.hero-copy .kick { font-size: 11px; color: var(--muted); }
.hero-h1 {
  font: 200 72px/1.12 'Pretendard', sans-serif;
  color: var(--ink);
  letter-spacing: -0.045em;
  margin-top: 30px;
}
.hero-h1 span { font-weight: 500; }
.hero-lead {
  font: 400 18px/1.75 'Pretendard', sans-serif;
  color: var(--body);
  margin-top: 30px;
  max-width: 480px;
}
.hero-cta {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-metrics {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 40px;
}
.metric { padding: 30px 0; border-bottom: 1px solid var(--line); }
.metric:last-child { border-bottom: 0; }
.metric .num { font: 300 32px 'Inter', sans-serif; letter-spacing: -0.02em; }
.metric .num.teal { color: var(--teal); }
.metric .lbl { font: 500 13px 'Pretendard', sans-serif; color: var(--muted); margin-top: 6px; }

.hero-image {
  border-top: 1px solid var(--ink);
}
.hero-image .shot { height: 520px; }

/* ---------- Trust strip ---------- */
.trust {
  border-bottom: 1px solid var(--line);
}
.trust .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 26px;
  font: 500 13px 'Pretendard', sans-serif;
  color: var(--body);
}
.trust .kick { font-size: 10px; color: var(--terra); }
.trust .sep { width: 1px; height: 16px; background: var(--line); }
.trust .mono { font-weight: 600; color: var(--ink); }

/* ---------- Section heading ---------- */
.section { padding: 104px 0; }
.section--alt { background: var(--section-soft); border-top: 1px solid var(--ink); }
.section--96 { padding: 96px 0; }
.section--ruled-top { border-top: 1px solid var(--ink); }

.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 26px;
  gap: 20px;
}
.head-row .kick { font-size: 11px; color: var(--muted); }
.h2 { font: 200 46px 'Pretendard', sans-serif; color: var(--ink); letter-spacing: -0.04em; }
.h2--44 { font-size: 44px; }

/* ---------- S2 · 3대 No.1 ---------- */
.promise {
  display: grid;
  grid-template-columns: 130px 1fr 320px;
  align-items: start;
  gap: 44px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}
.promise:last-child { border-bottom: 1px solid var(--ink); }
.promise .idx { font: 200 58px 'Inter', sans-serif; letter-spacing: -0.03em; }
.promise .idx.terra { color: var(--terra); }
.promise .idx.teal { color: var(--teal); }
.promise h3 { font: 500 26px 'Pretendard', sans-serif; color: var(--ink); letter-spacing: -0.02em; }
.promise p { font: 400 16px/1.75 'Pretendard', sans-serif; color: var(--body); margin-top: 12px; max-width: 420px; }
.promise .proof { font: 500 14px/1.8 'Pretendard', sans-serif; color: var(--muted); }
.promise .proof + a { margin-top: 18px; }

/* ---------- S3 · 사업 분기 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split > .col-left { border-right: 1px solid var(--line); }
.split .shot { height: 300px; }
.split-body { padding: 44px 48px 12px 0; }
.split .col-right .split-body { padding: 44px 0 12px 48px; }
.split-body .kick { font-size: 11px; }
.split-body .kick.terra { color: var(--terra); }
.split-body .kick.teal { color: var(--teal); }
.split-body h3 { font: 200 40px/1.18 'Pretendard', sans-serif; color: var(--ink); letter-spacing: -0.035em; margin-top: 18px; }
.split-body p { font: 400 16px/1.75 'Pretendard', sans-serif; color: var(--body); margin-top: 16px; max-width: 380px; }
.split-body .ul { margin-top: 28px; }

/* ---------- S4 · 신뢰 지표 ---------- */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.metrics-row .cell { padding: 36px 24px; border-right: 1px solid var(--line); }
.metrics-row .cell:first-child { padding-left: 0; }
.metrics-row .cell:last-child { padding-right: 0; border-right: 0; }
.metrics-row .big { font: 200 50px 'Inter', sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.metrics-row .big.teal { color: var(--teal); }
.metrics-row .big.ko { font-family: 'Pretendard', sans-serif; }
.metrics-row .big sup, .metrics-row .big .plus { font-size: 24px; }
.metrics-row .lbl { font: 500 14px 'Pretendard', sans-serif; color: var(--muted); margin-top: 10px; }

.partners { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 44px; }
.partners .label { font: 500 13px 'Pretendard', sans-serif; color: var(--muted); margin-right: 8px; }
.badge { border: 1px solid var(--line); padding: 9px 18px; font: 600 13px 'Pretendard', sans-serif; color: var(--nav); }

/* ---------- S5 · 대표 사례 ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case .shot { height: 260px; }
.case .case-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; gap: 12px; }
.case h4 { font: 600 16px 'Pretendard', sans-serif; color: var(--ink); }
.case .case-head .kick { font-size: 10px; }
.case .case-head .kick.terra { color: var(--terra); }
.case .case-head .kick.teal { color: var(--teal); }
.case .cap { font: 400 13px/1.6 'Pretendard', sans-serif; color: var(--muted); margin-top: 6px; }

/* ---------- S6 · 후기 ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.quote { padding: 40px 36px; border-right: 1px solid var(--line); }
.quote:first-child { padding-left: 0; }
.quote:last-child { padding-right: 0; border-right: 0; }
.quote .mark { font: 300 40px 'Inter', sans-serif; line-height: 0.6; }
.quote .mark.terra { color: var(--terra); }
.quote .mark.teal { color: var(--teal); }
.quote p { font: 400 17px/1.7 'Pretendard', sans-serif; color: var(--ink-2); margin-top: 18px; }
.quote .who { font: 600 14px 'Pretendard', sans-serif; color: var(--ink); margin-top: 24px; }
.quote .who span { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; }

/* ---------- S7 · 최종 CTA ---------- */
.cta-dark { background: var(--teal-deep); color: var(--paper); }   /* distinct from black footer */
.cta-dark .container { padding-top: 110px; padding-bottom: 110px; text-align: center; }
.cta-dark .kick { font-size: 11px; color: var(--ember); }
.cta-dark h2 { font: 200 56px/1.18 'Pretendard', sans-serif; color: var(--paper); letter-spacing: -0.04em; margin-top: 24px; }
.cta-dark h2 span { font-weight: 500; }
.cta-dark .lead { font: 400 17px/1.7 'Pretendard', sans-serif; color: #A9C7BD; margin: 22px auto 0; max-width: 420px; }
.cta-dark .row { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 38px; flex-wrap: wrap; }
.btn--ghost { border: 1px solid rgba(245, 242, 236, 0.4); color: var(--paper); padding: 17px 36px; font: 600 15px 'Pretendard', sans-serif; background: transparent; }
.btn--ghost:hover { background: rgba(245, 242, 236, 0.08); filter: none; }
.cta-dark .tel { font: 600 15px 'Pretendard', sans-serif; color: var(--paper); border-bottom: 1px solid var(--ember); padding-bottom: 3px; }
.cta-dark .btn--terra { padding: 17px 36px; font: 600 15px 'Pretendard', sans-serif; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--footer-text); }
.site-footer .container { padding-top: 72px; padding-bottom: 40px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 48px;
}
.foot-grid .mono { font: 600 18px/1 'Inter', sans-serif; letter-spacing: 0.12em; color: var(--paper); }
.foot-grid .mono .one { color: var(--terra); }
.foot-grid p { font: 400 14px/1.7 'Pretendard', sans-serif; color: var(--footer-muted); margin-top: 18px; max-width: 300px; }
.foot-grid .kick { font-size: 10px; color: var(--footer-muted-2); }
.foot-menu { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; font: 500 14px 'Pretendard', sans-serif; color: var(--footer-text); }
.foot-menu a:hover { color: var(--paper); }
.foot-contact { margin-top: 18px; font: 500 14px/1.9 'Pretendard', sans-serif; color: var(--footer-text); }
.foot-bar {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 12px 'Pretendard', sans-serif;
  color: var(--footer-muted-2);
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Mobile bottom action bar (기획서 권장) ---------- */
.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  grid-template-columns: 1fr 1fr 1.2fr;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.mbar a {
  padding: 15px 8px;
  text-align: center;
  font: 600 14px 'Pretendard', sans-serif;
  color: var(--paper);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.mbar a:last-child { border-right: 0; }
.mbar a.kakao { background: var(--kakao); color: var(--kakao-ink); }
.mbar a.quote { background: var(--terra); color: #fff; }

/* ---------- Floating KakaoTalk button ---------- */
.fab {
  position: fixed;
  right: 22px; bottom: 26px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--kakao);
  color: var(--kakao-ink);
  padding: 13px 18px;
  border-radius: 999px;
  font: 700 14px 'Pretendard', sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 18px; height: 18px; }

/* ---------- Scroll fade-in ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  :root { --pad: 28px; }
  .hero-h1 { font-size: 60px; }
  .h2 { font-size: 40px; }
  .promise { grid-template-columns: 96px 1fr; }
  .promise .proof-col { grid-column: 1 / -1; padding-left: 0; }
}

@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .section--96 { padding: 64px 0; }

  /* hero stacks */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 56px 0 40px; border-right: 0; }
  .hero-metrics { padding-left: 0; border-top: 1px solid var(--line); }
  .hero-metrics { flex-direction: row; flex-wrap: wrap; gap: 0 32px; }
  .metric { flex: 1 1 30%; border-bottom: 0; padding: 24px 0; }
  .hero-image .shot { height: 320px; }

  /* split stacks */
  .split { grid-template-columns: 1fr; }
  .split > .col-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .split-body, .split .col-right .split-body { padding: 36px 0 4px; }

  /* metrics row → 2 cols */
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .metrics-row .cell { padding: 28px 18px; }
  .metrics-row .cell:nth-child(2) { border-right: 0; }
  .metrics-row .cell:nth-child(odd) { padding-left: 0; }
  .metrics-row .cell:nth-child(3), .metrics-row .cell:nth-child(4) { border-top: 1px solid var(--line); }

  /* cards / quotes stack */
  .cards-3 { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .quote { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .quote:last-child { border-bottom: 0; }

  /* footer stacks */
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }

  /* CTA */
  .cta-dark h2 { font-size: 40px; }
  .cta-dark .container { padding-top: 72px; padding-bottom: 72px; }
}

@media (max-width: 720px) {
  /* mobile nav */
  .gnb { display: none; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
  }
  .nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

  .gnb.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    padding: 8px var(--pad) 16px;
  }
  .gnb.open a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .gnb.open a.btn--ink { width: 100%; text-align: center; margin-top: 12px; border-bottom: 0; background: var(--ink); color: var(--paper); padding: 14px 0; }
  .gnb.open a.btn--ink.is-active { color: var(--paper); }

  /* reveal bottom bar on small screens */
  .mbar { display: grid; }
  .fab { bottom: 78px; }      /* sit above the mobile bar */
  body { padding-bottom: 54px; }

  .hero-h1 { font-size: 46px; }
  .trust .sep { display: none; }
}

@media (max-width: 460px) {
  .hero-h1 { font-size: 38px; }
  .h2 { font-size: 32px; }
  .metric { flex: 1 1 45%; }
}

/* =========================================================
   DESIGN POLISH LAYER (v2)
   Larger type scale · thin-line icon system · diagrams · depth.
   Appended last so these win over earlier same-specificity rules.
   ========================================================= */

/* ---------- Type scale bump (readability) ---------- */
.trust .container { font-size: 14px; }
.metric .lbl { font-size: 14px; }
.metrics-row .lbl { font-size: 15px; }
.promise p { font-size: 17px; }
.promise .proof { font-size: 15px; }
.case .cap { font-size: 14px; }
.case h4 { font-size: 17px; }
.partners .label, .badge { font-size: 14px; }
.quote p { font-size: 18px; }
.quote .who { font-size: 15px; }
.quote .who span { font-size: 14px; }
.foot-grid p { font-size: 15px; line-height: 1.75; }
.foot-menu, .foot-contact { font-size: 15px; }
.foot-bar { font-size: 13px; }
.cta-dark .lead { font-size: 18px; }
.hero-lead { font-size: 19px; }
.metric .num { font-size: 34px; }

/* ---------- Thin-line icon system ---------- */
.lic {
  width: 1.3em; height: 1.3em; flex: 0 0 auto;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}
/* icon "chip" — hairline square holding a line icon (matches 0-radius architecture) */
.icon-box {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.icon-box .lic { width: 26px; height: 26px; }
.icon-box.teal  { color: var(--teal);  border-color: #CBE0D8; }
.icon-box.terra { color: var(--terra); border-color: #EBD2C6; }
.icon-box.on-dark { background: transparent; border-color: rgba(255,255,255,.22); color: var(--paper); }
/* inline label icon (kicker / contact rows) */
.ic-inline { display: inline-flex; align-items: center; gap: 9px; }

/* ---------- Depth / hover (kept subtle, flat aesthetic) ---------- */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(22,20,15,.09); }
.lift:hover .icon-box { transform: translateY(-2px); }
.badge.lift:hover, .lift:hover { border-color: var(--ink); }

/* ---------- Feature card (icon + title + body) ---------- */
.feature {
  background: var(--card); border: 1px solid var(--line);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 16px;
}
.feature .idxnum { font: 200 22px 'Inter', sans-serif; color: var(--muted); letter-spacing: -0.02em; }
.feature h4 { font: 600 19px 'Pretendard', sans-serif; color: var(--ink); letter-spacing: -0.01em; }
.feature p { font: 400 15px/1.7 'Pretendard', sans-serif; color: var(--body); margin: 0; }
.feature .top { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Process flow (connected numbered steps) ---------- */
.flow { display: grid; gap: 0; }
.flow--3 { grid-template-columns: repeat(3, 1fr); }
.flow--4 { grid-template-columns: repeat(4, 1fr); }
.flow--5 { grid-template-columns: repeat(5, 1fr); }
.flow--6 { grid-template-columns: repeat(6, 1fr); }
.flow--7 { grid-template-columns: repeat(7, 1fr); }
.flow-step { position: relative; padding: 0 14px; text-align: center; }
.flow-step::before {           /* connector line behind the node */
  content: ""; position: absolute; top: 25px; left: 0; right: 0;
  height: 1px; background: var(--line); z-index: 0;
}
.flow-step:first-child::before { left: 50%; }
.flow-step:last-child::before  { right: 50%; }
.flow-node {
  position: relative; z-index: 1; margin: 0 auto 18px;
  width: 50px; height: 50px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font: 600 16px 'Inter', sans-serif; color: var(--ink);
}
.flow-node .lic { width: 22px; height: 22px; }
.flow--teal .flow-node { border-color: var(--teal); color: var(--teal); }
.flow-step h4 { font: 600 16px 'Pretendard', sans-serif; color: var(--ink); margin: 0 0 6px; }
.flow-step p  { font: 400 13.5px/1.6 'Pretendard', sans-serif; color: var(--muted); margin: 0; }
/* on dark (teal-deep) backgrounds */
.flow.on-dark .flow-step::before { background: rgba(255,255,255,.2); }
.flow.on-dark .flow-node { background: transparent; border-color: var(--teal-light); color: var(--teal-light); }
.flow.on-dark .flow-step h4 { color: var(--paper); }
.flow.on-dark .flow-step p  { color: var(--teal-light); }

/* ---------- Pills / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font: 500 13.5px 'Pretendard', sans-serif; color: var(--nav);
  background: var(--card);
}
.chip .lic { width: 15px; height: 15px; }
.chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 860px) {
  .flow--5, .flow--6, .flow--7 { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .flow--5 .flow-step::before, .flow--6 .flow-step::before, .flow--7 .flow-step::before { display: none; }
  .hero-lead { font-size: 17px; }
  .cta-dark .lead { font-size: 16px; }
}

/* ---------- KakaoTalk removed → mobile bar = [전화][무료 견적] ---------- */
.mbar { grid-template-columns: 1fr 1.3fr; }

/* ---------- Prominent phone numbers (now primary contact CTA) ---------- */
.phone-row { display: inline-flex; align-items: center; gap: 11px; }
.phone-row .lic { width: 22px; height: 22px; color: var(--terra); }
.phone-lg {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
}
.phone-xl { font-size: 30px; }
.phone-cap { font: 500 13px 'Pretendard', sans-serif; color: var(--muted); }
.on-dark .phone-lg, .cta-dark .phone-lg { color: var(--paper); }
.on-dark .phone-row .lic, .cta-dark .phone-row .lic { color: var(--ember); }

/* ---------- Data table (식품안전 온도 기준표 등) ---------- */
.dtable { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
.dtable caption { text-align: left; font: 500 13px 'Pretendard', sans-serif; color: var(--muted); padding: 0 0 14px; }
.dtable th, .dtable td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line-card); font: 400 15px 'Pretendard', sans-serif; color: var(--body); }
.dtable thead th { font: 600 13px 'Pretendard', sans-serif; color: var(--ink); background: var(--section-soft); letter-spacing: .01em; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td .mono, .dtable td b { font-weight: 600; color: var(--ink); }
.dtable td .val { font: 600 16px 'Inter', sans-serif; color: var(--ink); white-space: nowrap; }
.dtable .teal { color: var(--teal); }
/* on teal-deep dark blocks */
.on-dark .dtable { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.on-dark .dtable th, .on-dark .dtable td { border-color: rgba(255,255,255,.12); color: var(--teal-light); }
.on-dark .dtable thead th { background: rgba(255,255,255,.06); color: var(--paper); }
.on-dark .dtable td .val, .on-dark .dtable td b { color: var(--paper); }

/* ---------- Color legend (교차오염 색상 구분 도마) ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 10px; }
.legend .lg {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px 7px 9px; font: 500 13.5px 'Pretendard', sans-serif; color: var(--nav); background: var(--card);
}
.legend .dot { width: 13px; height: 13px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; }

/* ---------- Credential badge ("보유" 강조: ServSafe) ---------- */
.cred-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal); color: #fff; border-radius: 999px;
  padding: 5px 12px; font: 600 12px 'Pretendard', sans-serif; letter-spacing: .02em;
}
.cred-badge .lic { width: 14px; height: 14px; }
.ref-badge {                       /* 보조: "기준 운영" 표기 */
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font: 500 12px 'Pretendard', sans-serif; color: var(--muted);
}
.feature.is-held { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }

/* ---------- Checklist (라인 아이콘 체크 목록) ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.6 'Pretendard', sans-serif; color: var(--body); }
.checklist .lic { width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }

@media (max-width: 640px) {
  .dtable th, .dtable td { padding: 12px 12px; font-size: 14px; }
  .dtable td .val { font-size: 15px; }
}

/* ---------- Mobile horizontal-overflow guard ----------
   Prevents any stray-wide child from stretching the page (which was
   pushing the sticky-header hamburger off-screen on phones). */
html, body { overflow-x: clip; max-width: 100%; }
.container { width: 100%; }
.dtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* let fl/grid children shrink instead of forcing overflow */
.flow-step, .feature, .metric, .cell, .quote, .case, .promise > div { min-width: 0; }

/* ---------- Header: larger nav + clearer active + visible CTA ---------- */
.gnb { font-size: 15px; }
.gnb a.is-active:not(.btn--ink) { border-bottom: 2px solid var(--terra); padding-bottom: 4px; }
.gnb a.is-active.is-teal:not(.btn--ink) { border-bottom-color: var(--teal); }
.gnb a.btn--ink.is-active { color: var(--paper); }   /* fix: CTA text stays visible on its own page */
.gnb a.btn--ink:hover { background: var(--terra); color: #fff; filter: none; }   /* fix: visible rollover (was dark-on-dark) */

/* ---------- Hero page-name label — bigger so current page is obvious ---------- */
.hero-copy > .kick,
.brand-hero-copy > .kick,
.cat-hero-copy > .kick,
.rent-hero-copy > .kick,
.hyg-hero-copy > .kick,
.exp-hero-copy > .kick,
.contact-hero .kick {
  font-size: 17px;
  letter-spacing: 0.14em;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
@media (min-width: 861px) {
  .hero-copy > .kick,
  .brand-hero-copy > .kick,
  .cat-hero-copy > .kick,
  .rent-hero-copy > .kick,
  .hyg-hero-copy > .kick,
  .exp-hero-copy > .kick,
  .contact-hero .kick {
    font-size: 19px;
    letter-spacing: 0.16em;
  }
}

/* ---------- Footer: brand + slogan only (Menu·Contact columns removed) ---------- */
.foot-grid { grid-template-columns: 1fr; }
.foot-grid > div:nth-child(2),
.foot-grid > div:nth-child(3) { display: none; }

/* =========================================================
   MOBILE / PC LAYOUT POLISH (v3)
   Fixes lopsided gaps + empty space flagged on phone widths.
   ========================================================= */

/* ---- index · 3대 No.1 promise: stack cleanly on phones ----
   Previously the giant 01/02/03 stayed in a 96px column, leaving a
   tall empty band beside the copy. Collapse to a single column so the
   number → icon → title → body → 근거 read as one tidy block. */
@media (max-width: 860px) {
  .promise {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 38px 0;
  }
  .promise .idx { font-size: 44px; line-height: 1; margin-bottom: 16px; }
  .promise > div .icon-box { margin-bottom: 16px; }
  .promise .proof-col {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .promise p { max-width: none; }
}

/* ---- index hero metrics: 3 stats on ONE balanced row (stat bar) ----
   At <460px the 45% basis wrapped 2+1, orphaning the 3rd stat. Force an
   even 3-up row with hairline dividers and a figure that scales down so
   it fills edge-to-edge with no stranded item. */
@media (max-width: 860px) {
  .hero-metrics { flex-wrap: nowrap; gap: 0; }
  .metric { flex: 1 1 0; min-width: 0; padding: 22px 16px; }
  .metric:first-child { padding-left: 0; }
  .metric:last-child { padding-right: 0; }
  .metric + .metric { border-left: 1px solid var(--line); }
  .metric .num { font-size: clamp(20px, 6.4vw, 30px); }
  .metric .lbl { font-size: clamp(11.5px, 3.2vw, 14px); margin-top: 5px; }
}

/* ---- inner-page hero stat rails: fill the tall right column ----
   The 2-stat rails were pinned to the bottom (flex-end), leaving a big
   void in the upper-right of every inner hero. Distribute them across
   the full column height so the rail reads as a deliberate KPI strip
   instead of a lopsided gap. Higher-specificity selectors win over the
   page CSS regardless of load order. */
@media (min-width: 861px) {
  .brand-hero .brand-hero-metrics,
  .cat-hero .cat-hero-metrics,
  .rent-hero .rent-hero-metrics,
  .hyg-hero .hyg-hero-metrics,
  .exp-hero .exp-hero-aside {
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}