/* =========================
   Fonts
   ========================= */
@font-face {
    font-family: "4";
    src: url(./Paperlogy-4Regular.ttf);
}

@font-face {
    font-family: "6";
    src: url(./Paperlogy-6SemiBold.ttf);
}

@font-face {
    font-family: "7";
    src: url(./Paperlogy-7Bold.ttf);
}

@font-face {
    font-family: "8";
    src: url(./Paperlogy-8ExtraBold.ttf);
}

@font-face {
    font-family: "gowun";
    src: url(./GowunBatang-Bold.ttf);
}

/* =========================
   Reset & Base
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    min-height: 100%;
}

html {
    --hdr: 90px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--hdr);
    overscroll-behavior-y: contain;
}

body {
    overflow-y: scroll;
}

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

ul {
    list-style: none;
}

figure {
    width: fit-content;
    height: fit-content;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h2 {
    font-family: "8";
}

h4,
p {
    font-family: "4";
}

/* =========================
   Video containers
   ========================= */
.video-container {
    position: relative;
    width: 100%;
    height: 210vh;
    overflow: hidden;
}

.video-container_b {
    position: relative;
    width: 100%;
    height: 150vh;
    overflow: hidden;
}

#top-bg,
#bottom-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    background: #000;
    z-index: -1;
}

/* =========================
   Sections (area1~5)
   ========================= */
.area1 {
    width: 100%;
    height: 100vh;
}

/* === HERO (복원) === */
.hero {
    width: min(1200px, 92vw);
    margin: auto;
    color: #fff;
    text-align: center;
    padding-top: clamp(200px, 30vh, 560px);
}

.hero h4 {
    font-size: clamp(14px, 2.4vw, 20px);
    font-weight: 300;
    color: rgba(255, 255, 255, .5);
}

.hero h2 {
    font-size: clamp(28px, 6vw, 64px);
    font-weight: 800;
    margin: 32px 0;
    line-height: 1.25;
}

.hero p {
    font-size: clamp(14px, 2.6vw, 16px);
    font-weight: 200;
    line-height: 1.6;
}

.hero .btn {
    margin: 32px auto 0;
    width: 215px;
    height: 60px;
    border-radius: 30px;
    align-content: center;
    background: linear-gradient(135deg, #66B5FF 0%, #6366FF 100%);
}

/* 스크롤 cue */
.scl_btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 100;
}

.scl_btn img {
    width: 50px;
    height: 50px;
}

/* === area2: 텍스트 잘림 방지 (margin-top → padding-top) === */
.area2 {
    width: 100%;
    color: #fff;
    text-align: center;
    padding-top: clamp(100px, 14vh, 200px);
    min-height: calc(100vh - var(--hdr) - clamp(120px, 14vh, 230px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(16px, 2.4vh, 24px);
}

.area2 figure {
    margin: 0 0 12px;
    width: min(720px, 90vw);
}

.area2 h2 {
    font-size: clamp(24px, 6vw, 64px);
    margin-top: clamp(8px 2vh 20px);
}

.area2 span {
    font-family: "4";
    font-weight: 400;
}

/* 높이가 작은 화면에서만 '단계적' 축소(너무 일찍 줄어드는 거 방지) */
@media (max-height:980px) {
    .area2 figure {
        max-height: 48vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .area2 figure img {
        height: 100%;
        width: auto;
        max-width: 90vw;
    }
}

@media (max-height:860px) {
    .area2 figure {
        max-height: 42vh;
    }
}

@media (max-height:740px) {
    .area2 figure {
        max-height: 36vh;
    }
}

/* === area3 === */
.area3 {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin-bottom: 100px;
}

.area3 .start-box {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
}

.area3 .start-box h2 {
    font-size: clamp(24px, 5.6vw, 64px);
    padding-top: 100px;
}

.area3 .start-box span {
    font-family: "4";
    font-weight: 400;
}

.area3 .start-box figure {
    margin: auto;
    margin-top: 32px;
}

.area3 .box {
    max-width: 1280px;
    width: 100%;
    margin: 150px auto 0;
    padding: 0 20px;
}

.area3 .box h3 {
    font-size: clamp(16px, 3.8vw, 24px);
    font-family: "gowun";
    color: #6366FF;
}

.area3 .box h2 {
    font-family: "4";
    font-weight: 400;
    font-size: clamp(18px, 4.6vw, 32px);
    margin-top: 16px;
}

.area3 .box span {
    font-family: "8";
}

.area3 .box .r-box {
    width: min(320px, 88vw);
    height: clamp(42px, 9.6vw, 50px);
    background: #f0f0f0;
    text-align: center;
    align-content: center;
    border-radius: 25px;
    margin: 50px auto;
    font-size: clamp(14px, 3.8vw, 24px);
    font-family: "4";
}

.area3 .box figure {
    margin: auto;
}

.area3 .box p {
    margin-top: 16px;
    color: #9c9c9c;
}

/* === area4 === */
.area4 {
    width: 100%;
    height: auto;
    margin: 100px auto;
}

.area4 .text-b {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    text-align: center;
    padding: 0 20px;
}

.area4 .text-b h4 {
    font-weight: 400;
    font-size: clamp(14px, 3.2vw, 20px);
}

.area4 .text-b h2 {
    font-size: clamp(24px, 6.2vw, 64px);
    margin: 32px 0;
}

.area4 .text-b span {
    font-weight: 400;
    font-family: "4";
}

.area4 .text-b p {
    font-size: clamp(14px, 3.6vw, 24px);
}

.area4 .package,
.area4 .plus {
    width: 100%;
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 20px;
}

.area4 .package .top-t,
.area4 .plus .top-t {
    text-align: center;
}

.area4 .package .top-t h2,
.area4 .plus .top-t h2 {
    width: 111px;
    margin: auto;
    display: inline-block;
}

.line {
    width: 170px;
    height: 1px;
    background: #2e2e2e;
    display: inline-block;
    margin: 0 8px 7.5px;
}

/* 카드 공통 */
.area4 .item1,
.area4 .item2,
.area4 .item3,
.area4 .item4,
.area4 .item5 {
    width: 100%;
    max-width: 930px;
    overflow: hidden;
    background: #F0F8FF;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .2);
    padding: 32px;
    margin: 24px auto 0;
}

.area4 .item4,
.area4 .item5 {
    background: #ececec;
}

/* 배지 색 */
.area4 .item1 .top .bedge {
    background: linear-gradient(135deg, #66B5FF 0%, #AFD8FF 100%);
}

.area4 .item2 .top .bedge {
    background: linear-gradient(135deg, #66B5FF 0%, #6366FF 100%);
}

.area4 .item3 .top .bedge {
    background: linear-gradient(135deg, #D466FF 0%, #6366FF 100%);
}

.area4 .item4 .top .bedge {
    background: linear-gradient(135deg, #FF6668 0%, #FFAFB1 100%);
}

.area4 .item5 .top .bedge {
    background: linear-gradient(135deg, #B2B2B2 0%, #777 100%);
}

/* 상단 라인 */
.area4 .item1 .top .bedge,
.area4 .item2 .top .bedge,
.area4 .item3 .top .bedge,
.area4 .item4 .top .bedge,
.area4 .item5 .top .bedge {
    border-radius: 25px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .2);
    border: 1px solid #fff;
    color: #fff;
    font-family: "7";
    text-align: center;
    width: 200px;
    padding: 8px 16px;
    float: left;
}

.area4 .item1 .top ul,
.area4 .item2 .top ul,
.area4 .item3 .top ul,
.area4 .item4 .top ul,
.area4 .item5 .top ul {
    list-style: disc;
    float: right;
    font-size: 20px;
    font-family: "6";
}

/* 중단부: 좌(설명) / 우(가격) 그리드 + 하단정렬 → 가격 위치 통일 */
.area4 .item1 .middle,
.area4 .item2 .middle,
.area4 .item3 .middle,
.area4 .item4 .middle,
.area4 .item5 .middle {
    width: 100%;
    margin: 24px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
}

.area4 .item1 .middle .left h2,
.area4 .item2 .middle .left h2,
.area4 .item3 .middle .left h2,
.area4 .item4 .middle .left h2,
.area4 .item5 .middle .left h2 {
    font-size: clamp(18px, 4.6vw, 32px);
    margin-bottom: 16px;
}

.area4 .item1 .middle .right h3,
.area4 .item2 .middle .right h3,
.area4 .item3 .middle .right h3,
.area4 .item4 .middle .right h3,
.area4 .item5 .middle .right h3 {
    font-size: clamp(14px, 3.6vw, 20px);
}

/* 가격 숫자 크기 */
.area4 .item1 .middle .right span,
.area4 .item2 .middle .right span,
.area4 .item3 .middle .right span,
.area4 .item4 .middle .right span,
.area4 .item5 .middle .right span {
    font-size: clamp(28px, 7vw, 52px);
    font-family: "8";
}

/* 우측 가격 컬럼: 공통 하단 기준선 */
.area4 .item1 .middle .right,
.area4 .item2 .middle .right,
.area4 .item3 .middle .right,
.area4 .item4 .middle .right,
.area4 .item5 .middle .right {
    position: relative;
    text-align: right;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* item1 전용: 배경가격 이미지 뒤에 깔고, '이벤트가 월 0원'은 위에 */
/* .area4 .item1 .middle .right {
    padding-top: clamp(60px, 8vw, 100px);
} */

.area4 .item1 .middle .right h3:first-child {
    position: absolute;
    right: 0;
    top: 40px;
    margin: 0;
    z-index: 0;
    pointer-events: none;
}

.area4 .item1 .middle .right h3:first-child img {
    width: clamp(180px, 20vw, 320px);
    height: auto;
    display: block;
}

.area4 .item1 .middle .right h3:last-child {
    position: relative;
    z-index: 1;
    margin: 0;
}

/* 하단 버튼줄 */
.area4 .item1 .bottom,
.area4 .item2 .bottom,
.area4 .item3 .bottom,
.area4 .item4 .bottom,
.area4 .item5 .bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.area4 .item1 .bottom .bedge,
.area4 .item2 .bottom .bedge,
.area4 .item3 .bottom .bedge,
.area4 .item4 .bottom .bedge,
.area4 .item5 .bottom .bedge {
    width: 180px;
    height: 45px;
    border-radius: 25px;
    text-align: center;
    align-content: center;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .2);
    color: #fff;
    font-family: "7";
    font-size: 24px;
}

.area4 .item1 .bottom .bedge {
    background: linear-gradient(135deg, #66B5FF 0%, #AFD8FF 100%);
}

.area4 .item2 .bottom .bedge {
    background: linear-gradient(135deg, #66B5FF 0%, #6366FF 100%);
}

.area4 .item3 .bottom .bedge {
    background: linear-gradient(135deg, #D466FF 0%, #6366FF 100%);
}

.area4 .item4 .bottom .bedge {
    background: linear-gradient(135deg, #FF6668 0%, #FFAFB1 100%);
}

.area4 .item5 .bottom .bedge {
    background: linear-gradient(135deg, #B2B2B2 0%, #777 100%);
}

/* === area5 (하단 CTA) === */
.video-container:last-child {
    position: relative;
    width: 100%;
}

.area5 {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    margin: auto;
    top: clamp(160px, 24vh, 350px);
    /* area5 시작 지점 */
}

.area5 .title {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.area5 .title h4 {
    font-family: "4";
    font-size: clamp(12px, 2.8vw, 20px);
    font-weight: 400;
    color: rgba(255, 255, 255, .5);
}

.area5 .title h2 {
    font-size: clamp(24px, 6.6vw, 64px);
    margin: 16px 0;
}

.area5 .title h3 {
    font-size: clamp(16px, 4.2vw, 32px);
    margin-bottom: 16px;
}

.area5 .bbox figure {
    margin: auto;
    max-width: min(820px, 92vw);
}

.area5 .btn {
    margin: auto;
    margin-top: 32px;
    width: clamp(160px, 36vw, 215px);
    height: clamp(46px, 12vw, 60px);
    background: linear-gradient(135deg, #66B5FF 0%, #6366FF 100%);
    align-content: center;
    text-align: center;
    color: #fff;
    font-family: "7";
    font-size: clamp(14px, 3.6vw, 24px);
    border-radius: 30px;
}

/* =========================
   Header & Nav
   ========================= */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 90px;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(126, 126, 126, .5);
    z-index: 999999;
    transition: background-color .2s ease, border-color .2s ease;
}

.inner {
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: auto;
    align-content: center;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inner nav {
    font-family: "4";
}

.inner nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 3.2vw, 40px);
    text-align: center;
}

.inner nav ul li {
    display: inline-block;
    color: #0f0f0f;
    font-size: 20px;
}

.inner nav ul li:hover {
    font-weight: 800;
    color: #6366FF;
}

/* 영상 위 = 흰색 글자 */
header .inner nav ul li a {
    transition: color .2s ease;
}

header.on-video .inner nav ul li,
header.on-video .inner nav ul li a {
    color: #fff !important;
}

header.on-video .inner nav ul li:hover,
header.on-video .inner nav ul li a:hover {
    color: #fff !important;
}

/* =========================
   Footer
   ========================= */
.footer {
    text-align: center;
    font-size: 12px;
    color: #ddd;
    line-height: 1.6;
    padding: 24px;
    border-top: 1px solid #222;
    background: #111;
}

.footer strong {
    color: #fff;
}

/* =========================
   Tablet/Mobile
   ========================= */
@media (max-width:980px) {
    header {
        height: 76px;
    }

    .inner {
        padding: 0 16px;
    }

    .hero {
        padding-top: clamp(160px, 28vh, 420px);
    }
}

@media (max-width:900px) {

    /* 헤더: 로고 중앙, nav 아래 */
    header {
        height: auto;
    }

    .inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
    }

    .inner nav {
        width: 100%;
    }

    .inner nav ul {
        justify-content: center;
        gap: 10px 16px;
    }

    /* area4 카드 스택 */
    .area4 {
        margin: 60px auto;
    }

    .area4 .item1,
    .area4 .item2,
    .area4 .item3,
    .area4 .item4,
    .area4 .item5 {
        margin-top: clamp(28px, 4vw, 40px);
        padding: 24px;
    }

    .area4 .item1 .top,
    .area4 .item2 .top,
    .area4 .item3 .top,
    .area4 .item4 .top,
    .area4 .item5 .top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .area4 .item1 .top ul,
    .area4 .item2 .top ul,
    .area4 .item3 .top ul,
    .area4 .item4 .top ul,
    .area4 .item5 .top ul {
        padding-left: 18px;
    }

    /* middle: 단일 컬럼, 가격은 아래로 */
    .area4 .item1 .middle,
    .area4 .item2 .middle,
    .area4 .item3 .middle,
    .area4 .item4 .middle,
    .area4 .item5 .middle {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: 12px;
    }

    .area4 .item1 .middle .right,
    .area4 .item2 .middle .right,
    .area4 .item3 .middle .right,
    .area4 .item4 .middle .right,
    .area4 .item5 .middle .right {
        text-align: left;
        min-height: auto;
        padding-top: 0;
    }

    /* 버튼 풀폭 & 화살표 숨김 */
    .area4 .item1 .bottom,
    .area4 .item2 .bottom,
    .area4 .item3 .bottom,
    .area4 .item4 .bottom,
    .area4 .item5 .bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .area4 .bottom .arrow {
        display: none !important;
    }

    /* 모바일에서 line 숨김 */
    .area4 .top-t .line {
        display: none !important;
    }

    .area4 .package .top-t,
    .area4 .plus .top-t {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .area4 .package .top-t h2,
    .area4 .plus .top-t h2 {
        display: block;
        margin: 0;
    }
}

@media (max-width:640px) {
    .inner nav ul li {
        font-size: 16px;
    }

    .area3 .box .r-box {
        width: min(320px, 88vw);
        height: 46px;
        font-size: 18px;
    }
}

@media (max-width:360px) {

    .hero h2,
    .area2 h2,
    .area3 .start-box h2,
    .area4 .text-b h2,
    .area5 .title h2 {
        font-size: clamp(22px, 7.2vw, 48px);
    }

    .inner nav ul li {
        font-size: clamp(12px, 3.6vw, 16px);
    }
}

/* 앵커 점프 헤더 피하기 */
#area1,
#area2,
#area3,
#area4,
#area5 {
    scroll-margin-top: var(--hdr);
}

/* =========================
   area2 이미지 축소 타이밍/강도 튜닝
   - 980px 이하부터만 천천히 줄어듦
   - 너무 작아지지 않도록 최소 픽셀 바닥 보장
   ========================= */

/* 조절용 변수 (원하면 숫자만 바꿔) */
:root {
    /* 이미지가 최대한 작아졌을 때도 이 픽셀보다 작아지지 않게 하는 바닥값 */
    --a2-floor: 420px;
    /* → 더 작게 느껴지면 380~420px로 올려 */

    /* 단계별 축소 강도 (vh가 클수록 덜 줄어듦 = 이미지 더 큼) */
    --a2-step1: 58vh;
    /* <= 980px */
    --a2-step2: 52vh;
    /* <= 900px */
    --a2-step3: 48vh;
    /* <= 820px */
    --a2-step4: 44vh;
    /* <= 740px */
    --a2-step5: 40vh;
    /* <= 660px (필요시 삭제/수정 가능) */
}

/* 기본: 처음엔 절대 줄이지 않음(비율 유지, 크롭 없음) */
.area2 {
    /* 기존 margin-top으로 밀리던 걸 padding-top으로 여유 확보 (겹침 방지) */
    padding-top: clamp(120px, 14vh, 230px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 24px);
}

.area2 figure {
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;

}

.area2 figure img {
    width: auto !important;
    height: auto !important;
    max-width: min(720px, 90vw) !important;
    max-height: none !important;
    /* ← 처음엔 절대 제한 없음 */
    object-fit: contain !important;
    /* 비율 유지 (크롭/찌그러짐 방지) */
}

/* ▼ 여기부터 '정말 필요할 때'만 단계적으로 줄이기 시작 */
@media (max-height: 980px) {

    /* 네가 요청한 시작점 */
    .area2 figure img {
        max-height: max(var(--a2-step1), var(--a2-floor)) !important;
    }
}

@media (max-height: 900px) {
    .area2 figure img {
        max-height: max(var(--a2-step2), var(--a2-floor)) !important;
    }
}

@media (max-height: 820px) {
    .area2 figure img {
        max-height: max(var(--a2-step3), var(--a2-floor)) !important;
    }
}

@media (max-height: 740px) {
    .area2 figure img {
        max-height: max(var(--a2-step4), var(--a2-floor)) !important;
    }
}

@media (max-height: 660px) {
    .area2 figure img {
        max-height: max(var(--a2-step5), var(--a2-floor)) !important;
    }
}

/* (참고) 모바일에서 .line 숨김 — 이미 있으면 중복되어도 무관 */
@media (max-width: 900px) {
    .area4 .top-t .line {
        display: none !important;
    }
}

/* ========== MOBILE: area4 중앙 정렬 ========== */
@media (max-width: 900px) {

    /* 섹션/타이틀 중앙 */
    .area4,
    .area4 .text-b,
    .area4 .package .top-t,
    .area4 .plus .top-t {
        text-align: center;
    }

    /* 카드(패키지/플러스) 자체도 가운데 배치 */
    .area4 .item1,
    .area4 .item2,
    .area4 .item3,
    .area4 .item4,
    .area4 .item5 {
        margin-left: auto;
        margin-right: auto;
    }

    /* 카드 상단: 배지/리스트 세로 스택 + 중앙 정렬 */
    .area4 .item1 .top,
    .area4 .item2 .top,
    .area4 .item3 .top,
    .area4 .item4 .top,
    .area4 .item5 .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .area4 .item1 .top .bedge,
    .area4 .item2 .top .bedge,
    .area4 .item3 .top .bedge,
    .area4 .item4 .top .bedge,
    .area4 .item5 .top .bedge {
        float: none;
        margin: 0 auto;
    }

    .area4 .item1 .top ul,
    .area4 .item2 .top ul,
    .area4 .item3 .top ul,
    .area4 .item4 .top ul,
    .area4 .item5 .top ul {
        float: none;
        margin: 4px auto 0;
        padding-left: 18px;
        /* 점(•)은 살리고 */
        text-align: left;
        /* 항목은 좌정렬(원하면 주석 아래 옵션 사용) */
    }

    /* (옵션) 리스트도 완전 중앙 정렬하고 싶다면 위 3줄 대신:
     list-style-position: inside; padding-left: 0; text-align: center;
  */

    /* 중단: 단일 컬럼 + 중앙 정렬 (가격/텍스트 모두) */
    .area4 .item1 .middle,
    .area4 .item2 .middle,
    .area4 .item3 .middle,
    .area4 .item4 .middle,
    .area4 .item5 .middle {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-auto-rows: max-content;
        row-gap: 12px;
        justify-items: center;
        /* 중앙 */
        align-items: start;
    }

    .area4 .item1 .middle .left,
    .area4 .item2 .middle .left,
    .area4 .item3 .middle .left,
    .area4 .item4 .middle .left,
    .area4 .item5 .middle .left,
    .area4 .item1 .middle .right,
    .area4 .item2 .middle .right,
    .area4 .item3 .middle .right,
    .area4 .item4 .middle .right,
    .area4 .item5 .middle .right {
        float: none !important;
        width: 100%;
        text-align: center;
        /* 텍스트/가격 중앙 */
    }

    /* 하단: 버튼 풀폭 느낌으로 중앙 배치, 화살표는 숨김(이미 적용돼 있으면 무시됨) */
    .area4 .item1 .bottom,
    .area4 .item2 .bottom,
    .area4 .item3 .bottom,
    .area4 .item4 .bottom,
    .area4 .item5 .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .area4 .item1 .bottom .arrow,
    .area4 .item2 .bottom .arrow,
    .area4 .item3 .bottom .arrow,
    .area4 .item4 .bottom .arrow,
    .area4 .item5 .bottom .arrow {
        display: none !important;
    }

    .area4 .item1 .bottom .bedge,
    .area4 .item2 .bottom .bedge,
    .area4 .item3 .bottom .bedge,
    .area4 .item4 .bottom .bedge,
    .area4 .item5 .bottom .bedge {
        width: 100%;
        max-width: 320px;
        /* 너무 넓어지지 않게 상한 */
        height: 52px;
        font-size: 20px;
    }
}

/* ===== 가격 블록 안정화: item1 전용 ===== */

/* 데스크톱: 우측 하단에 단단히 고정(흔들림 방지) */
@media (min-width: 901px) {
    .area4 .item1 .middle .right {
        display: flex;
        flex-direction: column;
        /* 위: 월5,500원 이미지 / 아래: 0원 */
        align-items: flex-end;
        /* 오른쪽 정렬 */
        justify-content: flex-end;
        /* 아래쪽 정렬 */
        gap: 6px;
    }

    /* 월 5,500원 이미지: baseline 영향 제거 + 높이 한도 */
    .area4 .item1 .middle .right h3:first-child img {
        display: block;
        height: auto;
        max-height: 51px;
        /* 기존 레이아웃과 비슷한 시각적 높이 */
        max-width: 100%;
    }

    .area4 .item1 .middle .right h3 {
        margin: 0;
        line-height: 1.1;
        white-space: nowrap;
        /* 0원 줄바꿈 방지(원하면 제거) */
    }
}

/* 모바일: 중앙 정렬, 위→아래(월 5,500원 → 이벤트가 0원) */
@media (max-width: 900px) {
    .area4 .item1 .middle {
        display: grid !important;
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: start;
        row-gap: 12px;
    }

    .area4 .item1 .middle .right {
        display: flex !important;
        flex-direction: column-reverse;
        /* 세로로 쌓기 */
        align-items: center;
        /* 중앙 정렬 */
        justify-content: flex-start;
        gap: 6px;
        text-align: center;
        width: 100%;
    }

    .area4 .item1 .middle .right h3 {
        margin: 0;
        line-height: 1.1;
    }

    /* 월 5,500원 이미지: 위에 오고, 보기 좋게 축소 */
    .area4 .item1 .middle .right h3:first-child img {
        display: block;
        width: clamp(140px, 48vw, 220px);
        /* 화면에 맞춰 유연 축소 */
        height: auto;
    }

    /* "이벤트 가 월 0원" 텍스트와 숫자 크기 유연화(겹침 방지) */
    .area4 .item1 .middle .right h3:nth-child(2) {
        font-size: clamp(16px, 4.2vw, 20px);
    }

    .area4 .item1 .middle .right span {
        font-size: clamp(28px, 9vw, 52px);
        /* 0의 크기 */
    }
}

/* ===== 가격 공통(텍스트 버전) ===== */
.area4 .item1 .middle .right .price {
    display: flex;
    flex-direction: column;
    /* 데스크톱: 위=정가, 아래=이벤트 */
    align-items: flex-end;
    /* 오른쪽 정렬(데스크톱) */
    gap: 6px;
    text-align: right;
}

/* 정가(회색, 취소선) */
.area4 .item1 .middle .right .price__was {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #bfc6ce;
    opacity: .95;
    font-family: "7";
}

.area4 .item1 .middle .right .price__was .unit {
    font-size: clamp(14px, 2.6vw, 20px);
    line-height: 1;
    transform: translateY(-3px);
}

.area4 .item1 .middle .right .price__was .amount {
    font-family: "8";
    font-size: clamp(28px, 6.2vw, 52px);
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: .12em;
    /* 취소선 두께 */
    text-decoration-color: #c9cfd6;
}

/* 이벤트가(굵고 크게) */
.area4 .item1 .middle .right .price__now {
    font-family: "7";
    font-size: clamp(16px, 3.2vw, 20px);
    line-height: 1.1;
    color: #111;
}

.area4 .item1 .middle .right .price__now .now-amount {
    font-family: "8";
    font-size: clamp(28px, 6.6vw, 52px);
}

/* ===== 모바일(<=900px): 가운데 정렬 + 순서 뒤집기(이벤트 ↑ / 정가 ↓) ===== */
@media (max-width:900px) {
    .area4 .item1 .middle .right .price {
        align-items: center;
        /* 가운데 정렬 */
        text-align: center;
        flex-direction: column;

        gap: 8px;
    }
}

/* 섹션/비디오 컨테이너 높이 */
.video-container,
.video-container_b,
.area1,
.area2 {
    min-height: 100svh;
    /* 주소창 포함 '작은' 뷰포트 */
}

/* 최신 브라우저는 dvh 사용(툴바 제외, 안정) */
@supports (min-height: 100dvh) {

    .video-container,
    .video-container_b,
    .area1,
    .area2 {
        min-height: 100dvh;
    }
}

/* 오래된 인앱 폴백 */
html,
body {
    height: -webkit-fill-available;
}

.video-container,
.video-container_b {
    min-height: -webkit-fill-available;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* gap 미지원 환경(iOS 14.5 이하 WebView 등) 폴백 */
@supports not (gap: 1rem) {
    .inner nav ul {
        margin-left: -16px;
    }

    .inner nav ul li {
        margin-left: 16px;
    }

    /* 중간 카드 레이아웃 */
    .area4 .item1 .middle,
    .area4 .item2 .middle,
    .area4 .item3 .middle,
    .area4 .item4 .middle,
    .area4 .item5 .middle {
        gap: 0;
        /* gap 제거 */
    }

    .area4 .item1 .middle>*,
    .area4 .item2 .middle>*,
    .area4 .item3 .middle>*,
    .area4 .item4 .middle>*,
    .area4 .item5 .middle>* {
        margin: 8px;
        /* 자식 마진으로 간격 대체 */
    }
}

header {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* 인앱/사파리 호환 */
}

header {
    padding-top: env(safe-area-inset-top, 0px);
}

.scl_btn {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.inapp .video-container,
.inapp .area2,
.inapp .video-container_b {
    scroll-snap-align: none;
}

/* =============== AREA3 START-BOX : 3장 카드형 =============== */
/* 래퍼(= start-box)를 그리드로: 3열 → 반응형으로 2/1열 */
.area3 .start-box {
    /* 기존 .start-box 폭/패딩은 유지하되 그리드만 얹음 */
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: clamp(16px, 2.2vw, 32px);
    align-items: stretch;
}

/* 카드 공통 */
.area3 .start-box>.sbox {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #8C8C8C;
    /* 은은한 테두리 */
    padding: clamp(18px, 2.4vw, 28px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 오래된 환경에서 줄바꿈 안정화 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 아이콘 */
.area3 .start-box>.sbox figure {
    height: clamp(64px, 8vw, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(10px, 1.5vw, 16px);
}

.area3 .start-box>.sbox figure img {
    max-height: 100%;
    width: auto;
}

/* 제목 */
.area3 .start-box>.sbox h3 {
    font-family: "8";
    font-weight: 800;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.25;
    color: #0f0f0f;
    margin-bottom: clamp(8px, 1vw, 12px);
}

.area3 .start-box>.sbox h3 span {
    /* 강조 색 필요 없으면 #0f0f0f 유지, 포인트 주려면 아래 색 */
    /* color: #6366FF; */
}

/* 본문 */
.area3 .start-box>.sbox p {
    font-family: "4";
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.55;
    color: #444;
    margin-bottom: clamp(10px, 1.2vw, 14px);
}

/* 하단 보장 문구(카드 하단에 고정되도록) */
.area3 .start-box>.sbox b {
    font-family: "7";
    font-size: clamp(14px, 1.6vw, 18px);
    color: #0f0f0f;
    margin-top: auto;
    /* ← 이 한 줄로 카드 하단 정렬 */
}

/* ====== 반응형 ====== */
/* 넓은 태블릿: 2열 */
@media (max-width: 1100px) {
    .area3 .start-box {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

/* 모바일: 1열(세로로 죽 나열 + 여백 보강) */
@media (max-width: 720px) {
    .area3 .start-box {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .area3 .start-box>.sbox {
        padding: 20px 18px;
        border-radius: 16px;
    }
}

/* flex gap 미지원 폴백(iOS 14.x webview 등) — 간격이 깨질 경우 대비 */
@supports not (gap: 1rem) {
    .area3 .start-box {
        display: block;
        /* 구형 폴백: 블록으로 쌓고 수동 마진 */
    }

    .area3 .start-box>.sbox {
        margin: 0 0 18px 0;
    }

    .area3 .start-box>.sbox:last-child {
        margin-bottom: 0;
    }
}

/* ---------------------------------------
   area3 start-box — 제목/서론은 한 줄 전체, sbox만 칸 배치
   --------------------------------------- */

/* 1) start-box 그리드 정의 (3→2→1 열) */
.area3 .start-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: clamp(16px, 2.2vw, 32px);
    align-items: stretch;
}

/* 2) 카드가 아닌 모든 자식(제목/이미지/설명 등)은 전체폭을 차지 */
.area3 .start-box> :not(.sbox) {
    grid-column: 1 / -1;
    /* ← 여기 한 줄로 해결 */
}

/* 3) sbox는 그대로 칸에 들어가고 높이 균일 */
.area3 .start-box>.sbox {
    /* 카드 공통 스타일은 기존 그대로 사용 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 카드 하단 문구를 아래로 고정 */
.area3 .start-box>.sbox b {
    margin-top: auto;
}

/* 반응형: 1100px 이하면 2열 */
@media (max-width: 1100px) {
    .area3 .start-box {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

/* 반응형: 720px 이하면 1열(세로로 쭉) */
@media (max-width: 720px) {
    .area3 .start-box {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* 구형 브라우저( flex gap 미지원 등) 폴백 */
@supports not (gap: 1rem) {
    .area3 .start-box {
        display: block;
    }

    .area3 .start-box>.sbox {
        margin: 0 0 18px;
    }

    .area3 .start-box>.sbox:last-child {
        margin-bottom: 0;
    }
}

/* sbox 카드 안의 콘텐츠를 '세로 가운데'로 배치 */
.area3 .start-box>.sbox {
    display: flex;
    /* 이미 flex면 그대로 동작 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ← 세로 가운데 정렬의 핵심 */
    text-align: center;
    padding: clamp(20px, 2.2vw, 32px) 24px;
    /* 위/아래 여백 균형 */
    gap: clamp(8px, 1.2vw, 14px);
    /* 요소 간 거리 */
    min-height: 360px;
    /* 카드 높이 균일(필요 시 조정) */
}

/* 하단 카피는 더 이상 '자동으로 아래로' 밀지 않음 */
.area3 .start-box>.sbox b {
    margin-top: 10px;
    /* 살짝 간격만 두기 */
    font-weight: 800;
}

/* 아이콘/제목/본문 간 여백 정리(선택) */
.area3 .start-box>.sbox figure {
    margin: 0 0 8px;
}

.area3 .start-box>.sbox h3 {
    margin: 0 0 6px;
}

.area3 .start-box>.sbox p {
    margin: 0;
    line-height: 1.6;
}