@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:con01 */
.con01_iner {
  padding-top: calc(var(--px)*92);
}

.con01__title {
  margin-top: calc(var(--px)*16);
}

.con01__desc {
  margin-top: calc(var(--px)*30);
}

.con01__note {
  margin-top: calc(var(--px)*28);
}

.con01__rolls {
  align-self: stretch;
  gap: calc(var(--px)*61.5);
  margin-top: calc(var(--px)*68);
}

.con01__rolls > li {
  flex-shrink: 0;
}

.con01__roll-crab,
.con01__roll-truffle {
  margin-top: calc(var(--px)*3);
}

.con01__roll-salmon {
  margin-top: calc(var(--px)*4);
}

.con01__roll-chicken,
.con01__roll-basic,
.con01__roll-cheese {
  margin-top: calc(var(--px)*5);
}

.con01__roll-eel,
.con01__roll-kimchi-tuna,
.con01__roll-tuna {
  margin-top: calc(var(--px)*6);
}

.con01__slogan {
  gap: calc(var(--px)*14);
  margin-top: calc(var(--px)*66);
}

.con01__slogan-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #009e5a;
}

.con01__summary {
  align-self: stretch;
  margin-top: calc(var(--px)*61);
  padding-bottom: calc(var(--px)*141);
}

/* 스탯 원 가로 중심선에서 섹션 끝까지 — 애니 phase 상승 모션 대상 */
.con01__plate {
  top: calc(var(--px)*187);
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #009e5a;
}

.con01__stat {
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--px)*30) rgba(0, 0, 0, 0.16);
}

.con01__stat--featured {
  /* HEIGHT: 원형 도형 지름 고정 */
  width: calc(var(--px)*370);
  height: calc(var(--px)*370);
  background-color: #fff8dd;
}

.con01__stat-body {
  /* HEIGHT: 원형 도형 지름 고정 */
  width: calc(var(--px)*274);
  height: calc(var(--px)*274);
  padding-top: calc(var(--px)*68);
  border-radius: 50%;
  background-color: #fff;
}

.con01__stat-value {
  align-items: baseline;
}

.con01__stat-desc {
  margin-top: calc(var(--px)*12);
}

.con01__stat-title {
  margin-top: calc(var(--px)*12);
}

.con01__stat:first-child {
  .con01__stat-desc {
    margin-top: calc(var(--px)*16);
  }

  .con01__stat-title {
    margin-top: calc(var(--px)*11);
  }
}

.con01__brand-link {
  gap: calc(var(--px)*20);
  margin-top: calc(var(--px)*12);
  padding: calc(var(--px)*12) calc(var(--px)*26) calc(var(--px)*12) calc(var(--px)*39);
  border-radius: calc(var(--px)*33);
  background-color: #fff;
  box-shadow: 0 0 calc(var(--px)*20) rgba(0, 0, 0, 0.09);
}

.con01__brand-arrow {
  /* HEIGHT: 원형 도형 지름 고정 */
  width: calc(var(--px)*43);
  height: calc(var(--px)*43);
  border-radius: 50%;
  background-color: #009e5a;
}


/* IMG:AUTO con01 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con01__label {
    width: calc(var(--px)*237);
    aspect-ratio: 237 / 82;
}

.con01__roll-salmon,
.con01__roll-tuna,
.con01__roll-cheese {
    width: calc(var(--px)*158);
    aspect-ratio: 158 / 155;
}

.con01__roll-chicken {
    width: calc(var(--px)*160);
    aspect-ratio: 160 / 156;
}

.con01__roll-eel {
    width: calc(var(--px)*159);
    aspect-ratio: 159 / 156;
}

.con01__roll-kimchi-tuna,
.con01__roll-crab {
    width: calc(var(--px)*160);
    aspect-ratio: 160 / 155;
}

.con01__roll-fishcake {
    width: calc(var(--px)*160);
    aspect-ratio: 160 / 159;
}

.con01__roll-basic {
    width: calc(var(--px)*156);
    aspect-ratio: 156 / 156;
}

.con01__roll-truffle {
    width: calc(var(--px)*157);
    aspect-ratio: 157 / 158;
}
/* /IMG:AUTO con01 END */

/* FONT:AUTO con01 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con01__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleXL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.27;
    text-align: center;
    color: #101111;
}

.con01__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.56;
    text-align: center;
    color: #101111;
}

.con01__note {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-align: center;
    color: #101111;
}

.con01__note-accent {
    color: #009e5a;
}

.con01__slogan {
    font-family: var(--font-poppins);
    font-size: var(--displayM);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.01;
    text-align: center;
    color: #009e5a;
}

.con01__summary {
    line-height: 1.2;
}

.con01__stats {
    text-align: center;
}

.con01__stat-value {
    font-family: var(--font-poppins);
}

.con01__stat-number {
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.06em;
    color: #ff6a39;
}

.con01__stat-unit {
    font-size: var(--titleXL);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #d7cac5;
}

.con01__stat-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #101111;
}

.con01__stat-title {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #101111;
}

.con01__stat-million {
    font-size: var(--titleL);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #d7cac5;
}

.con01__stat-strong {
    font-weight: 800;
}

.con01__brand-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: center;
    color: #101111;
}

.con01__brand-arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}
/* /FONT:AUTO con01 END */

@media (max-width:599px) {
  .con01_iner {
    padding-top: 10.6667vw;
  }

  .con01__label {
    width: 42.6667vw;
  }

  .con01__title,
  .con01__desc,
  .con01__note {
    padding-right: 5.3333vw;
    padding-left: 5.3333vw;
  }

  .con01__title {
    margin-top: 2.1333vw;
  }

  .con01__desc {
    margin-top: 4.2667vw;
  }

  .con01__note {
    margin-top: 4.2667vw;
  }

  .con01__rolls {
    gap: 4.2667vw;
    margin-top: 10.6667vw;
  }

  .con01__rolls > li {
    width: 21.3333vw;
    margin-top: 0;
  }

  .con01__slogan {
    gap: 2.1333vw;
    margin-top: 10.6667vw;
    font-size: var(--titleXL);
  }

  .con01__summary {
    margin-top: 10.6667vw;
    padding-bottom: 10.6667vw;
  }

  .con01__plate {
    top: 86.6667vw;
  }

  .con01__stats {
    flex-direction: column;
  }

  .con01__stat {
    box-shadow: 0 0 5.3333vw rgba(0, 0, 0, 0.16);
  }

  .con01__stat + .con01__stat {
    margin-top: -14.0667vw;
  }

  .con01__stat--featured {
    /* 겹침 스택 — positioned 라 static 형제 위로 올라온다(시안: 크림 원이 양옆 흰 원을 덮음) */
    position: relative;
    z-index: 1; /* GSAP from 이 형제 stat 에 transform 을 걸어 스택 컨텍스트를 만듦 — clearProps 로 풀리는 순간 순서가 뒤집힌다 */
    /* HEIGHT: 원형 도형 지름 고정 */
    width: 82.9333vw;
    height: 82.9333vw;
  }

  .con01__stat-body {
    /* HEIGHT: 원형 도형 지름 고정 */
    width: 61.3333vw;
    height: 61.3333vw;
    padding-top: 12.8vw;
  }

  .con01__stat-desc {
    margin-top: 2.1333vw;
  }

  .con01__stat-title {
    margin-top: 1.6vw;
  }

  .con01__stat:first-child {
    .con01__stat-desc {
      margin-top: 2.6667vw;
    }

    .con01__stat-title {
      margin-top: 1.6vw;
    }
  }

  .con01__brand-link {
    gap: 3.2vw;
    margin-top: 4.2667vw;
    padding: 2.1333vw 4.2667vw 2.1333vw 6.4vw;
    border-radius: 50vw;
    box-shadow: 0 0 3.2vw rgba(0, 0, 0, 0.09);
  }

  .con01__brand-arrow {
    /* HEIGHT: 원형 도형 지름 고정 */
    width: 10.6667vw;
    height: 10.6667vw;
  }
}

/* /merge-build:con01 */
/* merge-build:con02 */
.con02__photo {
  object-position: 50% calc(var(--px)*-1344);
}

.con02__content {
  padding: calc(var(--px)*217) 0 calc(var(--px)*189) calc(var(--px)*330);
}

.con02__eyebrow {
  margin-left: calc(var(--px)*5);
}

.con02__title {
  margin-top: calc(var(--px)*34);
}

.con02__desc {
  margin-top: calc(var(--px)*32);
}

.con02__menu-link {
  gap: calc(var(--px)*21);
  margin-top: calc(var(--px)*52);
  margin-left: calc(var(--px)*-5);
  padding: calc(var(--px)*11) calc(var(--px)*24) calc(var(--px)*11) calc(var(--px)*37);
  border: 1px solid #eaf1ee;
  border-radius: calc(var(--px)*33);
  background: #fff;
}

.con02__menu-circle {
  width: calc(var(--px)*43);
  padding-block: calc(var(--px)*12.5);
  border-radius: 50%;
  background: #009e5a;
}

/* IMG:AUTO con02 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con02__menu-arrow {
    width: calc(var(--px)*21);
    aspect-ratio: 21 / 18;
}
/* /IMG:AUTO con02 END */

/* FONT:AUTO con02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con02__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR psd:4.97 */
    color: #fdd252;
}

.con02__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.3;
    color: #ffffff;
}

.con02__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.47;
    color: #ffffff;
}

.con02__menu-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-align: right;
    color: #101111;
}
/* /FONT:AUTO con02 END */

@media (max-width: 599px) {
  .con02__photo {
    object-position: 50% 100%;
  }

  .con02__dim {
    object-position: 0% 50%;
  }

  .con02__content {
    align-items: center;
    padding: 10.6667vw 5.3333vw 10.6667vw;
  }

  .con02__eyebrow {
    margin-left: 0;
  }

  .con02__title {
    margin-top: 5.3333vw;
  }

  .con02__desc {
    margin-top: 5.3333vw;
  }

  .con02__menu-link {
    gap: 3.2vw;
    margin-top: 8.5333vw;
    margin-left: 0;
    padding: 2.1333vw 2.1333vw 2.1333vw 4.2667vw;
    border-radius: 50vw;
  }

  .con02__menu-circle {
    width: 8.5333vw;
    padding-block: 2.4381vw;
  }

  .con02__menu-arrow {
    width: 4.2667vw;
  }
}

/* /merge-build:con02 */
/* merge-build:con03 */
/* con03 — 모바일: 두 열 display:contents 로 풀고 order 로 헤드→저당→저탄수→고단백 1열 */
.con03 {
  background: #fff;
}

.con03_iner {
  gap: calc(var(--px)*14);
  padding: calc(var(--px)*163) 0 calc(var(--px)*141);
}

.con03__title {
  margin-top: calc(var(--px)*35);
}

.con03__cta {
  gap: calc(var(--px)*21);
  margin-top: calc(var(--px)*32);
  padding: calc(var(--px)*12) calc(var(--px)*26) calc(var(--px)*12) calc(var(--px)*38);
  border-radius: 50vw;
  background: #fff;
  box-shadow: 0 0 20px rgb(0 0 0 / 0.09);
}

.con03__cta-arrow {
  width: calc(var(--px)*43);
  aspect-ratio: 1;
  padding-block: 0;
  border-radius: 50%;
  background: #009e5a;
}

.con03__card img {
  transition: transform .35s ease-out;
}

@media (hover: hover) {
  .con03__card:hover img {
    transform: scale(1.04);
  }
}

.con03__col--left .con03__card {
  margin-top: calc(var(--px)*61);
}

.con03__col--right {
  gap: calc(var(--px)*15);
  padding-top: calc(var(--px)*61);
}

.con03__card {
  width: calc(var(--px)*613);
  height: calc(var(--px)*360); /* HEIGHT: 카드 판 — 사진이 absol 이라 흐름 높이가 판 높이를 못 만듦 */
  border-radius: calc(var(--px)*40);
  background-color: #fff8dd;
  overflow: hidden;
}

.con03__card-img--sugar {
  top: calc(var(--px)*48);
  right: calc(var(--px)*-108);
}

.con03__card-img--carb {
  top: calc(var(--px)*74);
  right: calc(var(--px)*-223);
}

.con03__card-img--protein {
  right: calc(var(--px)*-199);
  bottom: calc(var(--px)*-10);
}

.con03__card-body {
  padding-top: calc(var(--px)*62);
  padding-left: calc(var(--px)*64);
}

.con03__card-title {
  margin-left: calc(var(--px)*6);
}

.con03__card-badge {
  margin-top: calc(var(--px)*6);
  padding: 0 calc(var(--px)*14);
  border: 2px solid #f26a40;
  border-radius: 50vw;
}

.con03__card-desc {
  margin-top: calc(var(--px)*20);
  margin-left: calc(var(--px)*6);
}

.con03__card--carb .con03__card-badge {
  margin-top: calc(var(--px)*8);
  margin-left: calc(var(--px)*-2);
}

.con03__card--carb .con03__card-desc {
  margin-top: calc(var(--px)*18);
}

/* IMG:AUTO con03 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con03__card-img--carb {
    width: calc(var(--px)*590);
    aspect-ratio: 590 / 389;
}

.con03__card-img--sugar {
    width: calc(var(--px)*459);
    aspect-ratio: 459 / 381;
}

.con03__card-img--protein {
    width: calc(var(--px)*544);
    aspect-ratio: 544 / 325;
}
/* /IMG:AUTO con03 END */

/* FONT:AUTO con03 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con03__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR */
    color: #009e5a;
}

.con03__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.28;  /* OVR */
    color: #101111;
}

.con03__cta {
    line-height: 1.2;
}

.con03__cta-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: right;
    color: #101111;
}

.con03__cta-arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.con03__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
    color: #101111;
}

.con03__card-badge {
    font-family: var(--font-poppins);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.55;  /* OVR */
    color: #f26a40;
}

.con03__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.35;
    color: #101111;
}
/* /FONT:AUTO con03 END */

@media (max-width:599px) {
  .con03_iner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 10.6667vw 5.3333vw 10.6667vw;
  }

  .con03__col--left,
  .con03__col--right {
    display: contents;
  }

  .con03__col--right {
    gap: 0;
    padding-top: 0;
  }

  .con03__eyebrow { order: 1; }
  .con03__card--carb { order: 5; }
  .con03__card--protein { order: 6; }

  .con03__title {
    order: 2;
    margin-top: 3.2vw;
  }

  .con03__cta {
    order: 3;
    gap: 3.2vw;
    margin-top: 4.2667vw;
    padding: 2.1333vw 4.2667vw 2.1333vw 6.4vw;
    box-shadow: 0 0 3.2vw rgb(0 0 0 / 0.09);
  }

  .con03__cta-arrow {
    /* HEIGHT: 원형 도형 지름 고정 */
    width: 10.6667vw;
    height: 10.6667vw;
  }

  .con03__card,
  .con03__col--left .con03__card {
    width: 88vw;
    height: auto;
    margin-top: 3.2vw;
    border-radius: 6.4vw;
  }

  .con03__card--sugar {
    order: 4;
    margin-top: 6.4vw;
  }

  .con03__card-body {
    padding: 8.5333vw 34.1333vw 8.5333vw 10.6667vw;
  }

  .con03__card-img--sugar {
    top: 6.4vw;
    right: -8vw;
    width: 40vw;
  }

  .con03__card-img--carb {
    top: 6.4vw;
    right: -20vw;
    width: 52vw;
  }

  .con03__card-img--protein {
    right: -18vw;
    bottom: -2.1333vw;
    width: 50vw;
  }

  .con03__card-title {
    margin-left: 0;
  }

  .con03__card-badge {
    margin-top: 1.0667vw;
    padding: 0 2.1333vw;
  }

  .con03__card-desc {
    margin-top: 3.2vw;
    margin-left: 0;
  }

  .con03__card--carb .con03__card-badge {
    margin-top: 1.0667vw;
    margin-left: 0;
  }

  .con03__card--carb .con03__card-desc {
    margin-top: 3.2vw;
  }
}

/* /merge-build:con03 */
/* merge-build:con04 */
/* con04 — 모바일: 카드 트랙 flex-direction:column 1열, 카드 폭 축소 시 사진은 판 변 앵커 유지 */
.con04 {
  background-color: #009e5a;
  background-image:
    linear-gradient(90deg, #1cba76 1px, transparent 1px),
    linear-gradient(#1cba76 1px, transparent 1px);
  background-repeat: repeat;
  background-size: calc(var(--px)*80) calc(var(--px)*80);
  background-position: calc(var(--px)*26) calc(var(--px)*15);
}

.con04__leaf {
  top: 0;
  right: calc(var(--px)*4);
}

.con04__shade {
  right: calc(var(--px)*-7);
  bottom: 0;
}

.con04__wave {
  top: 0;
  left: calc(var(--px)*-7);
}

.con04__wave-track {
  width: 400%;
  animation: v-marquee-half 30s infinite linear; /* 키프레임은 vweb-anim.css 재사용 — 클래스 부착 시 main/index.html 의 vweb-anim 재로드가 주기를 덮음 */
}

/* 원본이 그대로 타일링된다 — 양끝 높이 82.4/82.56, 기울기 둘 다 -0.15/px. 좌우 반전을 끼우면 기울기 부호가 뒤집혀 이음매가 꼭짓점이 된다 */
.con04__wave-img {
  flex-shrink: 0;
  width: 25%;
}

@media (prefers-reduced-motion: reduce) {
  .con04__wave-track {
    animation: none;
  }
}

.con04_iner {
  padding: calc(var(--px)*207) 0 calc(var(--px)*114);
}

.con04__title {
  margin-left: calc(var(--px)*206);
}

.con04__cards {
  gap: calc(var(--px)*15);
  margin-top: calc(var(--px)*70);
  padding-left: calc(var(--px)*331);
}

.con04__card {
  flex-shrink: 0;
  width: calc(var(--px)*851);
  height: calc(var(--px)*445); /* HEIGHT: 카드 판 — 사진이 absol 이라 흐름 높이가 판 높이를 못 만듦 */
  border-radius: calc(var(--px)*40);
  overflow: hidden;
}

.con04__card--taste {
  background-color: #ffffff;
}

.con04__card--routine {
  background-color: #fdd354;
}

.con04__card--taste .con04__card-body {
  margin-top: auto;
  margin-bottom: calc(var(--px)*81);
  padding-left: calc(var(--px)*96);
}

.con04__card--routine .con04__card-body {
  margin-top: calc(var(--px)*81);
  padding-left: calc(var(--px)*92);
}

.con04__card-desc {
  margin-top: calc(var(--px)*23);
}

.con04__card-img--taste {
  top: calc(var(--px)*-133);
  right: calc(var(--px)*-109);
}

.con04__card-img--routine {
  right: calc(var(--px)*24);
  bottom: calc(var(--px)*-133);
}

/* IMG:AUTO con04 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con04__leaf {
    width: calc(var(--px)*836);
    aspect-ratio: 836 / 673;
}

.con04__shade {
    width: calc(var(--px)*1920);
    aspect-ratio: 1920 / 399;
}

.con04__wave {
    width: calc(var(--px)*1920);
    aspect-ratio: 1920 / 102;
}

.con04__card-img--taste {
    width: calc(var(--px)*501);
    aspect-ratio: 501 / 356;
}

.con04__card-img--routine {
    width: calc(var(--px)*590);
    aspect-ratio: 590 / 352;
}
/* /IMG:AUTO con04 END */

/* FONT:AUTO con04 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con04__title {
    font-family: var(--font-poppins);
    font-size: var(--displayXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: #ffffff;
}

.con04__cards {
    font-family: var(--font-pretendard);
    color: #101111;
}

.con04__card-title {
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.033em;  /* OVR psd:-0.04em */
    line-height: 1.2;
}

.con04__card-desc {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.032em;  /* OVR psd:-0.04em */
    line-height: 1.47;
}
/* /FONT:AUTO con04 END */

@media (max-width: 599px) {
  .con04 {
    background-size: 12.8vw 12.8vw;
    background-position: 4.2667vw 2.1333vw;
  }

  .con04__leaf {
    width: 43.8845vw; /* PC 836/1905=43.9% 비율 유지 */
    right: 0.5333vw;
  }

  .con04__shade {
    width: 100%;
    right: 0;
  }

  .con04__wave {
    width: 100%;
    left: 0;
  }

  .con04_iner {
    padding: 10.6667vw 0 10.6667vw;
  }

  .con04__title {
    margin-left: 0;
    padding-inline: 5.3333vw;
    font-size: 11.9014vw; /* --displayXL 모바일값 28.8vw 가 PC 90px 보다 커서 "Balanced Life." 가 375 폭을 넘김 — 가용폭 335px 상한 48.51px 의 92% */
  }

  .con04__cards {
    flex-direction: column;
    gap: 4.2667vw;
    margin-top: 10.6667vw;
    padding-left: 5.3333vw;
    padding-right: 5.3333vw;
  }

  .con04__card {
    width: 100%;
    height: auto; /* 사진 밴드는 카드 padding 이 확보 */
    border-radius: 4.2667vw; /* 0.16vw 환산(6.4px)은 판이 각져 보여 카드 비례축 16px 채택 */
  }

  .con04__card--taste {
    padding-top: 23.4093vw; /* 사진이 absol 이라 보이는 높이 (356-133)×k 만큼 자리 확보 */
  }

  .con04__card--routine {
    padding-bottom: 22.9894vw; /* 사진 보이는 높이 (352-133)×k */
  }

  .con04__card--taste .con04__card-body,
  .con04__card--routine .con04__card-body {
    align-items: center;
    margin-top: 6.4vw;
    margin-bottom: 6.4vw;
    padding-left: 6.4vw;
    padding-right: 6.4vw;
  }

  .con04__card-desc {
    margin-top: 3.2vw;
  }

  .con04__card-img--taste {
    width: 52.5922vw; /* k = 335/851 = 0.39365 */
    top: -13.9616vw;
    right: -11.4422vw;
  }

  .con04__card-img--routine {
    width: 61.9350vw;
    right: 2.5194vw;
    bottom: -13.9616vw;
  }
}

/* /merge-build:con04 */
/* merge-build:con05 */
/* con05 — 모바일: 탭 가로 유지 · 좌우 화살표 숨김 후보 · 슬라이더 폭 풀폭 + slidesPerView 축소 */
.con05 {
  background-color: #ffffff;
}

.con05_iner {
  padding: calc(var(--px)*167) 0 calc(var(--px)*116);
}

.con05__title {
  margin-top: calc(var(--px)*20);
}

.con05__tabs {
  gap: calc(var(--px)*108);
  margin-top: calc(var(--px)*49);
}

.con05__tab {
  padding-bottom: calc(var(--px)*4);
  border-bottom: calc(var(--px)*5) solid transparent;
  cursor: pointer;
  transition: color .3s ease-out, border-bottom-color .3s ease-out;
}

/* 탭 글자색 = 런타임 활성 상태 소유 (FONT:AUTO 의 탭별 색은 NOTICE 활성 정지 컷) */
.con05__tabs .con05__tab:not(.is-active) {
  color: #a5bdb3;
}

.con05__tabs .con05__tab.is-active {
  border-bottom-color: #009e5a;
  color: #101111;
}

.con05__board {
  gap: calc(var(--px)*37);
  margin-top: calc(var(--px)*41);
}

.con05__nav,
.con05__more-arrow {
  flex-shrink: 0;
  width: calc(var(--px)*43);
  height: calc(var(--px)*43); /* HEIGHT: 원형 아이콘 버튼 — 지름 고정 */
  border-radius: 50%;
}

.con05__nav {
  margin-top: calc(var(--px)*109);
  background-color: #c6c6c6;
  cursor: pointer;
  transition: background-color .25s ease-out;
}

.con05__nav--prev .con05__nav-arrow {
  transform: scaleX(-1);
}

.con05__panels {
  width: calc(var(--px)*1242);
}

/* 탭 = 런타임 상태 토글 */
.con05__panel:not(.is-active) {
  display: none;
}

.con05__card {
  align-items: center;
  text-align: center;
}

.con05__card-thumb {
  align-self: stretch;
  height: calc(var(--px)*260); /* HEIGHT: 게시판 썸네일 슬롯 — 폭은 슬라이드가 소유 */
  overflow: hidden;
  background-color: #bfd1c9;
  transition: filter .35s ease-out;
}

.con05__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con05__card-title {
  margin-top: calc(var(--px)*13);
  transition: color .25s ease-out;
}

.con05__more {
  gap: calc(var(--px)*24);
  margin-top: calc(var(--px)*61);
  padding: calc(var(--px)*12) calc(var(--px)*27) calc(var(--px)*12) calc(var(--px)*40);
  border-radius: calc(var(--px)*33);
  background-color: #ffffff;
  box-shadow: 0 0 calc(var(--px)*10) rgba(0, 0, 0, 0.09);
}

.con05__more-arrow {
  background-color: #009e5a;
}

.con05__nav:focus-visible {
  background-color: #009e5a;
}

.con05__card:focus-visible .con05__card-thumb {
  filter: brightness(.92);
}

.con05__card:focus-visible .con05__card-title {
  color: #009e5a;
}

@media (hover: hover) {
  .con05__tabs .con05__tab.con05__tab:not(.is-active):hover {
    color: #101111;
  }

  .con05__nav:hover {
    background-color: #009e5a;
  }

  .con05__card:hover .con05__card-thumb {
    filter: brightness(.92);
  }

  .con05__card:hover .con05__card-title {
    color: #009e5a;
  }
}

/* FONT:AUTO con05 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con05__head {
    text-align: center;
}

.con05__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR psd:4.97 */
    color: #009e5a;
}

.con05__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.38;
    color: #101111;
}

.con05__tabs {
    font-size: var(--headS);
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR psd:7.77 */
    text-align: right;
}

.con05__tab.con05__tab--notice {
    font-family: var(--font-poppins);
    font-weight: 800;
    color: #101111;
}

.con05__tab.con05__tab--media {
    font-family: var(--font-poppins);
    font-weight: 800;
    color: #a5bdb3;
}

.con05__tab.con05__tab--press {
    font-family: var(--font-pretendard);
    font-weight: 900;
    color: #a5bdb3;
}

.con05__nav-arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
}

.con05__panels {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.75;
    color: #101111;
}

.con05__more {
    line-height: 1.2;
}

.con05__more-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: right;
    color: #101111;
}

.con05__more-arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}
/* /FONT:AUTO con05 END */

@media (max-width: 599px) {
  .con05_iner {
    padding: 10.6667vw 5.3333vw 10.6667vw;
  }

  .con05__title {
    margin-top: 3.2vw;
  }

  .con05__tabs {
    gap: 10.6667vw;
    margin-top: 8.5333vw;
  }

  .con05__tab {
    padding-bottom: 0.5333vw;
    border-bottom-width: 1.0667vw;
  }

  .con05__board {
    align-self: stretch;
    margin-top: 6.4vw;
    margin-inline: -5.3333vw;
  }

  .con05__panels {
    width: 100%;
    min-width: 0;
  }

  .con05__card-thumb {
    height: auto;
    aspect-ratio: 404 / 260;
  }

  .con05__card-title {
    margin-top: 2.1333vw;
  }

  .con05__more {
    gap: 4.2667vw;
    margin-top: 10.6667vw;
    padding: 2.1333vw 4.2667vw 2.1333vw 6.4vw;
    border-radius: 50vw;
    box-shadow: 0 0 1.6vw rgba(0, 0, 0, 0.09);
  }

  .con05__more-arrow {
    width: 8.5333vw;
    height: 8.5333vw; /* HEIGHT: 원형 아이콘 버튼 — 지름 고정 */
  }
}

/* /merge-build:con05 */
/* merge-build:con06 */
.con06__panel {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.con06__panel-body {
  padding-top: calc(var(--px)*221);
  padding-bottom: calc(var(--px)*238);
}

.con06__panel--global .con06__panel-body {
  padding-left: calc(var(--px)*206);
}

.con06__panel--platform .con06__panel-body {
  padding-left: calc(var(--px)*186);
}

.con06__panel--platform .con06__link {
  padding-left: calc(var(--px)*43);
}

.con06__global-title,
.con06__platform-title {
  margin-top: calc(var(--px)*38);
}

.con06__global-desc,
.con06__platform-desc {
  margin-top: calc(var(--px)*26);
}

.con06__link {
  gap: calc(var(--px)*22.5);
  margin-top: calc(var(--px)*46);
  padding: calc(var(--px)*11) calc(var(--px)*26) calc(var(--px)*13) calc(var(--px)*39);
  border-radius: calc(var(--px)*33);
  background-color: #fff;
  box-shadow: 0 0 calc(var(--px)*20) rgba(0, 0, 0, 0.09);
}

.con06__link-arrow {
  /* HEIGHT: 원형 도형 지름 고정 */
  width: calc(var(--px)*43);
  height: calc(var(--px)*43);
  border-radius: 50%;
  background-color: #009e5a;
}

/* FONT:AUTO con06 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con06__global-label {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR */
    text-align: center;
    color: #009e5a;
}

.con06__global-title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleM);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.31;
    color: #101111;
}

.con06__global-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.41;
    color: #101111;
}

.con06__link {
    line-height: 1.2;
}

.con06__link-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: right;
    color: #101111;
}

.con06__link-arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.con06__platform-label {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR */
    text-align: center;
    color: #fdd351;
}

.con06__platform-title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleM);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.31;
    color: #ffffff;
}

.con06__platform-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.41;
    color: #ffffff;
}
/* /FONT:AUTO con06 END */

@media (max-width:599px) {
  .con06_iner {
    flex-direction: column;
  }

  .con06__panel {
    flex: none;
  }

  .con06__panel-body {
    align-items: center;
    padding: 17.0667vw 8.5333vw 42.6667vw;
  }

  .con06__panel--global .con06__panel-body,
  .con06__panel--platform .con06__panel-body {
    padding-left: 8.5333vw;
  }

  .con06__panel--global .con06__panel-body {
    padding-top: 10.6667vw;
  }

  .con06__panel--platform .con06__panel-body {
    padding-bottom: 10.6667vw;
  }

  .con06__global-title,
  .con06__platform-title {
    margin-top: 6.4vw;
  }

  .con06__global-desc,
  .con06__platform-desc {
    margin-top: 4.2667vw;
  }

  .con06__link {
    gap: 3.2vw;
    margin-top: 6.4vw;
    padding: 1.6vw 4.2667vw 2.1333vw 6.4vw;
    border-radius: 50vw;
    box-shadow: 0 0 5.3333vw rgba(0, 0, 0, 0.09);
  }

  .con06__panel--platform .con06__link {
    padding-left: 6.4vw;
  }

  .con06__link-arrow {
    /* HEIGHT: 원형 도형 지름 고정 */
    width: 10.6667vw;
    height: 10.6667vw;
  }
}

/* /merge-build:con06 */
/* merge-build:con07 */
/* 모바일 인계: 카드 2+1 교차 그리드 → 1열, 가이드 배너 → column */
.con07_iner {
  padding-top: calc(var(--px)*165);
  padding-bottom: calc(var(--px)*134);
}

.con07__title {
  margin-top: calc(var(--px)*31);
}

.con07__cards {
  width: calc(var(--px)*1241);
  margin-top: calc(var(--px)*42);
}

.con07__track {
  row-gap: calc(var(--px)*10);
  width: 100%;
}

.con07__card {
  width: calc(var(--px)*372);
  min-height: calc(var(--px)*451);
  overflow: hidden;
  border: 1px solid #bfd1c9;
  border-radius: calc(var(--px)*30);
  background-color: #fff;
}

.con07__card-media {
  flex: 1 1 auto;
}

/* 비활성은 media 가 남는 높이를 먹고, 활성은 media 가 빠져 margin-top:auto 가 본문을 카드 바닥으로 보냄 */
/* 폭 전환 중 줄바꿈이 흔들리지 않게 본문은 최종 카드폭으로 먼저 고정 — 카드 overflow:hidden 이 전환 중 여분을 가림 */
.con07__card-body {
  flex-shrink: 0;
  width: calc(var(--px)*372);
  margin-top: auto;
  padding: 0 calc(var(--px)*61) calc(var(--px)*63);
}

.con07__card-korean {
  margin-top: calc(var(--px)*28);
}

.con07__card:nth-child(n+4) .con07__card-korean {
  margin-top: calc(var(--px)*19);
}

.con07__brown-rice-photo {
  margin-top: calc(var(--px)*6);
}

.con07__tteokbokki-photo {
  margin-top: calc(var(--px)*20);
}

.con07__meal-box-photo {
  margin-top: calc(var(--px)*49);
}

.con07__noodle-photo {
  margin-top: calc(var(--px)*22);
}

/* 에셋 하단이 수평으로 잘려 있어 페이드로 경계를 지움 */
.con07__keto-photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

/* 시안은 활성 상태만 있어 비활성 위치 기준이 없음 — 사진칸 세로 중앙 */
.con07__drink-photo {
  align-self: center;
}

.con07__card-line {
  display: none;
  height: 1px;
  margin-top: calc(var(--px)*30);
  background-color: rgba(16, 17, 17, 0.2);
}

.con07__card-desc {
  display: none;
  margin-top: calc(var(--px)*26);
}

.con07__card.is-active {
  width: calc(var(--px)*474);
  background-color: #009e5a;

  .con07__card-media {
    display: none;
  }

  .con07__card-body {
    width: calc(var(--px)*474);
    padding-bottom: calc(var(--px)*60);
  }

  .con07__card-korean {
    margin-top: calc(var(--px)*15);
  }

  .con07__card-line,
  .con07__card-desc {
    display: block;
  }
}

/* 활성 글자색 — FONT:AUTO 소유 color 라 중첩 대신 평면 셀렉터로 둠(css-check 허용 형태) */
.con07__card.is-active .con07__card-name,
.con07__card.is-active .con07__card-korean {
  color: #fff;
}

.con07__guide {
  width: calc(var(--px)*1241);
  margin-top: calc(var(--px)*56);
  padding: calc(var(--px)*55) calc(var(--px)*69) calc(var(--px)*48) calc(var(--px)*71);
  border-radius: calc(var(--px)*86);
  background-color: #fdfdfb;
}

.con07__guide-head {
  gap: calc(var(--px)*27);
}

.con07__guide-link {
  gap: calc(var(--px)*22);
  padding: calc(var(--px)*11) calc(var(--px)*27) calc(var(--px)*13) calc(var(--px)*41);
  border: 1px solid #eaf1ee;
  border-radius: calc(var(--px)*33);
  background-color: #fff;
}

.con07__guide-circle {
  width: calc(var(--px)*43);
  padding-block: calc(var(--px)*12.5);
  border-radius: 50%;
  background-color: #009e5a;
}

@media (min-width:600px) {
  .con07__card {
    transition: width .35s ease-out, background-color .35s ease-out;
  }

  .con07__card-name,
  .con07__card-korean {
    transition: color .35s ease-out;
  }

  .con07__card-media {
    animation: con07-media-in .4s ease-out;
  }

  .con07__card.is-active .con07__card-name,
  .con07__card.is-active .con07__card-korean {
    animation: con07-rise-sm .45s ease-out;
  }

  .con07__card.is-active .con07__card-line {
    animation: con07-rise .5s ease-out;
  }

  .con07__card.is-active .con07__card-desc {
    animation: con07-rise .5s ease-out .08s backwards;
  }
}

@keyframes con07-media-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes con07-rise-sm {
  from { opacity: 0; transform: translateY(20%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes con07-rise {
  from { opacity: 0; transform: translateY(30%); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .con07__card,
  .con07__card-name,
  .con07__card-korean,
  .con07__card-media,
  .con07__card-line,
  .con07__card-desc {
    transition: none;
    animation: none;
  }
}

/* IMG:AUTO con07 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con07__keto-photo {
    width: calc(var(--px)*356);
    aspect-ratio: 356 / 223;
}

.con07__brown-rice-photo {
    width: calc(var(--px)*298);
    aspect-ratio: 298 / 232;
}

.con07__tteokbokki-photo {
    width: calc(var(--px)*269);
    aspect-ratio: 269 / 213;
}

.con07__meal-box-photo {
    width: calc(var(--px)*299);
    aspect-ratio: 299 / 167;
}

.con07__noodle-photo {
    width: calc(var(--px)*273);
    aspect-ratio: 273 / 213;
}

.con07__drink-photo {
    width: calc(var(--px)*135);
    aspect-ratio: 135 / 182;
}

.con07__guide-icon {
    width: calc(var(--px)*69);
    aspect-ratio: 69 / 69;
}

.con07__guide-arrow {
    width: calc(var(--px)*22);
    aspect-ratio: 22 / 18;
}
/* /IMG:AUTO con07 END */

/* FONT:AUTO con07 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con07__eyebrow {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR */
    text-align: center;
    color: #009e5a;
}

.con07__title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.3;
    text-align: center;
    color: #101111;
}

.con07__card-name {
    font-family: var(--font-poppins);
    font-size: var(--titleS);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #009e5a;
}

.con07__card-korean {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
    color: #101111;
}

.con07__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.38;
    color: #ffffff;
}

.con07__guide {
    font-family: var(--font-pretendard);
    color: #101111;
}

.con07__guide-title {
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.52;
}

.con07__guide-accent {
    color: #009e5a;
}

.con07__guide-label {
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-align: right;
}
/* /FONT:AUTO con07 END */

@media (max-width:599px) {
  .con07_iner {
    padding-top: 10.6667vw;
    padding-bottom: 10.6667vw;
  }

  .con07__title {
    margin-top: 5.3333vw;
  }

  /* 모바일은 Swiper 로 전환 — 컨테이너가 뷰포트, track 이 슬라이드 레일 */
  .con07__cards {
    position: relative;
    width: 100%;
    margin-top: 6.4vw;
    overflow: hidden;
  }

  .con07__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    row-gap: 0;
  }

  .con07__dots {
    width: 88vw;
    margin-top: 5.3333vw;
    line-height: 0;
    text-align: center;
  }

  .con07__dots .swiper-pagination-bullet {
    width: 2.1333vw;
    height: 2.1333vw;
    margin-inline: 1.0667vw;
    opacity: 0.25;
    background-color: #009e5a;
  }

  .con07__dots .swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* 사진 비율·설명 줄수가 슬라이드마다 달라 활성 전환 때 트랙 높이가 흔들린다 — 카드와 사진칸을 고정폭·고정높이로 묶는다 */
  .con07__card {
    flex-shrink: 0;
    width: 73.0667vw;
    min-height: 0;
    height: 112vw;
    border-radius: 5.3333vw;
  }

  /* 활성 카드도 사진 노출 — 모바일 목업 승인분 */
  .con07__card.is-active .con07__card-media {
    display: flex;
  }

  /* 활성 상태는 HTML 고정 is-active 가 아니라 가운데 온 슬라이드가 갖는다 — 먼저 고정분을 기본 카드로 되돌린다 */
  .con07__card.is-active {
    width: 73.0667vw;
    background-color: #fff;
  }

  .con07__card.is-active .con07__card-line,
  .con07__card.is-active .con07__card-desc {
    display: none;
  }

  .con07__card.is-active .con07__card-name {
    color: #009e5a;
  }

  .con07__card.is-active .con07__card-korean {
    color: #101111;
  }

  .con07__card.swiper-slide-active {
    background-color: #009e5a;
  }

  .con07__card.swiper-slide-active .con07__card-line,
  .con07__card.swiper-slide-active .con07__card-desc {
    display: block;
  }

  .con07__card.swiper-slide-active .con07__card-name,
  .con07__card.swiper-slide-active .con07__card-korean {
    color: #fff;
  }

  .con07__card-media {
    flex: 0 0 auto;
    align-items: center;
    height: 48vw;
    padding-top: 6.4vw;
  }

  .con07__brown-rice-photo,
  .con07__tteokbokki-photo,
  .con07__meal-box-photo,
  .con07__noodle-photo {
    margin-top: 0;
  }

  .con07__keto-photo {
    width: 52vw;
  }

  .con07__brown-rice-photo {
    width: 53vw;
  }

  .con07__tteokbokki-photo {
    width: 48vw;
  }

  .con07__meal-box-photo {
    width: 53vw;
  }

  .con07__noodle-photo {
    width: 48vw;
  }

  .con07__drink-photo {
    width: 20vw;
  }

  .con07__card-body {
    padding: 6.4vw 6.4vw 8.5333vw;
  }

  .con07__card-korean,
  .con07__card:nth-child(n+4) .con07__card-korean,
  .con07__card.is-active .con07__card-korean {
    margin-top: 4.2667vw;
  }

  .con07__card-line {
    margin-top: 4.2667vw;
  }

  .con07__card-desc {
    margin-top: 4.2667vw;
  }

  .con07__card-body,
  .con07__card.is-active .con07__card-body {
    width: 100%;
  }

  .con07__card.is-active .con07__card-body {
    padding-bottom: 8.5333vw;
  }

  .con07__guide {
    flex-direction: column;
    align-items: center;
    gap: 6.4vw;
    width: 88vw;
    margin-top: 8.5333vw;
    padding: 10.6667vw 6.4vw;
    border-radius: 12.8vw;
  }

  .con07__guide-head {
    flex-direction: column;
    gap: 4.2667vw;
  }

  .con07__guide-icon {
    width: 12.8vw;
  }

  .con07__guide-link {
    justify-content: center;
    gap: 3.2vw;
    width: 100%;
    padding: 3.2vw 4.2667vw;
    border-radius: 5.3333vw;
  }

  .con07__guide-label {
    text-align: center;
  }

  .con07__guide-circle {
    width: 8.5333vw;
    padding-block: 2.9576vw;
  }

  .con07__guide-arrow {
    width: 3.2vw;
  }
}

/* /merge-build:con07 */
/* merge-build:con08 */
/* 모바일 인계: store 2단 → column(텍스트 위·파사드 아래) */
.con08__store {
  padding-left: calc(var(--px)*327);
  padding-right: calc(var(--px)*317);
  background-color: #fed452;
}

.con08__store-body {
  padding-top: calc(var(--px)*177);
}

.con08__store-title {
  margin-top: calc(var(--px)*24);
  margin-left: calc(var(--px)*6);
}

.con08__store-label,
.con08__contact-label {
  margin-left: calc(var(--px)*5);
  text-transform: uppercase;
}

.con08__search,
.con08__contact-link {
  border: 1px solid #eaf1ee;
  border-radius: calc(var(--px)*33);
  background-color: #fff;
  box-shadow: 0 0 calc(var(--px)*20) rgba(22, 39, 32, 0.09);
}

.con08__search {
  width: calc(var(--px)*446);
  margin-top: calc(var(--px)*43);
  padding: calc(var(--px)*10) calc(var(--px)*22) calc(var(--px)*12) calc(var(--px)*54);
}

.con08__search-input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  /* placeholder 는 텍스트 노드가 아니라 FONT:AUTO 매칭 불가 — spec texts[6] 값 수기 전사 */
  font-family: var(--font-pretendard);
  font-size: var(--bodyM);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: #838a87;
}

.con08__search-input::placeholder {
  color: inherit;
  opacity: 1;
}

.con08__search-submit,
.con08__contact-arrow {
  /* HEIGHT: 원형 도형 지름 고정 */
  flex-shrink: 0;
  width: calc(var(--px)*43);
  height: calc(var(--px)*43);
  border-radius: 50%;
  background-color: #009e5a;
}

.con08__search-submit {
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: transform .3s ease-out;
}

.con08__store-visual {
  margin-top: calc(var(--px)*89);
}

.con08__contact-body {
  padding: calc(var(--px)*181) 0 calc(var(--px)*184) calc(var(--px)*328);
}

.con08__contact-title {
  margin-top: calc(var(--px)*33);
  margin-left: calc(var(--px)*4);
}

.con08__contact-link {
  gap: calc(var(--px)*21.5);
  margin-top: calc(var(--px)*41);
  padding: calc(var(--px)*10) calc(var(--px)*25) calc(var(--px)*12) calc(var(--px)*35);
}

.con08__contact {
  overflow: hidden;
}

.con08__search-submit:focus-visible {
  transform: translateX(12%);
}

@media (hover: hover) {
  .con08__search-submit:hover {
    transform: translateX(12%);
  }
}

/* IMG:AUTO con08 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con08__store-visual {
    width: calc(var(--px)*663);
    aspect-ratio: 663 / 538;
}
/* /IMG:AUTO con08 END */

/* FONT:AUTO con08 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con08__store-label {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR */
    color: #009e5a;
}

.con08__store-title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.35;
    color: #101111;
}

.con08__search-submit {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
}

.con08__contact-label {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;  /* OVR */
    color: #fed351;
}

.con08__contact-title {
    font-family: var(--font-nanumsquare-neo);
    font-size: var(--titleL);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.3;
    color: #ffffff;
}

.con08__contact-link {
    line-height: 1.2;
}

.con08__contact-link-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: right;
    color: #101111;
}

.con08__contact-arrow {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}
/* /FONT:AUTO con08 END */

@media (max-width: 599px) {
  .con08__store {
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
  }

  .con08__store-body {
    align-items: center;
    width: 100%;
    padding-top: 10.6667vw;
    padding-left: 6.4vw;
    padding-right: 6.4vw;
  }

  .con08__store-label,
  .con08__contact-label {
    margin-left: 0;
  }

  .con08__store-title {
    margin-top: 4.2667vw;
    margin-left: 0;
  }

  .con08__search,
  .con08__contact-link {
    border-radius: 50vw;
  }

  .con08__search {
    width: 100%;
    margin-top: 6.4vw;
    padding: 1.6vw 3.2vw 2.1333vw 5.3333vw;
  }

  .con08__search-input {
    text-align: left;
  }

  .con08__search-submit,
  .con08__contact-arrow {
    /* HEIGHT: 원형 도형 지름 고정 */
    width: 10.6667vw;
    height: 10.6667vw;
  }

  .con08__store-visual {
    width: 100%;
    margin-top: 14.9333vw;
  }

  .con08__contact-body {
    align-items: center;
    padding: 21.3333vw 6.4vw 16vw;
  }

  .con08__contact-title {
    margin-top: 5.3333vw;
    margin-left: 0;
  }

  .con08__contact-link {
    gap: 3.2vw;
    margin-top: 6.4vw;
    padding: 2.1333vw 4.2667vw 2.1333vw 6.4vw;
  }
}

/* /merge-build:con08 */
/* merge-build:hero */
/* hero — 모바일: 타이틀·네비 absol 유지, 띠는 column(슬로건 2줄 + 캡슐) 후보 */
.hero__slide {
  overflow: hidden; /* swiper parallax 가 .hero__slide-img 를 슬라이드 폭의 50% 밀어 이웃 슬라이드 위로 넘치지 않게 */
}

.hero__slide-img {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.09);
  }
}

.hero__title {
  top: calc(var(--px)*176);
  left: calc(var(--px)*206);
  z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 */
}

.hero__nav {
  inset-inline: 0;
  bottom: calc(var(--px)*88);
  z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: calc(var(--px)*240);
  margin-inline: auto;
  padding: calc(var(--px)*7) calc(var(--px)*21) calc(var(--px)*7) calc(var(--px)*11);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: calc(var(--px)*29);
  background: rgb(16 17 17 / 0.23);
}

.hero__prev,
.hero__next {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero__prev {
  justify-self: start;
  width: calc(var(--px)*43);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.hero__prev-icon {
  display: block;
  transform: scaleX(-1);
  transition: transform .25s ease-out;
}

.hero__next {
  justify-self: end;

  .hero__next-icon {
    transition: transform .25s ease-out; /* 버튼이 flex 라 span 은 blockified — transform 적용됨 */
  }
}

@media (hover: hover) {
  .hero__prev:hover .hero__prev-icon {
    transform: scaleX(-1) translateX(20%);
  }

  .hero__next:hover .hero__next-icon {
    transform: translateX(20%);
  }
}

.hero__pagination {
  --swiper-pagination-fraction-color: #fff; /* swiper 가 .swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)} 로 FONT:AUTO color 를 덮음 */
}

.hero__band {
  padding: calc(var(--px)*22) calc(var(--px)*97) calc(var(--px)*20);
  background: #009e5a;

  &::before {
    content: "";
    position: absolute;
    top: calc(var(--px)*58);
    inset-inline: 0;
    width: calc(var(--px)*1068);
    margin-inline: auto;
    height: 1px;
    background: rgb(255 255 255 / 0.3);
  }
}

.hero__band-side {
  flex: 1 1 0;
}

.hero__catch {
  width: calc(var(--px)*619);
  padding-block: calc(var(--px)*25);
  border-radius: calc(var(--px)*26);
  background: #fff;
}

/* IMG:AUTO hero */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.hero__slide-img {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 753;
}
/* /IMG:AUTO hero END */

/* FONT:AUTO hero */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.hero__title {
    font-family: var(--font-poppins);
    font-size: var(--displayXL);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: #ffffff;
}

.hero__nav {
    line-height: 1.2;
}

.hero__prev-icon {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #009e5a;
}

.hero__pagination {
    font-family: var(--font-poppins);
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    color: #ffffff;
}

.hero__next-icon {
    font-family: var(--font-wanted);
    font-size: var(--titleXS);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.hero__band {
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.hero__slogan {
    font-family: var(--font-poppins);
    font-size: var(--subheadL);
    letter-spacing: -0.02em;
    color: #ffffff;
}

.hero__catch-text {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    letter-spacing: -0.04em;
    color: #009e5a;
}
/* /FONT:AUTO hero END */

@media (max-width: 599px) {
  .hero__slide-img {
    width: 100%;
    aspect-ratio: 3 / 4; /* 풀블리드 배경면 — PC 2.53:1 은 375 에서 높이 148px 이라 타이틀 3줄+네비가 안 들어감 */

    img {
      height: 100%; /* 전역 img{height:auto} 로는 자연비 148px 만 채워 래퍼 하단이 빈다 — 비율을 덮은 래퍼라 img 가 채워야 함 */
    }
  }

  .hero__title {
    top: 31.1642vw;
    inset-inline: 0;
    font-size: 12.2667vw; /* --displayXL 모바일값 28.8vw 가 PC 90px 보다 커서 "Healthy Mood" 가 375 폭을 넘김 — 가용폭 335px 상한 49.85px 의 92% */
    text-align: center;
  }

  .hero__nav {
    bottom: 14.9333vw;
    width: 38.4vw;
    padding: 1.0667vw 3.2vw 1.0667vw 1.6vw;
    border-radius: 5.3333vw;
  }

  .hero__prev {
    width: 6.4vw;
  }

  .hero__prev-icon,
  .hero__next-icon {
    font-size: var(--bodyM); /* titleXS(24px) 는 line-height 1.2 로 28.8px 이라 24px 원의 aspect-ratio 를 밀어 타원이 됨 — PC 원43:아이콘26 비례를 모바일 원24 에 맞춤 */
  }

  .hero__band {
    flex-direction: column;
    align-items: center;
    gap: 4.2667vw;
    padding: 8.5333vw 5.3333vw;

    &::before {
      display: none;
    }
  }

  .hero__band-side {
    flex: none;
    justify-content: center;
  }

  .hero__catch {
    width: 80vw;
    padding-block: 4.2667vw;
    border-radius: 4.2667vw;
  }
}

/* /merge-build:hero */