@charset "UTF-8";

/* ==================================================
   style3.css — 리뉴얼 공통 컴포넌트 (지속가능경영 계열)
   - 특정 페이지에 종속되지 않는 전역 컴포넌트(biz-*) 모음
   - 1rem = 10px (html font-size 62.5%), 데스크톱 브레이크포인트: 48em
   - 기본값 = 모바일 시안(375px, Figma 7424:8085), MQ = 데스크톱 시안(1920px)
   ================================================== */

/* box-sizing — 이 프로젝트는 전역 border-box 리셋이 없음(content-box 기본).
   biz-* 컴포넌트는 width+padding 조합을 쓰므로 반드시 border-box 로 통일 */
[class^="biz-"],
[class*=" biz-"],
[class^="biz-"] *,
[class*=" biz-"] * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* business 페이지 공통 — .main 기본 하단 여백(style2.css의 margin-bottom 40/50px) 제거.
   풀블리드 밴드(bg-pattern 등)가 푸터에 바로 닿도록 */
.main.business {
  margin-bottom: 0;
  /* 리뉴얼 본문 서체 — Figma: Noto Sans CJK KR Regular(400)/Medium(500) */
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
}

/* 반응형 표시 유틸 — 시안의 모바일/데스크톱 전용 줄바꿈·문구용 */
.pc-only {
  display: none;
}

/* KV 히어로 (모바일: 좌우 15px 안쪽, 400px 크롭)
-------------------------------------------------- */
.biz-cover {
  padding: 1.5rem 1.5rem 0;
}
.biz-kv {
  overflow: hidden;
  height: 40rem;
  border-radius: 3.2rem 0 3.2rem 0;
}
.biz-kv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 헤드카피 (KV 아래 타이틀 + 설명)
-------------------------------------------------- */
.biz-headcopy {
  max-width: 95.2rem;
  margin: 2rem auto 0;
  text-align: center;
  word-break: keep-all;
}
.biz-headcopy .biz-h {
  font-family: "Buri";
  font-weight: normal;
  font-size: 2.6rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #333;
}
.biz-headcopy .biz-p {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #888;
}

/* 섹션 캡션 (위아래 라인 + 아리따부리)
-------------------------------------------------- */
.biz-caption {
  display: table;
  margin: 0 auto;
  padding: 0.4rem 0;
  border-top: 1px solid #f22a2a;
  border-bottom: 1px solid #f22a2a;
  font-family: "Buri";
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.4;
  color: #f22a2a;
  text-align: center;
}
.biz-caption.gray {
  border-color: #79746e;
  color: #79746e;
}
/* 소형 캡션 (윤리경영 선언문/서약서 등) — 모든 브레이크포인트 2.2rem 고정 */
.biz-caption.small {
  font-size: 2.2rem;
}

/* 캡션 아래 리드 타이틀 (아리따부리 센터 — 품질경영 등)
-------------------------------------------------- */
.biz-lead {
  margin: 3.2rem auto;
  font-family: "Buri";
  font-weight: normal;
  font-size: 2.2rem; /* 모바일 22px (48em+ 에서 2.4rem 로 오버라이드) */
  line-height: 1.4;
  color: #333;
  text-align: center;
  word-break: keep-all;
}

/* 섹션 밴드 (풀폭 세로 패딩 블록 · 배경 변형)
-------------------------------------------------- */
.biz-band {
  padding: 8rem 1.5rem;
}
.biz-band.bg-pink {
  background-color: #fcf3f2;
}
.biz-band.bg-pattern {
  background-color: #fcf3f2;
  /* 반투명 분홍을 타일 위에 얹어 패턴이 은은하게 비치도록 (디자인의 blend 근사) */
  background-image:
    linear-gradient(rgba(252, 243, 242, 0.88), rgba(252, 243, 242, 0.88)),
    url(/static/images/business/common/bg_pattern.gif);
  background-repeat: repeat;
  background-position: 0 0;
  background-size:
    auto,
    20rem 20rem;
}

/* 콘텐츠 폭 — 12그리드(.l-content 1920px·거터 16px) 기준 가운데 N칸.
   기본(웹) = 10칸: (5×min(100vw, 1920px) − 16px) / 6, 1920px 기준 1597px
   .span8 = 8칸: (2×min(100vw, 1920px) − 16px) / 3, 1920px 기준 1274px */
.biz-inner {
  max-width: 1274px;
  margin: 0 auto;
}
.biz-inner.span8 {
  max-width: 127.47rem;
}
.biz-band .biz-caption + .biz-inner {
  margin-top: 3.2rem;
}

/* row/col 시스템 (MUI Grid 유사) — 개발 그리드 가이드(Shift+F)와 1:1 정렬.
   - 모바일: 6트랙(가이드 6칸). 자식 기본 풀폭, .col-m-1~6 으로 칸 지정
   - 데스크톱: 10트랙(biz-inner 10칸 기준). .col-1~10 으로 칸 지정
   - 거터 16px = 가이드 거터와 동일
   사용:
   <div class="biz-row">
     <div class="col-5 col-m-3">…</div>
     <div class="col-5 col-m-3">…</div>
   </div> */
.biz-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.6rem;
}
.biz-row > * {
  grid-column: 1 / -1;
  min-width: 0;
}
/* style2.css 레거시 12그리드(.col-* : float+width%)와 클래스명이 겹치므로 biz-row 안에서는 무력화 */
.biz-row > [class*="col-"] {
  float: none;
  width: auto;
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
}
.biz-row > .col-m-1 {
  grid-column: span 1;
}
.biz-row > .col-m-2 {
  grid-column: span 2;
}
.biz-row > .col-m-3 {
  grid-column: span 3;
}
.biz-row > .col-m-4 {
  grid-column: span 4;
}
.biz-row > .col-m-5 {
  grid-column: span 5;
}
.biz-row > .col-m-6 {
  grid-column: 1 / -1;
}

/* 미디어 로우 (이미지 + 텍스트 2단, 모바일은 세로 스택)
-------------------------------------------------- */
.biz-media {
  margin-top: 4.8rem;
  word-break: keep-all;
}
.biz-media:first-child {
  margin-top: 0;
}
.biz-media .media-img {
  overflow: hidden;
  height: 22rem;
  border-radius: 3.2rem 0 3.2rem 0;
}
.biz-media .media-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.biz-media .media-copy {
  margin-top: 1.6rem;
}
.biz-media .media-num {
  display: block;
  font-family: "Buri";
  font-size: 2.8rem;
  line-height: 1.4;
  color: #ccc;
}
.biz-media .media-title {
  font-family: "Buri";
  font-weight: normal;
  font-size: 2.2rem;
  line-height: 1.4;
  color: #333;
}
.biz-media .media-title.large {
  font-size: 2.8rem;
}
.biz-media .media-desc {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #888;
}
.biz-media .media-desc p + p {
  margin-top: 1.6rem;
}

/* 미디어 로우 변형 — 사회공헌 등: 원본비 이미지(고정 크롭 없음) · 카피 세로 중앙
-------------------------------------------------- */
.biz-media.tall .media-img {
  height: auto;
}
.biz-media.tall .media-desc p + p {
  margin-top: 0.4rem;
}
.biz-media.middle {
  align-items: center;
}

/* 미디어 로우 부가 요소 — 부제(아리따부리)·주소/전화/메일 정보줄·빈 이미지 (네트워크)
-------------------------------------------------- */
.biz-media .media-sub {
  display: block;
  margin-top: 0.4rem;
  font-family: "Buri";
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #888;
}
.biz-media .media-info {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.biz-media .media-info li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #888;
  word-break: keep-all;
}
.biz-media .media-info li + li {
  margin-top: 0.4rem;
}
.biz-media .media-info .ico {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
}
.biz-media .media-info p {
  margin: 0;
}
.biz-media .media-copy .biz-btn {
  margin-top: 1.6rem;
}
.biz-media .media-img.empty {
  background-color: #d9d9d9;
}
/* 밴드 안 캡션 그룹 연속 배치 간격 (네트워크: 본사/연구소/공장) */
.biz-band .biz-inner + .biz-caption {
  margin-top: 8rem;
}

/* 사진 스트립 (활동 사진 3장) — 모바일 가로 스크롤, 데스크톱 3열
-------------------------------------------------- */
.biz-photos {
  display: flex;
  gap: 0.8rem;
  /* 밴드 좌우 패딩(1.5rem)을 상쇄해 오른쪽 끝까지 흘리고, 스크롤 시작점은 콘텐츠와 정렬 */
  margin: 2.4rem -1.5rem 0;
  padding: 0 1.5rem;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.biz-photos.col4 {
  gap: 1.6rem;
}
.biz-photos li {
  flex: 0 0 auto;
  width: 22.6rem;
}
.biz-photos img {
  display: block;
  width: 100%;
  height: auto;
}

/* 카드 그리드 (흰 배경 카드, 모바일 1열)
-------------------------------------------------- */
.biz-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.biz-cards .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 3.2rem;
  background-color: #fff;
  text-align: center;
  word-break: keep-all;
}
.biz-cards.round .item {
  border-radius: 2.4rem 0 2.4rem 0;
}
.biz-cards .item-title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: #ed1c24;
}
.biz-cards .item-icon {
  display: block;
  width: 8rem;
  height: 8rem;
  margin-top: 0.4rem;
}
.biz-cards .item-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.biz-cards .item-desc {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  color: #888;
}

/* 데스크톱 (768px~)
-------------------------------------------------- */

/* .l-container 의 반응형 여백(style2.css 1949~1959행)과 동기화 —
   풀블리드 밴드 콘텐츠 폭 = .l-content 폭 유지용. style2 값이 바뀌면 여기도 함께 수정 */

/* .l-content 안쪽의 밴드는 이미 l-container 여백만큼 인셋되어 있으므로
   위의 64em/80em 좌우 패딩을 상쇄 (풀블리드 밴드에만 여백 적용) */

/* 밴드 연속 배치 — l-content 안에서 밴드가 이어질 때 세로 간격 이중 방지
-------------------------------------------------- */
.l-content .biz-band + .biz-band {
  padding-top: 0;
}

/* 다이어그램 (운영 시스템) — 라벨/스테이지/스텝, 모바일 세로 · 데스크톱 가로
-------------------------------------------------- */
.biz-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 142.4rem;
  margin: 3.2rem auto 0;
}
.biz-diagram .diagram-label {
  order: 1;
  margin: 0;
  font-size: 1.8rem; /* 모바일 18px (80em+ 에서 2.2rem 로 오버라이드) */
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  text-align: center;
}
.biz-diagram .diagram-stages {
  order: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: 5.6rem;
}
.biz-diagram .diagram-stages::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(50% - 2rem);
  width: 32.8rem;
  height: 2.4rem;
  background: url(/static/images/business/consumer/line_consumer_flow.svg)
    no-repeat center / 100% 100%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.biz-diagram .stage {
  position: relative;
  z-index: 1;
  width: 20rem;
  padding: 3.2rem 4rem;
  border-radius: 2rem 0 2rem 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}
.biz-diagram .stage.red {
  background-color: #ff414b;
}
.biz-diagram .stage.green {
  background-color: #00bc73;
}
.biz-diagram .stage.dark {
  background-color: #444;
}
.biz-diagram .stage-arrow {
  position: relative;
  z-index: 2;
  width: 3.2rem;
  height: 3.2rem;
  margin: -2.2rem 0;
  background-color: #fff;
  border-radius: 50%;
}
/* 흰 원 안 검은색 플러스(+) 아이콘 (Figma 7691:2115) */
.biz-diagram .stage-arrow::before,
.biz-diagram .stage-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #444;
  transform: translate(-50%, -50%);
}
.biz-diagram .stage-arrow::before {
  width: 1.2rem;
  height: 2px;
}
.biz-diagram .stage-arrow::after {
  width: 2px;
  height: 1.2rem;
}
.biz-diagram .diagram-steps {
  order: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 8rem);
  gap: 0.8rem;
  justify-content: center;
  margin: 10.6rem 0 0;
  padding: 0;
  list-style: none;
}
.biz-diagram .diagram-steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10.6rem;
  width: 26.9rem;
  height: 10.6rem;
  background: url(/static/images/business/consumer/line_consumer_tree_m_top.svg)
    no-repeat center / 100% 100%;
  transform: translateX(-50%);
}
.biz-diagram .diagram-steps::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10.6rem;
  width: 26.9rem;
  height: 10.6rem;
  background: url(/static/images/business/consumer/line_consumer_tree_m_bottom.svg)
    no-repeat center / 100% 100%;
  transform: translateX(-50%);
}
.biz-diagram .diagram-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  background-color: #f7f7f7;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  color: #333;
}
.biz-diagram .diagram-label.end {
  order: 4;
  margin-top: 12.6rem;
}

/* 카드 변형 — 아이콘 위 + 진회색 타이틀 (활동내용류)
-------------------------------------------------- */
.biz-cards.dark .item-icon {
  margin-top: 0;
}
.biz-cards.dark .item-title {
  margin-top: 1.6rem;
  color: #333;
}

/* 인증서 및 관련기관 (biz-certs)
-------------------------------------------------- */
.biz-certs .certs-photos {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  max-width: 33.5rem;
  margin: 0 auto;
}
.biz-certs .certs-photos .item {
  position: relative;
  display: block;
  box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
/* 폭 제한·가운데 정렬은 세로로 쌓이는 레이아웃에서만 필요하다.
   데스크톱(64em~)은 가로 3열(flex:1 1 0)이라 이 값이 남아 있으면
   열이 28rem 에서 멈춰 컨테이너를 다 못 채운다. */
@media (max-width: 63.99em) {
  .biz-certs .certs-photos .item {
    max-width: 28rem;
    margin: 0 auto;
  }
}
.biz-certs .certs-photos img {
  display: block;
  width: 100%;
  height: auto;
}
.biz-certs .certs-photos .zoom,
.biz-docs .doc-img .zoom {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background-color: rgba(34, 34, 34, 0.6);
}
/* 확대 버튼 흰색 플러스(+) 아이콘 (Figma 7691:2237) */
.biz-certs .certs-photos .zoom::before,
.biz-certs .certs-photos .zoom::after,
.biz-docs .doc-img .zoom::before,
.biz-docs .doc-img .zoom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.biz-certs .certs-photos .zoom::before,
.biz-docs .doc-img .zoom::before {
  width: 1.7rem;
  height: 2px;
}
.biz-certs .certs-photos .zoom::after,
.biz-docs .doc-img .zoom::after {
  width: 2px;
  height: 1.7rem;
}

/* 이미지 크게보기 라이트박스 (윤리경영 선언문·서약서, 소비자중심경영 인증서 등)
   — 새 탭 대신 모달로 큰 이미지. business.js 가 동적 생성 */
html.biz-lightbox-open {
  overflow: hidden;
}
.biz-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}
.biz-lightbox.is-open {
  display: flex;
}
.biz-lightbox-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
}
.biz-lightbox-inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
}
.biz-lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
}
.biz-lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 2;
  width: 4.4rem;
  height: 4.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.biz-lightbox-close::before,
.biz-lightbox-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2px;
  background: #fff;
}
.biz-lightbox-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.biz-lightbox-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 문서 2단 (윤리경영 선언문/실천서약서) — 모바일 세로 스택
-------------------------------------------------- */
.biz-docs {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.biz-docs .doc {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.biz-docs .doc .biz-caption {
  margin-bottom: 0.8rem;
}
.biz-docs .doc-img {
  position: relative;
  display: block;
  box-shadow: 0.42rem 0.42rem 0.84rem rgba(0, 0, 0, 0.2);
  max-width: 48rem;
  margin: 0 auto;
}
@media (max-width: 63.99em) {
  .biz-docs .doc-img {
    max-width: 28rem;
    margin: 1.2rem auto 0 auto;
  }
}
.biz-docs .doc-img img {
  display: block;
  width: 100%;
  height: auto;
}
.biz-certs .certs-badges {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 4rem;
}
.biz-certs .certs-badges .item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 440 / 160;
  background-color: #f7f7f7;
}
.biz-certs .certs-badges .item-img img {
  width: 52%;
  height: auto;
}
.biz-certs .certs-badges .item-label {
  margin: 0.8rem 0 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  text-align: center;
}

/* ==================================================
   반응형 (사이트 공통 브레이크포인트 준용)
   - 48em(768px)~ : 태블릿 — 그리드 정렬 시작, 카드 다열, 미디어/인증서/다이어그램은 세로 유지
   - 64em(1024px)~ : 소형 데스크톱 — 가로 레이아웃 전환(축소 타입)
   - 80em(1280px)~ : 데스크톱 — 1920 시안 원 스펙
   ================================================== */

/* ── 48em (768px~) : 태블릿 ── */
@media (min-width: 48em) {
  .m-only {
    display: none;
  }
  .pc-only {
    display: inline;
  }
  .biz-cover {
    padding: 0;
  }
  .biz-kv {
    height: auto;
    border-radius: 6rem 0 6rem 0;
  }
  .biz-kv img {
    height: auto;
  }
  .biz-headcopy {
    margin-top: 3.2rem;
    padding: 0 2rem;
  }
  .biz-headcopy .biz-h {
    font-size: 3.4rem;
  }
  .biz-headcopy .biz-p {
    margin-top: 0.8rem;
    font-size: 1.6rem;
  }
  .biz-caption {
    font-size: 2.4rem;
  }
  .biz-lead {
    font-size: 2.4rem;
  }
  .biz-band {
    /* 좌우 여백은 아래 64em/80em 에서 .l-container(style2.css 1949행)와 동기화 */
    padding: 8rem 0;
  }
  .l-content .biz-band {
    padding-left: 0;
    padding-right: 0;
  }
  .l-content .biz-band + .biz-band {
    padding-top: 0;
  }
  .biz-inner {
    max-width: 1274px;
  }
  .biz-inner.span8 {
    max-width: 1274px;
  }
  .biz-band .biz-caption + .biz-inner {
    margin-top: 4rem;
  }
  .biz-row {
    grid-template-columns: repeat(10, 1fr);
  }
  .biz-row > .col-1 {
    grid-column: span 1;
  }
  .biz-row > .col-2 {
    grid-column: span 2;
  }
  .biz-row > .col-3 {
    grid-column: span 3;
  }
  .biz-row > .col-4 {
    grid-column: span 4;
  }
  .biz-row > .col-5 {
    grid-column: span 5;
  }
  .biz-row > .col-6 {
    grid-column: span 6;
  }
  .biz-row > .col-7 {
    grid-column: span 7;
  }
  .biz-row > .col-8 {
    grid-column: span 8;
  }
  .biz-row > .col-9 {
    grid-column: span 9;
  }
  .biz-row > .col-10 {
    grid-column: 1 / -1;
  }
  /* 미디어 로우: 태블릿에서는 세로 스택 유지, 이미지 크롭만 키움 */
  .biz-media .media-img {
    height: 32rem;
  }
  .biz-media .media-num {
    font-size: 3.2rem;
  }
  .biz-media .media-title {
    font-size: 2.4rem;
  }
  .biz-media .media-title.large {
    font-size: 3.2rem;
  }
  .biz-media .media-desc {
    font-size: 1.6rem;
  }
  .biz-media.tall .media-img {
    height: auto;
  }
  .biz-media.tall .media-desc p + p {
    margin-top: 1.6rem;
  }
  .biz-media .media-sub {
    font-size: 1.8rem;
  }
  .biz-media .media-info li {
    font-size: 1.6rem;
  }
  /* 사진 스트립: 스크롤 해제, 3등분 */
  .biz-photos {
    gap: 1.6rem;
    margin: 4rem 0 0;
    padding: 0;
    overflow-x: visible;
  }
  .biz-photos li {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  /* 문서 2단: 가로 전환 */
  .biz-docs {
    flex-direction: row;
    gap: 1.6rem;
  }
  .biz-docs .doc .biz-caption {
    margin-bottom: 1.6rem;
  }
  /* 카드: 다열 시작 (col5 는 3열로) */
  .biz-cards {
    gap: 1.6rem;
  }
  .biz-cards.col3,
  .biz-cards.col5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .biz-cards.round .item {
    border-radius: 4rem 0 4rem 0;
  }
  .biz-cards .item {
    padding: 4.8rem 2.4rem;
  }
  .biz-cards .item-title {
    font-size: 2rem;
  }
  .biz-cards.dark .item-title {
    margin-top: 2.4rem;
    font-size: 2rem;
  }
  .biz-cards .item-icon {
    margin-top: 0.8rem;
  }
  .biz-cards.dark .item-icon {
    margin-top: 0;
  }
  .biz-cards .item-desc {
    margin-top: 0.8rem;
    font-size: 1.5rem;
  }
}

/* ── 64em (1024px~) : 소형 데스크톱 — 가로 전환 ── */
@media (min-width: 64em) {
  .biz-headcopy .biz-h {
    font-size: 4rem;
  }
  .biz-headcopy .biz-p {
    font-size: 1.8rem;
  }
  .biz-band {
    padding: 10rem 0;
  }
  /* 풀블리드 밴드 좌우 여백 = .l-container margin(64em: 40px)과 동기화 */
  .biz-band {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .l-content .biz-band {
    padding-left: 0;
    padding-right: 0;
  }
  /* 미디어 로우: 가로 전환 (축소 타입) */
  .biz-media {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    margin-top: 4rem;
  }
  .biz-media .media-img {
    flex-shrink: 0;
    width: 49.4%;
    height: auto;
    border-radius: 6rem 0 6rem 0;
  }
  .biz-media .media-img img {
    height: auto;
  }
  .biz-media .media-copy {
    flex: 1;
    margin-top: 0;
  }
  .biz-media .media-desc {
    margin-top: 1.6rem;
    font-size: 1.7rem;
  }
  .biz-media .media-info {
    margin-top: 1.6rem;
  }
  .biz-media .media-info .ico {
    width: 2.4rem;
    height: 2.4rem;
  }
  .biz-media .media-img.empty {
    aspect-ratio: 629 / 400;
    height: auto;
  }
  /* 카드: col5 5열 복귀 */
  .biz-cards.col5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .biz-cards.col5 .item {
    padding: 5.6rem 2.4rem;
  }
  /* 다이어그램: 가로 전환 (축소) */
  .biz-diagram {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 6rem;
  }
  .biz-diagram .diagram-label {
    width: 16rem;
    font-size: 1.8rem;
  }
  .biz-diagram .diagram-stages {
    flex-direction: row;
    margin-top: 0;
  }
  .biz-diagram .diagram-stages::before {
    left: -8rem;
    right: -8rem;
    top: 50%;
    width: auto;
    height: 2.4rem;
    transform: translateY(-50%);
  }
  .biz-diagram .stage {
    width: 16rem;
    padding: 4.4rem 2rem;
    border-radius: 4rem 0 4rem 0;
    font-size: 2.4rem;
  }
  .biz-diagram .stage-arrow {
    margin: 0 -2.2rem;
  }
  .biz-diagram .diagram-label.end {
    order: 3;
    margin-top: 0;
  }
  .biz-diagram .diagram-steps {
    order: 4;
    width: 100%;
    max-width: 107.2rem;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1.6rem;
    margin: 12.9rem auto 0;
  }
  .biz-diagram .diagram-steps::before {
    left: 50%;
    right: auto;
    top: -12.9rem;
    width: 88.9%;
    height: 12.9rem;
    background: url(/static/images/business/consumer/line_consumer_tree.svg)
      no-repeat center / 100% 100%;
    transform: translateX(-50%);
  }
  .biz-diagram .diagram-steps::after {
    display: none;
  }
  .biz-diagram .diagram-steps li {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: 1.8rem;
  }
  /* 인증서: 가로 전환 (비율 기반) */
  .biz-certs {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
  .biz-certs .certs-photos {
    flex-direction: row;
    gap: 1.9%;
    width: 54.5%;
    max-width: none;
    margin: 0;
  }
  .biz-certs .certs-photos .item {
    flex: 1 1 0;
    min-width: 0;
    align-self: flex-start;
  }
  .biz-certs .certs-badges {
    justify-content: center;
    gap: 3.2rem;
    width: 34.5%;
    margin-top: 0;
  }
  .biz-certs .certs-badges .item-img {
    width: 100%;
    aspect-ratio: 440 / 160;
  }
  .biz-certs .certs-badges .item-label {
    margin-top: 1.6rem;
    font-size: 1.8rem;
  }
}

/* ── 80em (1280px~) : 데스크톱 원 스펙 ── */
@media (min-width: 80em) {
  .biz-headcopy .biz-h {
    font-size: 4rem;
  }
  .biz-headcopy .biz-p {
    font-size: 1.6rem;
  }
  .biz-caption {
    font-size: 2.8rem;
  }
  .biz-lead {
    margin-top: 4rem;
    font-size: 3.2rem;
  }
  .biz-band {
    padding: 12rem 5rem;
  }
  .l-content .biz-band {
    padding-left: 0;
    padding-right: 0;
  }
  .biz-media {
    gap: 6rem;
  }
  .biz-media .media-num {
    font-size: 4rem;
  }
  .biz-media .media-title {
    font-size: 2.8rem;
  }
  .biz-media .media-sub {
    font-size: 2rem;
  }
  .biz-media .media-info {
    margin-top: 2rem;
  }
  .biz-media .media-info li {
    font-size: 2rem;
  }
  .biz-media .media-copy .biz-btn {
    margin-top: 2rem;
  }
  .biz-band .biz-inner + .biz-caption {
    margin-top: 12rem;
  }
  .biz-media .media-title.large {
    font-size: 4rem;
  }
  .biz-media .media-desc {
    margin-top: 2rem;
    font-size: 2rem;
  }
  .biz-cards .item {
    padding: 8rem 4rem;
  }
  .biz-cards.col5 .item {
    padding: 6.4rem 4rem;
  }
  .biz-cards .item-title {
    font-size: 2.4rem;
  }
  .biz-cards.dark .item-title {
    margin-top: 3.2rem;
    font-size: 2.2rem;
  }
  .biz-cards .item-icon {
    width: 10rem;
    height: 10rem;
  }
  .biz-diagram .diagram-label {
    width: 22rem;
    font-size: 2.2rem;
  }
  .biz-diagram .diagram-stages::before {
    left: -15rem;
    right: -15rem;
  }
  .biz-diagram .stage {
    width: 20rem;
    padding: 6rem 4rem;
    font-size: 2.8rem;
  }
  .biz-diagram .diagram-steps li {
    font-size: 2rem;
  }
  .biz-certs .certs-badges .item-label {
    font-size: 2.1rem;
  }
}

/* ==================================================
   동반성장 (/business/partnership) — 탭·통계카드·테이블·규정 컴포넌트
   (다른 리뉴얼 페이지에서도 재사용 가능한 전역 biz-* 컴포넌트)
   ================================================== */

/* 탭 바 — 풀폭 하단 라인, 모바일 가로 스크롤 · 데스크톱 콘텐츠 폭 3등분 */
.biz-tabs {
  margin-top: 8rem;
  border-bottom: 1px solid #eee;
}
.biz-tabs .tabs-list {
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0 1.6rem;
  list-style: none;
  overflow-x: auto;
  /* is-active 밑줄이 1px 넘치며 생기던 세로 스크롤 차단 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.biz-tabs .tabs-list li {
  flex: 0 0 auto;
}
.biz-tabs .tab-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.6rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  color: #aaa;
  white-space: nowrap;
  cursor: pointer;
}
.biz-tabs .tab-btn.is-active {
  color: #333;
}
.biz-tabs .tab-btn.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #333;
}
.biz-tabpanel[hidden] {
  display: none;
}
/* 네트워크 모바일(시안 7508-19415): 탭 2개를 반반(50%)으로 가운데 정렬 */
@media (max-width: 47.99em) {
  .network .biz-tabs .tabs-list {
    gap: 0.8rem;
    overflow-x: visible;
  }
  .network .biz-tabs .tabs-list li {
    flex: 1 1 0;
    min-width: 0;
  }
  .network .biz-tabs .tab-btn {
    text-align: center;
  }
}

/* 탭 아래 첫 밴드 — 탭과의 간격(디자인 80/48px)을 기본 밴드 패딩 대신 적용 */
.biz-band.tight-top {
  padding-top: 4.8rem;
}

/* 캡션 아래 설명문 */
.biz-caption-desc {
  margin: 1.2rem 0 0;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #888;
  text-align: center;
  word-break: keep-all;
}
.biz-band .biz-caption-desc + .biz-inner {
  margin-top: 3.2rem;
}

/* 통계 카드 변형 — 흰 바탕 + 브라운 보더 + 수치(아리따부리) */
.biz-cards.stats {
  gap: 0.8rem;
}
.biz-cards.stats .item {
  border: 1px solid #d6cccc;
  border-radius: 2rem 0 2rem 0;
  padding: 4rem 3.2rem;
}
.biz-cards.stats .item-head {
  width: 100%;
  text-align: center;
  word-break: keep-all;
}
.biz-cards.stats .item-title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: #333;
}
.biz-cards.stats .item-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #aaa;
}
.biz-cards.stats .item-icon {
  width: 8rem;
  height: 8rem;
  margin-top: 1.2rem;
}
.biz-cards.stats .item-num {
  display: block;
  margin-top: 1.2rem;
  font-family: "Buri";
  font-weight: normal;
  font-size: 2.6rem;
  color: #333;
}
.biz-cards.stats .item-note {
  margin-top: 0.2rem;
  font-size: 1.3rem;
  color: #888;
}

/* 표 블록 (타이틀 + 설명 + 테이블) */
.biz-figure {
  width: 100%;
  word-break: keep-all;
}
.biz-figure + .biz-figure {
  margin-top: 4rem;
}
/* 모바일: 사진(.biz-photos) 다음 오는 피규어 상단 40px 간격 (≥48em 은 8rem) */
.biz-photos + .biz-figure {
  margin-top: 4rem;
}
.biz-figure .figure-title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: #333;
}
.biz-figure .figure-desc {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #888;
}
.biz-figure .biz-btn {
  margin-top: 1.6rem;
}

/* 테이블 — 헤더 흰 배경 + 레드 언더라인, 셀 세로 구분선 */
.biz-table {
  width: 100%;
  margin-top: 1.6rem;
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.8);
}
.biz-table th,
.biz-table td {
  padding: 1.2rem 0.8rem;
  border-right: 1px solid #ccc;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
}
.biz-table th:last-child,
.biz-table td:last-child {
  border-right: 0;
}
.biz-table thead th {
  background-color: #fff;
  border-bottom: 2px solid #ed1c24;
  font-weight: 500;
  color: #333;
}
.biz-table tbody td {
  border-bottom: 1px solid #ccc;
  color: #666;
}
.biz-table tbody tr:last-child td {
  border-bottom: 0;
}
.biz-table .col-label {
  width: 12rem;
}
.biz-table.cols3 .col-label {
  width: 8rem;
}
.biz-table td.cell-value {
  text-align: left;
}

/* ── 지배구조 (governance) — 라인형 테이블·붉은 세리프 캡션 ── */
.biz-caption-red {
  margin: 0 0 3.2rem;
  text-align: center;
}
.biz-caption-red span {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-top: 1px solid #f22a2a;
  border-bottom: 1px solid #f22a2a;
  font-family: "Buri";
  font-size: 2rem;
  line-height: 1.4;
  color: #f22a2a;
}
.biz-table-title {
  margin: 0 0 1.6rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: #333;
}
.gov-section + .gov-section {
  margin-top: 4.8rem;
}
/* 모바일: 테이블 가로 스크롤 — 기본은 화면 폭에 맞춤(2열 요약 테이블 등),
   컬럼 많은 테이블만 시안 스펙 폭으로 고정해 가로 스크롤 */
.biz-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.biz-table-scroll .biz-table {
  min-width: 0;
  margin-top: 0;
}
.biz-table-scroll .gov-board,
.biz-table-scroll .gov-agenda {
  min-width: 88rem;
}
/* 배당 테이블 — 모바일 시안: 총 680px (구분 180 + 기수 5×100) */
.biz-table-scroll .gov-dividend {
  min-width: 68rem;
  table-layout: fixed;
}
.gov-dividend .col-cat {
  width: 18rem;
}
/* KV 모바일 전용 크롭 스왑 — 데스크톱 복원 MQ 를 반드시 기본 규칙 뒤에 둘 것 */
.biz-kv .kv-pc {
  display: none;
}
.biz-kv .kv-mo {
  display: block;
}
@media (min-width: 48em) {
  .biz-kv .kv-pc {
    display: block;
  }
  .biz-kv .kv-mo {
    display: none;
  }
}
/* 라인형 테이블 — 시안: 상하 #333 1px 라인, 헤더/라벨 #f7f7f7 */
.biz-table.line {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background-color: rgba(255, 255, 255, 0.6);
}
.biz-table.line th,
.biz-table.line td {
  padding: 1.2rem 1.6rem;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
}
.biz-table.line th:last-child,
.biz-table.line td:last-child {
  border-right: 0;
}
.biz-table.line thead th {
  background-color: #f7f7f7;
  border-bottom: 1px solid #ccc;
  font-weight: 500;
  color: #666;
}
.biz-table.line tbody th {
  background-color: #f7f7f7;
  font-weight: 500;
  color: #666;
}
.biz-table.line tbody td {
  color: #666;
}
.biz-table.line tbody tr:last-child th,
.biz-table.line tbody tr:last-child td {
  border-bottom: 0;
}
.biz-table.line .cell-left {
  text-align: left;
}

/* 텍스트 버튼 (딥레드 + 화살표) */
.biz-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 2rem;
  border: 0;
  border-radius: 3px;
  background-color: #b61c21;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.biz-btn .arrow {
  position: relative;
  width: 2rem;
  height: 2rem;
}
.biz-btn .arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-70%, -50%) rotate(45deg);
}
/* 배당조회 바로가기 버튼 — 위 표와 간격 (거버넌스 배당 탭 한정).
   모바일: 다른 biz-btn 버튼들과 동일 간격(2.4rem), 웹(≥48em): 40px */
.biz-tabpanel[data-tab-panel="dividend"] .biz-btn {
  margin-top: 2.4rem;
}
@media (min-width: 48em) {
  .biz-tabpanel[data-tab-panel="dividend"] .biz-btn {
    margin-top: 4rem;
  }
}

/* 규정 본문 (장/조 문서) */
.biz-rules {
  margin-top: 3rem;
  word-break: keep-all;
}
.biz-rules .rule-chapter + .rule-chapter {
  margin-top: 3.2rem;
}
.biz-rules .chapter-title {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #ccc;
  font-family: "Buri";
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #444;
}
.biz-rules .rule-article {
  margin-top: 1.6rem;
}
.biz-rules .article-title {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #444;
}
.biz-rules .article-body {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #444;
}
.biz-rules .article-body p {
  margin: 0;
}
.biz-rules .article-body p.indent {
  padding-left: 2rem;
}

/* ── 48em (768px~) ── */
@media (min-width: 48em) {
  .biz-tabs .tabs-list {
    width: calc(66.6667% - 5.3333px);
    margin: 0 auto;
    padding: 0;
    gap: 0.8rem;
    overflow-x: visible;
  }
  .biz-tabs .tabs-list li {
    flex: 1 1 0;
    min-width: 0;
  }
  .biz-tabs .tab-btn {
    font-size: 1.8rem;
  }
  .biz-band.tight-top {
    padding-top: 8rem;
  }
  .biz-caption-desc {
    margin-top: 1.6rem;
    font-size: 1.6rem;
  }
  .biz-band .biz-caption-desc + .biz-inner {
    margin-top: 4rem;
  }
  .biz-cards.stats {
    gap: 1.6rem;
  }
}

/* ── 64em (1024px~) ── */
@media (min-width: 64em) {
  .biz-tabs .tab-btn {
    font-size: 2rem;
  }
  .biz-cards.stats .item {
    border-radius: 4rem 0 4rem 0;
    padding: 6rem 4rem;
  }
  .biz-cards.stats .item-head {
    min-height: 6.6rem;
  }
  .biz-cards.stats .item-title {
    font-size: 2.4rem;
  }
  .biz-cards.stats .item-sub {
    margin-top: 0.4rem;
    font-size: 2rem;
  }
  .biz-cards.stats .item-icon {
    width: 10rem;
    height: 10rem;
    margin-top: 2rem;
  }
  .biz-cards.stats .item-num {
    margin-top: 2rem;
    font-size: 3.2rem;
  }
  .biz-cards.stats .item-note {
    font-size: 1.5rem;
  }
  .biz-figure + .biz-figure {
    margin-top: 8rem;
  }
  .biz-photos + .biz-figure {
    margin-top: 8rem;
  }
  .biz-figure .figure-title {
    font-size: 2.4rem;
  }
  .biz-figure .figure-desc {
    font-size: 1.6rem;
  }
  .biz-figure .biz-btn {
    margin-top: 2.4rem;
  }
  .biz-table {
    margin-top: 2.4rem;
  }
  .biz-table th,
  .biz-table td {
    padding: 1.2rem 2rem;
    font-size: 1.6rem;
  }
  .biz-table thead th {
    border-bottom-width: 3px;
    font-size: 1.5rem;
  }
  .biz-table .col-label,
  .biz-table.cols3 .col-label {
    width: 24.1%;
  }
  .biz-rules {
    margin-top: 6rem;
  }
  .biz-rules .rule-chapter + .rule-chapter {
    margin-top: 6rem;
  }
  .biz-rules .chapter-title {
    padding-bottom: 1.5rem;
    font-size: 2.4rem;
  }
  .biz-rules .rule-article {
    margin-top: 3rem;
  }
  .biz-rules .article-title {
    font-size: 1.8rem;
  }
  .biz-rules .article-body {
    margin-top: 1.5rem;
    font-size: 1.5rem;
  }
}

/* ── 80em (1280px~) ── */
@media (min-width: 80em) {
  .biz-tabs {
    margin-top: 12rem;
  }
}

/* ==================================================
   대리점 이의신청/분쟁조정 신청 폼 (/business/partnership/dispute)
   회색 배경 + 흰 카드 + MUI 톤 입력 필드
   ================================================== */
.main.dispute {
  background-color: #f5f5f5;
  /* 폼카드(.biz-formcard)의 하단 margin(120px)이 main 밖으로 빠져나가 흰색으로 보이던 것 →
     flow-root 로 margin 을 main 안에 가둬 배경색(#f5f5f5) 영역으로 흡수 */
  display: flow-root;
}
.biz-formcard {
  max-width: 90rem;
  margin: 8rem auto !important;
  padding: 4rem 1.5rem 0;
  background-color: #fff;
}
/* 모바일(시안 7691-3622): 흰 배경 풀폭 폼 — 회색 배경 숨김, 상·하 40px / 좌우 15px.
   기본 카드의 상하 8rem 회색 margin 제거 */
@media (max-width: 47.99em) {
  .main.dispute {
    background-color: #fff;
  }
  .biz-formcard {
    margin: 0 !important;
    padding: 4rem 1.5rem 4rem;
  }
}
.biz-formcard .form-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #333;
  text-align: center;
}
.biz-formcard .form-desc {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #888;
  text-align: center;
  word-break: keep-all;
}
/* 카드 안 탭 — biz-tabs 기본형(풀폭 스크롤/콘텐츠폭 3등분)을 카드 폭 2등분으로 오버라이드 */
.biz-formcard .biz-tabs {
  margin-top: 4rem;
}
.biz-formcard .biz-tabs .tabs-list {
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow-x: visible;
}
.biz-formcard .biz-tabs .tabs-list li {
  flex: 1 1 0;
  min-width: 0;
}
.biz-form {
  margin-top: 4rem;
}
/* 문의유형 셀렉터 (사업·제휴문의) — 탠 보더 박스 + 셀렉트 */
.biz-form .form-type {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 4rem;
  padding: 1.2rem 1.6rem;
  border: 4px solid rgba(179, 154, 120, 0.8);
}
.biz-form .form-type .type-label {
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  color: #b39a78;
}
.biz-form .form-type select {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.4rem 3rem 0.4rem 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
  white-space: normal;
  box-shadow: none;
}
.biz-form .form-type::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.biz-form .form-field + .form-field {
  margin-top: 2rem;
}
/* 세부질문 래퍼(#inq-sub-top 제목 위 / #inq-sub 내용 아래) 때문에 인접형제 선택자가
   경계를 못 넘음 → 제목(상단 세부질문 아래)·첫 세부질문(문의내용 아래)에 상단 여백 보정 */
.biz-form #inq-sub-top + .form-field,
.biz-form #inq-sub .form-field:first-child {
  margin-top: 2rem;
}
.biz-form .form-label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #444;
}
.biz-form .form-label.required::after {
  content: "*";
  margin-left: 0.4rem;
  color: #f22a2a;
}
.biz-form .form-input,
.biz-form .form-textarea {
  display: block;
  width: 100%;
  padding: 1.5rem 1.4rem;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #333;
}
.biz-form .form-input::placeholder,
.biz-form .form-textarea::placeholder {
  color: #999;
}
.biz-form .form-textarea {
  height: 15rem;
  resize: vertical;
}
.biz-form .form-upload {
  display: flex;
  gap: 0.8rem;
}
.biz-form .form-upload .form-input {
  flex: 1 1 0;
  min-width: 0;
}
.biz-form .form-upload .upload-btn {
  flex-shrink: 0;
  height: 5.4rem;
  padding: 0 1.4rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #444;
  cursor: pointer;
}
.biz-form .form-files {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.4rem;
  color: #444;
}
.biz-form .form-files li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0;
}
.biz-form .form-files .del {
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.biz-form .form-note {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #999;
  word-break: keep-all;
}
.biz-form .form-divider {
  margin: 4rem 0;
  border: 0;
  border-top: 1px solid #444;
}
.biz-form .form-guide {
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #444;
  word-break: keep-all;
}
.biz-form .form-guide .guide-item {
  margin-top: 2rem;
}
.biz-form .form-guide .guide-title {
  font-size: 1.6rem;
  font-weight: 500;
}
.biz-form .form-guide ul {
  margin: 0.8rem 0 0;
  padding-left: 2.1rem;
  list-style: disc;
}
.biz-form .form-guide p {
  margin: 0.8rem 0 0;
}
.biz-form .form-consent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(5, 25, 95, 0.1);
}
.biz-form .form-consent .consent-check {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #444;
  cursor: pointer;
}
.biz-form .form-consent input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  margin: 0;
  accent-color: #b61c21;
}
.biz-form .form-consent .consent-toggle {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.biz-form .form-consent .consent-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  transform: translate(-50%, -70%) rotate(45deg);
}
.biz-form .form-consent .consent-toggle.open::after {
  transform: translate(-50%, -30%) rotate(-135deg);
}
.biz-form .consent-body {
  display: none;
  padding: 1.6rem 0.4rem;
  border-bottom: 1px solid rgba(5, 25, 95, 0.1);
  font-size: 1.4rem;
  line-height: 1.5;
  color: #666;
  word-break: keep-all;
}
.biz-form .consent-body.open {
  display: block;
}
.biz-form .form-actions {
  margin-top: 4rem;
  text-align: center;
}
.biz-form .form-submit {
  width: 16rem;
  padding: 1.6rem 1rem;
  border: 0;
  border-radius: 4px;
  background-color: #79746e;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #fff;
  cursor: pointer;
}

/* ── 사업·제휴문의: 1단계 문의유형 선택 카드 (Figma 8422:14988) ── */
.inq-cards {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/* display:flex 가 hidden 속성(UA display:none)을 이기지 않도록 — 카드/폼 전환용 */
.inq-cards[hidden],
.biz-form[hidden] {
  display: none;
}
.inq-card {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding: 2.4rem 2rem;
  border: 4px solid #b39a78; /* Figma: Sub/Tan/500, opacity 0.8 */
  background-color: #fff;
  text-align: left;
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s;
}
.inq-card:hover {
  opacity: 1;
}
/* 기타 문의: 탠 대신 연회색 테두리 (Figma Neutral Gray/300 #CCC) */
.inq-card--gray {
  border-color: #ccc;
}
.inq-card-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.inq-card::after {
  content: "";
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.4rem;
  border-right: 1.6px solid #333;
  border-bottom: 1.6px solid #333;
  transform: rotate(-45deg);
}
.inq-card-tit {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #333;
}
.inq-card-sub {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #333;
  word-break: keep-all;
}
.inq-help {
  margin-top: 3.2rem;
  text-align: center;
}
.inq-help-txt {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #888;
  word-break: keep-all;
}
.inq-cs {
  display: inline-flex;
  align-items: center;
  gap: 1.3rem;
  margin-top: 1.6rem;
  padding: 0.7rem 2rem;
  border-radius: 4px;
  background-color: #b61c21;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.inq-cs::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
/* 폼: 문의유형 드롭다운(제목+부제) · 선택항목 라벨 · 세부질문 드롭다운 */
.biz-form .form-type .type-pick {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.biz-form .form-type .type-pick select {
  flex: 0 0 auto;
  width: 100%;
}
.biz-form .form-type .type-sub {
  margin-top: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #999;
}
.biz-form .form-label .opt {
  margin-right: 0.4rem;
  font-weight: 400;
  color: #333; /* 선택 표기: 필드명 앞에 검은색 */
}
/* 커스텀 드롭다운 (세부질문) — Figma 8422:15898. 네이티브 select 대신 스타일 패널 */
.biz-form .form-dd {
  position: relative;
}
.biz-form .form-dd-trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.5rem 4rem 1.5rem 1.4rem;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #333;
  text-align: left;
  cursor: pointer;
}
.biz-form .form-dd-trigger::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}
.biz-form .form-dd.dd-open .form-dd-trigger::after {
  transform: translateY(-30%) rotate(-135deg);
}
.biz-form .form-dd-text {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.biz-form .form-dd-text.is-ph {
  color: #999;
}
.biz-form .form-dd-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.8rem);
  z-index: 20;
  margin: 0;
  padding: 1.4rem;
  list-style: none;
  background-color: #fff;
  border-radius: 4px;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.1);
}
.biz-form .form-dd-menu[hidden] {
  display: none;
}
.biz-form .form-dd-opt {
  padding: 1.6rem 0;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #999;
  cursor: pointer;
}
.biz-form .form-dd-opt:hover {
  color: #333;
}
/* 문의유형(대분류) 드롭다운 — 탠 박스 트리거 + 부제, 메뉴는 공용 패널로 통일 (Figma 8422) */
.biz-form .form-dd--type {
  margin-bottom: 4rem;
}
.biz-form .form-dd--type .form-dd-trigger {
  gap: 1.6rem;
  padding: 1.2rem 4rem 1.2rem 1.6rem;
  border: 4px solid rgba(179, 154, 120, 0.8);
  border-radius: 0;
  background: none;
}
.biz-form .form-dd--type .type-label {
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #b39a78;
}
.biz-form .form-dd--type .type-pick {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.biz-form .form-dd--type .type-val {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333;
}
.biz-form .form-dd--type .type-sub {
  margin-top: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #999;
}
@media (min-width: 64em) {
  .biz-form .form-dd--type .form-dd-trigger {
    gap: 3rem;
    padding: 1.7rem 4rem 1.7rem 2rem;
  }
  .biz-form .form-dd--type .type-val {
    font-size: 1.8rem;
  }
}

@media (min-width: 48em) {
  .biz-formcard {
    margin: 8rem auto 12rem;
    padding: 6rem 8rem;
  }
  .biz-formcard .biz-tabs .tab-btn {
    font-size: 1.8rem;
  }
}

@media (min-width: 64em) {
  .biz-formcard {
    padding: 6rem 20rem;
  }
  .biz-formcard .form-title {
    font-size: 3.6rem;
  }
  .biz-formcard .form-desc {
    margin-top: 2rem;
    font-size: 1.6rem;
  }
  .biz-formcard .form-desc + .form-desc {
    margin-top: 0.8rem;
  }
  .biz-formcard .biz-tabs .tab-btn {
    font-size: 2rem;
  }
  .biz-form .form-type {
    gap: 3rem;
    padding: 1.7rem 2rem;
  }
  .biz-form .form-type select {
    font-size: 1.8rem;
    box-shadow: none;
  }
}

/* ==================================================
   샘표영상 (/news/video) — 필터·브랜드 탭·카드 그리드
   ================================================== */
/* 페이지 배경 — 사업·제휴문의(.main.dispute)와 동일한 톤.
   .main 기본 하단 margin(40~50px)은 배경 밖(흰색)이라 푸터 사이가 하얗게 뜸 →
   margin 제거하고 배경색 영역 안(videos-wrap 하단 패딩)에서 여백 확보 */
.main.videos {
  background-color: #f5f5f5;
  margin-bottom: 0;
}
.videos-wrap {
  padding: 4.8rem 1.5rem 8rem;
  /* 시안: 본문 전체 노토산스 CJK KR. 하위 요소(카운트·인풋·탭·카드)가 상속.
     제목(.videos-head)만 Buri(Arita-buri 대체) 유지 */
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
}
.videos-wrap,
.videos-wrap * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.videos-head {
  display: table;
  margin: 0 auto;
  padding-top: 2px;
  border-top: 1px solid #dbd1c2;
  border-bottom: 1px solid #dbd1c2;
  font-family: "Buri";
  font-weight: normal;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #b39a78;
  text-align: center;
}
.videos-toolbar {
  margin-top: 3.2rem;
}
/* 모바일(시안 7463-16025): 검색창 full-width(1줄) → 전체N건 + 정렬 select(2줄).
   count/search/select 를 form 안 flex 형제로 두고 order 로 배치 */
.videos-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.videos-count {
  order: 2;
  margin-right: auto;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #444;
}
.videos-count em {
  font-style: normal;
  color: #b39a78;
}
.videos-search .search-box {
  order: 1;
  flex: 0 0 100%;
  position: relative;
  min-width: 0;
}
.videos-search input[type="text"],
.videos-search select {
  width: 100%;
  padding: 1.5rem 1.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #333;
}
.videos-search input[type="text"] {
  padding-right: 4.4rem;
}
.videos-search input::placeholder {
  color: #999;
}
/* 검색 아이콘 (CSS 돋보기) */
.videos-search .search-btn {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}
.videos-search .search-btn::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #999;
  border-radius: 50%;
}
.videos-search .search-btn::after {
  content: "";
  position: absolute;
  left: 1.7rem;
  top: 1.9rem;
  width: 0.6rem;
  height: 1px;
  background-color: #999;
  transform: rotate(45deg);
}
.videos-search .select-box {
  order: 3;
  position: relative;
  flex-shrink: 0;
  width: 14.6rem;
}
.videos-search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3.6rem;
  /* 레거시 전역 select 의 배경 화살표 제거 — .select-box::after 커스텀 chevron 만 남김
     (안 그러면 화살표가 두 개 겹쳐 보임) */
  background-image: none;
  color: #999;
  cursor: pointer;
}
.videos-search .select-box::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.videos-tabs {
  display: flex;
  gap: 1.2rem;
  margin: 3.2rem -1.5rem 0;
  padding: 0 1.5rem;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.videos-tabs li {
  flex: 0 0 auto;
}
.videos-tabs a {
  display: block;
  padding: 1rem 1.6rem;
  border-radius: 4px;
  background-color: #fff;
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #444;
  white-space: nowrap;
  text-decoration: none;
}
.videos-tabs a:hover,
.videos-tabs a:focus {
  text-decoration: none;
}
.videos-tabs a.is-active {
  background-color: #b39a78;
  color: #fff;
}
.videos-grid {
  display: grid;
  /* 시안: 모바일 2열 */
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 1.2rem;
  margin: 2.4rem 0 4rem;
  padding: 0;
  list-style: none;
}
.videos-card {
  display: block;
}
.videos-card .card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 408 / 230;
  overflow: hidden;
  background-color: #ddd;
}
/* 썸네일 호버 시 레거시 drawBorder(빨간 테두리) — 색·위치는 전역 .drawborder(style2.css)에서,
   두께만 레거시 영상/뉴스 리스트 기준(10px)으로 조정 */
.videos-card .card-thumb .drawborder-left,
.videos-card .card-thumb .drawborder-right {
  width: 10px;
}
.videos-card .card-thumb .drawborder-top,
.videos-card .card-thumb .drawborder-bottom {
  height: 10px;
}
.videos-card .card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videos-card .card-title {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #111;
  word-break: keep-all;
}
.videos-card .card-date {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #888;
}
.videos-empty {
  margin: 8rem 0;
  font-size: 1.6rem;
  color: #888;
  text-align: center;
}

@media (min-width: 48em) {
  .videos-wrap {
    max-width: 127.47rem;
    margin: 0 auto;
    padding: 8rem 0 8rem;
  }
  .videos-toolbar {
    margin-top: 4rem;
  }
  /* 태블릿·데스크톱: 한 줄 — 전체N건(좌) …… 검색창 + 정렬(우) */
  .videos-search {
    flex-wrap: nowrap;
    gap: 1.6rem;
  }
  .videos-count {
    order: 1;
  }
  .videos-search .search-box {
    order: 2;
    flex: 0 0 auto;
    width: 30.6rem;
  }
  .videos-search .select-box {
    width: 14.6rem;
  }
  .videos-card .card-title {
    font-size: 1.8rem;
  }
  .videos-card .card-date {
    font-size: 1.4rem;
  }
  .videos-tabs {
    flex-wrap: wrap;
    margin: 4rem 0 0;
    padding: 0;
    overflow-x: visible;
  }
  .videos-tabs a {
    font-size: 20px;
  }
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 4rem 0;
  }
}

@media (min-width: 64em) {
  /* 지배구조 — 데스크톱 스케일 */
  .biz-caption-red {
    margin-bottom: 4rem;
  }
  .biz-caption-red span {
    font-size: 2.8rem;
  }
  .biz-table-title {
    margin-bottom: 2.4rem;
    font-size: 2.4rem;
  }
  .gov-section + .gov-section {
    margin-top: 8rem;
  }
  .biz-table-scroll .biz-table,
  .biz-table-scroll .gov-board,
  .biz-table-scroll .gov-agenda,
  .biz-table-scroll .gov-dividend {
    min-width: 0;
  }
  .gov-dividend .col-cat {
    width: 36.7%;
  }
  .biz-table.line th {
    font-size: 1.5rem;
  }
  .biz-table.line td {
    font-size: 1.6rem;
  }
  .biz-table.line th,
  .biz-table.line td {
    padding: 1.2rem 2rem;
  }
  .videos-head {
    font-size: 3.3rem;
  }
  .videos-tabs a {
    font-size: 2rem;
  }
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2.4rem;
  }
  .videos-card .card-title {
    font-size: 2rem;
    padding-right: 4rem;
  }
  .videos-card .card-date {
    font-size: 1.6rem;
  }
}

/* ==================================================
   새미네부엌 (/semie) — semie-* 컴포넌트
   브랜드 톤: 그린 #0bab6d · 웜그레이 #3f3e3b · 파스텔 카드
   (Paperlogy/산돌호요요 미보유 — 디스플레이 문구는 SVG, 본문은 NotoSansCJKkr 폴백)
   ================================================== */
/* 위로가기 버튼 — 채널톡 런처 바로 위에 배치 (겹침 방지 최소 높이) */
.footer .go-to-top {
  bottom: 78px;
}
.footer .go-to-top.go-to-top-safari {
  bottom: 110px;
}
/* 새미네부엌 페이지: 공통 푸터의 우측하단 위로가기 버튼 미노출 */
.main.semie ~ .footer .go-to-top {
  display: none !important;
}
.main.semie {
  margin-bottom: 0;
  overflow: hidden;
  font-family: "Paperlogy", "NotoSansCJKkr", "NotoSans", sans-serif;
  background-color: #fff;
}
/* Sandoll Hoyoyo2 타이틀 서체 — 산돌구름 웹폰트 스트림(각 semie 템플릿 meta 에서 로드).
   스트림은 400 웨이트 단일 컷이라 font-synthesis 를 꺼서 가짜 볼드 왜곡 방지
   (미인증 도메인에선 Paperlogy SemiBold 폴백이 700 을 실웨이트로 처리) */
.semie-hero-title,
.semie-culture-title,
.semie-cta-title,
.semie-solution-title,
.cook-hero-title,
.cook-stat .stat-label,
.cook-stat .stat-value,
.cook-diagram-title,
.cook-cards-title {
  font-family: "Sandoll Hoyoyo2", "Paperlogy", "NotoSansCJKkr", sans-serif;
  font-synthesis: none;
}
[class^="semie-"],
[class^="semie-"] *,
.semie-strip,
.semie-strip * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 히어로 — 좌상단 연둣빛 웨이브 두 겹이 일러스트 뒤로 흐름 */
.semie-hero {
  position: relative;
}
.semie-hero::before,
.semie-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
}
/* 모바일: 시안 375×585 전용 SVG(두 겹 웨이브 합본) 한 장 — 헤더 상단부터 비율 유지(156vw).
   데스크톱 레이어 2장은 64em 블록에서 복원 */
.semie-hero::before {
  top: 0;
  height: 156vw;
  background-image: url(/static/images/business/semie/bg_semie_hero_01_mobile.svg);
}
.semie-hero::after {
  content: none;
  top: -8rem;
  height: 46rem;
  background-image: url(/static/images/business/semie/bg_semie_hero_02.svg);
}
.semie-hero .l-container,
.semie-hero .semie-intro {
  position: relative;
  z-index: 1;
}
.semie-hero-deco {
  display: none;
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}
.semie-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 상단 5rem: GNB 아래 타이틀 숨통 (시안 30px 보다 여유), 하단 5rem: 시안(배지 아래 50px) */
  padding: 8rem 1.5rem 5rem;
}
/* 모바일: 래퍼를 해제(contents)해 타이틀 → 일러스트 → 배지 순서로 재배치 (시안 순서).
   데스크톱(64em)에서 flex 컬럼으로 복원 */
.semie-hero-copy {
  display: contents;
}
.semie-hero-deco-wrap {
  position: relative;
  width: 100%;
}
/* 배지 래퍼(두 번째 래퍼): 모바일에선 일러스트(order 0) 뒤로 */
.semie-hero-deco-wrap + .semie-hero-deco-wrap {
  order: 1;
}
.semie-hero-title {
  position: relative;
  display: block;
  margin: 0;
}
.semie-hero-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  text-align: center;
  word-break: keep-all;
}
/* 산돌 타이틀 임시 SVG 대체 (폰트 미인증 도메인 대응).
   부모 타이틀 font-size(em) 기준이라 브레이크포인트별 크기가 기존 텍스트와 동일하게 스케일됨 */
.semie-title-svg {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: 2.4em;
}
.semie-solution-title .semie-title-svg,
.cook-stat .stat-label .semie-title-svg {
  height: 1.2em;
}
/* 솔루션 타이틀은 중앙정렬 대신 좌측 정렬 (헤드/부제와 동일하게 왼쪽 붙임) */
.semie-solution-title .semie-title-svg {
  margin-left: 0;
  margin-right: auto;
}
/* <picture> 가 레이아웃에 영향 주지 않도록 — img 가 h* 의 직속처럼 동작 */
.title-pic {
  display: contents;
}
/* 모바일 전용 SVG(_mobile)는 줄바꿈이 더 많아 줄 수가 늘어남 → 높이 상향(글자 크기 유지) */
@media (max-width: 47.99em) {
  .semie-cta-title .semie-title-svg,
  .cook-cards-title .semie-title-svg {
    height: 3.6em;
  }
  .cook-stat .stat-label .semie-title-svg {
    height: 2.4em;
  }
}
.semie-hero-title .semie-hero-deco {
  position: absolute;
  margin: 0;
}
/* 모자 데코 (모바일): 시안 375 기준 x295 y54 w45 — 타이틀 래퍼(345) 기준.
   명시적 width 지정 필수: 없으면 .semie-hero-title img 의 26.7rem 이 데코에도 적용돼
   거대 모자가 페이지를 가로로 밀어냄. 데스크톱 값은 64em 블록에서 덮어씀 */
.semie-hero-title .deco-hat {
  display: block;
  left: 87%;
  top: -2.5rem;
  width: 4.5rem;
}
/* 배지 — 낙서 포함 합본 PNG(417×264).
   모바일 시안: 낙서 좌측(x68)~배지 우측(x273.4) = 폭 205.4(래퍼 345의 59.5%), 좌측 15.4% 시작 */
.semie-hero-badge {
  display: block;
  width: 70%;
  /* max-width: 20.5rem; */
  height: auto;
  margin: 5rem auto 0 12%;
}
.semie-hero-illust {
  width: 100%;
  max-width: 34.5rem;
  aspect-ratio: 345 / 316;
  margin-top: 2rem;
}
.semie-hero-illust img {
  display: block;
  width: 100%;
  height: auto;
}

/* 소개 — 흰 배경 텍스트 블록 */
.semie-intro {
  /* 하단 10.8rem: 시안 모바일(마지막 문단 아래 120px = 문단 마진 1.2rem + 10.8rem) */
  padding: 1rem 0 12rem;
}
.semie-intro-inner {
  padding: 0 1.5rem;
  word-break: keep-all;
}
.semie-intro-title {
  font-size: 24px;
  font-weight: 600;
  /* 시안 모바일 행간 38px(1.7) — 데스크톱은 48em 에서 1.6 복원 */
  line-height: 1.7;
  color: #3f3e3b;
}
.semie-intro-title em {
  font-style: normal;
  color: #0bab6d;
}
.semie-intro-paragraphs {
  /* 시안 모바일: 타이틀-문단 16px, 문단 간 12px */
  margin-top: 1.6rem;
}
.semie-intro-paragraphs p {
  margin: 0 0 1.2rem;
  font-size: 15px;
  /* 시안 모바일 행간 26px(1.85) */
  line-height: 1.85;
  color: #444;
}

/* 집밥 문화 — 크림 웨이브 위 [사진1 | 타이틀 | 슬라이더] 스트립 */
.semie-culture {
  padding: 8rem 0;
  background-color: #fff;
  background-image: url(/static/images/business/semie/bg_semie_wave.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.semie-strip {
  display: flex;
  flex-direction: column;
}
.strip-title {
  order: 1;
  padding: 0 1.5rem;
  word-break: keep-all;
}
/* overflow hidden 금지 — 슬라이드 클리핑은 slick-list 가 담당하고,
   여기서 자르면 slick-list 하단 그림자 여유(음수 마진 구간)가 가로로 잘림 */
.strip-side {
  order: 2;
  display: none;
  width: clamp(24.4rem, 19.8vw, 38rem);
  flex-shrink: 0;
}
.semie-side-track .item img {
  display: block;
  width: auto;
  height: 56rem;
}
.strip-photos {
  order: 2;
  margin-top: 4rem;
  /* 모바일 시안: 첫 사진이 좌측 15px 에서 시작 (1.1rem + slick 확장 0.3 상쇄 + 아이템 패딩 0.4) */
  margin-left: 1.1rem;
}
.semie-culture-icon {
  display: block;
  width: 6.4rem;
}
.semie-culture-icon img {
  display: block;
  width: 100%;
  height: auto;
}
.semie-culture-title {
  margin-top: 0.8rem;
}
.semie-culture-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  word-break: keep-all;
}
.semie-culture-desc {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #444;
}
.semie-culture-controls {
  display: flex;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.semie-culture-controls .ctrl {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.semie-culture-controls .prev {
  background-color: #eec8c8;
}
.semie-culture-controls .next {
  background-color: #5abd80;
}
.semie-culture-controls .ctrl::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.semie-culture-controls .prev::after {
  transform: translate(-30%, -50%) rotate(135deg);
}
.semie-culture-controls .next::after {
  transform: translate(-70%, -50%) rotate(-45deg);
}
.semie-photos-track .item {
  padding: 0 0.4rem;
}
/* 타원 마스크: 시안 380×560 Ellipse 896 — 위아래가 봉긋한 커스텀 패스 (border-radius 타원은
   끝이 뾰족해 시안과 다름).
   그림자는 ::before 타원 box-shadow 로 별도 렌더 — 부모 drop-shadow + 자식 mask 조합은
   Chrome 이 마스크 적용 전 이미지로 그림자를 그려 사진 색이 마스크 밖으로 번지는 버그가 있음.
   얇은 블러 그림자라 순수 타원 근사로 시각 차이 없음 */
.semie-photos-track .ph,
.strip-side .ph {
  display: block;
  position: relative;
  width: clamp(18rem, 58vw, 21.6rem);
  aspect-ratio: 380 / 560;
}
.semie-photos-track .ph::before,
.strip-side .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0.6rem 1.2rem rgba(63, 62, 59, 0.18);
}
/* slick 창(overflow hidden)이 얇은 그림자를 자르지 않게 상하 여유 (음수 마진으로 레이아웃 상쇄) */
.semie-strip .slick-list {
  padding: 0.8rem 0 2rem;
  margin: -0.8rem 0 -2rem;
}
/* 우측 슬라이더: 창 왼쪽 경계 슬라이드의 그림자 여유.
   이전 슬라이드 이미지가 창 밖 '아이템 좌우 패딩' 지점에 있으므로 반드시 그보다 작게 —
   더 넓히면 이전 사진의 볼록한 가운데가 타이틀 옆으로 삐져 보임 (모바일 패딩 0.4rem) */
.strip-photos .slick-list {
  padding-left: 0.3rem;
  margin-left: -0.3rem;
}
.semie-photos-track .ph img,
.strip-side .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url(/static/images/business/semie/mask_semie_oval.svg);
  mask-image: url(/static/images/business/semie/mask_semie_oval.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 새미네부엌 솔루션 — 분홍 모눈 + 상단 웨이브 진입.
   모바일: 시안 375×1818 전용 SVG(웨이브+격자 합본)를 섹션 배경으로 통짜 사용,
   섹션 높이에 맞춰 100% 100% (시안과 높이 오차 ~2% 수준이라 왜곡 없음).
   데스크톱 배경은 64em 블록에서 데스크톱 SVG 로 덮어씀 */
.semie-solution {
  position: relative;
  padding: 8rem 0;
  /* Figma 8880-6410: 연분홍(#FFEFEF) 베이스 + 고정 15px 정사각 격자(선 #FFE5E5).
     이전 결합 SVG 100%100% 늘림은 섹션 높이 따라 격자가 눌려 정렬이 틀어짐 → CSS 고정격자로 대체 */
  background-color: #ffefef;
  background-image:
    linear-gradient(to right, #ffe5e5 1px, transparent 1px),
    linear-gradient(to bottom, #ffe5e5 1px, transparent 1px);
  background-size: 15px 15px;
  background-position: center top;
  background-repeat: repeat;
}
/* 상단 물결(웨이브) — 격자를 흰색 곡선으로 캡. 데스크톱은 64em 블록에서 display:none */
.semie-solution::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5.5rem;
  background: url(/static/images/business/semie/bg_semie_solution_wavecap_mobile.svg)
    top center / 100% 100% no-repeat;
  z-index: 1;
  pointer-events: none;
}
.semie-solution-inner {
  position: relative;
  padding: 0 1.6rem;
  /* width:1274px 를 고정하면 모바일에서 뷰포트를 넘쳐 카드가 화면 밖으로 잘림.
     biz-inner 의 max-width:1274px + margin:auto 가 데스크톱 1274 중앙정렬을 담당하므로
     여기선 100% 로 두어 좁은 화면에서 부모(뷰포트) 폭에 맞게 축소 */
  width: 100%;
}
.semie-solution-head {
  position: relative;
  word-break: keep-all;
}
.semie-solution-title {
  /* Sandoll SVG 대체 → Paperlogy 텍스트. 크기: 모바일 32 / 태블릿(48em) 48 / 웹(80em) 60 */
  font-family: "Paperlogy", "NotoSansCJKkr", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #3f3e3b;
}
.semie-solution-desc {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #444;
}
.semie-solution-deco,
.semie-solution-mascot,
.semie-solution-carrot {
  display: none;
}
/* 카드 그리드 래퍼 — 인형탈 데코의 위치 기준 (카드 상단·3번째 카드 중앙 앵커) */
.semie-cards-wrap {
  position: relative;
}
.semie-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  z-index: 100;
  position: relative;
}
.semie-cards .item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2rem;
  background-color: #fff;
  box-shadow: 4px 4px 12px rgba(225, 213, 213, 1);
}
.semie-cards .item-img {
  display: block;
  aspect-ratio: 414 / 295;
  overflow: hidden;
}
.semie-cards .item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.semie-cards .item-info {
  flex: 1;
  padding: 3.6rem 2.4rem 4rem;
  word-break: keep-all;
}
.semie-cards .info-lime {
  background-color: #effec0;
}
.semie-cards .info-mint {
  background-color: #cdf6f5;
}
.semie-cards .info-pink {
  background-color: #fed0d0;
}
.semie-cards .item-icon {
  display: block;
  width: 4rem;
  height: 4rem;
}
.semie-cards .item-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.semie-cards .item-title {
  margin-top: 1.2rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #333;
}
.semie-cards .item-desc {
  margin-top: 1.2rem;
  margin-bottom: 0;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #666;
}

/* CTA */
.semie-cta {
  padding: 8rem 1.5rem;
}
.semie-cta-title {
  text-align: center;
}
.semie-cta-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
  word-break: keep-all;
}
.semie-cta-title em {
  font-style: normal;
  color: #0bab6d;
}
.semie-cta-cards {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  max-width: 34.5rem;
  margin: 5rem auto 0;
}
.semie-cta-cards .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
/* 이미지 영역은 시안(460×460)처럼 정사각 고정 — 두 이미지의 원본 비율이 달라
   (978×920 / 920×920) 높이를 이미지에 맡기면 좌우 버튼 라인이 어긋남 */
.semie-cta-cards .item-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.semie-cta-cards .item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.semie-cta-cards .item-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 3.2rem;
  border-radius: 9.9rem;
  background-color: #0bab6d;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.7;
  text-decoration: none;
}
.semie-cta-cards .item-btn .arrow {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
}
.semie-cta-cards .item-btn .arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-70%, -50%) rotate(-45deg);
}

@media (min-width: 48em) {
  .semie-hero-inner {
    padding: 5rem 0 0;
  }
  .semie-intro-inner {
    padding: 0;
  }
  /* 데스크톱 간격 복원 (모바일 시안 값과 다름) */
  .semie-intro {
    padding: 6rem 0 2rem;
  }
  .semie-intro-title {
    font-size: 32px;
    line-height: 1.6;
  }
  .semie-intro-paragraphs {
    margin-top: 2.4rem;
  }
  .semie-intro-paragraphs p {
    margin-bottom: 1.6rem;
    font-size: 18px;
    line-height: 1.7;
  }

  .semie-culture-desc {
    font-size: 1.6rem;
  }
  .semie-photos-track .ph,
  .strip-side .ph {
    width: clamp(24.4rem, 19.8vw, 38rem);
  }
  .semie-solution {
    padding: 10rem 0;
  }
  .semie-solution-title {
    font-size: 4.8rem;
  }
  .semie-solution-desc {
    font-size: 1.6rem;
  }
  .semie-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .semie-cta {
    padding-left: 0;
    padding-right: 0;
  }

  .semie-cta-cards {
    flex-direction: row;
    justify-content: space-between;
    gap: 4rem;
    max-width: 108rem;
  }
  .semie-cta-cards .item {
    flex: 1;
    max-width: 46rem;
  }
}

@media (min-width: 64em) {
  .semie-hero::before {
    top: -7.5vw;
    height: 36.6vw;
    background-image: url(/static/images/business/semie/bg_semie_hero_01.svg);
  }
  .semie-hero-deco-wrap {
    position: relative;
  }
  .semie-hero-deco {
    display: block;
  }
  /* 모자: 타이틀(h1, 시안 384px) 기준 — x331 y-84 w105 */
  .semie-hero-title .deco-hat {
    left: 90%;
    top: -83%;
    width: 27.3%;
  }
  .semie-hero::after {
    content: "";
    top: -10.7vw;
    height: 38.1vw;
  }
  /* 비례 캔버스: 일러스트(inner의 61.2%)가 높이를 만들고, 카피는 % 좌표로 고정
     — 어떤 폭에서도 시안(1274 기준)과 동일한 상대 위치/비율 유지 */
  .semie-hero-inner {
    position: relative;
    display: block;
    padding: 3.61vw 0 0;
  }
  /* .biz-inner.span8 의 %폭(66.67%)을 이기고 시안 비례 폭(1274/2020) 고정 — 히어로/인트로 공통 */
  .semie-hero .semie-hero-inner,
  .semie-hero .semie-intro-inner {
    width: 1274px;
  }
  .semie-hero-copy {
    position: absolute;
    left: 0;
    top: 41%;
    width: 30.2%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
  }
  /* nowrap: Hoyoyo 수급 전 Paperlogy 폴백이 시안보다 넓어 줄바꿈되는 것 방지 (행은 br 로 고정) */
  .semie-hero-title {
    font-size: 46px;
    text-align: left;
    white-space: nowrap;
  }
  .semie-hero-badge {
    width: 95%;
    max-width: none;
    margin-top: 12.3%;
    margin-left: -15%;
  }
  .semie-hero-illust {
    width: 61.2%;
    max-width: none;
    aspect-ratio: auto;
    overflow: visible;
    margin: 0 0 0 auto;
  }
  .semie-intro {
    padding: 5.21vw 0 3.13vw;
  }
  .semie-intro-inner {
    display: flex;
    justify-content: space-between;
    gap: 3.13vw;
    padding: 0;
  }
  .semie-intro-title {
    flex-shrink: 0;
    font-size: 32px;
  }
  .semie-intro-paragraphs {
    max-width: 32.76vw;
    margin-top: 0;
  }
  .semie-intro-paragraphs p {
    margin-bottom: 0.83vw;
    font-size: 18px;
  }
  .semie-culture {
    padding: 14rem 0 10rem;
  }
  /* 스트립: [사진1 | 타이틀 | 슬라이더] */
  .semie-strip {
    flex-direction: row;
    align-items: center;
    gap: 6rem;
  }
  .strip-side {
    order: 1;
    display: block;
    /* 사진 폭 + 좌우 1.5rem — 얇은 그림자 여유. 음수 마진으로 레이아웃 상쇄 */
    width: calc(clamp(24.4rem, 19.8vw, 38rem) + 3rem);
    margin-left: -10.2rem;
    margin-right: -1.5rem;
  }
  /* 페이드 모드라 슬라이드가 창 폭을 가득 채움 — 사진을 중앙 정렬해 좌우 1.5rem 확보 */
  .strip-side .ph {
    margin: 0 auto;
  }
  /* 사진 간 간격 — 시안 4rem (2020 기준 40px 서페이스 갭) */
  .semie-photos-track .item {
    padding: 0 2rem;
  }
  /* 데스크톱은 창 확장 불필요: 아이템 패딩 2rem 안에 그림자(1.2rem)가 다 들어가고,
     확장하면 이전 슬라이드의 그림자 끝자락이 타이틀 옆에 비침.
     타이틀→첫 사진 거리 = flex 갭 6rem + 아이템 패딩 2rem = 시안 8rem */
  .strip-photos .slick-list {
    padding-left: 0;
    margin-left: 0;
  }
  .strip-title {
    order: 2;
    flex-shrink: 0;
    width: clamp(30rem, 24.7vw, 47.5rem);
    padding: 0;
  }
  .strip-photos {
    order: 3;
    flex: 1;
    min-width: 0;
    margin-top: 0;
    margin-left: 0;
  }
  .semie-culture-icon {
    width: 18.9%;
    max-width: 9rem;
  }
  .semie-culture-title {
    font-size: 6rem;
    white-space: nowrap;
  }
  .semie-culture-controls {
    margin-top: 6rem;
  }
  .semie-solution {
    margin-top: 0;
    /* 하단 9rem: 시안(2020 기준 90px)처럼 핑크 격자가 카드 아래로 이어짐 — 강아지가 여기 붙음 */
    padding: 20rem 0 9rem;
    background-color: transparent;
    background-image: url(/static/images/business/semie/bg_semie_solution_wave.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .semie-solution::before {
    display: none;
  }
  .semie-solution-inner {
    padding: 0;
  }
  /* 인형탈 데코 — Figma 실측(콘텐츠 1274px 기준): 폭 484.7px=38.05%, 중심 1031.4px=80.96%,
     카드 상단 아래로 자기 높이의 13.95%(67.9px)가 카드(z 100) 뒤로 겹침.
     translateY 는 자기 높이 비례라 어떤 폭에서도 시안 비율 유지 */
  .semie-solution-deco {
    display: block;
    position: absolute;
    left: 80.96%;
    bottom: 100%;
    transform: translate(-50%, 13.95%);
    width: 38.05%;
    max-width: 48.5rem;
    height: auto;
    pointer-events: none;
    z-index: 99;
  }
  /* 강아지 — 섹션 직속: 화면 크기와 무관하게 핑크 격자 배경 하단(bottom 0)에 고정.
     좌측/폭은 Figma 실측(2020 기준 left 117px=5.79vw, width 286px=14.16vw) */
  .semie-solution-mascot {
    display: block;
    position: absolute;
    left: 5.79vw;
    bottom: 0;
    width: clamp(18rem, 14.16vw, 28.6rem);
    height: auto;
    pointer-events: none;
    z-index: 110;
  }
  .semie-solution-carrot {
    display: block;
    position: absolute;
    z-index: 110;
    right: -21.9rem;
    top: 55.4rem;
    width: 9.1rem;
    height: auto;
    pointer-events: none;
  }
  .semie-cards .item-info {
    padding: 5rem 4rem 6rem;
  }
  .semie-cards .item-title {
    font-size: 2.8rem;
  }
  .semie-cards .item-desc {
    font-size: 1.6rem;
  }
}

@media (min-width: 80em) {
  .semie-culture-desc {
    font-size: 1.8rem;
  }
  .semie-solution {
    padding: 24rem 0 14rem;
  }
  .semie-solution-title {
    font-size: 6rem;
  }
  .semie-solution-desc {
    font-size: 1.8rem;
  }
  .semie-cta {
    padding: 16rem 0;
  }
  .semie-cta-title {
    font-size: 6rem;
  }
  .semie-cta-cards {
    margin-top: 6rem;
  }
  .semie-cta-cards .item-btn {
    font-size: 2rem;
  }
}

/* ==================================================
   새미와 즐겁게 요리해 (/semie/cook) — cook-* 컴포넌트
   시안: 데스크톱 2020(콘텐츠 1274) / 모바일 375 · 에셋 images/business/semie/cook/
   디스플레이 서체(Sandoll Hoyoyo)는 웹폰트 미보유 → 타이틀류는 SVG 추출본 사용
   ================================================== */
/* 리셋은 .cook(main) 스코프로 한정 — 레거시 cook.css 의 .cook-img-box 등과 무관하게.
   :where() 로 특이도 0 유지: 개별 컴포넌트 규칙(margin auto 등)이 항상 이김 */
:where(.cook [class^="cook-"], .cook [class^="cook-"] *) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 데스크톱/모바일 전용 추출 이미지 스왑 */
.cook .pc-img {
  display: none;
}
.cook .mo-img {
  display: block;
  margin: 0 auto;
}
.cook-hero-deco {
  display: none;
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* ── 히어로 ── */
.cook-hero {
  position: relative;
}
.cook-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 156vw;
  z-index: 0;
  background: url(/static/images/business/semie/cook/bg_cook_hero_mobile.svg)
    no-repeat top center;
  background-size: 100% 100%;
  pointer-events: none;
}
.cook-hero .l-container,
.cook-hero .cook-intro {
  position: relative;
  z-index: 1;
}
/* 모바일: 타이틀 → 일러스트 → 로고 순서 (시안). copy 래퍼는 contents 로 해제 */
.cook-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem 0;
}
.cook-hero-copy {
  display: contents;
  margin-top: 4rem;
}
.cook-hero-logo {
  order: 1;
}
.cook-hero-title {
  position: relative;
  width: fit-content;
  margin: 5rem auto 0;
}
.cook-hero-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  text-align: center;
  word-break: keep-all;
}
.cook-hero-title .deco-hat {
  display: block;
  right: -1.3rem;
  top: -2.9rem;
  width: 6rem;
}
.cook-hero-kv {
  width: 100%;
  max-width: 34.5rem;
  margin: 3rem auto 0;
}
.cook-hero-kv img {
  display: block;
  width: 100%;
  height: auto;
}
.cook-hero-logo {
  position: relative;
  width: 90%;
  max-width: 30rem;
  margin: 2.5rem auto 0;
}
/* 데코(컨페티)가 함께 들어있으므로 로고 이미지에만 사이즈 적용 */
.cook-hero-logo > img.logo-pc,
.cook-hero-logo > img.logo-mo {
  display: block;
  width: 100%;
  height: auto;
}
.cook-hero-logo > img.logo-pc {
  display: none;
}

/* ── 소개 ── */
.cook-intro {
  position: relative;
  padding: 6rem 0 12rem;
}
.cook-intro-inner {
  padding: 0 1.5rem;
  word-break: keep-all;
}
.cook-intro-title {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.7;
  color: #3f3e3b;
}
.cook-intro-title em {
  font-style: normal;
  color: #fc8787;
}
.cook-intro-paragraphs {
  margin-top: 1.6rem;
}
.cook-intro-paragraphs p {
  margin: 0 0 1.2rem;
  font-size: 1.4rem;
  line-height: 1.85;
  color: #444;
}

/* ── 참여 통계 + 갤러리 ── */
.cook-stats {
  position: relative;
  overflow-x: clip;
  padding: 8rem 0 0;
  background: url(/static/images/business/semie/cook/bg_cook_stats_mobile.svg)
    no-repeat top center;
  background-size: 100% auto;
}
/* 모바일: 샐러드볼 데코가 히어로/통계 경계 우측에 얹힘 (데스크톱은 intro 쪽 별 데코 사용) */
.cook-stats-star {
  position: absolute;
  right: 1.5rem;
  top: -9.1rem;
  width: 15.1rem;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
.cook-stat {
  position: relative;
  text-align: center;
}
.cook-stat .stat-label {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  word-break: keep-all;
}
.cook-stat .stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.cook-stat .digits {
  display: flex;
  gap: 0.6rem;
}
.cook-stat .digits em {
  width: 4.9rem;
  height: 6rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 0.4rem 1.2rem rgba(63, 62, 59, 0.08);
  font-style: normal;
  font-weight: 700;
  font-size: 4rem;
  line-height: 6rem;
  text-align: center;
  color: #0cbc78;
}
.cook-stat .unit {
  font-size: 2.4rem;
  font-weight: 400;
  color: #333;
}
.cook-stat.stat-02 {
  margin-top: 4rem;
}
.cook-stat .deco-arrow {
  display: none;
}
.cook-stats-mascot {
  display: block;
  width: 18.8rem;
  height: auto;
  margin: 4rem 0 0;
}
.cook-gallery {
  position: relative;
  padding-bottom: 4rem;
}
.cook-gallery .gal-row {
  display: flex;
  gap: 0.8rem;
  width: max-content;
}
.cook-gallery .row-01 {
  margin-left: -41.9vw;
}
.cook-gallery .row-02 {
  margin-left: -73.6vw;
  margin-top: 0.8rem;
}
.cook-gallery .ph {
  flex-shrink: 0;
  width: 60.3vw;
  height: 40vw;
  border-radius: 1.6rem;
  overflow: hidden;
}
.cook-gallery .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cook-gallery .gal-badge {
  position: absolute;
  left: 60vw;
  bottom: 0;
  width: 10.4rem;
  height: auto;
  pointer-events: none;
}

/* ── 즐거운 변화 다이어그램 ── */
.cook-diagram {
  position: relative;
  padding: 8rem 0;
}
.cook-diagram-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  text-align: center;
  word-break: keep-all;
}
.cook-diagram-title em {
  font-style: normal;
  color: #fc8787;
}
.cook-diagram-img {
  margin-top: 2.4rem;
  padding: 0 1.5rem;
}
.cook-diagram-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.cook-diagram-deco {
  display: none;
  position: absolute;
  height: auto;
  pointer-events: none;
}
/* 모바일(<48em)에서는 벤또·샐러드 데코 숨김 */
@media (max-width: 47.99em) {
  .cook-diagram-deco.deco-bento,
  .cook-diagram-deco.deco-salad {
    display: none !important;
  }
}

/* ── 프로그램 카드 ── */
.cook-cards {
  position: relative;
  padding: 8rem 0;
  background: url(/static/images/business/semie/cook/bg_cook_cards_mobile.svg)
    no-repeat top center;
  background-size: 100% auto;
}
.cook-cards-deco {
  display: none;
  position: absolute;
  height: auto;
  pointer-events: none;
}
.cook-cards-inner {
  padding: 0 1.5rem;
}
.cook-cards-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
  text-align: center;
  word-break: keep-all;
}
.cook-cards-title em {
  font-style: normal;
  color: #fc8787;
}
.cook-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 3.2rem 0 0;
  list-style: none;
}
.cook-cards-list .card {
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.4rem 2rem rgba(63, 62, 59, 0.08);
  padding-bottom: 2rem;
}
/* 카드 배경 — 시안: 상단 컬러 → 50% 지점에서 흰색 도달 */
.cook-cards-list .card-lime {
  background: linear-gradient(180deg, #f2ffc7 0%, #fff 50%);
}
.cook-cards-list .card-mint {
  background: linear-gradient(180deg, #d9f7f6 0%, #fff 50%);
}
.cook-cards-list .card-pink {
  background: linear-gradient(180deg, #ffe0e0 0%, #fff 50%);
}
.cook-cards-list .card-green {
  background: linear-gradient(180deg, #e0ffe3 0%, #fff 50%);
}
.cook-cards-list .card-yellow {
  background: linear-gradient(180deg, #fff4c8 0%, #fff 50%);
}
.cook-cards-list .card-purple {
  background: linear-gradient(180deg, #ece6f2 0%, #fff 50%);
}
/* 버튼 배경 — 카드별 톤 (시안) */
.cook-cards-list .card-lime .card-btn {
  background-color: #e4f8a0;
}
.cook-cards-list .card-mint .card-btn {
  background-color: #cef6f5;
}
.cook-cards-list .card-pink .card-btn {
  background-color: #fed2d2;
}
.cook-cards-list .card-green .card-btn {
  background-color: #d1f7d4;
}
.cook-cards-list .card-yellow .card-btn {
  background-color: #fff0b6;
}
.cook-cards-list .card-purple .card-btn {
  background-color: #e2d5f0;
}
.cook-cards-list .card-info {
  padding: 3.6rem 2.4rem 3.6rem;
  word-break: keep-all;
}
.cook-cards-list .card-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #3f3e3b;
}
.cook-cards-list .card-desc {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #555;
}
.cook-cards-list .card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.4rem;
  padding: 0.8rem 1.2rem 0.8rem 1.6rem;
  border-radius: 9.9rem;
  background-color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  color: #444;
  text-decoration: none;
}
.cook-cards-list .card-btn .arrow {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
}
.cook-cards-list .card-btn .arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid #444;
  border-bottom: 2px solid #444;
  transform: translate(-70%, -50%) rotate(-45deg);
}
.cook-cards-list .card-img {
  display: block;
  margin-top: auto;
  aspect-ratio: 345 / 200;
  overflow: hidden;
}
.cook-cards-list .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 태블릿(48em~): 추출 이미지 스왑 ── */
@media (min-width: 48em) {
  .cook .pc-img {
    display: block;
    margin: 0 auto;
  }
  .cook .mo-img {
    display: none;
  }
}

/* ── 데스크톱(64em~) ── */
@media (min-width: 64em) {
  /* 히어로: 웨이브 2겹(데스크톱 svg), 콘텐츠는 좌카피/우일러스트 비례 배치 */
  /* 히어로: 시안 2020 기준 vw 비례 (수동 튜닝값은 1920 기준 환산해 유지) */
  .cook-hero::before {
    top: -3.5vw;
    height: 36.6vw;
    background-image: url(/static/images/business/semie/cook/bg_cook_hero.svg);
    background-size: 100% auto;
  }

  .cook-hero-inner {
    position: relative;
    display: block;
    padding: 3.61vw 0 0;
  }
  /* .biz-inner.span8 의 %폭을 이기고 /semie 히어로와 동일한 고정 캔버스(1274px).
     두 페이지 히어로의 콘텐츠 폭·타이틀 크기·좌우 배치를 어떤 창폭에서도 동일하게 유지 */
  .cook-hero .cook-hero-inner,
  .cook-hero .cook-intro-inner {
    width: 1274px;
    max-width: none;
  }
  /* 카피(타이틀+로고): /semie 와 동일하게 좌측 절대배치.
     우측 KV 높이가 캔버스 높이를 만들고 카피는 % 좌표로 고정 */
  .cook-hero-copy {
    position: absolute;
    left: 0;
    top: 36%;
    width: 30.2%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
  }
  .cook-hero-logo {
    order: 1;
  }
  .cook-hero-title {
    width: auto;
    margin: 0;
    font-size: 46px;
    text-align: left;
    white-space: nowrap;
  }
  /* 모자 데코: 타이틀(46px) 기준 em — 고정 캔버스에서 타이틀에 붙어 이동 */
  .cook-hero-title .deco-hat {
    right: 0;
    top: -2.1em;
    width: 3em;
  }
  /* 로고(=semie 배지 슬롯): 카피 폭 기준으로 타이틀 아래 배치 */
  .cook-hero-logo {
    width: 130%;
    max-width: none;
    margin: 9% 0 0 -18%;
  }
  .cook-hero-logo > img.logo-pc {
    display: block;
  }
  .cook-hero-logo > img.logo-mo {
    display: none;
  }
  /* KV: /semie 일러스트와 동일한 우측 61.2% 슬롯 */
  .cook-hero-kv {
    width: 63.2%;
    max-width: none;
    margin: 5rem -2.3rem 0 auto;
  }
  /* z-index 1: 배경 ::after(z 0)가 콘텐츠 뒤에 그려지므로 그보다 위로 */
  .cook-hero .deco-curl-left {
    display: block;
    left: 7.2%;
    top: -5rem;
    width: 16.2%;
    z-index: 1;
  }
  .cook-hero .deco-curl-right {
    display: block;
    right: -2.9%;
    top: 5.7rem;
    width: 16.6%;
    z-index: 1;
  }
  .cook-intro {
    padding: 100px 0 200px;
  }
  .cook-intro-inner {
    display: flex;
    gap: 0.79vw;
    padding: 0;
  }
  .cook-intro-title {
    flex: 0 0 49.4%;
    font-size: 1.58vw;
    line-height: 1.6;
  }
  .cook-intro-paragraphs {
    flex: 1;
    margin-top: 0;
  }
  .cook-intro-paragraphs p {
    margin: 0 0 0.79vw;
    font-size: 0.89vw;
    line-height: 1.7;
  }
  .cook-intro .deco-star {
    display: block;
    left: 78%;
    top: 14vw;
    width: 11.3%;
  }
  /* 통계 */
  .cook-stats {
    /* 이하 Stats 요소는 시안 2020px 기준 vw 비례값 (px/20.2 = vw) — 모든 해상도에서 비율 유지 */
    padding: 160px 0 0;
    background-image: url(/static/images/business/semie/cook/bg_cook_stats.svg);
    background-size: 100% 100%;
  }
  .cook-stats-star {
    display: none;
  }
  .cook-stat .stat-label {
    font-size: 2.38vw;
  }
  .cook-stat .stat-value {
    gap: 1.19vw;
    margin-top: 1.98vw;
  }
  .cook-stat .digits {
    gap: 0.59vw;
  }
  .cook-stat .digits em {
    width: 4.95vw;
    height: 6.24vw;
    border-radius: 0.99vw;
    font-size: 3.96vw;
    line-height: 6.24vw;
  }
  .cook-stat .unit {
    font-size: 2.38vw;
  }
  .cook-stat.stat-02 {
    margin-top: 4.95vw;
  }
  .cook-stat.stat-01 .deco-arrow {
    display: block;
    position: absolute;
    left: calc(50% + 20vw);
    top: 1.78vw;
    width: 3.81vw;
    height: auto;
    pointer-events: none;
  }
  /* 시안 비례: 우측 모서리 중앙-18.81vw(라벨 왼쪽), 하단은 갤러리 상단(+0.4vw 겹침) — 전부 vw 라
     글자·갤러리와의 관계가 모든 해상도에서 시안과 동일 */
  .cook-stats-mascot {
    position: absolute;
    /* 시안 18.81vw + 폴백 폰트(Paperlogy)가 호요요보다 넓은 만큼 보정 */
    right: calc(50% + 20.5vw);
    left: auto;
    top: auto;
    bottom: 32.47vw;
    width: 22.97vw;
    max-width: none;
    margin: 0;
  }
  .cook-gallery {
    margin-top: 6.93vw;
    padding-bottom: 0;
  }
  .cook-gallery .gal-row {
    gap: 1.19vw;
  }
  .cook-gallery .row-01 {
    margin-left: -11.8vw;
  }
  .cook-gallery .row-02 {
    margin-left: -2.5vw;
    margin-top: 1.19vw;
  }
  .cook-gallery .ph {
    width: 23.76vw;
    height: 15.84vw;
    border-radius: 1.19vw;
  }
  .cook-gallery .gal-badge {
    left: auto;
    right: 11.39vw;
    bottom: -2.28vw;
    width: 9.45vw;
  }
  /* 다이어그램 */
  /* 다이어그램: 시안 2020 기준 vw 비례 — 일러스트·데코·여백이 모든 해상도에서 같은 구도 유지 */
  .cook-diagram {
    padding: 180px 0;
  }
  .cook-diagram-title {
    font-size: 2.97vw;
  }
  /* 박스 자체를 시안 비례 폭(1153/2020=57.08vw)으로 — 데코는 이 박스 기준 % 앵커 */
  .cook-diagram-img {
    position: relative;
    width: 57.08vw;
    max-width: none;
    margin: 0.4vw auto 0;
    padding: 0;
  }
  .cook-diagram-img > img:first-of-type {
    width: 100%;
  }
  /* 일러스트 박스(1153×809 기준) 상대 % — 시안: 벤또 dx-266 dy248 w292 / 샐러드 dy-91 w268.
     샐러드 가로는 화면 밖으로 과하게 나가지 않도록 승인된 위치(우측 살짝 걸침)를 박스 기준으로 환산 */
  .cook-diagram-deco.deco-bento {
    display: block;
    left: -23.07%;
    top: 30.66%;
    width: 25.32%;
  }
  .cook-diagram-deco.deco-salad {
    display: block;
    right: -19%;
    top: -11.25%;
    width: 23.24%;
  }
  /* 프로그램 카드 */
  /* 카드 섹션: 시안 2020 기준 vw 비례 — 여백·카드·데코가 모든 해상도에서 같은 구도 */
  .cook-cards {
    padding: 0;
    background-image: url(/static/images/business/semie/cook/bg_cook_cards.svg);
    background-size: 100% 100%;
  }
  .cook-cards-deco {
    display: block;
    right: 17.43vw;
    top: -3vw;
    width: 15.54vw;
  }
  .cook-cards-title {
    font-size: 2.97vw;
    line-height: 1.2;
  }
  /* .biz-inner.span8 의 width(66.67%)·max-width 를 이기도록 0-2-0 특이도로 지정 */
  .cook-cards .cook-cards-inner {
    padding: 200px 0 0;
    margin-bottom: 160px;
  }
  .cook-cards-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.79vw;
    margin-top: 2.97vw;
  }
  /* 카드 하단 1vw 패딩: 시안은 이미지가 카드 바닥에서 20px 떠 있음 */
  .cook-cards-list .card {
    border-radius: 0.99vw;
    padding-bottom: 0.99vw;
    box-shadow: 0.2vw 0.2vw 0.79vw rgba(0, 0, 0, 0.08);
  }
  .cook-cards-list .card-info {
    padding: 2.97vw 1.98vw;
  }
  .cook-cards-list .card-title {
    font-size: 3.2rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #333;
  }
  .cook-cards-list .card-desc {
    margin-top: 0.4vw;
    font-size: 16px;
    line-height: 1.5;
  }
  .cook-cards-list .card-btn {
    margin-top: 24px;
    gap: 0.2vw;
    padding: 8px 12px;
    font-size: 16px;
  }
  .cook-cards-list .card-btn .arrow {
    width: 0.99vw;
    height: 0.99vw;
  }
  .cook-cards-list .card-btn .arrow::after {
    width: 0.4vw;
    height: 0.4vw;
  }
  .cook-cards-list .card-img {
    aspect-ratio: 414 / 240;
  }
}

/* ==========================================================================
   메인 리뉴얼 home2 (Figma 8042:3276 / m 8050:5013)
   KV sticky 핀 + SCROLL 인디케이터, 콘텐츠가 KV 를 덮으며 전환
   ========================================================================== */
.home2 {
  background: #fff;
}
.home2,
.home2 * {
  box-sizing: border-box;
}

/* =========================================================
   메인 리뉴얼 (home2) — 기존 메인과 동일한 컨테이너(최대폭 1920·중앙정렬·양옆/하단 여백).
   내부 치수는 컨테이너 폭 기준 cqw(1cqw = 컨테이너폭 1%) → 해상도가 바뀌어도 비율 고정,
   1920 초과 화면에서는 1920 비율 그대로 잠기고 양옆 여백만 늘어남. (Figma 1920 기준 px÷19.2 = cqw)
   ========================================================= */

/* --- 컨테이너 (legacy .l-container / .l-content 와 동일 규격) --- */
.h2-container {
  margin: 0;
}
@media (min-width: 64em) {
  .h2-container {
    margin: 0 40px;
  }
}
@media (min-width: 80em) {
  .h2-container {
    margin: 0 50px;
  }
}
.h2-content {
  max-width: 1920px;
  margin: 0 auto 50px;
  container-type: inline-size;
}
/* 모바일: 하단 50px 마진 제거 */
@media (max-width: 47.99em) {
  .h2-content {
    margin-bottom: 0;
  }
}

/* --- KV : 기존 메인 영상 슬라이더(.home .intro) 재사용 ---
   슬라이더/영상/하단 점(영상 전환 컨트롤러)은 레거시 CSS(.home .intro …)가 담당.
   sticky·SCROLL 인디케이터 없음. 컨테이너(최대 1920) 안에서 풀폭 표시. */
.h2-kv {
  position: relative;
}
.h2-kv .slider-intro {
  width: 100%;
  /* 유튜브 기본 비율 1920×1080 (16:9) */
  aspect-ratio: 1920 / 1080;
}
/* KV 를 유튜브 기본 비율(1920×1080 = 56.25%)로 고정.
   레거시(.home .intro …)는 브레이크포인트마다 비율이 달라서(1920px 37.78% / 1440px 47.5% /
   모바일 144%) 그대로 두면 영상 비율과 어긋난다. .home .intro.h2-kv (0-4-0) 로 오버라이드. */
@media (min-width: 48em) {
  .home .intro.h2-kv .slide-spacer {
    height: 0;
    padding-bottom: 56.25%;
  }
  .home .intro.h2-kv .slide-video {
    aspect-ratio: 1920 / 1080;
  }
}
/* 모바일은 세로형 122:217 (= padding-bottom 177.87%).
   영상 자체는 16:9 라 세로 박스를 채우려면 좌우가 잘린다 — main.js 의 resize() 가
   높이 기준으로 iframe 을 잡아(width/RATIO < height 분기) 덮어준다. */
@media (max-width: 47.99em) {
  .h2-kv .slider-intro {
    aspect-ratio: 122 / 217;
  }
  .home .intro.h2-kv .slide-spacer {
    height: 0;
    padding-bottom: 177.87%;
  }
  .home .intro.h2-kv .slide-video {
    aspect-ratio: 122 / 217;
  }
  /* slick 이 슬라이더 루트 높이를 데스크톱 값으로 캐시해 슬라이드를 자르는 것 방지 */
  .home .intro.h2-kv .slider-intro {
    height: auto !important;
  }
}

/* /home 전체 링크 밑줄 제거 */
.home2 a,
.home2 a:hover,
.home2 a:focus {
  text-decoration: none;
}

/* --- KV 위로 올라오는 본문 --- */
.h2-body {
  position: relative;
  z-index: 1;
  background: #fff;
}

/* --- 공통 캡션 (상하 헤어라인) --- */
.h2-caption {
  display: inline-flex;
  align-items: center;
  padding: 1px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* 노토산스 CJK KR 미디엄(500 → NotoSansCJKkr-Medium.otf). 명시적으로 지정해
     상속으로 얇게 잡히던 문제 해결. font-synthesis 로 가짜 합성 방지 */
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
  font-size: 0.938cqw;
  line-height: 1.6;
  font-weight: 500;
  font-synthesis: none;
  font-style: normal;
  /* 전역 em { color:#ed1c24 } 를 무시하고 부모 색 상속 (콘텐츠 카드=흰색).
     브랜드(.h2-c2)·마켓(.h2-market-caption) 캡션은 각자 색을 명시해 상속을 덮음 */
  color: inherit;
}

/* --- Cards-01 (콘텐츠 카드) --- */
.h2-cards1 {
  display: flex;
}
.h2-c1 {
  position: relative;
  flex: 1 1 0;
  height: 15cqw;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
/* 호버 시 레거시 drawBorder 효과(테두리가 그려지며 둘러쳐짐).
   main.js 의 $('.home .h2-c1').drawBorder() 가 4개 span 을 넣고 GSAP 로 애니메이션.
   전역 .drawborder(#b61c21) 위에 카드용 두께만 조정 */
.h2-c1 .drawborder-left,
.h2-c1 .drawborder-right,
.h2-c2 .drawborder-left,
.h2-c2 .drawborder-right {
  width: 20px;
}
.h2-c1 .drawborder-top,
.h2-c1 .drawborder-bottom,
.h2-c2 .drawborder-top,
.h2-c2 .drawborder-bottom {
  height: 20px;
}
.h2-c1-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.h2-c1-img-story {
  object-position: left center;
}
.h2-c1-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625cqw;
  height: 100%;
  padding: 2.083cqw 2.083cqw 0;
  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(22, 14, 7, 0.7) 0%,
    rgba(22, 14, 7, 0.5) 40%,
    rgba(22, 14, 7, 0) 80%
  );
}
.h2-c1-title strong {
  font-family: "Buri", serif;
  font-weight: 700;
  font-size: 1.667cqw;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

/* --- Banner-01 (글로벌 장 프로젝트) --- */
.h2-jang {
  position: relative;
  display: flex;
  align-items: center;
  height: 5.104cqw;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
}
.h2-jang-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3.125cqw;
  padding: 0 2.083cqw;
}
.h2-jang-sub {
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
  color: #aea59a;
  font-size: 0.938cqw;
  line-height: 1.6;
}
.h2-jang-title {
  display: flex;
  align-items: center;
  gap: 0.625cqw;
  font-family: "Buri", serif;
  font-weight: 700;
  font-size: 1.458cqw;
  letter-spacing: -0.03em;
  color: #333;
}
.h2-jang-arrow {
  width: 1.25cqw;
  height: 1.25cqw;
}
.h2-jang-en {
  position: absolute;
  left: 59.8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #ca9f70;
  font-family: "DX타자", "Courier New", monospace;
  font-weight: 700;
  font-size: 1.42cqw;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.h2-jang-spoon {
  position: absolute;
  right: -0.677cqw;
  top: 1.146cqw;
  height: 4.688cqw;
  z-index: 1;
}

/* --- Cards-02 (브랜드 카드) --- */
.h2-cards2 {
  display: flex;
}
.h2-c2 {
  position: relative;
  flex: 1 1 0;
  height: 35.52cqw;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.h2-c2-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.h2-c2-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625cqw;
  padding: 2.5cqw 2.5cqw 3.125cqw;
  width: 100%;
}
.h2-c2 .h2-caption {
  color: #ad6e0f;
}
.h2-c2-title strong {
  font-family: "Buri", serif;
  font-weight: 700;
  font-size: 2.292cqw;
  line-height: 1.4;
  letter-spacing: -0.03em;
}
.h2-c2-desc {
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
  font-size: 0.938cqw;
  line-height: 1.6;
  font-weight: 500;
}
.h2-c2-yondu .h2-c2-title {
  background: linear-gradient(
    180deg,
    #faeedc 0%,
    rgba(250, 238, 220, 0.74) 56%,
    rgba(250, 238, 220, 0) 100%
  );
}
.h2-c2-yondu strong {
  color: #333;
}
.h2-c2-yondu .h2-c2-desc {
  color: #303728;
}
.h2-c2-jangryu .h2-c2-title {
  background: linear-gradient(
    180deg,
    rgba(244, 236, 223, 0.3) 50%,
    rgba(244, 236, 223, 0) 100%
  );
}
.h2-c2-jangryu strong,
.h2-c2-jangryu .h2-c2-desc {
  color: #523220;
}
.h2-c2-tiasia strong,
.h2-c2-tiasia .h2-c2-desc {
  color: #5d381d;
}

/* --- Banner-02 (새미네마켓) --- */
.h2-market {
  position: relative;
  display: flex;
  height: 15cqw;
  overflow: hidden;
  background: linear-gradient(90deg, #f4f0ea 0%, #ffeed4 100%);
}
.h2-market-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25cqw;
  height: 100%;
  padding: 2.5cqw;
  background: linear-gradient(90deg, #f4f0ea 50%, rgba(244, 240, 234, 0) 100%);
}
.h2-market-caption {
  color: #8a6a3e;
}
.h2-market-title {
  font-family: "Buri", serif;
  font-weight: 700;
  font-size: 1.667cqw;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #333;
}
.h2-market-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.417cqw;
  padding: 0.365cqw 1.042cqw;
  border-radius: 3px;
  background: #ed1c24;
  color: #fff;
  font-family: "NotoSansCJKkr", "NotoSans", sans-serif;
  /* 웹(데스크톱) 버튼 글자 고정 15px — cqw(해상도 비례) 대신 고정, line-height도 함께 고정해 세로 잘림 방지 */
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}
.h2-market-btn:hover {
  background: #d4141c;
}
.h2-market-btn img {
  width: 1.042cqw;
  height: 1.042cqw;
}
.h2-market-graphic {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.h2-market-graphic picture {
  display: block;
  width: 100%;
  height: 100%;
}
.h2-market-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- 모바일 (m: 8050:5013) --- */
@media (max-width: 768px) {
  .h2-kv-img {
    aspect-ratio: 375 / 562;
  }
  .h2-kv-scroll {
    left: 20px;
    gap: 6px;
    font-size: 11px;
  }
  .h2-kv-scroll-line {
    height: 36px;
  }

  .h2-caption {
    font-size: 15px;
  }

  .h2-cards1 {
    flex-direction: column;
  }
  .h2-c1 {
    flex: 0 0 auto;
    height: 200px;
  }
  .h2-c1-title {
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: linear-gradient(
      90deg,
      rgba(22, 14, 7, 0.7) 0%,
      rgba(22, 14, 7, 0.4) 40%,
      rgba(22, 14, 7, 0) 70%
    );
  }
  .h2-c1-title strong {
    font-size: 24px;
  }

  .h2-jang {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .h2-jang-copy {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2px;
    padding: 28px 20px 0;
  }
  .h2-jang-sub {
    font-size: 15px;
  }
  .h2-jang-title {
    gap: 8px;
    font-size: 22px;
  }
  .h2-jang-arrow {
    width: 20px;
    height: 20px;
  }
  .h2-jang-en {
    position: static;
    transform: none;
    display: block;
    padding: 8px 20px 0;
    font-size: 18px;
    text-align: left;
  }
  .h2-jang-spoon {
    position: static;
    align-self: flex-start;
    width: 98%;
    max-width: none;
    height: auto;
    margin: 14px -10px -10px auto;
  }

  .h2-cards2 {
    flex-direction: column;
  }
  .h2-c2 {
    flex: 0 0 auto;
    height: 480px;
  }
  .h2-c2-title {
    gap: 8px;
    padding: 32px 20px;
  }
  .h2-c2-title strong {
    font-size: 32px;
  }
  .h2-c2-desc {
    font-size: 15px;
  }

  .h2-market {
    flex-direction: column;
    height: auto;
  }
  .h2-market-copy {
    gap: 16px;
    padding: 32px 20px 16px;
    background: linear-gradient(
      180deg,
      #f4f0ea 50%,
      rgba(244, 240, 234, 0) 100%
    );
  }
  .h2-market-title {
    font-size: 24px;
  }
  .h2-market-btn {
    gap: 8px;
    padding: 7px 20px;
    font-size: 15px;
    line-height: 20px;
  }
  .h2-market-btn img {
    width: 20px;
    height: 20px;
  }
  .h2-market-graphic {
    position: relative;
    inset: auto;
    height: 220px;
  }
}

/* 트위터(옛 새 로고) → X 로고 전역 교체.
   fontello 글리프(.icon-twitter:before content '\e839') 대신 X SVG 마스크로 렌더.
   style3.css 가 style2.css(@import) 보다 뒤에 로드되어 같은 특이도로 오버라이드됨.
   색상은 currentColor 상속 → 기존 아이콘 색을 그대로 따라감. icon-twitter 쓰는 모든 위치 자동 적용. */
.icon-twitter:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ── 집밥 문화 재구성: 중앙 헤더 + 가로 흐름 아치 스트립 (Figma 8880-4822) ── */
.semie-culture {
  overflow: hidden;
}
.semie-culture-head {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  word-break: keep-all;
}
.semie-culture-head .semie-culture-icon {
  display: inline-block;
  width: 5.6rem;
}
.semie-culture-head .semie-title-svg {
  margin: 0 auto;
}
.semie-culture-head .semie-culture-desc {
  margin-top: 1.6rem;
}
/* 하단 사진: 가로 무한 흐름(마퀴) */
.semie-culture-flow {
  margin-top: 4rem;
  overflow: hidden;
}
.semie-flow-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0.8rem 0 2rem;
  list-style: none;
  animation: semie-flow 45s linear infinite;
}
.semie-culture-flow:hover .semie-flow-track {
  /* animation-play-state: paused; */
}
@keyframes semie-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .semie-flow-track {
    animation: none;
  }
}
.semie-flow-track .item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0.8rem;
}
.semie-flow-track .ph {
  display: block;
  position: relative;
  width: clamp(16rem, 42vw, 20rem);
  aspect-ratio: 380 / 480;
}
.semie-flow-track .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0.6rem 1.2rem rgba(63, 62, 59, 0.18);
}
.semie-flow-track .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url(/static/images/business/semie/mask_semie_oval.svg);
  mask-image: url(/static/images/business/semie/mask_semie_oval.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 64em) {
  .semie-culture-head {
    max-width: 90rem;
  }
  .semie-culture-head .semie-culture-icon {
    width: 8rem;
  }
  .semie-culture-flow {
    margin-top: 6rem;
  }
  .semie-flow-track .item {
    padding: 0 1.2rem;
  }
  .semie-flow-track .ph {
    width: clamp(24rem, 24vw, 34rem);
  }
}

/* 집밥 문화 마퀴 — 모바일(폰)은 사진 크게 (Figma 8880-6355: 375 기준 238px ≈ 63.5vw) */
@media (max-width: 47.99em) {
  .semie-culture-head .semie-culture-icon {
    width: 6.4rem;
  }
  .semie-flow-track .item {
    padding: 0 0.6rem;
  }
  .semie-flow-track .ph {
    width: 63.5vw;
  }
}

/* 오픈 예정 안내 모달 (semie.js 가 body 에 주입) ─────────────────────────
   아직 열리지 않은 서비스로 이동시키는 대신 문구만 알린다. */
.semie-notice {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.semie-notice[hidden] {
  display: none;
}
.semie-notice.is-on {
  opacity: 1;
}
.semie-notice-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.semie-notice-box {
  position: relative;
  width: 100%;
  max-width: 42rem;
  padding: 4.8rem 3rem 3.2rem;
  border-radius: 1.6rem;
  background: #fff;
  text-align: center;
  transform: translateY(1.2rem);
  transition: transform 0.2s ease;
}
.semie-notice.is-on .semie-notice-box {
  transform: translateY(0);
}
.semie-notice-msg {
  margin-bottom: 2.8rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #1b1c1e;
}
.semie-notice-ok {
  min-width: 12rem;
  height: 4.8rem;
  padding: 0 2.4rem;
  border: 0;
  border-radius: 2.4rem;
  background: #1b1c1e;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.semie-notice-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 4rem;
  height: 4rem;
  border: 0;
  background: none;
  cursor: pointer;
}
/* X 아이콘 — 이미지 없이 의사요소 두 줄로 */
.semie-notice-close::before,
.semie-notice-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 0.15rem;
  background: #1b1c1e;
}
.semie-notice-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.semie-notice-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 태블릿(48~64em): /semie 는 .semie-hero-inner 의 padding-top 5rem 만으로 타이틀이
   50px 에 오는데, cook 은 inner padding 3rem + 타이틀 margin 5rem = 80px 라 30px 낮았다.
   합이 5rem 이 되도록 타이틀 마진만 줄인다(모바일·데스크톱 값은 그대로). */
@media (min-width: 48em) and (max-width: 63.99em) {
  .cook-hero-title {
    margin-top: 2rem;
  }
}