/* =========================================================
   FOODTRUCK1 — 위생·안전 (Hygiene & Safety)
   Differentiation page. Teal (--teal / --teal-deep) is the
   dominant accent. Reuses shared tokens & classes from styles.css.
   ========================================================= */

/* ---------- PAGE HERO (teal-deep) ---------- */
.hyg-hero {
  background: var(--teal-deep);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.hyg-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
}
.hyg-hero-copy {
  padding: 92px 56px 88px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.hyg-hero-copy .kick { font-size: 12px; color: var(--teal-light); }
.hyg-hero-h1 {
  font: 200 60px/1.16 'Pretendard', sans-serif;
  color: var(--paper);
  letter-spacing: -0.04em;
  margin-top: 28px;
}
.hyg-hero-h1 span { font-weight: 500; }
.hyg-hero-lead {
  font: 400 19px/1.75 'Pretendard', sans-serif;
  color: #A9C7BD;
  margin-top: 28px;
  max-width: 480px;
}

.hyg-hero-metrics {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 40px;
}
.hyg-metric { padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.hyg-metric:last-child { border-bottom: 0; }
.hyg-metric .num { font: 300 30px 'Inter', sans-serif; color: var(--paper); letter-spacing: -0.02em; }
.hyg-metric .num.teal-light { color: var(--teal-light); }
.hyg-metric .lbl { font: 500 14px 'Pretendard', sans-serif; color: #A9C7BD; margin-top: 6px; }

/* ---------- head-row teal accent ---------- */
.head-row .kick.teal { color: var(--teal); }

/* ---------- 우리가 따르는 국제 위생 기준 (4 feature cards) ---------- */
.std-intro {
  font: 400 17px/1.8 'Pretendard', sans-serif;
  color: var(--body);
  margin: 26px 0 0;
  max-width: 760px;
}
.std-intro b { color: var(--ink); font-weight: 600; }
.std-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

/* ---------- 통합 식품안전 온도 기준표 ---------- */
.dtable-wrap { margin-top: 36px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable-wrap .dtable { min-width: 560px; }
.dtable td b { white-space: nowrap; }

/* ---------- 현장 안전 (화재·가스) ---------- */
.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

/* ---------- 위생 운영 시스템 (2×2) ---------- */
.hyg-ops {
  border-top: 1px solid var(--ink);
  background: var(--section-soft);
  padding: 104px 0;
}
.hyg-ops-head { max-width: 640px; margin-bottom: 48px; }
.hyg-ops-head .kick.teal { color: var(--teal); }
.hyg-ops-head .h2 { margin-top: 16px; }

.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ops-grid .feature p { font-size: 15px; }
.ops-grid .legend { margin-top: 4px; }

/* ---------- HACCP CCP 모니터링 흐름 (teal-deep) ---------- */
.hyg-ccp {
  background: var(--teal-deep);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  padding: 104px 0;
}
.hyg-ccp-head { max-width: 680px; margin-bottom: 56px; }
.hyg-ccp-head .kick { font-size: 12px; color: var(--teal-light); letter-spacing: 0.26em; text-transform: uppercase; }
.hyg-ccp-h2 {
  font: 200 40px/1.2 'Pretendard', sans-serif;
  color: var(--paper);
  letter-spacing: -0.035em;
  margin-top: 16px;
}
.hyg-ccp-head p { font: 400 17px/1.7 'Pretendard', sans-serif; color: #A9C7BD; margin-top: 18px; }

/* ---------- 전담 위생 관리 (split) ---------- */
.hyg-care-sec { border-top: 1px solid var(--ink); }
.hyg-care-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hyg-care-copy {
  padding: 96px 56px 96px 0;
  border-right: 1px solid var(--line);
}
.hyg-care-copy .kick.teal { color: var(--teal); }
.hyg-care-h2 {
  font: 200 42px/1.2 'Pretendard', sans-serif;
  color: var(--ink);
  letter-spacing: -0.035em;
  margin-top: 20px;
}
.hyg-care-copy p {
  font: 400 17px/1.8 'Pretendard', sans-serif;
  color: var(--body);
  margin-top: 22px;
  max-width: 420px;
}
.hyg-care-list {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.hyg-care-list li { font-size: 15px; color: var(--nav); }
.hyg-care-shot { width: 100%; height: 100%; min-height: 480px; }

/* ---------- 최종 CTA (ink bg, teal button) ---------- */
.hyg-cta-kick { color: var(--teal-light); }
.hyg-cta-btn {
  background: var(--terra);
  color: #fff;
  padding: 17px 36px;
  font: 600 15px 'Pretendard', sans-serif;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .hyg-hero-h1 { font-size: 50px; }
  /* 4-col grids → 2 cols on tablet */
  .std-grid { grid-template-columns: 1fr 1fr; }
  .ops-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .hyg-ops { padding: 72px 0; }
  .hyg-ccp { padding: 72px 0; }
  .hyg-ccp-h2 { font-size: 32px; }

  /* hero stacks */
  .hyg-hero-grid { grid-template-columns: 1fr; }
  .hyg-hero-copy { padding: 56px 0 40px; border-right: 0; }
  .hyg-hero-metrics {
    padding-left: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .hyg-metric { flex: 1 1 0; min-width: 0; border-bottom: 0; padding: 24px 16px; }
  .hyg-metric:first-child { padding-left: 0; }
  .hyg-metric:last-child { padding-right: 0; }
  .hyg-metric + .hyg-metric { border-left: 1px solid rgba(255, 255, 255, 0.18); }

  /* 위생 기준 / 위생 운영 / 안전 카드 → 1 col */
  .std-grid { grid-template-columns: 1fr; }
  .ops-grid { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; }

  /* CCP flow → 2 cols, drop connector lines */
  .hyg-ccp .flow--4 { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .hyg-ccp .flow--4 .flow-step::before { display: none; }

  /* 전담 위생 관리 split stacks */
  .hyg-care-split { grid-template-columns: 1fr; }
  .hyg-care-copy { padding: 56px 0 48px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hyg-care-shot { min-height: 320px; }
}

@media (max-width: 460px) {
  .hyg-hero-h1 { font-size: 38px; }
  .hyg-metric .num { font-size: clamp(22px, 6.4vw, 30px); }
}