@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:con01 */
/* con01 — 모바일 접기 의도: 워터마크 2장은 상단 한 줄 축소, 접시 스테이지(배지 3개 absolute)는 배지를 접시 아래 column 으로 재배치 */
.con01 {
    background-color: #fffaf0;
}

.con01__marquee {
    padding: calc(var(--px) * 50) 0 calc(var(--px) * 26);
    overflow: hidden;
    background: linear-gradient(to bottom,
        #368318 0 calc(var(--px) * 9),
        #f44228 calc(var(--px) * 9) calc(var(--px) * 24),
        #2b1e04 calc(var(--px) * 24) 100%);
}

.con01__marquee-track {
    flex-shrink: 0;
    margin-left: calc(var(--px) * -103);
}

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

.con01__arc {
    bottom: 0;
    left: 0;
}

.con01__watermark {
    top: calc(var(--px) * 212);
}

.con01__watermark--since {
    left: calc(var(--px) * 71);
}

.con01__watermark--year {
    right: calc(var(--px) * 94);
}

.con01_iner {
    padding-top: calc(var(--px) * 71);
}

.con01__headline {
    margin-top: calc(var(--px) * 47);
}

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

.con01__stage {
    align-self: stretch;
    margin-top: calc(var(--px) * 21);
}

.con01__dish {
    margin-left: calc(var(--px) * 463);
}

.con01__spoon {
    right: calc(var(--px) * 115);
    bottom: 0;
}

.con01__badge--health {
    top: calc(var(--px) * 283);
    left: calc(var(--px) * 408);
}

.con01__badge--reorder {
    top: calc(var(--px) * 62);
    left: calc(var(--px) * 830);
}


.con01__badge--topping {
    top: calc(var(--px) * 283);
    right: calc(var(--px) * 397);
}

/* 신호등 — 시안에 그려진 두 디자인(점등 = 빨강 원 + 바깥 얇은 링 / 꺼짐 = 진갈색 원)이 배지 사이를 한 번에 하나씩 옮겨 다닌다.
   정지 상태(시안) = 빨강 배지 1개. 순환이 시작되면(JS 가 .con01__stage--lamp 부착) 꺼진 배지는 모두 진갈색.
   원 = CSS(.con01__badge-pc::before, 자산 PNG 알파 실측 지름 218 — 세 배지 동일), 글자 = 투명 PNG 마스크(con01_12~14).
   배지 바깥(.con01__badge)은 자기장 transform 소유 */
.con01__badge-pc {
    position: relative;
    aspect-ratio: 222 / 221;
}

.con01__badge--reorder .con01__badge-pc {
    aspect-ratio: 237 / 240;
}

/* 원 — 자산 PNG 안에서 원이 놓인 자리(건강/토핑 222x221 은 사방 2, 재주문 237x240 은 상10 우9 하17 좌10) */
.con01__badge-pc::before {
    content: "";
    position: absolute;
    inset: calc(var(--px) * 2);
    border-radius: 50%;
    background-color: #2b1e04;
    transition: background-color .45s ease-out;
}

.con01__badge--reorder .con01__badge-pc::before {
    inset: calc(var(--px) * 5) calc(var(--px) * 9) calc(var(--px) * 17) calc(var(--px) * 10);
}

/* 점등 광택 — 시안 빨강 원의 은은한 하이라이트(원과 같은 자리) */
.con01__badge-pc::after {
    content: "";
    position: absolute;
    inset: calc(var(--px) * 2);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .14), transparent 58%);
    opacity: 0;
    transition: opacity .45s ease-out;
}

.con01__badge--reorder .con01__badge-pc::after {
    inset: calc(var(--px) * 5) calc(var(--px) * 9) calc(var(--px) * 17) calc(var(--px) * 10);
}

.con01__badge-glyph {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #f9f1e2;
    -webkit-mask: var(--con01-glyph) center / 100% 100% no-repeat;
    mask: var(--con01-glyph) center / 100% 100% no-repeat;
}

.con01__badge--health { --con01-glyph: url(/images/con01_12.png); }
.con01__badge--reorder { --con01-glyph: url(/images/con01_13.png); }
.con01__badge--topping { --con01-glyph: url(/images/con01_14.png); }

.con01__badge--reorder .con01__badge-pc::before,
.con01__badge.hover .con01__badge-pc::before {
    background-color: #e83520;
}

.con01__badge--reorder .con01__badge-pc::after,
.con01__badge.hover .con01__badge-pc::after {
    opacity: 1;
}

.con01__stage--lamp .con01__badge--reorder:not(.hover) .con01__badge-pc::before {
    background-color: #2b1e04;
}

.con01__stage--lamp .con01__badge--reorder:not(.hover) .con01__badge-pc::after {
    opacity: 0;
}

/* 바깥 얇은 링 — 점등된 배지에만(등장 .is-in 뒤). 원(지름 218)과 완전한 동심원, 시안 실측 지름 248 = 원 바깥 15px.
   건강/토핑은 박스 중심 = 원 중심이라 사방 -13, 재주문은 원이 박스 안 (118.5, 113.5) 에 있어 그 중심 기준 */
.con01__badge::after {
    content: "";
    position: absolute;
    inset: calc(var(--px) * -13);
    border: 1px solid #c03a3a;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .45s ease-out;
    pointer-events: none;
}

.con01__badge--reorder::after {
    inset: calc(var(--px) * -10.5) calc(var(--px) * -5.5) calc(var(--px) * 2.5) calc(var(--px) * -5.5);
}

.con01__badge--reorder.is-in::after,
.con01__badge.is-in.hover::after {
    opacity: 1;
}

.con01__stage--lamp .con01__badge--reorder.is-in:not(.hover)::after {
    opacity: 0;
}

.con01__dish img {
    transition: transform .6s ease-out;
}

@media (hover: hover) {
    .con01__dish:hover img {
        transform: scale(1.025) rotate(-.4deg);
    }
}

.con01__spoon img {
    transform-origin: 85% 90%;
    animation: con01-sway 5s ease-in-out infinite alternate;
}

@keyframes con01-sway {
    from { transform: rotate(-1.3deg); }
    to { transform: rotate(1.3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .con01 .con01__badge-pc::before,
    .con01 .con01__badge-pc::after,
    .con01 .con01__badge::after,
    .con01 .con01__dish img {
        transition: none;
    }

    .con01 .con01__spoon img {
        animation: none;
    }
}

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

.con01__arc {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 319;
}

.con01__watermark.con01__watermark--since {
    width: calc(var(--px)*665);
    aspect-ratio: 665 / 229;
}

.con01__watermark.con01__watermark--year {
    width: calc(var(--px)*593);
    aspect-ratio: 593 / 229;
}

.con01__emblem {
    width: calc(var(--px)*183);
    aspect-ratio: 183 / 242;
}

.con01__headline {
    width: calc(var(--px)*523);
    aspect-ratio: 523 / 118;
}

.con01__dish {
    width: calc(var(--px)*948);
    aspect-ratio: 948 / 593;
}

.con01__spoon {
    width: calc(var(--px)*394);
    aspect-ratio: 394 / 300;
}

.con01__badge.con01__badge--health,
.con01__badge.con01__badge--topping {
    width: calc(var(--px)*222);
    aspect-ratio: 222 / 221;
}

.con01__badge.con01__badge--reorder {
    width: calc(var(--px)*237);
    aspect-ratio: 237 / 240;
}
/* /IMG:AUTO con01 END */

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

/* INK:AUTO con01 */
.con01__desc { margin-top: calc(var(--px) * 14.54); margin-bottom: calc(var(--px) * -4.43); } /* base 19,0 */
/* /INK:AUTO con01 END */

@media (max-width: 599px) {
    .con01__marquee {
        padding: 7.4667vw 0 3.2vw;
        background: linear-gradient(to bottom,
            #368318 0 1.6vw,
            #f44228 1.6vw 4.2667vw,
            #2b1e04 4.2667vw 100%);
    }

    .con01__marquee-track {
        margin-left: 0;
    }

    .con01__marquee-set {
        width: 379.52vw;
    }

    .con01__arc {
        left: -30vw;
        width: 160vw;
    }

    .con01_iner {
        padding-top: 9.5333vw;
    }

    .con01__brand {
        gap: 2.1333vw;
    }

    .con01__brand-since {
        width: 31vw;
    }

    .con01__brand-emblem {
        width: 17vw;
    }

    .con01__brand-year {
        width: 28vw;
    }

    .con01__headline {
        width: 80vw;
        margin-top: 7.3333vw;
    }

    .con01__desc {
        margin-top: 4.2667vw;
        margin-bottom: 0;
        padding-inline: 6.4vw;
        text-wrap: balance;
        letter-spacing: -0.04em;
        line-height: 1.5;
    }

    .con01__stage {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "reorder"
            "health"
            "topping"
            "dish";
        row-gap: 2.1333vw;
        justify-items: center;
        margin-top: 5.5333vw;
        padding-inline: 4vw;
    }

    .con01__dish {
        grid-area: dish;
        margin-left: 0;
        width: 92vw;
    }

    /* 배지 3개 → 가로 알약 3행(이미지 대신 텍스트). 빨강 1행 + 갈색 2행, 아래 접시 */
    .con01__badge.con01__badge--reorder,
    .con01__badge.con01__badge--health,
    .con01__badge.con01__badge--topping {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 86vw;
        aspect-ratio: auto;
        padding: 3.7333vw 6.4vw;
        border-radius: 50vw;
        background-color: var(--primary);
    }

    .con01__badge.con01__badge--reorder {
        grid-area: reorder;
        background-color: var(--secondary);
    }

    .con01__badge.con01__badge--health {
        grid-area: health;
    }

    .con01__badge.con01__badge--topping {
        grid-area: topping;
    }

    .con01__badge-text {
        font-size: var(--subheadM);
        line-height: 1.3;
        text-align: center;
        color: var(--bg-color);
    }

    .con01__badge-em {
        font-weight: 800;
    }

    /* PC 의 바깥 링 */
    .con01__badge::after {
        display: none;
    }

    /* 신호등 — 점등 = 빨강 / 꺼짐 = 진갈색. 정지 상태(시안) = 빨강 1행, 순환이 시작되면 빨강 행도 번갈아 꺼짐 */
    .con01__badge.con01__badge--reorder,
    .con01__badge.con01__badge--health,
    .con01__badge.con01__badge--topping {
        transition: background-color .45s ease-out;
    }

    .con01__badge.con01__badge--health.hover,
    .con01__badge.con01__badge--topping.hover {
        background-color: var(--secondary);
    }

    .con01__stage--lamp .con01__badge.con01__badge--reorder:not(.hover) {
        background-color: var(--primary);
    }
}

/* /merge-build:con01 */
/* merge-build:con02 */
/* con02 — 모바일 접기 의도: 카드·할머니를 세로 스택(할머니 아래, 카드 위), 테이프는 카드 모서리 유지 */
.con02 {
    background-color: #f3e6cc;
}

.con02__stripe {
    left: 0;
    bottom: 0;
}

.con02__card {
    top: calc(var(--px) * 45);
    right: calc(var(--px) * 150);
}

.con02__copy {
    padding: calc(var(--px) * 240) calc(var(--px) * 17) 0 0;
}

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

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

.con02__tape-top {
    top: calc(var(--px) * 4);
    left: calc(var(--px) * 466);
}

.con02__tape-bottom {
    left: calc(var(--px) * 455);
    bottom: calc(var(--px) * 1);
}

.con02__granny {
    margin: calc(var(--px) * 110) 0 calc(var(--px) * -2) calc(var(--px) * 134);
}

/* .v-peel{position:relative}(vweb-anim.css)가 .absolute 를 덮어 top/left 좌표가 깨지는 것 방지 */
.con02__tape-top.v-peel,
.con02__tape-bottom.v-peel {
    position: absolute;
}

@keyframes con02-breathe {
    from { transform: scale(1); }
    to { transform: scale(1.012); }
}

@media (prefers-reduced-motion: no-preference) {
    .con02__granny img {
        animation: con02-breathe 4.2s ease-in-out infinite alternate;
        transform-origin: 50% 100%;
    }
}

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

.con02__paper {
    width: calc(var(--px)*1076);
    aspect-ratio: 1076 / 808;
}

.con02__title {
    width: calc(var(--px)*441);
    aspect-ratio: 441 / 197;
}

.con02__subtitle {
    width: calc(var(--px)*588);
    aspect-ratio: 588 / 35;
}

.con02__tape-top {
    width: calc(var(--px)*235);
    aspect-ratio: 235 / 166;
}

.con02__tape-bottom {
    width: calc(var(--px)*233);
    aspect-ratio: 233 / 127;
}

.con02__granny {
    width: calc(var(--px)*884);
    aspect-ratio: 884 / 836;
}
/* /IMG:AUTO con02 END */

/* FONT:AUTO con02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con02__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.36;
    text-align: center;
    color: var(--primary);
}
/* /FONT:AUTO con02 END */

/* INK:AUTO con02 */
.con02__desc { margin-top: calc(var(--px) * 19.04); margin-bottom: calc(var(--px) * -4.93); } /* base 24,0 */
/* /INK:AUTO con02 END */

@media (max-width:599px) {
    .con02_iner {
        flex-direction: column;
        align-items: center;
    }

    .con02__stripe {
        width: 100%;
        bottom: -0.2667vw;
    }

    .con02__card {
        position: relative;
        top: auto;
        right: auto;
    }

    .con02__paper {
        width: 100vw;
        height: 90vw;
        position: relative;
        overflow: hidden;
    }

    /* 위 찢김·오른쪽 천공·왼쪽 찢김은 잘라내고 아래 찢김만 남긴다 */
    .con02__paper > img {
        position: absolute;
        left: -12vw;
        top: -22vw;
        width: 125vw;
        max-width: none;
        height: 112vw;
    }

    .con02__copy {
        justify-content: center;
        padding: 0 0 10.6667vw;
    }

    .con02__title {
        width: 50vw;
    }

    .con02__subtitle {
        width: 62vw;
        margin-top: 4.2667vw;
    }

    .con02__desc {
        margin-top: 4.2667vw;
        margin-bottom: 0;
        line-height: 1.5;
    }

    .con02__granny {
        width: 62vw;
        margin: -13.3333vw 0 -0.5333vw 0;
    }
}

/* /merge-build:con02 */
/* merge-build:con03 */
/* con03 — 모바일 접기 의도: intro 와 cards 를 세로 스택(intro 위, cards 아래), 카드는 사진·텍스트 2단으로 재배치, 그릇·연기·찢어진 종이는 하단 앵커 유지 */
.con03 {
    background-color: #322409;
}

.con03_iner {
    padding: calc(var(--px) * 159) calc(var(--px) * 211) calc(var(--px) * 426) calc(var(--px) * 209);
}

.con03__watermark {
    bottom: calc(var(--px) * 161);
}

.con03__watermark--since {
    left: calc(var(--px) * 72);
}

.con03__watermark--year {
    right: calc(var(--px) * 74);
}

.con03__intro {
    padding-top: calc(var(--px) * 50);
    gap: calc(var(--px) * 52);
}

/* 깊이 사다리(.front 스택 컨텍스트 안): cards 1 < 베이지 종이 2 < 그릇 3 < 본문 4 < 연기 5 < 아이브로우·헤드라인 6 < 흰 종이 7.
   DOM 은 읽기 순서(eyebrow → 헤드라인 → 본문 → 카드)라 순서로는 시안 깊이를 못 만든다 */
.con03__head {
    z-index: 6;
    gap: calc(var(--px) * 28);
}

.con03__story {
    z-index: 4;
    gap: calc(var(--px) * 35);
    padding-bottom: calc(var(--px) * 5);
}

.con03__cards {
    z-index: 1;
    width: calc(var(--px) * 741);
    gap: calc(var(--px) * 10);
}

.con03__card {
    gap: calc(var(--px) * 12);
    min-height: calc(var(--px) * 221);
    padding-left: calc(var(--px) * 48);
    background-color: #ffffff;
    border-radius: calc(var(--px) * 20);
    box-shadow: inset 0 0 0 1px #e4dbc3;
    transition: box-shadow .3s ease-out, background-color .3s ease-out; /* GSAP 이 card 에 x/opacity 를 쓰므로 transform/opacity 제외 */
}

.con03__card-intro {
    flex: 0 0 calc(var(--px) * 229);
    gap: calc(var(--px) * 13);
}

.con03__card--pajeori .con03__card-intro {
    margin-bottom: calc(var(--px) * 6);
}

.con03__card--yachae .con03__card-intro {
    margin-bottom: calc(var(--px) * 20);
}

.con03__card-badge {
    width: calc(var(--px) * 124);
    padding: calc(var(--px) * 7.5) 0;
    background-color: #368318;
    border-radius: calc(var(--px) * 17);
    transition: background-color .25s ease-out;
}

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

.con03__card-media {
    flex: 0 0 calc(var(--px) * 176);
}

.con03__card-desc {
    flex: 1 1 0;
    padding-right: calc(var(--px) * 30);
}

.con03__card--pajeori .con03__card-desc {
    margin-bottom: calc(var(--px) * 6);
}

.con03__card--yachae .con03__card-desc {
    margin-bottom: calc(var(--px) * 12);
}

.con03__card--pajeori .con03__card-badge {
    padding-right: calc(var(--px) * 4);
}

.con03__card--yachae .con03__card-badge {
    padding-right: calc(var(--px) * 2);
}

.con03__card-photo--pajeori {
    margin: calc(var(--px) * 6) 0 0 calc(var(--px) * 6);
    transition: filter .35s ease-out;
}

.con03__card-photo--yachae {
    margin: 0 calc(var(--px) * 6) calc(var(--px) * 2) 0;
    animation: v-rotate 10s infinite linear reverse;
    transition: filter .35s ease-out;
}

.con03__torn-edge {
    left: 0;
    bottom: 0;
}

.con03__torn-edge--beige {
    z-index: 2;
}

.con03__bowl {
    z-index: 3;
    left: calc(var(--px) * 474);
    bottom: 0;
}

.con03__steam {
    z-index: 5;
    left: calc(var(--px) * 487);
    bottom: 0;
    animation: con03-steam-rise 4s ease-out infinite;
}

/* 연기: 그릇 위에서 올라가며 옅어져 사라진다 */
@keyframes con03-steam-rise {
    0%   { opacity: 0; transform: translateY(calc(var(--px) * 40)); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(calc(var(--px) * -140)); }
}

.con03__torn-edge--white {
    z-index: 7;
}

.con03__card .con03__card-em {
    transition: color .25s ease-out;
}

/* 호버 상태 전환 — 터치/모바일에는 적용하지 않는다 */
@media (hover: hover) and (pointer: fine) {
    .con03__card:hover {
        background-color: #fffdf6;
        box-shadow: inset 0 0 0 1px #e4dbc3, 0 calc(var(--px) * 14) calc(var(--px) * 30) rgba(0, 0, 0, .28);
    }

    .con03__card:hover .con03__card-photo {
        filter: saturate(1.18) brightness(1.05);
    }

    .con03__card:hover .con03__card-badge {
        background-color: #2d6d14;
    }

    .con03__card:hover .con03__card-em {
        color: #368318;
    }
}

/* 상시 루프 — GSAP 은 워터마크·그릇 래퍼, CSS 는 안쪽 img */
@keyframes con03-wm-drift-a {
    from { transform: translateX(calc(var(--px) * -14)); }
    to   { transform: translateX(calc(var(--px) * 14)); }
}

@keyframes con03-wm-drift-b {
    from { transform: translateX(calc(var(--px) * 14)); }
    to   { transform: translateX(calc(var(--px) * -14)); }
}

@media (prefers-reduced-motion: no-preference) {
    .con03__watermark--since img {
        animation: con03-wm-drift-a 9s ease-in-out infinite alternate;
    }

    .con03__watermark--year img {
        animation: con03-wm-drift-b 9s ease-in-out infinite alternate;
    }
}

.con03__bowl img {
    transform-origin: 50% 100%;
    animation: v-zoom 5s ease-in-out infinite;
}

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

.con03__watermark.con03__watermark--year {
    width: calc(var(--px)*593);
    aspect-ratio: 593 / 229;
}

.con03__eyebrow {
    width: calc(var(--px)*293);
    aspect-ratio: 293 / 62;
}

.con03__headline {
    width: calc(var(--px)*544);
    aspect-ratio: 544 / 117;
}

.con03__card-date.con03__card-date--pajeori {
    width: calc(var(--px)*87);
    aspect-ratio: 87 / 18;
}

.con03__card-title.con03__card-title--pajeori {
    width: calc(var(--px)*225);
    aspect-ratio: 225 / 69;
}

.con03__card-photo.con03__card-photo--pajeori {
    width: calc(var(--px)*158);
    aspect-ratio: 158 / 158;
}

.con03__card-date.con03__card-date--yachae {
    width: calc(var(--px)*82);
    aspect-ratio: 82 / 18;
}

.con03__card-title.con03__card-title--yachae {
    width: calc(var(--px)*161);
    aspect-ratio: 161 / 69;
}

.con03__card-photo.con03__card-photo--yachae {
    width: calc(var(--px)*164);
    aspect-ratio: 164 / 154;
}

.con03__torn-edge.con03__torn-edge--beige {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 201;
}

.con03__bowl {
    width: calc(var(--px)*957);
    aspect-ratio: 957 / 466;
}

.con03__steam {
    width: calc(var(--px)*779);
    aspect-ratio: 779 / 786;
}

.con03__torn-edge.con03__torn-edge--white {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 146;
}
/* /IMG:AUTO con03 END */

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

.con03__story {
    line-height: 1.44;
    color: #ffffff;
}

.con03__cards {
    line-height: 1.33;
    color: var(--primary);
}

.con03__card-em {
    font-weight: 800;
}
/* /FONT:AUTO con03 END */

/* INK:AUTO con03 */
.con03__story-text { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * -4.45); } /* base 0,0 */
.con03__card-em { margin-top: calc(var(--px) * -3.47); margin-bottom: calc(var(--px) * -0.53); } /* base 0,0 */
/* /INK:AUTO con03 END */

@media (max-width: 599px) {
    .con03_iner {
        flex-direction: column;
        gap: 8.5333vw;
        padding: 12.8vw 5.3333vw 21.3333vw;
    }

    .con03__intro {
        width: 100%;
        padding-top: 0;
        gap: 8.5333vw;
    }

    .con03__head {
        align-items: center;
        gap: 4.2667vw;
    }

    .con03__eyebrow {
        width: auto;
        aspect-ratio: auto;
    }

    .con03__eyebrow-line {
        display: block;
    }

    .con03__eyebrow-line img {
        display: block;
        width: 100%;
        height: auto;
    }

    .con03__eyebrow-line--1 {
        width: 43.4vw;
    }

    .con03__eyebrow-line--2 {
        width: 48vw;
        margin-top: 1.4vw;
    }

    .con03__headline {
        width: auto;
        aspect-ratio: auto;
    }

    .con03__headline-line {
        display: block;
    }

    .con03__headline-line--1 {
        width: 76vw;
        margin-bottom: 1.1176vw;
    }

    .con03__headline-line--2 {
        width: 55.1838vw;
    }

    .con03__story {
        gap: 5.3333vw;
        padding-bottom: 0;
    }

    .con03__cards {
        width: 100%;
        gap: 3.2vw;
        font-size: var(--bodyS);
        line-height: 1.5;
    }

    .con03__cards {
        gap: 5.3333vw;
    }

    .con03__card {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 4.2667vw;
        min-height: 0;
        padding: 6.4vw 5.3333vw;
        border-radius: 5.3333vw;
    }

    .con03__card .con03__card-intro {
        align-items: center;
        gap: 2.1333vw;
        margin-bottom: 0;
    }

    .con03__card .con03__card-badge {
        width: auto;
        padding: 1.6vw 4.2667vw;
        border-radius: 50vw;
    }

    .con03__card-date.con03__card-date--pajeori {
        width: 20vw;
    }

    .con03__card-date.con03__card-date--yachae {
        width: 18.8vw;
    }

    .con03__card-title.con03__card-title--pajeori,
    .con03__card-title.con03__card-title--yachae {
        width: auto;
        aspect-ratio: auto;
        margin-left: 0;
    }

    .con03__card-title-line {
        display: block;
    }

    .con03__card-title--pajeori .con03__card-title-line--1 {
        width: 15.84vw;
        margin-bottom: 0.64vw;
    }

    .con03__card-title--pajeori .con03__card-title-line--2 {
        width: 36vw;
    }

    .con03__card-title--yachae .con03__card-title-line--1 {
        width: 15.9876vw;
        margin-bottom: 0.646vw;
    }

    .con03__card-title--yachae .con03__card-title-line--2 {
        width: 26vw;
    }

    .con03__card-photo.con03__card-photo--pajeori {
        width: 44vw;
        margin: 0;
    }

    .con03__card-photo.con03__card-photo--yachae {
        width: 45vw;
        margin: 0;
    }

    .con03__card .con03__card-desc {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 0;
    }

    .con03__torn-edge.con03__torn-edge--beige,
    .con03__torn-edge.con03__torn-edge--white {
        width: 100vw;
    }

    .con03__bowl {
        width: 76vw;
        left: 12vw;
    }

    .con03__steam {
        width: 61.8642vw;
        left: 22.0324vw;
    }
}


/* /merge-build:con03 */
/* merge-build:con04 */
/* con04 — 손으로 쓰는 CSS(구조·좌표·색) */
.con04_iner {
  padding-top: calc(var(--px)*144);
  padding-bottom: calc(var(--px)*106.5);
}

.con04__desc {
  margin-top: calc(var(--px)*42.5);
  gap: calc(var(--px)*33);
}

/* 강조구 1회 번쩍 — 클래스는 ani_con04.js 가 줄 점등 뒤에 붙이고 animationend 에서 뗀다 */
@keyframes con04-flash {
  0%, 100% { color: var(--primary); }
  50% { color: var(--secondary); }
}

.con04 .exbold.con04__exbold--flash {
  animation: con04-flash .7s ease-in-out 1;
}

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

/* FONT:AUTO con04 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con04 {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.444; /* OVR */
    text-align: center;
    color: var(--primary);
}
/* /FONT:AUTO con04 END */

/* INK:AUTO con04 */
.con04__desc-text { margin-top: calc(var(--px) * -4.5); margin-bottom: calc(var(--px) * -2.49); } /* base 0,0 */
/* /INK:AUTO con04 END */

@media (max-width:599px) {
  .con04 {
    line-height: 1.6;
    letter-spacing: -0.03em;
  }

  .con04 .bg_img {
    top: -2.1333vw;
    height: calc(100% + 2.1333vw);
    filter: brightness(1.06); /* 종이 안쪽 회색 음영(최저 242)을 흰색으로. 찢긴 윤곽은 그대로 */
  }

  .con04_iner {
    padding-top: 14.9333vw;
    padding-bottom: 6.4vw;
  }

  .con04__title {
    width: 76vw;
  }

  .con04__desc {
    margin-top: 6.4vw;
    gap: 5.3333vw;
    padding-inline: 6.4vw;
  }

  .con04__desc-text {
    text-wrap: balance;
  }
}

/* /merge-build:con04 */
/* merge-build:con05 */
/* con05 — 모바일 접기 계획: .con05_iner 가로 2카드 → column, 카드 폭 100%, 사진은 카드 하단 정렬 유지 */
.con05__card {
  position: relative;
  overflow: hidden;
}
.con05__card--vegetable { width: calc(var(--px)*952); }
.con05__card--pork { width: calc(var(--px)*953); }

.con05__card-body { flex: 1 1 auto; }

.con05__copy { padding-top: calc(var(--px)*179); padding-bottom: calc(var(--px)*28); }
.con05__card--vegetable .con05__copy { padding-left: calc(var(--px)*13); }
.con05__card--pork .con05__copy { padding-left: calc(var(--px)*6); }

.con05__title,
.con05__subcopy,
.con05__tag-text { margin: 0; }
.con05__subcopy { margin-top: calc(var(--px)*22); }

.con05__tags {
  gap: calc(var(--px)*7);
  margin: calc(var(--px)*25) 0 0;
  padding: 0;
  list-style: none;
}
.con05__tag {
  width: calc(var(--px)*199);
  padding: calc(var(--px)*17.5) 0;
  background-color: #f9f0de;
  border-radius: calc(var(--px)*27);
  position: relative;
  overflow: hidden;
  --con05-glint: rgba(244,66,40,.32);
  transition: background-color .25s ease-out; /* GSAP 이 쥔 transform/opacity 제외 */
}
.con05__tag--primary { background-color: #f44228; --con05-glint: rgba(255,255,255,.55); }
.con05__tag::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  width: 28%;
  height: 120%;
  background: linear-gradient(100deg, transparent 0%, var(--con05-glint) 50%, transparent 100%);
  transform: translateX(-220%) skewX(-18deg);
  pointer-events: none;
}
/* 신호등 점등 = 배경이 주황으로 바뀐다(테두리 X) — 글자 이미지는 크림색으로 반전 */
.con05__tag.hover { background-color: #f44228; --con05-glint: rgba(255,255,255,.5); }
.con05__tag-text img { transition: filter .45s ease-out; }
.con05__tag:not(.con05__tag--primary).hover .con05__tag-text img { filter: brightness(0) invert(.94); }
/* 점등 루프가 도는 동안엔 첫 칩의 주황도 점등 상태일 때만 — 꺼진 칩은 모두 크림 */
.con05__tags--lamp .con05__tag--primary:not(.hover) { background-color: #f9f0de; --con05-glint: rgba(244,66,40,.32); }
.con05__tags--lamp .con05__tag--primary:not(.hover) .con05__tag-text img { filter: brightness(0); }
.con05__tag.hover::before { animation: con05-glint 1.1s ease-in-out 1 forwards; }
@keyframes con05-glint {
  from { transform: translateX(-220%) skewX(-18deg); }
  to { transform: translateX(520%) skewX(-18deg); }
}
@media (hover: hover) and (pointer: fine) {
  .con05__card .bg_img { transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
  .con05__card:hover .bg_img { transform: scale(1.05); }
}

.con05__desc { margin: calc(var(--px)*33) 0 0; }

.con05__photo {
  margin-top: auto;
  margin-bottom: 0;
}
.con05__photo--vegetable { margin-left: calc(var(--px)*78); }
.con05__photo--pork { margin-left: calc(var(--px)*48); }

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

.con05__subcopy.con05__subcopy--vegetable {
    width: calc(var(--px)*616);
    aspect-ratio: 616 / 27;
}

.con05__tag-text.con05__tag-text--balance {
    width: calc(var(--px)*155);
    aspect-ratio: 155 / 18;
}

.con05__tag-text.con05__tag-text--fiber {
    width: calc(var(--px)*139);
    aspect-ratio: 139 / 18;
}

.con05__tag-text.con05__tag-text--diet {
    width: calc(var(--px)*158);
    aspect-ratio: 158 / 18;
}

.con05__photo.con05__photo--vegetable {
    width: calc(var(--px)*801);
    aspect-ratio: 801 / 506;
}

.con05__title.con05__title--pork {
    width: calc(var(--px)*422);
    aspect-ratio: 422 / 40;
}

.con05__subcopy.con05__subcopy--pork {
    width: calc(var(--px)*518);
    aspect-ratio: 518 / 26;
}

.con05__tag-text.con05__tag-text--soul {
    width: calc(var(--px)*134);
    aspect-ratio: 134 / 17;
}

.con05__tag-text.con05__tag-text--revenge {
    width: calc(var(--px)*160);
    aspect-ratio: 160 / 17;
}

.con05__tag-text.con05__tag-text--homemade {
    width: calc(var(--px)*174);
    aspect-ratio: 174 / 18;
}

.con05__photo.con05__photo--pork {
    width: calc(var(--px)*883);
    aspect-ratio: 883 / 441;
}
/* /IMG:AUTO con05 END */

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

.con05__desc-strong {
    font-weight: 800;
}
/* /FONT:AUTO con05 END */

/* INK:AUTO con05 */
.con05__desc { margin-top: calc(var(--px) * 28.54); margin-bottom: calc(var(--px) * -4.43); } /* base 33,0 */
.con05__desc-strong { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
/* /INK:AUTO con05 END */

@media (max-width: 599px) {
  .con05 { letter-spacing: -0.04em; }

  .con05_iner {
    flex-direction: column;
    gap: 3vw;
    padding: 4vw 4vw 14vw;
  }

  .con05__card--vegetable,
  .con05__card--pork {
    width: 100%;
    padding-top: 10.6667vw;
    background-color: var(--primary);
    border-radius: 6.4vw;
  }

  .con05__card .con05__copy { padding: 0 4.2667vw; }

  .con05__title.con05__title--vegetable { width: 60vw; }
  .con05__title.con05__title--pork { width: 74vw; }

  .con05__subcopy-mo {
    margin: 5.2vw 0 0;
    font-size: var(--headS);
  }

  .con05__tags {
    flex-direction: column;
    align-items: center;
    gap: 2.1333vw;
    margin-top: 5.3333vw;
  }
  .con05__tag {
    width: 64vw;
    padding: 2.6667vw 0;
    border-radius: 50vw;
  }
  .con05__tag-label { transition: color .45s ease-out; }
  .con05__tags--lamp .con05__tag--primary:not(.hover) .con05__tag-label { color: var(--primary); }
  .con05__tag:not(.con05__tag--primary).hover .con05__tag-label { color: #f9f0de; }
  .con05__tag-label {
    font-size: var(--bodyM);
    line-height: 1.3;
    text-align: center;
    color: var(--primary);
  }
  .con05__tag--primary .con05__tag-label { color: #f9f0de; }
  .con05__tag-em { font-weight: 800; }

  .con05__desc {
    margin-top: 5.3333vw;
    margin-bottom: 0;
    text-wrap: balance;
  }

  .con05__photo--vegetable,
  .con05__photo--pork {
    margin-left: 0;
    margin-top: 8.5333vw;
  }
  .con05__photo.con05__photo--vegetable,
  .con05__photo.con05__photo--pork {
    width: 78%;
    align-self: center;
  }
}

/* /merge-build:con05 */
/* merge-build:con06 */
/* con06 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 카드 2열 → 1열 column, 알약 폭은 카드 폭에 맞춤 */
.con06_iner {
  padding-top: calc(var(--px)*136);
  padding-bottom: calc(var(--px)*50);
}

.con06__lead {
  margin-top: calc(var(--px)*39);
}

.con06__cards {
  margin-top: calc(var(--px)*61);
  gap: calc(var(--px)*12);
}

.con06__card {
  width: calc(var(--px)*525);
  padding-top: calc(var(--px)*89);
  padding-bottom: calc(var(--px)*80);
}

.con06__card--solo {
  background-color: #dacdad;
  transition: background-color .18s ease-out; /* 호버 반응 — 즉각 */
}

.con06__card--combo {
  background-color: #fff;
  transition: background-color .18s ease-out; /* 호버 반응 — 즉각 */
}

/* 신호등(ani_con06.js 가 .con06__card--on 토글) — 두 카드가 번갈아 '갈색(점등·호버)' ↔ '흰색(꺼짐)'. 시안 정지 상태 = 01 갈색 · 02 흰색.
   점등 루프가 돌기 시작하면(.con06__cards--lamp) 꺼진 카드는 모두 흰색 — 상태 전환은 CSS transition */
.con06__cards--lamp .con06__card:not(.con06__card--on) {
  background-color: #fff;
}

.con06__card.con06__card--on {
  background-color: #dacdad;
}

@media (hover: hover) and (pointer: fine) {
  .con06__pill:hover {
    border-color: var(--primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .con06__card,
  .con06__badge,
  .con06__pill {
    transition: none;
  }
}

.con06__badge {
  top: 0;
  left: 0;
  width: calc(var(--px)*64);
  padding-block: calc(var(--px)*21.5);
  background-color: #000;
  transition: background-color .18s ease-out; /* 호버 반응 — 즉각 */
}

.con06__card-sub {
  margin-top: calc(var(--px)*17);
}

.con06__card-desc {
  margin-top: calc(var(--px)*22);
}

.con06__pills {
  width: calc(var(--px)*395);
  margin-top: calc(var(--px)*28);
  gap: calc(var(--px)*5);
}

.con06__pill {
  padding-block: calc(var(--px)*12.5);
  background-color: #fffcf4;
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*27);
  transition: background-color .35s ease-out, color .35s ease-out, border-color .35s ease-out;
}

.con06__closing {
  margin-top: calc(var(--px)*48);
}

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

.con06__badge-num.con06__badge-num--solo {
    width: calc(var(--px)*30);
    aspect-ratio: 30 / 21;
}

.con06__card-title.con06__card-title--solo {
    width: calc(var(--px)*137);
    aspect-ratio: 137 / 33;
}

.con06__card-sub.con06__card-sub--solo {
    width: calc(var(--px)*272);
    aspect-ratio: 272 / 25;
}

.con06__badge-num.con06__badge-num--combo {
    width: calc(var(--px)*32);
    aspect-ratio: 32 / 21;
}

.con06__card-title.con06__card-title--combo {
    width: calc(var(--px)*136);
    aspect-ratio: 136 / 33;
}

.con06__card-sub.con06__card-sub--combo {
    width: calc(var(--px)*375);
    aspect-ratio: 375 / 25;
}

.con06__closing {
    width: calc(var(--px)*429);
    aspect-ratio: 429 / 28;
}
/* /IMG:AUTO con06 END */

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

.con06__lead {
    line-height: 1.67;
    color: #ffffff;
}

.con06__lead-em,
.con06__pill-em {
    font-weight: 800;
}

.con06__cards {
    color: var(--primary);
}

.con06__card-desc {
    line-height: 1.39;
}

.con06__pills {
    line-height: 1.5; /* OVR */
}
/* /FONT:AUTO con06 END */

/* INK:AUTO con06 */
.con06__lead { margin-top: calc(var(--px) * 32.47); margin-bottom: calc(var(--px) * -6.5); } /* base 39,0 */
.con06__lead-em { margin-top: calc(var(--px) * -6.53); margin-bottom: calc(var(--px) * 2.53); } /* base 0,0 */
.con06__card-desc { margin-top: calc(var(--px) * 17.99); margin-bottom: calc(var(--px) * -4); } /* base 22,0 */
.con06__pill-em { margin-top: calc(var(--px) * -5); margin-bottom: calc(var(--px) * 1); } /* base 0,0 */
/* /INK:AUTO con06 END */

@media (max-width:599px) {
  .con06_iner {
    padding-top: 17.0667vw;
    padding-bottom: 10.6667vw;
    padding-inline: 4.2667vw;
  }

  .con06__title {
    width: 75vw;
  }

  .con06__lead {
    margin-top: 6.4vw;
    margin-bottom: 0;
  }

  .con06__cards {
    flex-direction: column;
    width: 100%;
    gap: 4.2667vw;
    margin-top: 8.5333vw;
  }

  .con06__card {
    width: 100%;
    padding-top: 11.0667vw;
    padding-bottom: 8.5333vw;
    padding-inline: 4.2667vw;
    overflow: hidden; /* 둥근 모서리에 맞춰 왼쪽 위 배지 모서리도 같이 잘림 */
    border-radius: 5.3333vw;
  }

  .con06__badge {
    width: 14.1333vw;
    padding-block: 4.2667vw;
    border-radius: 0 0 4.2667vw 0;
  }

  .con06__badge-num.con06__badge-num--solo {
    width: 8vw;
  }

  .con06__badge-num.con06__badge-num--combo {
    width: 8.5333vw;
  }

  .con06__card-title.con06__card-title--solo,
  .con06__card-title.con06__card-title--combo {
    width: 27vw;
  }

  .con06__card-sub {
    margin-top: 4.2vw;
  }

  .con06__card-sub.con06__card-sub--solo {
    width: 58vw;
  }

  .con06__card-sub.con06__card-sub--combo {
    width: auto;
    aspect-ratio: auto;
  }

  .con06__sub-line {
    display: block;
  }

  .con06__sub-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con06__sub-line--1 {
    width: 48vw;
  }

  .con06__sub-line--2 {
    width: 34.2vw;
    margin-top: 1.6vw;
  }

  .con06__card-desc {
    margin-top: 4.2vw;
    margin-bottom: 0;
    line-height: 1.5;
  }

  .con06__pills {
    width: 100%;
    margin-top: 4.2667vw;
    gap: 2.1333vw;
  }

  .con06__pill {
    padding-block: 3.2vw;
    padding-inline: 3.2vw;
    border-radius: 50vw;
    text-wrap: balance;
  }

  .con06__closing {
    width: 84vw;
    margin-top: 8.5333vw;
  }
}

/* /merge-build:con06 */
/* merge-build:con07 */
/* con07 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 비교 4열 → 세로 스택(카드 3장 + 라벨 열), 할머니·종이는 하단 데코로 축소 */
.con07__marquee {
  padding-block: calc(var(--px)*52) calc(var(--px)*29);
  background: linear-gradient(var(--hd-bar-green) calc(var(--px)*8), var(--secondary) 0 calc(var(--px)*23), #2b1e04 0);
  overflow: hidden;
}

.con07__marquee-track {
  flex-shrink: 0;
  margin-left: calc(var(--px)*-103);
}

.con07__marquee-item {
  flex-shrink: 0;
}

.con07_box_iner {
  padding-top: calc(var(--px)*149);
  padding-bottom: calc(var(--px)*115);
}

.con07__stripes {
  bottom: 0;
  left: 0;
}

.con07__torn-sheet {
  right: calc(var(--px)*405);
  bottom: 0;
}

.con07__tape {
  top: calc(var(--px)*349);
  right: calc(var(--px)*470);
}

.con07__grandma {
  right: 0;
  bottom: 0;
}

.con07__lead {
  margin-top: calc(var(--px)*26);
}

.con07__compare {
  align-self: stretch;
  margin-top: calc(var(--px)*106);
  padding-left: calc(var(--px)*179);
  gap: calc(var(--px)*10);
}

.con07__brand {
  width: calc(var(--px)*331);
  padding-inline: calc(var(--px)*34);
  padding-bottom: calc(var(--px)*44);
  background-color: #dacdad;
  border-radius: calc(var(--px)*20);
  box-shadow: inset 0 0 0 1px #e4dbc3;
}

.con07__metric {
  width: calc(var(--px)*250);
  margin-top: calc(var(--px)*51);
  margin-left: calc(var(--px)*-31);
  padding: calc(var(--px)*38) calc(var(--px)*16) calc(var(--px)*40);
  background-color: var(--bg-color);
  border-radius: calc(var(--px)*20);
}

.con07__ours {
  width: calc(var(--px)*264);
  margin-left: calc(var(--px)*57);
}

.con07__brand-name {
  min-height: calc(var(--px)*89);
  padding-top: calc(var(--px)*54);
}

.con07__ours-name {
  min-height: calc(var(--px)*89);
  padding-top: calc(var(--px)*52);
}

.con07__row {
  min-height: calc(var(--px)*92);
}

.con07__row + .con07__row {
  border-top: 1px solid #595959;
}

.con07__brand .con07__row:nth-child(1) { padding-top: calc(var(--px)*14); }
.con07__brand .con07__row:nth-child(2) { padding-bottom: calc(var(--px)*6); }
.con07__metric .con07__row:nth-child(1) { padding-top: calc(var(--px)*8); }
.con07__metric .con07__row:nth-child(2) { padding-top: calc(var(--px)*6); }
.con07__ours .con07__row:nth-child(2) { padding-top: calc(var(--px)*12); }
.con07__ours .con07__row:nth-child(3) { padding-top: calc(var(--px)*8); }

.con07__win {
  right: calc(var(--px)*327.5);
  bottom: calc(var(--px)*166.5);
  padding: calc(var(--px)*14);
  background-color: rgba(54, 131, 24, 0.3);
  border: 1px solid var(--hd-bar-green);
  border-radius: 50%;
}

/* [모션] .v-peel{position:relative} 가 .absolute 를 덮는 것 방지 — 레이아웃 불변 */
.con07__tape.v-peel {
  position: absolute;
}

/* [상태 전환] 행 hover 틴트 — background-color 만 (GSAP 은 p·li 의 transform/opacity 소유) */
@media (hover: hover) and (min-width: 600px) {
  .con07__brand .con07__row,
  .con07__metric .con07__row,
  .con07__ours .con07__row {
    transition: background-color .25s ease-out;
  }

  .con07__brand .con07__row.is-hover,
  .con07__metric .con07__row.is-hover {
    background-color: color-mix(in srgb, var(--bg-color) 60%, transparent);
  }

  .con07__ours .con07__row.is-hover {
    background-color: color-mix(in srgb, var(--secondary) 6%, transparent);
  }
}

/* [상시 루프] WIN 점멸 — .is-glint 는 ani_con07 의 ScrollTrigger toggleClass 가 부착 */
@keyframes con07-glint {
  0%, 60%, 100% { opacity: 1; }
  66% { opacity: .25; }
  72% { opacity: 1; }
  78% { opacity: .25; }
  84% { opacity: 1; }
}

.con07__ours .con07__row:nth-child(2) .con07__num--win.is-glint,
.con07__win-mark.is-glint {
  animation: con07-glint 3.2s ease-in-out 2.8s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .con07__ours .con07__row:nth-child(2) .con07__num--win.is-glint,
  .con07__win-mark.is-glint { animation: none; }
}

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

.con07__stripes {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 212;
}

.con07__torn-sheet {
    width: calc(var(--px)*450);
    aspect-ratio: 450 / 580;
}

.con07__tape {
    width: calc(var(--px)*303);
    aspect-ratio: 303 / 57;
}

.con07__grandma {
    width: calc(var(--px)*549);
    aspect-ratio: 549 / 797;
}

.con07__title {
    width: calc(var(--px)*581);
    aspect-ratio: 581 / 116;
}

.con07__ours-name {
    width: calc(var(--px)*265);
    aspect-ratio: 265 / 31;
}

.con07__win-mark {
    width: calc(var(--px)*175);
    aspect-ratio: 175 / 175;
}
/* /IMG:AUTO con07 END */

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

.con07__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.39;
    color: var(--primary);
}

.con07__compare {
    font-family: var(--font-paperlogy);
}

.con07__brand {
    color: var(--primary);
}

.con07__brand-name {
    font-size: var(--subheadL);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1.2;  /* OVR psd:2.56 */
}

.con07__num.con07__num--std,
.con07__num.con07__num--comma,
.con07__num.con07__num--avg {
    font-size: var(--subheadM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.39;
}

.con07__note {
    font-size: var(--bodyS);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.39;  /* OVR psd:2.29 */
    color: var(--primary);
}

.con07__unit {
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: var(--primary);
}

.con07__rows {
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.05em;
    color: var(--primary);
}

.con07__metric-name {
    line-height: 1.39;
}

.con07__metric-name.con07__metric-name--double {
    line-height: 1.26;
}

.con07__num.con07__num--ours {
    font-size: var(--subheadM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.39;
    color: var(--primary);
}

.con07__num.con07__num--win {
    font-size: var(--headL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--secondary);
}
/* /FONT:AUTO con07 END */


/* INK:AUTO con07 */
.con07__brand-name { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * 7.5); } /* base 0,0 */
.con07__num.con07__num--comma { margin-top: calc(var(--px) * -6.68); margin-bottom: calc(var(--px) * 2.68); } /* base 0,0 */
.con07__num.con07__num--std { margin-top: calc(var(--px) * -6.68); margin-bottom: calc(var(--px) * -1.32); } /* base 0,0 */
.con07__num.con07__num--ours { margin-top: calc(var(--px) * -5.68); margin-bottom: calc(var(--px) * -1.32); } /* base 0,0 */
.con07__unit { margin-top: calc(var(--px) * -5.68); margin-bottom: calc(var(--px) * -1.32); } /* base 0,0 */
.con07__lead { margin-top: calc(var(--px) * 21.99); margin-bottom: calc(var(--px) * -2.01); } /* base 26,0 */
.con07__num.con07__num--avg { margin-top: calc(var(--px) * -5.68); margin-bottom: calc(var(--px) * -0.32); } /* base 0,0 */
.con07__num.con07__num--win { margin-top: calc(var(--px) * -1.5); margin-bottom: calc(var(--px) * -2.5); } /* base 0,0 */
.con07__note { margin-top: calc(var(--px) * -3.23); margin-bottom: calc(var(--px) * 0.23); } /* base 0,0 */
/* /INK:AUTO con07 END */

@media (max-width:599px) {
  .con07__marquee {
    padding-block: 7.7867vw 3.84vw;
    background: linear-gradient(to bottom, var(--hd-bar-green) 0 1.6vw, var(--secondary) 1.6vw 4.2667vw, #2b1e04 4.2667vw 100%);
  }

  .con07__marquee-item { width: 75.84vw; }

  .con07_box_iner {
    padding-top: 15vw;
    padding-bottom: 19.2vw; /* 줄무늬(11.1vw) 위로 비교표와 8vw 간격 */
  }

  .con07__stripes { width: 100vw; }

  .con07__title { width: 80vw; }

  .con07__lead {
    margin-top: 4.2667vw;
    padding-inline: 8vw;
    line-height: 1.45;
    word-break: keep-all;
  }

  /* 비교표 — 흰 카드 하나 안에 헤더 3칸(A·B 연한 탄, 갱상도 빨강) + 항목 라벨 구분선 + 값 3칸 */
  .con07__compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: stretch;
    column-gap: 2.1333vw;
    row-gap: 0;
    align-self: stretch;
    margin: 7.4667vw 4vw 0;
    padding: 4vw 3.2vw 5.3333vw;
    background-color: #fffaf0;
    border: 1px solid #e4dbc3;
    border-radius: 5.3333vw;
  }

  .con07__brand,
  .con07__metric,
  .con07__ours,
  .con07__rows { display: contents; }

  .con07__brand-name,
  .con07__ours-name {
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 2.6667vw 1vw;
    aspect-ratio: auto;
    border-radius: 3.2vw;
    font-size: var(--bodyM);
    line-height: 1.3;
  }

  .con07__brand-name { background-color: #e6dbbd; }

  .con07__ours-name {
    width: auto;
    background-color: var(--secondary);
  }

  .con07__ours-text {
    font-size: var(--bodyM);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1.3;
    color: #fff;
  }

  .con07__brand--a .con07__brand-name,
  .con07__brand--a .con07__row { grid-column: 1; }
  .con07__brand--b .con07__brand-name,
  .con07__brand--b .con07__row { grid-column: 2; }
  .con07__ours-name,
  .con07__ours .con07__row { grid-column: 3; }

  .con07__brand .con07__row:nth-child(1),
  .con07__ours .con07__row:nth-child(1) { grid-row: 3; }
  .con07__brand .con07__row:nth-child(2),
  .con07__ours .con07__row:nth-child(2) { grid-row: 5; }
  .con07__brand .con07__row:nth-child(3),
  .con07__ours .con07__row:nth-child(3) { grid-row: 7; }

  .con07__metric .con07__row:nth-child(1) { grid-row: 2; }
  .con07__metric .con07__row:nth-child(2) { grid-row: 4; }
  .con07__metric .con07__row:nth-child(3) { grid-row: 6; }

  .con07__row { min-height: 0; }

  .con07__row + .con07__row { border-top: 0; }

  .con07__rows .con07__row:nth-child(n) {
    padding: 3.2vw 1vw;
    border-radius: 3.2vw;
  }

  .con07__brand .con07__row { background-color: #f3ecdc; }
  .con07__ours .con07__row { background-color: color-mix(in srgb, var(--secondary) 10%, white); }

  /* 항목 라벨 — 양옆 가는 선으로 구분 */
  .con07__metric .con07__row:nth-child(n) {
    grid-column: 1 / -1;
    margin: 4.2667vw 0 2.1333vw;
    padding: 0;
    border-radius: 0;
  }

  .con07__metric-name,
  .con07__metric-name.con07__metric-name--double {
    display: flex;
    align-items: center;
    gap: 2.1333vw;
    font-size: var(--bodyM);
    font-weight: 700;
    line-height: 1.3;
  }

  .con07__metric-name::before,
  .con07__metric-name::after {
    content: "";
    width: 12vw;
    height: 1px;
    background-color: #d9ccaa;
  }

  .con07__metric-name br { display: none; }

  .con07__brand .con07__row p,
  .con07__ours .con07__row p {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .con07__note,
  .con07__unit,
  .con07__num.con07__num--std,
  .con07__num.con07__num--comma,
  .con07__num.con07__num--avg,
  .con07__num.con07__num--ours { line-height: 1.4; }

  .con07__num.con07__num--win { line-height: 1.2; }

  .con07__ours .con07__row:nth-child(2) .con07__num--win.is-glint { animation-delay: 2.3s; }
}

/* /merge-build:con07 */
/* merge-build:con08 */
/* con08 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일 인계: 막대 차트는 가로 5열 유지(축소), 종이 조각 2장은 한 장 폭으로, 좌우 그릇은 하단 데코로 축소 */
.con08_iner {
  padding-top: calc(var(--px)*109);
  padding-bottom: calc(var(--px)*58);
}

.con08__lead {
  margin-top: calc(var(--px)*26);
}

.con08__chart {
  width: calc(var(--px)*1133);
  margin: calc(var(--px)*151) 0 0;
}

.con08__bar-item {
  width: calc(var(--px)*208);
}

.con08__value {
  margin-bottom: calc(var(--px)*10);
  transition: color .25s ease-out;
}

.con08__value.con08__value--tip {
  position: relative;
  margin: 0 0 calc(var(--px)*24);
  padding: calc(var(--px)*11) calc(var(--px)*20);
  border-radius: calc(var(--px)*25);
  background: #322409;
  transition: background-color .25s ease-out;
}

.con08__value--tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 0;
  margin-inline: auto;
  border-top: calc(var(--px)*22) solid #322409;
  border-right: calc(var(--px)*10) solid transparent;
  border-left: calc(var(--px)*10) solid transparent;
  transition: border-top-color .25s ease-out;
}

.con08__bar {
  width: calc(var(--px)*94);
  border-radius: calc(var(--px)*20) calc(var(--px)*20) 0 0;
  background: #e4d8b6;
  transition: background-color .25s ease-out;
}

.con08__bar--2019 { height: calc(var(--px)*111); /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
.con08__bar--2020 { height: calc(var(--px)*88); /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
.con08__bar--2021 { height: calc(var(--px)*132); /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
.con08__bar--2022 { height: calc(var(--px)*192); /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
.con08__bar--2023 { height: calc(var(--px)*236); /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ background: #f44228; }

.con08__years {
  padding-block: calc(var(--px)*9);
  border-block: 1px solid #322409;
  background: #fff;
}

.con08__year {
  width: calc(var(--px)*208); /* TEXT-WIDTH: 막대 열(208)과 같은 열 폭 */
}

.con08__zero {
  top: calc(var(--px)*-121);
  left: calc(var(--px)*307);
}

/* 라벨이 0% 위에 얹힘 — DOM 순서(라벨→0%)는 읽기 순서라 유지하고 relative 로 한 층 올림 */
.con08__zero-label {
  margin-top: calc(var(--px)*4);
}

.con08__zero-number {
  margin-left: calc(var(--px)*-24);
}

.con08__pill {
  margin-top: calc(var(--px)*15);
  padding: calc(var(--px)*18) calc(var(--px)*40);
  border-radius: 50vw;
  background: #322409;
}

.con08__direct {
  align-self: stretch;
  margin-top: calc(var(--px)*6);
}

.con08__sheet--left {
  top: calc(var(--px)*6);
  left: calc(var(--px)*248);
}

.con08__sheet--right {
  top: 0;
  right: calc(var(--px)*281);
}

.con08__direct-body {
  padding-top: calc(var(--px)*51);
  padding-bottom: calc(var(--px)*120);
}

.con08__direct-title {
  margin-top: calc(var(--px)*40);
}

.con08__direct-count {
  box-sizing: content-box;
  margin-top: calc(var(--px)*13);
  padding-right: calc(var(--px)*16);
}

.con08__stores {
  margin-top: calc(var(--px)*24);
}

.con08__direct-text {
  margin-top: calc(var(--px)*23);
}

.con08__closing-title {
  margin-top: calc(var(--px)*57);
}

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

.con08__bowl--left {
  top: calc(var(--px)*540);
  left: calc(var(--px)*-80);
}

.con08__bowl--right {
  right: calc(var(--px)*-338);
  bottom: calc(var(--px)*-63);
}

/* 막대 hover — 색만 CSS transition (등장 모션은 GSAP 이 transform/opacity/clip-path 로 소유) */
@media (hover: hover) {
  .con08__bar-item:hover .con08__bar {
    background-color: color-mix(in srgb, var(--tertiary) 82%, var(--primary));
  }

  .con08__bar-item:hover .con08__bar--2023 {
    background-color: color-mix(in srgb, var(--secondary) 88%, white);
  }

  .con08__bar-item:hover .con08__value:not(.con08__value--tip) {
    color: var(--secondary);
  }

  .con08__bar-item:hover .con08__value--tip {
    background-color: var(--secondary);
  }

  .con08__bar-item:hover .con08__value--tip::after {
    border-top-color: var(--secondary);
  }
}

/* 2023 막대 상시 호흡 — ani_con08.js 가 등장 완료 뒤 클래스 부착 */
@keyframes con08-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.con08__bar--live {
  animation: con08-pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .con08__bar,
  .con08__value,
  .con08__value--tip,
  .con08__value--tip::after {
    transition: none;
  }

  .con08__bar--live,
  .con08__zero-label.v-blink,
  .con08__direct-count.v-blink {
    animation: none;
  }
}

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

.con08__zero-label {
    width: calc(var(--px)*279);
    aspect-ratio: 279 / 156;
}

.con08__zero-number {
    width: calc(var(--px)*204);
    aspect-ratio: 204 / 196;
}

.con08__sheet.con08__sheet--left {
    width: calc(var(--px)*1092);
    aspect-ratio: 1092 / 761;
}

.con08__sheet.con08__sheet--right {
    width: calc(var(--px)*1092);
    aspect-ratio: 1092 / 760;
}

.con08__stamp {
    width: calc(var(--px)*341);
    aspect-ratio: 341 / 97;
}

.con08__direct-title {
    width: calc(var(--px)*544);
    aspect-ratio: 544 / 115;
}

.con08__direct-count {
    width: calc(var(--px)*447);
    aspect-ratio: 447 / 199;
}

.con08__closing-title {
    width: calc(var(--px)*645);
    aspect-ratio: 645 / 115;
}

.con08__bowl.con08__bowl--left {
    width: calc(var(--px)*505);
    aspect-ratio: 505 / 545;
}

.con08__bowl.con08__bowl--right {
    width: calc(var(--px)*898);
    aspect-ratio: 898 / 878;
}
/* /IMG:AUTO con08 END */

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

.con08__lead,
.con08__closing-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: var(--primary);
}

.con08__strong {
    font-weight: 800;
}

.con08__chart {
    font-family: var(--font-paperlogy);
    font-weight: 800;
}

.con08__value,
.con08__years {
    font-size: var(--headS);
    letter-spacing: -0.075em;
    line-height: 1.19;
    color: var(--primary);
}

.con08__value.con08__value--tip {
    font-size: var(--subheadL);
    letter-spacing: -0.05em;
    line-height: 1;
    color: #fff8e4;
}

.con08__pill {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 1.04;
    color: var(--tertiary);
}

.con08__direct-body {
    color: var(--primary);
}

.con08__stores {
    font-family: var(--font-paperlogy);
    font-size: var(--titleS);
    font-weight: 600;
    letter-spacing: -0.0797em; /* OVR */
    line-height: 1;
}

.con08__store-sep {
    font-weight: 200;
}

.con08__direct-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
}
/* /FONT:AUTO con08 END */

/* INK:AUTO con08 */
.con08__store-sep { margin-top: calc(var(--px) * -17.5); margin-bottom: calc(var(--px) * -25.5); } /* base 0,0 */
.con08__lead { margin-top: calc(var(--px) * 21.54); margin-bottom: calc(var(--px) * -4.43); } /* base 26,0 */
.con08__direct-text { margin-top: calc(var(--px) * 18.54); margin-bottom: calc(var(--px) * -4.43); } /* base 23,0 */
.con08__closing-text { margin-top: calc(var(--px) * 15.54); margin-bottom: calc(var(--px) * -4.43); } /* base 20,0 */
.con08__value { margin-top: calc(var(--px) * -4.09); margin-bottom: calc(var(--px) * 6.92); } /* base 0,10 */
.con08__stores { margin-top: calc(var(--px) * 21.5); margin-bottom: calc(var(--px) * -2.5); } /* base 24,0 */
.con08__strong { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
/* /INK:AUTO con08 END */

@media (max-width:599px) {
  .con08_iner {
    padding-top: 17.0667vw;
    padding-bottom: 4.2667vw; /* 아래 con09 패널과 한 묶음으로 보이게 간격을 좁힘 */
  }

  .con08__title {
    width: 80vw;
  }

  .con08__lead {
    margin-top: 5.3333vw;
  }

  .con08__lead,
  .con08__closing-text {
    padding-inline: 5.3333vw;
  }

  .con08__chart {
    display: flex;
    flex-direction: column;
    width: 94vw;
    margin-top: 8.5333vw;
  }

  .con08__zero {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
    align-self: center;
    margin-bottom: 2.1333vw;
  }

  .con08__zero-label {
    width: 40vw;
  }

  .con08__zero-number {
    width: 29.2vw;
    margin-left: -3.84vw;
  }

  .con08__bar-item,
  .con08__year {
    width: 18.8vw; /* TEXT-WIDTH: 막대 열과 같은 열 폭 */
  }

  .con08__bar {
    width: 9vw;
    border-radius: 3.2vw 3.2vw 0 0;
  }

  .con08__bar--2019 { height: 17.76vw; /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
  .con08__bar--2020 { height: 14.08vw; /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
  .con08__bar--2021 { height: 21.12vw; /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
  .con08__bar--2022 { height: 30.72vw; /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }
  .con08__bar--2023 { height: 37.76vw; /* HEIGHT: 막대그래프 데이터값 — 막대 높이가 곧 수치라 콘텐츠·padding 으로 못 만든다 */ }

  .con08__value {
    margin-bottom: 1.6vw;
  }

  .con08__value.con08__value--tip {
    width: max-content; /* TEXT-WIDTH: 말풍선은 내용 폭 — 열 폭(18.8vw)에 갇히면 % 가 고아 줄이 된다 */
    margin-bottom: 4.2667vw;
    padding: 1.6vw 3.2vw;
    border-radius: 4.2667vw;
  }

  .con08__value--tip::after {
    border-top-width: 3.2vw;
    border-right-width: 1.6vw;
    border-left-width: 1.6vw;
  }

  .con08__years {
    padding-block: 1.6vw;
  }

  .con08__pill {
    margin-top: 4.2667vw;
    padding: 3.2vw 6.4vw;
  }

  /* 본사 직영 — 찢긴 종이 장식을 걷고 흰 카드 하나로: 도장 → 제목 → 테이프 라벨 → 직영점 알약 2×2 → 설명 */
  .con08__direct {
    align-self: center;
    width: 92vw;
    margin-top: 4.2667vw;
    background-color: #fff;
    border: 1px solid #e4dbc3;
    border-radius: 5.3333vw;
  }

  .con08__direct-body {
    padding: 8.5333vw 5.3333vw 8.5333vw;
  }

  .con08__stamp {
    width: 40vw;
  }

  .con08__direct-title {
    width: 72vw;
    margin-top: 4.2667vw;
  }

  .con08__direct-count {
    width: 60vw;
    margin-top: 4.2667vw;
    padding-right: 0;
  }

  .con08__chips {
    grid-template-columns: 1fr 1fr;
    gap: 2.1333vw;
    width: 100%;
    margin-top: 6.4vw;
    padding: 0;
    list-style: none;
  }

  .con08__chip {
    padding: 2.6667vw 1vw;
    font-size: var(--bodyL);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--primary);
    background-color: var(--bg-color);
    border: 1px solid #e4dbc3;
    border-radius: 50vw;
  }

  .con08__direct-text {
    margin-top: 5.3333vw;
    text-wrap: balance;
  }

  .con08__closing-title {
    width: 86vw;
    margin-top: 15vw;
  }

  .con08__closing-text {
    margin-top: 4.2667vw;
  }
}

/* /merge-build:con08 */
/* merge-build:con09 */
/* con09 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 패널 column 전환(스탬프·헤드카피 위, 점포 카드 슬라이드 아래), 알약 슬라이드 1장씩 */
.con09_iner {
  padding-top: calc(var(--px)*5);
  padding-bottom: calc(var(--px)*65);
}

.con09__panel {
  width: calc(var(--px)*1481);
  margin-right: calc(var(--px)*4);
  padding-top: calc(var(--px)*97);
  padding-bottom: calc(var(--px)*96);
  background-color: #fff;
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*20);
}

.con09__stamps {
  top: calc(var(--px)*119);
  left: calc(var(--px)*-49);
}

.con09__stamp:not(:first-child) {
  margin-top: calc(var(--px)*-15);
}

.con09__intro {
  flex: none;
  width: calc(var(--px)*543);
  padding-top: calc(var(--px)*37);
  padding-left: calc(var(--px)*112);
}

.con09__lead {
  margin-top: calc(var(--px)*44);
}

/* 점포 카드 슬라이드 — 폭이 패널 우측 밖(뷰포트 우단)까지 이어지는 bleed */
.con09__stores {
  flex: none;
  width: calc(var(--px)*1151);
}

.con09__stores .con09__store {
  width: calc(var(--px)*308);
  margin-right: calc(var(--px)*19);
  background-color: #fffcf4;
  border: 1px solid #e4dbc3;
  padding-bottom: calc(var(--px)*54.7); /* store-list INK margin(-7.5×2) 이 줄인 카드 높이를 시안 306 으로 보전 */
  border-radius: calc(var(--px)*20);
  overflow: hidden;
  transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
}

.con09__store-head {
  padding-block: calc(var(--px)*28);
  background-color: var(--primary);
  transition: background-color 0.3s ease-out;
}

.con09__store-list {
  padding: 0;
  margin-top: calc(var(--px)*30);
}

/* 시안 3·4번째 카드 목록은 2px 왼쪽에 놓인다 */
.con09__stores .con09__store--from3 .con09__store-list {
  padding-right: calc(var(--px)*4);
}

/* 시안 4번째 카드 글자는 헤더 +2px · 목록 -1px 더 놓인다 */
.con09__stores .con09__store--from4 .con09__store-head {
  padding-left: calc(var(--px)*4);
}

.con09__stores .con09__store--from4 .con09__store-list {
  padding-right: calc(var(--px)*6);
}

/* 알약 슬라이드 — 배지가 알약 위로 25 솟아 swiper 클립에 안 잘리도록 상단 패딩으로 자리를 만든다
   swiper-bundle.css(.swiper{padding:0;margin auto})가 뒤에 로드돼 부모 클래스로 특이도를 올림 */
.con09_iner .con09__types {
  width: calc(var(--px)*1615);
  margin-left: 0;
  margin-right: calc(var(--px)*6);
  margin-top: calc(var(--px)*31);
  padding-top: calc(var(--px)*26);
  overflow: visible; /* 슬라이드가 창 가장자리에서 잘려 하나씩 사라지는 느낌이 안 나게 — 섹션(overflow:hidden) 가장자리까지 흘러간다 */
}

/* swiper-bundle.css 의 .swiper-slide{display:block} 이 뒤에 로드돼 .flex 유틸을 덮으므로 2클래스 특이도로 flex 를 선언 */
.con09__types .con09__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  width: calc(var(--px)*532);
  margin-right: calc(var(--px)*9.5);
  padding-top: calc(var(--px)*36.5);
  padding-bottom: calc(var(--px)*44.5);
  gap: calc(var(--px)*7);
  background-color: #fff;
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*98);
  transition: transform 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.con09__type-badge {
  top: calc(var(--px)*-26);
  left: calc(var(--px)*44);
}

.con09__nav {
  margin-top: calc(var(--px)*15);
  gap: calc(var(--px)*8);
}

.con09__arrow {
  width: calc(var(--px)*72);
  padding-block: calc(var(--px)*16);
  border-radius: calc(var(--px)*20);
  background-color: var(--primary);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

/* 터치 기기는 호버가 눌린 채 남으므로 호버 가능한 환경에서만 */
@media (hover: hover) {
  .con09__arrow:hover {
    background-color: var(--secondary);
  }

  .con09__stores .con09__store:hover {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--secondary) 6%, #fffcf4);
  }

  .con09__stores .con09__store:hover .con09__store-head {
    background-color: var(--secondary);
  }

  .con09__types .con09__type:hover {
    transform: translateY(-3%);
    border-color: var(--secondary);
    box-shadow: 0 calc(var(--px)*14) calc(var(--px)*30) color-mix(in srgb, var(--primary) 16%, transparent);
  }

  .con09__nav--ready .con09__arrow--next:hover {
    animation-play-state: paused;
  }
}

/* 등장이 끝난 뒤(.con09__nav--ready) 다음 화살표가 옆으로 살짝 밀리는 상시 루프 */
@keyframes con09-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7%); }
}

.con09__nav--ready .con09__arrow--next {
  animation: con09-nudge 1.4s ease-in-out infinite;
}

/* 모바일 알약 활성 슬라이드의 배지 pop (끝값 none = 정지 상태 불변) */
@keyframes con09-badge-pop {
  0% { transform: scale(0.7) rotate(-14deg); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .con09__nav--ready .con09__arrow--next,
  .con09__types .swiper-slide-active .con09__type-badge {
    animation: none;
  }
}

/* FONT:AUTO con09 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con09__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: var(--primary);
}

.con09__lead-em {
    font-weight: 800;
}

.con09__stores {
    text-align: center;
}

.con09__store-head {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.92;
    color: #ffffff;
}

.con09__store-list {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.65;
    color: var(--primary);
}

.con09__types {
    text-align: center;
    color: var(--primary);
}

.con09__type-title {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1.08;
}

.con09__type-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.39;
}

.con09__nav {
    font-family: var(--font-pretendard);
    font-size: var(--titleS);
    font-weight: 300;
    letter-spacing: -0.075em;
    line-height: 1;
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO con09 END */

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

.con09__title {
    width: calc(var(--px)*321);
    aspect-ratio: 321 / 155;
}

.con09__type-badge.con09__type-badge--staff {
    width: calc(var(--px)*115);
    aspect-ratio: 115 / 114;
}

.con09__type-badge.con09__type-badge--regular,
.con09__type-badge.con09__type-badge--family {
    width: calc(var(--px)*114);
    aspect-ratio: 114 / 114;
}
/* /IMG:AUTO con09 END */

/* INK:AUTO con09 */
.con09__store-list { margin-top: calc(var(--px) * 22.5); margin-bottom: calc(var(--px) * -7.5); } /* base 30,0 */
.con09__lead { margin-top: calc(var(--px) * 39.54); margin-bottom: calc(var(--px) * -4.43); } /* base 44,0 */
.con09__lead-em { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
/* /INK:AUTO con09 END */

@media (max-width:599px) {
  .con09_iner {
    padding-top: 4.2667vw;
    padding-bottom: 12.8vw;
    word-break: keep-all;
  }

  .con09__panel {
    flex-direction: column;
    align-items: center;
    width: 90vw;
    margin-right: 0;
    padding-top: 6.4vw;
    padding-bottom: 6.4vw;
    border-radius: 5.3333vw;
  }

  .con09__stamps {
    position: relative;
    top: auto;
    left: auto;
    flex-direction: row;
  }

  .con09__stamp:not(:first-child) {
    margin-top: 0;
    margin-left: -2.1333vw;
  }

  .con09__stamp {
    width: 12vw;
  }

  .con09__intro {
    width: 100%;
    padding: 4.2667vw 5.3333vw 0;
    align-items: center;
  }

  .con09__title {
    width: auto;
    aspect-ratio: auto;
  }

  .con09__title-line {
    display: block;
  }

  .con09__title-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con09__title-line--1 {
    width: 45.7vw;
  }

  .con09__title-line--2 {
    width: 51vw;
    margin-top: 1.2vw;
  }

  .con09__title-line--3 {
    width: 35.4vw;
    margin-top: 1.6vw;
  }

  .con09__lead {
    margin-top: 4.2667vw;
    margin-bottom: 0;
  }

  .con09__panel .con09__stores {
    width: 100vw; /* 흰 박스(90vw)보다 넓게 — 카드가 박스 좌우 밖으로 흘러나감 */
    margin-inline: -5vw; /* 박스 양옆으로 5vw 씩 대칭으로 빠져나가게 */
    margin-top: 6.4vw;
    padding-block: 0.5333vw; /* Swiper 의 overflow:hidden 이 카드 위·아래 테두리를 1px 잘라 먹지 않게 여유 */
  }

  .con09__stores .con09__store {
    width: 52vw;
    height: auto;
    margin-inline: 1.6vw;
    padding-bottom: 4.2667vw;
    border-radius: 4.2667vw;
  }

  .con09__store-head {
    padding-block: 2.1333vw;
  }

  .con09__store-list {
    margin-top: 3.2vw;
    margin-bottom: 0;
  }

  .con09_iner .con09__types {
    width: 72vw;
    margin-right: 0;
    margin-top: 4.2667vw;
    padding-top: 8vw;
  }

  .con09__types .con09__type {
    width: 100%;
    padding-top: 8.5333vw;
    padding-bottom: 6.4vw;
    padding-inline: 5vw;
    gap: 2.1333vw;
    border-radius: 10.6667vw;
  }

  .con09__types .con09__type:has(.con09__type-badge) {
    padding-top: 10.6667vw;
  }

  .con09__type-title {
    line-height: 1.3;
  }

  .con09__type-desc {
    line-height: 1.45;
  }

  .con09__type-badge {
    top: -8vw;
    left: 0;
    right: 0;
    margin-inline: auto;
  }

  .con09__type-badge.con09__type-badge--staff,
  .con09__type-badge.con09__type-badge--regular,
  .con09__type-badge.con09__type-badge--family {
    width: 16vw;
  }

  .con09__nav {
    margin-top: 4.2667vw;
    gap: 2.1333vw;
  }

  .con09__arrow {
    width: 16vw;
    padding-block: 3.2vw;
    border-radius: 4.2667vw;
  }

  .con09__type-title,
  .con09__type-desc {
    text-wrap: balance;
  }

  .con09__types .swiper-slide-active .con09__type-badge {
    animation: con09-badge-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}


/* /merge-build:con09 */
/* merge-build:con10 */
/* con10 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 좌우 dish 는 카드 뒤에서 가로 크롭 또는 숨김, 카드 폭 100vw 기준으로 줄이고 내부 흐름 그대로 */
/* 카드 뒤 그릇 — Swiper(js/slide.js)가 가로로 멈춤 없이 흘려보내는 띠. 슬라이드 = 그릇 1장(왼/오 냄비 교대), 간격은 슬라이드 margin-right.
   swiper 가 .swiper{z-index} 로 스택 컨텍스트를 만들어 DOM 앞쪽 띠 위에 카드가 얹힌다.
   swiper-bundle.css(.swiper{position:relative})가 뒤에 로드돼 .absolute 유틸을 덮으므로 부모 클래스로 특이도를 올려 absolute 를 다시 선언 */
.con10_iner .con10__dishes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.con10__dishes .swiper-wrapper {
  align-items: flex-start;
}

/* swiper-bundle.css 의 .swiper-slide{width:100%;height:100%} 를 이기도록 2클래스 — 폭은 아래 IMG:AUTO 가 소유 */
.con10__dishes .con10__dish {
  height: auto;
  margin-right: calc(var(--px)*140); /* 음식 이미지 4종이 쉼 없이 이어지는 한 줄 — 카드 양옆 413 영역이 비지 않게 간격을 좁힌다 */
}

.con10__dish--left-pot {
  margin-top: calc(var(--px)*252);
}

.con10__dish--right-pot {
  margin-top: calc(var(--px)*279);
}

.con10__dish--red {
  margin-top: calc(var(--px)*272);
}

.con10__dish--green {
  margin-top: calc(var(--px)*218);
}

/* swiper-bundle.css 의 .swiper-slide{width:100%;height:100%} 가 뒤에 로드돼 부모 클래스로 특이도를 올림 */
.con10__slider .con10__card {
  width: calc(var(--px)*1077);
  height: auto;
}

.con10__slider {
  left: calc(var(--px)*-1);
}

.con10__card-iner {
  padding-top: calc(var(--px)*100);
}

.con10__stamps {
  align-self: flex-start;
  margin-left: calc(var(--px)*413);
}

.con10__stamp:nth-child(2) {
  margin-left: calc(var(--px)*-20);
}

.con10__stamp:nth-child(3) {
  margin-left: calc(var(--px)*-29);
}

.con10__title {
  margin-top: calc(var(--px)*24);
}

.con10__lead {
  margin-left: calc(var(--px)*4);
  margin-top: calc(var(--px)*35);
}

.con10__pot {
  align-self: flex-start;
  margin-left: calc(var(--px)*69);
  margin-top: calc(var(--px)*25.17);
}

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

.con10__dish.con10__dish--right-pot {
    width: calc(var(--px)*506);
    aspect-ratio: 506 / 499;
}

.con10__dish.con10__dish--red {
    width: calc(var(--px)*544);
    aspect-ratio: 544 / 512;
}

.con10__dish.con10__dish--green {
    width: calc(var(--px)*555);
    aspect-ratio: 555 / 579;
}

.con10__stamp {
    width: calc(var(--px)*98);
    aspect-ratio: 98 / 97;
}

.con10__title {
    width: calc(var(--px)*577);
    aspect-ratio: 577 / 108;
}

.con10__pot {
    width: calc(var(--px)*948);
    aspect-ratio: 948 / 609;
}
/* /IMG:AUTO con10 END */

/* FONT:AUTO con10 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con10__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    text-align: center;
    color: var(--primary);
}

.con10__lead-em {
    font-weight: 800;
}
/* /FONT:AUTO con10 END */

/* INK:AUTO con10 */
.con10__lead { margin-top: calc(var(--px) * 30.54); margin-bottom: calc(var(--px) * -4.42); } /* base 35,0 */
.con10__lead-em { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
/* /INK:AUTO con10 END */

/* 상시 루프 — 스탬프 img 의 v-zoom-strong 위상차(래퍼 transform 은 GSAP/자기장 소유) */
.con10__stamp:nth-child(2) img {
  animation-delay: -1.3s;
}

.con10__stamp:nth-child(3) img {
  animation-delay: -2.6s;
}

@media (max-width:599px) {
  .con10__slider .con10__card {
    width: 100%;
  }

  .con10__card-iner {
    padding-top: 8.5333vw;
  }

  .con10__stamps {
    align-self: center;
    margin-left: 0;
  }

  .con10__stamp {
    width: 14vw;
  }

  .con10__stamp + .con10__stamp {
    margin-left: -2.1333vw;
  }

  .con10__title {
    width: 76vw;
    margin-top: 4.2667vw;
  }

  .con10__lead {
    margin-left: 0;
    margin-top: 5.3333vw;
    margin-bottom: 0;
    padding-inline: 5.3333vw;
    text-wrap: balance;
  }

  .con10__lead-em {
    display: block;
    margin-bottom: 1.6vw;
  }

  .con10__pot {
    align-self: center;
    margin-left: 0;
    width: 88vw;
    margin-top: 4.2667vw;
  }
}


/* /merge-build:con10 */
/* merge-build:con11 */
/* con11 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 헤더 이미지·본문은 가운데 정렬 유지, 카드 스트립은 같은 swiper 로 카드 폭만 vw 스케일, 스티커는 vw 스케일 */
.con11_iner {
  padding-top: calc(var(--px)*79);
}

.con11__title {
  margin-top: calc(var(--px)*17);
}

.con11__lead {
  margin-top: calc(var(--px)*34);
  margin-right: calc(var(--px)*8);
}

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

/* 카드 하단이 잘리지 않게 흐름 높이를 그대로 둔다(예전 margin-bottom -5 는 section overflow:hidden 이 카드 아래 4~5px(보더·라운드)를 잘라냈다) */
/* 폭 = 100% + 좌우 237px 씩 — 부모 가운데정렬로 양쪽 대칭 bleed, 첫 보이는 카드가 x=-237 에서 시작(좌측 잘림) */
/* swiper-bundle.css 의 .swiper{margin-inline:auto} 가 넘치는 flex 아이템을 start 정렬로 만들어 margin 0 으로 되돌린다 */
.con11_iner .con11__slider {
  margin-left: calc(var(--px)*1);
  margin-right: 0;
  width: calc(100% + var(--px)*474);
  margin-top: calc(var(--px)*47);
}

/* PC: 멈춤 없이 흘러가는 띠 — 슬라이드 이동이 가속·감속 없이 일정한 속도여야 한다(js/slide.js con11, delay 0). 모바일은 센터드 슬라이드라 기본 easing */
@media (min-width: 600px) {
  .con11__slider .swiper-wrapper {
    transition-timing-function: linear;
  }
}

/* swiper-bundle.css 의 .swiper-slide{width:100%;height:100%} 가 뒤에 로드돼 부모 클래스로 특이도를 올림. 폭 = 카드 273 + 간격 27.57 */
.con11__slider .con11__review {
  width: calc(var(--px)*300.6);
  height: auto;
}

.con11__badge {
  top: calc(var(--px)*151);
  left: calc(var(--px)*22);
}

/* 카드 보더·라운드는 CSS 한 곳 소유(이미지엔 안 굽는다). 시안 사각형 2 복사 3: stroke inside 1px #e4dbc3(연갈색 · --tertiary #e4d8b6 와 다른 값이라 시안 헥스 그대로), radius 20, fill #fff */
/* content-box — IMG:AUTO 폭(269)=이미지 폭, 보더 1px 씩 바깥으로 얹혀 외곽 271x368. 이미지 투명 여백(좌1·상2·하1)이 빠진 만큼 margin 으로 원위치 보정 */
.con11__card {
  box-sizing: content-box;
  margin: calc(var(--px)*2) 0 calc(var(--px)*1) calc(var(--px)*1);
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*20);
  background: #fff;
  overflow: hidden;
}

/* z-index:2 — swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만들어 DOM 뒤쪽 스티커도 z 가 있어야 카드 위에 얹힌다 */
.con11__sticker {
  bottom: calc(var(--px)*3);
  z-index: 2;
}

.con11__sticker-word {
  top: calc(var(--px)*73);
}

.con11__sticker-caption {
  top: calc(var(--px)*237);
}

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

.con11__title {
    width: calc(var(--px)*505);
    aspect-ratio: 505 / 44;
}

.con11__lead {
    width: calc(var(--px)*581);
    aspect-ratio: 581 / 56;
}

.con11__card {
    width: calc(var(--px)*269);
    aspect-ratio: 269 / 366;
}

.con11__badge {
    width: calc(var(--px)*226);
    aspect-ratio: 226 / 92;
}

.con11__sticker-disc {
    width: calc(var(--px)*353);
    aspect-ratio: 353 / 354;
}

.con11__sticker-word {
    width: calc(var(--px)*220);
    aspect-ratio: 220 / 158;
}
/* /IMG:AUTO con11 END */

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

.con11__desc {
    line-height: 1.44;
    color: var(--primary);
}

.con11__sticker-caption {
    line-height: 1.96;
    letter-spacing: -0.1083em; /* OVR */
    color: #ffffff;
}
/* /FONT:AUTO con11 END */

/* INK:AUTO con11 */
.con11__desc { margin-top: calc(var(--px) * 25.54); margin-bottom: calc(var(--px) * -4.43); } /* base 30,0 */
/* /INK:AUTO con11 END */

/* 모션 — 상태 전환(hover) + 상시 루프. GSAP 은 슬라이드·래퍼 transform 을, CSS 는 그 안쪽 img/배지 래퍼만 소유(속성 분리) */
.con11__card img {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.con11__badge img {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

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

  .con11__review:hover .con11__badge img {
    transform: scale(1.1) rotate(-3deg);
  }
}

/* 번호 배지 도장 눌림 — 3.6s 주기 중 70~92% 만 움직이고 쉰다. --d(음수 지연)는 ani_con11.js 가 슬라이드 인덱스로 준다 */
@keyframes con11-thump {
  0%, 70%, 100% { transform: scale(1) rotate(0deg); }
  76% { transform: scale(1.1) rotate(-2deg); }
  84% { transform: scale(.97) rotate(1deg); }
  92% { transform: scale(1.03) rotate(0deg); }
}

.con11__badge {
  animation: con11-thump 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* 더블 블링크 — 완전 소등(v-blink) 은 핵심 문구가 사라져서 .25 까지만. 클래스는 등장 타임라인이 끝나면 ani_con11.js 가 붙인다 */
@keyframes con11-blink {
  0%, 60%, 70%, 82%, 100% { opacity: 1; }
  64%, 76% { opacity: .25; }
}

.con11__sticker-word.is-blink img {
  animation: con11-blink 2.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .con11__badge,
  .con11__sticker-word.is-blink img,
  .con11__sticker-disc img {
    animation: none;
  }
}

@media (max-width:599px) {
  .con11_iner {
    padding-top: 12.8vw;
    padding-bottom: 8.5333vw; /* 아래 con12 찢긴 종이 경계와 카드가 붙지 않게 */
  }

  .con11__tape {
    width: 56.1vw; /* 포인트 테이프 3종(con11·13·14) 글자 폭이 같도록 */
  }

  .con11__title {
    width: 88vw;
    margin-top: 8vw;
  }

  .con11__lead {
    width: auto;
    aspect-ratio: auto;
    margin-top: 5.3333vw;
    margin-right: 0;
  }

  .con11__lead-line {
    display: block;
  }

  .con11__lead-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con11__lead-line--1 {
    width: 66.4vw;
  }

  .con11__lead-line--2 {
    width: 70.2vw;
    margin-top: 1.6vw;
  }

  .con11__lead-line--3 {
    width: 44.8vw;
    margin-top: 1.6vw;
  }

  .con11__desc {
    margin-top: 5.3333vw;
    margin-bottom: 0;
    padding-inline: 6.4vw;
    line-height: 1.5;
  }

  .con11_iner .con11__slider {
    order: 2;
    width: 100vw;
    margin-left: 0;
    margin-top: 8.5333vw;
  }

  .con11__slider .con11__review {
    width: 65.2vw; /* 카드 62vw + 좌우 간격 1.6vw */
  }

  .con11__card {
    width: calc(62vw - 2px); /* content-box + 보더 1px×2 = 외곽 62vw */
    margin: 0 auto;
    border-radius: 5.3333vw;
  }

  .con11__badge {
    width: 51.4vw;
    left: 6.6vw;
    top: 34.3vw;
  }

  /* 스티커 — 원판 이미지 대신 빨간 가로 배너: "재주문율 60%" + 구분선 + 캡션 */
  .con11__sticker {
    position: relative;
    bottom: auto;
    order: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64vw;
    margin-top: 8.5333vw;
    padding: 4vw 4vw 4.8vw;
    gap: 2.1333vw;
    background-color: var(--secondary);
    border-radius: 5.3333vw;
  }

  .con11__sticker-word {
    position: relative;
    top: auto;
    flex: none;
    width: 28vw;
  }

  .con11__sticker-caption {
    position: relative;
    top: auto;
    padding-top: 2.1333vw;
    font-size: var(--bodyM);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--bg-color);
    border-top: 1px solid color-mix(in srgb, var(--bg-color) 45%, transparent);
  }
}


/* /merge-build:con11 */
/* merge-build:con12 */
/* con12 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 태블릿을 문서 흐름으로 올려 위, 카피 아래로 column 접기 */
/* 태블릿이 섹션 하단 아래로 bleed — 가로만 clip, 세로는 visible */
.con12 {
  overflow-x: clip;
  overflow-y: visible;
}

.con12_iner {
  padding: calc(var(--px)*181) 0 calc(var(--px)*101) calc(var(--px)*1106);
}

.con12__tablet {
  top: calc(var(--px)*50);
  left: calc(var(--px)*311);
}

.con12__lead {
  margin-top: calc(var(--px)*25);
}

/* 태블릿 = 종이 + 차트 + 테이프 3겹(원본 합성 725×505 안의 좌표). 모바일은 차트만 흐름으로 */
.con12__paper {
  top: calc(var(--px)*13);
  left: 0;
  width: calc(var(--px)*725);
}

.con12__chart {
  top: calc(var(--px)*67);
  left: calc(var(--px)*60);
  width: calc(var(--px)*611);
  z-index: 0; /* swiper-bundle 이 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 — 래퍼가 그걸 가둬 DOM 뒤 형제 테이프가 계속 위에 온다 */
}

/* 화면 4장 = 프레임 안에서 페이드. 장마다 PSD 원위치가 달라(01 기준 02 -3,-1 · 03 +11,+6 · 04 +7,+5) 슬라이드 안에서 마진으로 흡수 — 프레임 밖으로 비어져도 자르지 않는다.
   swiper-bundle 이 섹션 CSS 뒤에 로드돼 같은 특이도로 이기므로 부모 클래스로 올림 */
.con12__chart .con12__swiper {
  overflow: visible;
}

.con12__screen--01 {
  width: calc(var(--px)*611);
  min-height: calc(var(--px)*324);
  --dash-x: 0.85;
  --dash-y: 28.75;
  --dash-rot: -2.7deg;
  --dash-sx: 0.4996;
  --dash-sy: 0.4999;
  --page-x: 0;
  --page-y: 0;
  --page-sx: 1;
  --page-sy: 1;
}

.con12__screen--02 {
  width: calc(var(--px)*613);
  min-height: calc(var(--px)*330);
  margin-top: calc(var(--px)*-1);
  margin-left: calc(var(--px)*-3);
  --dash-x: 0.45;
  --dash-y: 32.7;
  --dash-rot: -3.111deg;
  --dash-sx: 0.5007;
  --dash-sy: 0.5035;
  --page-x: 10.5;
  --page-y: 10;
  --page-sx: 0.99;
  --page-sy: 0.9638;
}

.con12__screen--03 {
  width: calc(var(--px)*592);
  min-height: calc(var(--px)*317);
  margin-top: calc(var(--px)*6);
  margin-left: calc(var(--px)*11);
  --dash-x: -0.1;
  --dash-y: 29.65;
  --dash-rot: -2.831deg;
  --dash-sx: 0.485;
  --dash-sy: 0.487;
  --page-x: 2;
  --page-y: 6;
  --page-sx: 0.995;
  --page-sy: 0.9825;
}

.con12__screen--04 {
  width: calc(var(--px)*603);
  min-height: calc(var(--px)*325);
  margin-top: calc(var(--px)*5);
  margin-left: calc(var(--px)*7);
  --dash-x: 0.05;
  --dash-y: 23.45;
  --dash-rot: -2.199deg;
  --dash-sx: 0.4955;
  --dash-sy: 0.5109;
  --page-x: 1.5;
  --page-y: 15;
  --page-sx: 0.9912;
  --page-sy: 0.9425;
}

/* 대시보드 목업 — 시안 스크린샷(PSD 611×324 의 2배 px)을 HTML 로 다시 그린 것. 안쪽은 2배 px(창 1194×590)로 짜고, 창 전체를 태블릿 위 사진의 기울기(회전)·0.5배(scale)로 사다리꼴에 겹친다.
   사진 4장의 외곽 사각형은 대변 길이 차 0.1% 미만의 평행사변형이라 원근 없이 rotate+scale 만으로 정확히 맞는다. translate 는 calc(--px) 가 필요해 left/top 이 맡는다. 장마다 달리 잘린 화면은 안쪽 page 의 translate/scale(--page-*) 로 맞춘다 */
.con12__dash {
  top: calc(var(--px)*var(--dash-y));
  left: calc(var(--px)*var(--dash-x));
  width: calc(var(--px)*1194);
  height: calc(var(--px)*590); /* HEIGHT: 시안 화면 창을 자르는 회전 클립 프레임 — 내용은 창 밖으로 흘러 잘리는 게 시안 그대로 */
  overflow: hidden;
  background-color: #f6f5f7;
  transform-origin: 0 0;
  transform: rotate(var(--dash-rot)) scale(var(--dash-sx), var(--dash-sy));
  font-size: var(--bodyL);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #000;
  text-align: left;
}

.con12__dash-page {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px)*14);
  padding: calc(var(--px)*8) calc(var(--px)*10) 0 calc(var(--px)*8);
  transform-origin: 0 0;
  transform: translate(calc(var(--px)*var(--page-x)), calc(var(--px)*var(--page-y))) scale(var(--page-sx), var(--page-sy));
}

.con12__dash-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--px)*20);
  padding: calc(var(--px)*23) calc(var(--px)*23) calc(var(--px)*23);
  background-color: #ebf1f9;
  border: calc(var(--px)*2) solid #4a9de3;
  border-radius: calc(var(--px)*16);
}

.con12__dash-notice-tag {
  padding: calc(var(--px)*4) calc(var(--px)*11);
  font-size: var(--bodyXL);
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  background-color: #0a6cff;
  border-radius: calc(var(--px)*6); /* RADIUS: 시안 알림 라벨의 모서리(2배 px 6) — 알약 아님 */
}

.con12__dash-notice-text {
  font-size: var(--subheadM);
  font-weight: 600;
  letter-spacing: -0.0375em;
}

.con12__dash-notice-text strong {
  font-weight: 800;
}

.con12__dash-up {
  font-style: normal;
  font-weight: 800;
  color: #0aa58a;
}

.con12__dash-cards {
  display: grid;
  grid-template-columns: calc(var(--px)*586) 1fr;
  gap: calc(var(--px)*7);
}

.con12__dash-age,
.con12__dash-menu {
  background-color: #eaf1f9;
  border-radius: calc(var(--px)*14);
}

.con12__dash-age {
  display: flex;
  flex-direction: column;
  padding: calc(var(--px)*27) 0 calc(var(--px)*21);
}

.con12__dash-title {
  font-size: var(--subheadM);
  font-weight: 700;
}

.con12__dash-age .con12__dash-title {
  padding-left: calc(var(--px)*26);
}

.con12__dash-chart {
  width: calc(var(--px)*354);
  margin-inline: auto;
}

.con12__dash-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--px)*6);
  margin-top: calc(var(--px)*20);
  padding-right: calc(var(--px)*9);
  font-size: var(--bodyXL);
  color: #333;
}

.con12__dash-dot {
  width: calc(var(--px)*14);
  aspect-ratio: 1;
  border-radius: 50%;
}

.con12__dash-dot--f { background-color: #12b8a0; }
.con12__dash-dot--m {
  margin-left: calc(var(--px)*7);
  background-color: #0a6cff;
}

.con12__dash-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: calc(var(--px)*8);
  padding: 0;
  list-style: none;
}

.con12__dash-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px)*11);
}

.con12__dash-track {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(var(--px)*42);
  min-height: calc(var(--px)*123);
  background-color: #d7e4f9;
  border-radius: calc(var(--px)*3) calc(var(--px)*3) 0 0;
  overflow: hidden;
}

/* 막대 비율 = 트랙(min-height 123) 안에서 빈칸·남성·여성이 flex-grow 로 나눠 가진다. 패널마다 다른 데이터라 li 인라인 변수(--seg-m/f, 단위 없는 %값)로 받는다 */
.con12__dash-track::before {
  content: "";
  flex: calc(100 - var(--seg-m) - var(--seg-f)) 0 0%;
}

.con12__dash-seg--m {
  flex: var(--seg-m) 0 0%;
  background-color: #0a6cff;
}

.con12__dash-seg--f {
  flex: var(--seg-f) 0 0%;
  background-color: #12b8a0;
}

.con12__dash-bar-label {
  font-size: var(--headS);
  color: #333;
}

.con12__dash-totals {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--px)*31);
  margin-top: calc(var(--px)*17);
  font-size: var(--bodyL);
  color: #444;
}

.con12__dash-totals strong {
  font-size: var(--subheadL);
  font-weight: 800;
  color: #111;
}

.con12__dash-totals--divided {
  gap: calc(var(--px)*10);
  font-size: var(--bodyM);
}

.con12__dash-totals--divided strong {
  font-size: var(--subheadM);
}

.con12__dash-totals--divided span + span {
  padding-left: calc(var(--px)*10);
  border-left: calc(var(--px)*2) solid #d3dbe8;
}

.con12__dash-insight {
  margin-top: calc(var(--px)*27);
  font-size: var(--headM);
  letter-spacing: -0.016em;
  font-weight: 600;
  line-height: 1.42;
  text-align: center;
}

.con12__dash-menu {
  padding: calc(var(--px)*27) calc(var(--px)*21) calc(var(--px)*26) calc(var(--px)*20);
}

.con12__dash-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--px)*8) 0 calc(var(--px)*4);
}

.con12__dash-filter {
  display: flex;
  align-items: center;
  gap: calc(var(--px)*12);
  font-size: var(--subheadM);
  font-weight: 600;
  color: #0a6cff;
}

.con12__dash-chevron {
  width: calc(var(--px)*10);
  aspect-ratio: 1;
  margin-bottom: calc(var(--px)*6);
  border-right: calc(var(--px)*2) solid #0a6cff;
  border-bottom: calc(var(--px)*2) solid #0a6cff;
  transform: rotate(45deg);
}

.con12__dash-table {
  margin-top: calc(var(--px)*23);
  padding: 0;
  list-style: none;
  border-top: calc(var(--px)*3) solid #44495c;
}

.con12__dash-head,
.con12__dash-row {
  display: grid;
  grid-template-columns: calc(var(--px)*274) calc(var(--px)*105) 1fr;
  align-items: center;
  border-bottom: calc(var(--px)*2) solid #dae1ee;
}

.con12__dash-head {
  background-color: #dde7f5;
  font-size: var(--bodyL);
  color: #222;
}

.con12__dash-name {
  padding: calc(var(--px)*14) calc(var(--px)*6) calc(var(--px)*14) calc(var(--px)*15);
  overflow: hidden;
  text-overflow: ellipsis; /* 긴 메뉴명은 시안처럼 칸에서 잘리고 끝이 … 로 닫힌다 */
  white-space: nowrap;
  font-size: var(--headS);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #000;
}

.con12__dash-sum {
  letter-spacing: -0.06em;
}

.con12__dash-count,
.con12__dash-sum {
  padding: calc(var(--px)*14) calc(var(--px)*13) calc(var(--px)*14) 0;
  font-size: var(--headS);
  font-weight: 800;
  color: #111;
  text-align: right;
  border-left: calc(var(--px)*2) solid #cfd8e6;
}

.con12__dash-head .con12__dash-name,
.con12__dash-head .con12__dash-count,
.con12__dash-head .con12__dash-sum {
  padding-top: calc(var(--px)*11);
  padding-bottom: calc(var(--px)*9);
  font-size: var(--bodyL);
  font-weight: 600;
  color: #222;
}

.con12__tape {
  top: calc(var(--px)*4);
  left: calc(var(--px)*188);
  width: calc(var(--px)*323);
}

/* v-peel 의 position:relative 를 덮고, 2겹이 absolute 라 접힌 래퍼 높이를 비율로 보존. --peel 은 GSAP 소유, transform 은 v-peel CSS 소유 */
.con12__tape.v-peel {
  position: absolute;
  aspect-ratio: 646 / 142;
}

/* 모션 — 상시 루프(CSS keyframes, PC 전용). is-sway 는 PC 등장 완료 후 ani_con12.js 가 부착 */
@media (min-width: 600px) {
  .con12__tablet.is-sway {
    animation: con12-sway 6s steps(5, end) infinite alternate;
  }

  /* 슬라이드는 하나씩만 — 이전 화면이 완전히 사라진 뒤(0.25s) 다음 화면이 나타난다. swiper fade 가 inline 으로 넣는 opacity·duration 을 !important 로 덮는다 */
  .con12__slide {
    opacity: 0 !important;
    transition-property: opacity;
    transition-duration: 250ms !important;
  }

  .con12__slide.swiper-slide-active {
    opacity: 1 !important;
    transition-delay: 250ms;
  }
}

/* 회전·소수 px 이동은 글자를 매 프레임 재샘플링해 흐려진다(실측 선명도 -36%) → 회전 없이 1px 단위 계단 이동만 */
@keyframes con12-sway {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--px)*-5)); }
}

@media (prefers-reduced-motion: reduce) {
  .con12__tablet.is-sway { animation: none; }
}

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

.con12__title {
    width: calc(var(--px)*320);
    aspect-ratio: 320 / 97;
}
/* /IMG:AUTO con12 END */

/* FONT:AUTO con12 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con12__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: #2c1e00;
}
/* /FONT:AUTO con12 END */

/* INK:AUTO con12 */
.con12__lead { margin-top: calc(var(--px) * 20.54); margin-bottom: calc(var(--px) * -4.43); } /* base 25,0 */
/* /INK:AUTO con12 END */


@media (max-width:599px) {
  /* 모바일 배경 — 큰 합성 배경을 세로로 늘려 쓰면 찢긴 선이 제목을 가로지른다. 찢긴 선 띠(con12_09)만 맨 위에 두고 아래는 같은 색으로 채워
     색이 바뀌는 선이 곧 섹션 경계가 되게 한다 */
  .con12 {
    background-color: #dccea6;
    background-image: url(/images/con12_09.png);
    background-repeat: no-repeat;
    background-position: 35% top;
    background-size: 160% auto;
  }

  .con12_iner {
    padding: 14vw 0 28.6667vw; /* 위 찢긴 종이 경계 아래로 · 아래는 con13 산 모양 띠(18vw)가 겹쳐 올라오는 만큼 늘림 */
    align-items: center;
    gap: 4.2667vw;
  }

  /* 종이·테이프는 .pc 로 빠지고 차트만 남는다 — 제목·카피 아래(order)로 */
  .con12__tablet {
    position: relative;
    top: auto;
    left: auto;
    order: 3;
    width: 92vw;
    aspect-ratio: auto;
  }

  /* 모바일 전용 현황 — PC 슬라이드 4장을 탭 4개로. 합성 이미지를 줄이지 않고 같은 정보(알림·연령/성별 막대·인기메뉴 5건)를 글자로 다시 짠 것 */
  .con12__board {
    flex-direction: column;
    gap: 3.2vw;
    width: 100%;
    text-align: left;
    color: #222;
  }

  .con12__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.0667vw;
    padding: 1.0667vw;
    background-color: color-mix(in srgb, var(--tertiary) 55%, white);
    border-radius: 3.2vw;
  }

  .con12__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.1333vw 0;
    font-family: inherit;
    font-size: var(--bodyXS);
    line-height: 1.2;
    color: color-mix(in srgb, var(--primary) 65%, white);
    background-color: transparent;
    border: 0;
    border-radius: 2.1333vw;
    cursor: pointer;
    word-break: keep-all;
  }

  .con12__tab.is-active {
    color: var(--bg-color);
    background-color: var(--primary);
  }

  .con12__tab:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 1px;
  }

  .con12__panel {
    padding: 4vw;
    background-color: #fff;
    border: 1px solid #dfe6f2;
    border-radius: 4.2667vw;
  }

  .con12__panel:not(.is-active) {
    display: none; /* 탭 = 뷰포트가 아니라 런타임 상태가 소유하는 표시 */
  }

  .con12__notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.1333vw;
    padding: 3.2vw;
    background-color: #f4f8ff;
    border: 1px solid #5b9bf5;
    border-radius: 3.2vw;
  }

  .con12__notice-tag {
    padding: 0.8vw 2.1333vw;
    font-size: var(--bodyXS);
    font-weight: 700;
    color: #fff;
    background-color: #0a6cff;
    border-radius: 1.6vw;
  }

  .con12__notice-text {
    font-size: var(--bodyM);
    line-height: 1.5;
    word-break: keep-all;
  }

  .con12__up {
    font-style: normal;
    font-weight: 700;
    color: #0aa58a;
  }

  .con12__age,
  .con12__menu {
    margin-top: 3.2vw;
    padding: 3.2vw;
    background-color: #f3f6fc;
    border-radius: 3.2vw;
  }

  .con12__board-title {
    font-size: var(--bodyL);
    font-weight: 700;
    line-height: 1.3;
  }

  .con12__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.0667vw;
    margin-top: 1.6vw;
    font-size: var(--bodyXS);
    color: #555;
  }

  .con12__legend .con12__dot + .con12__dot,
  .con12__legend .con12__dot--m {
    margin-left: 2.1333vw;
  }

  .con12__dot {
    width: 2.1333vw;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .con12__dot--f { background-color: #12b8a0; }
  .con12__dot--m { background-color: #0a6cff; }

  .con12__bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.1333vw;
    margin-top: 2.1333vw;
    padding: 0;
    list-style: none;
  }

  .con12__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6vw;
  }

  .con12__track {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 8.5333vw;
    height: 32vw;
    background-color: #dfe7f7;
    border-radius: 1.0667vw 1.0667vw 0 0;
    overflow: hidden;
  }

  /* 막대 높이 = 패널마다 다른 데이터라 li 의 --seg-m/--seg-f(트랙 대비 %)로 받는다 */
  .con12__seg--m {
    height: var(--seg-m);
    background-color: #0a6cff;
  }

  .con12__seg--f {
    height: var(--seg-f);
    background-color: #12b8a0;
  }

  .con12__bar-label {
    font-size: var(--bodyXS);
    color: #555;
  }

  .con12__totals {
    display: flex;
    justify-content: space-around;
    margin-top: 3.2vw;
    font-size: var(--bodyS);
    color: #444;
  }

  .con12__totals strong {
    font-size: var(--bodyXL);
    font-weight: 800;
    color: #111;
  }

  .con12__insight {
    margin-top: 3.2vw;
    padding-top: 3.2vw;
    font-size: var(--bodyM);
    line-height: 1.5;
    text-align: center;
    border-top: 1px solid #dde4f0;
    word-break: keep-all;
  }

  .con12__menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .con12__filter {
    font-size: var(--bodyXS);
    font-weight: 600;
    color: #0a6cff;
  }

  .con12__menu-list {
    margin-top: 2.1333vw;
    padding: 0;
    list-style: none;
    border-top: 2px solid #2b2b2b;
  }

  .con12__menu-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8vw 2.1333vw;
    padding: 2.6667vw 0;
    border-bottom: 1px solid #dde4f0;
  }

  .con12__menu-name {
    grid-column: 1 / -1;
    font-size: var(--bodyM);
    line-height: 1.3;
    color: #333;
  }

  .con12__menu-count {
    font-size: var(--bodyM);
    font-weight: 800;
    color: #111;
  }

  .con12__menu-sum {
    font-size: var(--bodyM);
    font-weight: 800;
    color: #0a6cff;
  }

  .con12__title {
    width: auto;
    aspect-ratio: auto;
  }

  .con12__title-mo {
    gap: 1.4vw;
  }

  .con12__title-line--1 {
    width: 46.9vw;
  }

  .con12__title-line--2 {
    width: 54.4vw;
  }

  .con12__title-line img {
    width: 100%;
    height: auto;
  }

  .con12__lead {
    margin: 0;
    padding-inline: 4.2667vw;
  }
}

/* /merge-build:con12 */
/* merge-build:con13 */
/* con13 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 카피 흐름 그대로 세로, 접시·말풍선 4개는 접시 기준 2x2 로 재배치 */
/* 접시 사진·말풍선은 섹션 하단 bleed + 접시 위 겹침이라 absolute. 높이는 카피 흐름 + padding-bottom 이 만든다 */
.con13_iner {
  padding-top: calc(var(--px)*129);
  padding-bottom: calc(var(--px)*495);
}

.con13__title {
  margin-top: calc(var(--px)*29);
}

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

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

/* 접시 뒤 갈색 반원 — 하단은 섹션 overflow 로 잘림 */
.con13__arch {
  top: calc(var(--px)*513);
  right: calc(var(--px)*103);
  bottom: calc(var(--px)*-875);
  left: calc(var(--px)*102);
  border-radius: 50%;
  background: #442f03;
}

/* 하단 402px 은 con14 로 이어지는 걸침 자산 */
.con13__plate {
  bottom: calc(var(--px)*-401);
  left: calc(var(--px)*495);
}

.con13__bubble--payback {
  bottom: calc(var(--px)*285);
  left: calc(var(--px)*644);
}

.con13__bubble--anyone {
  right: calc(var(--px)*652);
  bottom: calc(var(--px)*285);
}

.con13__bubble--brand {
  bottom: calc(var(--px)*101);
  left: calc(var(--px)*392);
}

.con13__bubble--season {
  right: calc(var(--px)*407);
  bottom: calc(var(--px)*101);
}

/* 신호등 — 시안에 그려진 두 디자인(점등 = 빨강 원 + 크림 글자 + 바깥 얇은 링 / 꺼짐 = 크림 원 + 진갈색 글자)이 말풍선 사이를 한 번에 하나씩 옮겨 다닌다.
   정지 상태(시안) = 유행타지 않는 브랜드만 빨강. 순환이 시작되면(JS 가 .con13__bubbles--lamp 부착) 점등된 것만 빨강.
   GSAP 은 .con13__bubble(transform) 소유 — 색 전환은 안쪽 원(.con13__bubble-pc)의 background-color transition 으로.
   원 = CSS, 글자 = 투명 PNG 마스크(con13_11~14) */
.con13__bubble-pc {
  position: relative;
  aspect-ratio: 178 / 179;
  border-radius: 50%;
  background-color: var(--bg-color);
  transition: background-color .45s ease-out;
}

/* 점등 광택 — 시안 빨강 원의 은은한 하이라이트 */
.con13__bubble-pc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .14), transparent 58%);
  opacity: 0;
  transition: opacity .45s ease-out;
}

.con13__bubble-glyph {
  position: absolute;
  inset: 0;
  background-color: var(--primary);
  transition: background-color .45s ease-out;
  -webkit-mask: var(--con13-glyph) center / 100% 100% no-repeat;
  mask: var(--con13-glyph) center / 100% 100% no-repeat;
}

.con13__bubble--payback { --con13-glyph: url(/images/con13_11.png); }
.con13__bubble--anyone { --con13-glyph: url(/images/con13_12.png); }
.con13__bubble--brand { --con13-glyph: url(/images/con13_13.png); }
.con13__bubble--season { --con13-glyph: url(/images/con13_14.png); }

.con13__bubble--brand .con13__bubble-pc,
.con13__bubble--on .con13__bubble-pc {
  background-color: #e6341a;
}

.con13__bubble--brand .con13__bubble-pc::before,
.con13__bubble--on .con13__bubble-pc::before {
  opacity: 1;
}

.con13__bubble--brand .con13__bubble-glyph,
.con13__bubble--on .con13__bubble-glyph {
  background-color: var(--bg-color);
}

.con13__bubbles--lamp .con13__bubble--brand:not(.con13__bubble--on) .con13__bubble-pc {
  background-color: var(--bg-color);
}

.con13__bubbles--lamp .con13__bubble--brand:not(.con13__bubble--on) .con13__bubble-pc::before {
  opacity: 0;
}

.con13__bubbles--lamp .con13__bubble--brand:not(.con13__bubble--on) .con13__bubble-glyph {
  background-color: var(--primary);
}

/* 바깥 얇은 링 — 원 가장자리에서 14px 바깥, 점등된 말풍선에만 */
.con13__bubble::before {
  content: "";
  position: absolute;
  inset: calc(var(--px)*-14);
  border: 1px solid #c03a3a;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .45s ease-out;
  pointer-events: none;
}

.con13__bubble--brand::before,
.con13__bubble--on::before {
  opacity: 1;
}

.con13__bubbles--lamp .con13__bubble--brand:not(.con13__bubble--on)::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .con13__bubble-pc,
  .con13__bubble-pc::before,
  .con13__bubble-glyph,
  .con13__bubble::before {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .con13__plate img {
    transform-origin: 50% 90%;
    animation: con13-simmer 4s ease-in-out infinite alternate;
  }

  @keyframes con13-simmer {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-.6%) scale(1.008); }
  }
}

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

.con13__title {
    width: calc(var(--px)*453);
    aspect-ratio: 453 / 98;
}

.con13__lead {
    width: calc(var(--px)*625);
    aspect-ratio: 625 / 24;
}

.con13__plate {
    width: calc(var(--px)*915);
    aspect-ratio: 915 / 845;
}

.con13__bubble.con13__bubble--payback,
.con13__bubble.con13__bubble--anyone,
.con13__bubble.con13__bubble--brand,
.con13__bubble.con13__bubble--season {
    width: calc(var(--px)*178);
    aspect-ratio: 178 / 179;
}
/* /IMG:AUTO con13 END */

/* FONT:AUTO con13 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con13__note {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.67;
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO con13 END */

/* INK:AUTO con13 */
.con13__note { margin-top: calc(var(--px) * 23.47); margin-bottom: calc(var(--px) * -6.52); } /* base 30,0 */
/* /INK:AUTO con13 END */

@media (max-width: 599px) {
  /* 모바일 배경 — 위 탄색 구간은 con12 가 이어서 깔고, 갈색 산 모양 띠(con13_10, 위쪽은 투명)만 올려 색이 바뀌는 선이 곧 섹션 경계가 되게 한다.
     띠(가로 160% ≈ 높이 18vw)만큼 위 섹션 아래로 겹쳐 올리고, 아래는 같은 갈색으로 채운다 */
  .con13 {
    margin-top: -18vw;
    background-color: transparent;
    background-image: url(/images/con13_10.png), linear-gradient(#240f00, #240f00);
    background-repeat: no-repeat;
    background-position: 35% top, 0 100%;
    background-size: 160% auto, 100% calc(100% - 16vw);
  }

  .con13_iner {
    padding-top: 26vw;
    padding-bottom: 0;
  }

  .con13__tape {
    width: 56.4vw;
  }

  .con13__title {
    width: 80vw;
    margin-top: 8.2667vw;
  }

  .con13__lead-mo {
    margin-top: 6.2667vw;
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.05em;
    color: #ffffff;
  }

  .con13__note {
    margin-top: 2.3333vw;
    margin-bottom: 0;
    padding-inline: 8vw;
  }

  /* 버블 4개 → 글자로 짠 2×2 둥근 카드(원 이미지는 PC 만). 유행타지 않는 브랜드만 빨강으로 강조 */
  .con13__bubbles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2vw;
    width: 86vw;
    margin-top: 6.4vw;
  }

  .con13__bubble.con13__bubble--payback,
  .con13__bubble.con13__bubble--anyone,
  .con13__bubble.con13__bubble--brand,
  .con13__bubble.con13__bubble--season {
    position: relative;
    inset: auto;
    width: auto;
    aspect-ratio: auto;
    padding: 5.3333vw 3.2vw;
    background-color: var(--bg-color);
    border-radius: 5.3333vw;
    transition: background-color .4s ease-out;
  }

  /* 신호등 — 점등 = 빨강 카드 + 크림 글자 / 꺼짐 = 크림 카드 + 진갈색 글자. 정지 상태(시안) = 브랜드만 빨강, 순환이 시작되면 점등된 것만 빨강.
     transform 은 GSAP 소유라 배경색·글자색 전환만 */
  .con13__bubble.con13__bubble--brand,
  .con13__bubble.con13__bubble--on {
    background-color: var(--secondary);
  }

  .con13__bubbles--lamp .con13__bubble.con13__bubble--brand:not(.con13__bubble--on) {
    background-color: var(--bg-color);
  }

  .con13__bubble::before {
    content: none; /* PC 의 바깥 링 장식 */
  }

  .con13__bubble-text {
    transition: color .4s ease-out;
    font-size: var(--subheadM);
    line-height: 1.35;
    letter-spacing: -0.05em;
    text-align: center;
    color: var(--primary);
  }

  .con13__bubble--brand .con13__bubble-text,
  .con13__bubble--on .con13__bubble-text {
    color: var(--bg-color);
  }

  .con13__bubbles--lamp .con13__bubble--brand:not(.con13__bubble--on) .con13__bubble-text {
    color: var(--primary);
  }

  .con13__b-line {
    display: block;
  }

  .con13__b-strong {
    font-size: var(--headS);
    font-weight: 800;
  }

  .con13__plate {
    position: relative;
    bottom: auto;
    left: auto;
    order: 1;
    width: 100vw;
    margin-top: 2.1333vw;
    margin-bottom: -27.3vw;
  }

  .con13__arch {
    top: auto;
    right: -20vw;
    bottom: -55vw;
    left: -20vw;
    height: 110vw; /* HEIGHT: 장식 반원 — 섹션 높이가 카피 길이로 변해 top 앵커 불가, bottom 앵커 + 고정 높이로 돔 높이 55vw 확보 */
  }
}


/* /merge-build:con13 */
/* merge-build:con14 */
/* con14 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 게시판 연동(main_menu): .con14__tabs = 분류, .con14__list > .con14__card = 글 1건. 호버·포커스·탭 시 .con14__card--selected 가 옮겨 붙는다(js/script.js) */
/* 모바일: 탭 가로 스크롤 또는 균등분할, 카드 4장 한 줄 → 2×2 그리드 슬라이드, 판 폭 100% */
.con14__panel {
  width: calc(var(--px)*1800);
  padding: calc(var(--px)*83) 0 calc(var(--px)*2);
  background: #fff;
  border-radius: calc(var(--px)*20) calc(var(--px)*20) 0 0;
}

/* 찢어진 종이: 패널 폭(1800)을 넘어 섹션 전폭(1905)으로 bleed, 콘텐츠 뒤 */
.con14__torn-edge {
  bottom: 0;
  left: calc(var(--px)*-52);
}

.con14__title {
  margin: calc(var(--px)*35) 0 0;
}

.con14__subtitle {
  margin: calc(var(--px)*30) 0 calc(var(--px)*1);
}

.con14__lead {
  margin: calc(var(--px)*25) 0 0;
}

.con14__stamp {
  margin-top: calc(var(--px)*66);
}

.con14__menu-title {
  margin-top: calc(var(--px)*29);
}

.con14__tabs {
  width: calc(var(--px)*1328);
  margin: calc(var(--px)*37) calc(var(--px)*3) 0 0;
  padding: calc(var(--px)*4.2) 0 0 calc(var(--px)*356);
  gap: calc(var(--px)*116);
  background: #2c1e00;
  border-radius: calc(var(--px)*20);
}

.con14__tab {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--px)*77);
  padding: 0 calc(var(--px)*9);
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;

  /* 밑줄은 항상 존재하고 닫힘(clip-path 좌우 50%) ↔ 열림(선택)으로 전환한다 — 생성/제거로는 transition 이 안 걸린다 */
  &::after {
    content: "";
    position: absolute;
    top: calc(100% - var(--px)*16);
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(#368318 0 calc(var(--px)*6), #f44228 calc(var(--px)*6) 100%);
    clip-path: inset(0 50%);
    transition: clip-path 0.3s ease;
  }

  &.con14__tab--selected::after {
    clip-path: inset(0);
  }

  /* 비선택 탭 호버·키보드 포커스: 밑줄이 반쯤 열린다(기존 .3s ease 재사용) */
  &:not(.con14__tab--selected):focus-visible::after {
    clip-path: inset(0 30%);
  }

  @media (hover: hover) {
    &:not(.con14__tab--selected):hover::after {
      clip-path: inset(0 30%);
    }
  }
}

/* 슬라이드 — Swiper(js/slide.js): .con14__list = 컨테이너, 안의 ul.swiper-wrapper > li.con14__card.swiper-slide. 카드 간격은 JS spaceBetween */
.con14__list {
  width: calc(var(--px)*1328);
  height: calc(var(--px)*358); /* HEIGHT: 카드 한 줄 높이 — 빈 분류·글이 적은 페이지에서도 .con14__content 높이가 안 변하게 */
  margin: calc(var(--px)*14) calc(var(--px)*3) 0 0;

  > .swiper-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 탭 전환 — 목록이 부드럽게 빠졌다가(is-switching) 새 카드가 한 장씩 시차를 두고 올라온다(is-entering, js/slide.js) */
  transition: opacity 0.25s ease;

  &.is-switching {
    opacity: 0;
  }

  &.is-entering .con14__card {
    animation: con14-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes con14-rise {
  from {
    opacity: 0;
    transform: translateY(calc(var(--px)*24));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 카드 하단을 사진이 잘라낸다 — 높이는 사진 노출창(height)이 만들어 358 이 된다 */
.con14__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px)*6.9);
  overflow: hidden;
  padding-top: calc(var(--px)*108.9);
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4dbc3;
  transition: padding-top 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, transform 0.35s ease;

  &.con14__card--selected {
    padding-top: calc(var(--px)*56.9);
    background: #368318;
    border-radius: calc(var(--px)*20);
    box-shadow: none;
  }
}

/* swiper-bundle.css 의 .swiper-slide{display:block; transition-property:transform} 이 뒤에 로드돼 위 display:flex(gap 포함)·transition 을 덮는다 — 부모 클래스로 특이도를 올려 되살린다 */
.con14__list .con14__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: padding-top 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.con14__card-title {
  margin: 0;
  transition: color 0.35s ease;
}

/* 설명은 display 가 아니라 height 0 ↔ auto + 페이드로 열린다(common.css :root interpolate-size). 닫힌 상태에서도 gap·margin 이 남으므로 카드 높이 보정은 .con14__card-media 쪽에 있다 */
.con14__card-desc {
  overflow: hidden;
  height: 0;
  margin: calc(var(--px)*13) 0 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--px)*8));
  transition: height 0.35s ease, opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;

  .con14__card--selected > & {
    height: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.con14__card-media {
  align-self: flex-start;
  margin: calc(var(--px)*65.3) 0 0 calc(var(--px)*12); /* 80.2 − 14.9: 닫힌 설명(height 0)이 남기는 gap 6.9 + margin 10.5 − 2.5 만큼 보정 → 사진 상단 220 유지 */
  overflow: hidden;
  height: calc(var(--px)*138); /* HEIGHT: 게시판 첨부 이미지 틀 — 어떤 비율이 와도 카드 높이가 변하지 않게 고정(유저 요청: obf cover w100 h100). 카드 358 − 사진 상단 220 */
  transition: margin-top 0.35s ease, height 0.35s ease;

  .board-thumb {
    object-position: top;
  }

  &.con14__card-media--empty {
    background: #e4dbc3; /* 사진 없는 글 대체면 */
  }

  .con14__card--selected > & {
    margin-top: calc(var(--px)*23.3);
    height: calc(var(--px)*192); /* HEIGHT: 위와 같은 사유(선택 상태 틀). 카드 358 − 사진 상단 166 */
  }

  /* 선택된 카드 사진이 살짝 커진다 — GSAP 은 media 래퍼만 건드리고 img 는 CSS 가 소유 */
  img {
    transition: transform 0.6s ease-out;
  }

  .con14__card--selected > & img {
    transform: scale(1.06);
  }
}

.con14__pager {
  gap: calc(var(--px)*8);
  margin-top: calc(var(--px)*20);
}

.con14__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--px)*72);
  min-height: calc(var(--px)*72);
  padding: 0;
  border: 0;
  border-radius: calc(var(--px)*20);
  cursor: pointer;

  background: #322409;
  transition: background-color 0.25s ease;

  /* PC 전용: 눌림 피드백. 모바일 화살표는 rotate(90deg) 를 쓰므로 transform 전환·:active 를 걸지 않는다 */
  @media (min-width: 600px) {
    transition: background-color 0.25s ease, transform 0.15s ease-out;

    &:active {
      transform: scale(0.92);
    }
  }

  /* 터치 기기는 호버가 눌린 채 남으므로 호버 가능한 환경에서만 */
  @media (hover: hover) {
    &:hover {
      background: #f44228;
    }
  }
}

/* 다음 화살표 넛지 — translate 속성만 쓴다(GSAP 은 transform 만 소유). 호버하면 멈춘다 */
@keyframes con14-nudge {
  0%,
  100% {
    translate: 0;
  }

  50% {
    translate: calc(var(--px)*6);
  }
}

@media (min-width: 600px) {
  .con14__arrow--next {
    animation: con14-nudge 2.4s ease-in-out infinite;

    &:hover {
      animation-play-state: paused;
    }
  }
}

/* 모바일 메뉴 상세 팝업 — js/script.js 가 body 로 옮겨 열고 닫는다(.is-open). 뷰포트 토글이 아니라 런타임 상태라 visibility 로 연다. 박스 모양은 모바일 블록 */
.con14__modal {
  position: fixed;
  inset: 0;
  z-index: 10000; /* 헤더(9999)·퀵바(1111) 위 — 전체 화면 팝업 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  &.is-open {
    opacity: 1;
    visibility: visible;
  }
}

.con14__modal-dim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #2c1e00 65%, transparent);
}

.con14__modal-box {
  position: relative;
  display: flex;
}

/* 모션 최소화 환경: con14 의 전환 전부 끈다(베이스 규칙과 같은 특이도, 뒤에 놓여 이긴다) */
@media (prefers-reduced-motion: reduce) {
  .con14__tab::after,
  .con14__card,
  .con14__card-title,
  .con14__card-desc,
  .con14__card-media,
  .con14__card-media img,
  .con14__arrow {
    transition: none;
  }

  .con14__arrow--next {
    animation: none;
  }

  .con14__list,
  .con14__list.is-entering .con14__card {
    transition: none;
    animation: none;
  }
}

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

.con14__label {
    width: calc(var(--px)*365);
    aspect-ratio: 365 / 77;
}

.con14__title {
    width: calc(var(--px)*645);
    aspect-ratio: 645 / 44;
}

.con14__subtitle {
    width: calc(var(--px)*547);
    aspect-ratio: 547 / 25;
}

.con14__stamp {
    width: calc(var(--px)*251);
    aspect-ratio: 251 / 97;
}

.con14__menu-title {
    width: calc(var(--px)*283);
    aspect-ratio: 283 / 35;
}

.con14__card-media {
    width: calc(var(--px)*307);
    aspect-ratio: 307 / 307;
}
/* /IMG:AUTO con14 END */

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

.con14__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: var(--primary);
}

.con14__tabs {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    letter-spacing: -0.085em;  /* OVR */
    line-height: 1.2;
    color: #ffffff;
}

.con14__tab.con14__tab--selected {
    font-weight: 600;
}

.con14__tab {
    font-weight: 400;
}

.con14__card-title.con14__card-title--selected {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.077em;  /* OVR */
    line-height: 1.3;  /* OVR */
    color: #fff8e4;
}

.con14__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.25;
    color: #ffffff;
}

.con14__card-title {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.077em;  /* OVR */
    line-height: 1.3;  /* OVR */
    color: #2c1e00;
}

.con14__pager {
    font-family: var(--font-pretendard);
    font-size: var(--titleS);
    font-weight: 300;
    letter-spacing: -0.075em;
    line-height: 1;
    color: #ffffff;
}
/* /FONT:AUTO con14 END */

/* INK:AUTO con14 */
.con14__card-title.con14__card-title--selected { margin-top: calc(var(--px) * -4.9); margin-bottom: calc(var(--px) * -4.9); } /* base 0,0 */
.con14__card-title { margin-top: calc(var(--px) * -4.9); margin-bottom: calc(var(--px) * -4.9); } /* base 0,0 */
.con14__lead { margin-top: calc(var(--px) * 20.54); margin-bottom: calc(var(--px) * -2.42); } /* base 25,0 */
.con14__card-desc { margin-top: calc(var(--px) * 10.5); margin-bottom: calc(var(--px) * -2.5); } /* base 13,0 */
.con14__tab.con14__tab--selected { margin-top: calc(var(--px) * -4.2); margin-bottom: calc(var(--px) * 0); } /* base 0,0 */
.con14__tab { margin-top: calc(var(--px) * -4.2); margin-bottom: calc(var(--px) * 0); } /* base 0,0 */
/* /INK:AUTO con14 END */

@media (max-width: 599px) {
  .con14__panel {
    width: 94.6667vw;
    padding: 8.5333vw 4vw 8.5333vw;
    border-radius: 3.2vw 3.2vw 0 0;
    word-break: keep-all;
  }

  .con14__label {
    width: 55.5vw;
  }

  .con14__title {
    width: auto;
    aspect-ratio: auto;
    margin-top: 8.2667vw;
  }

  .con14__title-line,
  .con14__subtitle-line {
    display: block;
  }

  .con14__title-line img,
  .con14__subtitle-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con14__title-line--1 {
    width: 49.3vw;
  }

  .con14__title-line--2 {
    width: 48.2vw;
    margin-top: 1.4vw;
  }

  .con14__subtitle {
    width: auto;
    aspect-ratio: auto;
    margin-top: 6.2667vw;
  }

  .con14__subtitle-line--1 {
    width: 52vw;
  }

  .con14__subtitle-line--2 {
    width: 46.3vw;
    margin-top: 1.2vw;
  }

  /* 모바일 소개글 = 두 문단(문단 사이 한 줄 띄움) — 줄바꿈은 글이 알아서(balance) */
  .con14__lead-mo {
    margin-top: 4.2667vw;
    padding-inline: 2vw;
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    line-height: 1.5;
    letter-spacing: -0.05em;
    color: var(--primary);
    text-wrap: balance;
  }

  .con14__lead-mo-text + .con14__lead-mo-text {
    margin-top: 4.2667vw;
  }

  /* 차림표 도장은 모바일에서 빼고(pc) 소제목 하나(갱상도 메뉴소개)만 남긴다 */
  .con14__menu-title {
    width: 44vw;
    margin-top: 10.6667vw;
  }

  /* 탭 = 알약 칩. 선택은 브랜드색 채움, 나머지는 옅은 크림 */
  .con14__tabs {
    align-self: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.1333vw;
    width: auto;
    margin: 5.3333vw 0 0;
    padding: 0;
    color: #2c1e00;
    background: none;
    border-radius: 0;
  }

  .con14__tab,
  .con14__tab.con14__tab--selected {
    min-height: 0;
    margin: 0;
    padding: 2.1333vw 4.2667vw;
    border-radius: 50vw;
    background: #f9f0de;
    font-size: var(--bodyM);
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  .con14__tab.con14__tab--selected {
    background: var(--primary);
    color: #fff;
    font-weight: 800;
  }

  .con14__tab::after {
    content: none;
  }

  /* swiper-bundle 의 .swiper-vertical{touch-action:pan-x} 가 목록 위에서 페이지 세로 스크롤을 막는다 — 터치 드래그는 껐으므로 pan-y 로 되돌려 스크롤이 통과하게 한다 */
  .con14__list.swiper-vertical {
    touch-action: pan-y;
  }

  .con14__list {
    width: 100%; /* Swiper 컨테이너는 슬라이드 폭을 컨테이너 폭에서 계산해 shrink-to-fit(auto·stretch)이면 폭이 순환해 무한히 커진다 */
    height: 66.1333vw; /* HEIGHT: 차림표 한 줄(14.9333vw) ×4 + 간격 — 글이 적어도 .con14__content 높이 고정 */
    margin: 4.2667vw 0 0;
  }

  /* 카드 = 차림표 한 줄: 제목(왼쪽) + ＋ 아이콘(오른쪽). 설명·사진은 눌렀을 때 뜨는 팝업(.con14__modal)에서 보인다 */
  .con14__list .con14__card,
  .con14__card.con14__card--selected {
    flex-direction: row;
    justify-content: space-between;
    gap: 2.1333vw;
    padding: 0 3.2vw 0 5.3333vw;
    border-radius: 4.2667vw;
    text-align: left;
  }

  .con14__card-title {
    margin: 0;
  }

  /* 모바일은 호버·선택으로 카드가 초록으로 바뀌지 않고 전부 같은 흰 카드 */
  .con14__card.con14__card--selected {
    background: #fff;
    box-shadow: inset 0 0 0 1px #e4dbc3;
  }

  .con14__card-title.con14__card-title--selected {
    color: #2c1e00;
  }

  .con14__card-plus {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 8vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--primary);
    font-size: var(--headM);
    font-style: normal;
    line-height: 1;
    color: #fff;
  }

  .con14__modal-box {
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 86vw;
    max-height: 82vh;
    overflow-y: auto;
    padding: 4.2667vw 4.2667vw 3.4vw;
    background: #fff;
    border-radius: 5.3333vw;
    text-align: center;
    word-break: keep-all;
    transform: translateY(3.2vw);
    transition: transform 0.3s ease;
  }

  .con14__modal.is-open .con14__modal-box {
    transform: none;
  }

  .con14__modal-close {
    margin-top: 5.3333vw;
    padding: 2.1333vw 8.5333vw;
    border: 0;
    border-radius: 50vw;
    background: #2c1e00;
    font-size: var(--bodyM);
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    cursor: pointer;
  }

  .con14__modal-media {
    align-self: stretch;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4.2667vw;
    background: #e4dbc3;
  }

  .con14__modal-title {
    margin: 5.3333vw 0 0;
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.05em;
    color: #2c1e00;
  }

  .con14__modal-desc {
    margin: 2.1333vw 0 0;
    padding-inline: 1.6vw;
    font-size: var(--bodyM);
    line-height: 1.5;
    color: #2c1e00;
  }

  .con14__pager {
    gap: 2.1333vw;
    margin-top: 3.2vw;
  }

  .con14__arrow {
    width: 12vw;
    min-height: 12vw;
    border-radius: 3.2vw;
    transform: rotate(90deg); /* 세로 슬라이드 — ←는 위, →는 아래를 가리키게 */
  }
}

/* /merge-build:con14 */
/* merge-build:con15 */
/* con15 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일 인계: 좌측 인트로 + 우측 3열 리뷰 → column 1열 전환, 리뷰 열은 가로 스와이프 후보 */

/* 접시 사진이 섹션 하단·좌측으로 bleed — 가로만 자르고 세로는 다음 섹션 위로 흘린다. z-index:1 = 뒤따르는 relative 섹션(con16)보다 위에 그리기 위함 */
.con15 {
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}

.con15__panel {
  width: calc(var(--px)*1800);
  background-color: #fff;
  border-radius: calc(var(--px)*20);
}

.con15__intro {
  flex: none;
  width: calc(var(--px)*619);
  padding-top: calc(var(--px)*216);
  padding-left: calc(var(--px)*160);
}

.con15__apps {
  margin-top: calc(var(--px)*-1);
  margin-left: calc(var(--px)*-1);
}

/* 쿠팡이츠 이미지는 흰 타일이라 흰 패널에 묻힘 — 타일(이미지 안 2px 투명 여백 안쪽, 모서리 r12)에 시안의 1px 테두리를 겹친다 */
.con15__app--coupang::after {
  content: "";
  position: absolute;
  inset: calc(var(--px)*2);
  border: 1px solid #dddbc2;
  border-radius: calc(var(--px)*12);
  pointer-events: none;
}

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

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

.con15__stars {
  margin-top: calc(var(--px)*41);
}

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

.con15__stage {
  gap: calc(var(--px)*42);
  align-items: flex-start;
}

/* 열 = 세로 스와이퍼. 위쪽은 찢어진 종이 아래로 사라지고 아래쪽은 패널 하단까지 이어진다(높이 = 패널 높이) */
/* swiper-bundle.css 의 .swiper{margin-inline:auto} 보다 특이도를 올려 0 으로 되돌린다 */
.con15__stage .con15__col {
  flex: none;
  width: calc(var(--px)*351);
  height: calc(var(--px)*829); /* HEIGHT: 세로 슬라이더 가시 창 = 패널 높이(797 + 하단 여백 32) — 카드가 패널 하단까지 이어져 잘려 보이지 않게 */
  margin: 0;
}

/* 첫 카드를 열 윗단 밖으로 올려 시안 초기 위상(위 카드 하단만 보임)을 만든다 = 아래 카드 top − (카드 482 + 카드 간격) */
.con15__col--left .swiper-wrapper {
  margin-top: calc(var(--px)*-247);
}

.con15__col--center .swiper-wrapper {
  margin-top: calc(var(--px)*-189);
}

.con15__col--right .swiper-wrapper {
  margin-top: calc(var(--px)*-257);
}

/* 멈춤 없이 일정한 속도로 흐르도록 — autoplay delay 0 은 linear 가 아니면 카드마다 가감속이 생긴다 */
.con15__col .swiper-wrapper {
  transition-timing-function: linear;
}

/* 카드 간격은 시안에서 열마다 28/22/21 */
.con15__col--left .swiper-slide {
  margin-bottom: calc(var(--px)*28);
}

.con15__col--center .swiper-slide {
  margin-bottom: calc(var(--px)*22);
}

.con15__col--right .swiper-slide {
  margin-bottom: calc(var(--px)*21);
}

/* 카드 슬롯 = 고정 높이 482 + 넘치는 내용 clip (시안 카드가 잘린 캡처). swiper-bundle.css 의 .swiper-slide{height:100%} 를 이기도록 부모 클래스 포함 */
.con15__col .swiper-slide {
  height: calc(var(--px)*482); /* HEIGHT: 카드 슬롯 고정 높이 — 시안 카드가 482 로 잘려 내용이 넘친다 */
  overflow: hidden;
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*20);
  background-color: #fff;
  transition: border-color .3s ease-out;
}

/* swiper-bundle.css 의 .swiper-slide{display:block} 가 뒤에 로드돼 부모 클래스로 특이도를 올림 */
.con15__col .con15__review {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--px)*14);
  font-family: var(--font-pretendard);
  font-size: var(--bodyS);
  letter-spacing: 0;
  line-height: 1.15;
  color: #333;
}

/* 시안 카드는 내용 폭 = 사진 폭(열 가운데 정렬) — min-content 가 사진 폭을 따라간다 */
.con15__review-inner {
  display: flex;
  flex-direction: column;
  width: min-content;
}

.con15__reviewer {
  display: flex;
  align-items: center;
  gap: calc(var(--px)*12);
  font-size: var(--bodyXS);
}

.con15__nick {
  font-weight: 700;
  color: #222;
}

.con15__reviewer-stat {
  color: #666;
}

.con15__review-meta {
  display: flex;
  align-items: center;
  margin-top: calc(var(--px)*4);
  font-size: var(--bodyXS);
}

.con15__review-stars {
  font-size: var(--bodyL);
  letter-spacing: -0.06em;
  line-height: 1;
  color: #ffb400;
  transition: text-shadow .3s ease-out;
}

.con15__review-when {
  margin-left: calc(var(--px)*10);
  padding: 0 calc(var(--px)*8);
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  color: #777;
}

.con15__review-reorder {
  color: #666;
}

.con15__review-reorder b {
  font-weight: 700;
  color: #333;
}

.con15__review-photo {
  margin-top: calc(var(--px)*4);
  overflow: hidden;
}

.con15__review-photo img {
  transition: transform .5s ease-out;
}

.con15__review--02 .con15__review-inner { margin-left: calc(var(--px)*-2); }
.con15__review--03 .con15__review-inner { margin-left: calc(var(--px)*-6); }
.con15__review--04 .con15__review-inner { margin-left: calc(var(--px)*-2); }
.con15__review--06 .con15__review-inner { margin-left: calc(var(--px)*4); }
.con15__review--01 .con15__review-inner { margin-left: calc(var(--px)*7); }
.con15__review-photo--01 { margin-top: calc(var(--px)*15); }
.con15__review-photo--03 img,
.con15__review-photo--05 img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.con15__review-photo--03 { margin-top: calc(var(--px)*5); max-height: calc(var(--px)*305); overflow: hidden; } /* 사진 하단 14 를 잘라 태그가 카드(482) 밖으로 clip 되지 않게 */
.con15__review-photo--02 { margin-top: calc(var(--px)*10); }
.con15__review-photo--04 { margin-top: calc(var(--px)*6); }
.con15__review--04 .con15__review-meta { margin-top: calc(var(--px)*5); }
.con15__review-photo--05 { margin-top: calc(var(--px)*3); max-height: calc(var(--px)*278); overflow: hidden; } /* 사진 하단 46 을 잘라 카드 높이(482) 안에서 텍스트와 겹치지 않게 */
.con15__review-photo--06 { margin-top: calc(var(--px)*6); }
.con15__review--06 .con15__reviewer { padding-top: calc(var(--px)*3); }
.con15__review--06 .con15__review-meta { margin-top: calc(var(--px)*6); }

.con15__review-text {
  margin-top: calc(var(--px)*8);
  word-break: break-all;
}

.con15__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--px)*11);
  margin-top: calc(var(--px)*22);
  padding-left: calc(var(--px)*2);
}

.con15__tag {
  display: flex;
  align-items: center;
  gap: calc(var(--px)*4);
  padding: calc(var(--px)*5) calc(var(--px)*12) calc(var(--px)*5) calc(var(--px)*10);
  border-radius: 50vw;
  background-color: #e8fafc;
  font-size: var(--bodyXS);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #17a8d4;
  transition: background-color .25s ease-out, color .25s ease-out;
}

.con15__tag-icon {
  flex: none;
  width: calc(var(--px)*14);
}

/* 접시: 패널 좌하단에서 패널 밖(좌)·섹션 밖(하)으로 빠진다 */
.con15__dish {
  left: calc(var(--px)*-387);
  bottom: calc(var(--px)*-608);
}

/* z-index:2 — 열 swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만들어 DOM 뒤쪽 종이도 z 가 있어야 카드 위로 덮인다 */
.con15__torn-edge {
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* ===== 모션 (상태 전환 · 상시 루프) — 위 규칙들의 transition 과 짝 ===== */
/* 앱 아이콘: li 는 GSAP 이 transform 을 소유 → filter 만 전환 */
.con15__apps .con15__app {
  transition: filter .3s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .con15__col .swiper-slide:hover {
    border-color: #17a8d4;
  }

  .con15__col .swiper-slide:hover .con15__review-photo img {
    transform: scale(1.06);
  }

  .con15__col .swiper-slide:hover .con15__review-stars {
    text-shadow: 0 0 calc(var(--px)*8) rgba(255, 180, 0, .6);
  }

  .con15__tag:hover {
    background-color: #17a8d4;
    color: #fff;
  }

  .con15__apps .con15__app:hover {
    filter: drop-shadow(0 calc(var(--px)*8) calc(var(--px)*12) rgba(0, 0, 0, .18));
  }
}

.con15__tag:focus-visible {
  background-color: #17a8d4;
  color: #fff;
}

/* 태그 광택 — 섹션이 화면에 있는 동안(con15__live)만 돈다. 번호별 delay 로 한꺼번에 번쩍이지 않게 */
@keyframes con15-tag-shine {
  0%, 60% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.con15__live .con15__tag {
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  animation: con15-tag-shine 4.8s ease-in-out infinite;
}

.con15__live .con15__review--01 .con15__tag { animation-delay: 0s; }
.con15__live .con15__review--02 .con15__tag { animation-delay: .8s; }
.con15__live .con15__review--03 .con15__tag { animation-delay: 1.6s; }
.con15__live .con15__review--04 .con15__tag { animation-delay: 2.4s; }
.con15__live .con15__review--05 .con15__tag { animation-delay: 3.2s; }
.con15__live .con15__review--06 .con15__tag { animation-delay: 4s; }

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

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

.con15__title {
    width: calc(var(--px)*365);
    aspect-ratio: 365 / 98;
}

.con15__stars {
    width: calc(var(--px)*270);
    aspect-ratio: 270 / 51;
}

.con15__score {
    width: calc(var(--px)*261);
    aspect-ratio: 261 / 26;
}

.con15__review-photo.con15__review-photo--01 {
    width: calc(var(--px)*327);
    aspect-ratio: 327 / 327;
}

.con15__review-photo.con15__review-photo--02 {
    width: calc(var(--px)*334);
    aspect-ratio: 334 / 333;
}

.con15__review-photo.con15__review-photo--03 {
    width: calc(var(--px)*319);
    aspect-ratio: 319 / 319;
}

.con15__review-photo.con15__review-photo--04 {
    width: calc(var(--px)*309);
    aspect-ratio: 309 / 309;
}

.con15__review-photo.con15__review-photo--05 {
    width: calc(var(--px)*326);
    aspect-ratio: 326 / 324;
}

.con15__review-photo.con15__review-photo--06 {
    width: calc(var(--px)*314);
    aspect-ratio: 314 / 313;
}

.con15__dish {
    width: calc(var(--px)*963);
    aspect-ratio: 963 / 852;
}

.con15__torn-edge {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 162;
}
/* /IMG:AUTO con15 END */

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

/* INK:AUTO con15 */
.con15__lead { margin-top: calc(var(--px) * 13.7); margin-bottom: calc(var(--px) * -2.29); } /* base 16,0 */
.con15__review-text.con15__review-text--02 { margin-top: calc(var(--px) * 5.95); margin-bottom: calc(var(--px) * -2.04); } /* base 8,0 */
.con15__review-text.con15__review-text--04 { margin-top: calc(var(--px) * 5.95); margin-bottom: calc(var(--px) * -2.03); } /* base 8,0 */
.con15__nick.con15__nick--04 { margin-top: calc(var(--px) * -0.97); margin-bottom: calc(var(--px) * -1.96); } /* base 0,0 */
.con15__reviewer-stat { margin-top: calc(var(--px) * -0.97); margin-bottom: calc(var(--px) * -1.96); } /* base 0,0 */
.con15__review-reorder { margin-top: calc(var(--px) * -0.97); margin-bottom: calc(var(--px) * -1.96); } /* base 0,0 */
.con15__review-stars { margin-top: calc(var(--px) * -0.5); margin-bottom: calc(var(--px) * -1.5); } /* base 0,0 */
.con15__nick.con15__nick--02 { margin-top: calc(var(--px) * -0.97); margin-bottom: calc(var(--px) * -0.96); } /* base 0,0 */
.con15__nick.con15__nick--06 { margin-top: calc(var(--px) * -0.97); margin-bottom: calc(var(--px) * -0.96); } /* base 0,0 */
.con15__review-text.con15__review-text--06 { margin-top: calc(var(--px) * 7.95); margin-bottom: calc(var(--px) * -1.04); } /* base 8,0 */
/* /INK:AUTO con15 END */

@media (max-width:599px) {
  /* 접시 한 장을 PC·모바일이 같이 쓴다 — 패널 아래로 흘러 con16 상단(제목 옆)에 걸친다 */
  .con15__dish {
    width: 58vw;
    left: -16.6667vw;
    bottom: -35.3vw;
  }

  .con15__panel {
    flex-direction: column;
    align-items: center;
    gap: 6.4vw;
    width: 94.6667vw;
    padding-bottom: 5.3333vw;
    border-radius: 0 0 4.2667vw 4.2667vw; /* 위는 con14 패널과 이어지므로 직각 */
  }

  .con15__intro {
    align-items: center;
    width: auto;
    padding: 8.9333vw 0 0;
  }

  .con15__app {
    width: 16.8vw;
  }

  .con15__app--coupang::after {
    inset: 0.32vw;
    border-radius: 1.92vw;
  }

  .con15__title {
    width: auto;
    aspect-ratio: auto;
    margin-top: 7.2vw;
  }

  .con15__title-line {
    width: 70vw;
  }

  .con15__title-line--2 {
    width: 43.7260vw;
    margin-top: 1.5342vw;
  }

  .con15__title-line img {
    width: 100%;
  }

  .con15__lead {
    margin-top: 4.2vw;
    line-height: 1.4;
  }

  .con15__stars {
    width: 26vw;
    margin-top: 6.3333vw;
  }

  .con15__score {
    width: 50vw;
    margin-top: 2.1333vw;
  }

  /* 리뷰 = 패널 폭을 꽉 채우는 가로 센터드 슬라이드(가운데 카드 + 양옆 이웃 카드가 비침, js/slide.js) */
  .con15__stage {
    align-self: stretch;
  }

  .con15__stage .con15__flow {
    width: 100%; /* Swiper 컨테이너는 슬라이드 폭을 컨테이너 폭에서 계산해 shrink-to-fit 이면 폭이 순환해 커진다 */
  }

  /* swiper-bundle 의 .swiper-slide{height:100%} 를 이기도록 부모 클래스 포함 */
  .con15__flow .swiper-slide {
    height: auto;
    overflow: hidden;
    border: 1px solid #e4dbc3;
    border-radius: 3.2vw;
    background-color: #fff;
  }

  /* swiper-bundle 의 .swiper-slide{display:block} 를 부모 클래스로 이김 */
  .con15__flow .con15__review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.2vw 2.1333vw;
    font-family: var(--font-pretendard);
    font-size: var(--bodyS);
    letter-spacing: 0;
    line-height: 1.4;
    text-wrap: balance;
    color: #333;
  }

  .con15__flow .con15__review-inner {
    width: 100%; /* PC 의 min-content 는 사진 폭이 폭을 정했다 — 모바일은 카드 폭을 채운다 */
    margin-left: 0;
    text-align: left; /* 리뷰 데이터 목록 — 가운데 정렬 예외 */
  }

  .con15__flow .con15__reviewer {
    gap: 2.1333vw;
  }

  .con15__flow .con15__review-meta {
    gap: 1.6vw;
    margin-top: 1.0667vw;
  }

  .con15__flow .con15__review-when {
    margin-left: 0;
    padding: 0 1.6vw;
  }

  .con15__flow .con15__review-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: none;
    margin: 1.0667vw 0 0;
    overflow: hidden;
  }

  .con15__flow .con15__review-photo img {
    height: 100%;
    object-fit: cover;
  }

  .con15__flow .con15__review-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 카드 높이를 비슷하게 — 긴 후기는 4줄까지 */
    line-clamp: 4;
    overflow: hidden;
    margin-top: 2.1333vw;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .con15__flow .con15__tags {
    gap: 1.6vw;
    margin-top: 3.2vw;
    padding-left: 0;
  }

  .con15__flow .con15__tag {
    gap: 1.0667vw;
    padding: 1.0667vw 3.2vw;
  }

  .con15__flow .con15__tag-icon {
    width: 4.2667vw;
  }
}

/* /merge-build:con15 */
/* merge-build:con16 */
/* con16 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 4열 카드 → 2열 2행, dish 는 섹션 밖으로 bleed 유지, 헤드 이미지는 폭 100% 로 줄임 */
.con16_iner {
  padding-top: calc(var(--px)*96);
  padding-bottom: calc(var(--px)*252.6);
}

/* 좌상단 냄비는 con15 의 .con15__dish 한 장이 경계를 넘어 내려와 그린다(같은 그림을 두 섹션에 두지 않는다). 아래는 섹션 안 하단 누끼 — 섹션 overflow:hidden 이 자른다 */
.con16__dish--bottom-center {
  top: calc(var(--px)*669);
  left: calc(var(--px)*501);
}

.con16__tag {
  margin-right: calc(var(--px)*18);
}

.con16__title {
  margin-top: calc(var(--px)*42);
  margin-right: calc(var(--px)*6);
}

.con16__sub {
  margin-top: calc(var(--px)*28);
  margin-right: calc(var(--px)*8);
}

.con16__lead {
  margin-top: calc(var(--px)*20);
  margin-right: calc(var(--px)*4);
}

.con16__cards {
  margin-top: calc(var(--px)*57);
  gap: calc(var(--px)*10);
}

.con16__card {
  --con16-card-ink: #2c1e00;
  width: calc(var(--px)*325);
  min-height: calc(var(--px)*325);
  background-color: var(--bg-color);
  border-radius: calc(var(--px)*20);
  overflow: hidden;
  isolation: isolate;

  &.hover {
    --con16-card-ink: #ffffff;
  }

  &:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
}

/* 주름 이동 폭보다 넉넉하게 확대해 흐름이 보이면서도 가장자리는 항상 덮는다. */
.con16__curtain {
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.34, 1.3);
  transition: opacity .45s ease-out;
  animation: con16-curtain-billow 8s cubic-bezier(.45, 0, .55, 1) -1.6s infinite paused;
}

.con16__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 8%, rgb(255 255 255 / .03) 24%, rgb(255 255 255 / .18) 38%, rgb(0 0 0 / .1) 53%, transparent 68%, rgb(255 255 255 / .07) 82%, transparent 96%);
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity .45s ease-out;
  animation: con16-curtain-fold 6.4s cubic-bezier(.45, 0, .55, 1) -2.4s infinite paused;
}

.con16__num img {
  filter: var(--con16-number-alpha, url("#con16-number-opaque")) brightness(0) saturate(100%) invert(12%) sepia(47%) saturate(866%) hue-rotate(1deg) brightness(94%) contrast(97%);
  opacity: .1019607843;
  transition: filter .3s ease-out, opacity .3s ease-out;
}

.con16__name img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(47%) saturate(866%) hue-rotate(1deg) brightness(94%) contrast(97%);
  transition: filter .3s ease-out;
}

.con16__card.hover {
  & .con16__curtain,
  &::after {
    opacity: 1;
  }

  & .con16__num img {
    filter: var(--con16-number-alpha, url("#con16-number-opaque")) brightness(0) invert(1) sepia(.25) saturate(1.5);
    opacity: 1;
  }

  & .con16__name img {
    filter: brightness(0) invert(1);
  }
}

/* 카드가 바뀌어도 커튼의 시간축은 이어진다. 화면 밖에서는 모두 일시정지. */
.con16__cards--flowing .con16__card {
  & .con16__curtain,
  &::after {
    animation-play-state: running;
  }
}

.con16__cards .con16__card .con16__desc {
  color: var(--con16-card-ink);
  transition: color .3s ease-out;
}

@keyframes con16-curtain-billow {
  0%, 100% { transform: translate(-5%, -1.5%) scale(1.34, 1.3) skewX(-1.5deg); }
  50% { transform: translate(5%, 1.5%) scale(1.38, 1.28) skewX(1.5deg); }
}

@keyframes con16-curtain-fold {
  0%, 100% { transform: translate(-10%, -2%) scale(1.38) skewX(-2deg); }
  50% { transform: translate(10%, 2%) scale(1.42) skewX(2deg); }
}

/* 접시 상시 부유 — 래퍼 transform 은 GSAP(등장·드리프트) 소유라 안쪽 img 만 CSS 가 맡는다 */
.con16__dish img {
  animation: con16-dish-float 6s ease-in-out infinite alternate;
}

.con16__dish--bottom-center img {
  animation-delay: -3s;
}

@keyframes con16-dish-float {
  from { transform: translateY(-1.6%) rotate(-.6deg); }
  to { transform: translateY(1.6%) rotate(.6deg); }
}

/* 카드 본체 transform 은 GSAP(딜 아웃)·자기장 소유 — 눌림은 안쪽 card-iner 로 분리. 점등은 면·글자색 전환만(위치 이동 없음) */
.con16__card:active .con16__card-iner,
.con16__cards--flowing .con16__card.hover:active .con16__card-iner {
  transform: scale(.97);
  transition-duration: .2s;
}

@media (prefers-reduced-motion: reduce) {
  .con16__curtain,
  .con16__card::after,
  .con16__num img,
  .con16__name img,
  .con16__cards .con16__card .con16__desc,
  .con16__dish img,
  .con16__tag img {
    animation: none;
    transition: none;
  }
}

.con16__card-iner {
  padding-top: calc(var(--px)*19);
  padding-bottom: calc(var(--px)*7);
  transition: transform .45s ease-out;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .con16__card-iner {
    transition: none;
  }
}

.con16__card--hall .con16__card-iner,
.con16__card--group .con16__card-iner {
  padding-right: calc(var(--px)*4);
}

.con16__card--takeout .con16__card-iner {
  padding-right: calc(var(--px)*2);
}

.con16__num--delivery {
  --con16-number-alpha: opacity(1);
  margin-left: calc(var(--px)*14);
}

.con16__num--hall {
  margin-left: calc(var(--px)*19);
}

.con16__num--takeout {
  margin-left: calc(var(--px)*16);
}

.con16__num--group {
  margin-left: calc(var(--px)*20);
}

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

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

.con16__desc {
  margin-top: calc(var(--px)*27);
}

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

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

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

.con16__tag {
    width: calc(var(--px)*357);
    aspect-ratio: 357 / 77;
}

.con16__title {
    width: calc(var(--px)*540);
    aspect-ratio: 540 / 98;
}

.con16__sub {
    width: calc(var(--px)*664);
    aspect-ratio: 664 / 25;
}

.con16__num.con16__num--delivery {
    width: calc(var(--px)*75);
    aspect-ratio: 75 / 60;
}

.con16__name.con16__name--delivery {
    width: calc(var(--px)*67);
    aspect-ratio: 67 / 33;
}

.con16__num.con16__num--hall,
.con16__num.con16__num--takeout {
    width: calc(var(--px)*77);
    aspect-ratio: 77 / 60;
}

.con16__name.con16__name--hall {
    width: calc(var(--px)*33);
    aspect-ratio: 33 / 33;
}

.con16__name.con16__name--takeout {
    width: calc(var(--px)*68);
    aspect-ratio: 68 / 33;
}

.con16__num.con16__num--group {
    width: calc(var(--px)*79);
    aspect-ratio: 79 / 60;
}

.con16__name.con16__name--group {
    width: calc(var(--px)*132);
    aspect-ratio: 132 / 35;
}
/* /IMG:AUTO con16 END */

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

.con16__lead {
    font-size: var(--headS);
    letter-spacing: -0.075em;
    line-height: 1.36;
    color: #ffffff;
}

.con16__cards {
    font-size: var(--bodyXL);
    letter-spacing: -0.075em;
}

.con16__desc.con16__desc--delivery {
    line-height: 1.25;
    color: #ffffff;
}

.con16__desc.con16__desc--hall {
    line-height: 1.3;
    color: #2c1e00;
}

.con16__desc.con16__desc--takeout {
    line-height: 1.5;
    color: #2c1e00;
}

.con16__desc.con16__desc--group {
    line-height: 1.25;
    color: #2c1e00;
}
/* /FONT:AUTO con16 END */

/* INK:AUTO con16 */
.con16__desc.con16__desc--takeout { margin-top: calc(var(--px) * 25); margin-bottom: calc(var(--px) * -6); } /* base 31,0 */
.con16__desc.con16__desc--hall { margin-top: calc(var(--px) * 23); margin-bottom: calc(var(--px) * -4); } /* base 27,0 */
.con16__desc.con16__desc--delivery { margin-top: calc(var(--px) * 23.5); margin-bottom: calc(var(--px) * -3.5); } /* base 27,0 */
.con16__desc.con16__desc--group { margin-top: calc(var(--px) * 24.5); margin-bottom: calc(var(--px) * -3.5); } /* base 28,0 */
.con16__lead { margin-top: calc(var(--px) * 15.04); margin-bottom: calc(var(--px) * -1.95); } /* base 20,0 */
/* /INK:AUTO con16 END */

@media (max-width:599px) {
  .con16_iner {
    padding: 15vw 5.3333vw 45vw;
    text-wrap: balance;
  }

  .con16__dish--bottom-center {
    top: auto;
    bottom: -30vw;
    left: 7vw;
  }

  .con16__dish.con16__dish--bottom-center {
    width: 79vw;
  }

  .con16__tag {
    width: 64vw;
    margin-right: 0;
  }

  .con16__title {
    width: 86vw;
    margin-top: 6.4vw;
    margin-right: 0;
  }

  .con16__sub-text {
    margin-top: 4.2667vw;
    font-size: var(--headM);
    line-height: 1.4;
    color: var(--bg-color);
    letter-spacing: -0.075em;
  }

  .con16__lead {
    margin-top: 3.2vw;
    margin-right: 0;
    margin-bottom: 0;
    line-height: 1.4;
  }

  .con16__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.1333vw;
    margin-top: 8.5333vw;
    font-size: var(--bodyM);
  }

  /* 카드 = 차림표 한 줄: 번호(왼쪽) + 이름·설명(오른쪽). 신호등 호버(.hover)는 그대로 돈다 */
  .con16__card {
    width: auto;
    min-height: auto;
    border-radius: 4.2667vw;
  }

  .con16__card-iner {
    display: grid;
    grid-template-columns: 11vw minmax(0, 1fr);
    grid-template-areas:
      "num name"
      "num desc";
    align-items: center;
    column-gap: 4.2667vw;
    row-gap: 2.1333vw;
    padding: 4.2667vw 5.3333vw;
    text-align: left;
  }

  .con16__num {
    grid-area: num;
  }

  .con16__name {
    grid-area: name;
  }

  .con16__desc {
    grid-area: desc;
  }

  /* 번호는 옅은 워터마크지만 모바일에서는 너무 안 보여 조금 진하게 */
  .con16__num img {
    opacity: 0.3;
  }

  .con16__num.con16__num--delivery,
  .con16__num.con16__num--hall,
  .con16__num.con16__num--takeout,
  .con16__num.con16__num--group {
    width: 11vw;
    margin: 0;
  }

  .con16__name.con16__name--delivery,
  .con16__name.con16__name--hall,
  .con16__name.con16__name--takeout,
  .con16__name.con16__name--group {
    margin: 0;
  }

  .con16__name.con16__name--delivery {
    width: 9.2vw;
  }

  .con16__name.con16__name--hall {
    width: 4.5vw;
  }

  .con16__name.con16__name--takeout {
    width: 9.3vw;
  }

  .con16__name.con16__name--group {
    width: 18vw;
  }

  .con16__desc.con16__desc--delivery,
  .con16__desc.con16__desc--hall,
  .con16__desc.con16__desc--takeout,
  .con16__desc.con16__desc--group {
    margin: 0;
    line-height: 1.4;
  }
}

/* /merge-build:con16 */
/* merge-build:con17 */
/* con17 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 그래프 flex row → 막대 2개 가로 유지·냄비/화살표는 하단 축소, 카드 2장 → column */
.con17 {
  padding-bottom: calc(var(--px)*44.9);
}

.con17__marquee {
  padding-block: calc(var(--px)*51.75) calc(var(--px)*28.75);
  background: linear-gradient(#368318 calc(var(--px)*8), #f44228 0 calc(var(--px)*23), #2c1e00 0);
  overflow: hidden;
}

.con17__marquee-track {
  flex-shrink: 0;
  margin-left: calc(var(--px)*-103);
}

.con17__marquee-item {
  flex-shrink: 0;
  margin-right: calc(var(--px)*0.25);
}

.con17__head {
  z-index: 2; /* 화살표(.con17__graph 안 absol)가 소개 문구 위로 올라오지 않게 */
  padding-top: calc(var(--px)*119);
}

.con17__safe {
  top: calc(var(--px)*-23);
}

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

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

.con17__graph {
  z-index: 1; /* 접시·냄비가 뒤따르는 .con17__sales(relative) 위로 올라와야 한다 — 형제 relative 는 DOM 뒤라 덮음 */
  width: 100%;
  padding: calc(var(--px)*119) calc(var(--px)*369) calc(var(--px)*13) calc(var(--px)*211);
}

.con17__brand-desc {
  margin-top: calc(var(--px)*25);
}

.con17__brand-desc-strong {
  margin-top: calc(var(--px)*42);
}

.con17__era {
  width: calc(var(--px)*159);
}

.con17__era--origin {
  margin-top: calc(var(--px)*111);
  margin-left: calc(var(--px)*169);
}

.con17__bar {
  width: 100%;
  border-radius: calc(var(--px)*20) calc(var(--px)*20) 0 0;
}

.con17__bar--origin {
  min-height: calc(var(--px)*132);
  background: #e4d8b6;
}

.con17__bar--now {
  min-height: calc(var(--px)*436);
  background: #322409;
}

.con17__year {
  margin-top: calc(var(--px)*19.5);
  white-space: nowrap;
}

.con17__sticker {
  top: calc(var(--px)*143);
}

.con17__arrow {
  top: calc(var(--px)*-19);
  left: calc(var(--px)*402);
}

.con17__plate {
  bottom: calc(var(--px)*-108);
  left: calc(var(--px)*571);
  width: calc(var(--px)*755);
  min-height: calc(var(--px)*178);
  border-radius: 50%;
  background: #e4d8b6;
}

.con17__pot {
  bottom: calc(var(--px)*-51);
  left: calc(var(--px)*609);
}

.con17__sales {
  width: calc(var(--px)*1802);
}

.con17__sales-iner {
  padding-top: calc(var(--px)*157);
  padding-bottom: calc(var(--px)*80);
}

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

.con17__cards {
  margin-top: calc(var(--px)*36);
  margin-right: calc(var(--px)*4);
  gap: calc(var(--px)*27);
}

.con17__branch--jamsil {
  margin-right: calc(var(--px)*10);
}

.con17__branch--sillim {
  margin-right: calc(var(--px)*8);
}

.con17__card {
  width: calc(var(--px)*446);
  background: #fff;
}

.con17__card-head {
  min-height: calc(var(--px)*96);
  padding-top: calc(var(--px)*21);
  background: #322409;
}

.con17__base-date {
  margin-top: calc(var(--px)*10);
}

.con17__stats {
  padding: 0 calc(var(--px)*11) calc(var(--px)*18);
}

.con17__stat--day {
  min-height: calc(var(--px)*76);
  border-bottom: 1px solid rgba(50, 36, 9, 0.2);
}

.con17__stat--order {
  min-height: calc(var(--px)*68);
}

.con17__stat--month {
  min-height: calc(var(--px)*66);
  gap: calc(var(--px)*8);
  border-radius: calc(var(--px)*10);
  background: #fff8e4;
}

.con17__stat-line {
  width: calc(var(--px)*298);
}

.con17__stat-label,
.con17__stat-value {
  margin: 0;
}

.con17__stat-value {
  gap: calc(var(--px)*9);
}

.con17__stat--month .con17__stat-value {
  gap: 0;
  letter-spacing: -0.0774em;
}

.con17__stat--day .con17__stat-value {
  margin-top: calc(var(--px)*13);
  letter-spacing: -0.0603em;
}

.con17__stat--order .con17__stat-value {
  letter-spacing: -0.0667em;
}

.con17__stat-label--order {
  margin-bottom: calc(var(--px)*6);
}

.con17__stat-label--month {
  margin-top: calc(var(--px)*4);
}

.con17__closing {
  margin-top: calc(var(--px)*33);
}

/* 모션 — 상태 전환(hover) · 상시 루프. GSAP 은 transform/opacity/clip-path 소유, 여기는 translate/box-shadow/background-color 만 */
@media (hover: hover) and (pointer: fine) {
  .con17__card {
    transition: translate .35s ease-out, box-shadow .35s ease-out;
  }

  .con17__card:hover {
    translate: 0 calc(var(--px)*-8);
    box-shadow: 0 calc(var(--px)*18) calc(var(--px)*30) rgba(50, 36, 9, .18);
  }

  .con17__stat--month {
    transition: background-color .3s ease-out;
  }

  .con17__stat--month:hover {
    background-color: #ffefc2;
  }
}

@keyframes con17-pot-float {
  from { transform: translateY(0); }
  to { transform: translateY(var(--con17-float)); }
}

@keyframes con17-arrow-nudge {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--con17-nudge), calc(var(--con17-nudge)*-1)); }
}

@keyframes con17-blink {
  0%, 55% { opacity: 1; }
  65% { opacity: .2; }
  75%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .con17__pot img {
    --con17-float: calc(var(--px)*-10);
    animation: con17-pot-float 3.4s ease-in-out alternate infinite;
  }

  .con17__arrow img {
    --con17-nudge: calc(var(--px)*8);
    animation: con17-arrow-nudge 2.4s ease-in-out alternate infinite;
  }

  .con17__sticker--blink {
    animation: con17-blink 1.8s infinite;
  }
}

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

.con17__safe {
    width: calc(var(--px)*331);
    aspect-ratio: 331 / 97;
}

.con17__title {
    width: calc(var(--px)*393);
    aspect-ratio: 393 / 118;
}

.con17__lead {
    width: calc(var(--px)*683);
    aspect-ratio: 683 / 25;
}

.con17__brand-copy {
    width: calc(var(--px)*290);
    aspect-ratio: 290 / 153;
}

.con17__sticker {
    width: calc(var(--px)*327);
    aspect-ratio: 327 / 169;
}

.con17__arrow {
    width: calc(var(--px)*1100);
    aspect-ratio: 1100 / 583;
}

.con17__pot {
    width: calc(var(--px)*664);
    aspect-ratio: 664 / 657;
}

.con17__sales-title {
    width: calc(var(--px)*579);
    aspect-ratio: 579 / 44;
}

.con17__sales-lead {
    width: calc(var(--px)*541);
    aspect-ratio: 541 / 25;
}

.con17__branch.con17__branch--jamsil {
    width: calc(var(--px)*99);
    aspect-ratio: 99 / 33;
}

.con17__base-date {
    width: calc(var(--px)*82);
    aspect-ratio: 82 / 13;
}

.con17__stat-label.con17__stat-label--day {
    width: calc(var(--px)*94);
    aspect-ratio: 94 / 18;
}

.con17__stat-unit.con17__stat-unit--won {
    width: calc(var(--px)*17);
    aspect-ratio: 17 / 17;
}

.con17__stat-label.con17__stat-label--order {
    width: calc(var(--px)*67);
    aspect-ratio: 67 / 18;
}

.con17__stat-unit.con17__stat-unit--count {
    width: calc(var(--px)*16);
    aspect-ratio: 16 / 17;
}

.con17__stat-label.con17__stat-label--month {
    width: calc(var(--px)*90);
    aspect-ratio: 90 / 18;
}

.con17__branch.con17__branch--sillim {
    width: calc(var(--px)*98);
    aspect-ratio: 98 / 33;
}
/* /IMG:AUTO con17 END */

/* FONT:AUTO con17 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con17__intro {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    letter-spacing: -0.075em;
    line-height: 1.44;
    text-align: center;
    color: #2c1e00;
}

.con17__intro-light {
    font-weight: 400;
}

.con17__intro-strong,
.con17__brand-desc-strong {
    font-weight: 800;
}

.con17__brand-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: #2c1e00;
}

.con17__year.con17__year--origin {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.2; /* OVR */
    text-align: center;
    color: #282828;
}

.con17__year.con17__year--now {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.2; /* OVR */
    text-align: center;
    color: var(--primary);
}

.con17__cards {
    font-family: var(--font-paperlogy);
    font-size: var(--headL);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.2; /* OVR */
}

.con17__stat-num.con17__stat-num--day,
.con17__stat-suffix {
    color: var(--primary);
}

.con17__stat-num {
    text-align: right;
    color: var(--primary);
}

.con17__stat-value,
.con17__stats {
    text-align: right;
}

.con17__stat-num.con17__stat-num--month {
    color: var(--secondary);
}

.con17__closing {
    text-align: center;
}

.con17__closing-head {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1.08;
    color: var(--primary);
}

.con17__closing-accent {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1.08;
    color: var(--secondary);
}

.con17__closing-sub {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: var(--primary);
}
/* /FONT:AUTO con17 END */

/* INK:AUTO con17 */
.con17__brand-desc { margin-top: calc(var(--px) * 20.54); margin-bottom: calc(var(--px) * -11.59); } /* base 25,0 */
.con17__stat-num { margin-top: calc(var(--px) * -5.5); margin-bottom: calc(var(--px) * -5.5); } /* base 0,0 */
.con17__stat-suffix { margin-top: calc(var(--px) * -4.5); margin-bottom: calc(var(--px) * -4.5); } /* base 0,0 */
.con17__brand-desc-strong { margin-top: calc(var(--px) * 37.54); margin-bottom: calc(var(--px) * -4.45); } /* base 42,0 */
.con17__year.con17__year--now { margin-top: calc(var(--px) * 15.9); margin-bottom: calc(var(--px) * -4.59); } /* base 19.5,0 */
.con17__year.con17__year--origin { margin-top: calc(var(--px) * 15.9); margin-bottom: calc(var(--px) * -3.59); } /* base 19.5,0 */
.con17__stat-num.con17__stat-num--day { margin-top: calc(var(--px) * -5.5); margin-bottom: calc(var(--px) * -0.5); } /* base 0,0 */
.con17__stat-num.con17__stat-num--month { margin-top: calc(var(--px) * -4.5); margin-bottom: calc(var(--px) * -0.5); } /* base 0,0 */
.con17__closing-accent { margin-top: calc(var(--px) * -0.96); margin-bottom: calc(var(--px) * -4.04); } /* base 0,0 */
.con17__intro-light { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
.con17__intro-strong { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
.con17__closing-sub { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
.con17__closing-head { margin-top: calc(var(--px) * -1.96); margin-bottom: calc(var(--px) * -1.04); } /* base 0,0 */
/* /INK:AUTO con17 END */


@media (max-width: 599px) {
  .con17 {
    padding-bottom: 6.4vw;
  }

  .con17__marquee {
    padding-block: 7.7867vw 3.84vw;
    background: linear-gradient(to bottom, #368318 0 1.6vw, #f44228 1.6vw 4.2667vw, #2b1e04 4.2667vw 100%);
  }

  .con17__marquee-track {
    margin-left: 0;
  }

  .con17__marquee-item {
    width: 75.84vw;
    margin-right: 0.0422vw;
  }

  .con17_iner {
    padding-top: 15vw;
  }

  .con17__head {
    padding: 0 5.3333vw;
  }

  /* 도장은 흐름에 참여 — 위 섹션 패딩 15vw 아래에서 제목 위에 놓인다 */
  .con17__safe {
    position: relative;
    top: auto;
    width: 37vw;
  }

  .con17__title {
    width: 66vw;
    margin-top: 7.2vw;
  }

  .con17__lead-text,
  .con17__sales-lead-text {
    font-family: var(--font-pretendard);
    font-size: var(--subheadL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.4;
    color: #2c1e00;
    text-wrap: balance;
  }

  .con17__lead-strong,
  .con17__sales-lead-strong {
    font-weight: 800;
  }

  .con17__lead-text {
    margin-top: 6.2667vw;
  }

  .con17__intro {
    margin-top: 3.2vw;
  }

  .con17__graph {
    display: grid;
    grid-template-columns: 28vw 1fr 28vw;
    padding: 12vw 5.3333vw 2.1333vw;
    margin-bottom: 6.4vw; /* 라벨이 아래 매출 섹션 경계에 붙지 않게 */
    word-break: keep-all;
    text-wrap: balance;
  }

  .con17__growth {
    display: contents;
  }

  /* 제목 = 줄별로 잘라 가운데 정렬로 쌓은 모바일용 3줄(PC 원본 이미지는 .pc) */
  .con17__brand-copy {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    aspect-ratio: auto;
  }

  .con17__brand-copy-mo {
    gap: 1.4vw;
  }

  .con17__brand-copy-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con17__brand-copy-line--1 {
    width: 52.7vw;
  }

  .con17__brand-copy-line--2 {
    width: 50vw;
  }

  .con17__brand-copy-line--3 {
    width: 48.2vw;
  }

  .con17__brand-desc {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 6.2vw 0 0;
  }

  .con17__brand-desc-strong {
    margin: 3.2vw 0 0;
  }

  .con17__era {
    width: auto;
    grid-row: 3;
    align-self: end;
  }

  .con17__era--origin {
    grid-column: 1;
    margin: 0;
  }

  .con17__era--now {
    grid-column: 3;
    margin-top: 8.5333vw;
  }

  .con17__bar {
    width: 20vw;
    border-radius: 4.2667vw 4.2667vw 0 0;
  }

  .con17__bar--origin {
    min-height: 16vw;
  }

  .con17__bar--now {
    min-height: 52vw;
  }

  .con17__year {
    white-space: normal;
  }

  .con17__year.con17__year--origin,
  .con17__year.con17__year--now {
    margin: 2.1333vw 0 0;
  }

  /* 스티커는 큰 막대 위에 얹는 배지 — 화살표·냄비와 겹치지 않게 막대 가운데 */
  .con17__sticker {
    top: 26vw;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 26vw;
  }

  .con17__arrow {
    top: auto;
    bottom: 25.3333vw;
    left: 10vw;
    width: 80vw;
  }

  /* 냄비·접시는 두 라벨 사이 빈 자리에 */
  .con17__plate {
    bottom: 10vw;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 36vw;
    min-height: 12vw;
  }

  .con17__pot {
    bottom: 14vw;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 30vw;
  }

  .con17__sales {
    width: 100%;
  }

  .con17__sales-iner {
    padding: 14.9333vw 5.3333vw 8.5333vw;
  }

  .con17__sales-title {
    width: 88vw;
  }

  .con17__sales-lead-text {
    margin-top: 3.7vw;
  }

  .con17__cards {
    flex-direction: column;
    align-items: center;
    gap: 3.2667vw;
    margin: 6.3333vw 0 0;
    font-size: var(--headM);
  }

  .con17__card {
    width: 86vw;
    overflow: hidden;
    border-radius: 4.2667vw;
  }

  .con17__card-head {
    justify-content: center;
    min-height: 17.0667vw; /* HEIGHT: 두 카드 머리 높이를 같게 — 둘째 카드엔 기준일 줄이 없다 */
    padding: 3.1vw 0;
  }

  .con17__branch--jamsil,
  .con17__branch--sillim {
    margin-right: 0;
  }

  .con17__branch.con17__branch--jamsil,
  .con17__branch.con17__branch--sillim {
    width: 15vw;
  }

  .con17__base-date-text {
    margin-top: 2.0667vw;
    font-family: var(--font-pretendard);
    font-size: var(--bodyS);
    color: #fff;
    font-weight: 500;
  }

  .con17__stats {
    padding: 2.1333vw 5.2667vw 4.2667vw;
  }

  .con17__stat--day {
    min-height: 10.6667vw;
  }

  .con17__stat--order {
    min-height: 9.3333vw;
  }

  .con17__stat--month {
    min-height: 9.3333vw;
    gap: 2.1333vw;
    border-radius: 3.2vw;
  }

  .con17__stat-line {
    width: 100%;
  }

  .con17__stat-value {
    gap: 2.1333vw;
  }

  .con17__stat--day .con17__stat-value {
    margin-top: 0;
  }

  .con17__stat-num,
  .con17__stat-suffix,
  .con17__stat-num.con17__stat-num--day,
  .con17__stat-num.con17__stat-num--month {
    margin-block: 0;
  }

  .con17__stat-label.con17__stat-label--day {
    width: 22vw;
  }

  .con17__stat-label.con17__stat-label--order {
    width: 15.7vw;
  }

  .con17__stat-label.con17__stat-label--month {
    width: 21.2vw;
  }

  .con17__stat-unit.con17__stat-unit--won,
  .con17__stat-unit.con17__stat-unit--count {
    width: 4vw;
  }

  .con17__closing {
    margin-top: 8.3333vw;
  }

  .con17__closing-head,
  .con17__closing-accent {
    font-size: var(--titleXS);
  }

  .con17__closing-accent {
    display: block;
    margin-top: 1vw;
  }

  .con17__closing-sub {
    display: block;
    text-wrap: balance;
    margin-top: 2vw;
  }

  .con17__pot img {
    --con17-float: -1.6vw;
  }

  .con17__arrow img {
    --con17-nudge: 1.4vw;
  }
}

/* /merge-build:con17 */
/* merge-build:con18 */
/* con18 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 매출 카드 두 줄 — 한 게시판을 앞/뒤 절반으로 나눠 윗줄·아랫줄에 한 번씩만 싣고, 두 줄은 서로 반대 방향으로 흐른다(흐름은 JS 가 .v-marquee-half[-rev] 를 붙여 시작). 모바일 전환은 이후 별도 */
.con18__sales {
  gap: calc(var(--px)*16);
}

.con18__sales-flow--upper {
  margin-left: calc(var(--px)*-88);
  width: calc(100% + var(--px)*88);
}

.con18__sales-flow--lower {
  margin-left: calc(var(--px)*-207);
  width: calc(100% + var(--px)*207);
}

.con18__sales-track {
  flex-shrink: 0;
}

/* 슬라이드 폭 = 카드 366 + 간격 5.2 — 마지막 카드의 간격도 남겨야 세트 이음새 간격이 균일하다 */
.con18__sales-item {
  flex-shrink: 0;
  width: calc(var(--px)*371.2);
  padding-right: calc(var(--px)*5.2);
}

/* 카드는 슬라이드 폭을 꽉 채운다 */
.con18__sales-card {
  width: 100%;
  padding-bottom: calc(var(--px)*12.25);
  background-color: #fffcf4;
  box-shadow: inset 0 0 0 1px #e4dbc3;
  transition: box-shadow .3s ease-out;
}

.con18__sales-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px)*10.6);
  padding-top: calc(var(--px)*26);
  padding-bottom: calc(var(--px)*19.39);
  background-color: #322409;
  transition: background-color .3s ease-out;
}

.con18__sales-amount {
  padding-top: calc(var(--px)*36.1);
  padding-bottom: calc(var(--px)*30);
}

.con18__head {
  margin-top: calc(var(--px)*131);
}

.con18__lead {
  margin-top: calc(var(--px)*26);
}

.con18__stats {
  gap: calc(var(--px)*6);
  padding-right: calc(var(--px)*5);
  margin-top: calc(var(--px)*66);
}

.con18__stat-card {
  --con18-stat-ink: var(--primary);
  width: calc(var(--px)*574);
  border-radius: calc(var(--px)*20);
  overflow: hidden;
  background-color: var(--bg-color);
  isolation: isolate;

  &.hover {
    --con18-stat-ink: var(--bg-color);
  }

  &:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
}

/* 중심 기준 여유 확대: 흔들림 전 구간에서 이미지 가장자리는 카드 밖에 둔다. */
.con18__curtain {
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.18);
  transition: opacity .45s ease-out;
  animation: con18-curtain-billow 12s cubic-bezier(.45, 0, .55, 1) infinite paused;
}

.con18__stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 8%, rgb(255 255 255 / .02) 24%, rgb(255 255 255 / .09) 38%, rgb(0 0 0 / .05) 53%, transparent 68%, rgb(255 255 255 / .04) 82%, transparent 96%);
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity .45s ease-out;
  animation: con18-curtain-fold 17s cubic-bezier(.45, 0, .55, 1) infinite paused;
}

.con18__stat-card.hover {
  & .con18__curtain,
  &::after {
    opacity: 1;
  }

  & .con18__stat-label img {
    filter: brightness(0) invert(1) sepia(.14) saturate(1.5);
  }
}

/* 비활성 카드도 같은 시간축을 이어가므로 전환 때 주름이 멈추거나 다시 출발하지 않는다. */
.con18__stats--running .con18__stat-card {
  & .con18__curtain,
  &::after {
    animation-play-state: running;
  }
}

.con18__stat-label img {
  /* 밝은 원본/갈색 원본 모두 비활성 상태에서는 같은 갈색으로 맞춘다. */
  filter: brightness(0) saturate(100%) invert(12%) sepia(47%) saturate(866%) hue-rotate(1deg) brightness(94%) contrast(97%);
  transition: filter .3s ease-out;
}

/* FONT:AUTO의 정적인 첫 카드 색보다 상태 색이 우선한다. 폰트·잉크 보정은 유지. */
.con18__stats .con18__stat-card .con18__stat-body .con18__stat-num,
.con18__stats .con18__stat-card .con18__stat-body .con18__stat-unit,
.con18__stats .con18__stat-card .con18__stat-body .con18__stat-date {
  color: var(--con18-stat-ink);
  transition: color .3s ease-out;
}

@keyframes con18-curtain-billow {
  0%, 100% { transform: translate(-1%, -.5%) scale(1.18, 1.18) skewX(-.6deg); }
  50% { transform: translate(1%, .5%) scale(1.2, 1.16) skewX(.6deg); }
}

@keyframes con18-curtain-fold {
  0%, 100% { transform: translate(-3%, -1%) scale(1.16) skewX(-1.5deg); }
  50% { transform: translate(3%, 1%) scale(1.2) skewX(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .con18__stat-card,
  .con18__curtain,
  .con18__stat-card::after,
  .con18__stat-label img,
  .con18__stats .con18__stat-card .con18__stat-body .con18__stat-num,
  .con18__stats .con18__stat-card .con18__stat-body .con18__stat-unit,
  .con18__stats .con18__stat-card .con18__stat-body .con18__stat-date {
    animation: none;
    transition: none;
  }
}

.con18__stat-body {
  padding-inline: calc(var(--px)*20);
}

.con18__stat--total {
  padding-top: calc(var(--px)*59);
  padding-bottom: calc(var(--px)*42);
}

.con18__stat--average {
  padding-top: calc(var(--px)*38);
  padding-bottom: calc(var(--px)*36.75);
  border-top: 1px solid rgb(50 36 9 / 0.2);
}

.con18__stat-value {
  margin-top: calc(var(--px)*25);
}

.con18__stat-num--sum {
  margin-right: calc(var(--px)*13);
}

.con18__stat-num--sum.con18__stat-num--on-green {
  margin-right: 0;
}

.con18__stat-card:last-child .con18__stat--total .con18__stat-value {
  margin-right: calc(var(--px)*12);
}

.con18__stat-card--green .con18__stat--total .con18__stat-label {
  margin-top: calc(var(--px)*3);
  margin-bottom: calc(var(--px)*-3);
}

.con18__stat-card--green .con18__stat--average .con18__stat-label {
  margin-top: calc(var(--px)*2);
  margin-bottom: calc(var(--px)*-2);
}

.con18__stat--average .con18__stat-label {
  margin-top: calc(var(--px)*1);
  margin-bottom: calc(var(--px)*-1);
}

.con18__stat-date {
  margin-top: calc(var(--px)*11);
}

.con18__notice {
  margin-top: calc(var(--px)*48);
  padding-block: calc(var(--px)*30.5);
  padding-right: calc(var(--px)*2);
  background-color: #322409;
}

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

.con18__sales-head {
    color: #ffffff;
}

.con18__sales-store {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.2;  /* OVR psd:2.54 */
}

.con18__sales-period {
    font-family: var(--font-pretendard);
    font-size: var(--subheadS);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.con18__sales-amount {
    font-family: var(--font-paperlogy);
    font-size: calc(var(--px)*48.61);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: var(--primary);
}

.con18__stat-value {
    font-family: var(--font-paperlogy);
}

.con18__stat-num.con18__stat-num--sum.con18__stat-num--on-green,
.con18__stat-num.con18__stat-num--avg.con18__stat-num--on-green {
    font-size: var(--displayM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #fff8e4;
}

.con18__stat-unit.con18__stat-unit--on-green {
    font-size: calc(var(--px)*48.9);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: #fff8e4;
}

.con18__stat-date.con18__stat-date--on-green {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #fff8e4;
}

.con18__stat-num.con18__stat-num--sum,
.con18__stat-num.con18__stat-num--avg {
    font-size: var(--displayM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--primary);
}

.con18__stat-unit {
    font-size: calc(var(--px)*48.9);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: var(--primary);
}

.con18__stat-date {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: var(--primary);
}
/* /FONT:AUTO con18 END */

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

.con18__lead {
    width: calc(var(--px)*752);
    aspect-ratio: 752 / 25;
}

.con18__stat-label.con18__stat-label--branch-31 {
    width: calc(var(--px)*158);
    aspect-ratio: 158 / 22;
}

.con18__stat-label {
    width: calc(var(--px)*180);
    aspect-ratio: 180 / 22;
}

.con18__stat-label.con18__stat-label--branch-29 {
    width: calc(var(--px)*168);
    aspect-ratio: 168 / 22;
}

.con18__stat-label.con18__stat-label--branch-27 {
    width: calc(var(--px)*166);
    aspect-ratio: 166 / 22;
}

.con18__notice-copy {
    width: calc(var(--px)*684);
    aspect-ratio: 684 / 20;
}
/* /IMG:AUTO con18 END */

/* INK:AUTO con18 */
.con18__stat-num.con18__stat-num--sum.con18__stat-num--on-green { margin-top: calc(var(--px) * -7.5); margin-bottom: calc(var(--px) * -24.5); } /* base 0,0 */
.con18__stat-num.con18__stat-num--sum { margin-top: calc(var(--px) * -7.5); margin-bottom: calc(var(--px) * -22.5); } /* base 0,0 */
.con18__sales-amount { margin-top: calc(var(--px) * -10.38); margin-bottom: calc(var(--px) * -7.7); } /* base 0,0 */
.con18__stat-num.con18__stat-num--avg.con18__stat-num--on-green { margin-top: calc(var(--px) * -7.5); margin-bottom: calc(var(--px) * -9.5); } /* base 0,0 */
.con18__stat-num.con18__stat-num--avg { margin-top: calc(var(--px) * -7.5); margin-bottom: calc(var(--px) * -9.5); } /* base 0,0 */
.con18__stat-unit.con18__stat-unit--on-green { margin-top: calc(var(--px) * -9.56); margin-bottom: calc(var(--px) * -6.44); } /* base 0,0 */
.con18__stat-unit { margin-top: calc(var(--px) * -9.56); margin-bottom: calc(var(--px) * -6.44); } /* base 0,0 */
.con18__sales-store { margin-top: calc(var(--px) * -3.4); margin-bottom: calc(var(--px) * -3.4); } /* base 0,0 */
.con18__sales-period { margin-top: calc(var(--px) * -2); margin-bottom: calc(var(--px) * -2); } /* base 0,0 */
.con18__stat-date.con18__stat-date--on-green { margin-top: calc(var(--px) * 8.7); margin-bottom: calc(var(--px) * -0.29); } /* base 11,0 */
.con18__stat-date { margin-top: calc(var(--px) * 8.7); margin-bottom: calc(var(--px) * -0.29); } /* base 11,0 */
/* /INK:AUTO con18 END */

/* 매출 카드 hover — 머리 배경 한 톤 밝게 + 링 두께, 줄에 올리면 흐름 정지 */
@media (hover: hover) {
  .con18__sales-card:hover {
    box-shadow: inset 0 0 0 2px #e4dbc3;
  }

  .con18__sales-card:hover .con18__sales-head {
    background-color: color-mix(in srgb, #322409 86%, white);
  }

  .con18__sales-flow:hover .con18__sales-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .con18__sales-card,
  .con18__sales-head {
    transition: none;
  }
}

@media (max-width: 599px) {
  .con18 {
    padding-top: 0;
  }

  .con18__sales {
    gap: 2.1333vw;
  }

  .con18__sales-flow--upper,
  .con18__sales-flow--lower {
    margin-left: 0;
    width: 100%;
  }

  /* 카드 한 줄 고정 — 트랙이 줄 폭보다 길어야 하는 마퀴(nowrap 트랙) */
  .con18__sales-track {
    white-space: nowrap;
  }

  .con18__sales-item {
    width: 66.6667vw;
    padding-right: 2.1333vw;
  }

  .con18__sales-card {
    padding-bottom: 0;
  }

  .con18__sales-head {
    gap: 2.1333vw;
    padding-top: 5.3333vw;
    padding-bottom: 4.2667vw;
  }

  /* 잉크 상쇄 마진 = 글자 크기(30px) 비례 재산정 */
  .con18__sales-store {
    margin-top: -0.5667vw;
    margin-bottom: -0.5667vw;
  }

  .con18__sales-period {
    margin-top: -0.4978vw;
    margin-bottom: -0.4978vw;
  }

  .con18__sales-amount {
    font-size: var(--titleXL);
    padding-top: 5.3333vw;
    padding-bottom: 7.4667vw; /* 숫자 아래가 카드 가장자리에 붙어 잘려 보이던 걸 띄운다 */
    margin-top: -1.7083vw;
    margin-bottom: 0;
  }

  .con18__head {
    margin-top: 15.6667vw;
  }

  .con18__title {
    width: 86vw;
  }

  .con18__lead-mobile {
    margin-top: 4.2667vw;
    font-size: var(--subheadL);
    font-weight: 400;
    line-height: 1.4;
    color: #322409;
  }

  .con18__stats {
    flex-direction: column;
    align-items: center;
    gap: 2.1333vw;
    padding: 0 5.3333vw;
    margin-top: 7.0333vw;
  }

  .con18__stat-card {
    width: 100%;
    border-radius: 5.3333vw;
  }

  .con18__stat-body {
    padding-inline: 5.3333vw;
  }

  /* 한눈에 보이게 한 줄씩: 라벨(왼쪽) + 값(오른쪽). 평균 줄은 라벨 아래에 기준일 */
  .con18__stat--total {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 4.2667vw;
    padding-bottom: 3.2vw;
  }

  .con18__stat--average {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "label value"
      "date value";
    justify-content: space-between;
    align-items: center;
    padding-top: 3.2vw;
    padding-bottom: 3.2667vw;
  }

  .con18__stat--average .con18__stat-label {
    grid-area: label;
  }

  .con18__stat--average .con18__stat-value {
    grid-area: value;
  }

  .con18__stat--average .con18__stat-date {
    grid-area: date;
    text-align: left;
  }

  .con18__stat-value {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 1.6vw;
    margin-top: 0;
  }

  .con18__stat-num.con18__stat-num--sum.con18__stat-num--on-green,
  .con18__stat-num.con18__stat-num--avg.con18__stat-num--on-green,
  .con18__stat-num.con18__stat-num--sum,
  .con18__stat-num.con18__stat-num--avg {
    font-size: 7.3333vw;
  }

  .con18__stat-unit.con18__stat-unit--on-green,
  .con18__stat-unit {
    font-size: var(--headM);
  }

  .con18__stat-num--sum {
    margin-right: 0;
  }

  .con18__stat-card:last-child .con18__stat--total .con18__stat-value {
    margin-right: 0;
  }

  .con18__stat-card--green .con18__stat--total .con18__stat-label,
  .con18__stat-card--green .con18__stat--average .con18__stat-label,
  .con18__stat--average .con18__stat-label {
    margin-top: 0;
    margin-bottom: 0;
  }

  .con18__stat-label {
    width: 32vw;
  }

  .con18__stat-label.con18__stat-label--branch-31 {
    width: 29vw;
  }

  .con18__stat-label.con18__stat-label--branch-29 {
    width: 31vw;
  }

  .con18__stat-label.con18__stat-label--branch-27 {
    width: 30.6vw;
  }

  .con18__stat-date.con18__stat-date--on-green,
  .con18__stat-date {
    margin-top: 1.0667vw;
    margin-bottom: 0;
  }

  .con18__notice {
    margin-top: 10.5333vw;
    padding: 6.4vw 5.3333vw;
  }

  .con18__notice-copy-mobile {
    font-size: var(--bodyL);
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
  }

  .con18__lead-mobile strong,
  .con18__notice-copy-mobile strong {
    font-weight: 800;
  }
}

/* /merge-build:con18 */
/* merge-build:con19 */
/* con19 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 3열(소개·차트·표)을 column 으로 접고, 차트 라벨은 도넛 기준 absolute 유지, 표는 100% 폭 */

/* 모션: 도넛 레이더 스윕 각도(GSAP 가 0→360deg 트윈). 정지 상태 360deg = 마스크 전면 노출 */
@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}
.con19__stripe {
  top: 0;
  left: 0;
  width: 100%;
  border-top: calc(var(--px)*9) solid #348318;
  border-bottom: calc(var(--px)*15) solid #f44228;
}

.con19_iner {
  padding-top: calc(var(--px)*104);
  padding-right: calc(var(--px)*2);
  padding-bottom: calc(var(--px)*22);
}

.con19__intro {
  width: calc(var(--px)*467);
  margin-top: calc(var(--px)*140);
  padding-bottom: calc(var(--px)*4.43);
}

.con19__lead {
  margin-top: calc(var(--px)*46);
}

.con19__lead-text + .con19__lead-text {
  margin-top: calc(var(--px)*35);
}

/* 글이 0건이어도(.board-empty 한 줄) 3열 폭이 무너지지 않게 도넛 폭으로 고정 */
.con19__chart {
  width: calc(var(--px)*547);
}

/* 도넛 = 게시판 비율로 그리는 conic-gradient(--pie 는 템플릿 PHP 가 주입). 접시는 위에 얹힌다 */
.con19__donut {
  width: calc(var(--px)*547);
  aspect-ratio: 547 / 547;
  background: var(--pie);
  border-radius: 50vw;
  -webkit-mask-image: conic-gradient(#000 var(--sweep), transparent 0);
  mask-image: conic-gradient(#000 var(--sweep), transparent 0);
}

/* 라벨 = 조각 중간각 중심점(--lx/--ly 는 도넛 547 기준 디자인 px · 템플릿 PHP 계산). 글줄 방향 --rot 은 방사형 소형 라벨만 */
.con19__label {
  left: calc(var(--px)*var(--lx));
  top: calc(var(--px)*var(--ly));
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  white-space: nowrap;
  text-align: center;
}

.con19__summary {
  width: calc(var(--px)*431);
  margin-top: calc(var(--px)*43);
  margin-left: calc(var(--px)*38);
  padding-bottom: calc(var(--px)*2.95);
}

.con19__table {
  display: block;
  background-color: #fffdf7;

  thead,
  tbody,
  tfoot {
    display: block;
  }

  tr {
    display: grid;
    grid-template-columns: calc(var(--px)*234) 1fr;
    align-items: center;
    text-align: center;
  }

  thead {
    background-color: #e4d8b6;
  }

  thead tr {
    min-height: calc(var(--px)*62);
    margin-inline: calc(var(--px)*10) calc(var(--px)*12);
  }

  tbody tr {
    min-height: calc(var(--px)*51.83);
    margin-inline: calc(var(--px)*10) calc(var(--px)*12);
    border-bottom: 1px solid rgb(50 36 9 / 0.2);
    transition: background-color 0.25s ease-out;
  }

  tbody tr:last-child {
    border-bottom: 0;
  }

  tfoot tr {
    grid-template-columns: calc(var(--px)*234) 1fr;
    min-height: calc(var(--px)*62);
    position: relative;
    overflow: hidden;
  }

  /* 합계행 샤인 줄기 — 진입 1회는 GSAP 가 붙이는 .con19__foot--shine 의 keyframes, hover 는 아래 미디어 블록이 transform 을 직접 건다 */
  tfoot tr::after {
    content: "";
    position: absolute;
    top: -10%;
    left: 0;
    z-index: 2; /* 같은 행 셀의 배경색(flex 자식) 위로 줄기를 올린다 */
    width: 22%;
    height: 120%;
    background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.55) 50%, rgb(255 255 255 / 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    transition: transform 0s;
    pointer-events: none;
  }

  tfoot tr.con19__foot--shine::after {
    animation: con19-shine 1.1s ease-in-out;
  }
}

@keyframes con19-shine {
  from { transform: translateX(-220%) skewX(-18deg); }
  to { transform: translateX(620%) skewX(-18deg); }
}

@media (hover: hover) and (pointer: fine) {
  .con19__table tbody tr:hover {
    background-color: color-mix(in srgb, #f44228 6%, transparent);
  }

  .con19__table tfoot tr:hover::after {
    transform: translateX(320%) skewX(-18deg);
    transition: transform 0.7s ease;
  }
}

.con19__total-label {
  padding-left: calc(var(--px)*20);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f44228;
}

.con19__total-rate {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #368318;
}

.con19__label-value {
  margin-top: calc(var(--px)*7);
}

.con19__note {
  margin-top: calc(var(--px)*13);
}

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

.con19__dish {
    width: calc(var(--px)*225);
    aspect-ratio: 225 / 224;
}
/* /IMG:AUTO con19 END */

/* FONT:AUTO con19 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con19__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: var(--primary);
}

.con19__lead-em {
    font-weight: 800;
}

.con19__chart {
    font-family: var(--font-paperlogy);
    text-align: center;
}

.con19__label-name {
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: #ffffff;
}

.con19__label-value {
    font-size: var(--titleM);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    color: #fff8e4;
}

.con19__label-text,
.con19__label-small {
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: var(--primary);
}

.con19__label-num {
    font-size: var(--subheadM);
    letter-spacing: -0.025em;
    line-height: 1.13;
}

.con19__table {
    text-align: center;
}

.con19__head-cell {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.36;
    color: var(--primary);
}

.con19__item,
.con19__rate {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.3; /* OVR */
    color: var(--primary);
}

.con19__total-label {
    font-family: var(--font-paperlogy);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.36;
    color: #ffffff;
}

.con19__total-rate {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadL);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.07;
    color: #fff8e4;
}

.con19__note {
    font-family: var(--font-pretendard);
    font-size: var(--subheadS);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.33;
    color: var(--primary);
}
/* /FONT:AUTO con19 END */

/* INK:AUTO con19 */
.con19__label-name { margin-top: calc(var(--px) * -4.6); margin-bottom: calc(var(--px) * -5.59); } /* base 0,0 */
.con19__rate { margin-top: calc(var(--px) * -5); margin-bottom: calc(var(--px) * -5); } /* base 0,0 */
.con19__head-cell { margin-top: calc(var(--px) * -4.96); margin-bottom: calc(var(--px) * -4.95); } /* base 0,0 */
.con19__label-text { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -5.11); } /* base 0,0 */
.con19__lead-text.con19__lead-text--01 { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * -4.43); } /* base 0,0 */
.con19__lead-text.con19__lead-text--02 { margin-top: calc(var(--px) * 30.54); margin-bottom: calc(var(--px) * -4.43); } /* base 35,0 */
.con19__label-small { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
.con19__item { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
.con19__label-num { margin-top: calc(var(--px) * -2.56); margin-bottom: calc(var(--px) * -4.44); } /* base 0,0 */
.con19__label-value { margin-top: calc(var(--px) * 4); margin-bottom: calc(var(--px) * -3); } /* base 7,0 */
.con19__note { margin-top: calc(var(--px) * 10.03); margin-bottom: calc(var(--px) * -2.95); } /* base 13,0 */
.con19__lead-em { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.47); } /* base 0,0 */
/* /INK:AUTO con19 END */

@media (max-width:599px) {
  .con19__stripe {
    border-top-width: 1.6vw;
    border-bottom-width: 2.1333vw;
  }

  .con19_iner {
    flex-direction: column;
    align-items: center;
    padding: 16.8vw 6.4vw 10.6667vw;
  }

  .con19__intro {
    width: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .con19__title {
    width: auto;
    aspect-ratio: auto;
  }

  .con19__title-line--1 {
    width: 46.1vw;
  }

  .con19__title-line--2 {
    width: 38.3vw;
    margin-top: 1.3956vw;
  }

  .con19__title-line--3 {
    width: 54.4vw;
    margin-top: 1.595vw;
  }

  .con19__title-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con19__lead,
  .con19__note {
    text-wrap: balance;
  }

  .con19__lead {
    margin-top: 6.4vw;
  }

  .con19__lead-text.con19__lead-text--02 {
    margin-top: 3.2vw;
  }

  .con19__chart {
    width: 88vw;
    margin-top: 10.6667vw;
  }

  .con19__donut {
    width: 88vw;
  }

  .con19__dish {
    width: 36.1974vw;
  }

  .con19__label {
    left: calc(var(--lx)*0.1609vw);
    top: calc(var(--ly)*0.1609vw);
  }

  .con19__label-text,
  .con19__label-small {
    font-size: var(--bodyS);
  }

  /* 3% 안팎 조각의 방사형 라벨이 이웃 라벨과 닿지 않게 줄 높이를 낮춘다 */
  .con19__label-small {
    font-size: 3.2vw;
    line-height: 1.05;
  }

  .con19__summary {
    width: 100%;
    margin-top: 8.5333vw;
    margin-left: 0;
  }

  .con19__table tr {
    grid-template-columns: 1.2fr 1fr;
  }

  .con19__table thead tr {
    min-height: 12.8vw;
    margin-inline: 2.1333vw;
  }

  .con19__table tbody tr {
    min-height: 10.6667vw;
    margin-inline: 2.1333vw;
  }

  .con19__table tfoot tr {
    grid-template-columns: 1.2fr 1fr;
    min-height: 12.8vw;
  }

  .con19__note {
    margin-top: 3.2vw;
  }
}


/* /merge-build:con19 */
/* merge-build:con20 */
/* con20 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 3열 카드(brands)를 column 으로 접고 폭 100%, 스탬프는 카드 경계 대신 카드 우상단 겹침, 워드마크 폭 축소 */
.con20__torn {
  bottom: 0;
  left: calc(var(--px)*81);
}

.con20_iner {
  padding-bottom: calc(var(--px)*128);
}

.con20__title {
  margin-top: calc(var(--px)*-20.5);
  position: relative; /* 워드마크 위로 겹침 — 워드마크는 GSAP transform 으로 위층에 올라가 static 인 타이틀을 가린다. 뒤(DOM)의 positioned 가 위 */
}

.con20__lead {
  margin-top: calc(var(--px)*39);
}

.con20__board {
  width: calc(var(--px)*1599);
  margin-top: calc(var(--px)*7);
  margin-right: calc(var(--px)*2);
}


.con20__note {
  margin-top: calc(var(--px)*7);
  margin-bottom: calc(var(--px)*8);
  align-self: flex-end;
}

.con20__brand {
  flex-shrink: 0;
}

.con20__brand--single {
  width: calc(var(--px)*641);
  --brand-gap: calc(var(--px)*44);
}

.con20__brand--plus-one {
  width: calc(var(--px)*552);
  --brand-gap: calc(var(--px)*40);
}

.con20__brand--plus-two {
  width: calc(var(--px)*406);
  --brand-gap: calc(var(--px)*30);
}

.con20__card {
  min-height: calc(var(--px)*278);
  padding: calc(var(--px)*28) var(--brand-gap) calc(var(--px)*21.8);
}

.con20__brand--single .con20__card {
  background-color: #1e1504;
}

.con20__brand--plus-one .con20__card {
  background-color: #f44228;
}

.con20__brand--plus-two .con20__card {
  background-color: #005e23;
}

.con20__brand--plus-two .con20__badges {
  margin-top: calc(var(--px)*-1);
  margin-right: calc(var(--px)*-1);
}

.con20__photo {
  left: 0;
  bottom: 0;
}

.con20__brand-label {
  margin-bottom: calc(var(--px)*5);
}

.con20__gain {
  gap: calc(var(--px)*4);
  padding-bottom: calc(var(--px)*3.2);
}

.con20__brand--plus-one .con20__gain {
  gap: calc(var(--px)*6);
}

.con20__brand--plus-two .con20__gain {
  gap: calc(var(--px)*3);
}

.con20__plus {
  margin-bottom: calc(var(--px)*16);
}

.con20__brand--plus-one .con20__plus {
  margin-right: calc(var(--px)*-5);
}

.con20__brand--plus-two .con20__plus {
  margin-right: calc(var(--px)*1);
}

.con20__sales {
  margin-top: calc(var(--px)*34);
  padding-right: var(--brand-gap);
}

.con20__amount {
  gap: calc(var(--px)*10);
}

.con20__total {
  margin-top: calc(var(--px)*2);
}

.con20__unit {
  margin-top: calc(var(--px)*10);
}

.con20__figure--total {
  margin-right: calc(var(--px)*13);
}

.con20__brand--plus-two .con20__figure--total {
  margin-right: calc(var(--px)*10);
}

.con20__stamp--plus-one {
  top: calc(var(--px)*104);
  left: calc(var(--px)*622);
}

.con20__stamp--plus-two {
  top: calc(var(--px)*96);
  right: calc(var(--px)*137);
}

/* 상태 전환(hover) — GSAP 이 건드리는 래퍼(.con20__photo/.con20__badge) 안쪽 img 에만 건다 */
@media (hover: hover) and (pointer: fine) {
  .con20__photo img {
    transform-origin: left bottom;
    transition: transform 0.6s ease-out;
  }

  .con20__brand:hover .con20__photo img {
    transform: scale(1.06);
  }

  .con20__badge img {
    transition: transform 0.3s ease-out;
  }

  .con20__badge:hover img {
    transform: scale(1.12);
  }
}

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

.con20__wordmark {
    width: calc(var(--px)*1611);
    aspect-ratio: 1611 / 228;
}

.con20__title {
    width: calc(var(--px)*549);
    aspect-ratio: 549 / 98;
}

.con20__photo.con20__photo--single {
    width: calc(var(--px)*321);
    aspect-ratio: 321 / 278;
}

.con20__badge {
    width: calc(var(--px)*64);
    aspect-ratio: 64 / 64;
}

.con20__photo.con20__photo--plus-one {
    width: calc(var(--px)*332);
    aspect-ratio: 332 / 252;
}

.con20__plate {
    width: calc(var(--px)*51);
    aspect-ratio: 51 / 51;
}

.con20__stamp.con20__stamp--plus-one,
.con20__stamp.con20__stamp--plus-two {
    width: calc(var(--px)*275);
    aspect-ratio: 275 / 141;
}
/* /IMG:AUTO con20 END */

/* FONT:AUTO con20 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con20__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.39;
    text-align: center;
    color: var(--primary);
}

.con20__lead-em,
.con20__note-em,
.con20__brand-name-em {
    font-weight: 800;
}

.con20__note {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.09;
    text-align: center;
    color: var(--primary);
}

.con20__brands {
    font-family: var(--font-paperlogy);
}

.con20__brand-label {
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.29; /* OVR */
    text-align: right;
    color: #ffffff;
}

.con20__amount {
    color: var(--primary);
}

.con20__figure {
    font-size: var(--titleM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.1; /* OVR */
    text-align: center;
}

.con20__unit {
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.1; /* OVR */
    text-align: center;
    color: var(--primary);
}

.con20__gain {
    color: #ffffff;
}

.con20__plus {
    font-size: calc(var(--px)*48.61);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.25;
    text-align: center;
}

.con20__brand-name {
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.29;
    text-align: right;
}

.con20__sales {
    text-align: center;
}

.con20__total-label {
    font-size: var(--headL);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.89;
    color: #ffffff;
}

.con20__figure.con20__figure--total {
    font-size: var(--titleM);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.1; /* OVR */
    color: var(--secondary);
}
/* /FONT:AUTO con20 END */

/* INK:AUTO con20 */
.con20__plus { margin-top: calc(var(--px) * -10.38); margin-bottom: calc(var(--px) * 4.63); } /* base 0,16 */
.con20__brand-label { margin-top: calc(var(--px) * -5.19); margin-bottom: calc(var(--px) * 0.81); } /* base 0,5 */
.con20__brand-name { margin-top: calc(var(--px) * -5.19); margin-bottom: calc(var(--px) * -3.18); } /* base 0,0 */
.con20__lead { margin-top: calc(var(--px) * 34.99); margin-bottom: calc(var(--px) * -4); } /* base 39,0 */
.con20__figure.con20__figure--total { margin-top: calc(var(--px) * -6.25); margin-bottom: calc(var(--px) * 0.75); } /* base 0,0 */
.con20__figure { margin-top: calc(var(--px) * -6.25); margin-bottom: calc(var(--px) * 0.75); } /* base 0,0 */
.con20__brand-name-em { margin-top: calc(var(--px) * -5.19); margin-bottom: calc(var(--px) * -1.8); } /* base 0,0 */
.con20__note-em { margin-top: calc(var(--px) * -1.58); margin-bottom: calc(var(--px) * -4.42); } /* base 0,0 */
.con20__unit { margin-top: calc(var(--px) * 7); margin-bottom: calc(var(--px) * -3); } /* base 10,0 */
.con20__lead-em { margin-top: calc(var(--px) * -4.01); margin-bottom: calc(var(--px) * 0.01); } /* base 0,0 */
.con20__note { margin-top: calc(var(--px) * 4.42); margin-bottom: calc(var(--px) * 8.42); } /* base 7,8 */
/* /INK:AUTO con20 END */

@media (max-width: 599px) {
  .con20__torn {
    left: 4.2667vw;
    width: 60vw;
  }

  .con20_iner {
    padding: 5.5333vw 4.2667vw 12.8vw;
  }

  .con20__wordmark {
    width: 90vw;
  }

  .con20__title {
    width: 80vw;
    margin-top: 4.2667vw;
  }

  .con20__lead {
    margin-top: 5.3333vw;
    text-wrap: balance;
  }

  .con20__board {
    width: 100%;
    margin-top: 6.4vw;
    margin-right: 0;
  }

  .con20__note {
    align-self: center;
    margin-bottom: 3.2vw;
  }

  .con20__brands {
    flex-direction: column;
  }

  /* 브랜드 = 둥근 카드 한 장: 위는 색면(사진·로고), 아래는 매출 숫자 */
  .con20__brand {
    width: 100%;
    --brand-gap: 5.3333vw;
    overflow: hidden;
    border-radius: 5.3333vw;
    background-color: #fffcf4;
    box-shadow: inset 0 0 0 1px #e4dbc3;
  }

  .con20__brand--plus-one {
    order: 2;
  }

  .con20__brand--plus-two {
    order: 4;
  }

  .con20__stamp.con20__stamp--plus-one,
  .con20__stamp.con20__stamp--plus-two {
    position: relative;
    z-index: 1; /* order 로 카드보다 앞에 놓인 스탬프가 카드 위로 겹치도록 — 같은 .front 스택 컨텍스트 안의 층 지정 */
    align-self: flex-start;
    width: 30vw;
    margin-top: 2.1333vw;
    margin-bottom: -6.4vw;
    margin-left: 3.2vw;
  }

  .con20__stamp--plus-one {
    order: 1;
    top: auto;
    left: auto;
  }

  .con20__stamp--plus-two {
    order: 3;
    top: auto;
    right: auto;
  }

  .con20__card {
    min-height: 48vw;
    padding: 5.3333vw var(--brand-gap);
  }

  .con20__badge {
    width: 12vw;
  }

  .con20__photo.con20__photo--single,
  .con20__photo.con20__photo--plus-one {
    width: 42vw;
  }

  .con20__brand .con20__gain {
    gap: 2.1333vw;
  }

  .con20__plus {
    font-size: var(--titleS);
  }

  .con20__badges {
    margin-bottom: 2.1333vw;
  }

  /* 숫자는 오른쪽 정렬 — 총 금액 줄과 단위(원) 끝이 세로로 맞는다 */
  .con20__sales {
    align-items: flex-end;
    margin-top: 0;
    padding: 5.3333vw var(--brand-gap);
  }

  .con20__figure,
  .con20__figure.con20__figure--total {
    font-size: var(--titleXS);
  }

  .con20__unit {
    font-size: var(--headS);
  }

  .con20__amount {
    justify-content: flex-end;
    gap: 1.6vw;
  }

  .con20__total {
    justify-content: flex-end;
    margin-top: 1.2vw;
    gap: 1.6vw;
  }

  .con20__brand .con20__figure--total {
    margin-right: 0;
  }

  .con20__plate {
    width: 12vw;
  }
}

/* /merge-build:con20 */
/* merge-build:con21 */
/* con21 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 좌(소개)·우(그래프)를 column 으로 접고, 그래프는 폭 100% 로 줄이되 행 안 점·말풍선 absolute 유지 */
.con21_iner {
  padding-top: calc(var(--px)*182);
  padding-right: 0;
  padding-bottom: calc(var(--px)*85);
  padding-left: calc(var(--px)*210);
}

.con21__intro {
  flex: none;
  width: calc(var(--px)*613);
  margin-top: calc(var(--px)*85);
}

.con21__tags {
  gap: calc(var(--px)*6);
  margin-top: calc(var(--px)*25);
  margin-left: calc(var(--px)*1);
}

.con21__tag {
  background: var(--tertiary);
}

.con21__tag--off-season {
  padding: calc(var(--px)*8) calc(var(--px)*17) calc(var(--px)*8) calc(var(--px)*14);
}

.con21__tag--stable {
  padding: calc(var(--px)*8) calc(var(--px)*22) calc(var(--px)*8) calc(var(--px)*18);
}

.con21__copy {
  margin-top: calc(var(--px)*42);
  margin-left: calc(var(--px)*1);
  gap: calc(var(--px)*35);
}

.con21__graph {
  flex: none;
  width: calc(var(--px)*929);
}

/* 이름 열 92 + 간격 36 = 축 x(951) 까지. 행 높이 101 = 이름 칸 padding-block */
.con21__chart {
  padding-top: calc(var(--px)*22);
  padding-bottom: calc(var(--px)*18);
}

.con21__axes {
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(var(--px)*128);
  border-left: 1px solid #322409;
  border-bottom: 1px solid #322409;
}

.con21__divider {
  top: 0;
  bottom: 0;
  left: calc(var(--px)*528);
  width: 1px;
  background: #322409;
  opacity: 0.2;
}

.con21__row {
  gap: calc(var(--px)*36);
  transition: opacity 0.3s ease-out; /* 모션: 호버 시 나머지 행 디밍 (GSAP 은 행 자체를 안 만진다) */
}

.con21__name-cell {
  flex: none;
  width: calc(var(--px)*92);
  padding-block: calc(var(--px)*41);
}

.con21__name {
  display: block;
  white-space: nowrap;
  transition: color 0.25s ease-out; /* 모션: 행 호버 시 지점명 강조색 */
}

.con21__track {
  flex: 1;
}

.con21__line {
  left: 0;
}

.con21__line--yeoksam { top: calc(var(--px)*33); }
.con21__line--wangsimni { top: calc(var(--px)*43); }
.con21__line--sillim { top: calc(var(--px)*48); }
.con21__line--sadang { top: calc(var(--px)*47); }

/* 점 = 18px 코어 + 11px 반투명 헤일로. 헤일로가 선 이음새를 덮도록 선 뒤(DOM 나중)에 둔다 */
.con21__point {
  width: calc(var(--px)*18);
  height: calc(var(--px)*18); /* HEIGHT: 내용 없는 원형 점(자식은 absol 말풍선·꼬리뿐) — padding/흐름으로 크기 못 만듦 */
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 calc(var(--px)*11) color-mix(in srgb, var(--secondary) 50%, transparent);
}

.con21__point--first { left: calc(var(--px)*192); }
.con21__point--second { right: calc(var(--px)*207); --ping-pt: 1.2s; }

.con21__row--yeoksam .con21__point--first { top: calc(var(--px)*44); }
.con21__row--yeoksam .con21__point--second { top: calc(var(--px)*25); }
.con21__row--wangsimni .con21__point--first { top: calc(var(--px)*49); }
.con21__row--wangsimni .con21__point--second { top: calc(var(--px)*37); }
.con21__row--sillim .con21__point--first { top: calc(var(--px)*43); }
.con21__row--sillim .con21__point--second { top: calc(var(--px)*41); }
.con21__row--sadang .con21__point--first { top: calc(var(--px)*38); }
.con21__row--sadang .con21__point--second { top: calc(var(--px)*44); }

/* 말풍선·꼬리는 점(양축 flex 부모)의 정적 위치로 가로 중앙, bottom 만 점 하단 기준. 꼬리는 몸통 뒤(DOM 먼저) */
.con21__tail {
  bottom: calc(var(--px)*32);
}

.con21__bubble {
  bottom: calc(var(--px)*42);
  width: calc(var(--px)*137);
  padding-block: calc(var(--px)*3);
  border-radius: calc(var(--px)*13);
  background: #2c1e00;
  white-space: nowrap;
  transition: background-color 0.25s ease-out; /* 모션: 호버 강조 (transform 은 GSAP 소유라 제외) */
}

.con21__quarters {
  margin-top: calc(var(--px)*32);
  padding-left: calc(var(--px)*262);
  gap: calc(var(--px)*254);
}

/* 모션 — ani_con21.js 가 줄 마스크용으로 감싸는 span(정지 상태는 원문과 같은 인라인 흐름) */
.con21__ln {
  display: inline-block;
  vertical-align: top;
}

.con21__ln-in {
  display: block;
}

/* 모션 · 상태 전환(CSS transition) — GSAP 이 안 만지는 속성만: 행 opacity · 이름 color · 말풍선 background-color */
@media (hover: hover) and (pointer: fine) {
  .con21__rows:hover .con21__row:not(:hover) {
    opacity: 0.4;
  }

  .con21__row:hover .con21__name {
    color: var(--secondary);
  }

  .con21__bubble:hover {
    background-color: var(--secondary);
  }
}

/* 모션 · 상시 루프(CSS keyframes) — 등장이 끝나 JS 가 .is-live 를 붙인 점에서만 소나 링이 퍼진다 */
.con21__point.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--secondary);
  border-radius: 50%;
  pointer-events: none;
  animation: con21-ping 2.4s ease-out infinite;
  animation-delay: calc(var(--ping-row, 0s) + var(--ping-pt, 0s));
}

.con21__row:nth-child(2) {
  --ping-row: 0.3s;
}

.con21__row:nth-child(3) {
  --ping-row: 0.6s;
}

.con21__row:nth-child(4) {
  --ping-row: 0.9s;
}

@keyframes con21-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .con21__point.is-live::after {
    content: none;
  }
}

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

.con21__tag-text.con21__tag-text--off-season {
    width: calc(var(--px)*134);
    aspect-ratio: 134 / 22;
}

.con21__tag-text.con21__tag-text--stable {
    width: calc(var(--px)*270);
    aspect-ratio: 270 / 22;
}

.con21__line.con21__line--yeoksam {
    width: calc(var(--px)*749);
    aspect-ratio: 749 / 36;
}

.con21__tail {
    width: calc(var(--px)*16);
    aspect-ratio: 16 / 30;
}

.con21__line.con21__line--wangsimni {
    width: calc(var(--px)*749);
    aspect-ratio: 749 / 30;
}

.con21__line.con21__line--sillim {
    width: calc(var(--px)*749);
    aspect-ratio: 749 / 14;
}

.con21__line.con21__line--sadang {
    width: calc(var(--px)*749);
    aspect-ratio: 749 / 11;
}
/* /IMG:AUTO con21 END */

/* FONT:AUTO con21 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con21__copy {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.44;
    color: var(--primary);
}

.con21__text-em,
.con21__amount {
    font-weight: 800;
}

.con21__graph {
    font-family: var(--font-paperlogy);
    text-align: center;
}

.con21__name {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 1.2; /* OVR */
    color: var(--primary);
}

.con21__track {
    font-size: var(--bodyM);
    letter-spacing: -0.075em;
    line-height: 1.2;
    color: #f3ecd5;
}

.con21__unit {
    font-weight: 600;
}

.con21__quarters {
    font-size: var(--subheadM);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 1.2;
    color: var(--primary);
}
/* /FONT:AUTO con21 END */

/* INK:AUTO con21 */
.con21__text.con21__text--lead { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * -4.45); } /* base 0,0 */
.con21__text.con21__text--body { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * -4.43); } /* base 0,0 */
.con21__quarter { margin-top: calc(var(--px) * -3.4); margin-bottom: calc(var(--px) * -4.4); } /* base 0,0 */
.con21__name { margin-top: calc(var(--px) * -4.2); margin-bottom: calc(var(--px) * -3.19); } /* base 0,0 */
.con21__unit { margin-top: calc(var(--px) * -3.1); margin-bottom: calc(var(--px) * -1.9); } /* base 0,0 */
.con21__text-em { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * 0.46); } /* base 0,0 */
.con21__amount { margin-top: calc(var(--px) * -3.1); margin-bottom: calc(var(--px) * 0.1); } /* base 0,0 */
/* /INK:AUTO con21 END */

@media (max-width: 599px) {
  /* 섹션 경계 = 종이 찢김선. 늘어나던 PC 배경(bg_img)은 빼고, 찢김선 위쪽을 투명으로 뺀 띠(con21_10) + 단색 면으로 깐다.
     띠가 위 섹션(con20) 아래로 겹쳐 올라가 색이 바뀌는 선이 곧 섹션 경계가 된다 */
  .con21 {
    margin-top: -12.3333vw;
    background-color: transparent;
    background-image: url(/images/con21_10.png), linear-gradient(#fafafa, #fafafa);
    background-repeat: no-repeat;
    background-position: 50% top, 0 100%;
    background-size: 200% auto, 100% calc(100% - 20vw);
  }

  .con21_iner {
    flex-direction: column;
    align-items: center;
    gap: 7.6667vw;
    width: 100%;
    padding-top: 24vw;
    padding-right: 4vw;
    padding-bottom: 12.8vw;
    padding-left: 4vw;
  }

  .con21__intro {
    width: 100%;
    margin-top: 0;
  }

  /* 제목 = 줄별로 잘라 가운데 정렬로 쌓은 모바일용 2줄(PC 원본 이미지는 .pc) */
  .con21__title {
    width: auto;
    aspect-ratio: auto;
    margin-inline: auto;
  }

  .con21__title-mo {
    gap: 1.4vw;
  }

  .con21__title-line img {
    display: block;
    width: 100%;
    height: auto;
  }

  .con21__title-line--1 {
    width: 60vw;
  }

  .con21__title-line--2 {
    width: 61.9vw;
  }

  .con21__tags {
    flex-direction: column;
    align-items: center;
    gap: 2.1333vw;
    margin-top: 4.2667vw;
  }

  .con21__tag--off-season {
    padding: 1.2vw 3.2vw 1.2vw 2.4vw;
  }

  .con21__tag--stable {
    padding: 1.2vw 4vw 1.2vw 3.2vw;
  }

  .con21__tag-text.con21__tag-text--off-season {
    width: 24.3vw;
  }

  .con21__tag-text.con21__tag-text--stable {
    width: 49vw;
  }

  /* 굵은 문장은 얇은 문장 아래로 한 번 더 띄운다 */
  .con21__text-em {
    display: block;
    margin-top: 2.1333vw;
  }

  .con21__copy {
    margin-top: 6.4vw;
    gap: 5.3333vw;
  }

  .con21__graph {
    width: 100%;
  }

  /* 그래프(점·말풍선)는 PC 만. 모바일은 지점별 분기 막대 — 1분기 vs 2분기를 한눈에 비교 */
  .con21__board {
    padding: 5.3333vw 4.2667vw 2.1333vw;
    border-radius: 5.3333vw;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #e4dbc3;
  }

  .con21__board-cap {
    font-size: var(--bodyS);
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary);
  }

  .con21__bd {
    padding: 4.2667vw 0;
    border-top: 1px solid #e4dbc3;
  }

  .con21__board-list {
    margin-top: 3.2vw;
  }

  .con21__bd:first-child {
    border-top: 0;
  }

  .con21__bd-name {
    text-align: left;
    font-size: var(--headS);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.075em;
    color: var(--primary);
  }

  .con21__bd-bar {
    display: grid;
    grid-template-columns: 10vw minmax(0, 1fr) 31vw;
    align-items: center;
    column-gap: 2.1333vw;
    margin-top: 2.1333vw;
  }

  .con21__bd-q {
    font-size: var(--bodyS);
    font-weight: 600;
    text-align: left;
    color: var(--primary);
  }

  .con21__bd-track {
    display: block;
    height: 3.2vw;
    border-radius: 50vw;
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    overflow: hidden;
  }

  .con21__bd-fill {
    display: block;
    height: 100%;
    border-radius: 50vw;
    background-color: var(--tertiary);
  }

  .con21__bd-bar--q2 .con21__bd-fill {
    background-color: var(--secondary);
  }

  .con21__bd-amount {
    font-size: var(--bodyM);
    font-weight: 800;
    letter-spacing: -0.05em;
    text-align: right;
    color: var(--primary);
  }

  .con21__bd-amount small {
    font-size: var(--bodyS);
    font-weight: 600;
  }
}

/* /merge-build:con21 */
/* merge-build:con22 */
/* con22 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 게시판 main_areas 연동: .con22__areas > .con22__area = 글 1건(루프 본문), .con22__area-name = 제목(지역명). 카드는 전부 같은 흰 알약이라 순번 클래스 없음 */
/* 글 수: 12장(4줄) 이하는 slider min-height 가 4줄을 지켜 섹션 높이 고정 · 초과면 js/slide.js 가 slider 를 Swiper 로 바꿔(.is-sliding) 높이는 그대로 4줄 — PC 세로 한 줄(3장)씩 · 모바일 가로 한 열(6장)씩 오토플레이 */
/* 시트(820)는 memo(689) 아래로 131 튀어나온다 = 찢긴 종이 하단이 다음 섹션(con23) 위에 걸치는 시안 그대로. 그래서 섹션·박스 overflow 를 열고 .con22_iner 를 con23 위로 올린다 */
/* 모바일: 좌우 2단 → column, 메모지·슬라이더 없이 알약을 가운데 정렬로 전부 펼침 */
.con22 {
  overflow: visible;
  border-top: calc(var(--px)*8) solid #368318;
}

.con22_iner {
  z-index: 11; /* 찢긴 시트가 다음 섹션 con23 위로 걸친다 — con23 .front(z-index 10)보다 위 */
  border-top: calc(var(--px)*15) solid #f44228;
}

.con22_box {
  position: relative;
  background-color: #000;
}

/* 합성 배경은 섹션 y21 부터라 상단 2px 은 줄무늬 아래 — 위를 잘라 하단 정렬 */
.con22_box .bg_img {
  object-position: center bottom;
}

.con22_box_iner {
  padding-left: calc(var(--px)*287);
}

.con22__copy {
  width: calc(var(--px)*605);
  padding-top: calc(var(--px)*239);
}

.con22__title {
  margin: calc(var(--px)*37) 0 0;
}

.con22__note {
  margin: calc(var(--px)*22) 0 0;
}

/* 메모지: 시트 이미지(820)가 박스 하단을 넘쳐 con23 위로 걸친다 — 높이는 알약판+캡션 흐름이 만든다 */
.con22__memo {
  flex: none;
  width: calc(var(--px)*899);
  margin-top: calc(var(--px)*23);
  padding: calc(var(--px)*189) 0 calc(var(--px)*46) calc(var(--px)*76);
}

.con22__memo-sheet {
  top: 0;
  left: 0;
  min-height: calc(150% - var(--px)*213.5);
}

.con22__memo-sheet img {
  height: 100%;
  object-fit: fill;
}

.con22__memo-tape {
  top: calc(var(--px)*2);
  left: calc(var(--px)*297);
}

.con22__slider {
  width: calc(var(--px)*766);
  min-height: calc(var(--px)*392);
}

.con22__areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--px)*20) calc(var(--px)*8);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 슬라이드 모드(12장 초과): slider = Swiper 컨테이너, areas = swiper-wrapper(세로 flex), 한 줄 = 슬라이드(알약 3장 + 아래 간격 20) */
.con22__slider.is-sliding {
  height: calc(var(--px)*392);
  margin-inline: 0; /* swiper.css 의 .swiper{margin:auto} 가 flex 열에서 슬라이더를 가운데로 밀어 알약이 시트 오른쪽으로 넘친다 */
  overflow: hidden;
  overflow: clip; /* 알약 테두리 끝이 가장자리에서 1px 잘리지 않게 여유를 둔다 — 줄 사이 간격이 20이라 이웃 줄은 안 보인다 */
  overflow-clip-margin: 2px;
}

.con22__slider.is-sliding > .con22__areas {
  display: flex;
  gap: 0; /* Swiper 가 위치를 직접 계산한다 — flex gap 이 끼면 어긋난다 */
}

.con22__slider .con22__slide {
  height: auto;
  padding-bottom: calc(var(--px)*20);
  list-style: none;
}

.con22__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 calc(var(--px)*8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.con22__area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--px)*83);
  background: #fff;
  border: 1px solid #e4d8b6;
  border-radius: calc(var(--px)*41);
}

.con22__memo-caption {
  margin: calc(var(--px)*37) 0 0 calc(var(--px)*161);
}

/* 모션: v-peel(vweb-anim.css)이 relative 를 거는데 테이프는 시트 위 absolute 배치 */
.con22__memo-tape.v-peel {
  position: absolute;
}

/* 모션: 알약 hover (색만 — transform 은 GSAP 자기장 소유) */
@media (hover: hover) and (pointer: fine) {
  .con22__area {
    transition: background-color .25s ease-out, border-color .25s ease-out;
  }

  .con22__area:hover {
    background-color: #fff4cf;
    border-color: #e0b64a;
  }
}

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

.con22__title {
    width: calc(var(--px)*388);
    aspect-ratio: 388 / 116;
}

.con22__memo-sheet {
    width: calc(var(--px)*899);
    aspect-ratio: 899 / 820;
}

.con22__memo-tape {
    width: calc(var(--px)*359);
    aspect-ratio: 359 / 116;
}

.con22__memo-caption {
    width: calc(var(--px)*412);
    aspect-ratio: 412 / 25;
}
/* /IMG:AUTO con22 END */

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

.con22__areas {
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.057em; /* OVR */
    line-height: 1.2;
    text-align: center;
    color: #2c1e00;
}
/* /FONT:AUTO con22 END */

/* INK:AUTO con22 */
.con22__note { margin-top: calc(var(--px) * 17.54); margin-bottom: calc(var(--px) * -4.43); } /* base 22,0 */
/* /INK:AUTO con22 END */

@media (max-width:599px) {
  .con22 {
    border-top-width: 1.0667vw;
  }

  .con22_iner {
    border-top-width: 2.1333vw;
  }

  .con22_box_iner {
    flex-direction: column;
    align-items: center;
    padding-left: 0;
  }

  .con22__copy {
    width: 100%;
    align-items: center;
    padding: 15.6667vw 5.3333vw 0;
  }

  .con22__eyebrow {
    width: 67vw;
  }

  .con22__title {
    width: auto;
    aspect-ratio: auto;
    margin-top: 7.2667vw;
  }

  .con22__title-line img {
    width: 100%;
  }

  .con22__title-line--1 {
    width: 42.0361vw; /* 줄 이미지 233 × (70vw ÷ 388) */
    margin-bottom: 1.4433vw; /* 줄 사이 8 × (70vw ÷ 388) */
  }

  .con22__title-line--2 {
    width: 70vw;
  }

  .con22__note {
    margin-top: 5.2vw;
    margin-bottom: 0;
  }

  /* 메모지(시트·테이프)와 슬라이더는 PC 만. 모바일은 어두운 배경 위에 상권 알약을 가운데 정렬로 전부 펼친다 — 내용(제목·문구·상권 목록)은 그대로 */
  .con22__memo {
    width: 100%;
    margin-top: 8.5333vw;
    padding: 0 5.3333vw 13.6667vw;
  }

  /* 알약은 같은 폭의 3열 격자 + 어두운 반투명 판 — 들쭉날쭉한 폭과 배경 사진의 번잡함을 정리 */
  .con22__slider {
    width: 100%;
    min-height: 0;
    padding: 4.2667vw;
    border-radius: 5.3333vw;
    background-color: color-mix(in srgb, #000 60%, transparent);
    backdrop-filter: blur(1.6vw);
  }

  .con22__areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.1333vw;
  }

  .con22__area {
    min-height: 0;
    padding: 2.9333vw 1.0667vw;
    border-radius: 50vw;
  }

  .con22__area-name {
    font-size: var(--bodyS);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.05em;
    text-align: center;
  }
}

/* /merge-build:con22 */
/* merge-build:con23 */
/* con23 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 차트 폭을 뷰포트에 맞춰 비례 축소(막대 9열 유지), 스티커는 차트 중앙 유지 */
.con23_iner {
  padding-top: calc(var(--px)*111);
  padding-bottom: calc(var(--px)*28);
}

.con23__head {
  gap: calc(var(--px)*29);
}

.con23__chart {
  gap: calc(var(--px)*15);
  margin-top: calc(var(--px)*75);
}

.con23__yaxis {
  margin-top: calc(var(--px)*33.46);
  margin-bottom: calc(var(--px)*32.41);
}

.con23__plot {
  width: calc(var(--px)*1136);
  margin-top: calc(var(--px)*41);
  padding-top: calc(var(--px)*5);
  padding-left: calc(var(--px)*44);
}

.con23__gridline {
  left: 0;
  width: 100%;
  height: calc(var(--px)*1);
  background: #322409;
  opacity: 0.3;
}

.con23__gridline--top {
  top: 0;
}

.con23__gridline--upper {
  top: calc(var(--px)*84);
}

.con23__gridline--lower {
  top: calc(var(--px)*171);
}

.con23__gridline--bottom {
  top: calc(var(--px)*255);
}

.con23__gridline--base {
  top: calc(var(--px)*319);
  background: #e4d8b6;
  opacity: 1;
}

.con23__stores {
  gap: calc(var(--px)*44);
}

.con23__store {
  width: calc(var(--px)*68);
  gap: calc(var(--px)*29);
}

.con23__store--geondae {
  --bar-h: calc(var(--px)*140);
}

.con23__store--yeoksam {
  --bar-h: calc(var(--px)*85);
}

.con23__store--wangsimni {
  --bar-h: calc(var(--px)*112);
  margin-left: calc(var(--px)*6);
}

.con23__store--sillim {
  --bar-h: calc(var(--px)*259);
}

.con23__store--jeongneung {
  --bar-h: calc(var(--px)*98);
}

.con23__store--hwagok {
  --bar-h: calc(var(--px)*168);
}

.con23__store--cheonho {
  --bar-h: calc(var(--px)*281);
  margin-left: calc(var(--px)*6);
}

.con23__store--mapo {
  --bar-h: calc(var(--px)*213);
}

.con23__store--myeongji {
  --bar-h: calc(var(--px)*315);
  margin-left: calc(var(--px)*8);
}

.con23__bar {
  width: 100%;
  height: var(--bar-h); /* HEIGHT: 데이터 막대 — 값 자체가 높이이고 상승 모션 대상 */
  background: #e4d8b6;
  border-radius: calc(var(--px)*20) calc(var(--px)*20) 0 0;
  transition: background-color .3s ease-out;
}

.con23__store-name {
  margin-top: calc(var(--px)*3.5);
  margin-bottom: calc(var(--px)*3.5);
  white-space: nowrap;
  transition: color .3s ease-out;
}

.con23__sticker {
  top: calc(var(--px)*-15);
}

/* 모션: 색 전환은 CSS transition(transform 은 GSAP 소유), 스티커 소프트 블링크는 img 에만(래퍼는 GSAP rise) */
@media (hover: hover) and (min-width: 600px) {
  .con23__store:hover .con23__bar {
    background-color: var(--secondary);
  }

  .con23__store:hover .con23__store-name {
    color: var(--secondary);
  }
}

@keyframes con23-blink {
  0%, 100% { opacity: 1; }
  45%, 55% { opacity: .3; }
}

.con23__sticker.is-blink img {
  animation: con23-blink 1.8s ease-in-out infinite;
}

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

.con23__desc {
    width: calc(var(--px)*383);
    aspect-ratio: 383 / 53;
}

.con23__sticker {
    width: calc(var(--px)*418);
    aspect-ratio: 418 / 263;
}
/* /IMG:AUTO con23 END */

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

.con23__yaxis {
    font-size: var(--headS);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 3.86; /* OVR */
}

.con23__stores {
    font-size: var(--bodyXL);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 1.25;
}
/* /FONT:AUTO con23 END */

/* INK:AUTO con23 */
.con23__yaxis { margin-top: calc(var(--px) * 0); margin-bottom: calc(var(--px) * 0); } /* base 33.46,32.41 */
.con23__store-name { margin-top: calc(var(--px) * 0); margin-bottom: calc(var(--px) * 0); } /* base 3.5,3.5 */
/* /INK:AUTO con23 END */

@media (max-width: 599px) {
  .con23_iner {
    padding-top: 17.0667vw;
    padding-bottom: 6.4vw;
  }

  .con23__head {
    gap: 6.2667vw;
  }

  .con23__title {
    width: 60vw;
  }

  .con23__desc {
    width: 78vw;
  }

  /* 차트는 흰 둥근 카드 한 장 — 안에서 위에 회수 평균 스티커, 아래에 지점별 막대 */
  .con23__chart {
    flex-direction: column;
    align-items: stretch;
    width: 92vw;
    padding: 5.3333vw 4.2667vw 6.4vw;
    gap: 3.2vw;
    margin-top: 6.4vw;
    border-radius: 5.3333vw;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #e4dbc3;
  }

  .con23__sticker {
    position: relative;
    top: auto;
    order: -1;
    width: 46vw;
    margin-inline: auto;
  }

  .con23__yaxis {
    display: flex;
    flex-direction: row-reverse;
    align-self: flex-end;
    width: calc(100% - 24vw);
    text-align: right;
    line-height: 1.4;
  }

  .con23__tick {
    flex: none;
  }

  .con23__tick--1 {
    width: 20.063%;
  }

  .con23__tick--2 {
    width: 26.332%;
  }

  .con23__tick--3 {
    width: 27.273%;
  }

  .con23__tick--4 {
    width: 26.332%;
  }

  .con23__plot {
    width: 100%;
    margin-top: 0;
    padding: 0;
  }

  .con23__gridline {
    top: 0;
    width: 1px;
    height: 100%; /* HEIGHT: 눈금선 — 콘텐츠 없는 장식선, 막대 영역 전체 높이를 부모(plot) 100% 로 따라감 */
  }

  .con23__gridline--top {
    left: 100%;
  }

  .con23__gridline--upper {
    left: calc(24vw + (100% - 24vw) * 0.7367);
  }

  .con23__gridline--lower {
    left: calc(24vw + (100% - 24vw) * 0.4639);
  }

  .con23__gridline--bottom {
    left: calc(24vw + (100% - 24vw) * 0.2006);
  }

  .con23__gridline--base {
    left: 24vw;
  }

  .con23__stores {
    flex-direction: column;
    align-items: stretch;
    gap: 3.2vw;
  }

  .con23__store {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0;
    margin-left: 0;
  }

  .con23__store--geondae { --bar-r: 0.439; }
  .con23__store--yeoksam { --bar-r: 0.266; }
  .con23__store--wangsimni { --bar-r: 0.351; }
  .con23__store--sillim { --bar-r: 0.812; }
  .con23__store--jeongneung { --bar-r: 0.307; }
  .con23__store--hwagok { --bar-r: 0.527; }
  .con23__store--cheonho { --bar-r: 0.881; }
  .con23__store--mapo { --bar-r: 0.668; }
  .con23__store--myeongji { --bar-r: 0.987; }

  .con23__store-name {
    flex: none;
    width: 24vw;
    padding-right: 2.1333vw;
    text-align: right;
  }

  .con23__bar {
    height: 4.2667vw; /* HEIGHT: 데이터 막대 — 모바일 가로 막대의 두께, 길이(width)가 데이터 값 */
    width: calc((100% - 24vw) * var(--bar-r));
    background-color: var(--secondary);
    border-radius: 0 2.1333vw 2.1333vw 0;
  }
}


/* /merge-build:con23 */
/* merge-build:con24 */
/* con24 — (PC 스타일. 모바일 전환 시): 배너 absolute 오버레이를 세로 흐름(타이틀·본문 → 할머니 → 배지)으로 풀고 마커·대각선은 숨김 */
.con24_iner {
  padding-top: calc(var(--px) * 86);
  padding-right: calc(var(--px) * 1);
  padding-bottom: calc(var(--px) * 48);
}

.con24__trend {
  overflow: hidden;
  pointer-events: none;
}

.con24__trend-line {
  width: calc(var(--px) * 920);
  height: 2px;
  right: calc(var(--px) * -40);
  bottom: calc(var(--px) * 3.4);
  background-color: #f44228;
  transform-origin: left center;
  transform: rotate(-16.13deg);
}

.con24__copy {
  padding-bottom: calc(var(--px) * 5.54);
  left: calc(var(--px) * 875);
  top: calc(var(--px) * 145);
}

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

.con24__grandma {
  left: calc(var(--px) * 60);
  bottom: calc(var(--px) * -1);
}

.con24__badge {
  right: calc(var(--px) * 69);
  top: calc(var(--px) * -24);
}

.con24__marker--open {
  right: calc(var(--px) * 577);
  bottom: calc(var(--px) * 29);
}

.con24__marker--first-month {
  right: calc(var(--px) * 264);
  bottom: calc(var(--px) * 120);
}

.con24__marker-label--open {
  left: calc(var(--px) * 18);
  top: calc(var(--px) * -3);
}

.con24__marker-label--first-month {
  left: calc(var(--px) * -6);
  top: calc(var(--px) * -4);
}

.con24__marker-line {
  left: calc(var(--px) * 46);
  width: 2px;
  background-color: #f44228;
}

.con24__marker--open .con24__marker-line {
  top: calc(var(--px) * 34);
  bottom: calc(var(--px) * -29);
}

.con24__marker--first-month .con24__marker-line {
  top: calc(var(--px) * 54);
  bottom: calc(var(--px) * -120);
}

/* 모션 — 상태 전환(hover) · 상시 루프(is-live 부착 후). GSAP 은 바깥 래퍼, CSS 는 안쪽 img/::after 를 맡아 transform 소유권을 나눔 */
.con24__grandma img {
  transition: filter 0.3s ease-out;
}

.con24__marker-dot img {
  transition: transform 0.25s ease-out;
}

.con24__marker::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--px) * 96);
  aspect-ratio: 96 / 95;
  border: 2px solid #f44228;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .con24__grandma:hover img {
    filter: brightness(1.06);
  }

  .con24__marker:hover .con24__marker-dot img {
    transform: scale(1.12);
  }
}

.con24__marker.is-live::after {
  animation: con24-ping 2.4s ease-out infinite;
}

.con24__marker--first-month.is-live::after {
  animation-delay: 1.2s;
}

.con24__badge.is-live img {
  transform-origin: 50% 60%;
  animation: con24-sway 5s ease-in-out infinite, con24-blink 1.8s ease-in-out infinite;
}

.con24__grandma.is-live {
  transform-origin: 40% 100%;
  animation: con24-breathe 4.5s ease-in-out infinite;
}

@keyframes con24-ping {
  0% { transform: scale(0.45); opacity: 0.8; }
  70% { opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes con24-sway {
  0%, 100% { transform: rotate(-0.8deg) translateY(0); }
  50% { transform: rotate(0.8deg) translateY(-2%); }
}

@keyframes con24-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes con24-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .con24__marker.is-live::after,
  .con24__badge.is-live img,
  .con24__grandma.is-live {
    animation: none;
  }
}

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

.con24__title-img {
    width: calc(var(--px)*274);
    aspect-ratio: 274 / 113;
}

.con24__badge {
    width: calc(var(--px)*543);
    aspect-ratio: 543 / 241;
}

.con24__grandma {
    width: calc(var(--px)*758);
    aspect-ratio: 758 / 566;
}

.con24__marker-dot {
    width: calc(var(--px)*96);
    aspect-ratio: 96 / 95;
}

.con24__marker-label.con24__marker-label--open {
    width: calc(var(--px)*61);
    aspect-ratio: 61 / 24;
}

.con24__marker-label.con24__marker-label--first-month {
    width: calc(var(--px)*108);
    aspect-ratio: 108 / 26;
}
/* /IMG:AUTO con24 END */

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

.con24__desc-strong {
    font-weight: 800;
}
/* /FONT:AUTO con24 END */

/* INK:AUTO con24 */
.con24__desc { margin-top: calc(var(--px) * 24.46); margin-bottom: calc(var(--px) * -5.54); } /* base 30,0 */
.con24__desc-strong { margin-top: calc(var(--px) * -5.54); margin-bottom: calc(var(--px) * 1.54); } /* base 0,0 */
/* /INK:AUTO con24 END */

@media (max-width:599px) {
  .con24_iner {
    padding-top: 7.6667vw;
    padding-bottom: 10.6667vw;
    padding-inline: 5.3333vw;
  }

  .con24__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 10.6667vw;
  }

  .con24__plate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5.3333vw;
  }

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

  .con24__copy {
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 4.2667vw;
  }

  .con24__title-line img {
    width: 100%;
    height: auto;
  }

  .con24__title-line--1 {
    width: 23.2vw;
  }

  .con24__title-line--2 {
    width: 40.5vw;
    margin-top: 0.5211vw;
  }

  .con24__desc {
    margin-top: 5.2vw;
  }

  .con24__badge {
    position: relative;
    right: auto;
    top: auto;
    z-index: 1; /* 뒤따르는 relative 할머니(z-index:auto)보다 위로 — 뱃지가 할머니 머리 위에 겹쳐 얹히게 */
    width: 80vw;
    margin-top: 6.4vw;
    margin-bottom: -8vw;
  }

  .con24__grandma {
    position: relative;
    left: auto;
    bottom: auto;
    width: 62vw;
    margin-top: 4.2667vw;
  }
}

/* /merge-build:con24 */
/* merge-build:con25 */
/* con25 — 손으로 쓰는 CSS(구조·좌표·색) */
.con25_iner {
  padding-top: calc(var(--px)*95);
  padding-bottom: calc(var(--px)*102);
}

.con25__food {
  bottom: calc(var(--px)*1);
}

.con25__food--left {
  left: 0;
}

.con25__food--right {
  right: 0;
}

.con25__table {
  width: calc(var(--px)*685);
  margin-top: calc(var(--px)*35);
  margin-right: calc(var(--px)*4);
}

.con25__head,
.con25__total {
  display: grid;
  grid-template-columns: calc(var(--px)*270) 1fr;
  align-items: center;
}

.con25__head {
  padding-block: calc(var(--px)*31);
  background: #fff8e4;
  border: 1px solid #e4dbc3;
}

/* 자간 1.35em 의 trailing 공백이 잉크를 좌로 밀어서 padding-left 로 상쇄 */
.con25__head-item {
  padding-left: calc(var(--px)*32);
}

.con25__head-price {
  padding-left: calc(var(--px)*45);
}

.con25__rows {
  padding-top: calc(var(--px)*18.75);
  padding-inline: calc(var(--px)*35);
  padding-bottom: calc(var(--px)*13.25);
  background: #fff;
  border: 1px solid #e4dbc3;
  border-top: 0;
}

/* 좌측 라벨열 폭 = 우측 padding 으로 확보(금액열은 비어 있음 — 스탬프가 덮는다) */
.con25__row-labels {
  padding-right: calc(var(--px)*413);
}

.con25__rule {
  left: calc(var(--px)*35);
  right: calc(var(--px)*35);
  height: 1px;
  background: rgba(28, 31, 29, 0.2);
}

.con25__rule--first {
  top: calc(var(--px)*47.5);
}

.con25__rule--second {
  top: calc(var(--px)*95);
}

.con25__rule--third {
  top: calc(var(--px)*142.5);
}

.con25__rule--fourth {
  top: calc(var(--px)*190);
}

.con25__total {
  padding-block: calc(var(--px)*14);
  background: #f44228;
  transition: background-color .25s ease-out;
}

.con25__total-label {
  margin-bottom: calc(var(--px)*2);
}

.con25__total-price {
  justify-self: center;
  margin-left: calc(var(--px)*21);
  margin-bottom: calc(var(--px)*6);
}

.con25__stamp {
  right: calc(var(--px)*-58);
  bottom: calc(var(--px)*83);
}

/* 모션 — wrapper(.con25__stamp·.con25__total-price·.con25__food)의 transform/opacity 는 GSAP 소유, 아래는 자식 img 에만 */
.con25__stamp img,
.con25__total-price img {
  transition: transform .35s ease-out;
}

.con25__total-price img {
  transition-duration: .3s;
}

@media (hover: hover) {
  .con25__stamp:hover img {
    transform: scale(1.04) rotate(-1.5deg);
  }

  .con25__total:hover {
    background-color: color-mix(in srgb, #f44228 92%, white);
  }

  .con25__total:hover .con25__total-price img {
    transform: scale(1.08);
  }
}

@keyframes con25-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@keyframes con25-sway {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(0.8deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .is-live .con25__stamp img {
    animation: con25-blink 1.8s ease-in-out infinite;
  }

  .is-live .con25__food--left img {
    animation: v-zoom 4s infinite ease-in-out;
    transform-origin: 50% 100%;
  }

  .is-live .con25__food--right img {
    animation: con25-sway 6s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
}

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

.con25__food.con25__food--right {
    width: calc(var(--px)*725);
    aspect-ratio: 725 / 663;
}

.con25__title {
    width: calc(var(--px)*335);
    aspect-ratio: 335 / 54;
}

.con25__total-price {
    width: calc(var(--px)*85);
    aspect-ratio: 85 / 51;
}

.con25__stamp {
    width: calc(var(--px)*494);
    aspect-ratio: 494 / 240;
}
/* /IMG:AUTO con25 END */

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

.con25__head {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: 1.35em;
    line-height: 2.56;
    color: var(--primary);
}

.con25__row-labels {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 2.375;  /* OVR psd:2.35 */
    color: var(--primary);
}

.con25__total-label {
    font-family: var(--font-paperlogy);
    font-size: var(--subheadM);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 2.56;
    color: #ffffff;
}
/* /FONT:AUTO con25 END */

/* INK:AUTO con25 */
.con25__head-item { margin-top: calc(var(--px) * -19.72); margin-bottom: calc(var(--px) * -20.72); } /* base 0,0 */
.con25__head-price { margin-top: calc(var(--px) * -19.72); margin-bottom: calc(var(--px) * -20.72); } /* base 0,0 */
.con25__total-label { margin-top: calc(var(--px) * -19.72); margin-bottom: calc(var(--px) * -17.72); } /* base 0,2 */
.con25__row-labels { margin-top: calc(var(--px) * -14.75); margin-bottom: calc(var(--px) * -12.75); } /* base 0,0 */
/* /INK:AUTO con25 END */

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

  .con25__title {
    width: 58vw;
  }

  /* 표 → 견적서: 흰 종이에 항목이 점선으로 갈리고 취소선이 그어지며, 오른쪽에 「면제」 도장이 찍히고, 빨간 합계 띠가 0원으로 맺는다 */
  .con25__table {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88vw;
    margin: 6.4vw 0 0;
    background: #fff;
    border-radius: 5.3333vw;
  }

  .con25__chips {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 4.2667vw 6.4vw 2.1333vw;
    list-style: none;
  }

  .con25__chip {
    padding-block: 3.2vw;
    border-bottom: 1px dashed #d9ccaa;
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: color-mix(in srgb, var(--primary) 55%, transparent);
    text-decoration: line-through;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 0.2667vw;
  }

  .con25__chip:last-child {
    border-bottom: 0;
  }

  /* 도장은 종이 위 오른쪽에 걸쳐 찍힌다 — 짧은 항목(가맹비~감리비) 줄 위, 긴 마지막 항목 위에서 끝난다 */
  .con25__stamp {
    right: -2.1333vw;
    top: 13vw;
    bottom: auto;
    width: 52vw;
  }

  .con25__total {
    width: 100%;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 4.2667vw;
    padding-block: 4.2667vw;
    border-radius: 0 0 5.3333vw 5.3333vw;
  }

  .con25__total-label {
    margin: 0;
    line-height: 1.4;
  }

  .con25__total-price {
    margin: 0;
    width: 16vw;
  }
}

/* /merge-build:con25 */
/* merge-build:con26 */
/* con26 — 모바일 인계: 카드 4열(.con26__cards)→1열 column, 필(.con26__pills)은 2열 유지 */

.con26__marquee {
  border-bottom: calc(var(--px) * 15) solid #f44228;
}

.con26__marquee-belt {
  padding-top: calc(var(--px) * 27);
  padding-bottom: calc(var(--px) * 27);
  border-bottom: calc(var(--px) * 8) solid #368318;
  background-color: #312309;
  overflow: hidden;
}

.con26__marquee-track {
  flex-shrink: 0;
  margin-left: calc(var(--px) * -105);
}

.con26__marquee-item {
  flex-shrink: 0;
}

/* 배경 속 그릇 — 박스(.flowhid) 상단이 마퀴 아래 경계라 그릇 윗부분은 박스에서 잘린다. 면적 무게중심으로 회전 */
.con26__bowl {
  left: calc(var(--px) * 667);
  top: calc(var(--px) * -387);
  transform-origin: 49.1% 52.3%;
  animation: v-rotate 40s infinite linear;
}

.con26_box_iner {
  padding-top: calc(var(--px) * 277);
  padding-bottom: calc(var(--px) * 65);
}

.con26__lead {
  margin-top: calc(var(--px) * 28.46);
}

.con26__cards {
  margin-top: calc(var(--px) * 49.43);
  gap: calc(var(--px) * 7);
}

.con26__card {
  width: calc(var(--px) * 425);
  background-color: #fff;
  transition: background-color .4s ease-out;
}

.con26__card--cream {
  background-color: #f7eed3;
}

.con26__card-tab {
  align-self: flex-start;
  width: calc(var(--px) * 64);
  min-height: calc(var(--px) * 64);
  background-color: #000;
}

.con26__card-copy {
  margin-top: calc(var(--px) * 37);
  padding-left: calc(var(--px) * 65);
  padding-bottom: calc(var(--px) * 3.46);
}

.con26__card-copy--area {
  padding-top: calc(var(--px) * 1);
  padding-bottom: calc(var(--px) * 4.46);
}

.con26__card-title--area {
  margin-bottom: calc(var(--px) * -1);
}

.con26__card-title--open {
  margin-left: calc(var(--px) * -1);
}

.con26__card-title--delivery {
  margin-left: calc(var(--px) * 1);
}

.con26__card-text {
  margin-top: calc(var(--px) * 20.47);
}

.con26__card-para--intro {
  margin-top: calc(var(--px) * 20.47);
}

.con26__card-para--body {
  margin-top: calc(var(--px) * 30.93);
}

.con26__pills {
  gap: calc(var(--px) * 5) calc(var(--px) * 3);
  width: calc(var(--px) * 333);
  margin-top: calc(var(--px) * 21);
  margin-bottom: calc(var(--px) * 94);
}

.con26__pill {
  width: calc(var(--px) * 165);
  min-height: calc(var(--px) * 33);
  border-radius: calc(var(--px) * 17);
  background-color: #fffcf4;
}

.con26__pledge {
  margin-top: calc(var(--px) * 36);
}

/* 필 라벨 정수 픽셀 정렬 — flex 중앙의 .5px 반올림 보정 */
.con26__pill-label--visit {
  margin-left: calc(var(--px) * -2);
}

.con26__pill-label--data {
  margin-left: calc(var(--px) * -2);
  margin-top: calc(var(--px) * 2);
}

.con26__pill-label--sales {
  margin-left: calc(var(--px) * -2);
}

.con26__pill-label--commerce {
  margin-left: calc(var(--px) * -2);
  margin-top: calc(var(--px) * 2);
}

.con26__pill-label--zone {
  margin-left: calc(var(--px) * -2);
  margin-top: calc(var(--px) * 2);
}

.con26__pill-label--customer {
  margin-left: calc(var(--px) * -2);
  margin-top: calc(var(--px) * 2);
}

.con26__pill-label--app {
  margin-left: calc(var(--px) * -2);
  margin-top: calc(var(--px) * 2);
}

.con26__pill-label--menu {
  margin-top: calc(var(--px) * 2);
}

.con26__pill-label--exposure {
  margin-top: calc(var(--px) * 2);
}


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

.con26__bowl {
    width: calc(var(--px)*632);
    aspect-ratio: 632 / 631;
}

.con26__title {
    width: calc(var(--px)*521);
    aspect-ratio: 521 / 118;
}

.con26__card-num.con26__card-num--open {
    width: calc(var(--px)*30);
    aspect-ratio: 30 / 21;
}

.con26__card-title.con26__card-title--open {
    width: calc(var(--px)*185);
    aspect-ratio: 185 / 70;
}

.con26__pill-label.con26__pill-label--visit {
    width: calc(var(--px)*100);
    aspect-ratio: 100 / 15;
}

.con26__pill-label.con26__pill-label--data,
.con26__pill-label.con26__pill-label--customer {
    width: calc(var(--px)*100);
    aspect-ratio: 100 / 14;
}

.con26__pill-label.con26__pill-label--menu {
    width: calc(var(--px)*118);
    aspect-ratio: 118 / 14;
}

.con26__pill-label.con26__pill-label--sales {
    width: calc(var(--px)*116);
    aspect-ratio: 116 / 15;
}

.con26__card-num.con26__card-num--area,
.con26__card-num.con26__card-num--delivery {
    width: calc(var(--px)*32);
    aspect-ratio: 32 / 21;
}

.con26__card-title.con26__card-title--area {
    width: calc(var(--px)*228);
    aspect-ratio: 228 / 69;
}

.con26__pill-label.con26__pill-label--commerce {
    width: calc(var(--px)*56);
    aspect-ratio: 56 / 14;
}

.con26__pill-label.con26__pill-label--zone {
    width: calc(var(--px)*82);
    aspect-ratio: 82 / 14;
}

.con26__card-title.con26__card-title--delivery {
    width: calc(var(--px)*161);
    aspect-ratio: 161 / 70;
}

.con26__pill-label.con26__pill-label--app {
    width: calc(var(--px)*70);
    aspect-ratio: 70 / 14;
}

.con26__pill-label.con26__pill-label--ads {
    width: calc(var(--px)*116);
    aspect-ratio: 116 / 14;
}

.con26__pill-label.con26__pill-label--exposure {
    width: calc(var(--px)*88);
    aspect-ratio: 88 / 14;
}

.con26__card-num.con26__card-num--care {
    width: calc(var(--px)*33);
    aspect-ratio: 33 / 21;
}

.con26__card-title.con26__card-title--care {
    width: calc(var(--px)*220);
    aspect-ratio: 220 / 70;
}

.con26__pledge {
    width: calc(var(--px)*971);
    aspect-ratio: 971 / 33;
}
/* /IMG:AUTO con26 END */

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

.con26__lead {
    line-height: 1.44;
    text-align: center;
    color: #ffffff;
}

.con26__cards {
    line-height: 1.33;
    color: var(--primary);
}

.con26__card-strong {
    font-weight: 800;
}
/* /FONT:AUTO con26 END */

/* INK:AUTO con26 */
.con26__lead { margin-top: calc(var(--px) * 24); margin-bottom: calc(var(--px) * -4.43); } /* base 28.46,0 */
.con26__card-para--intro { margin-top: calc(var(--px) * 17); margin-bottom: calc(var(--px) * -3.47); } /* base 20.47,0 */
.con26__card-text { margin-top: calc(var(--px) * 17); margin-bottom: calc(var(--px) * -3.46); } /* base 20.47,0 */
.con26__card-para--body { margin-top: calc(var(--px) * 27.46); margin-bottom: calc(var(--px) * -3.46); } /* base 30.93,0 */
.con26__card-strong { margin-top: calc(var(--px) * -3.47); margin-bottom: calc(var(--px) * -0.53); } /* base 0,0 */
/* /INK:AUTO con26 END */

/* 신호등(ani_con26.js 가 .con26__card--on 토글) — 시안의 두 디자인: 점등 = 크림 면(01 카드) · 꺼짐 = 흰 면(02~04). 시안 정지 상태 = 01 점등.
   순환이 시작되면(.con26__cards--lamp) 꺼진 카드는 모두 흰 면 — 전환은 CSS transition. 호버 = JS 가 그 카드만 점등 */
.con26__cards--lamp .con26__card:not(.con26__card--on) {
  background-color: #fff;
}

.con26__card.con26__card--on {
  background-color: #f7eed3;
}

@media (max-width: 599px) {
  .con26__marquee {
    border-bottom: 2.6667vw solid #f44228;
  }

  .con26__marquee-belt {
    padding-top: 3.36vw;
    padding-bottom: 3.36vw;
    border-bottom: 1.6vw solid #368318;
  }

  .con26__marquee-track {
    margin-left: 0;
  }

  .con26__marquee-item {
    width: 75.84vw;
  }

  .con26__bowl {
    left: 18vw;
    top: -40.8vw;
    width: 64vw;
  }

  .con26_box_iner {
    padding-top: 34.3333vw;
    padding-bottom: 10.6667vw;
    padding-inline: 5.3333vw;
  }

  .con26__title {
    width: 84vw;
  }

  .con26__lead {
    margin-top: 5.3333vw;
    margin-bottom: 0;
  }

  .con26__cards {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4.2667vw;
    margin-top: 8.5333vw;
  }

  .con26__card {
    position: relative;
    width: 100%;
    padding-top: 11.0667vw;
    padding-bottom: 8.5333vw;
    padding-inline: 4.2667vw;
    overflow: hidden; /* 둥근 모서리에 맞춰 왼쪽 위 번호 탭 모서리도 같이 잘림 */
    border-radius: 5.3333vw;
  }

  .con26__card-tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 14.1333vw;
    min-height: 14.1333vw;
    border-radius: 0 0 4.2667vw 0;
  }

  .con26__card-copy {
    margin-top: 0;
    padding: 0;
  }

  .con26__card-title {
    margin-inline: auto;
  }

  .con26__card-num.con26__card-num--open {
    width: 8vw;
  }

  .con26__card-num.con26__card-num--area,
  .con26__card-num.con26__card-num--delivery {
    width: 8.5333vw;
  }

  .con26__card-num.con26__card-num--care {
    width: 8.8vw;
  }

  .con26__card-title.con26__card-title--open,
  .con26__card-title.con26__card-title--area,
  .con26__card-title.con26__card-title--delivery,
  .con26__card-title.con26__card-title--care {
    width: auto;
    aspect-ratio: auto;
  }

  .con26__card-title--open .con26__card-title-line--1 {
    width: 29.4667vw;
    margin-bottom: 0.9067vw;
  }

  .con26__card-title--open .con26__card-title-line--2 {
    width: 41.9333vw;
  }

  .con26__card-title--area .con26__card-title-line--1 {
    width: 14.5067vw;
    margin-bottom: 1.1333vw;
  }

  .con26__card-title--area .con26__card-title-line--2 {
    width: 51.68vw;
  }

  .con26__card-title--delivery .con26__card-title-line--1 {
    width: 14.28vw;
    margin-bottom: 1.1333vw;
  }

  .con26__card-title--delivery .con26__card-title-line--2 {
    width: 36.4933vw;
  }

  .con26__card-title--care .con26__card-title-line--1 {
    width: 49.8667vw;
    margin-bottom: 0.9067vw;
  }

  .con26__card-title--care .con26__card-title-line--2 {
    width: 29.4667vw;
  }

  .con26__card-text {
    margin-top: 4.2vw;
    margin-bottom: 0;
    line-height: 1.5;
  }

  .con26__card-para--intro {
    margin-top: 4.2vw;
    margin-bottom: 0;
    line-height: 1.5;
  }

  .con26__card-para--body {
    margin-top: 4.2667vw;
    margin-bottom: 0;
  }

  .con26__pills {
    flex-direction: column;
    justify-content: center;
    gap: 2.1333vw;
    width: 100%;
    margin-top: 4.2667vw;
    margin-bottom: 0;
  }

  .con26__pill {
    width: 100%;
    min-height: 11.2vw;
    border-radius: 50vw;
  }

  .con26__pill-label.con26__pill-label--visit,
  .con26__pill-label.con26__pill-label--data,
  .con26__pill-label.con26__pill-label--customer {
    width: 26.6667vw;
  }

  .con26__pill-label.con26__pill-label--menu {
    width: 31.4667vw;
  }

  .con26__pill-label.con26__pill-label--sales,
  .con26__pill-label.con26__pill-label--ads {
    width: 30.9333vw;
  }

  .con26__pill-label.con26__pill-label--commerce {
    width: 14.9333vw;
  }

  .con26__pill-label.con26__pill-label--zone {
    width: 21.8667vw;
  }

  .con26__pill-label.con26__pill-label--app {
    width: 18.6667vw;
  }

  .con26__pill-label.con26__pill-label--exposure {
    width: 23.4667vw;
  }

  /* 맺음말: 「책임감 = 갱상도」 등식을 윤곽 알약 + 빨간 원 + 채운 알약으로 그려 한눈에 읽히게 하고, 아래에 부연 두 줄 */
  .con26__pledge-text {
    width: 100%;
    margin-top: 8.5333vw;
    padding-top: 8.5333vw;
    border-top: 1px solid color-mix(in srgb, #fff 25%, transparent);
    font-size: var(--bodyXL);
    line-height: 1.5;
    color: #fff;
  }

  .con26__pledge-strong {
    gap: 2.1333vw;
    font-family: var(--font-paperlogy);
    font-size: var(--headM);
    font-weight: 800;
    line-height: 1;
  }

  .con26__pledge-word {
    padding: 2.1333vw 5.3333vw;
    border: 0.5333vw solid #fff;
    border-radius: 50vw;
  }

  .con26__pledge-word--fill {
    background: var(--secondary);
    border-color: var(--secondary);
  }

  .con26__pledge-eq {
    font-size: var(--headM);
    color: var(--secondary);
  }

  .con26__pledge-line {
    display: block;
    margin-top: 4.2667vw;
  }
}

/* /merge-build:con26 */
/* merge-build:con27 */
/* con27 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: .con27__steps 4열 grid → 1열 세로 스택, 화살표 칩은 카드 아래 중앙(↓)으로 옮긴다 */
.con27_iner {
  padding-top: calc(var(--px)*150);
  padding-bottom: calc(var(--px)*104);
}

.con27__steps {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--px)*289));
  column-gap: calc(var(--px)*57);
  row-gap: calc(var(--px)*32);
  margin-top: calc(var(--px)*55);
}

.con27__step {
  display: flex;
}

.con27__card {
  flex: 1 1 0;
  min-height: calc(var(--px)*187);
  overflow: hidden; /* 헤더 띠 상단 모서리를 카드 radius 로 클리핑 */
  background: #fff;
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*20);
}

.con27__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--px)*62);
  background: #322409;
  transition: background-color 0.4s ease-out;
}

/* 신호등(ani_con27.js 가 .con27__card--on 토글) — 시안의 두 디자인: 점등 = 주황 헤더 띠(시안 정지 상태 = STEP 6) · 꺼짐 = 갈색 띠.
   순환이 시작되면(.con27__steps--lamp) 꺼진 카드는 모두 갈색 — 전환은 CSS transition. 호버 = JS 가 그 카드만 점등. 모바일은 아래 @media 의 번호 원이 같은 역할 */
@media (min-width: 600px) {
  .con27__card--opening .con27__label {
    background: var(--secondary);
  }

  .con27__steps--lamp .con27__card:not(.con27__card--on) .con27__label {
    background: #322409;
  }

  .con27__steps--lamp .con27__card.con27__card--on .con27__label {
    background: var(--secondary);
  }
}

.con27__body {
  flex: 1 1 0;
  padding-bottom: calc(var(--px)*18);
}

.con27__arrow {
  /* 칩이 다음 카드 가장자리를 덮는다 — 다음 li 도 relative 라 z 로 올림(z-index:auto 는 컨텍스트 미생성이라 형제 간 경쟁) */
  z-index: 1;
  right: calc(var(--px)*-70);
  top: calc(var(--px)*89);
  width: calc(var(--px)*56);
  min-height: calc(var(--px)*56);
  background: #e4d8b6;
  border-radius: calc(var(--px)*10);
}

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

.con27__card,
.con27__card.con27__card--opening {
    font-size: var(--bodyXL);
}

.con27__label {
    font-family: var(--font-paperlogy);
    font-size: var(--bodyXL);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #fff8e4;
}

.con27__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.25;
    color: var(--primary);
}

.con27__arrow {
    font-family: var(--font-pretendard);
    font-size: var(--titleS);
    font-weight: 300;
    letter-spacing: -0.075em;
    line-height: 1;
    color: #ffffff;
}

.con27__body {
    font-family: var(--font-pretendard);
    font-weight: 400;
    color: var(--primary);
}

.con27__note {
    font-size: var(--bodyL);
    letter-spacing: -0.1091em; /* OVR */
    line-height: 1.47;
}
/* /FONT:AUTO con27 END */

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

/* INK:AUTO con27 */
.con27__note { margin-top: calc(var(--px) * -4.73); margin-bottom: calc(var(--px) * -2.72); } /* base 0,0 */
.con27__desc { margin-top: calc(var(--px) * -3.5); margin-bottom: calc(var(--px) * -3.5); } /* base 0,0 */
/* /INK:AUTO con27 END */

@media (max-width:599px) {
  .con27_iner {
    padding-top: 12.8vw;
    padding-bottom: 10.6667vw;
    padding-inline: 5.3333vw;
  }

  .con27__title {
    width: 40vw;
  }

  /* 세로 타임라인: 왼쪽 선 위에 번호 원이 꿰이고, 오른쪽 카드에 STEP 라벨 + 설명 — 켜진 카드는 번호 원도 같이 켜진다. 화살표는 모바일에서 뺀다 */
  .con27__steps {
    grid-template-columns: 1fr;
    row-gap: 3.2vw;
    margin-top: 8.5333vw;
    width: 100%;
    counter-reset: con27-step;
  }

  .con27__step {
    padding-left: 15.2vw;
    counter-increment: con27-step;
  }

  .con27__step::before {
    content: "";
    position: absolute;
    left: 4.5333vw;
    top: 0;
    bottom: -3.2vw;
    width: 0.5333vw;
    background: #d9cba5;
  }

  .con27__step:first-child::before {
    top: 50%;
  }

  .con27__step:last-child::before {
    bottom: 50%;
  }

  .con27__card {
    position: relative;
    min-height: 0;
    overflow: visible; /* 번호 원이 카드 왼쪽 밖으로 나간다 */
    border-radius: 4.2667vw;
  }

  .con27__card::before {
    content: counter(con27-step);
    position: absolute;
    left: -15.2vw;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.6vw;
    height: 9.6vw; /* HEIGHT: 정원형 번호 원 — 폭과 같은 값 */
    margin-top: -4.8vw;
    border-radius: 50vw;
    background: #322409;
    font-family: var(--font-paperlogy);
    font-size: var(--bodyL);
    font-weight: 900;
    line-height: 1;
    color: #fff8e4;
    transition: background-color 0.4s ease-out;
  }

  .con27__card--opening::before,
  .con27__steps--lamp .con27__card.con27__card--on::before {
    background: var(--secondary);
  }

  .con27__steps--lamp .con27__card:not(.con27__card--on)::before {
    background: #322409;
  }

  .con27__label {
    justify-content: flex-start;
    min-height: 0;
    padding: 3.2vw 4.2667vw 0;
    background: transparent;
    font-size: var(--bodyS);
    letter-spacing: 0.05em;
    color: var(--secondary);
  }

  .con27__body {
    align-items: flex-start;
    padding-inline: 4.2667vw;
    padding-block: 1.0667vw 3.2vw;
    text-align: left;
  }

  .con27__desc {
    font-weight: 600;
  }

  .con27__note {
    font-size: var(--bodyS);
  }
}

/* /merge-build:con27 */
/* merge-build:con28 */
/* con28 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: 검색바 100% 폭 · board 를 column(리스트 위, 지도 아래)으로 접는다 */
.con28__band {
  border-top: calc(var(--px)*8) solid #368318;
  border-bottom: calc(var(--px)*15) solid #f44228;
}

.con28_iner {
  padding-bottom: calc(var(--px)*49);
}

.con28__title {
  margin-top: calc(var(--px)*93);
}

.con28__finder {
  padding-right: calc(var(--px)*19); /* 검색바·board 열 중심이 타이틀 중심보다 좌로 9.5 */
}

.con28__search {
  z-index: 2; /* DOM 순서(검색→board)가 reading order 라 유지 · 뒤따르는 relative 지도(.con28__map)보다 위로 올려 겹침 30px 구간을 덮는다 */
  width: calc(var(--px)*558);
  min-height: calc(var(--px)*63);
  margin-top: calc(var(--px)*39);
  margin-bottom: calc(var(--px)*-30);
  padding-left: calc(var(--px)*33);
  padding-right: calc(var(--px)*26);
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: calc(var(--px)*31);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.con28__search:focus-within {
  border-color: #f44228;
  box-shadow: 0 0 0 calc(var(--px)*4) rgba(244, 66, 40, .18);
}

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

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

.con28__search-submit {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.con28__search-icon {
  display: block;
}

.con28__search-icon img {
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .con28__search-submit:hover .con28__search-icon img {
    transform: scale(1.18);
  }
}

.con28__board {
  width: calc(var(--px)*1440);
}

.con28__stores {
  flex: none;
  width: calc(var(--px)*302);
  max-height: calc(var(--px)*633.5); /* 시안 4곳 높이(4×159.08−3) — 5곳부터 리스트 안에서 스크롤, 지도는 이 높이로 고정 */
  overflow-x: hidden; /* 가로 스크롤바 금지 */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d9ccaa transparent; /* Firefox — 크롬·사파리는 아래 webkit 규칙이 굵기·모서리까지 그린다 */
}

/* 스크롤바: 트랙은 투명, 막대는 연한 갈색 알약 — 크롬은 표준 속성(scrollbar-width/color)이 있으면 ::-webkit-scrollbar 를 무시하므로 webkit 지원 브라우저에서만 표준 속성을 풀고 직접 그린다 */
@supports selector(::-webkit-scrollbar) {
  .con28__stores {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .con28__stores::-webkit-scrollbar {
    width: calc(var(--px)*10);
  }

  .con28__stores::-webkit-scrollbar-track {
    background: transparent;
  }

  .con28__stores::-webkit-scrollbar-thumb {
    background: #d9ccaa;
    background-clip: padding-box;
    border: calc(var(--px)*3) solid transparent;
    border-radius: 50vw;
  }
}

.con28__store {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: calc(var(--px)*19) calc(var(--px)*21) calc(var(--px)*20);
  background: #fff;
  border: 1px solid #c9c9c9;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 터치 기기는 호버가 눌린 채 남으므로 호버 가능한 환경에서만 */
@media (hover: hover) {
  .con28__store:hover {
    background: #fffaf0;
    box-shadow: inset calc(var(--px)*5) 0 0 #f44228;
  }

  .con28__store:hover .con28__store-more {
    background: #d93018;
  }
}

.con28__store + .con28__store {
  margin-top: -1px; /* 인접 카드 테두리 1px 공유 */
}

.con28__store-head {
  padding-left: calc(var(--px)*7);
}

.con28__store-name {
  min-width: 0;
  margin: 0;
  display: -webkit-box; /* 긴 매장명은 한 줄로 자른다 — 잉크 상쇄 margin 때문에 두 줄이 되면 주소와 겹침 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.con28__store-more {
  flex: none;
  width: calc(var(--px)*36);
  min-height: calc(var(--px)*36);
  padding: 0 0 calc(var(--px)*5.2); /* + 글리프가 폰트 메트릭상 아래로 쏠려 위로 보정(잉크 실측 2.6px 낮음) */
  background: #f44228;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease;
}

@media (hover: hover) {
  .con28__store-more:hover {
    background: #d93018;
    box-shadow: 0 0 0 calc(var(--px)*4) rgba(244, 66, 40, .25);
  }
}

.con28__store-more:focus-visible {
  background: #d93018;
  box-shadow: 0 0 0 calc(var(--px)*4) rgba(244, 66, 40, .25);
}

.con28__store-contact {
  margin: 0;
  padding-left: calc(var(--px)*7);
}

.con28__store-naver {
  align-self: flex-start;
  width: calc(var(--px)*106);
  padding-block: calc(var(--px)*5.75);
  margin-top: calc(var(--px)*18);
  background: #03cd5c;
  border-radius: calc(var(--px)*16);
  text-decoration: none;
  transition: filter .25s ease;
}

@media (hover: hover) {
  .con28__store-naver:hover {
    filter: brightness(1.08);
  }
}

.con28__map {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--px)*633.5); /* 매장이 4곳 미만이어도 시안 높이 유지 */
  background: #eeeeee;
  border: 1px solid #c9c9c9;
}

.con28__marker {
  left: calc(var(--px)*424);
  bottom: calc(var(--px)*226);
}

/* 마커 발밑 핑 링 — 상시 루프(입력 없음). 마커는 absolute/relative 라 ::after 기준이 된다 */
.con28__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--px)*70);
  aspect-ratio: 2.4;
  border: 2px solid #f44228;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 50%) scale(.3);
  animation: con28-ping 2.4s ease-out infinite;
}

@keyframes con28-ping {
  0% {
    opacity: .7;
    transform: translate(-50%, 50%) scale(.3);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 50%) scale(1.5);
  }
}

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

/* ---- 지도·상세 팝업 (js/map.js) ---- */
.con28__noshop {
  padding: calc(var(--px)*40) calc(var(--px)*21);
  background: #fff;
  border: 1px solid #c9c9c9;
  font-size: var(--bodyM);
  color: #5c5c5c;
  text-align: center;
}

.con28__noshop[hidden] {
  display: none;
}

.con28__bubble {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.con28__bubble-text {
  padding: calc(var(--px)*8) calc(var(--px)*16);
  background: #fff;
  border: 2px solid #f44228;
  border-radius: calc(var(--px)*20);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
  font-family: var(--font-pretendard);
  font-size: var(--bodyL);
  font-weight: 700;
  color: #444444;
  white-space: nowrap;
}

.con28__bubble-tail {
  width: calc(var(--px)*14);
  aspect-ratio: 1;
  margin-top: calc(var(--px)*-8);
  background: #fff;
  border-right: 2px solid #f44228;
  border-bottom: 2px solid #f44228;
  transform: rotate(45deg);
}

#con28-map img {
  pointer-events: auto; /* 전역 img{pointer-events:none} 류가 있으면 마커 클릭이 죽는다 */
}

.con28__pop-dim {
  position: fixed;
  inset: 0;
  z-index: 9999; /* 고정 헤더·퀵바 위로 — 모달은 문서 어느 레이어보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 0.35s ease; /* 열림·닫힘 — js/map.js 가 .is-open 을 붙였다 뗀다 */
}

.con28__pop-dim.is-open {
  opacity: 1;
}

.con28__pop-dim[hidden] {
  display: none;
}

.con28__pop {
  position: relative;
  width: calc(var(--px)*900);
  max-width: 92vw;
  padding: calc(var(--px)*25);
  background: #fff;
  border: 1px solid #f44228;
  border-radius: calc(var(--px)*20);
  font-family: var(--font-pretendard);
  overflow: hidden;
  transform: translateY(calc(var(--px)*30));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.con28__pop-dim.is-open .con28__pop {
  transform: none;
}

.con28__pop-close {
  position: absolute;
  top: calc(var(--px)*16);
  right: calc(var(--px)*24);
  z-index: 1;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--headL);
  line-height: 1;
  color: #888888;
  cursor: pointer;
}

.con28__pop-photo {
  flex: none;
  width: calc(var(--px)*410);
  aspect-ratio: 410 / 343;
  background: #f2f2f2;
  border-radius: calc(var(--px)*20);
  overflow: hidden;
}

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

.con28__pop-body {
  flex: 1 1 0;
  min-width: 0;
  padding-left: calc(var(--px)*34);
}

.con28__pop-name {
  margin: calc(var(--px)*50) 0 0;
  font-size: var(--bodyXL);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #131313;
}

.con28__pop-line {
  width: 100%;
  height: 1px;
  margin-top: calc(var(--px)*18);
  background: #b2b2b2;
}

.con28__pop-row {
  display: flex;
  align-items: flex-start;
  margin: calc(var(--px)*8) 0 0;
  font-size: var(--bodyL);
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: #555555;
  text-decoration: none;
}

.con28__pop-addr {
  margin-top: calc(var(--px)*19);
}

.con28__pop-label {
  flex: none;
  width: calc(var(--px)*50);
  font-weight: 600;
  color: #131313;
}

.con28__pop-val {
  flex: 1 1 0;
  min-width: 0;
}

.con28__pop-naver {
  align-self: flex-start;
  margin-top: calc(var(--px)*30);
  padding: calc(var(--px)*7) calc(var(--px)*22);
  background: #03cd5c;
  border-radius: calc(var(--px)*18);
  font-size: var(--bodyM);
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
}

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

.con28__search-icon {
    width: calc(var(--px)*20);
    aspect-ratio: 20 / 28;
}

.con28__marker {
    width: calc(var(--px)*95);
    aspect-ratio: 95 / 123;
}
/* /IMG:AUTO con28 END */

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

.con28__search-input {
    font-size: var(--subheadS);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 2.2;
    color: #444444;
}

.con28__store-name {
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 2.06;
    color: #444444;
}

.con28__store-more {
    font-size: var(--subheadL);
    font-weight: 100;
    letter-spacing: -0.025em;
    line-height: 1;
    color: #ffffff;
}

.con28__store-contact {
    font-size: var(--bodyS);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.36;
    color: #5c5c5c;
}

.con28__store-naver {
    font-size: var(--bodyXS);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.58;
    text-align: center;
    color: #ffffff;
}

.con28__store-naver-mark {
    font-weight: 900;
    line-height: 1.46;
}
/* /FONT:AUTO con28 END */

/* INK:AUTO con28 */
.con28__store-name { margin-top: calc(var(--px) * -8.98); margin-bottom: calc(var(--px) * -8.97); } /* base 0,0 */
.con28__store-contact { margin-top: calc(var(--px) * -3.52); margin-bottom: calc(var(--px) * -2.5); } /* base 0,0 */
.con28__store-naver-mark { margin-top: calc(var(--px) * -3.99); margin-bottom: calc(var(--px) * -1.01); } /* base 0,0 */
/* /INK:AUTO con28 END */

@media (max-width:599px) {
  .con28__band {
    border-top-width: 1.0667vw;
    border-bottom-width: 2.1333vw;
  }

  .con28_iner {
    padding-bottom: 8.5333vw;
  }

  .con28__title {
    width: 46vw;
    margin-top: 16vw;
  }

  .con28__finder {
    width: 100%;
    gap: 4.2667vw;
    padding-right: 5.3333vw;
    padding-left: 5.3333vw;
  }

  .con28__search {
    width: 100%;
    min-height: 12.2223vw;
    margin-top: 6.4vw;
    margin-bottom: 0;
    padding-left: 5.3333vw;
    padding-right: 2.1333vw;
    background: #fffcf4;
    border-color: #e4dbc3;
    border-radius: 50vw;
  }

  .con28__search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12.2223vw;
    min-height: 12.2223vw;
  }

  .con28__search-icon {
    width: 5.3333vw;
  }

  /* 지도 카드 → 매장 카드 목록: 같은 크림 카드·둥근 모서리로 맞추고, 매장 카드는 한 장에 이름·주소·네이버 지도가 컴팩트하게 앉는다 */
  .con28__board {
    flex-direction: column;
    gap: 3.2vw;
    width: 100%;
  }

  .con28__map {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e4dbc3;
    border-radius: 5.3333vw;
  }

  .con28__marker {
    position: relative;
    left: auto;
    bottom: auto;
    width: 13.3333vw;
  }

  .con28__marker::after {
    width: 10vw;
  }

  .con28__stores {
    width: 100%;
    max-height: 100vw;
    gap: 2.1333vw;
    padding-block: 0.5333vw; /* 스크롤 영역(overflow)이 카드 위·아래 테두리를 1px 잘라 먹지 않게 여유 */
  }

  /* 매장 목록 = 박스 하나: 둥근 크림 박스 안에 가는 선으로 나눈 한 줄짜리 행(이름 + 주소 한 줄 + 더보기). 전화·네이버 지도는 팝업이 보여준다 */
  .con28__stores {
    gap: 0;
    max-height: 72vw;
    padding-block: 0;
    background: #fffcf4;
    border: 1px solid #e4dbc3;
    border-radius: 5.3333vw;
  }

  @supports selector(::-webkit-scrollbar) {
    .con28__stores::-webkit-scrollbar {
      width: 2.6667vw;
    }

    .con28__stores::-webkit-scrollbar-track {
      margin-block: 3.2vw; /* 둥근 모서리 구간을 피해 막대가 박스 안쪽에서만 움직이게 */
    }

    .con28__stores::-webkit-scrollbar-thumb {
      border-width: 0.8vw;
    }
  }

  .con28__store {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3.2vw;
    align-items: center;
    padding: 3.2vw 4.2667vw;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e4dbc3;
    border-radius: 0;
  }

  .con28__store:last-child {
    border-bottom: 0;
  }

  .con28__store + .con28__store {
    margin-top: 0;
  }

  .con28__store-head {
    display: contents; /* 이름은 1열 1행, 더보기는 2열(두 행에 걸침)로 그리드에 직접 앉힌다 */
  }

  .con28__store-name {
    grid-column: 1;
    grid-row: 1;
  }

  .con28__store-more {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 8vw;
    min-height: 8vw;
    padding-bottom: 0.8vw;
    font-size: var(--titleXS);
    font-weight: 300;
  }

  .con28__store-contact {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    padding-left: 0;
    margin-top: 0;
  }

  .con28__store-addr {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .con28__noshop {
    padding: 8vw 4.2667vw;
  }

  .con28__bubble-text {
    padding: 1.6vw 3.2vw;
    border-radius: 10vw;
  }

  .con28__bubble-tail {
    width: 2.6667vw;
    margin-top: -1.6vw;
  }

  /* 팝업 = 아래에서 올라오는 시트: 손잡이 + 닫기 원 + 사진(없으면 접힘) + 이름 + 항목표 + 네이버 지도 알약 */
  .con28__pop-dim {
    align-items: flex-end;
  }

  .con28__pop {
    transform: translateY(100%); /* 시트가 화면 아래에서 올라온다 — 열리면 .is-open 이 none 으로 */
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    max-height: 85vh;
    padding: 3.2vw 5.3333vw 8.5333vw;
    border: 0;
    border-radius: 5.3333vw 5.3333vw 0 0;
    overflow-y: auto;
  }

  .con28__pop::before {
    content: "";
    align-self: center;
    width: 10.6667vw;
    aspect-ratio: 10 / 1;
    margin-bottom: 4.2667vw;
    background: #d9ccaa;
    border-radius: 50vw;
  }

  .con28__pop-close {
    top: 3.2vw;
    right: 3.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8vw;
    aspect-ratio: 1;
    padding: 0;
    background: #f5f1e6;
    border-radius: 50%;
    font-size: var(--bodyXL);
  }

  .con28__pop-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4.2667vw;
  }

  .con28__pop-photo.is-empty {
    display: none; /* 사진 없는 매장은 회색 빈 박스를 접는다 — 팝업 런타임 상태 토글 */
  }

  .con28__pop-body {
    padding-left: 0;
  }

  .con28__pop-name {
    margin-top: 4.2667vw;
    font-size: var(--headM);
    font-weight: 800;
  }

  .con28__pop-line {
    margin-top: 3.2vw;
    background: #e4dbc3;
  }

  .con28__pop-row {
    display: grid;
    grid-template-columns: 14vw 1fr;
    align-items: baseline;
    margin-top: 0;
    padding-block: 1.6vw;
    font-size: var(--bodyL);
    text-wrap: balance;
  }

  .con28__pop-addr {
    margin-top: 2.1333vw;
  }

  .con28__pop-label {
    width: auto;
    color: #8a7a52;
  }

  .con28__pop-naver {
    align-self: stretch;
    margin-top: 5.3333vw;
    padding: 3.2vw;
    border-radius: 50vw;
    font-size: var(--bodyL);
    font-weight: 700;
  }
}

/* /merge-build:con28 */
/* merge-build:con29 */
/* con29 — 손으로 쓰는 CSS(구조·좌표·색) */
/* 모바일: lead·panel 을 column 으로 접고 photo 는 lead 아래 흐름으로 · row 는 label 위 / 컨트롤 아래 */
.con29 {
  background: #fff;
}

.con29_iner {
  padding-top: calc(var(--px)*48);
  padding-bottom: calc(var(--px)*23);
}

.con29_box {
  position: relative;
  overflow: hidden;
  background-color: #f6f4ed;
  border-block: 1px solid #c9c9c9;
}

.con29__lead {
  flex: 1 1 0;
  min-width: 0;
  padding-top: calc(var(--px)*202);
  padding-left: calc(var(--px)*148);
}

.con29__title {
  margin: 0;
}

.con29__intro {
  margin-top: calc(var(--px)*27);
}

.con29__intro-line {
  margin: 0;
}

.con29__intro-line--02 {
  margin-top: calc(var(--px)*26); /* 원문의 빈 줄 1줄 */
}

.con29__tel {
  display: block;
  width: fit-content;
  margin-top: calc(var(--px)*60);
  margin-left: calc(var(--px)*-2);
  transition: translate .3s ease-out; /* 리프트는 translate 개별 속성 — GSAP 은 transform 만 쓴다 */
}

/* 원본의 붉은 주름만 움직이고 전화번호·아이콘은 별도 전경에 고정한다. */
.con29__tel-pill {
  position: relative;
  overflow: hidden;
  border-radius: 50vw;
  transition: filter .3s ease-out, box-shadow .3s ease-out; /* pill 의 transform 은 GSAP 소유 — transition 금지 */
}

@media (hover: hover) {
  .con29__tel:hover {
    translate: 0 calc(var(--px)*-3);
  }

  .con29__tel:hover .con29__tel-pill {
    filter: brightness(1.06);
    box-shadow: 0 0 calc(var(--px)*24) color-mix(in srgb, var(--secondary) 45%, transparent);
  }

  .con29__tel:hover .con29__tel-icon img {
    animation: con29-ring .9s ease-out 1;
  }
}

.con29__tel:focus-visible {
  translate: 0 calc(var(--px)*-3);
}

.con29__tel:focus-visible .con29__tel-pill {
  filter: brightness(1.06);
  box-shadow: 0 0 calc(var(--px)*24) color-mix(in srgb, var(--secondary) 45%, transparent);
}

.con29__tel:focus-visible .con29__tel-icon img {
  animation: con29-ring .9s ease-out 1;
}

/* 등장 끝난 뒤 파문 — GSAP 이 .con29__tel--ringing 을 붙인다 */
.con29__tel--ringing::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--secondary) 60%, transparent);
  border-radius: 50vw;
  pointer-events: none;
  animation: con29-ring-pulse 2.8s ease-out infinite;
}

@keyframes con29-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-18deg); }
  30% { transform: rotate(16deg); }
  45% { transform: rotate(-12deg); }
  60% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
  90% { transform: rotate(4deg); }
}

@keyframes con29-ring-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.12, 1.45); opacity: 0; }
}

.con29__tel-curtain {
  pointer-events: none;
  transform-origin: 50% 50%;
  /* 낮고 긴 알약의 투명 모서리가 흔들림 중 안쪽으로 들어오지 않게 확대한다. */
  transform: scale(1.24, 1.36);
  animation: con29-curtain-billow 12s cubic-bezier(.45, 0, .55, 1) infinite paused;
}

.con29__tel-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 8%, rgb(255 255 255 / .02) 24%, rgb(255 255 255 / .09) 38%, rgb(0 0 0 / .05) 53%, transparent 68%, rgb(255 255 255 / .04) 82%, transparent 96%);
  transform-origin: 50% 50%;
  animation: con29-curtain-fold 17s cubic-bezier(.45, 0, .55, 1) infinite paused;
}

.con29__tel--flowing {
  & .con29__tel-curtain,
  & .con29__tel-pill::after {
    animation-play-state: running;
  }
}

@keyframes con29-curtain-billow {
  0%, 100% { transform: translate(-1%, -.5%) scale(1.24, 1.36) skewX(-.6deg); }
  50% { transform: translate(1%, .5%) scale(1.26, 1.34) skewX(.6deg); }
}

@keyframes con29-curtain-fold {
  0%, 100% { transform: translate(-3%, -1%) scale(1.16) skewX(-1.5deg); }
  50% { transform: translate(3%, 1%) scale(1.2) skewX(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .con29__tel-curtain,
  .con29__tel-pill::after,
  .con29__tel--ringing::after,
  .con29__tel-icon img,
  .con29__submit--breath {
    animation: none !important;
  }
}

.con29__tel-content {
  inset: 0;
  gap: calc(var(--px)*12);
  padding-left: calc(var(--px)*38);
}

.con29__tel-icon,
.con29__tel-number {
  flex: none;
}

.con29__photo {
  right: calc(var(--px)*430);
  bottom: calc(var(--px)*-1);
}

.con29__panel {
  flex: none;
  width: calc(var(--px)*616);
  margin-right: calc(var(--px)*97);
  padding: calc(var(--px)*57) calc(var(--px)*71) calc(var(--px)*50) calc(var(--px)*75);
  background: #fff;
  border-inline: 1px solid #c9c9c9; /* 패널 상하 변은 섹션 상하 선이 대신한다 */
}

.con29__form :is(input, select, textarea, button) {
  font-family: inherit; /* 그누보드 default.css 가 입력류에 맑은고딕을 강제 */
}

.con29__row {
  align-items: center;
  min-height: calc(var(--px)*66);
  border-bottom: 1px solid rgba(50, 36, 9, 0.2);
  transition: border-bottom-color .25s ease-out;
}

.con29__row:focus-within {
  border-bottom-color: var(--primary);
}

.con29__row--select {
  align-items: center;
  min-height: calc(var(--px)*67);
}

.con29__row--memo {
  align-items: flex-start;
  min-height: calc(var(--px)*109);
}

.con29__label {
  flex: none;
  width: calc(var(--px)*199);
  margin: 0;
  padding-left: calc(var(--px)*4);
  padding-top: calc(var(--px)*3);
}

.con29__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0 0 calc(var(--px)*20);
  background: transparent;
  border: 0;
  outline: 0;
}

.con29__input::placeholder {
  color: inherit;
  opacity: 1;
  transition: opacity .25s ease-out;
}

.con29__input:focus::placeholder {
  opacity: .35;
}

.con29__select {
  position: relative;
  flex: none;
  width: calc(var(--px)*256);
  min-height: calc(var(--px)*37);
  padding-right: calc(var(--px)*23);
  background: #f8f3eb;
  border-radius: calc(var(--px)*19);
  transition: background-color .25s ease-out; /* select 의 transform 은 GSAP 소유 */
}

@media (hover: hover) {
  .con29__select:hover {
    background-color: #f1e8d8;
  }
}

.con29__select-input {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--px)*37);
  padding: 0 0 0 calc(var(--px)*20);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  cursor: pointer;
}

.con29__select-arrow {
  flex: none;
  transition: transform 0.25s;
}

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

/* 커스텀 드롭다운 (js/script.js) — 네이티브 select 는 값 전달용으로만 남기고 숨긴다 */
.con29__select--custom .con29__select-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.con29__dd-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--px)*37);
  padding: 0 0 0 calc(var(--px)*20);
  font: inherit;
  letter-spacing: inherit;
  color: #7f7f7f;
  text-align: left;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.con29__select--picked .con29__dd-btn {
  color: var(--primary);
}

.con29__select--open {
  z-index: 5; /* 같은 폼 안 아래 행(position 없음)보다 목록이 위에 오도록 — 스택 컨텍스트는 만들지 않는다 */
}

.con29__select--open .con29__select-arrow {
  transform: rotate(180deg);
}

.con29__dd-list {
  position: absolute;
  top: calc(100% + var(--px)*8);
  left: 0;
  right: 0;
  margin: 0;
  padding: calc(var(--px)*6);
  list-style: none;
  background: #fff;
  border: 1px solid #e4dbc3;
  border-radius: calc(var(--px)*19);
  box-shadow: 0 calc(var(--px)*10) calc(var(--px)*30) color-mix(in srgb, var(--primary) 18%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--px)*-6));
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.con29__select--open .con29__dd-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.con29__dd-item {
  padding: calc(var(--px)*8) calc(var(--px)*14);
  border-radius: calc(var(--px)*14);
  color: #7f7f7f;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.con29__dd-item:hover,
.con29__dd-item--active {
  color: var(--primary);
  background: #f8f3eb;
}

.con29__dd-item[aria-selected="true"] {
  font-weight: 800;
  color: var(--primary);
}

.con29__memo {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--px)*108);
  padding: calc(var(--px)*20) 0 0 calc(var(--px)*20);
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
}

.con29__agree {
  min-height: calc(var(--px)*46);
  padding-inline: calc(var(--px)*5) calc(var(--px)*6);
}

.con29__agree-label {
  gap: calc(var(--px)*8);
  margin: 0;
  cursor: pointer;
}

.con29__agree-check {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: calc(var(--px)*22);
  height: calc(var(--px)*22); /* HEIGHT: 정사각 체크박스 — 시안(11)보다 키운 값, aspect-ratio 로 못 대체(appearance:none 입력) */
  margin: 0;
  background: #fff;
  border: 1px solid #322409;
  border-radius: calc(var(--px)*4);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.con29__agree-check:checked {
  background: #368318;
  border-color: #368318;
}

/* 체크 표시 — border 2변을 -45도 돌려 만든 체크. 항상 존재하고 opacity·scale 로 켜진다 */
.con29__agree-check::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 52%;
  height: 28%;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  opacity: 0;
  transform: translate(-50%, -65%) rotate(-45deg) scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.con29__agree-check:checked::after {
  opacity: 1;
  transform: translate(-50%, -65%) rotate(-45deg) scale(1);
}

.con29__policy {
  text-decoration: underline;
  transition: opacity .2s ease-out;
}

@media (hover: hover) {
  .con29__policy:hover {
    opacity: .6;
    text-underline-offset: .2em;
  }
}

.con29__policy:focus-visible {
  opacity: .6;
  text-underline-offset: .2em;
}

.con29__submit {
  position: relative;
  overflow: hidden;
  width: calc(var(--px)*465);
  min-height: calc(var(--px)*75);
  margin-left: calc(var(--px)*1);
  padding: 0;
  background: #368318;
  border: 0;
  cursor: pointer;
  /* 리프트·눌림은 translate/scale 개별 속성 — GSAP 이 쓰는 transform·opacity 는 transition 에서 뺀다 */
  transition: translate .3s ease-out, scale .1s ease-out, filter .3s ease-out;
}

.con29__submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent);
  pointer-events: none;
  transform: translateX(-220%) skewX(-18deg);
  transition: transform 0s;
}

@media (hover: hover) {
  .con29__submit:hover {
    translate: 0 calc(var(--px)*-3);
    filter: brightness(1.06) drop-shadow(0 calc(var(--px)*6) calc(var(--px)*10) rgb(0 0 0 / .18));
  }

  .con29__submit:hover::before {
    transform: translateX(320%) skewX(-18deg);
    transition: transform .7s ease;
  }
}

.con29__submit:focus-visible {
  translate: 0 calc(var(--px)*-3);
  filter: brightness(1.06) drop-shadow(0 calc(var(--px)*6) calc(var(--px)*10) rgb(0 0 0 / .18));
}

.con29__submit:focus-visible::before {
  transform: translateX(320%) skewX(-18deg);
  transition: transform .7s ease;
}

.con29__submit:active {
  scale: .985;
}

/* 등장 끝난 뒤 호흡 — box-shadow 만 */
.con29__submit--breath {
  animation: con29-submit-breath 3.2s ease-in-out infinite;
}

.con29__form:focus-within .con29__submit--breath {
  animation-play-state: paused;
}

@keyframes con29-submit-breath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #368318 45%, transparent); }
  50% { box-shadow: 0 0 calc(var(--px)*24) color-mix(in srgb, #368318 45%, transparent); }
}

.con29__submit-label {
  display: block;
}

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

.con29__tel-pill {
    width: calc(var(--px)*342);
    aspect-ratio: 342 / 73;
}

.con29__tel-icon {
    width: calc(var(--px)*31);
    aspect-ratio: 31 / 37;
}

.con29__tel-number {
    width: calc(var(--px)*204);
    aspect-ratio: 204 / 38;
}

.con29__photo {
    width: calc(var(--px)*870);
    aspect-ratio: 870 / 726;
}

.con29__submit-label {
    width: calc(var(--px)*164);
    aspect-ratio: 164 / 26;
}
/* /IMG:AUTO con29 END */

/* FONT:AUTO con29 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.con29__intro {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.44;
    color: var(--primary);
}

.con29__label {
    font-family: var(--font-paperlogy);
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 3.44; /* OVR */
    text-align: justify;
    color: var(--primary);
}

.con29__input {
    font-family: var(--font-pretendard);
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 2.29;
    color: #7f7f7f;
}

.con29__select {
    font-family: var(--font-pretendard);
}

.con29__select-input {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 2.29;
    color: #7f7f7f;
}

.con29__select-arrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.78;
    color: var(--primary);
}

.con29__agree {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    letter-spacing: -0.05em;
    color: var(--primary);
}

.con29__agree-text {
    font-weight: 500;
    line-height: 1.32;
}

.con29__policy {
    font-weight: 800;
    line-height: 1.37;
    letter-spacing: 0.0105em; /* OVR */
}
/* /FONT:AUTO con29 END */

/* INK:AUTO con29 */
.con29__intro-line.con29__intro-line--02 { margin-top: calc(var(--px) * 21.54); margin-bottom: calc(var(--px) * -4.45); } /* base 26,0 */
.con29__intro-line.con29__intro-line--01 { margin-top: calc(var(--px) * -4.46); margin-bottom: calc(var(--px) * -4.43); } /* base 0,0 */
.con29__policy { margin-top: calc(var(--px) * -3.46); margin-bottom: calc(var(--px) * -3.45); } /* base 0,0 */
.con29__agree-text { margin-top: calc(var(--px) * -3.06); margin-bottom: calc(var(--px) * -3.05); } /* base 0,0 */
/* /INK:AUTO con29 END */

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

  .con29_box_iner {
    flex-direction: column;
    padding-bottom: 10.6667vw;
  }

  .con29__lead {
    flex: none;
    align-items: center;
    padding: 15.6667vw 5.3333vw 5.5333vw;
  }

  .con29__title {
    width: auto;
    aspect-ratio: auto;
  }

  .con29__title-line {
    display: block;
    width: 70vw;
  }

  .con29__title-line--2 {
    width: 51.7647vw;
    margin-top: 1.3725vw;
  }

  .con29__intro {
    margin-top: 4.2667vw;
    text-wrap: balance;
  }

  .con29__intro-line.con29__intro-line--02 {
    margin-top: 4.2667vw;
  }

  .con29__tel {
    margin-top: 6.5333vw;
    margin-left: 0;
  }

  .con29__tel-pill {
    width: 66vw;
  }

  .con29__tel-content {
    gap: 2.1333vw;
    padding-left: 8.5333vw;
  }

  .con29__tel-icon {
    width: 6vw;
  }

  .con29__tel-number {
    width: 39.4vw;
  }

  .con29__photo {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: center;
    width: 70vw;
    margin-bottom: -15.6667vw;
  }

  /* 폼 = 둥근 카드: 전골 사진 아랫단이 카드 뒤로 들어가 카드 윗선에서 솟아 보이고(DOM 순서상 카드가 위), 제출 버튼은 알약으로 맞춘다 */
  .con29__panel {
    width: auto;
    margin-inline: 5.3333vw;
    padding: 6.4vw 4.2667vw;
    background: #fff;
    border: 1px solid #e4dbc3;
    border-radius: 5.3333vw;
    box-shadow: 0 2.1333vw 6.4vw rgba(50, 36, 9, .08);
  }

  .con29__row {
    flex-direction: column;
    align-items: stretch;
    gap: 2.1333vw;
    min-height: 0;
    padding-block: 2.1333vw;
    border-bottom: 0;
  }

  .con29__label {
    width: auto;
    padding: 0;
    line-height: 1.4;
    text-align: left;
  }

  .con29__input {
    flex: none;
    width: 100%;
    min-height: 12vw;
    padding-left: 4.2667vw;
    font-size: var(--bodyXL);
    line-height: 1.4;
    background: #f8f3eb;
    border-radius: 50vw;
  }

  .con29__select {
    width: 100%;
    min-height: 12vw;
    padding-right: 4.2667vw;
    font-size: var(--bodyXL);
    line-height: 1.4;
    border-radius: 50vw;
  }

  .con29__select-input {
    min-height: 12vw;
    padding-left: 4.2667vw;
    font-size: var(--bodyXL);
    line-height: 1.4;
  }

  .con29__dd-btn {
    min-height: 12vw;
    padding-left: 4.2667vw;
  }

  .con29__dd-list {
    top: calc(100% + 1.6vw);
    padding: 1.6vw;
    border-radius: 4.2667vw;
  }

  .con29__dd-item {
    display: flex;
    align-items: center;
    min-height: 12vw;
    padding-inline: 3.2vw;
    border-radius: 3.2vw;
  }

  .con29__memo {
    flex: none;
    width: 100%;
    min-height: 26.6667vw;
    padding: 3.2vw 4.2667vw;
    font-size: var(--bodyXL);
    line-height: 1.4;
    background: #f8f3eb;
    border-radius: 4.2667vw;
  }

  .con29__agree {
    min-height: 12vw;
    padding-inline: 0;
  }

  .con29__agree-label {
    gap: 2.1333vw;
    min-height: 12vw;
  }

  .con29__agree-check {
    width: 6.4vw;
    height: 6.4vw; /* HEIGHT: 정사각 체크박스 — PC 와 같은 사유(appearance:none 입력, aspect-ratio 로 못 대체) */
    border-radius: 1.0667vw;
  }

  .con29__policy {
    display: flex;
    align-items: center;
    min-height: 12vw;
  }

  .con29__submit {
    width: 100%;
    min-height: 14.9333vw;
    margin-left: 0;
    border-radius: 50vw;
  }

  .con29__submit-label {
    width: 30vw;
  }

  @keyframes con29-submit-breath {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #368318 45%, transparent); }
    50% { box-shadow: 0 0 6.4vw color-mix(in srgb, #368318 45%, transparent); }
  }
}


/* /merge-build:con29 */
/* merge-build:hero */
/* hero — 모바일 접기 의도: 접시 2장은 타이틀 위·아래로 재배치, 하단 카피는 2줄 column, 위로가기는 우하단 유지 */
.hero {
    background-color: #f9f1e2;
}

.hero__since {
    top: 0;
    right: calc(var(--px) * 278);
}

.hero__plate--left {
    left: calc(var(--px) * -221);
    bottom: calc(var(--px) * 37);
}

.hero__plate--right {
    right: calc(var(--px) * -229);
    bottom: calc(var(--px) * -57);
}

/* 접시 회전 루프는 래퍼가 아니라 안쪽 img 가 소유 — 래퍼 transform 은 GSAP(입장·패럴럭스·마우스) 전담이라 CSS animation 과 충돌하지 않게 분리 */
.hero__plate--left > img {
    transform-origin: 52% 52%; /* 접시 면적 무게중심 — 박스 중심이 아니라 접시 중심으로 돌린다 */
    animation: v-rotate 40s infinite linear;
}

.hero__plate--right > img {
    transform-origin: 51% 48%;
    animation: v-rotate 40s infinite linear reverse;
}

.hero_iner {
    padding-top: calc(var(--px) * 201);
}

.hero__stamp--second {
    margin-left: calc(var(--px) * -19);
}

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

.hero__subtitle {
    margin-top: calc(var(--px) * 40);
}

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

.hero__torn {
    margin-top: calc(var(--px) * 107.1);
}

.hero__tape.v-peel {
    position: absolute; /* .v-peel 의 position:relative 가 .absolute 유틸을 덮지 않게 — 기존 정지 상태 유지 */
}

.hero__tape {
    top: 0;
    left: calc(var(--px) * 828);
}

.hero__claim {
    left: calc(var(--px) * 497);
    bottom: calc(var(--px) * 46);
    gap: calc(var(--px) * 17);
}

/* 위로가기 — 화면 오른쪽 아래 fixed(퀵바 바로 위). 한 화면 반쯤 내려가면 .is-show 로 나타난다(js/footer.js, 퀵바 높이는 --quick-h) */
.hero__top {
    position: fixed;
    right: calc(var(--px) * 30);
    bottom: calc(var(--quick-h, calc(var(--px) * 76)) + var(--px) * 24);
    z-index: 1110; /* 퀵바(1111) 바로 아래 — 챗봇·모달보다 낮다 */
    width: calc(var(--px) * 119);
    aspect-ratio: 1 / 1; /* 정원 — 세로 padding 으로 높이를 만들면 찌그러진다 */
    align-items: center;
    border-radius: 50%;
    /* 호버하면 빨강이 아래에서 위로 차오른다(--quick-fill 0→1) — 스크롤 진행도와 무관. 모바일은 색 변경 없음(모바일 블록에서 단색) */
    --quick-fill: 0;
    background: linear-gradient(0deg, #f44228 calc(100% * var(--quick-fill)), transparent calc(100% * var(--quick-fill))), #322409;
    box-shadow: 0 0 0 5px #fffaf0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--px) * 12));
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease-out, --quick-fill 0.4s ease-out;
}

.hero__top.is-show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (hover: hover) {
    .hero__top.is-show:hover {
        --quick-fill: 1;
        transform: translateY(calc(var(--px) * -6));
        box-shadow: 0 0 0 8px #fffaf0;
    }
}

.hero__top.is-show:focus-visible {
    transform: translateY(calc(var(--px) * -6));
    box-shadow: 0 0 0 8px #fffaf0;
}

/* 도장 상시 루프 — 입장 타임라인이 끝나 .hero 에 .is-idle 이 붙은 뒤에만 돈다. 입장 scale 은 래퍼(.hero__stamp), 루프는 안쪽 img 라 transform 이 안 부딪힌다 */
@keyframes hero-stamp-wobble {
    from { transform: rotate(-3deg) scale(1); }
    to { transform: rotate(3deg) scale(1.03); }
}

.hero.is-idle .hero__stamp img {
    animation: hero-stamp-wobble 4s ease-in-out infinite alternate;
}

.hero.is-idle .hero__stamp--second img {
    animation-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
    .hero__top {
        transition: none;
    }

    .hero.is-idle .hero__stamp img {
        animation: none;
    }
}

/* 첫 화면 깜빡임 방지 — ani_hero.js 가 from() 시작값을 인라인에 입히고 .is-ani-ready 를 붙이기 전까지 입장 대상은 처음부터 숨겨 둔다.
   JS 가 3초 안에 못 켜지면(로드 실패) hero-unhide 가 강제로 보여준다. reduced-motion 이면 ani_hero.js 가 아예 안 돌므로 숨기지 않는다 */
@keyframes hero-unhide {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .hero:not(.is-ani-ready) :is(.hero__since, .hero__plate, .hero__stamp, .hero__title, .hero__subtitle > .pc, .hero__subtitle-line--1, .hero__subtitle-line--2, .hero__desc, .hero__desc-em, .hero__torn, .hero__tape, .hero__claim-sales, .hero__claim-proof) {
        opacity: 0;
        animation: hero-unhide 0.01s linear 3s forwards;
    }
}

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

.hero__plate.hero__plate--left {
    width: calc(var(--px)*769);
    aspect-ratio: 769 / 724;
}

.hero__plate.hero__plate--right {
    width: calc(var(--px)*806);
    aspect-ratio: 806 / 848;
}

.hero__stamp.hero__stamp--first,
.hero__stamp.hero__stamp--second {
    width: calc(var(--px)*98);
    aspect-ratio: 98 / 97;
}

.hero__title {
    width: calc(var(--px)*535);
    aspect-ratio: 535 / 113;
}

.hero__subtitle {
    width: calc(var(--px)*589);
    aspect-ratio: 589 / 27;
}

.hero__torn {
    width: calc(var(--px)*1905);
    aspect-ratio: 1905 / 221;
}

.hero__tape {
    width: calc(var(--px)*233);
    aspect-ratio: 233 / 125;
}

.hero__claim-sales {
    width: calc(var(--px)*492);
    aspect-ratio: 492 / 28;
}

.hero__claim-proof {
    width: calc(var(--px)*354);
    aspect-ratio: 354 / 27;
}

.hero__top-label {
    width: calc(var(--px)*93);
    aspect-ratio: 93 / 23;
}
/* /IMG:AUTO hero END */

/* FONT:AUTO hero */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.hero__desc {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.075em;
    line-height: 1.36;
    text-align: center;
    color: #2b1e04;
}

.hero__desc-em {
    font-weight: 800;
}
/* /FONT:AUTO hero END */

/* INK:AUTO hero */
.hero__desc-em { margin-top: calc(var(--px) * -4.96); margin-bottom: calc(var(--px) * 1.96); } /* base 0,0 */
.hero__desc { margin-top: calc(var(--px) * 25.04); margin-bottom: calc(var(--px) * -1.93); } /* base 30,0 */
/* /INK:AUTO hero END */

@media (max-width: 599px) {
    .hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        padding-top: 0;
    }

    .hero_iner {
        display: contents;
    }

    .hero__since {
        position: relative;
        grid-column: 1 / -1;
        top: auto;
        right: auto;
        width: 80vw;
    }

    .hero__stamps,
    .hero__title,
    .hero__subtitle {
        position: relative;
        grid-column: 1 / -1;
    }

    .hero__stamp.hero__stamp--first,
    .hero__stamp.hero__stamp--second {
        width: 12vw;
    }

    .hero__stamp--second {
        margin-left: -2.1333vw;
    }

    .hero__title {
        width: 58vw;
        margin-top: 3.2vw;
    }

    .hero__subtitle {
        width: 86vw;
        margin-top: 6.4vw;
    }

    .hero__subtitle-line img {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero__subtitle-line--1,
    .hero__subtitle-line--2 {
        width: 54.7vw;
    }

    .hero__subtitle-line--2 {
        margin-top: 1.8vw;
    }

    .hero__desc {
        position: relative;
        grid-column: 1 / -1;
        width: 88vw; /* TEXT-WIDTH: 승인된 모바일 목업의 본문 폭(88vw) — keep-all balance 로 개행 */
        margin-top: 4.2667vw;
        margin-bottom: 4.2667vw;
        line-height: 1.5;
        letter-spacing: -0.04em;
        word-break: keep-all;
        text-wrap: balance;
    }

    .hero__desc-em {
        display: block;
        margin-top: 3.2vw;
    }

    .hero__plate.hero__plate--left {
        position: relative;
        order: 1;
        left: auto;
        bottom: auto;
        width: 46vw;
        margin: 1.0667vw;
    }

    .hero__plate.hero__plate--right {
        position: relative;
        order: 1;
        right: auto;
        bottom: auto;
        width: 46vw;
        margin: 1.0667vw;
    }

    .hero__torn {
        grid-column: 1 / -1;
        grid-row: 7;
        width: 100%;
        margin-top: -35.2vw; /* 접시 절반 가까이가 찢긴 종이 밑으로 들어가 잘려 보이게 */
        z-index: 2; /* 접시(relative, z-index auto) 위로 올림 */
        padding-top: 22.3333vw;
        padding-bottom: 10.8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__torn > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(1.06); /* 종이 안쪽 회색 음영(최저 242)을 흰색으로. 찢긴 윤곽(알파)은 그대로 */
    }

    .hero__claim {
        position: relative;
        flex-direction: column;
        align-items: center;
        left: auto;
        bottom: auto;
        gap: 3.2vw;
    }

    .hero__claim-sales {
        width: 88vw;
    }

    .hero__claim-proof {
        width: 68vw;
    }

    .hero__top {
        right: 4vw;
        bottom: calc(var(--quick-h, 25vw) + 3.2vw);
        width: 13vw;
        padding: 0;
        background: #322409; /* 모바일은 색 변경 없음 — 채움 그라데이션 제거 */
        box-shadow: 0 0 0 2px #fffaf0;
    }

    .hero__top::before {
        content: "";
        width: 3.8vw;
        aspect-ratio: 1 / 1;
        margin: 4.6vw 0;
        border-top: 2px solid #fffaf0;
        border-right: 2px solid #fffaf0;
        transform: translateY(1vw) rotate(-45deg); /* 위·오른쪽 선만 그려 잉크가 박스 위쪽 절반(대각선/2)에 몰린다 → 내려서 중앙 */
    }

    .hero__top.is-show:hover,
    .hero__top.is-show:focus-visible {
        transform: translateY(-1vw);
        box-shadow: 0 0 0 4px #fffaf0;
    }
}


/* /merge-build:hero */