@charset "utf-8";
/* ============================================================
   SEMIWON FOOD — main.css  (메인 페이지 전용)
   ============================================================ */

/* ------------------------------------------------------------
   [1] 히어로 — 첫 섹션
   시안 수치는 모두 1920px 기준. (px ÷ 20 = rem)
------------------------------------------------------------ */
.hero {
  position: relative;
  /* 배경 이미지 비율(3024×1438 ≒ 2.103:1)에 맞춘 높이 → 1920에서 913px */
  min-height: 45.65rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--brand);
}
/* 오버레이 없음 — 배경 이미지를 그대로 노출 */
.hero__bg { position: absolute; inset: 0; }
/* 상하 동일 패딩 → 콘텐츠가 히어로 정중앙에 오도록 */
.hero__inner { position: relative; z-index: 2; padding-block: 4rem; }

/* B2B Food Ingredient Specialist — 16.5px / 600 / #FFF 60% */
.hero__eyebrow {
  font-size: calc(var(--u) * 12.1393);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}

/* 세상의 맛을 담은 / 세미원푸드 — 74px */
.hero__title {
  margin-top: 1.1rem;
  font-size: calc(var(--u) * 54.4429);              /* ★ 74px @1920 */
  font-weight: 800;               /* 세상의 맛 */
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #fff;
}
.hero__title .thin  { font-weight: 400; }   /* 을 담은 */
.hero__title .line2 { color: #E6FF96; font-weight: 800; }

/* 세상의 다양한 먹거리를 여러분의 식탁 위로 — 22px / 600 / #FFF */
.hero__lead {
  display: flex; align-items: center;
  margin-top: 1.1rem;
  font-size: calc(var(--u) * 16.1857); font-weight: 600;
  color: #FFFFFF;
}
.hero__lead .bar {
  flex: none;
  width: 2rem; height: 0;
  margin-right: 0.85rem;
  border-top: 1px solid #FFFFFF;
}

/* 버튼 — 14px / 800 */
.hero__btns { display: flex; gap: 1.2rem; margin-top: 2.2rem; }
.hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  /* 위아래 padding 을 동일하게 주고, line-height 를 아이콘보다 크게 잡아
     아이콘이 있는 버튼과 없는 버튼의 높이가 정확히 같아지도록 한다 */
  padding: 1rem 1.6rem;
  line-height: 1.2;
  border-radius: 999px;
  font-size: calc(var(--u) * 12);                /* PC 기준 16.3px */
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.hero__btn svg { width: 0.75rem; height: 0.75rem; flex: none; }
.hero__btn:hover { transform: translateY(-1px); }
.hero__btn--fill  { background: #0A4238; color: #FFFFFF; }
.hero__btn--fill:hover  { background: #0E5546; }
.hero__btn--white { background: #FFFFFF; color: #0A4238; }
.hero__btn--white:hover { background: #E6FF96; }

/* 모바일 — 별도 시안 확정 전 임시값 (PC 비율을 축소 적용) */
@media (max-width: 990px) {
  .hero { min-height: 24rem; }
  .hero__inner { padding-block: 3rem; }
  .hero__title { font-size: calc(var(--u) * 42); margin-top: 0.8rem; line-height: 1.28; }
  .hero__eyebrow { font-size: calc(var(--u) * 9.7114); letter-spacing: 0.2em; }
  .hero__lead { font-size: calc(var(--u) * 13.6); margin-top: 0.9rem; }
  .hero__lead .bar { width: 1rem; margin-right: 0.6rem; }
  .hero__btns { gap: 0.6rem; margin-top: 1.5rem; }
  .hero__btn {
    flex: none; padding: calc(var(--u) * 8) calc(var(--u) * 17);
    gap: calc(var(--u) * 3);
    font-size: calc(var(--u) * 10.3);
  }
  .hero__btn svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
}

/* ============================================================
   접은 모바일 (500px 이하) — 히어로
   ============================================================ */
@media (max-width: 500px) {
  .hero__btn {
    padding: calc(var(--u) * 12) calc(var(--u) * 24);
    font-size: calc(var(--u) * 12.5);
  }
  .hero__btn svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
}

/* ------------------------------------------------------------
   [2] 간편 제휴문의 바 (히어로 하단 오버랩)
------------------------------------------------------------ */
/* 바 높이 — 이 값의 절반만큼 위로 당겨 1·2섹션에 정확히 반반 걸치게 한다 */
.quickbar { --qb-h: 4.8rem; position: relative; z-index: 5; margin-top: calc(var(--qb-h) / -2); }
.quickbar__inner {
  display: flex; align-items: center; gap: 1.2rem;
  height: var(--qb-h);
  padding-inline: 3rem;
  border-radius: 0;                 /* 시안 : radius 0 */
  background: #0A4238;              /* 전체 배경 */
}

/* 간편제휴문의 20px / 800 / #FFF  +  설명 14px / 300 / #FFF 70% */
.quickbar__label { flex: none; display: flex; align-items: baseline; gap: 0.8rem; }
.quickbar__label b { font-size: calc(var(--u) * 14.7143); font-weight: 800; color: #FFFFFF; }
.quickbar__label span { font-size: calc(var(--u) * 10.3); font-weight: 300; color: rgba(255,255,255,.7); }

.quickbar__form { display: flex; align-items: center; gap: 1rem; flex: 1; justify-content: flex-end; }
.quickbar__field { display: flex; align-items: center; gap: 0.6rem; }

/* 성함 14px Bold #FFF  /  필수표시 * 는 #E06235 */
.quickbar__field > label {
  font-size: calc(var(--u) * 10.3); font-weight: 700; color: #FFFFFF; white-space: nowrap;
}
.quickbar__field > label .req { color: #E06235; font-weight: 700; }

/* input — 배경 #0E5145 / radius 5px / placeholder 14px #FFF 50% */
.quickbar__field input {
  width: 9.5rem; height: 2.3rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 5px;
  background: #0E5145;
  font-size: calc(var(--u) * 10.3); color: #fff;
}
.quickbar__field input::placeholder { color: rgba(255,255,255,.5); }
.quickbar__field input:focus {
  outline: none; box-shadow: 0 0 0 2px rgba(230,255,150,.55);
}

/* 접수하기 — 14px Bold #FFF / 배경 #04342C / radius 5px */
.quickbar__submit {
  height: 2.3rem; padding-inline: 1.8rem;
  border-radius: 5px;
  background: #04342C; color: #FFFFFF;
  font-size: calc(var(--u) * 10.3); font-weight: 700;
  transition: background .2s var(--ease);
}
.quickbar__submit:hover { background: #02241E; }

@media (max-width: 990px) {
  /* 시안 : 히어로 바로 밑에 화면 끝까지 붙는 초록 바.
     라벨 줄 / 입력 줄 2단, 입력 줄은 한 행에 성함·연락처·접수하기 */
  .quickbar { margin-top: 0; }
  .quickbar > .container { padding-inline: 0; }
  .quickbar__inner {
    flex-direction: column; align-items: stretch;
    height: auto; gap: calc(var(--u) * 7);
    padding: calc(var(--u) * 13) calc(var(--u) * 20) calc(var(--u) * 20);
  }
  .quickbar__label { flex-direction: row; align-items: baseline; gap: calc(var(--u) * 9); }
  .quickbar__label b { font-size: calc(var(--u) * 13); }
  .quickbar__label span { font-size: calc(var(--u) * 9); }
  .quickbar__form { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 11); }
  .quickbar__field { gap: calc(var(--u) * 6); flex: 1 1 0; min-width: 0; }
  .quickbar__field > label { width: auto; font-size: calc(var(--u) * 10.3); }
  .quickbar__field input {
    flex: 1 1 0; width: auto; min-width: 0;
    height: calc(var(--u) * 26); padding-inline: calc(var(--u) * 10);
    font-size: calc(var(--u) * 10.3);
  }
  /* 성함은 짧은 입력이라 폭을 줄이고, 남는 폭은 연락처가 가져간다 */
  .quickbar__field:first-child { flex: 0 1 auto; }
  .quickbar__field:first-child input { flex: none; width: calc(var(--u) * 72); }
  .quickbar__submit {
    flex: none; height: calc(var(--u) * 26);
    padding-inline: calc(var(--u) * 32); font-size: calc(var(--u) * 10.3);
  }
}

/* ------------------------------------------------------------
   [3] WHY SEMIWON — 신뢰 요소
------------------------------------------------------------ */
.why { padding-block: 5.5rem 5rem; }
.why__head { position: relative; margin-bottom: 3rem; }

/* WHY SEMIWON — 10.5px / 600 / #0A4238 50% */
.why__eyebrow {
  font-size: calc(var(--u) * 7.725);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(10,66,56,.5);
  text-transform: uppercase;
}

/* 검증된 품질, 신뢰받는 파트너 — 42px / 800 / #18211E */
.why__title {
  margin-top: 0.75rem;
  font-size: calc(var(--u) * 30.9);              /* 42px @1920 : 페이지 최대 */
  font-weight: 800;
  line-height: 1.44;
  letter-spacing: -0.035em;
  color: #18211E;
}

/* 우측 상단 워터마크 */
.why__mark {
  position: absolute; right: 0; top: 0;
  width: 8.8rem; height: auto;
  opacity: .9;
  pointer-events: none;
}

/* 3분할 정사각 카드 */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.why-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;            /* 시안 : 정사각 */
  border-radius: 10px;            /* 시안 : 배경 radius 10px */
  overflow: hidden;
  color: #fff;
}
.why-card .ph { position: absolute; inset: 0; border-radius: 0; }
.why-card .ph img { transition: transform .5s var(--ease); }
.why-card:hover .ph img { transform: scale(1.04); }

.why-card__body {
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.7rem;
  z-index: 2;
}

/* HACCP 인증 취득 — 26px / Bold / #FFFFFF */
.why-card__title {
  display: block;
  font-size: calc(var(--u) * 19.1286);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

/* 설명 — 16px / 500 / #FFFFFF */
.why-card__desc {
  display: block;
  margin-top: 0.65rem;
  font-size: calc(var(--u) * 11.7714);
  font-weight: 500;
  line-height: 1.6;
  color: #FFFFFF;
}

/* 식품안전관리인증기준준수 — 14px / 500 / #E6FF96 */
.why-card__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: calc(var(--u) * 10.3);
  font-weight: 500;
  color: #E6FF96;
}
.why-card__pill svg { width: 0.9rem; height: 0.9rem; flex: none; }

/* 2·3번 카드 상단 라임 점 */
.why-card__dot {
  display: block;
  width: 0.4rem; height: 0.4rem;
  margin-bottom: 0.3rem;
  border-radius: 50%;
  background: #E6FF96;
}

@media (max-width: 990px) {
  .why { padding-block: 3rem; }
  .why > .container { padding-inline: calc(var(--u) * 34); }   /* 시안 : WHY 섹션만 여백 34px */
  .why__head { margin-bottom: calc(var(--u) * 31); }        /* 타이틀 아래 여백 */
  .why__eyebrow { font-size: calc(var(--u) * 8.4); letter-spacing: 0.5em; }
  .why__title { font-size: calc(var(--u) * 25.3); margin-top: calc(var(--u) * 3); line-height: 1.42; }
  .why__mark { width: 5.4rem; }
  /* 카드 3장 가로 슬라이드, 모두 정사각형 (제공 이미지 1034x1036) */
  /* 한 화면에 카드 1장만. 트랙을 컨테이너 폭에 딱 맞춰
     다음 카드가 옆으로 비치지 않게 한다. */
  .why__grid {
    display: flex; grid-template-columns: none;
    gap: calc(var(--u) * 12);
    overflow-x: auto; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .why__grid::-webkit-scrollbar { display: none; }
  .why-card {
    flex: none; width: 100%;
    aspect-ratio: 1 / 1; scroll-snap-align: start;
  }
  .why-card__body { left: 1.1rem; right: 1.1rem; bottom: 1.2rem; }
  /* HACCP 카드 — 제목·설명·인증 라벨 전체 확대 */
  .why-card__title { font-size: calc(var(--u) * 25); }
  .why-card__desc { font-size: calc(var(--u) * 13.4); margin-top: calc(var(--u) * 9); }
  .why-card__pill { font-size: calc(var(--u) * 12.2); margin-top: calc(var(--u) * 12); gap: calc(var(--u) * 5); }
  .why-card__pill svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
  /* 2·3번 카드(체계적인 물류 시스템 / 주요 납품처 실적) */
  .why-card:not(.why-card--lead) .why-card__title { font-size: calc(var(--u) * 25); }
  .why-card__dot {
    width: calc(var(--u) * 8); height: calc(var(--u) * 8);
    margin-bottom: calc(var(--u) * 5);
  }
}

/* ------------------------------------------------------------
   [4] TRUSTED BY — 거래처 로고 스트립
------------------------------------------------------------ */
.trusted { background: #F9F9F5; padding-block: 3.2rem 3.6rem; overflow: hidden; }
.trusted__head { text-align: center; }

/* Trusted by — 13px / 500 / #A0A8A2 */
.trusted__eyebrow {
  font-size: calc(var(--u) * 9.5643);
  font-weight: 500;
  letter-spacing: 0.34em;
  color: #A0A8A2;
}

/* Korea's Leading Companies — 26px / 600 / #2A2A2A */
.trusted__title {
  margin-top: 0.7rem;
  font-size: calc(var(--u) * 19.1286);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #2A2A2A;
}
.trusted__title b { font-weight: 600; color: var(--green-600); }

/* ※ 로고 마퀴(.trusted__track / .trusted__item)는 브랜드 페이지에서도 쓰므로
   components.css 로 옮겼다. */

@media (max-width: 990px) {
  .trusted { padding-block: 2.2rem 2.6rem; }
  .trusted__eyebrow { font-size: calc(var(--u) * 8.4); letter-spacing: 0.5em; font-weight: 600; }
  .trusted__title { font-size: calc(var(--u) * 22); margin-top: calc(var(--u) * 5); line-height: 1.18; }  /* 시안 실측 : 잉크 높이 17px, 줄 간격 26px */
}


/* ------------------------------------------------------------
   [5] PRODUCTS — 카테고리 탭 + 슬라이더
------------------------------------------------------------ */
.pcat { padding-block: 5rem; }
.pcat__head { text-align: center; margin-bottom: 3.4rem; }
.pcat__eyebrow { font-size: calc(var(--u) * 7.725); font-weight: 600; color: rgba(10, 66, 56, .5); }  /* 10.5px */
.pcat__title {
  margin-top: 0.75rem;
  font-weight: 800;                 /* 42px */
  color: #18211E;
}
.pcat__title .accent { color: #1E5040; }

/* 탭 */
.pcat__tabs {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1.12rem;
  margin-bottom: 2.9rem;
}
.pcat__tab {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.pcat__tab-ico {
  width: 100%; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-img);      /* 10px */
  background: #F7F7F7;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.pcat__tab-ico img {
  width: auto; height: auto;
  max-width: 58%; max-height: 58%;
  object-fit: contain;
}
.pcat__tab-name {
  font-size: calc(var(--u) * 11.0357);               /* 15px */
  font-weight: 500; text-align: center; letter-spacing: -0.03em;
  color: rgba(0, 0, 0, .4);
  transition: color .22s var(--ease);
}
.pcat__tab:hover .pcat__tab-ico { transform: translateY(-2px); }
.pcat__tab.is-on .pcat__tab-ico { background: #0A4B38; }
.pcat__tab.is-on .pcat__tab-name { color: #000; }

/* 슬라이더 */
.pcat__slider { position: relative; }
.pcat__viewport {
  margin-inline: 8.4rem;
  border-radius: var(--r-img);
  overflow: hidden;
}
.pcat__panel {
  display: none;                    /* 9개를 미리 만들어 두고 활성만 표시한다 */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 23.25rem;
  padding: 3rem 5.25rem;
  background: #F5F7F6;              /* 바깥 배경 */
  border-radius: var(--r-img);
}
.pcat__panel.is-on { display: grid; animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
.pcat__panel-eyebrow {
  font-size: calc(var(--u) * 10.5);                /* PC 14.3px */
  font-weight: 700; letter-spacing: 0.06em;
  color: #1E5040; text-transform: uppercase;
}
.pcat__panel-title {
  margin-top: 0.5rem;
  font-size: calc(var(--u) * 36.7857);                /* 50px */
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.2;
  color: #000;
}
.pcat__panel-sub {
  margin-top: 0.55rem;
  font-size: calc(var(--u) * 14.2);                   /* PC 19.3px */
  font-weight: 700; color: #000;
}
.pcat__panel-points { margin-top: 1.1rem; display: grid; gap: 0.35rem; }
.pcat__panel-points li {
  position: relative; padding-left: 0.8rem;
  font-size: calc(var(--u) * 11.6);                 /* PC 15.8px */
  color: rgba(0, 0, 0, .8); line-height: 1.6;
}
.pcat__panel-points li::before {
  content: ""; position: absolute; left: 0; top: 0.42rem;
  width: 0.24rem; height: 0.24rem; border-radius: 50%; background: #62896A;
}
.pcat__panel-btn {
  margin-top: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.4rem; padding-inline: 1.9rem;
  border-radius: var(--r-full);     /* 999px */
  background: #0A4238;
  font-size: calc(var(--u) * 12.2);                /* PC 16.6px */
  font-weight: 800; color: #fff; white-space: nowrap;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.pcat__panel-btn:hover { background: var(--green-600); transform: translateY(-1px); }
.pcat__panel-btn img { width: 0.7rem; height: 0.7rem; flex: none; }

/* 이미지 + 뒤쪽 원 */
.pcat__panel-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pcat__panel-img::before {
  content: ""; position: absolute; z-index: 0;
  width: 18.2rem; aspect-ratio: 1/1;
  right: -0.8rem; top: 50%; transform: translateY(-50%);
  border-radius: 50%;
  background: #FCFDFC;
}
.pcat__panel-img .ph {
  position: relative; z-index: 1;
  width: 19.9rem; aspect-ratio: 1/1;
  background: none; border-radius: 0;
}
.pcat__panel-img .ph img { object-fit: contain; }
.pcat__panel-img .ph.is-empty {
  border-radius: 50%;
  background: linear-gradient(135deg, #EDF2EE 0%, #E2EBE4 50%, #EDF2EE 100%);
}

.pcat__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3.35rem; height: 3.35rem;
  padding: 0;                       /* button 기본 padding 이 남으면 아이콘이 눌린다 */
  z-index: 3;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.pcat__nav picture { display: block; width: 100%; height: 100%; }
.pcat__nav img { width: 100%; height: 100%; object-fit: contain; }   /* 비율 안 깨지게 */
.pcat__nav:hover { transform: translateY(-50%) scale(1.06); opacity: .85; }
.pcat__nav--prev { left: 0; }
.pcat__nav--next { right: 0; }

@media (max-width: 990px) {
  .pcat { padding-block: 3rem; }
  .pcat__head { margin-bottom: calc(var(--u) * 16); }   /* 시안 : 타이틀 밑 1376 → 패널 위 1413 */
  .pcat__eyebrow { font-size: calc(var(--u) * 8.4); letter-spacing: 0.5em; }
  .pcat__title { margin-top: 0.8rem; }
  /* 시안 : 모바일은 카테고리 탭 줄 없이 좌우 화살표로만 넘긴다 */
  .pcat__tabs { display: none; }
  .pcat > .container { padding-inline: calc(var(--u) * 34); }
  .pcat__viewport { margin-inline: 0; }
  /* 패널을 가로로 늘어놓고 트랙을 밀어 슬라이드 (깜빡임 없이 옆으로 이동) */
  .pcat__viewport { overflow: hidden; }
  .pcat__panels {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    transform: translateX(calc(var(--i, 0) * -100%));
    transition: transform .62s cubic-bezier(.65, 0, .35, 1);
  }
  .pcat__panel.is-on,
  .pcat__panel { display: grid; flex: 0 0 100%; min-width: 100%; animation: none; }

  /* 시안 : 텍스트 좌 · 이미지 우 (패널 x34-377 / 텍스트 칼럼 x67-234) */
  .pcat__panel {
    grid-template-columns: calc(var(--u) * 167) 1fr;
    min-height: 0;
    padding: calc(var(--u) * 28) calc(var(--u) * 33) calc(var(--u) * 29);
    gap: 0;
  }
  /* 시안 잉크 실측 : 플랫브레드 w113 · 부제 w127 · 불릿 w128 · 버튼 72x21 */
  .pcat__panel-eyebrow { font-size: calc(var(--u) * 7.1); letter-spacing: 0.1em; }
  .pcat__panel-title { font-size: calc(var(--u) * 27.4); margin-top: calc(var(--u) * 5); line-height: 1.2; }
  .pcat__panel-sub { font-size: calc(var(--u) * 12.5); margin-top: calc(var(--u) * 2); }
  .pcat__panel-points { margin-top: calc(var(--u) * 4); gap: 0; }
  .pcat__panel-points li {
    font-size: calc(var(--u) * 8.4); line-height: 1.31;
    padding-left: calc(var(--u) * 11);
  }
  .pcat__panel-points li::before { top: calc(var(--u) * 4.4); width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
  .pcat__panel-btn {
    margin-top: calc(var(--u) * 11);
    height: calc(var(--u) * 21); padding-inline: calc(var(--u) * 13);
    gap: calc(var(--u) * 5);
    font-size: calc(var(--u) * 8.4);
  }
  .pcat__panel-btn img { width: calc(var(--u) * 9); }
  .pcat__panel-img { order: 0; }
  .pcat__panel-img::before { width: calc(var(--u) * 110); right: 50%; margin-right: calc(var(--u) * -66); }
  .pcat__panel-img .ph { width: 100%; }
  /* 화살표는 카드 밖(컨테이너 여백 자리)으로 빼고 크기를 줄인다.
     슬라이더가 34~378 이므로 -28 이면 6~28 / 384~406 에 놓인다. */
  .pcat__nav { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
  .pcat__nav--prev { left: calc(var(--u) * -28); }
  .pcat__nav--next { right: calc(var(--u) * -28); }
}

/* ------------------------------------------------------------
   [6] 추천 제품
------------------------------------------------------------ */
.pick { background: #F9F9F6; padding-block: 4.5rem; }
.pick__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.3rem;
}
.pick__title {
  font-size: calc(var(--u) * 26.4857);                /* 36px */
  font-weight: 800; letter-spacing: -0.035em;
  color: #18211E;
}
.pick__title .accent { color: #1E5040; }
.pick__head .btn {
  font-size: calc(var(--u) * 10.3);                /* 14px */
  font-weight: 600; color: #1E5040;
}
.pick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
/* 카드 사이 세로 구분선 */
.pick__grid .p-card { position: relative; }
.pick__grid .p-card + .p-card::before {
  content: ""; position: absolute;
  left: -0.6rem; top: 0; bottom: 0;
  border-left: 0.5px solid rgba(0, 0, 0, .1);
}

@media (max-width: 990px) {
  .pick { padding-block: calc(var(--u) * 50) calc(var(--u) * 34); }
  .pick > .container { padding-inline: calc(var(--u) * 34); display: flex; flex-direction: column; }
  /* 시안 : 타이틀 가운데 → 카드 가로 스크롤 → 버튼 가운데 (버튼이 그리드 아래) */
  .pick__head { display: contents; }
  .pick__title {
    order: 1; text-align: center;
    font-size: calc(var(--u) * 28);
    margin-bottom: calc(var(--u) * 38);
  }
  .pick__grid {
    overscroll-behavior-x: contain;
    order: 2;
    display: flex; grid-template-columns: none;
    align-items: flex-start;
    gap: calc(var(--u) * 11);
    overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--u) * -34); padding-inline: calc(var(--u) * 34);
    scroll-padding-inline: calc(var(--u) * 34);
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .pick__grid::-webkit-scrollbar { display: none; }
  .pick__grid > * { flex: none; width: calc(var(--u) * 171); scroll-snap-align: start; }
  .pick__grid .p-card + .p-card::before { display: none; }
  .pick__head .btn {
    order: 3; align-self: center;
    margin-top: calc(var(--u) * 62);
    height: calc(var(--u) * 34); padding-inline: calc(var(--u) * 20);
    font-size: calc(var(--u) * 11);
    background: transparent;
    border: 1px solid #2E5B4D;
  }
  .pick__head .btn:hover { background: transparent; border-color: #2E5B4D; }
}

/* ------------------------------------------------------------
   [7] 뉴스룸
------------------------------------------------------------ */
.newsroom { padding-block: 4.5rem; }
.newsroom__inner { display: grid; grid-template-columns: 1fr 4.45fr; gap: 3.5rem; }
.newsroom__title {
  font-size: calc(var(--u) * 26.4857);                /* 36px */
  font-weight: 800; letter-spacing: -0.035em;
  color: #000;
}
.newsroom__title .accent { color: #1E5040; }
.newsroom__desc {
  margin-top: 0.9rem;
  font-size: calc(var(--u) * 13.3753);              /* 18.18px */
  font-weight: 600; line-height: 1.6; color: #000;
}
.newsroom__inner .btn {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid #2E5B4D;
  border-radius: var(--r-full);     /* 21px = 높이의 절반, 즉 알약형 */
  font-size: calc(var(--u) * 10.3);                /* 14px */
  font-weight: 600; color: #1E5040;
}
.newsroom__inner .btn:hover { background: var(--green-050); }
.newsroom__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }

@media (max-width: 990px) {
  /* 시안 : 헤드 가운데 → 카드 가로 캐러셀(가운데 카드 235px, 좌우 살짝 보임) → 버튼 가운데 */
  .newsroom { padding-block: calc(var(--u) * 44); }
  .newsroom__inner {
    display: flex; flex-direction: column; grid-template-columns: none;
    gap: 0; text-align: center;
  }
  /* 버튼을 카드 아래로 보내기 위해 래퍼를 투명 처리 */
  .newsroom__inner > .reveal:first-child { display: contents; }
  .newsroom__title { order: 1; font-size: calc(var(--u) * 28); }
  .newsroom__desc { order: 2; font-size: calc(var(--u) * 13.4); margin-top: calc(var(--u) * 14); }
  .newsroom__inner .btn { order: 4; align-self: center; margin-top: calc(var(--u) * 26); padding-inline: calc(var(--u) * 30); }
  .newsroom__list {
    overscroll-behavior-x: contain;
    order: 3; margin-top: calc(var(--u) * 30);
    display: flex; grid-template-columns: none;
    align-items: flex-start;
    gap: calc(var(--u) * 12);
    overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--u) * -29); padding-inline: calc(var(--u) * 89);
    scroll-padding-inline: calc(var(--u) * 89);
    -ms-overflow-style: none; scrollbar-width: none;
    text-align: left;
  }
  .newsroom__list::-webkit-scrollbar { display: none; }
  .newsroom__list > * { flex: none; width: calc(var(--u) * 235); scroll-snap-align: start; }
}

/* ------------------------------------------------------------
   [8] 신규 제휴 문의
------------------------------------------------------------ */
.inquiry { background: #FAFAFA; padding-block: 4.5rem; }
.inquiry__top {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 2rem; align-items: center;
  margin-bottom: 1.8rem;
}
.inquiry__top .eyebrow {
  font-size: calc(var(--u) * 7.725);              /* 10.5px */
  font-weight: 700; color: #115044;
}
.inquiry__title {
  margin-top: 0.75rem;
  font-size: calc(var(--u) * 26.4857);                /* 36px */
  font-weight: 800; line-height: 1.32; letter-spacing: -0.04em;
  color: #000;
}
.inquiry__title .accent { color: #1E5040; }
.inquiry__desc { margin-top: 0.8rem; font-size: calc(var(--u) * 10.5943); line-height: 1.8; color: var(--gray-700); }

/* ※ .channels 는 브랜드 페이지에서도 쓰므로 components.css 로 옮겼다. */
/* 대표번호 바 — 카드 없이 단독 배치 */
.tel-bar {
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 1.15rem 2rem;
  border-radius: var(--r-img);      /* 10px */
  background: #0A4238;
  color: #FFFFFF;
  transition: background .25s var(--ease);
}
.tel-bar:hover { background: var(--green-700); }
.tel-bar__ico { width: 1.05rem; height: 1.05rem; flex: none; }
.tel-bar__label {
  font-size: calc(var(--u) * 11.7714);                /* 16px */
  font-weight: 600;
}
.tel-bar__bar {
  width: 0; height: 1.1rem;
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.tel-bar__num {
  font-size: calc(var(--u) * 19.7613);              /* 26.86px */
  font-weight: 600; letter-spacing: -0.01em;
}

.inquiry__card {
  padding: 1.8rem;
  border-radius: var(--r-img);      /* 10px */
  background: #0A4238;
}
.inquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.inquiry__grid .full { grid-column: 1 / -1; }
.inquiry__card .field-label {
  font-size: calc(var(--u) * 10.3);                /* 14px */
  font-weight: 700; color: #fff;
}
.inquiry__card .field-label .req { color: #E06235; }
.inquiry__card .input,
.inquiry__card .textarea {
  background: #FAFAFA;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-img);      /* 10px */
  font-size: calc(var(--u) * 10.3);                /* 14px */
  color: var(--ink);
}
.inquiry__card .input::placeholder,
.inquiry__card .textarea::placeholder { color: rgba(0, 0, 0, .5); }
.inquiry__card .input:focus,
.inquiry__card .textarea:focus {
  background: #fff;
  box-shadow: 0 0 0 2px var(--green-300);
}
.inquiry__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.2rem; }
.inquiry__btns .btn {
  height: 2.6rem;
  border-radius: var(--r-img);      /* 10px */
  font-size: calc(var(--u) * 11.7714);                /* 16px */
  font-weight: 700;
}
.inquiry__btns .btn--fill { background: #115044; color: #fff; }
.inquiry__btns .btn--fill:hover { background: var(--green-600); }
.inquiry__btns .btn--ghost { background: #04342C; border: 0; color: #fff; }
.inquiry__btns .btn--ghost:hover { background: #062A24; }
.inquiry__btns .btn--ghost .label { font-weight: 400; }

@media (max-width: 990px) {
  /* 시안 : 헤드 가운데 → 대표번호 바 → 채널 4칸 (시안의 문의 폼 자리) */
  .inquiry { padding-block: calc(var(--u) * 60) calc(var(--u) * 50); }
  .inquiry > .container { display: flex; flex-direction: column; }
  .inquiry__top { display: contents; }
  .inquiry__top > div:first-child { order: 1; text-align: center; }
  .inquiry .tel-bar {
    order: 2; margin-top: calc(var(--u) * 60);
    justify-content: center;          /* 대표번호 묶음을 바 가운데로 */
  }
  /* "대표번호" 를 전화번호와 같은 크기로 */
  .tel-bar__label { font-size: calc(var(--u) * 19.7613); }
  .inquiry .channels { order: 3; margin-top: calc(var(--u) * 68); }
  .inquiry__top .eyebrow { font-size: calc(var(--u) * 8.4); letter-spacing: 0.5em; margin-right: -0.5em; font-weight: 700; color: #115044; }
  .inquiry__title { font-size: calc(var(--u) * 27.5); margin-top: calc(var(--u) * 10); line-height: 1.1; }
  .inquiry__desc { font-size: calc(var(--u) * 14.4); margin-top: calc(var(--u) * 16); line-height: 1.45; }
  .inquiry__card { padding: 1.1rem; }
  .inquiry__grid { grid-template-columns: 1fr; }
  .inquiry__btns { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 500px) {
}