/* ============================================================
   daebak.css — 대박산업식품 전용 스타일 (6페이지 공용)
   tokens.css 변수만 참조한다. shared/css/* 는 절대 수정하지 않는다.
   브레이크포인트: 48rem / 64rem 두 개만 사용.
   모션 성격: --dur-slow / --dur-reveal 위주, --ease-in-out 선호(대박=느리고 꾸준함).
   로드 순서: tokens.css → base.css → components.css → daebak.css
   ============================================================

   목차
   0. 페이지 공통 유틸 (page-hero, breadcrumb, section-head, trust-num, 헤더 CTA 텍스트링크)
   1. 히어로 (index) — fade+rise 리빌
   2. 핵심 수치 카운트업 (stat-counter, 영문 라벨-숫자-한글 캡션 3단 구조)
   3. 대표 제품 프리뷰 / 제품 카드 공통 보정
   4. 신뢰 3축 — 에디토리얼 스플릿 + 콜드체인 밴드 (레이아웃 브레이크 포인트)
   5. 형제 브랜드 연결 섹션
   6. 최종 CTA 밴드
   7. 사이트 푸터
   8. 제품 페이지 (탭 툴바 / B2B 배너)
   9. 회사소개 페이지 (CEO 인용구 / 신뢰 상세 / 인증 명판 / CI·BI / 연혁)
   10. 소식 페이지 보정
   11. 사업장안내 페이지 (지도 플레이스홀더 / 리스트 카드)
   12. 제휴·납품 문의 페이지 (절차 / 지원 / 체크박스 칩 / FAQ)
   13. 접근성 보정 — 대박 그린(#33AC45) 대비 재지정 (shared/css 컴포넌트 오버라이드)

   2026-07-25 컨벤션 교정(docs/reference/corporate-conventions-food.md 대조):
   제품 카드 이커머스 뱃지 제거, 신뢰 섹션 아이콘칩→큰 번호, 인증 명판 신설,
   stat-counter 3단 구조, EN 오버라인 세트 축소, 헤더 CTA 텍스트링크화, 푸터 주소 파이프 포맷.
   ============================================================ */

/* ---------- 0. 페이지 공통 유틸 ---------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  margin-bottom: var(--sp-5);
}
.breadcrumb a { transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  /* 접근성: --point(#33AC45)는 흰 배경 위 텍스트 대비 2.95:1로 WCAG AA(4.5:1) 미달 —
     이미 정의된 --point-deep(4.80:1 통과)으로 사용처만 재지정(tokens.css 미변경) */
  .breadcrumb a:hover { color: var(--point-deep); }
}
.breadcrumb [aria-current] { color: var(--text); font-weight: var(--fw-medium); }

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: var(--sect-pad-sm);
  background: var(--sub-tint);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../shared/assets/img/daebak/bg_texture.webp");
  background-repeat: repeat;
  background-size: min(28rem, 60vw);
  opacity: 0.45;
}
.page-hero__leaf {
  position: absolute;
  top: -8%;
  right: -10%;
  z-index: -1;
  width: clamp(16rem, 32vw, 28rem);
  height: auto;
  opacity: 0.14;
  pointer-events: none;
  /* 앵커(우상단)는 또렷하게 두고 시선이 닿는 좌·하단 모서리는 하드 엣지 없이 자연스럽게
     녹아들도록 대각선 페이드 마스크를 적용한다(까투리 서브 배너와 동일 원칙, 방향만 대박에 맞춤) */
  mask-image: linear-gradient(225deg, #000 0%, #000 38%, transparent 82%);
  -webkit-mask-image: linear-gradient(225deg, #000 0%, #000 38%, transparent 82%);
}
.page-hero__lead {
  margin-top: var(--sp-4);
  max-width: 38rem;
  font-size: var(--fs-lg);
  color: var(--ink-soft);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
/* 실측: 대상·삼양사는 영문 오버라인+한글 대제목 세트를 반복하지 않고 한글 타이틀 단독으로
   쓴다 — 오버라인을 제거했으므로 h2는 더 이상 위쪽 라벨과의 간격이 필요 없다 */
.section-head h2 { max-width: 32rem; }
.section-head__all { white-space: nowrap; }

/* 헤더 CTA — 필 버튼 대신 배경 없는 볼드 텍스트 링크(실측: 대상·삼양사 GNB엔 CTA 필 버튼 없음) */
[data-theme="daebak"] .site-header__cta {
  align-items: center;
  padding-block: var(--sp-2);
  color: var(--point-deep);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="daebak"] .site-header__cta:hover { color: var(--point); }
}

/* 대박 = fade+rise 단순 리빌(까투리의 커튼 리빌과 성격을 분리) */
@keyframes daebakFadeRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-fade {
  animation: daebakFadeRise var(--dur-reveal) var(--ease-in-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-fade { animation: none; opacity: 1; transform: none; }
}

/* 신뢰 섹션 번호 — 파스텔 아이콘칩 대신 삼양사식 큰 번호(01~03, G마켓산스 대형)로 대체.
   "아이콘 하나 + 카피 한 줄" 조합 대신, 근거는 각 카드의 본문 수치·설명으로 증명한다. */
.trust-num {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
  font-weight: var(--fw-bold); /* GmarketSans 최대 700 */
  line-height: 1;
  color: var(--point-deep);
  font-variant-numeric: tabular-nums;
}
.trust-num--onband { margin-bottom: 0; }

/* ---------- 1. 히어로 (index) ---------- */

.hero-daebak {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 88svh;
  overflow: hidden;
  color: var(--text);
}
.hero-daebak__media { position: absolute; inset: 0; z-index: -2; }
.hero-daebak__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 47.9375rem) {
  .hero-daebak { min-height: 92svh; }
  .hero-daebak__media img { object-position: top center; }
}
.hero-daebak__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, var(--paper) 0%, var(--paper) 26%, transparent 60%);
  opacity: 0.96;
}
@media (max-width: 47.9375rem) {
  .hero-daebak__scrim {
    background: linear-gradient(to right, var(--paper) 0%, var(--paper) 62%, transparent 92%);
  }
}
.hero-daebak__content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding-top: var(--header-h);
}
.hero-daebak__headline {
  font-size: var(--fs-hero);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.hero-daebak__lead {
  margin-top: var(--sp-5);
  max-width: 28rem;
  color: var(--ink-soft);
}
.hero-daebak__actions {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* 히어로 좌측 여백 채움 — 데스크탑에서 헤드라인 왼쪽으로 남는 플랫한 여백에
   인증 정보를 세로 스트립(측정선 + 세로쓰기 라벨)으로 배치해 "빈 공간"이 아니라
   "의도된 마진"으로 읽히게 한다. 좁은 화면에서는 자리가 없어 숨김. */
.hero-daebak__certs {
  display: none;
}
@media (min-width: 64rem) {
  .hero-daebak__certs {
    display: flex;
    align-items: center;
    position: absolute;
    left: clamp(1.5rem, 3vw, 2.75rem);
    top: 0;
    bottom: 0;
    z-index: 1;
  }
}
.hero-daebak__certs-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  height: min(60vh, 23rem);
}
.hero-daebak__certs-rule {
  flex: 1 1 auto;
  width: 1px;
  background: var(--line-strong);
}
.hero-daebak__certs-text {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: var(--ls-overline);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  color: color-mix(in srgb, var(--ink-mute) 78%, var(--ink) 22%);
  white-space: nowrap;
}

/* ---------- 2. 핵심 수치 카운트업 ---------- */

.stat-band { border-block: 1px solid var(--line); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-7) var(--sp-5);
}
@media (min-width: 48rem) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
}
.stat-counter { text-align: left; }
/* 삼양사식 3단 구조: 영문 카테고리 라벨(작게) → 숫자(크게) → 한글 캡션(작게) */
.stat-counter__eyebrow {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-mute) 78%, var(--ink) 22%);
  margin-bottom: var(--sp-2);
}
.stat-counter__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-size: var(--fs-display);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-counter__suffix {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  /* 접근성: --point 대비 미달(2.95:1) — --point-deep로 재지정 */
  color: var(--point-deep);
}
.stat-counter__rule {
  position: relative;
  display: block;
  width: 100%;
  max-width: 6rem;
  height: 2px;
  margin-block: var(--sp-4) var(--sp-2);
  background: var(--point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-in-out);
}
/* 측정선(눈금) 연출 강화 — 양 끝에 캘리퍼 눈금처럼 짧은 세로 틱을 둬 "숫자가 실측됐다"는
   인상을 준다. 라인과 같은 요소 위 transform이라 scaleX 애니메이션과 함께 자라난다. */
.stat-counter__rule::before,
.stat-counter__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 7px;
  background: var(--point);
  transform: translateY(-50%);
}
.stat-counter__rule::before { left: 0; }
.stat-counter__rule::after { right: 0; }
.stat-counter.is-counted .stat-counter__rule { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .stat-counter__rule { transform: scaleX(1); transition: none; }
}
.stat-counter__label {
  font-size: var(--fs-sm);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  font-weight: var(--fw-medium);
}

/* ---------- 3. 대표 제품 프리뷰 / 제품 카드 공통 보정 ---------- */

/* components.css의 .menu-card__media 마크업 계약은 <span>이라 기본 display:inline이며,
   inline 박스에는 width:100%/padding-bottom(%) 트릭이 적용되지 않아 0×0으로 렌더링된다(Chrome 실측 확인).
   shared/css는 수정 금지이므로, 로드 순서상 나중에 오는 daebak.css에서 display만 보정한다. */
.menu-card__media { display: block; }

/* 스펙: 제품 사진은 4:5 — 공유 .menu-card__media 기본값(1:1)을 대박 전용으로만 보정 */
.menu-card--tall .menu-card__media { padding-bottom: 125%; }

/* 제품 카드 톤 정규화(최우선 보정) — 9개 제품 사진이 각기 다른 스튜디오 배경(화이트 접시,
   밝은 원목, 크림 리넨, 다크 우드 창고 선반 등)에서 촬영되어 그리드가 패치워크처럼 보인다.
   공통 웜베이지(--sub) 틴트를 모든 미디어 위에 얇게 얹어 "같은 조명 아래서 찍힌 한 세트"로
   읽히게 정규화한다. isolation:isolate로 블렌드가 카드 바깥(그림자·보더)에 새지 않게 막는다. */
.menu-card__media {
  isolation: isolate;
  background: var(--sub);
}
.menu-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sub);
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* product_raw(스테인리스 트레이+얼음)는 세트 안에서 유일하게 차갑고 푸른 톤이라
   틴트만으로는 부족 — 웜필터를 소폭 얹어 나머지 사진들과 온도감을 맞춘다 */
img[src*="product_raw"] { filter: sepia(0.12) saturate(1.05); }
/* product_bulk(창고 선반)는 세트 내 최저 채도 — 웜베이지 쪽으로 소폭 보정 */
img[src*="product_bulk"] { filter: brightness(1.05) sepia(0.08); }
.menu-card__spec {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--point-deep);
  font-variant-numeric: tabular-nums;
}
/* QA 권고: product_hot은 세트 내 최저 밝기 — 카드 노출 시 소폭 보정 */
img[src*="product_hot"] { filter: brightness(1.12) saturate(1.04); }

/* ---------- 4. 신뢰 3축 — 에디토리얼 스플릿 (레이아웃 브레이크 포인트) ---------- */

.trust-section { padding-top: var(--sect-pad-sm); }
.trust-split {
  position: relative;
  margin-top: var(--sp-8);
}
.trust-split:first-of-type { margin-top: var(--sp-7); }
.trust-split__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sub-tint);
}
.trust-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* mood_factory 제어반 LCD 영역(좌상단 16~27%,42~52%)을 피해 크롭 포커스를 오른쪽으로 이동 */
.trust-split__media--factory img { object-position: 70% 38%; }
.trust-split__card-wrap { padding-inline: var(--gutter); }
.trust-split__card {
  position: relative;
  z-index: 1;
  max-width: 26rem;
  margin: calc(-1 * var(--sp-7)) auto 0;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--sp-6);
}
.trust-split__card h3 { margin-top: var(--sp-2); }
.trust-split__card p { margin-top: var(--sp-4); }

@media (min-width: 64rem) {
  .trust-split {
    display: flex;
    align-items: center;
    min-height: 30rem;
    margin-top: var(--sp-10);
  }
  .trust-split:first-of-type { margin-top: var(--sp-8); }
  .trust-split--reverse { flex-direction: row-reverse; }
  .trust-split__media {
    flex: 0 0 60%;
    height: clamp(24rem, 36vw, 34rem);
    aspect-ratio: auto;
    align-self: stretch;
  }
  .trust-split__card-wrap {
    flex: 1 1 40%;
    display: flex;
    padding-inline: 0;
    margin-left: calc(-1 * var(--sp-8));
    z-index: 2;
  }
  .trust-split--reverse .trust-split__card-wrap {
    margin-left: 0;
    margin-right: calc(-1 * var(--sp-8));
    justify-content: flex-end;
  }
  .trust-split__card { margin: 0; max-width: 22rem; }
}

.coldchain-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--sub-tint);
}
.coldchain-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../shared/assets/img/daebak/bg_texture.webp");
  background-repeat: repeat;
  background-size: min(22rem, 55vw);
  opacity: 0.5;
}
.coldchain-band__desc { color: var(--ink-soft); }
@media (min-width: 48rem) {
  .coldchain-band {
    grid-template-columns: auto auto 1fr;
    padding-inline: var(--sp-7);
  }
}

/* ---------- 5. 형제 브랜드 연결 섹션 ---------- */

.sibling-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}
.sibling-card__previews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-4), 6vw, var(--sp-7));
  margin-bottom: var(--sp-3);
}
.sibling-card__cutout {
  width: clamp(4rem, 11vw, 6.5rem);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}
.sibling-card__title { max-width: 26rem; }
.sibling-card__desc { max-width: 32rem; color: var(--dark-text-mute); }
.sibling-card .btn { margin-top: var(--sp-3); }

/* ---------- 6. 최종 CTA 밴드 ---------- */

.final-cta__card {
  display: grid;
  gap: var(--sp-6);
  background: var(--point);
  /* 접근성: --on-point(#F4FFF6)이 --point(#33AC45) 위에서 2.87:1로 WCAG AA(4.5:1) 미달 —
     이 카드 안의 텍스트만 --ink(그린 위 5.55:1 통과)로 재지정(배경·레이아웃은 그대로) */
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-cta);
}
.final-cta__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.final-cta__desc { margin-top: var(--sp-4); max-width: 30rem; opacity: 0.92; }
.final-cta__btn {
  justify-self: start;
  background: var(--on-point);
  color: var(--point-deep);
  border-radius: var(--radius-pill);
}
@media (hover: hover) and (pointer: fine) {
  .final-cta__btn:hover { background: var(--paper); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
}
@media (min-width: 64rem) {
  .final-cta__card { grid-template-columns: 1fr auto; align-items: center; padding-inline: var(--sp-8); }
  .final-cta__btn { justify-self: end; }
}

/* ---------- 7. 사이트 푸터 ---------- */

.site-footer { background: var(--dark-bg); color: var(--dark-text-mute); }
.site-footer__inner {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-9) var(--sp-7);
}
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 1.3fr 1fr 1.2fr; gap: var(--sp-6); }
}
.site-footer__logo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--dark-text);
}
.site-footer__tagline { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.site-footer__sibling { margin-top: var(--sp-5); font-size: var(--fs-sm); max-width: 22rem; }
.site-footer__sibling a {
  color: var(--dark-text);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__sibling a:hover { color: var(--point); }
}
.site-footer__col-title {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  color: var(--dark-text);
  margin-bottom: var(--sp-4);
}
.site-footer__nav ul { display: grid; gap: var(--sp-3); }
.site-footer__nav a { font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover { color: var(--dark-text); }
}
.site-footer__biz address {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.site-footer__legal {
  border-top: 1px solid var(--dark-line);
  padding-block: var(--sp-5);
  font-size: var(--fs-xs);
}

/* ---------- 8. 제품 페이지 ---------- */

.products-toolbar { margin-bottom: var(--sp-7); }
/* 까투리 menu-toolbar와 동일 원칙: 캡슐 탭바를 컨테이너 좌우 끝까지 채우고 하단에
   헤어라인을 둬 그리드와의 경계를 분명히 한다(작은 알약이 좌측에만 떠 있는 배치 지양) */
.products-toolbar .tabs {
  width: 100%;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.b2b-banner { position: relative; isolation: isolate; overflow: hidden; color: var(--text); }
.b2b-banner__media { position: absolute; inset: 0; z-index: -1; }
.b2b-banner__media img { width: 100%; height: 100%; object-fit: cover; }
/* 접근성: .container의 margin-inline:auto가 남아 .b2b-banner__content가 실제로는
   배너 가운데(desktop 528~912px 실측)에 놓인다 — 방향성 그라데이션으로는 어느 폭에서도
   확실히 커버되지 않으므로, 사진 전체에 옅은 --paper 오버레이를 얹어 --text(잉크) 대비를
   사진 밝기와 무관하게 항상 보장한다(레이아웃 변경 없음, 사진은 은은하게 비쳐 보임). */
.b2b-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0.78;
}
.b2b-banner__content {
  max-width: 24rem;
  margin-left: auto;
  padding-block: var(--sp-9);
}
.b2b-banner__content p.t-mute { margin-top: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 47.9375rem) {
  .b2b-banner__content { margin-left: 0; max-width: 100%; }
  .b2b-banner__media img { object-position: 78% center; }
}

/* ---------- 9. 회사소개 페이지 ---------- */

.ceo-quote { max-width: 44rem; margin-inline: auto; text-align: center; }
/* 접근성: --point 아이콘 대비 미달(2.95:1 < 3:1) — --point-deep로 재지정 */
.ceo-quote__mark { display: inline-flex; width: 3rem; height: 3rem; color: var(--point-deep); margin-bottom: var(--sp-4); }
.ceo-quote__mark svg { width: 100%; height: 100%; }
.ceo-quote__text {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.ceo-quote__sign {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  font-weight: var(--fw-medium);
}

.trust-detail__grid { display: grid; }
@media (min-width: 64rem) {
  .trust-detail__grid { grid-template-columns: repeat(3, 1fr); }
}
.trust-detail__card { padding: var(--sp-6); }
.trust-detail__card p { margin-top: var(--sp-2); }

/* 인증 현황 — 실제 인증서 이미지 없이(레드라인: 가짜 인증서 이미지 금지) 발급기관·표준번호·
   인증범위·대상 사업장을 갖춘 텍스트 명판으로 대체. 이중 보더로 문서 프레임 느낌만 낸다. */
.cert-grid { margin-top: var(--sp-2); }
.cert-plaque {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}
.cert-plaque::before {
  content: "";
  position: absolute;
  inset: 0.4rem;
  border: 1px solid var(--line);
  pointer-events: none;
}
.cert-plaque__eyebrow {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}
.cert-plaque__name {
  margin-top: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--point-deep);
}
.cert-plaque__meta {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.cert-plaque__meta > div { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); }
.cert-plaque__meta dt {
  flex: 0 0 auto;
  width: 6rem;
  font-weight: var(--fw-medium);
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}
.cert-plaque__meta dd { color: var(--text); }

.ci-bi__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 64rem) {
  .ci-bi__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
}
/* QA #2 후속 미세조정: 전역 clip 가드로 가로 스크롤은 해결됐지만, 모바일 좁은 폭에서는
   base.css의 기본 reveal--left/right(±36px)가 카드 폭 대비 상대적으로 크게 느껴져
   등장 시 화면 밖으로 튀는 인상이 있었다. 이 섹션(CI/BI)에 한해서만 로컬로 거리를 좁힌다
   (shared/css/base.css는 다른 페이지가 공유하므로 수정하지 않음). */
@media (max-width: 47.9375rem) {
  .ci-bi .reveal--left { transform: translateX(-16px); }
  .ci-bi .reveal--right { transform: translateX(16px); }
}
.ci-bi__swatch { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.ci-bi__swatch img { width: 100%; height: auto; display: block; }
.ci-bi__desc { margin-top: var(--sp-4); color: var(--ink-soft); max-width: 32rem; }
.ci-bi__colors { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.ci-bi__chip { display: flex; align-items: center; gap: var(--sp-3); }
.ci-bi__swatch-dot {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ci-bi__chip-meta { display: flex; flex-direction: column; font-size: var(--fs-xs); }
.ci-bi__chip-meta strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.ci-bi__chip-meta span { color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); font-variant-numeric: tabular-nums; }

.history-timeline { margin-top: var(--sp-7); }

/* ---------- 10. 소식 페이지 ---------- */

.board-detail { max-width: 44rem; }
.board-detail [data-board-detail-body] p { color: var(--ink-soft); margin-top: var(--sp-2); }
.board-detail [data-board-detail-title] {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin-top: var(--sp-3);
}
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.board-list__empty { display: none; padding-block: var(--sp-8); text-align: center; color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); }

/* ---------- 11. 사업장안내 페이지 ---------- */

.locations-map {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: var(--sp-7);
  background: var(--sub-tint);
}
.locations-map__placeholder {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-5);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
  background-image: url("../shared/assets/img/daebak/bg_texture.webp");
  background-repeat: repeat;
  background-size: min(20rem, 50vw);
}
/* 접근성: --point 아이콘 대비 미달(2.95:1 < 3:1) — --point-deep로 재지정 */
.locations-map__placeholder svg { width: 2.5rem; height: 2.5rem; color: var(--point-deep); }
.locations-map__placeholder strong { color: var(--text); font-size: var(--fs-md); }
.locations-map__kakao { position: absolute; inset: 0; }

.locations-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.locations-toolbar .tabs { border-bottom: none; }
.locations-search { position: relative; width: 100%; max-width: 20rem; }
.locations-search input { padding-left: 2.5rem; }
.locations-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink-mute);
  pointer-events: none;
}

.locations-list { display: grid; gap: var(--sp-5); }
@media (min-width: 48rem) {
  .locations-list { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
}
.store-card { padding: var(--sp-6); }
.store-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.store-card__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.store-card__list { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }
.store-card__list > div { display: flex; gap: var(--sp-2); }
/* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
.store-card__list dt { font-weight: var(--fw-medium); color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%); flex: 0 0 auto; width: 4.5rem; }
.store-card__list dd { margin: 0; }

[data-store-empty] {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: var(--sp-8);
  /* 접근성: --ink-mute 3.69:1 → 4.5:1 미달 보정 */
  color: color-mix(in srgb, var(--ink-mute) 80%, var(--ink) 20%);
}

/* ---------- 12. 제휴·납품 문의 페이지 ---------- */

.support-card { padding: var(--sp-6); text-align: left; }
.support-card__num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  /* 접근성: --point 텍스트 대비 미달(2.95:1 < 4.5:1) — --point-deep로 재지정 */
  color: var(--point-deep);
  font-variant-numeric: tabular-nums;
}
.support-card h3 { margin-top: var(--sp-2); }
.support-card p { margin-top: var(--sp-3); }

.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.checkbox-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.checkbox-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.checkbox-chip:has(input:checked) {
  /* 접근성: --point 보더 대비 미달(2.95:1 < 3:1) — --point-deep로 재지정.
     텍스트는 --point-deep도 point-tint 배경 위에서 4.35:1로 4.5:1에 근소 미달이라 --ink 사용 */
  border-color: var(--point-deep);
  background: var(--point-tint);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.checkbox-chip:has(input:focus-visible) { outline: 3px solid var(--point-deep); outline-offset: 2px; }

.contact-form-section { scroll-margin-top: calc(var(--header-h) + 1rem); }

.faq-list { max-width: 44rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item__icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  /* 접근성: --point 아이콘 대비 미달(2.95:1 < 3:1) — --point-deep로 재지정 */
  color: var(--point-deep);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { padding-bottom: var(--sp-5); color: var(--ink-soft); max-width: 40rem; }

/* ============================================================
   13. 접근성 보정 — 대박 그린(#33AC45) 대비 재지정
   실측: --point(#33AC45)는 흰/밝은 배경 위에서 텍스트 2.95:1, UI 보더·포커스링 2.95:1로
   WCAG AA(텍스트 4.5:1, UI 컴포넌트 3:1) 미달이다. --on-point(#F4FFF6)도 --point 배경
   위에서 2.87:1로 미달. tokens.css의 6대 고정 브랜드 컬러 값은 변경하지 않고, shared/css
   컴포넌트가 "전경(텍스트·아이콘·보더·포커스링)"으로 --point/--on-point를 쓰는 지점만
   이미 정의된 --point-deep(흰 배경 대비 4.80:1)·--ink(그린 배경 대비 5.55:1)로 이 파일
   (사용처)에서 재지정한다. 배경색·레이아웃은 전부 그대로 유지. shared/css 자체는 수정하지
   않는다(다른 브랜드에 영향 없음).
   ============================================================ */
[data-theme="daebak"] :focus-visible { outline-color: var(--point-deep); }
[data-theme="daebak"] ::selection,
[data-theme="daebak"] .skip-link { color: var(--ink); }
[data-theme="daebak"] .btn--primary,
[data-theme="daebak"] .fixed-cta,
[data-theme="daebak"] .badge--solid {
  color: var(--ink);
}
[data-theme="daebak"] .t-overline,
[data-theme="daebak"] .menu-card__price,
[data-theme="daebak"] .timeline__year,
[data-theme="daebak"] .form-error {
  color: var(--point-deep);
}
/* .badge의 point-tint 배경 위 point-deep 텍스트는 4.35:1로 4.5:1에 근소 미달 — --ink로 재지정 */
[data-theme="daebak"] .badge {
  color: var(--ink);
}
[data-theme="daebak"] .form-field input:focus-visible,
[data-theme="daebak"] .form-field textarea:focus-visible,
[data-theme="daebak"] .form-field select:focus-visible {
  border-color: var(--point-deep);
}
[data-theme="daebak"] .btn--ghost:hover {
  border-color: var(--point-deep);
  color: var(--point-deep);
}
[data-theme="daebak"] .modal__close:hover {
  color: var(--point-deep);
}