@font-face{font-family:'Cafe24Ssurround';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');font-weight: normal;font-style: normal;}
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
/* ---------- variables / reset (.prom-2607 scope) ---------- */
.prom-2607 {
    --font-paper: "Paperlogy", "Pretendard", sans-serif;
    --font-pretendard: "Pretendard", sans-serif;
    --font-ssurround: "Cafe24Ssurround", "Paperlogy", sans-serif;
    --font-nanum: "NanumSquare", "Paperlogy", sans-serif;
    --font-hakgyo: "Hakgyoansim Gaeulsopung", "Paperlogy", sans-serif;

    --c-point: #08c;
    --c-title-dark: #333;
    --c-mint: #0f8d99;
    --c-blue: #2673bf;
    --c-sky: #1386bf;
    --c-red: #d20000;
    --c-navy: #123659;
    --c-purple: #505de5;
    --c-text: #333;

    --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.1);

    --content-w: 1200px;

    display: block;
    isolation: isolate;
    position: relative;
    width: 100%;
    font-family: var(--font-paper);
    color: var(--c-text);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    word-break: keep-all;
}

.prom-2607 *,
.prom-2607 *::before,
.prom-2607 *::after { 
    box-sizing: border-box;
}

.prom-2607 * {
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* 호스트 전역(landing_base_tailwind `*`, `h1,h1 *` … `h6,h6 *`) 격리 */
.prom-2607 h1,
.prom-2607 h2,
.prom-2607 h3,
.prom-2607 h4,
.prom-2607 h5,
.prom-2607 h6,
.prom-2607 p,
.prom-2607 h1 *,
.prom-2607 h2 *,
.prom-2607 h3 *,
.prom-2607 h4 *,
.prom-2607 h5 *,
.prom-2607 h6 * {
    font-size: unset;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    font-family: inherit;
}

.prom-2607 .event__title {
    font-family: var(--font-ssurround);
    letter-spacing: -1px;
}

.prom-2607 .event__title * {
    font-family: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
}

.prom-2607 mark {
    background: transparent;
    color: inherit;
}

.prom-2607 em {
    font-style: normal;
}

.prom-2607 strong {
    font-weight: inherit;
}

.prom-2607 button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

.prom-2607 .page {
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-paper);
    color: var(--c-text);
    line-height: 1.5;
    background: #f0fffb;
    overflow-x: hidden;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

.prom-2607 img {
    display: block;
    max-width: 100%;
    margin: 0;
}

.prom-2607 a {
    text-decoration: none;
    color: inherit;
}

.prom-2607 ul {
    list-style: none;
}

/* =========================================================
   배움 2026 "배움의 파도: 썸머 서핑 페스타" — 전체 스타일
   PC 우선 구현 + 반응형(1100/768px)
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.prom-2607 .hero{
    position: relative;
    width: 100%;
    background: #f0fffa url("../assets_202607/pc1-bg.png") center top / cover no-repeat;
}
.prom-2607 .hero__inner{
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}
.prom-2607 .hero__fg{
    display: block;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
/* 모바일 전용 통이미지·앵커는 기본(PC)에서 숨김 */
.prom-2607 .hero__fg--mobile, .prom-2607 .hero__nav--mobile{
    display: none;
}
/* 카드 5개 위 투명 앵커 — 전경 이미지 하단 카드 영역에 겹쳐 배치 */
.prom-2607 .hero__nav{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 9%;
    width: 1080px;
    max-width: 92%;
    height: 16%;
    display: flex;
    gap: 1%;
    justify-content: center;
}
.prom-2607 .hero__card-link{
    flex: 1 1 0;
    display: block;
    border-radius: 14px;
}

/* =========================================================
   공통 — EVENT 섹션 / 헤더 / 버튼 / 유의사항
   ========================================================= */
.prom-2607 .event{
    position: relative;
    padding: 100px 20px;
    overflow: hidden;
}
.prom-2607 .event__inner{
    position: relative;
    max-width: var(--content-w);
    margin: 0 auto;
    z-index: 1;
}

/* 헤더 */
.prom-2607 .event__head{
    text-align: center;
    margin-bottom: 50px;
}
.prom-2607 .event__chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 74px;
    background: url("../assets_202607/title-chip.png") center / contain no-repeat;
    font-family: var(--font-paper);
    font-weight: 600;
    font-size: 21px;
    color: #069;
    margin-bottom: 24px;
}
.prom-2607 .event__title{
    line-height: 0.98;
    font-weight: bold;
}
.prom-2607 .event__title-sub{
    display: block;
    font-size: 40px;
    color: var(--c-title-dark);
}
.prom-2607 .event__title-main{
    display: block;
    font-size: 66px;
    color: var(--c-point);
    margin-top: 6px;
}
.prom-2607 .event__title-main em{
    font-style: normal;
    font-size: 76px;
}
.prom-2607 .event__title-main--lg{
    font-size: 76px;
}
.prom-2607 .event__desc{
    margin-top: 26px;
    font-family: var(--font-paper);
    font-weight: 400;
    font-size: 21px;
    color: var(--c-text);
}
/* 설명 문구 핵심 메시지 형광펜 하이라이트 (EVENT04 "3인 크루" 등) */
.prom-2607 .event__desc-hl{
    font-weight: 700;
    color: #075a8c;
    background: linear-gradient(
        180deg,
        transparent 58%,
        rgba(255, 226, 84, 0.85) 58%
    );
    padding: 0 3px;
    border-radius: 2px;
}

/* 버튼 */
.prom-2607 .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:30%;
    height: 65px;
    padding: 0 50px;
    font-family: var(--font-paper);
    font-weight: 500;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    transition: filter 0.15s ease;
}
.prom-2607 .btn:hover{
    filter: brightness(1.08);
}
.prom-2607 .btn--navy{
    background: var(--c-navy);
}
.prom-2607 .btn--purple{
    background: var(--c-purple);
}
.prom-2607 .btn--wide{
    min-width: 420px;
}
.prom-2607 .btn-row{
    display: flex;
    gap: 20px;
    justify-content: center;
}
.prom-2607 .btn-row--center{
    margin-top: 0;
}

/* 유의사항 */
.prom-2607 .notice{
    text-align: left;
}
.prom-2607 .notice--wide{
    width: 900px;
    max-width: 100%;
    margin: 40px auto 0;
}
.prom-2607 .notice__title{
    font-family: var(--font-pretendard);
    font-weight: 500;
    font-size: 18px;
    color: #000;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.prom-2607 .notice ul{
    list-style: disc;
    padding-left: 22px;
}
.prom-2607 .notice li{
    font-family: var(--font-pretendard);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #4d4d4d;
    letter-spacing: -0.3px;
}
.prom-2607 .notice--wide .notice__title{
    font-size: 20px;
}
.prom-2607 .notice--wide li{
    font-size: 16px;
}

/* =========================================================
   EVENT 01 — 쿠폰 2단
   ========================================================= */
.prom-2607 .event--01{
    background: linear-gradient(180deg, #f0fffa 0%, #d4faf7 100%);
}
.prom-2607 .coupons{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch; /* 더 긴 카드 기준으로 양쪽 높이 통일 */
}
.prom-2607 .coupon-card{
    flex: 1 1 0;
    max-width: 590px;
    background: #fff;
    border-radius: 30px;
    box-shadow: var(--shadow-card);
    padding: 40px 45px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}
.prom-2607 .coupon-card__heading{
    font-family: var(--font-paper);
    font-weight: 600;
    font-size: 36px;
    text-align: center;
}
.prom-2607 .coupon-card__heading--mint{
    color: var(--c-mint);
}
.prom-2607 .coupon-card__heading--blue{
    color: var(--c-blue);
}

.prom-2607 .coupon{
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 220px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 우측 장식 이미지가 카드 밖으로 살짝 나오도록 visible */
    overflow: visible;
    color: #fff;
}
.prom-2607 .coupon--mint{
    background: linear-gradient(90deg, #40b8aa 0%, #19a69a 100%);
}
.prom-2607 .coupon--blue{
    background: linear-gradient(90deg, #1596d6 0%, #1378bf 100%);
}
/* 좌측 반원 노치 (우측은 장식 이미지가 가리므로 노치 없음) */
.prom-2607 .coupon::before{
    content: "";
    position: absolute;
    top: 50%;
    left: -25px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}
.prom-2607 .coupon::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}
/* 쿠폰 박스 내부 하단 유효기간 안내 (PC 전용) */
.prom-2607 .coupon__valid{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    text-align: center;
    font-family: var(--font-paper);
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
}
/* 좌우 점선 (노치 안쪽) */
.prom-2607 .coupon__badge{
    font-family: var(--font-hakgyo);
    font-weight: 300;
    font-size: 34px;
    letter-spacing: -1.5px;
    /* 배지를 살짝 위로 */
    margin-top: -26px;
    margin-bottom: 6px;
}
.prom-2607 .coupon__price{
    font-family: var(--font-paper);
    display: flex;
    align-items: baseline;
    gap: 14px;
    /* 가격을 박스 중앙보다 위로 */
    margin-top: -28px;
}
/* % 기호는 숫자(strong)와 붙여서 표시 */
.prom-2607 .coupon__price strong + span{
    margin-left: -10px;
}
.prom-2607 .coupon__price span{
    font-weight: 500;
    font-size: 46px;
}
.prom-2607 .coupon__price strong{
    font-weight: 800;
    font-size: 70px;
}
/* 카드 우측 장식 이미지 — 우측 반원 노치를 가리도록 배치 */
.prom-2607 .coupon__deco{
    position: absolute;
    right: -45px;
    bottom: -50px;
    width: 150px;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

.prom-2607 .coupon-card .notice{
    width: 100%;
    max-width: 500px;
}

/* =========================================================
   EVENT 02 — 가격 카드 3개
   ========================================================= */
.prom-2607 .event--02{
    background: linear-gradient(180deg, #f2fdff 0%, #e1edfa 100%);
}
.prom-2607 .price-cards{
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
}
.prom-2607 .price-card{
    flex: 1 1 0;
    max-width: 390px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    padding: 45px 35px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.prom-2607 .price-card__tag{
    border: 1px solid;
    border-radius: 50px;
    padding: 14px;
    text-align: center;
    font-family: var(--font-paper);
    font-weight: 600;
    font-size: 30px;
}
.prom-2607 .price-card__tag--mint{
    color: #1199a6;
    border-color: #1199a6;
}
.prom-2607 .price-card__tag--blue{
    color: #4774cc;
    border-color: #4774cc;
}
.prom-2607 .price-card__tag--sky{
    color: #1386bf;
    border-color: #1386bf;
}
.prom-2607 .price-card__body{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 15px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.prom-2607 .price-card__rate{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--c-red);
    color: #fff;
    font-family: var(--font-nanum);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -2px;
}
.prom-2607 .price-card__rate strong{
    font-weight: 800;
    font-size: 48px;
    letter-spacing: -3px;
}
.prom-2607 .price-card__amount{
    text-align: right;
    font-family: var(--font-paper);
}
.prom-2607 .price-card__amount del{
    display: block;
    color: #757575;
    font-size: 18px;
    line-height: 1.4;
}
.prom-2607 .price-card__amount strong{
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
}
.prom-2607 .price-card__cta{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #333;
    color: #fff;
    height: 54px;
    font-family: var(--font-paper);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.4px;
    transition: filter 0.15s ease;
}
.prom-2607 .price-card__cta:hover{
    filter: brightness(1.2);
}
.prom-2607 .price-card__cta img{
    width: 32px;
    height: 32px;
}

/* =========================================================
   EVENT 03 — 보육교사 패키지 가격표
   ========================================================= */
.prom-2607 .event--03{
    background: linear-gradient(180deg, #d9ffff 10%, #fcddbd 90%);
}
.prom-2607 .pkg-card{
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
}
.prom-2607 .pkg-tag{
    border: 1px solid #73b6e5;
    border-radius: 50px;
    padding: 15px 60px;
    color: var(--c-blue);
    font-family: var(--font-paper);
    font-weight: 600;
    font-size: 30px;
}
.prom-2607 .pkg-badge{
    border-radius: 30px;
    padding: 6px 12px;
    text-align: center;
    font-family: var(--font-paper);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
}
.prom-2607 .pkg-badge--fill-mint{
    background: #c8f6fa;
    color: var(--c-mint);
}
.prom-2607 .pkg-badge--fill-blue{
    background: #c8e5fa;
    color: #069;
}
/* 가격 박스 + '+' + 보너스 박스 가로 1행 (모바일은 세로 스택) */
.prom-2607 .pkg-deal{
    display: flex;
    align-items: center;
    gap: 28px;
}
/* 하늘색 가격 박스: [배지·취소선 원가] → [86% 원형 배지] → [할인가] */
.prom-2607 .pkg-price-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 620px;
    height: 160px;
    padding: 18px 40px;
    background: #f7fbfd;
    border: 1px solid #e3eef5;
    border-radius: 15px;
}
.prom-2607 .pkg-price-box__before{
    display: flex;
    align-items: center;
    gap: 15px;
}
.prom-2607 .pkg-price-box__badges{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prom-2607 .pkg-price-box__badges .pkg-badge{
    width: 56px;
}
/* 할인 전 원가 — "과목당 "은 그대로, 금액(s)에만 취소선 */
.prom-2607 .pkg-price-box__origs{
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--font-paper);
    font-size: 17px;
    color: #666;
    white-space: nowrap;
}
.prom-2607 .pkg-price-box__origs s{
    text-decoration: line-through;
}
/* 86% 원형 배지 + 관통 화살표 컨테이너
   — 화살표 꼬리·화살촉이 원 좌우로 각각 노출되는 폭 */
.prom-2607 .pkg-stamp-wrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 169px;
    height: 116px;
    flex: 0 0 auto;
}
/* 원 뒤를 지나는 관통 화살표 — 꼬리 바 + border 삼각 화살촉을 CSS로 그려
   길이·수직 중앙정렬을 글꼴 메트릭과 무관하게 제어 */
.prom-2607 .pkg-stamp-arrow{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 0;
}
.prom-2607 .pkg-stamp-arrow::before{
    content: "";
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #8a97a5;
}
.prom-2607 .pkg-stamp-arrow::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 14px solid #8a97a5;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
/* 보라 원형 「최대 할인 86%」 배지 — 화살표 위에 얹힘 */
.prom-2607 .pkg-stamp{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--c-purple);
    color: #fff;
    font-family: var(--font-paper);
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
}
.prom-2607 .pkg-stamp strong{
    font-weight: 800;
    font-size: 36px;
}
.prom-2607 .pkg-stamp strong i{
    font-style: normal;
    font-weight: 400;
    font-size: 26px; /* %는 숫자보다 한 단계 작게 (Figma 스펙) */
}
.prom-2607 .pkg-price-box__after{
    display: flex;
    flex-direction: column;
    font-family: var(--font-paper);
    white-space: nowrap;
}
.prom-2607 .pkg-price-box__after b{
    font-weight: 800 !important;
    font-size: 34px;
    line-height: 1.2;
    color: var(--c-red);
}
.prom-2607 .pkg-price-box__after span{
    font-weight: 500;
    font-size: 21px;
    color: #1a1a1a;
}

/* 가격 박스와 보너스 박스 사이 '+' 아이콘 — 혜택이 더해짐을 표시 */
.prom-2607 .pkg-plus{
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #3eb265;
}
.prom-2607 .pkg-plus::before, .prom-2607 .pkg-plus::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: #fff;
}
.prom-2607 .pkg-plus::after{
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 핑크 보너스 박스 — 상단 테두리에 「추가 혜택!」 배지가 걸침 */
.prom-2607 .pkg-bonus{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 160px;
    background: #fff2ec;
    border: 2px solid #f5b8ab;
    border-radius: 15px;
}
.prom-2607 .pkg-bonus__tag{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #ff7a45 0%, #d20000 100%);
    border-radius: 999px;
    padding: 9px 26px;
    font-family: var(--font-paper);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.48px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(210, 0, 0, 0.3);
}
.prom-2607 .pkg-bonus__body{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-paper);
    font-weight: 400;
    font-size: 24px;
    color: #1a1a1a;
    line-height: 1;
    white-space: nowrap;
}
.prom-2607 .pkg-bonus__body b{
    font-weight: 700;
}
.prom-2607 .pkg-bonus__zero{
    display: inline-flex;
    align-items: baseline;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    color: var(--c-red);
    letter-spacing: -1px;
}
.prom-2607 .pkg-bonus__zero strong{
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
}

.prom-2607 .event03-cta{
    text-align: center;
    margin-top: 40px;
}
.prom-2607 .event03-cta__lead{
    font-family: var(--font-paper);
    font-weight: 300;
    font-size: 26px;
    color: #b2823e;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* EVENT03 하단 파도 띠 */
.prom-2607 .event--03::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 220px;
    background: url("../assets_202607/section3-bg3.png") center bottom / cover
        no-repeat;
    z-index: 0;
}

/* =========================================================
   EVENT 04 — 예비 교원과 함께
   ========================================================= */
.prom-2607 .event--04{
    background: linear-gradient(180deg, #ccecff 10%, #fcf0d7 90%);
}
.prom-2607 .crew{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.prom-2607 .crew__badge-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.prom-2607 .crew__badge{
    /* 태그(위) + 가격(아래) 세로 스택 — 모든 브레이크포인트 공통 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #d9ffff;
    border-radius: 14px;
    padding: 24px 64px 22px;
    min-width: 560px;
    box-shadow: 0 6px 18px rgba(19, 134, 191, 0.14);
}
.prom-2607 .crew__badge-tag{
    /* 채움형 그라데이션 필 — 시선을 먼저 잡는 강조 배지 */
    background: linear-gradient(135deg, #12b3c7 0%, #1386bf 100%);
    border-radius: 999px;
    padding: 9px 26px;
    font-family: var(--font-paper);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.48px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(19, 134, 191, 0.3);
}
.prom-2607 .crew__badge-price{
    display: inline-flex;
    align-items: baseline; /* "최저"를 가격의 기준선에 하단 정렬 */
    gap: 5px;
    font-family: var(--font-paper);
    font-weight: 500;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
}
.prom-2607 .crew__badge-price-unit{
    font-size: 34px;
    font-weight: 600;
}
/* "1.8만원 대" 통째로 대형 강조 (숫자는 한 단계 더 크게) */
.prom-2607 .crew__badge-price-em{
    display: inline-flex;
    align-items: baseline; /* 숫자와 "만원 대"는 타이포 기준선 유지 */
    font-style: normal;
    font-weight: 800;
    font-size: 50px;
    line-height: 1;
    color: var(--c-red);
    letter-spacing: -1px;
}
.prom-2607 .crew__badge-note{
    font-family: var(--font-paper);
    font-size: 13px;
    color: #666;
    text-align: center;
}

/* 혜택 3개 (달걀형 카드) */
.prom-2607 .crew__benefits{
    display: flex;
    justify-content: center;
}
.prom-2607 .benefit{
    position: relative;
    width: 350px;
    height: 350px;
    background: url("../assets_202607/section4-egg.png") center / contain no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    text-align: center;
}
.prom-2607 .benefit__icon{
    height: 70px;
    width: auto;
    margin-bottom: 5px;
}
.prom-2607 .benefit__head{
    font-family: var(--font-paper);
    font-weight: 700;
    font-size: 36px;
    color: #000;
}
.prom-2607 .benefit__head span{
    font-size: 26px;
}
.prom-2607 .benefit__text{
    margin-top: 22px;
    font-family: var(--font-paper);
    font-size: 20px;
    color: #000;
    line-height: 1.3;
}
.prom-2607 .benefit__sub{
    margin-top: 12px;
    font-family: var(--font-paper);
    font-size: 14px;
    color: #737373;
}

/* 참여방법 4단계 */
.prom-2607 .steps{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap; /* 한 줄 유지 (참고 디자인) */
    background: #fff7e0;
    border-radius: 10px;
    padding: 25px 30px 25px 40px; /* 상하 대칭 — 라벨/화살표 정중앙 정렬 */
    width: 1100px;
    max-width: 100%;
}
.prom-2607 .steps__label{
    font-family: var(--font-paper);
    font-weight: 500;
    font-size: 26px;
    color: var(--c-sky);
    align-self: center;
    white-space: nowrap;
}
.prom-2607 .step{
    width: 192px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-top: -25px; /* 상단 패딩 상쇄 — 번호 배지를 박스 상단 경계에 붙임 */
    align-self: flex-start;
}
.prom-2607 .step p{
    white-space: nowrap; /* <br> 기준 줄바꿈만 허용 (자동 줄바꿈으로 3줄 되는 것 방지) */
}
.prom-2607 .step__num{
    width: 40px;
    background: var(--c-sky);
    color: #fff;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 5px 6px 8px;
    font-family: var(--font-paper);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}
.prom-2607 .step p{
    font-family: var(--font-paper);
    font-size: 16px;
    color: #000;
    line-height: 1.4;
}
.prom-2607 .steps__arrow{
    width: 20px;
    height: 33px; /* viewBox 24:40 비율 유지 — 자연스러운 ‹ 형태 */
    flex-shrink: 0;
    align-self: center; /* 양옆 단계 블록의 세로 중앙에 위치 */
}
.prom-2607 .event--04 .btn-row--center{
    margin-top: 40px; /* 참여방법 박스와 버튼 사이 여백 */
}

/* =========================================================
   EVENT 05 — 나만의 서핑보드
   ========================================================= */
.prom-2607 .event--05{
    background: linear-gradient(180deg, #d6fff1 0%, #fcf6d7 100%);
}
.prom-2607 .surf{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* 모바일 전용 줄바꿈 — PC/태블릿에서는 숨김 */
.prom-2607 .br-mobile{
    display: none;
}
.prom-2607 .surf__visual-wrap{
    position: relative;
    width: 1200px;
    max-width: 100%;
    /* 배경 일러스트(바다·서핑보드·경품). 원본 1200x640 비율 유지 */
    aspect-ratio: 1200 / 640;
    background: url("../assets_202607/section5-bg.png") center / cover no-repeat;
    border-radius: 200px 400px 400px 200px;
    /* 상단 텍스트 그룹과 하단 경품 안내를 위·아래로 분리 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    overflow: hidden;
}
/* 일러스트 img — PC에서는 배경(.surf__visual-wrap background)을 쓰므로 숨김.
   모바일에서만 흐름 요소로 노출한다. */
.prom-2607 .surf__illust{
    display: none;
}
/* 상단 그룹: 타이틀 + 서브카피 + 기간 배지 */
.prom-2607 .surf__top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.prom-2607 .surf__title{
    display: block;
    width: 585px;
    max-width: 100%;
    height: auto;
}
.prom-2607 .surf__lead{
    font-family: var(--font-paper);
    font-size: 22px;
    color: #00264d;
    text-align: center;
}
.prom-2607 .surf__period{
    font-family: var(--font-paper);
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: rgba(10, 56, 102, 0.3);
    padding: 10px 25px;
    border-radius: 25px;
}
/* 하단 그룹: 경품 안내 칩 + 텍스트 */
.prom-2607 .surf__prize{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.prom-2607 .surf__prize-label{
    flex-shrink: 0;
    font-family: var(--font-paper);
    font-weight: 600;
    font-size: 16px;
    color: #2d9cb3;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.prom-2607 .surf__prize-text{
    font-family: var(--font-paper);
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    text-align: left;
}
/* 각 경품 항목은 통째로 묶어 항목 중간에서 단어가 쪼개지지 않게 하고,
   항목 사이(공백)에서만 줄바꿈되도록 한다. 항목 사이 구분자 " / "는
   CSS로 붙여 마지막 항목 뒤에는 표시하지 않는다. */
.prom-2607 .surf__prize-item{
    display: inline;
    white-space: nowrap;
}
.prom-2607 .surf__prize-item:not(:last-child)::after{
    content: " / ";
    white-space: normal;
}
.prom-2607 .surf__cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.prom-2607 .surf__note{
    font-family: var(--font-paper);
    font-size: 16px;
    color: #666;
    text-align: center;
}

/* =========================================================
   스크롤 등장 애니메이션
   ========================================================= */
.prom-2607 .reveal{
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.prom-2607 .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
    .prom-2607 .reveal{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   반응형 — 태블릿 (max-width: 1100px)
   ========================================================= */
@media (max-width: 1100px) {
    .prom-2607 .event{
        padding: 80px 20px;
    }
    .prom-2607 .event__title-sub{
        font-size: 32px;
    }
    .prom-2607 .event__title-main, .prom-2607 .event__title-main--lg, .prom-2607 .event__title-main em{
        font-size: 58px;
    }
    .prom-2607 .event__desc{
        font-size: 18px;
    }

    /* EVENT04 가격 배지(태블릿): PC 대비 한 단계 축소 */
    .prom-2607 .crew__badge{
        min-width: 0;
        padding: 20px 44px 18px;
    }
    .prom-2607 .crew__badge-price{
        font-size: 22px;
    }
    .prom-2607 .crew__badge-price-unit{
        font-size: 34px;
    }
    .prom-2607 .crew__badge-price-em{
        font-size: 50px;
    }

    /* EVENT01 쿠폰 세로 가능하나 2단 유지(축소) */
    .prom-2607 .coupon-card{
        padding: 32px 28px;
    }
    .prom-2607 .coupon-card__heading{
        font-size: 30px;
    }
    .prom-2607 .coupon{
        height: 190px;
    }
    .prom-2607 .coupon__price span{
        font-size: 38px;
    }
    .prom-2607 .coupon__price strong{
        font-size: 58px;
    }

    /* EVENT02 카드(태블릿): 좁아진 폭에서 % 원형 배지와 가격이 가로로
       나란히 들어가지 못해 배지가 카드 밖으로 밀려나고 "원"이 강제 줄바꿈된다.
       카드 내부(.price-card__body)를 세로 정렬로 바꿔 배지(위) → 원가/가격(아래)
       순으로 가운데 쌓아 좁은 폭에서도 깨지지 않게 한다. */
    .prom-2607 .price-card{
        padding: 36px 20px 24px;
    }
    .prom-2607 .price-card__tag{
        font-size: 24px;
    }
    .prom-2607 .price-card__body{
        align-items: center;
        gap: 14px;
        padding: 0;
    }
    .prom-2607 .price-card__amount{
        text-align: center;
    }
    .prom-2607 .price-card__amount strong{
        white-space: nowrap; /* "원"이 숫자에서 떨어져 다음 줄로 가지 않게 */
    }

    /* EVENT03 가격표(태블릿): 가로 1행(992px)이 안 들어가는 폭
       — 가격 박스 → + → 보너스 박스 세로 스택으로 전환 */
    .prom-2607 .pkg-tag{
        font-size: 26px;
        padding: 14px 40px;
    }
    .prom-2607 .pkg-badge{
        white-space: nowrap;
    }
    .prom-2607 .pkg-deal{
        flex-direction: column;
        gap: 20px;
        width: 100%; /* 하위 박스의 width:100% 기준 폭 확보 (.pkg-card가 center 정렬이라 명시 필요) */
    }
    .prom-2607 .pkg-plus{
        /* 아래 보너스 박스 상단에 걸친 「추가 혜택!」 배지가 위로 튀어나오는 만큼 간격 보강 */
        margin-bottom: 16px;
    }
    .prom-2607 .pkg-price-box{
        width: 100%;
        max-width: 620px;
        /* 스택 뷰에서는 박스가 콘텐츠보다 넓어 justify-between이 좌우를 지나치게 벌림
           — 원형 배지 중심으로 콘텐츠를 모아준다 */
        justify-content: center;
        gap: 24px;
    }
    .prom-2607 .pkg-bonus{
        width: 100%;
        max-width: 620px;
    }

    /* EVENT04 혜택(태블릿): 달걀형 카드 3개를 가로로 욱여넣으면 카드가 좁아져
       텍스트가 잘린다. 줄바꿈을 허용해 2개+1개로 흐르게 한다. */
    .prom-2607 .crew__benefits{
        flex-wrap: wrap;
        gap: 10px 20px;
    }
    /* 참여방법(태블릿): PC의 1100px 고정·nowrap 한 줄은 폭이 줄면 04 스텝이
       화면 밖으로 잘린다. 모바일과 동일하게 2x2 그리드로 전환하고 화살표를 숨긴다. */
    .prom-2607 .steps{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 28px;
        width: 100%;
        max-width: 600px;
        padding: 30px 24px;
    }
    .prom-2607 .steps__label{
        grid-column: 1 / -1;
        text-align: center;
        align-self: center;
    }
    .prom-2607 .steps__arrow{
        display: none;
    }
    .prom-2607 .step{
        width: 100%;
        max-width: none;
        align-self: start;
        margin-top: 0;
    }
    .prom-2607 .step p{
        white-space: normal;
    }
    .prom-2607 .btn--wide{
        min-width: 320px;
    }

    /* EVENT05 비주얼(태블릿): PC의 고정 1200px·space-between 레이아웃은
       폭이 줄면 가운데 경품 위로 상단 텍스트가 겹쳐 깨진다. 모바일과 동일하게
       배경 일러스트를 흐름 요소(.surf__illust)로 풀어내고, 텍스트 그룹은
       일러스트 상단 하늘 영역 위에 absolute로 올린다. */
    .prom-2607 .event--05 .event__head{
        margin-bottom: 20px;
    }
    .prom-2607 .surf__visual-wrap{
        width: 100%;
        aspect-ratio: auto;
        justify-content: flex-start;
        align-items: center;
        background: transparent;
        border-radius: 0;
        padding: 0;
        gap: 0;
        overflow: hidden;
    }
    /* 상단 텍스트 그룹 — 일러스트 하늘 영역 위에 겹쳐 배치 */
    .prom-2607 .surf__top{
        position: absolute;
        top: 6%;
        left: 0;
        right: 0;
        z-index: 1;
        gap: 12px;
        padding: 0 24px;
    }
    .prom-2607 .surf__lead{
        font-size: 20px;
    }
    .prom-2607 .surf__period{
        font-size: 15px;
        padding: 8px 20px;
    }
    /* 일러스트를 흐름 요소로 노출. 태블릿은 폭이 넉넉하므로 100%로 둔다 */
    .prom-2607 .surf__illust{
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        position: relative;
        z-index: 0;
    }
    /* 하단 경품 안내: 일러스트 아래 흰 영역에 칩(좌) + 텍스트 배치 */
    .prom-2607 .surf__prize{
        align-items: flex-start;
        gap: 10px;
        padding: 0 24px;
        margin-top: 20px;
    }
    .prom-2607 .surf__prize-text{
        font-size: 17px;
        line-height: 1.6;
        text-align: left;
    }
    .prom-2607 .surf__prize-label{
        font-size: 16px;
        padding: 7px 14px;
    }
    .prom-2607 .surf__cta{
        width: 100%;
        margin-top: 28px;
    }
}

/* =========================================================
   반응형 — 모바일 (max-width: 768px)
   ========================================================= */
@media (max-width: 768px) {
    /* landing_base_tailwind @768 전역 h1~h5, h1~h5 *, img 규칙 재무효화 */
    .prom-2607 h1,
    .prom-2607 h2,
    .prom-2607 h3,
    .prom-2607 h4,
    .prom-2607 h5,
    .prom-2607 h1 *,
    .prom-2607 h2 *,
    .prom-2607 h3 *,
    .prom-2607 h4 *,
    .prom-2607 h5 * {
        font-size: unset;
        letter-spacing: inherit;
        font-weight: inherit;
        font-family: inherit;
    }

    .prom-2607 .event__title {
        letter-spacing: -1px;
    }

    .prom-2607 img {
        margin: 0;
    }

    .prom-2607 .event{
        padding: 60px 16px;
    }
    .prom-2607 .event__05{
        padding: 60px 0px !important;
    }
    .prom-2607 .event__05_spc{
        padding: 0 16px !important;
    }
    .prom-2607 .event__head{
        margin-bottom: 36px;
    }
    .prom-2607 .event__chip{
        width: 180px;
        height: 62px;
        font-size: 18px;
    }
    .prom-2607 .event__title-sub{
        font-size: 26px;
    }
    .prom-2607 .event__title-main, .prom-2607 .event__title-main--lg, .prom-2607 .event__title-main em{
        font-size: 40px;
    }
    .prom-2607 .event__desc{
        font-size: 16px;
    }

    /* HERO 모바일 — 배경+서퍼+카드 5개 통이미지로 교체 */
    .prom-2607 .hero{
        /* 통이미지에 배경 포함. 하단 흰색 페이드는 ::after 오버레이로 덮는다. */
        background: #f0fffa;
    }
    .prom-2607 .hero__fg--pc, .prom-2607 .hero__nav--pc{
        display: none; /* PC 전경·앵커 숨김 */
    }
    .prom-2607 .hero__fg--mobile{
        display: block;
        width: 100%;
        margin: 0;
        /* display: block 자체로 baseline 간격이 없어 이미지 하단 흰 선이 생기지 않는다 */
    }
    /* 통이미지 하단의 불투명 흰색 페이드를 가리는 오버레이.
       모래 브라운(투명) → 모래 브라운 → 민트(#f0fffa)로 그라데이션 연결하여
       흰색 영역 없이 하단 EVENT01 민트 배경과 자연스럽게 이어지게 한다. */
    .prom-2607 .hero__inner::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* 통이미지 하단 흰색 페이드 구간(약 6%)만 덮어 카드 콘텐츠를 가리지 않게 한다 */
        height: 8%;
        pointer-events: none;
        z-index: 1;
    }
    /* 모바일 카드 앵커 (상단 3개 + 하단 2개 2단) — 통이미지 위 오버레이 */
    .prom-2607 .hero__nav--mobile{
        display: grid;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        grid-template-columns: repeat(3, 1fr);
        gap: 2%;
        width: 90%;
        /* 카드 영역(통이미지 하단부) 비율로 배치 */
        top: 58.5%;
        height: 33%;
    }
    .prom-2607 .hero__nav--mobile .hero__card-link{
        display: block;
        border-radius: 12px;
    }
    /* 상단 3개 카드 행 */
    .prom-2607 .hero__nav--mobile .hero__card-link:nth-child(1){
        grid-column: 1;
        grid-row: 1;
    }
    .prom-2607 .hero__nav--mobile .hero__card-link:nth-child(2){
        grid-column: 2;
        grid-row: 1;
    }
    .prom-2607 .hero__nav--mobile .hero__card-link:nth-child(3){
        grid-column: 3;
        grid-row: 1;
    }
    /* 하단 2개 카드 행 (좌측 정렬) */
    .prom-2607 .hero__nav--mobile .hero__card-link:nth-child(4){
        grid-column: 1;
        grid-row: 2;
    }
    .prom-2607 .hero__nav--mobile .hero__card-link:nth-child(5){
        grid-column: 2 / span 2;
        grid-row: 2;
    }

    /* EVENT01 쿠폰 1단 세로 스택 */
    .prom-2607 .coupons{
        flex-direction: column;
        align-items: center;
    }
    .prom-2607 .coupon-card{
        width: 100%;
        max-width: 480px;
    }
    /* "*첫 파도 도전!" 배지 — 키우고 살짝 위로 */
    .prom-2607 .coupon__badge{
        font-size: 30px;
        margin-top: -12px;
        margin-bottom: 18px;
    }
    /* 유효기간 안내 문구 — PC와 동일하게 쿠폰 하단 노출 (모바일 크기 축소) */
    .prom-2607 .coupon__valid{
        bottom: 14px;
        font-size: 13px;
        line-height: 13px;
    }
    /* "패키지"/"단과" 와 20% 사이 간격 */
    .prom-2607 .coupon__price{
        gap: 12px;
        /* 가격을 박스 중앙보다 살짝 위로 (하단 유효기간 문구 공간 확보) */
        margin-top: -22px;
    }
    .prom-2607 .coupon__price span{
        font-size: 36px;
    }
    .prom-2607 .coupon__price strong{
        font-size: 56px;
    }
    .prom-2607 .coupon__price strong + span{
        margin-left: -8px;
    }
    /* 카드 우측 하단 장식 이미지 (모바일 크기) — 크게 키워 우하단 밖으로 걸치게 */
    .prom-2607 .coupon__deco{
        right: -40px;
        bottom: -45px;
        width: 124px;
    }

    /* EVENT02 가격 카드 1단 */
    .prom-2607 .price-cards{
        flex-direction: column;
        align-items: center;
    }
    .prom-2607 .price-card{
        width: 100%;
        max-width: 420px;
    }

    /* EVENT03 가격 박스(모바일): 세로 스택 유지 + 박스 내부 가로 배치 축소 */
    .prom-2607 .pkg-card{
        padding: 36px 16px;
        gap: 28px;
    }
    .prom-2607 .pkg-tag{
        font-size: 20px;
        padding: 12px 24px;
        text-align: center;
        line-height: 1.3;
    }
    /* 이론/대면 배지 한 줄 유지 (가독성) */
    .prom-2607 .pkg-badge{
        white-space: nowrap;
    }
    .prom-2607 .pkg-deal{
        gap: 16px;
    }
    .prom-2607 .pkg-price-box{
        height: auto;
        min-height: 110px;
        padding: 14px 10px;
        gap: 8px;
    }
    .prom-2607 .pkg-price-box__before{
        gap: 6px;
    }
    .prom-2607 .pkg-price-box__badges{
        gap: 8px;
    }
    .prom-2607 .pkg-price-box__badges .pkg-badge{
        width: 40px;
        padding: 3px 6px;
        font-size: 12px;
    }
    .prom-2607 .pkg-price-box__origs{
        gap: 14px;
        font-size: 11px;
    }
    /* 원형 배지·관통 화살표 축소 — 좁은 폭에서 화살표가 먼저 줄도록 shrink 허용 */
    .prom-2607 .pkg-stamp-wrap{
        flex: 0 1 auto;
        width: 110px;
        height: 72px;
        min-width: 72px;
    }
    .prom-2607 .pkg-stamp-arrow::before{
        height: 3px;
    }
    .prom-2607 .pkg-stamp-arrow::after{
        border-left-width: 10px;
        border-top-width: 6px;
        border-bottom-width: 6px;
    }
    .prom-2607 .pkg-stamp{
        width: 72px;
        height: 72px;
        font-size: 12px;
    }
    .prom-2607 .pkg-stamp strong{
        font-size: 22px;
    }
    .prom-2607 .pkg-stamp strong i{
        font-size: 16px;
    }
    .prom-2607 .pkg-price-box__after b{
        font-size: 24px;
    }
    .prom-2607 .pkg-price-box__after span{
        font-size: 13px;
    }
    .prom-2607 .pkg-plus{
        width: 40px;
        height: 40px;
    }
    .prom-2607 .pkg-plus::before, .prom-2607 .pkg-plus::after{
        width: 18px;
        height: 3px;
    }
    .prom-2607 .pkg-bonus{
        height: auto;
        min-height: 120px;
        padding: 30px 16px 24px;
    }
    .prom-2607 .pkg-bonus__tag{
        padding: 7px 18px;
        font-size: 14px;
    }
    .prom-2607 .pkg-bonus__body{
        font-size: 19px;
    }
    .prom-2607 .pkg-bonus__zero{
        font-size: 28px;
    }
    .prom-2607 .pkg-bonus__zero strong{
        font-size: 44px;
    }
    .prom-2607 .event03-cta__lead{
        font-size: 20px;
    }
    .prom-2607 .btn-row{
        flex-direction: column;
        align-items: center;
    }
    .prom-2607 .btn{
        width: 100%;
        max-width: 360px;
        padding: 0 24px;
    }
    .prom-2607 .btn--wide{
        min-width: 0;
        width: 100%;
        max-width: 360px;
    }

    /* EVENT04 혜택 세로, 참여방법 세로 */
    /* 가격 배지(모바일): 세로 스택 유지, 폭·크기만 축소 */
    .prom-2607 .crew__badge{
        min-width: 0;
        width: 100%;
        max-width: 420px;
        gap: 10px;
        padding: 18px 20px 16px;
    }
    .prom-2607 .crew__badge-tag{
        flex: 0 0 auto;
        padding: 7px 18px;
        font-size: 14px;
    }
    .prom-2607 .crew__badge-price{
        gap: 8px;
        font-size: 19px;
    }
    .prom-2607 .crew__badge-price-unit{
        font-size: 26px;
    }
    .prom-2607 .crew__badge-price-em{
        font-size: 38px;
    }
    .prom-2607 .crew__benefits{
        flex-direction: column;
        align-items: center;
    }
    /* 참여방법: 모바일에서 2x2 그리드 (01 02 / 03 04), 화살표 숨김 */
    .prom-2607 .steps{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 28px;
        padding: 30px 16px;
    }
    .prom-2607 .steps__label{
        grid-column: 1 / -1; /* 라벨은 전체 폭 차지 */
        text-align: center;
        align-self: center;
    }
    .prom-2607 .steps__arrow{
        display: none; /* 모바일에서는 화살표 제거 */
    }
    .prom-2607 .step{
        width: 100%;
        max-width: none;
        align-self: start; /* PC의 flex-start 리셋 */
        margin-top: 0; /* PC의 -25px 리셋 */
    }
    .prom-2607 .step p{
        white-space: normal; /* 좁은 폭에서 자연스러운 줄바꿈 허용 */
    }

    /* EVENT05 전용: 헤더(서브카피)와 일러스트 비주얼 사이 공백 축소 */
    .prom-2607 .event--05 .event__head{
        margin-bottom: 16px;
    }
    /* EVENT05 비주얼(모바일): 일러스트를 흐름의 맨 위에 두고, 텍스트 그룹
       (타이틀·서브·기간)을 일러스트의 하늘 영역 위에 absolute로 겹쳐서
       하늘색 안에 담는다. 텍스트 위 불필요한 공백 제거(목표 시안 재현). */
    .prom-2607 .surf__visual-wrap{
        width: 100%;
        aspect-ratio: auto;
        justify-content: flex-start;
        align-items: center;
        /* 하늘색 박스 배경 제거(투명) — 일러스트만 보이게 한다 */
        background: transparent;
        border-radius: 0;
        padding: 0;
        gap: 0;
        /* 확대된 일러스트의 좌우 넘침을 잘라 가로 스크롤 방지 */
        overflow: hidden;
    }
    /* 상단 텍스트 그룹 — 일러스트 하늘 영역 위에 겹쳐 배치.
       일러스트 확대로 경품(커피 등)이 올라오므로, 텍스트 그룹을 위로 올리고
       간격을 좁혀 기간 배지가 경품과 겹치지 않게 한다. */
    .prom-2607 .surf__top{
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        z-index: 1;
        gap: 8px;
        padding: 0 20px;
    }
    .prom-2607 .surf__lead{
        font-size: 15px;
    }
    .prom-2607 .surf__period{
        font-size: 13px;
        padding: 7px 16px;
    }
    /* 일러스트: 화면 폭보다 크게 확대(zoom-in)해 경품 이미지가 더 크게 보이게 한다.
       음수 마진으로 가로 중앙 정렬. 흐름의 맨 위에 위치하며 상단 하늘 영역에
       텍스트 그룹(absolute)이 겹쳐진다. */
    .prom-2607 .surf__illust{
        display: block;
        width: 200%;
        max-width: none;
        height: auto;
        margin: 0 -25%;
        position: relative;
        z-index: 0;
    }
    /* 하단 경품 안내: 일러스트 아래 흰 영역에 칩(좌) + 텍스트 배치 */
    .prom-2607 .surf__prize{
        align-items: flex-start;
        gap: 10px;
        padding: 0 20px;
        margin-top: 16px;
    }
    .prom-2607 .surf__prize-text{
        font-size: 17px;
        line-height: 1.6;
        text-align: left;
    }
    .prom-2607 .surf__prize-label{
        font-size: 15px;
        padding: 7px 14px;
    }
    /* CTA 컨테이너를 화면 폭만큼 넓혀 참여하기 버튼이 다른 섹션 버튼과
       동일하게 max-width(360px)까지 늘어나게 한다.
       경품 안내와 버튼 사이 여백 확보를 위해 상단 마진 추가 */
    .prom-2607 .surf__cta{
        width: 100%;
        margin-top: 24px;
    }

    /* 모바일 전용 줄바꿈 노출 (EVENT05 타이틀 "목표 도전!"을 둘째 줄로) */
    .prom-2607 .br-mobile{
        display: inline;
    }

    /* 유의사항 폭 */
    .prom-2607 .notice--wide{
        width: 100%;
    }

}

/* =========================================================
   초소형 모바일 (≤374px) — EVENT03 가격 박스가 물리적으로 안 들어가는 폭.
   관통 화살표를 숨기고 타이포를 한 단계 더 줄여 오버플로를 방지한다.
   ========================================================= */
@media (max-width: 374px) {
    .prom-2607 .pkg-price-box{
        padding: 12px 8px;
    }
    .prom-2607 .pkg-price-box__badges .pkg-badge{
        width: 36px;
        padding: 3px 5px;
        font-size: 11px;
    }
    .prom-2607 .pkg-price-box__origs{
        font-size: 10px;
    }
    .prom-2607 .pkg-stamp-arrow{
        display: none;
    }
    .prom-2607 .pkg-stamp-wrap{
        width: 64px;
        height: 64px;
        min-width: 64px;
    }
    .prom-2607 .pkg-stamp{
        width: 64px;
        height: 64px;
        font-size: 11px;
    }
    .prom-2607 .pkg-stamp strong{
        font-size: 19px;
    }
    .prom-2607 .pkg-stamp strong i{
        font-size: 14px;
    }
    .prom-2607 .pkg-price-box__after b{
        font-size: 20px;
    }
    .prom-2607 .pkg-price-box__after span{
        font-size: 12px;
    }
}