@charset "UTF-8";

/* foodtruck — 99_temp 이식본 (reset.css + common.css 의존분을 이 블럭 안으로 접었다) */

:root {
    /* JS 미실행 대비 폴백 — script.js 가 인라인 style 로 덮는다 */
    --px: calc(100vw / 1905);
    --header-h: 6.4vw;

    --font-pretendard: "Pretendard Variable", sans-serif;
    --font-jalnan: "JalnanGothic", sans-serif;

    --displayXL: calc(var(--px) * 143);
    --displayL: calc(var(--px) * 129);
    --displayM: calc(var(--px) * 85);
    --displayS: calc(var(--px) * 65);

    --titleXL: calc(var(--px) * 60);
    --titleL: calc(var(--px) * 50);
    --titleM: calc(var(--px) * 45);
    --titleS: calc(var(--px) * 40);
    --titleXS: calc(var(--px) * 35);

    --headL: calc(var(--px) * 30);
    --headM: calc(var(--px) * 26);
    --headS: calc(var(--px) * 22);

    --subheadL: calc(var(--px) * 28);
    --subheadM: calc(var(--px) * 24);
    --subheadS: calc(var(--px) * 15);

    --bodyXL: calc(var(--px) * 20);
    --bodyL: calc(var(--px) * 18);
    --bodyM: calc(var(--px) * 16);
    --bodyS: calc(var(--px) * 14);
    --bodyXS: calc(var(--px) * 13);
}

@media (max-width: 599px) {
    :root {
        --header-h: 29.4vw;

        /* --px 가 0.2 수준으로 무너지는 구간이라 vw 직접값이 정본 */
        --displayXL: 28.8vw;
        --displayL: 16.8vw;
        --displayM: 22.6667vw;
        --displayS: 17.3333vw;

        --titleXL: 8vw;
        --titleL: 7.4667vw;
        --titleM: 6.9333vw;
        --titleS: 6.6667vw;
        --titleXS: 6.4vw;

        --headL: 4.8vw;
        --headM: 4.8vw;
        --headS: 4.2667vw;

        --subheadL: 4.2667vw;
        --subheadM: 4vw;
        --subheadS: 3.7333vw;

        --bodyXL: 4.2667vw;
        --bodyL: 3.7333vw;
        --bodyM: 3.7333vw;
        --bodyS: 3.4667vw;
        --bodyXS: 3.4667vw;
    }
}

/* ── 리셋 — header/style.css 의 `*{box-sizing:unset}` 을 이 두 섹션 안에서만 되돌린다 ── */
.hero,
.con01,
.hero *,
.con01 *,
.hero *::before,
.con01 *::before,
.hero *::after,
.con01 *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.hero,
.con01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* 원본 common.css 의 body 기저값 — 사이트 default.css 의 12px/normal 을 상속하면 안 된다 */
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    line-height: 1.5;
    letter-spacing: -0.04em;
    word-break: keep-all;
}

@media (max-width: 599px) {
    .hero,
    .con01 {
        font-size: 3.8647vw;
    }
}

:where(.hero, .con01) img {
    display: block;
    width: 100%;
}

:where(.hero, .con01) p {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ★ 스코프는 :where() — .hero 로 쓰면 (0,1,1) 이 되어 섹션의 단일 클래스 규칙을 이겨버린다 */
:where(.hero, .con01) :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    word-break: keep-all;
    overflow-wrap: break-word;
}

:where(.hero, .con01) :is(strong, em, i, cite, var, dfn, address, small, mark) {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    background: none;
    color: inherit;
}

:where(.hero, .con01) :is(button, input, select, textarea) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.hero button,
.con01 button {
    cursor: pointer;
}

/* ── 구조 유틸 (common.css 발췌) ── */
/* ★ 스코프는 :where() — 원본은 단일 클래스(0,1,0) 라 섹션 규칙과 동점이고 뒤에 오는 섹션이 이긴다 */
:where(.hero, .con01) .front {
    position: relative;
    z-index: 10;
    width: 100%;
}

:where(.hero, .con01) .absol {
    position: absolute;
}

:where(.hero, .con01) .rltv,
:where(.hero, .con01) .relative {
    position: relative;
}

:where(.hero, .con01) .flex {
    display: flex;
}

:where(.hero, .con01) .flex-col {
    flex-direction: column;
}

:where(.hero, .con01) .items-start {
    align-items: flex-start;
}

:where(.hero, .con01) .items-center {
    align-items: center;
}

:where(.hero, .con01) .justify-start {
    justify-content: flex-start;
}

:where(.hero, .con01) .justify-center {
    justify-content: center;
}

:where(.hero, .con01) .justify-between {
    justify-content: space-between;
}

:where(.hero, .con01) .pc-inline {
    display: inline !important;
}

@media (max-width: 599px) {
    :where(.hero, .con01) .pc-inline {
        display: none !important;
    }
}

/* content.skin.php 의 co_content 플레이스홀더(#ctt) 래퍼 — 기존 7개 페이지 블록과 동일하게 숨긴다 */
.container {
    display: none;
}

/* ══════════════════ hero ══════════════════ */
.hero {
    /* .header_1 은 position:absolute 라 자리를 안 먹는다 — 그만큼 밀어야 하늘 상단이 안 가린다 */
    padding-top: var(--header-h);
    background: linear-gradient(to bottom, #ffffff calc(var(--px) * 1112), #edf8ff calc(var(--px) * 1640));
}

.hero__sky {
    width: 100%;
    flex-direction: row;
    padding: calc(var(--px) * 124) 0 calc(var(--px) * 65) calc(var(--px) * 637);
    background: linear-gradient(to bottom, #4aaff5 calc(var(--px) * 355), transparent calc(var(--px) * 355));
}

.hero__rain {
    left: calc(var(--px) * 41);
    top: calc(var(--px) * 44);
}

.hero__cloud {
    left: calc(var(--px) * -124);
    top: calc(var(--px) * 239);
}

.hero__bubble {
    left: calc(var(--px) * 460);
    top: calc(var(--px) * 58);
}

.hero__lead {
    left: calc(var(--px) * 831);
    top: calc(var(--px) * 43);
}

.hero__wordmark {
    right: calc(var(--px) * 273);
    top: calc(var(--px) * 74);
}

.hero__mascot {
    left: calc(var(--px) * 384);
    bottom: calc(var(--px) * 70);
}

.hero__cups {
    left: calc(var(--px) * 28);
    top: calc(var(--px) * 192);
}

.hero__intro {
    width: 100%;
    margin-top: calc(var(--px) * 41);
}

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

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

.hero__panel {
    width: calc(var(--px) * 1315);
    margin-top: calc(var(--px) * 42);
    padding: calc(var(--px) * 62) 0 calc(var(--px) * 63);
    border-radius: calc(var(--px) * 80);
    background: #4aaff5;
}

.hero__banner {
    top: calc(var(--px) * 296);
    right: calc(var(--px) * 502);
}

.hero__products {
    top: calc(var(--px) * 406);
}

.hero__panel-copy {
    margin-top: calc(var(--px) * 140);
}

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

.hero__cloud {
    width: calc(var(--px)*2048);
    aspect-ratio: 2048 / 131;
}

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

.hero__lead {
    width: calc(var(--px)*290);
    aspect-ratio: 290 / 52;
}

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

.hero__truck {
    width: calc(var(--px)*571);
    aspect-ratio: 571 / 268;
}

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

.hero__cups {
    width: calc(var(--px)*229);
    aspect-ratio: 229 / 168;
}

.hero__photo {
    width: calc(var(--px)*858);
    aspect-ratio: 858 / 543;
}

.hero__banner {
    width: calc(var(--px)*231);
    aspect-ratio: 231 / 26;
}

.hero__products {
    width: calc(var(--px)*939);
    aspect-ratio: 939 / 330;
}

.hero__panel-copy {
    width: calc(var(--px)*677);
    aspect-ratio: 677 / 61;
}
/* /IMG:AUTO hero END */

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

.hero__title {
    font-family: var(--font-jalnan);
    font-size: var(--titleL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.49;
}

.hero__tagline {
    font-family: var(--font-pretendard);
    font-size: var(--headM);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 2;
}

.hero__tagline-accent {
    color: #0074bd;
}

.hero__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.45;
}

.hero__desc-lead {
    font-weight: 700;
}
/* /FONT:AUTO hero END */

@media (max-width: 599px) {
    .hero {
        background: linear-gradient(to bottom, #ffffff 67.1%, #edf8ff 99%);
    }

    .hero__sky {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 56vw 0 30vw;
        background: linear-gradient(to bottom, #4aaff5 99.2%, transparent 99.2%);
    }

    .hero__rain {
        width: 116vw;
        left: 0;
        right: 0;
        margin-inline: auto;
        top: 17vw;
    }

    .hero__cloud {
        width: 124vw;
        left: 0;
        right: 0;
        margin-inline: auto;
        top: auto;
        bottom: 0;
    }

    .hero__lead {
        width: 44vw;
        left: 0;
        right: 0;
        margin-inline: auto;
        top: 19vw;
    }

    .hero__wordmark {
        width: 46vw;
        left: 0;
        right: 0;
        margin-inline: auto;
        top: 29vw;
    }

    .hero__bubble {
        width: 26vw;
        left: 2vw;
        top: 54vw;
    }

    .hero__truck {
        width: 62vw;
    }

    .hero__cups {
        width: 30vw;
        left: 2vw;
        top: auto;
        bottom: 5vw;
    }

    .hero__mascot {
        width: 20vw;
        left: auto;
        right: 6vw;
        bottom: 5vw;
    }

    .hero__intro {
        margin-top: 6.56vw;
        padding: 0 6vw;
    }

    .hero__tagline {
        margin-top: 3.68vw;
    }

    .hero__desc {
        margin-top: 1.76vw;
    }

    .hero__panel {
        width: 92vw;
        margin-top: 6.72vw;
        padding: 9.92vw 0 10.08vw;
        border-radius: 12.8vw;
    }

    .hero__photo {
        width: 76vw;
    }

    .hero__banner {
        width: 24vw;
        top: 30.6482vw;
        right: 35.1209vw;
    }

    .hero__products {
        width: 88vw;
        top: 40.3922vw;
    }

    .hero__panel-copy {
        width: 86vw;
        margin-top: 22.4vw;
    }
}

/* ══════════════════ con01 — 푸드트럭 신청 문의 폼 ══════════════════ */
.con01 {
    background-color: #edf8ff;
}

.con01_iner {
    padding-top: calc(var(--px)*230);
    padding-bottom: calc(var(--px)*141);
}

.con01__deco { /* absol: 우측 42px 화면 밖 bleed — flow 로는 못 냄 */
    top: calc(var(--px)*495);
    right: calc(var(--px)*-42);
}

.con01__watermark { /* absol: 중앙정렬 폼 흐름 밖 좌측 여백에 놓이는 배경 워터마크 */
    top: calc(var(--px)*134);
    left: calc(var(--px)*112);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    -webkit-text-fill-color: rgba(0, 116, 189, 0.0784);
    -webkit-text-stroke: calc(var(--px)*4) #ffffff;
    paint-order: stroke fill;
}

.con01__title-bar {
    width: calc(var(--px)*35);
    margin-top: calc(var(--px)*23.41);
    padding-block: calc(var(--px)*2.5);
    border-radius: calc(var(--px)*3);
    background-color: #0074bd;
}

.con01__form {
    margin-top: calc(var(--px)*55);
}

.con01__applicant {
    gap: calc(var(--px)*20);
}

.con01__applicant-input,
.con01__event-type-input,
.con01__agree-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.con01__applicant-label,
.con01__event-type-label {
    padding-block: calc(var(--px)*9.5);
    border: 1px solid #dedede;
    border-radius: 50vw;
    background-color: #ffffff;
    cursor: pointer;
}

.con01__applicant-label {
    width: calc(var(--px)*200);
}

.con01__applicant-input:checked + .con01__applicant-label,
.con01__event-type-input:checked + .con01__event-type-label {
    border-color: #4aaff5;
    background-color: #4aaff5;
    color: #ffffff;
}

.con01__fields {
    width: calc(var(--px)*776);
    margin-top: calc(var(--px)*18);
    gap: calc(var(--px)*8.5);
}

.con01__field {
    gap: calc(var(--px)*26);
    min-height: calc(var(--px)*67);
    padding: calc(var(--px)*13) calc(var(--px)*37);
    border: 1px solid #d7d9da;
    border-radius: calc(var(--px)*12);
    background-color: #ffffff;
}

.con01__field--multiline {
    padding-top: calc(var(--px)*20);
    padding-bottom: calc(var(--px)*17);
}

.con01__field-label {
    flex-shrink: 0;
    width: calc(var(--px)*102);   /* TEXT-WIDTH: 라벨 좌우 양끝맞춤(justify) 기준폭 */
    text-align-last: justify;
}

.con01__field-divider {
    flex-shrink: 0;
    width: 2px;
    padding-block: calc(var(--px)*10);
    background-color: #cde6f6;
    opacity: .5;
}

.con01__field-body {
    flex: 1;
}

.con01__field-body--datetime {
    gap: calc(var(--px)*22);
}

.con01__field-input,
.con01__field-textarea {
    flex: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: var(--bodyL);
    line-height: 1.4;
    color: #221f1f;
}

.con01__field-input::placeholder,
.con01__field-textarea::placeholder {
    color: #909090;
}

.con01__field-textarea {
    resize: none;
}

.con01__event-type {
    gap: calc(var(--px)*8);
}

.con01__event-type-label {
    width: calc(var(--px)*122);
}

.con01__date-input { /* absol: 버튼에 겹쳐 네이티브 picker 를 그 자리에 띄운다 */
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--px)*225);
    opacity: 0;
    pointer-events: none;
}

.con01__date-button {
    flex-shrink: 0;
    width: calc(var(--px)*225);
    padding: calc(var(--px)*3.5) calc(var(--px)*6) calc(var(--px)*3.5) calc(var(--px)*27);
    border: 1px solid #dedede;
    border-radius: 50vw;
    background-color: #ffffff;
    cursor: pointer;
}

.con01__date-mark {
    width: calc(var(--px)*49);
    padding-block: calc(var(--px)*5);
    border-radius: 50vw;
    background-color: #4aaff5;
}

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

.con01__agree-label {
    gap: calc(var(--px)*16);
    cursor: pointer;
}

.con01__agree-box {
    flex-shrink: 0;
    width: calc(var(--px)*30);
    padding-block: calc(var(--px)*5);
    border: 1px solid #d7d9da;
    border-radius: calc(var(--px)*5);
    background-color: #ffffff;
}

.con01__agree-check {
    visibility: hidden;
}

.con01__agree-input:checked + .con01__agree-label .con01__agree-check {
    visibility: visible;
}

.con01__submit {
    width: calc(var(--px)*356);
    margin-top: calc(var(--px)*37);
    padding-block: calc(var(--px)*21.5);
    border-radius: 50vw;
    background-color: #0074bd;
    cursor: pointer;
}

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

.con01__date-mark-media {
    width: calc(var(--px)*17);
    aspect-ratio: 17 / 20;
}

.con01__agree-check {
    width: calc(var(--px)*26);
    aspect-ratio: 26 / 18;
}
/* /IMG:AUTO con01 END */

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

.con01__title {
    font-family: var(--font-jalnan);
    font-size: var(--titleS);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.04;
    text-align: center;
    color: #221f1f;
}

.con01__form {
    font-family: var(--font-pretendard);
    line-height: 1;
}

.con01__applicant {
    font-size: var(--bodyL);
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
    color: #b5b1b1;
}

.con01__fields {
    font-weight: 500;
}

.con01__field-label {
    font-size: var(--bodyXL);
    letter-spacing: -0.02em;
    text-align: justify;
    color: #221f1f;
}

.con01__event-type,
.con01__date-button {
    font-size: var(--bodyL);
    letter-spacing: -0.02em;
    text-align: center;
    color: #909090;
}

.con01__agree-label {
    font-size: var(--bodyXL);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #221f1f;
}

.con01__submit {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: 0em;
    text-align: center;
    color: #ffffff;
}
/* /FONT:AUTO con01 END */

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

    .con01__deco,
    .con01__watermark,
    .con01__field-divider {
        display: none;
    }

    .con01__title-bar {
        width: 5.6vw;
        margin-top: 3.7456vw;
        padding-block: 0.4vw;
        border-radius: 0.48vw;
    }

    .con01__form {
        margin-top: 8.8vw;
    }

    .con01__applicant {
        gap: 4vw;
    }

    .con01__applicant-label,
    .con01__event-type-label { /* 비례환산 27px 은 터치 타겟 미달 — 42px 확보 */
        padding-block: 3.5vw;
    }

    .con01__applicant-label {
        width: 42vw;
    }

    .con01__fields {
        width: 88vw;
        margin-top: 2.88vw;
        gap: 1.36vw;
    }

    .con01__field {
        flex-direction: column;
        align-items: stretch;
        gap: 4.16vw;
        min-height: auto;
        padding: 5vw; /* PC 의 13/37 비대칭은 라벨│입력 가로배치 근거 — column 에선 사방 통일 */
        border-radius: 1.92vw;
    }

    .con01__field-label {
        width: auto;
        text-align-last: auto;
    }

    .con01__field-body--datetime {
        flex-direction: column;
        align-items: stretch;
        gap: 3.52vw;
    }

    .con01__event-type {
        flex-wrap: wrap;
        gap: 1.28vw;
    }

    .con01__event-type-label {
        width: calc(50% - 0.64vw);
    }

    .con01__date-input,
    .con01__date-button {
        width: 56vw;
    }

    .con01__date-button { /* 형제 pill 과 같은 42px 터치 타겟 */
        padding: 1.67vw 0.96vw 1.67vw 4.32vw;
    }

    .con01__date-mark {
        width: 12vw;
        padding-block: 1.2vw;
    }

    .con01__date-mark-media {
        width: 4.2vw;
    }

    .con01__agree {
        margin-top: 4.96vw;
    }

    .con01__agree-label {
        gap: 2.56vw;
    }

    .con01__agree-box { /* PC 와 같은 정사각 — padding·check 폭이 box 폭에서 파생 */
        width: 6.4vw;
        padding-block: 1.0667vw;
        border-radius: 0.8vw;
    }

    .con01__agree-check {
        width: 5.39vw;
    }

    .con01__submit {
        width: 60vw;
        margin-top: 5.92vw;
        padding-block: 3.44vw;
    }
}