@charset "UTF-8";
@import url("./vweb-anim.css");
:root {
  --canvas: 1905;
  /* 레거시 호환 브리지: calc(var(--px)*N) 코드를 안 고치고 rem 기반으로 동작시킴 */
  --px: 0.1rem;
  /* 프로젝트 디스플레이 폰트 토큰은 여기에 정의 (library.css 수정 금지)
     예: --font-display: "폰트명", sans-serif; */
}

* {
  padding: 0;
  margin: 0;
  box-sizing: unset;
}

p {
  word-break: break-all;
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.pc-mobile {
  display: flex;
}

.mobile-pc {
  display: none;
}

.pc {
  display: flex;
}

.pc-inline {
  display: inline;
}

.tablet {
  display: none;
}

.mobile {
  display: none;
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

.hideopa {
  opacity: 0 !important;
}

.show {
  opacity: 1 !important;
}

.absol {
  position: absolute;
}

.rltv {
  position: relative;
}

.flexrow {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flexcol {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.smoke {
  animation: smoke 8s infinite linear;
}

div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-wrapper.flow {
  pointer-events: none;
  transition-timing-function: linear;
}

section img {
  width: 100%;
}

section:not(.map_section) img {
  pointer-events: none;
}

.swiper-button-disabled {
  opacity: 0.3;
}

.noto {
  font-family: var(--font-noto-serif-kr);
}

.notokr {
  font-family: var(--font-noto-serif-kr);
}

.exbold {
  font-weight: 800;
}

.bold {
  font-weight: 700;
}

.sebold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

.flight {
  font-weight: 200;
}

.thin {
  font-weight: 100;
}

.animate-blk {
  animation: blk 1s infinite ease-in-out;
}

.scaleOpa {
  animation: scaleOpa infinite 2s;
}

.scaleOpa2 {
  animation: scaleOpa2 infinite 2s;
}

.light {
  animation: light infinite 5s;
}

.rotate_img {
  animation: rotate_image 10s infinite linear;
}

.white {
  color: white;
}

.txct {
  text-align: center;
}

.lh {
  line-height: 1.5;
}

/* reveal 대신 사용 start */
/* 왼쪽부터 나타나기 */
.clip_off02 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.8s;
}

/* 가운데에서 나타나기 */
.clip_off {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: all 0.8s;
}

/* gsap에서 넣을 class */
.clip_on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

/* reveal 대신 사용 end */
.absol_cover {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.max_width {
  width: unset !important;
  max-width: 101%;
}

.back_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* image_sd */
.image_sd_wrap {
  overflow: hidden;
}

.image_sd {
  animation: marqueeX 20s infinite linear;
}

.image_sd .absol {
  left: 100%;
}

.image_sd_r {
  animation: marqueeX_r 20s infinite linear;
}

.image_sd_r .absol {
  right: 100%;
}

/* image_sd end */
/* y_slide start */
.slide_y_wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0%;
  overflow: hidden;
}

.slide_y {
  animation: marqueeY 20s infinite linear;
}

.slide_y img.absol {
  top: 100%;
}

.slide_y_r {
  animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
  bottom: 100%;
}

/* y_slide end */
/* flow_sd 가로 (여러 이미지 마퀴) start */
.flow_sd {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.flow_sd_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX 20s infinite linear;
}
.flow_sd_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX_r 20s infinite linear;
}
.flow_sd_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flow_sd_move_item02 {
  left: 100%;
}
.flow_sd_move_item02_r {
  right: 100%;
}
.flow_sd_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* flow_sd 가로 end */
/* flow_sd 세로 (여러 이미지 마퀴) start */
.flow_sd_y {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.flow_sd_y_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY 10s infinite linear;
}
.flow_sd_y_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY_r 10s infinite linear;
}
.flow_sd_y_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.flow_sd_y_move_item02 {
  top: 100%;
}
.flow_sd_y_move_item02_r {
  bottom: 100%;
}
.flow_sd_y_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* flow_sd 세로 end */
/* swiper-arr */
.btn_arr {
  z-index: 2;
  cursor: pointer;
}

.arr_next {
  transform: rotateY(180deg);
}

/* swiper-arr */
iframe {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-lock {
  display: none !important;
}

.swiper {
  margin: 0;
  z-index: 0;
}

b {
  font-weight: 700;
}

.obj > img {
  height: 100%;
  object-fit: cover;
}

.map_marker {
  position: relative;
  display: inline-block;
}

.map_marker_text {
  background: var(--c-point);
  border: 1px solid var(--c-navy);
  padding: 0.9rem 1.9rem;
  border-radius: 10rem;
  font-size: var(--bodyXS);
  font-weight: 500;
  color: var(--c-white);
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* border/오프셋 전부 rem 통일 (px 혼용 시 모바일 비례 어긋남) */
.map_marker_tail {
  position: absolute;
  bottom: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-top: 0.8rem solid var(--c-navy);
}

.map_marker_tail::after {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: -0.7rem;
  border-left: 0.7rem solid transparent;
  border-right: 0.7rem solid transparent;
  border-top: 0.7rem solid var(--c-point);
}

/* ============================================================
 * 퍼블시작 — 섹션별 CSS (위쪽은 공통 자산, 여기부터 .mv/.conNN)
 * ============================================================ */

/* 그누보드 default.css 의 html{overflow-y:scroll} 무력화 (빈 스크롤바 트랙 제거) */
html {
    overflow-y: auto;
}

/* ===== 페이지 고유 섹션 CSS 는 여기부터 (.mv / .conNN) ===== */

/* FONT:AUTO main */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.main__copy-sub {
    font-family: var(--font-ridibatang);
    font-size: var(--headL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.3;
    color: #f3e6cb;
}

.main__title {
    font-family: var(--font-paperlogy);
    font-size: 7.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.07;
}

.main__title-line {
    color: #ffffff;
}

.main__title-line--accent {
    color: #fad294;
}
/* /FONT:AUTO main */

.main {
    height: 88.6rem;
}

.main__bg {
    left: -0.75rem;
    top: 0;
    z-index: 0;
}

/* 좌·우 음식은 PSD 에서 soft light 블렌드다 — 뒤 붉은 배경이 비쳐야 시안의 붉은 톤이 나온다.
   블렌드는 backdrop 이 있어야 성립해 webp 에 구울 수 없으므로 CSS 가 유일한 재현 수단. */
.main__food-left {
    left: -27.45rem;
    top: 50.6rem;
    mix-blend-mode: soft-light;
    z-index: 1;
}

.main__deco-yuk {
    left: 23.15rem;
    top: 17.1rem;
    z-index: 2;
}

.main__deco-sik {
    right: 25.45rem;
    top: 55.8rem;
    z-index: 2;
}

.main__food-right {
    right: -45.25rem;
    top: 1rem;
    mix-blend-mode: soft-light;
    z-index: 3;
}

.main__stage {
    left: 35.05rem;
    top: -1.1rem;
    width: 120.4rem;
    height: 82.9rem;
    z-index: 4;
}

/* 불꽃 영상만 무대 프레임에 맞춰 잘라낸다.
   무대에 overflow:hidden 을 걸면 아래로 삐져나와야 하는 돌판(.main__meat-wrap)까지 잘린다. */
.main__fire {
    left: -11.6rem;
    top: 27rem;
    width: 143.6rem;
    height: 80.7rem;
    clip-path: inset(0 11.6rem 24.8rem 11.6rem);
    opacity: 0.85;
    mix-blend-mode: screen;
    z-index: 1;
}

.main__line {
    left: 0;
    top: 80.3rem;
    z-index: 2;
}

.main__meat-wrap {
    left: 13.5rem;
    top: 17.4rem;
    width: 115.9rem;
    height: 72.4rem;
    z-index: 3;
}

.main__smoke {
    left: 23.5rem;
    top: 13.8rem;
}

.main__copy {
    left: 60.05rem;
    top: 16rem;
    width: 70.1rem;
    height: 21rem;
    gap: 1.9rem;
    z-index: 5;
}

.main__copy-sub {
    text-align: center;
    white-space: nowrap;
}

.main__title-line,
.main__title-line--accent {
    text-align: center;
    white-space: nowrap;
}

.main__hanja-yuk {
    left: 10.15rem;
    top: 34rem;
    z-index: 6;
}

.main__hanja-sik {
    right: 6.65rem;
    top: 33.9rem;
    z-index: 6;
}


/* FONT:AUTO con01 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con01__head-label {
    font-family: var(--font-ridibatang);
    font-size: var(--titleXS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.3;
    color: #f3e6cb;
}

.con01__head-title-text {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con01__head-title-em {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con01__col-title--bad {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #848484;
}

.con01__list-item--bad {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.3;
    color: #5f5f5f;
}

.con01__col-title--good {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #b71822;
}

.con01__list-item--good {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.3;
    color: #ffffff;
}

.con01__desc {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.46;
    color: #ffffff;
}
/* /FONT:AUTO con01 */

/* con01~con03 공용 배경(bg-texture). con02·con03 코딩 시 이 안에 이어붙임 */
.bg-texture {
    background-image: url(/images/con01_06.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.con01__inner {
    position: relative;
    z-index: 1;
}

.con01__logo {
    margin-top: 9.1rem;
}

.con01__head {
    margin-top: 4.4rem;
    gap: 1.45rem;
}

.con01__head-title {
    width: 82.3rem;
}

.con01__head-title-text {
    display: inline;
}

.con01__head-label,
.con01__head-title-text,
.con01__head-title-em,
.con01__col-title--bad,
.con01__col-title--good,
.con01__list-item--bad,
.con01__list-item--good {
    white-space: nowrap;
}

.con01__desc {
    margin-top: 12.92rem;
    margin-bottom: 4.69rem;
    white-space: nowrap;
}

.con01__compare {
    position: relative;
    width: 144.3rem;
    margin-top: 16.17rem;
}

.con01__col {
    gap: 3.68rem;
}

.con01__col-title--bad,
.con01__col-title--good {
    margin-top: -0.42rem;
}

.con01__col--bad {
    width: 35.7rem;
}

.con01__col--good {
    width: 34.8rem;
    position: relative;
}

.con01__list {
    width: 100%;
    gap: 1.62rem;
}

.con01__list-item {
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 1.62rem;
    border-bottom: 1px solid;
}

.con01__list-item--bad {
    border-color: rgba(255, 255, 255, 0.16);
}

.con01__list-item--good {
    border-color: rgba(255, 255, 255, 0.25);
}

.con01__visual {
    position: absolute;
    left: 44.3rem;
    top: -13.7rem;
    width: 69.1rem;
    height: 54.6rem;
    z-index: 1;
}

.con01__circle {
    position: relative;
    width: 49.9rem;
    margin-left: 2.7rem;
    margin-top: 4rem;
    z-index: 0;
}

.con01__cooker {
    position: absolute;
    left: 0;
    top: 18.3rem;
    overflow: hidden;
    z-index: 1;
}

.con01__wok {
    position: absolute;
    left: 27.7rem;
    top: 0;
    overflow: hidden;
    z-index: 2;
}

.con01__badge {
    position: absolute;
    left: 25.7rem;
    top: -8.8rem;
    z-index: 1;
}

.con01__badge-peel {
    width: 12.5rem;
}

.con01__badge-peel .peel-main {
    position: relative;
    height: auto;
}


/* FONT:AUTO con02 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con02__title-main {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con02__title-point {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.83;
    color: #b71822;
}

.con02__description {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #ffffff;
}
/* /FONT:AUTO con02 */

.con02 {
    height: 86.1rem;
}

.con02__panel {
    box-sizing: border-box;
    width: 174rem;
    margin-top: 8.4rem;
    padding-top: 6.4rem;
    padding-bottom: 5.3rem;
    padding-left: 19.8rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2.7rem;
    background: rgba(255, 255, 255, 0.03);
    gap: 15.7rem;
}

.con02__copy {
    width: 35.4rem;
    margin-top: 9.6rem;
    gap: 4rem;
}

.con02__title-point {
    margin-top: 0.9rem;
    margin-bottom: -0.9rem;
}

.con02__cards {
    gap: 2.3rem;
}

.con02__cards-row {
    gap: 1.6rem;
}

.con02__cards-row:nth-child(2) {
    position: relative;
    left: -0.1rem;
    top: 0.4rem;
}

.con02__card--investment,
.con02__card--efficiency,
.con02__card--burden,
.con02__card--growth {
    padding-inline: 0.15rem;
}

.con02__visual {
    left: 130.4rem;
    top: -0.3rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.con02__smoke {
    left: -4.45rem;
    top: -8.7rem;
    pointer-events: none;
}

.con02__smoke img,
.con02__food img {
    width: auto;
    max-width: none;
}


/* FONT:AUTO con03 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con03__eyebrow {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 3.13;
    color: #ffffff;
}

.con03__title-prefix {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #ffffff;
}

.con03__title-accent {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #b71822;
}

.con03__title-suffix {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #ffffff;
}

.con03__timer-value {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: 0em;
    line-height: 1.11;
    color: #ffffff;
}

.con03__card-label--grill {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.09;
    color: #ffffff;
}

.con03__card-label--serve {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.09;
    color: #ffffff;
}

.con03__proof-title-prefix {
    font-family: var(--font-ridibatang);
    font-size: var(--titleS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.13;
    color: #ffffff;
}

.con03__proof-title-accent {
    font-family: var(--font-ridibatang);
    font-size: var(--titleS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.13;
    color: #fad294;
}

.con03__proof-body {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.4;
    color: #ffffff;
}
/* /FONT:AUTO con03 */

.con03 {
    position: relative;
    height: 120.9rem;
    background: transparent;
}

.con03__inner {
    position: relative;
    height: 120.9rem;
}

.con03__hero {
    position: relative;
    width: 143.8rem;
    margin-top: 10.1rem;
}

.con03__eyebrow,
.con03__title-prefix,
.con03__title-accent,
.con03__title-suffix-line,
.con03__title-final,
.con03__timer-value,
.con03__card-label--put,
.con03__card-label--grill,
.con03__card-label--serve,
.con03__proof-title-prefix,
.con03__proof-title-accent,
.con03__proof-body {
    white-space: nowrap;
}

/* 시안에 없던 1번 카드 오버레이 — 디자이너 주석("넣고 굽고 담고 하나씩 밝아지며 영상 재생") 반영.
   폰트 6속성은 --grill/--serve 와 동일 계약이며 spec 원천이 없어 FONT:AUTO 블록 밖에 둔다. */
.con03__card-label--put {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.09;
    color: #ffffff;
}

.con03__title {
    position: relative;
    left: -0.1rem;
    top: -1.5rem;
    width: 49.5rem;
    height: 20.7rem;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
}

.con03__title-prefix {
    flex-basis: 100%;
}

.con03__eyebrow {
    position: relative;
    left: -0.1rem;
    top: -0.3rem;
    margin-top: -2.4rem;
}

.con03__title-suffix-line {
    margin-left: 1.2rem;
}

.con03__title-final {
    flex-basis: 100%;
}

.con03__photo {
    left: 66.7rem;
    top: 11.8rem;
    width: 77.1rem;
}

.con03__wok {
    left: 7.6rem;
    top: 12.7rem;
}

.con03__timer-wrap {
    left: 30.5rem;
    top: 32.9rem;
    width: 20.6rem;
    height: 20.8rem;
}

.con03__timer-value {
    left: 50%;
    top: calc(50% + 1.3rem);
    transform: translate(-50%, -50%);
}

.con03__bottom {
    left: 19.35rem;
    top: 78.7rem;
    gap: 9.2rem;
}

.con03__cards {
    width: 69.7rem;
    height: 18.1rem;
    margin-left: 1.9rem;
    gap: 1.9rem;
    flex-shrink: 0;
}

/* overflow 는 영상 래퍼가 소유한다 — 카드가 자르면 떨어져 나가는 오버레이까지 카드 경계에서 잘린다. */
.con03__card--put,
.con03__card--grill,
.con03__card--serve {
    position: relative;
    width: 21.9rem;
    height: 14.5rem;
    border-radius: 3rem;
    background: #000000;
    flex-shrink: 0;
}

.con03__card-image--put,
.con03__card-image--grill,
.con03__card-image--serve {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3rem;
}

.con03__card-video {
    display: block;
    max-width: none;
    object-fit: cover;
}

.con03__card-video--put {
    width: 25.7rem;
}

.con03__card-video--grill {
    width: 32.2rem;
}

.con03__card-video--serve {
    width: 24.9rem;
}

.con03__proof-emblem img {
    width: auto;
    max-width: none;
}

.con03__card-overlay {
    pointer-events: none;
}

/* 실제 검은 면은 이 span 이다 — 카드와 같은 radius 를 여기가 들어야 떨어져 나갈 때 각지지 않는다. */
.con03__card-bg--put,
.con03__card-bg--grill,
.con03__card-bg--serve {
    background: #000000;
    opacity: 0.67;
    border-radius: 3rem;
}

.con03__card-label--put {
    left: 8rem;
    top: 5.7rem;
    opacity: 0.2;
}

.con03__card-label--grill {
    left: 8.1rem;
    top: 5.7rem;
    opacity: 0.2;
}

.con03__card-label--serve {
    left: 8rem;
    top: 5.7rem;
    opacity: 0.2;
}

.con03__proof {
    margin-top: 6.2rem;
    gap: 3.8rem;
    flex-shrink: 0;
}

.con03__proof-emblem {
    flex-shrink: 0;
}

.con03__proof-copy {
    margin-top: 0.3rem;
    gap: 2.7rem;
    flex-shrink: 0;
}

.con03__proof-body {
    margin-left: 0.1rem;
}


/* FONT:AUTO con04 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con04__tagline {
    font-family: var(--font-ridibatang);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: 1.54em;
    line-height: 1;
    color: #f3e6cb;
}

.con04__copy-sub {
    font-family: var(--font-paperlogy);
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #ffffff;
}
/* /FONT:AUTO con04 */

.con04 {
    background-color: #000000;
    background-image: url(/images/con04_02.webp);
    background-repeat: no-repeat;
    background-position: center 7.4rem;
    background-size: 192rem 51rem;
}

.con04__stage {
    position: relative;
    width: 100%;
    height: 58.6rem;
}

.con04__spotlight {
    --con04-spotlight-radius: 0rem;
    --con04-spotlight-x: 50%;
    --con04-spotlight-y: 50%;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url(/images/con04_01.webp);
    background-repeat: no-repeat;
    background-position: center 7.4rem;
    background-size: 192rem 51rem;
    clip-path: circle(var(--con04-spotlight-radius) at var(--con04-spotlight-x) var(--con04-spotlight-y));
}

.con04__top {
    position: relative;
    width: 100%;
}

.con04__top-band {
    width: 100%;
    height: 7.4rem;
    background: #000000;
    z-index: 1;
}

.con04__tagline {
    left: 55.85rem;
    top: 3rem;
    z-index: 2;
    white-space: nowrap;
}

.con04__copy {
    left: 73.45rem;
    top: 29.6rem;
    gap: 2.3rem;
    z-index: 2;
}

.con04__copy-sub {
    height: 1.8rem;
    white-space: nowrap;
}


/* FONT:AUTO con05 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con05__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--titleXS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 2.43;
    color: #000000;
}

.con05__title-text {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con05__title-em {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con05__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #000000;
}

.con05__callout-text--juiciness {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #000000;
}

.con05__callout-text--reorder {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #000000;
}

.con05__callout-text--texture {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #b71822;
}

.con05__callout-text--crispy {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #000000;
}
/* /FONT:AUTO con05 */

.con05 {
    overflow: visible;
    height: 102.4rem;
    background-image: url(/images/con05_16.webp);
    background-repeat: no-repeat;
    background-position: -1.5rem top;
    background-size: 192rem 102.9rem;
}

.con05__stage {
    position: relative;
    left: -0.1rem;
    top: -0.1rem;
    width: 100%;
    height: 102.4rem;
}

.con05 img {
    display: block;
}

.con05__copy {
    margin-top: 12.3rem;
    margin-left: -0.15rem;
    gap: 3.1rem;
    z-index: 6;
}

.con05__heading {
    margin-bottom: -0.7rem;
    gap: 1.9rem;
}

.con05__eyebrow {
    line-height: 1;
    white-space: nowrap;
}

.con05__title {
    margin-top: -0.8rem;
    margin-left: -0.1rem;
    text-align: center;
    white-space: nowrap;
}

.con05__title-em,
.con05__title-text {
    display: inline;
}

.con05__title-em {
    left: 0.3rem;
    top: 0.1rem;
}

.con05__description {
    text-align: center;
    white-space: nowrap;
}

.con05__meat-slider {
    left: -14.45rem;
    top: 81.2rem;
    width: 218.7rem;
    height: 16.5rem;
    gap: 30.5rem;
    z-index: 1;
}

.con05__meat-track--left,
.con05__meat-track--right {
    width: 94.1rem;
    height: 16.5rem;
}

/* 세트 2벌 나열 + marquee(-50%) = 무한 seamless. 세트 폭(99.6rem) = 슬라이드 4장 + 각 5.5rem 여백 */
.con05__meat-move {
    flex-shrink: 0;
    animation: marquee 20s infinite linear;
}

.con05__meat-set {
    flex-shrink: 0;
}

.con05__meat-slide {
    flex-shrink: 0;
    margin-right: 5.5rem;
}

.con05__diagram {
    left: 29.25rem;
    top: 37.6rem;
    width: 131.6rem;
    height: 64.8rem;
    z-index: 2;
}

.con05__hero {
    left: 18rem;
    top: 4.9rem;
    width: 96rem;
    height: 64.3rem;
}

.con05__hero-caption {
    left: 20.9rem;
    top: 0;
    z-index: 2;
}

.con05__hero-product {
    left: 0;
    top: 16.2rem;
    z-index: 5;
}

.con05__callout--juiciness {
    left: 26.3rem;
    top: 4.3rem;
    width: 34.9rem;
    height: 28.9rem;
}

.con05__connector--juiciness {
    left: 12.8rem;
    top: 11.1rem;
    z-index: 1;
}

.con05__callout-circle--juiciness {
    left: 0;
    top: 0;
    z-index: 3;
}

.con05__callout-text--juiciness {
    left: 7.25rem;
    top: 4.6rem;
    transform: translateX(-50%);
    z-index: 4;
    text-align: center;
    white-space: nowrap;
}

.con05__callout--reorder {
    left: 0;
    top: 17.4rem;
    width: 64.6rem;
    height: 17.7rem;
}

.con05__connector--reorder {
    left: 14.1rem;
    top: 8.1rem;
    z-index: 1;
}

.con05__callout-circle--reorder {
    left: 0;
    top: 0;
    z-index: 3;
}

.con05__callout-text--reorder {
    left: 7.25rem;
    top: 4.7rem;
    transform: translateX(-50%);
    z-index: 4;
    text-align: center;
    white-space: nowrap;
}

.con05__callout--texture {
    left: 68.9rem;
    top: 0;
    width: 45.1rem;
    height: 31.6rem;
}

.con05__connector--texture {
    left: 0;
    top: 11.3rem;
    z-index: 1;
}

.con05__callout-circle--texture {
    left: 30.7rem;
    top: 0;
    z-index: 3;
}

.con05__callout-text--texture {
    left: 37.8rem;
    top: 5rem;
    transform: translateX(-50%);
    z-index: 4;
    text-align: center;
    white-space: nowrap;
}

.con05__callout--crispy {
    left: 64.9rem;
    top: 21.9rem;
    width: 66.7rem;
    height: 14.5rem;
}

.con05__connector--crispy {
    left: 0;
    top: 7.3rem;
    z-index: 1;
}

.con05__callout-circle--crispy {
    left: 52.4rem;
    top: 0;
    z-index: 3;
}

.con05__callout-text--crispy {
    left: 59.6rem;
    top: 4.7rem;
    transform: translateX(-50%);
    z-index: 4;
    text-align: center;
    white-space: nowrap;
}


/* FONT:AUTO con06 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con06__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--titleXS);
    font-weight: 400;
    letter-spacing: -0.06em;
    color: #580b10;
}

.con06__title-line--01 {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con06__title-line--02 {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con06__card-title-line--01 {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con06__card-title-line--01-em {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con06__card-body--01 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con06__card-side--01 {
    font-family: var(--font-ridibatang);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.35;
    color: #fad294;
}

.con06__card-title-line--02-em {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con06__card-title-line--02 {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con06__card-body--02 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con06__card-side--02 {
    font-family: var(--font-ridibatang);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.35;
    color: #fad294;
}

.con06__card-title-line--03 {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con06__card-title-line--03-em {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con06__card-body--03 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #000000;
}

.con06__card-side--03 {
    font-family: var(--font-ridibatang);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.35;
    color: #5b0c11;
}

.con06__card-title-line--04 {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con06__card-title-line--04-em {
    font-family: var(--font-paperlogy);
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con06__card-body--04 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con06__card-side--04 {
    font-family: var(--font-ridibatang);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.35;
    color: #ffffff;
}
/* /FONT:AUTO con06 */

.con06 {
    background: #fdf1e2;
    padding-bottom: 13rem;
}

/* ★ 카드 스택 프레임 — 카드 4장을 다 펼치지 않고 1장 높이 창 안에서 겹쳐 쌓는다(시안 주석 "스크롤시 박스 쌓이는 모션").
   inner = padding 13.3 + heading 26.9 + gap 6.1 + deck 52.5(카드 1장) = 98.8rem.
   펼친 높이(281.7rem)와의 차이는 ani_con06 의 pin 스크롤이 대신한다. */
.con06__inner {
    height: 98.8rem;
    padding-top: 13.3rem;
    box-sizing: border-box;
    gap: 6.1rem;
}

.con06__card-deck {
    height: 52.5rem;
    /* clip-path: inset(0 -4rem); */
}

.con06 :is(h2, h3, p) {
    margin: 0;
}

.con06__heading {
    width: 70.3rem;
    height: 26.9rem;
}

.con06__title {
    width: 70.3rem;
    height: 12.9rem;
    /* transform: translateY(-5.1rem); */
}

.con06__title-line--01,
.con06__title-line--02,
.con06__card-title-line--01,
.con06__card-title-line--01-em,
.con06__card-title-line--02,
.con06__card-title-line--02-em,
.con06__card-title-line--03,
.con06__card-title-line--03-em,
.con06__card-title-line--04,
.con06__card-title-line--04-em {
    white-space: nowrap;
}

.con06__card {
    width: 153.2rem;
    height: 52.5rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 3rem;
    border: 1px solid #333;
    box-sizing: border-box;
}

.con06__card-bg--01,
.con06__card-bg--02,
.con06__card-bg--03,
.con06__card-bg--04 {
    left: 0;
    z-index: 0;
}

.con06__card-bg--01 {
    top: 0;
    width: 153.2rem;
    height: 52.5rem;
    background: #5b0c11;
}

.con06__card-bg--02,
.con06__card-bg--03,
.con06__card-bg--04 {
    top: 0;
    width: 153.2rem;
}

.con06__card-badge--01 {
    left: 5.9rem;
    top: 0.1rem;
    z-index: 2;
}

.con06__card-content--01 {
    left: 27rem;
    top: 8.6rem;
    gap: 9.5rem;
    z-index: 2;
}

.con06__card-media--01 {
    width: 60.4rem;
    height: 35.3rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 3rem;
    background: #000;
}

.con06__card-video--01 {
    object-fit: cover;
}

.con06__card-copy-wrap--01 {
    width: 35.8rem;
    height: 33.8rem;
}

.con06__card-side--01 {
    left: 144.6rem;
    top: 10.8rem;
    width: 2rem;
    z-index: 2;
}

.con06__card-hand--02 {
    left: 2.7rem;
    top: 7.6rem;
    z-index: 1;
}

.con06__card-badge--02 {
    left: 69rem;
    top: 0;
    z-index: 3;
}

.con06__card-content--02 {
    left: 69.3rem;
    top: 25.1rem;
    width: 62.7rem;
    height: 21.2rem;
    gap: 13.8rem;
    z-index: 2;
}

.con06__card-apps--02 {
    gap: 0.7rem;
}

.con06__card-copy-wrap--02 {
    width: 42.1rem;
    height: 16.5rem;
}

.con06__card-side--02 {
    left: 144.6rem;
    top: 10.8rem;
    width: 1.9rem;
    z-index: 2;
}

.con06__card-badge--03 {
    left: 69rem;
    top: 0;
    z-index: 3;
}

.con06__card-copy--03 {
    left: 48.1rem;
    top: 16.4rem;
    gap: 2.7rem;
    /* 시안의 03 카드는 제목·본문 모두 가운데 정렬 — 상속 속성이라 부모가 한 번만 소유한다. */
    text-align: center;
    z-index: 2;
}

/* 시안 주석 "사이드메뉴 슬라이드" = 무한 마퀴. 고정 4장 배치는 마퀴 트랙으로 대체한다.
   마크업은 이미 marquee 정본 구조(원본세트 + 복제세트.absol · item > div > img). */
.con06__card-menu--03 {
    display: none;
}

.con06__card-menu-marquee--03 {
    position: absolute;
    left: 0;
    top: 31.9rem;
    width: 153.2rem;
    display: flex;
    /* 접시 높이가 제각각이라 하단 맞춤 — 대체하기 전 고정 배치도 wrap 마다 flex-col justify-end 였다 */
    align-items: flex-end;
    overflow: hidden;
    z-index: 1;
}

.con06__card-menu-marquee-track--03 {
    display: flex;
    flex-shrink: 0;
    animation: marqueeX 30s infinite linear;
}

.con06__card-menu-marquee-set--03 {
    align-items: center;
    gap: 6rem;
    /* 원본세트 끝과 복제세트 첫 장이 맞붙지 않게 이음매에도 같은 간격을 준다 */
    padding-right: 6rem;
}

.con06__card-menu-marquee-set--clone {
    top: 0;
    left: 100%;
}

.con06__card-menu-marquee-item--03 {
    flex-shrink: 0;
}

.con06__card-menu-rest {
    gap: 5.9rem;
}

.con06__card-menu-last {
    gap: 5.4rem;
}

.con06__card-menu-wrap--01 {
    padding-top: 0.8rem;
}

.con06__card-menu-wrap--02 {
    padding-top: 1.1rem;
}

.con06__card-menu-wrap--03 {
    padding-top: 0.3rem;
}

.con06__card-side--03 {
    left: 144.6rem;
    top: 10.9rem;
    width: 2rem;
    z-index: 2;
}

.con06__card-badge--04 {
    left: 7.1rem;
    top: 0;
    z-index: 3;
}

.con06__card-content--04 {
    left: 23rem;
    top: 5.4rem;
    width: 114.3rem;
    height: 41.9rem;
    z-index: 2;
}

.con06__card-title-wrap--04 {
    width: 23.1rem;
    height: 20rem;
}

.con06__card-title--04 {
    height: 7.3rem;
}

.con06__card-media-copy--04 {
    gap: 6.5rem;
}

.con06__card-body-wrap--04 {
    width: 33.2rem;
    height: 32.4rem;
}

.con06__card-side--04 {
    left: 144.6rem;
    top: 10.8rem;
    width: 1.9rem;
    z-index: 2;
}

.con06__card-body--01,
.con06__card-body--02,
.con06__card-body--03,
.con06__card-body--04 {
    white-space: nowrap;
}

.con06__pagination {
    right: -3.3rem;
    top: 22.1rem;
    gap: 0.3rem;
    z-index: 4;
}

.con06__pagination-item {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 99rem;
    background: #000;
    /* 스택 단계 전환 시 불릿이 늘어나며 물드는 전환. 활성 토글은 ani_con06 이 클래스로 한다. */
    transition: height 0.3s ease, background-color 0.3s ease;
}

.con06__pagination-item--active {
    height: 2.9rem;
    background: #5b0c11;
}


/* con07 */
.con07 { height: 131.2rem; background-image: url('/images/con07_18.webp'); background-position: center -0.3rem; background-repeat: no-repeat; background-size: 192rem 131.5rem; }
.con07__section { width: 100%; height: 131.2rem; }
.con07__content { padding-top: 16.6rem; }
.con07__head {
    /* height: 18.5rem; */
}
.con07__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--titleXS);
    font-weight: 400;
    letter-spacing: -0.06em;
    /* line-height: 2.43; */
    color: #ffffff;
}
.con07__title { height: 12.9rem; margin-top: 2.1rem; gap: 0; }
.con07__title-line--1 { transform: translate(-0.1rem, -0.8rem); white-space: nowrap; }
.con07__title-line--2 { transform: translate(-0.2rem, -0.8rem); white-space: nowrap; }
.con07__timeline { width: 175.9rem; height: 30.5rem; margin-top: 0.8rem; align-items: flex-start; }
.con07__timeline-stage { width: 175.1rem; height: 20.5rem; }
.con07__timeline-track { left: 0; top: 5.3rem; z-index: 0; }
.con07__timeline-progress { height: 20.5rem; margin-left: 29.55rem; gap: 14.3rem; }
.con07__timeline-phase--1 { height: 11.6rem; gap: 14.3rem; }
.con07__timeline-group--2 { height: 20.5rem; gap: 14.5rem; }
.con07__timeline-phase--2 { height: 9rem; gap: 15.1rem; }
.con07__timeline-group--3 { height: 20.5rem; gap: 9.4rem; }
.con07__timeline-phase--3 { height: 9rem; gap: 10.3rem; }
.con07__timeline-growth { height: 20.5rem; }
.con07__timeline-step--1 { position: relative; top: 0.55rem; }
.con07__timeline-step--2, .con07__timeline-step--3 {
    position: relative;
    top: 2.15rem;
    height: 9rem;
}
.con07__timeline-step--2 img, .con07__timeline-step--3 img {
    width: auto;
    height: 100%;
}
.con07__timeline-step--3 { left: 0.1rem; }
.con07__timeline-arrow--1, .con07__timeline-arrow--2, .con07__timeline-arrow--3 {
    position: relative;
    top: -1.5rem;
}
.con07__timeline-arrow--3 {
    left: 0.2rem;
    /* top: -1.6rem; */
}
.con07__growth-percent { left: 2.75rem; top: 7.9rem; z-index: 1; }
.con07__stabilization { width: 104.7rem; height: 10.6rem; margin-top: -0.6rem; margin-left: 33.05rem; }
.con07__stabilization-bracket { left: 0; top: 0; z-index: 0; }
.con07__stabilization-pill { left: 38.8rem; top: 2.2rem; z-index: 1; }
.con07__stabilization-copy { position: relative; left: 2.6rem; height: 1.7rem; margin-top: 8.9rem; white-space: nowrap; }
.con07__lead { height: 2.5rem; margin-top: 6.9rem; white-space: nowrap; transform: translate(-0.1rem, -2.3rem); }
.con07__cards { height: 34.7rem; margin-top: 7rem; gap: 2.2rem; }
/* 커버·패널 두 레이어가 같은 클립을 받아야 전환 중 모서리가 이중으로 보이지 않는다 */
.con07__card { width: 37.5rem; height: 34.7rem; overflow: hidden; border-radius: 2rem; }

/* 카드 비활성(커버) = 사진 + 제목 */
.con07__card-image--analysis, .con07__card-image--launch, .con07__card-image--data, .con07__card-image--settle { left: 0.2rem; top: 0.2rem; z-index: 0; }
.con07__card-title--analysis { left: 13.1rem; top: 15.95rem; height: 2.8rem; z-index: 1; white-space: nowrap; text-align: center; }
.con07__card-title--launch { left: 10.1rem; top: 14.3rem; height: 6.1rem; z-index: 1; text-align: center; }
.con07__card-title--data { left: 11.6rem; top: 14.4rem; height: 6rem; z-index: 1; text-align: center; }
.con07__card-title--settle { left: 7.15rem; top: 15.9rem; height: 2.9rem; z-index: 1; white-space: nowrap; text-align: center; transform: translate(0.8rem, -0.1rem); }

/* 카드 활성(패널) = 검은 헤드 + 아이콘 + 카피. 신호등 모션이 .con07__card--active 를 옮겨 다닌다. */
.con07__card-panel {
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

/* 접힘(기본) — 흰 패널은 아래로 내려가 있고(아래에서 올라와 열린다),
   검은 헤드만 패널 이동분(2rem)을 상쇄해 반대로 —2rem 위에서 내려온다(합성 -4rem+2rem).
   ★ 헤드에 opacity 를 따로 주지 않는다 — 헤드만 늦게 진해지면 그 자리에 패널 흰 배경이 비친다.
   나갈 때 카피→아이콘→패널 역순이 되도록 delay 를 반대로 준다. */
.con07__card-panel,
.con07__card-icon,
.con07__card-copy {
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.con07__card-panel {
    visibility: hidden;
    transform: translateY(2rem);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.con07__card-head { transform: translateY(-4rem); transition: transform 0.22s ease; }
.con07__card-icon { transform: translateY(1rem) scale(0.9); }
.con07__card-copy { transform: translateY(1rem); }
/* 커버 제목은 패널이 열리면 접는다 — 헤드 제목과 두 개가 같이 보이면 글자가 겹쳐 읽힌다 */
.con07__card-title { transition: opacity 0.22s ease; }

/* 펴짐 — 순환이 준 활성, 또는 마우스가 올라간 카드.
   흰 패널이 아래에서 올라오고 검은 헤드는 위에서 내려와 만나며, 아이콘→카피가 0.09s 간격으로 따라 붙는다. */
.con07__card--active .con07__card-panel,
.con07__cards:hover .con07__card:hover .con07__card-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-duration: 0.38s;
}
.con07__card--active .con07__card-title,
.con07__cards:hover .con07__card:hover .con07__card-title { opacity: 0; }
.con07__card--active .con07__card-head,
.con07__cards:hover .con07__card:hover .con07__card-head { transform: none; transition-duration: 0.38s; }
.con07__card--active .con07__card-icon,
.con07__cards:hover .con07__card:hover .con07__card-icon { opacity: 1; transform: none; transition-duration: 0.38s; transition-delay: 0.09s; }
.con07__card--active .con07__card-copy,
.con07__cards:hover .con07__card:hover .con07__card-copy { opacity: 1; transform: none; transition-duration: 0.38s; transition-delay: 0.18s; }

/* hover 중에는 순환이 준 활성을 접는다(마우스 올린 카드만 남김).
   JS 는 순환 클래스만 토글하고 hover 에는 개입하지 않는다 — 타이머는 hoverAni 가 멈춘다. */
.con07__cards:hover .con07__card--active:not(:hover) .con07__card-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(2rem);
    transition-duration: 0.22s;
    transition-delay: 0s;
}
.con07__cards:hover .con07__card--active:not(:hover) .con07__card-title { opacity: 1; }
.con07__cards:hover .con07__card--active:not(:hover) .con07__card-head { transform: translateY(-4rem); transition-duration: 0.22s; }
.con07__cards:hover .con07__card--active:not(:hover) .con07__card-icon { opacity: 0; transform: translateY(1rem) scale(0.9); transition-duration: 0.22s; transition-delay: 0s; }
.con07__cards:hover .con07__card--active:not(:hover) .con07__card-copy { opacity: 0; transform: translateY(1rem); transition-duration: 0.22s; transition-delay: 0s; }

/* 상시 장식 루프 = CSS keyframes. 인트로가 끝나면 .con07__section--loop가 붙어 시작한다.
   (JS-off 이거나 인트로 전이면 클래스가 없어 화살표는 시안대로 흰색 그대로) */
.con07__section--loop .con07__timeline-arrow--1 img,
.con07__section--loop .con07__timeline-arrow--2 img,
.con07__section--loop .con07__timeline-arrow--3 img { animation: con07-arrow-signal 1.8s linear infinite; }
.con07__section--loop .con07__timeline-arrow--2 img { animation-delay: 0.6s; }
.con07__section--loop .con07__timeline-arrow--3 img { animation-delay: 1.2s; }
.con07__section--loop .con07__growth-badge { animation: con07-badge-breath 2.4s ease-in-out infinite; }

@keyframes con07-arrow-signal {
    0% { opacity: 0.4; }
    8% { opacity: 1; }
    33% { opacity: 0.4; }
    100% { opacity: 0.4; }
}
@keyframes con07-badge-breath {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.con07__card-head { width: 100%; height: 10rem; background: #000000; }
.con07 .con07__card-headline--analysis, .con07 .con07__card-headline--launch, .con07 .con07__card-headline--data, .con07 .con07__card-headline--settle { line-height: normal; }
/* 시안 아이콘 top = 카드 상단 12.8rem (head 10rem + 2.8rem) */
.con07__card-icon { margin-top: 2.8rem; }
.con07__card-copy { height: 4.2rem; margin-top: 1.9rem; white-space: nowrap; text-align: center; }

/* FONT:AUTO 재생성 보정 — 관리블록은 손대지 않고 밖에서 유지한다(시안 확정 렌더값).
   spec 의 line-height 는 PSD 고정 leading 유래라 흐름 높이를 부풀린다(.con07__head 가 auto 라 섹션 전체가 밀림). */
.con07 .con07__eyebrow { line-height: 1; }
.con07 .con07__lead { line-height: 1.5; }
.con07 .con07__card-title--analysis { line-height: normal; }

/* FONT:AUTO con07 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con07__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--titleXS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 2.43;
    color: #ffffff;
}

.con07__title {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
}

.con07__title-line--1 {
    color: #ffffff;
}

.con07__title-line--2 {
    color: #fad294;
}

.con07__stabilization-copy {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #ffffff;
}

.con07__lead {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 2.57;
    color: #ffffff;
}

.con07__card-title--analysis {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.25;
    color: #ffffff;
}

.con07__card-headline--analysis {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.57;
    color: #ffffff;
}

.con07__card-copy--analysis {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: #000000;
}

.con07__card-title--launch {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #ffffff;
}

.con07__card-headline--launch {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.57;
    color: #ffffff;
}

.con07__card-copy--launch {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: #000000;
}

.con07__card-title--data {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #ffffff;
}

.con07__card-headline--data {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.57;
    color: #ffffff;
}

.con07__card-copy--data {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: #000000;
}

.con07__card-title--settle {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #ffffff;
}

.con07__card-headline--settle {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.57;
    color: #ffffff;
}

.con07__card-copy--settle {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: #000000;
}
/* /FONT:AUTO con07 */


/* con08 */
.con08 {
    height: 100.6rem;
    background: #ffffff;
}

.con08__scene {
    width: 100%;
    height: 100.6rem;
}

.con08 :is(h2, h3, p) {
    margin: 0;
}

.con08__visual {
    left: 46.55rem;
    top: 4.6rem;
    width: 93.5rem;
    height: 93.5rem;
    z-index: 0;
}

.con08__circle--outer,
.con08__circle--inner {
    width: auto;
}

.con08__circle--outer {
    z-index: 0;
}

.con08__circle--inner {
    left: 16.1rem;
    top: 15.7rem;
    z-index: 1;
}

@media (min-width: 600px) {
    /* 접시 트랙 — 컨테이너를 "큰 접시 자리" 한 칸(45.33rem)으로만 두고 overflow 를 열어 둔다.
       그러면 active 가 곧 큰 자리가 되고 이전 슬라이드들이 왼쪽 밖 칸(중심 49.475 / 4.15rem)에
       자동 배치돼, PC·모바일 모두 활성 판정이 .swiper-slide-active 하나로 통일된다.
       바닥은 88.5rem(절대) 정렬 — 시안의 세 접시가 이미 바닥선 정렬이라 img 폭만 키우면
       큰 접시의 top 16.25rem 이 따로 계산 없이 재현된다. */
    /* 컨테이너 = 3칸(45.33rem × 3). 원 트랙과 slidesPerView 를 3 으로 통일해야
       loop 재배치·translate 환산이 같아져 controller 동기가 깨지지 않는다.
       트랙은 slidesOffsetBefore 로 2칸 밀어 active(=큰 접시)가 마지막 칸에 오게 한다. */
    .con08__image-swiper {
        position: absolute;
        left: -65.08rem;
        top: 0;
        width: 135.98rem;
        height: 83.9rem;
        /* 큰 접시(우단 137.25rem)가 컨테이너 우단(117.45)을 넘으므로 그만큼만 열어준다. */
        overflow: visible;
        clip-path: inset(0 -19.8rem 0 0);
        z-index: 2;
    }

    .con08__image-swiper .swiper-wrapper {
        height: 100%;
        align-items: flex-end;
    }

    .con08__image-swiper .swiper-slide {
        position: relative;
        display: block;
        height: 100%;
        overflow: visible;
        z-index: 1;
    }

    /* 큰 접시(84.9rem)는 슬라이드(45.33rem)를 넘치는데, 넘치는 flex item 에는 justify-content 도
       margin:auto 도 먹지 않아 좌단에 붙는다. 바닥 고정 + 좌우 중앙은 absolute 로만 성립한다. */
    .con08__image-swiper .swiper-slide img {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 31.6rem !important;
        height: auto !important;
        transition: width 600ms ease, opacity 600ms ease, transform 600ms ease;
    }

    /* 시안의 세 슬롯은 등간격이 아니다(중심 4.15 / 41.25 / 94.8rem — 간격 37.1 · 53.55).
       트랙은 균일해야 하므로 칸 자체는 45.33rem 등간격으로 두고, 어긋나는 만큼만
       슬라이드 안에서 translateX 로 되민다. 폭도 시안 실측값으로 되돌린다. */
    .con08__image-swiper .swiper-slide-prev img {
        width: 30.7rem !important;
        transform: translateX(calc(-50% - 8.22rem));
    }

    /* 다음 칸은 큰 접시와 가로로 겹치는데, 큰 접시 이미지의 투명 여백 때문에 z-index 로 가려지지 않는다.
       숨기면 롤링할 때 갑자기 나타나므로, clip 우단(137.25rem) 바깥에 대기시켰다가
       transform transition 을 타고 자연스럽게 들어오게 한다. */
    .con08__image-swiper .swiper-slide-next img {
        transform: translateX(calc(-50% + 14rem));
    }

    .con08__image-swiper .swiper-slide:has(+ .swiper-slide-prev) img {
        width: 32.5rem !important;
    }

    .con08__image-swiper .swiper-slide-active {
        z-index: 2;
    }

    .con08__image-swiper .swiper-slide-active img {
        width: 84.9rem !important;
    }
}

.con08__lead {
    left: 23.15rem;
    top: 16.2rem;
    width: 43.8rem;
    height: 29.1rem;
    gap: 1.8rem;
    z-index: 2;
}

.con08__lead-label {
    position: relative;
    top: 0.2rem;
    width: 8.6rem;
}

.con08__lead-title {
    position: relative;
    left: -0.1rem;
    top: -0.4rem;
    width: max-content;
    height: 12.9rem;
    white-space: nowrap;
}

@media (min-width: 600px) {
    /* 시간대 원 트랙 = 슬라이드 3칸 + spaceBetween 1.6rem(JS). 3번째 칸이 캔버스를 넘어
       우측으로 잘리는 것은 시안 그대로다 → overflow visible 유지. */
    .con08__description-swiper {
        position: absolute;
        left: 120.35rem;
        top: 25rem;
        width: 81.6rem; /* 27.2rem × 3칸 — 슬라이드 폭이 곧 원(25.6) + 시안 gap(1.6) 이 되게 한다 */
        height: 25.6rem;
        overflow: hidden; /* loop translate 로 왼쪽에 대기하는 칸들을 가린다 */
        z-index: 3;
    }

    .con08__description-swiper .con08__daypart {
        width: 25.6rem;
    }
}

.con08__daypart {
    height: 25.6rem;
    flex-shrink: 0;
    /* 원 안 제목·설명은 시안이 가운데 정렬 — 상속 속성이라 원(카드) 부모가 소유한다. */
    text-align: center;
}

.con08__daypart--morning {
    width: 25.5rem;
}

.con08__daypart--evening {
    width: 25.6rem;
}

.con08__daypart--night {
    width: 25.7rem;
}

.con08__daypart-bg {
    left: 0;
    top: 0;
    z-index: 0;
}

.con08__daypart-bg--morning {
    top: 0.1rem;
    width: 25.3rem;
}

.con08__daypart-bg--evening {
    left: 0.15rem;
    top: 0.1rem;
    width: 25.3rem;
}

.con08__daypart-bg--night {
    width: 25.7rem;
}

.con08__daypart-title,
.con08__daypart-desc {
    z-index: 1;
    white-space: nowrap;
}

.con08__daypart-title--morning {
    left: 5.5rem;
    top: 8.5rem;
    width: 14.4rem;
    height: 2.9rem;
}

.con08__daypart-desc--morning {
    left: 5rem;
    top: 13.4rem;
    width: 15.5rem;
    height: 4.2rem;
}

.con08__daypart-title--evening {
    left: 10.05rem;
    top: 8.6rem;
    width: 5.3rem;
    height: 2.8rem;
}

.con08__daypart-desc--evening {
    left: 5.75rem;
    top: 13.4rem;
    width: 13.9rem;
    height: 4.2rem;
}

.con08__daypart-title--night {
    left: 10.2rem;
    top: 8.6rem;
    width: 5.3rem;
    height: 2.8rem;
}

.con08__daypart-desc--night {
    left: 5.9rem;
    top: 13.4rem;
    width: 13.9rem;
    height: 4.2rem;
}

.con08__conclusion {
    left: 121.15rem;
    top: 63.9rem;
    width: 50.9rem;
    height: 21.7rem;
    gap: 4rem;
    z-index: 2;
}

.con08__conclusion-title {
    width: 46.6rem;
    height: 12.9rem;
    gap: 0;
}

.con08__conclusion-title-lead,
.con08__conclusion-title-point {
    white-space: nowrap;
}

.con08__conclusion-title-lead {
    width: 46.6rem;
    height: 7.2rem;
}

.con08__conclusion-title-point {
    width: 25rem;
    height: 5.7rem;
}

.con08__conclusion-desc {
    /* width: 50.8rem; */
    height: 4.8rem;
    margin-left: 0.1rem;
}


/* FONT:AUTO con08 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con08__lead-title {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con08__daypart-title--morning {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.25;
    color: #fad294;
}

.con08__daypart-desc--morning {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #ffffff;
}

.con08__daypart-title--evening {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.25;
    color: #ffffff;
}

.con08__daypart-desc--evening {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #ffffff;
}

.con08__daypart-title--night {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 2.25;
    color: #ffffff;
}

.con08__daypart-desc--night {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #ffffff;
}

.con08__conclusion-title-lead {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con08__conclusion-title-point {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con08__conclusion-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO con08 */

.con08__daypart-title--morning,
.con08__daypart-title--evening,
.con08__daypart-title--night {
    font-size: calc(var(--headL) + 0.2rem);
    line-height: 1;
}


/* 활성 원 = 슬라이드 active(PC 좌측 첫 칸 / 모바일 중앙). PC·모바일 공통. */
.con08__description-swiper .con08__daypart-bg-image { transition: opacity 400ms ease; }
.con08__description-swiper .con08__daypart-bg-image--default { opacity: 1; }
.con08__description-swiper .con08__daypart-bg-image--active { inset: 0; opacity: 0; }
.con08__description-swiper .swiper-slide-active .con08__daypart-bg-image--default { opacity: 0; }
.con08__description-swiper .swiper-slide-active .con08__daypart-bg-image--active { opacity: 1; }
.con08__description-swiper .con08__daypart-title { transition: color 400ms ease; }
.con08__description-swiper .swiper-slide-active .con08__daypart-title { color: #fad294; }


/* con09 */
.con09 {
    height: 154.3rem;
    background-image: url('/images/con09_06.webp');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 192rem 154.6rem;
}

.con09__scene {
    width: 100%;
    height: 154.3rem;
    gap: 3.8rem;
}

.con09__fire-video {
    left: -0.75rem;
    top: 46.2rem;
    width: 192rem;
    height: 108rem;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.con09__stage-mask {
    left: 3.45rem;
    top: 5rem;
    z-index: 1;
}

.con09__hero {
    width: 100%;
    height: 62.9rem;
    z-index: 2;
}

.con09__hanja--meat {
    left: 52.25rem;
    top: 16rem;
    z-index: 0;
}

.con09__hanja--food {
    left: 122.65rem;
    top: 15.8rem;
    z-index: 0;
}

.con09__hero-visual {
    left: 66.65rem;
    top: -8.9rem;
    width: 65rem;
    height: 58.3rem;
}

.con09__smoke {
    left: 0.4rem;
    top: 3.6rem;
    z-index: 1;
}

.con09__pork {
    left: 0;
    top: 0;
    z-index: 2;
}

.con09__hero-copy {
    left: 58.05rem;
    top: 47.9rem;
    height: 9.3rem;
    gap: 1.9rem;
    z-index: 3;
}

.con09__hero-title {
    height: 5.4rem;
}

.con09__hero-description {
    height: 2rem;
}

.con09__business {
    width: 137.7rem;
    height: 75.9rem;
    gap: 2.7rem;
    z-index: 2;
}

.con09__business-headline {
    height: 12.9rem;
    gap: 0;
}

.con09__business-title {
    top: -0.9rem;
    height: 7.2rem;
}

.con09__business-title-point {
    left: -0.2rem;
    top: -0.9rem;
    height: 7.2rem;
}

.con09__metrics {
    width: 137.7rem;
    height: 60.3rem;
}

.con09__metrics-panel {
    left: 0;
    top: 0;
    z-index: 0;
}

.con09__metrics-content {
    left: 19.4rem;
    top: 9.7rem;
    width: 102.5rem;
    height: 41.4rem;
    gap: 9.3rem;
    z-index: 1;
}

.con09__chart {
    width: 40.7rem;
    height: 40.9rem;
    top: 0.5rem;
}

.con09__chart-label {
    left: 15.2rem;
    top: 13.9rem;
    z-index: 1;
}

.con09__chart-value {
    left: 11.6rem;
    top: 17.3rem;
    z-index: 1;
}

.con09__chart-food {
    left: 6.8rem;
    top: 22.5rem;
    clip-path: circle(13.35rem at 13.55rem -2.15rem);
    z-index: 2;
}

.con09__table {
    width: 52.5rem;
    height: 41.2rem;
}

.con09__table-total-value {
    left: 43.6rem;
    top: 37.9rem;
    z-index: 2;
}

/* 두 67% 점멸 = vweb-anim.css .v-blink (등장 완료 후 JS 가 클래스 부여) — 기본 1s 는 너무 잦아 주기만 늘린다 */
.con09__chart-value,
.con09__table-total-value {
    animation-duration: 2.4s;
}

/* FONT:AUTO con09 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con09__hero-title {
    font-family: var(--font-ridibatang);
    font-size: var(--titleL);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1;
    color: #ffffff;
}

.con09__hero-description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #7c2d2d;
}

.con09__business-title {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con09__business-title-point {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}
/* /FONT:AUTO con09 */


/* con10 */
/* 카드 수가 DB 가변이라 섹션 높이를 시안값으로 고정하지 않는다.
   하단 여백만 고정(시안 1392 = 상단 16.2rem + 카드 2행 + 이 값) — 카드가 줄면 섹션도 함께 줄어든다. */
.con10 {
    padding-bottom: 6.09rem;
    background-image: url('/images/con10_03.webp');
    background-position: center -0.1rem;
    background-repeat: no-repeat;
    background-size: 192rem 235.2rem;
    overflow: visible;
}

.con10__inner {
    margin-top: 16.2rem;
}

.con10__head {
    gap: 2.2rem;
}

.con10__title-line,
.con10__title-line--point {
    left: -0.1rem;
    top: -0.8rem;
}

.con10__title {
    margin-bottom: -1.4rem;
}

.con10__description {
    left: 0.2rem;
    top: -0.5rem;
    margin-bottom: -1rem;
    white-space: nowrap;
}

/* 탭 간격은 부모 gap 이 단독 소유 — 탭별 margin 금지(간격 불균등의 원인이었음).
   탭 폭은 항상 라벨 폭이라 active 가 옮겨다녀도 레이아웃이 흔들리지 않는다. */
.con10__tabs {
    margin-top: 5.2rem;
    gap: 5.6rem;
}

.con10__tab {
    height: 5.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* active pill 은 배경만 좌우로 넓힌다(레이아웃 폭 불참) → 시안 pill 14.1rem 유지 + 탭 간격 균일 양립 */
.con10__tab--active::before {
    content: "";
    position: absolute;
    inset: 0 -3.65rem;
    border-radius: 99rem;
    background: #b61822;
}

.con10__tab-divider {
    width: 1px;
    height: 1.8rem;
    background: #8f8f8f;
}

.con10__card-grid {
    width: 152.5rem;
    margin-top: 3.8rem;
}

.con10__card-wrapper {
    flex-wrap: wrap;
}

.con10__card {
    box-sizing: border-box;
    min-width: 0;
    height: 34.7rem !important;
    padding: 0;
    overflow: hidden;
    border: 1px solid #000000;
    border-radius: 2rem;
    background: #ffffff;
}

.con10__card:nth-child(n + 5) {
    margin-top: 2.9rem !important;
}

.con10__card-media {
    min-height: 0;
    flex: 0 0 26.9rem;
    overflow: hidden;
}

.con10__card-photo {
    height: 100%;
    object-fit: cover;
}

.con10__card-media {
    width: 100%;
    background: #000000;
    border-bottom: 1px solid #222;
    box-sizing: border-box;
}

.con10__card-name {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 메뉴명은 관리자 입력이라 길이 무제한 — .textLine-1 말줄임은 flex 컨테이너(h3)가 아닌 자식에서만 먹는다 */
.con10__card-name-text {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 0 1.2rem;
}

/* 카테고리에 등록된 글이 0건일 때만 노출 — 카드 목록·페이지네이션과 배타 */
.con10__empty {
    margin-top: 3.8rem;
    padding: 6rem 0;
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #8f8f8f;
}

/* 목록/문구 전환은 런타임 상태라 hidden 속성이 소유한다 — .flex·.swiper 유틸의 display 를 눌러야 함 */
.con10 [hidden] {
    display: none !important;
}

.con10__pagination {
    margin-top: 3.6rem;
    gap: 1.3rem;
}

.con10__pagination-button--prev,
.con10__pagination-button--next {
    width: 6.6rem;
    height: 6.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.con10__pagination-button--next {
    transform: rotate(180deg);
}

.con10 .swiper-button-disabled,
.con10 .swiper-button-lock {
    display: block !important;
    opacity: 1;
}

/* FONT:AUTO con10 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con10__title-line {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con10__title-line--point {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con10__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #000000;
}

.con10__tab-label.con10__tab-label--active {
    font-family: var(--font-paperlogy);
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 3.6;
    color: #ffffff;
}

.con10__tab-label {
    font-family: var(--font-paperlogy);
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 3.6;
    color: #000000;
}

.con10__card-name {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO con10 */


/* con11 */
.con11 {
    height: 95.8rem;
    padding: 6.1rem 0 0 0.85rem;
    box-sizing: border-box;
    background-image: url('/images/con10_03.webp');
    background-position: center -139.2rem;
    background-repeat: no-repeat;
    background-size: 192rem 235.2rem;
    overflow: hidden;
}

.con11 :is(h2, p) {
    margin: 0;
}

.con11__scene {
    overflow: hidden;
    border-radius: 5rem;
}

.con11__scene::after {
    position: absolute;
    inset: 0;
    z-index: 6;
    box-sizing: border-box;
    border: 1px solid #000000;
    border-radius: 5rem;
    content: '';
    pointer-events: none;
}

.con11__scene-base-img,
.con11__reorder-badge-img,
.con11__phone-img {
    width: auto;
}

.con11__copy {
    left: 16.7rem;
    top: 23.1rem;
    z-index: 2;
}

.con11 .con11__title {
    margin-top: 3.7rem;
    margin-left: -0.1rem;
}

.con11 .con11__description {
    margin-top: 8.2rem;
}

.con11__reorder-badge {
    left: 83.9rem;
    top: 12.6rem;
    z-index: 5;
}

.con11__review-track {
    gap: 3.5rem;
    flex-shrink: 0;
}

.con11__review-stage {
    left: 112.7rem;
    top: -16rem;
    z-index: 1;
}

.con11__review-track--right {
    margin-top: -26.8rem;
    margin-left: -2rem;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.86) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.86) 100%);
}

.con11__review-track--left {
    z-index: 1;
}

.con11__review-card {
    overflow: hidden;
    border-radius: 2rem;
    background: #ffffff;
}

.con11__review-card-img {
    display: block;
    width: 32.1rem;
    height: auto;
}

.con11__phone {
    left: 62.2rem;
    top: 32.9rem;
    z-index: 3;
}

.con11__phone-overlay {
    left: 77rem;
    top: 39rem;
    width: 31.1rem;
    height: 39.6rem;
    overflow: hidden;
    z-index: 4;
}

.con11__phone-review-img {
    width: 28.8rem;
}

.con11__review-track--rolling.con11__review-track--left {
    animation: con11RollUp 40s linear infinite;
}

.con11__review-track--rolling.con11__review-track--right {
    animation: con11RollDown 52s linear infinite;
}

@keyframes con11RollUp {
    from { transform: translateY(0); }
    to { transform: translateY(calc(var(--con11-roll) * -1)); }
}

@keyframes con11RollDown {
    from { transform: translateY(calc(var(--con11-roll) * -1)); }
    to { transform: translateY(0); }
}

.con11__phone-slide {
    height: 100%;
}


/* FONT:AUTO con11 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con11__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--headM);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 6.54;
    color: #ffffff;
}

.con11__title-main {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con11__title-point {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con11__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #ffffff;
}
/* /FONT:AUTO con11 */

.con11 .con11__eyebrow {
    line-height: 0.96;
}

.con11 .con11__description {
    line-height: 1.14;
}


/* con12 */
.con12 {
    height: 113.6rem;
    background: url('/images/con12_06.webp') center / cover no-repeat;
}

.con12__inner {
    width: 135.7rem;
    margin: 14.3rem auto 0;
    align-items: center;
    gap: 4.7rem;
}

.con12__head {
    gap: 3.5rem;
}

.con12__heading {
    gap: 1.4rem;
}

.con12__title {
    gap: 0.8rem;
}

.con12__benefits {
    width: 100%;
    align-self: stretch;
    gap: 16.4rem;
}

.con12__benefit-row--top,
.con12__benefit-row--bottom {
    position: relative;
    width: 100%;
    justify-content: space-between;
}

.con12__benefit-row--top {
    z-index: 1;
}

.con12__benefit-row--bottom {
    z-index: 3;
}

.con12__card {
    width: 32.1rem;
    height: 20.5rem;
}

.con12__card-bg {
    position: absolute;
    inset: 0;
    background-color: #000000;
    border: 0.1rem solid rgba(255, 255, 255, 0.2);
    border-radius: 2.5rem;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.45s ease;
}

.con12__card.is-active .con12__card-bg {
    background-color: var(--secondary);
}

.con12__card-bg img {
    display: none;
}

.con12__card-content {
    left: 0;
    right: 0;
    top: 5.3rem;
    width: 25rem;
    margin-inline: auto;
    gap: 1.5rem;
}

.con12__card--05 .con12__card-content {
    gap: 1.4rem;
    top: 5.1rem;
}

.con12__card-head--01,
.con12__card-head--02,
.con12__card-head--03,
.con12__card-head--04,
.con12__card-head--05,
.con12__card-head--06,
.con12__card-head--07,
.con12__card-head--08 {
    width: 25rem;
    justify-content: space-between;
}

.con12__card-desc--01,
.con12__card-desc--02,
.con12__card-desc--03,
.con12__card-desc--04,
.con12__card-desc--05,
.con12__card-desc--06,
.con12__card-desc--07,
.con12__card-desc--08 {
    align-self: stretch;
    text-align: left;
}

.con12__visual-wrap {
    width: 100%;
    top: 14.6rem;
    z-index: 2;
}

.con12__eight-free-wrap {
    top: 1rem;
    right: 0;
    bottom: auto;
    left: 0;
}

/* FONT:AUTO con12 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con12__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--headM);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 6.54;
    color: #ffffff;
}

.con12__title-primary {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con12__title-accent {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con12__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #ffffff;
}

.con12__card-title--01 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--01 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--02 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--02 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--03 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--03 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--04 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--04 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--05 {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.53;
    color: #ffffff;
}

.con12__card-desc--05 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--06 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--06 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--07 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--07 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}

.con12__card-title--08 {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #ffffff;
}

.con12__card-desc--08 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.39;
    color: #ffffff;
}
/* /FONT:AUTO con12 */

/* PSD leading은 웹 line box로 직접 적용할 수 없어 흐름만 보정한다. */
.con12__eyebrow {
    line-height: 1;
}

.con12__title-primary,
.con12__title-accent {
    line-height: 0.99;
}

.con12__description {
    line-height: 1.05;
    white-space: nowrap;
}


/* con13 */
.con13 {
    height: 118.7rem;
    background-image: url('/images/con13_10.webp');
    background-position: center;
    background-size: cover;
}

.con13__inner {
    box-sizing: border-box;
    width: 100%;
    height: 118.7rem;
    padding-top: 17.8rem;
}

.con13__title-main,
.con13__title-accent {
    display: inline;
}

.con13__title-accent {
    display: inline-block;
    transform: translate(-0.2rem, -0.8rem);
}

.con13__title {
    margin-top: 2.2rem;
}

.con13__description {
    margin-top: 1.471875rem;
}

.con13__notice {
    left: 48.55rem;
    top: 44rem;
    width: 91.6rem;
    height: 60rem;
    z-index: 1;
}

.con13__notice-paper {
    align-self: flex-start;
    margin: 0.7rem 0 0 4.4rem;
}

.con13__tape--left {
    left: 0;
    top: 2.5rem;
    z-index: 3;
}

.con13__tape--right {
    left: 73.3rem;
    top: 0;
    width: 18.3rem;
    /* height: 11.5rem; */
    overflow: hidden;
    z-index: 3;
    transform: scaleX(-1);
}

.con13__tape-peel {
    /* width: 18.4rem; */
}

.con13__tape-peel .peel-main {
    position: relative;
    height: auto;
}

.con13__notice-content {
    left: 27.4rem;
    top: 13.4rem;
    width: 38.5rem;
    height: 21.5rem;
    z-index: 2;
}

.con13__notice-stamp {
    align-self: flex-start;
}

.con13__notice-stamp img {
    transform: translate(-0.1rem, -2.5rem);
}

.con13__notice-message {
    margin-top: -0.4rem;
}

.con13__notice-cost {
    margin-top: 1.8rem;
    white-space: nowrap;
}

.con13__brand-list {
    box-sizing: border-box;
    left: 31.35rem;
    top: 82.3rem;
    width: 127.6rem;
    height: 22.9rem;
    /* padding-bottom: 0.3rem; */
    z-index: 4;
}

.con13__brand--seolleongtang {
    /* margin-bottom: 2.4rem; */
}

.con13__brand--kalguksu {
    transform: translate(0.1rem, 0.1rem);
}

.con13__brand--jjageuri {
    transform: translate(-0.1rem, 0.1rem);
}

.con13__brand--riceplus {
    transform: translate(-0.2rem, 0.1rem);
}

/* 신호등 모션이 .con13__brand--active 를 카드 사이로 옮겨 다닌다.
   transition 은 진입 타임라인이 끝나고 순환이 시작될 때 붙는 --live 스코프 안에만 둔다.
   상시로 두면 GSAP 가 매 프레임 쓰는 transform 을 이 transition 이 다시 보간해
   등장(opacity)과 스케일업이 따로 노는 것처럼 보인다(animation-guide §7). */
.con13__brand-list--live .con13__brand img { transition: transform .38s, filter .38s; }
.con13__brand--active img,
.con13__brand-list:hover .con13__brand.hover img {
    transform: translateY(-2.4rem);
    filter: drop-shadow(0 1.6rem 2.2rem rgba(0, 0, 0, .38));
}
.con13__brand-list:hover .con13__brand--active:not(.hover) img { transform: none; filter: none; }

/* FONT:AUTO con13 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con13__eyebrow {
    font-family: var(--font-ridibatang);
    font-size: var(--headM);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1;
    color: #ffffff;
}

.con13__title-main {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con13__title-accent {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con13__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #ffffff;
}

.con13__notice-message {
    font-family: var(--font-paperlogy);
    font-size: var(--titleS);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.11;
    color: #000000;
}

.con13__notice-cost {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #000000;
}
/* /FONT:AUTO con13 */


/* con14 */
.con14 {
    overflow: visible;
    height: 41.3rem;
    background: #8d0d15 url('/images/con14_01.webp') center 0.5rem / 192rem 40.9rem no-repeat;
}

.con14__pan {
    left: 50.45rem;
    top: -7.5rem;
    width: fit-content;
    z-index: 1;
}

.con14__title--yook {
    left: 45.35rem;
    top: 8.8rem;
    width: fit-content;
    z-index: 2;
}

.con14__title--sik {
    left: 124.55rem;
    top: 10.7rem;
    width: fit-content;
    z-index: 2;
}

.con14__title--yook::after,
.con14__title--sik::after {
    position: absolute;
    inset: 0;
    content: '';
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.con14__title--yook::after {
    background: linear-gradient(180deg, #970f16 0%, #970f16 50%, #c02d1e 75%, #fe582f 100%);
    mask-image: url('/images/con14_02.webp');
}

.con14__title--sik::after {
    background: linear-gradient(180deg, #ce2e21 0%, #e0402a 20%, #cb3125 50%, #c73523 75%, #930e16 100%);
    mask-image: url('/images/con14_03.webp');
}

.con14__pan img,
.con14__title--yook img,
.con14__title--sik img {
    display: block;
    width: auto;
    max-width: none;
}

.con14__title--yook img,
.con14__title--sik img {
    opacity: 0;
}


/* con15 */
.con15 {
    height: 120.5rem;
    background: #fdf1e2;
}

.con15__inner {
    width: 100%;
    height: 120.5rem;
    padding-top: 9.2rem;
    box-sizing: border-box;
}

.con15__brand-mark {
    width: 17.1rem;
}

.con15__brand-mark img {
    display: block;
}

.con15__title {
    margin-top: 0.9rem;
    gap: 1.2rem;
}

.con15__title-brand,
.con15__title-label {
    display: inline;
}

.con15__search {
    position: absolute;
    left: 59.25rem;
    top: 37.1rem;
    z-index: 3;
    width: 71.9rem;
    height: 9.2rem;
    padding: 0 4.2rem 0 5.4rem;
    box-sizing: border-box;
    border: 1px solid #000000;
    border-radius: 4.4111351169rem;
    background: #ffffff;
}

.con15__search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.con15__search-input::placeholder {
    color: #111112;
    opacity: 1;
}

.con15__search-btn {
    flex: 0 0 3.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.con15__search-btn img {
    display: block;
    transform: translateY(-0.3rem);
}

.con15__workspace {
    width: 160.8rem;
    height: 69.4rem;
    margin-top: 7rem;
    box-sizing: border-box;
    border: 1px solid #000000;
    border-radius: 3rem;
    background: #ffffff;
    overflow: hidden;
}

.con15__store-list {
    flex: 0 0 38rem;
    padding: 7.8rem 0 0 0.6rem;
    box-sizing: border-box;
    border-right: 1px solid #000000;
    overflow-y: auto;
}

.con15__store-card {
    flex: 0 0 13.9rem;
    width: 100%;
    padding: 6rem 6.5rem 6rem 6.2rem;
    box-sizing: border-box;
    border-bottom: 1px solid #e4d4d5;
    cursor: pointer;
}

.con15__store-content {
    align-items: flex-start;
}

.con15__store-name,
.con15__store-address,
.con15__store-phone {
    margin: 0;
}

.con15__store-phone {
    margin-top: 0.1rem;
}

.con15__store-more {
    flex: 0 0 4.3rem;
    align-self: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(0.6rem);
}

.con15__store-more img {
    display: block;
}

.con15__map {
    flex: 0 0 122.6rem;
    height: 100%;
    margin-top: 0;
    border-radius: 0 2.9rem 2.9rem 0;
    background: #a5d2f2;
    isolation: isolate;
    overflow: hidden;
}

/* 모바일 지도 터치 잠금 오버레이 — map.js 가 주입/토글(뷰포트 ≤599px 에서만 노출) */
.map-touch-lock-parent {
    position: relative;
}

.map-touch-lock {
    position: absolute;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    background: rgba(0, 0, 0, 0.58);
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}

/* 실제 노출은 모바일 뿐 — 사이즈는 mobile_style.css 가 소유 */
.map-touch-lock-text {
    display: block;
    font-size: var(--bodyM);
    font-weight: 700;
    line-height: 1.35;
}

.is-map-touch-unlocked .map-touch-lock {
    opacity: 0;
    pointer-events: none;
}

.store__marker {
    width: 9rem;
    height: 9rem;
    cursor: pointer;
}

.store__marker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 매장 상세 팝업 (map.js buildPop 이 body 직하위에 생성 — 섹션 무관 공통) */
/* 열고 닫기는 .is-open 토글 — display 대신 opacity/visibility 라 페이드가 걸린다.
   닫힐 때 visibility 는 페이드가 끝난 뒤 전환돼야 사라지는 순간이 튀지 않는다. */
.store__pop-dim {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0.4rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.store__pop-dim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.store__pop {
    position: relative;
    width: 90rem;
    max-width: 92vw;
    padding: 2.5rem;
    box-sizing: border-box;
    border: 1px solid var(--c-point);
    border-radius: 2rem;
    background: #ffffff;
    overflow: hidden;
}

.store__pop-close {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    z-index: 1;
    padding: 0;
    border: none;
    background: none;
    font-size: var(--headL);
    line-height: 1;
    color: #888888;
    cursor: pointer;
}

.store__pop-photo {
    flex-shrink: 0;
    width: 41rem;
    height: 34.3rem;
    border-radius: 2rem;
    background: #f2f2f2;
    overflow: hidden;
}

.store__pop-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store__pop-body {
    flex: 1;
    align-items: flex-start;
    padding-left: 3.4rem;
    padding-right: 0.7vw;
    font-family: var(--font-suit);
    letter-spacing: -0.03em;
    color: #555555;
}

.store__pop-name {
    margin-top: 6.7rem;
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #131313;
}

.store__pop-line {
    width: 100%;
    height: 1px;
    margin-top: 1.8rem;
    background: #b2b2b2;
}

.store__pop-row {
    display: flex;
    align-items: flex-start;
    margin-top: 0.3rem;
    font-size: var(--bodyL);
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
}

.store__pop-addr {
    margin-top: 1.9rem;
}

.store__pop-label {
    flex-shrink: 0;
    width: 5rem;
    font-weight: 600;
    color: #131313;
}

.store__pop-val {
    flex: 1;
}

.store__pop-naver {
    align-self: flex-start;
    height: 3.5rem;
    margin-top: 3.5rem;
    padding: 0 2rem;
    gap: 0.4rem;
    border-radius: 0.8rem;
    background: var(--c-point);
    font-size: var(--bodyL);
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}

.store__pop-naver-chev {
    width: 2rem;
}

/* FONT:AUTO con15 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con15__title-brand {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #b71822;
}

.con15__title-label {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #000000;
}

.con15__search-input {
    font-family: var(--font-suit);
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.16;
    color: #111112;
}

.con15__store-name {
    font-family: var(--font-suit);
    font-size: var(--headS);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #000000;
}

.con15__store-address {
    font-family: var(--font-suit);
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.48;
    color: #000000;
}

.con15__store-phone {
    font-family: var(--font-suit);
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.48;
    color: #000000;
}
/* /FONT:AUTO con15 */


/* con16 */
.con16 {
    height: 110.2rem;
    background: #4a0306 url('/images/con16_11.webp') center center / cover no-repeat;
}

.con16__content {
    width: 84.8rem;
    margin-top: 14.8rem;
}

.con16__heading {
    height: 13rem;
    transform: translate(-0.2rem, -0.8rem);
}

.con16__title-accent,
.con16__title-main {
    display: block;
}

.con16__description {
    margin: 2.9rem 0 0;
    transform: translate(0.2rem, -0.5rem);
}

.con16__form {
    position: relative;
    width: 79.9rem;
    margin-top: 3.2rem;
    padding: 4.2rem 9.9rem 4.9rem 9.8rem;
    box-sizing: border-box;
    background: #ffffff;
}

.con16__form::before,
.con16__form::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #000000;
    content: '';
}

.con16__form::before {
    top: 1.9rem;
}

.con16__form::after {
    bottom: 1.6rem;
}

.con16__field-list {
    width: 100%;
}

.con16__field {
    flex: 0 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid #000000;
    box-shadow: inset 0 -0.2rem transparent;
    transition: box-shadow 0.2s ease;
}

.con16__field--name,
.con16__field--region {
    height: 9rem;
}

.con16__field--phone {
    height: 8.9rem;
}

.con16__field--detail {
    height: 13.9rem;
}

.con16__field-label {
    flex: 0 0 12rem;
    width: 12rem;
    padding-left: 2rem;
    box-sizing: border-box;
}

.con16__field-input[type='text'],
.con16__field-input[type='tel'],
.con16__field-textarea {
    flex: 0 0 48.2rem;
    min-width: 0;
    width: 48.2rem;
    height: 100%;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background: transparent;
    appearance: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.con16__field-input[type='text']::placeholder,
.con16__field-input[type='tel']::placeholder,
.con16__field-textarea::placeholder {
    color: inherit;
    opacity: 1;
}

.con16__field:focus-within {
    box-shadow: inset 0 -0.2rem #b81824;
}

.con16 .con16__field-input[type='text']:focus,
.con16 .con16__field-input[type='tel']:focus,
.con16 .con16__field-textarea:focus,
.con16 .con16__field-input[type='text']:focus-visible,
.con16 .con16__field-input[type='tel']:focus-visible,
.con16 .con16__field-textarea:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
}

.con16__field-textarea {
    padding-block: 2rem;
    resize: none;
}

.con16__privacy {
    height: 1.6rem;
    position: relative;
    margin-top: 1rem;
    gap: 0.3rem;
}

.con16__privacy-input {
    position: relative;
    flex: 0 0 1.3rem;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    padding: 0;
    border: 1px solid #000000;
    border-radius: 0;
    box-sizing: border-box;
    appearance: none;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.con16__privacy-input::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    right: 0.15rem;
    bottom: 0.15rem;
    background: #b81824;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.con16__privacy-input:checked {
    border-color: #000000;
    background: #ffffff;
}

.con16__privacy-input:checked::after {
    opacity: 1;
    transform: scale(1);
}

.con16__privacy-label {
    cursor: pointer;
}

.con16__privacy-view {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    cursor: pointer;
}

.con16__submit {
    width: 100%;
    height: 7rem;
    margin-top: 2.1rem;
    padding: 0;
    border: 0;
    background: #b81824;
    cursor: pointer;
}

.con16__side-column {
    top: -0.1rem;
    width: 40.3rem;
    gap: 1.2rem;
    z-index: 0;
}

.con16__side-column--left {
    left: 4.85rem;
}

.con16__side-column--right {
    right: 4.85rem;
}

.con16__side-card img,
.con16__hanja img {
    display: block;
}

.con16__hanja {
    z-index: 2;
}

.con16__hanja img {
    width: auto;
    max-width: none;
}

.con16__hanja--meat {
    left: 15.65rem;
    top: 44.8rem;
}

.con16__hanja--food {
    left: 157.15rem;
    top: 44.7rem;
}


/* FONT:AUTO con16 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=rem) — 직접 수정 금지 */
.con16__title-accent {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #fad294;
}

.con16__title-main {
    font-family: var(--font-paperlogy);
    font-size: var(--displayS);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.11;
    color: #ffffff;
}

.con16__description {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 1.36;
    color: #ffffff;
}

.con16__field-label--name {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 4.09;
    color: #000000;
}

.con16__field-label--phone {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 4.09;
    color: #000000;
}

.con16__field-label--region {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 4.09;
    color: #000000;
}

.con16__field-label--detail {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 4.09;
    color: #000000;
}

.con16__privacy {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.77;
    color: #000000;
}

.con16__submit-label {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.36;
    color: #ffffff;
}
/* /FONT:AUTO con16 */