@charset "UTF-8";
/* 메인 페이지 — 시안 기준 1920 폭.
   세로 좌표(top)는 시안 값을 그대로 쓰고, 가로는 % 로 환산해 함께 줄어들게 한다.
     1032 → 53.75%   948 → 49.375%   1647 → 85.78125% */

/* ============================================================
   1. 히어로
   ============================================================ */
.hero { height: 900px; background: #010101; }
/* .inner 는 기본 높이가 0 이라 bottom 기준이 섹션 밖을 가리킨다 — 히어로에서만 높이를 채운다 */
.hero .inner { height: 100%; }

.hero-copy {
    position: absolute;
    bottom: 80px;
    left: 7px;              /* 시안 x=127 = 콘텐츠 좌측(120) + 7 */
    font-family: Inter, "Pretendard Variable", Pretendard, sans-serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1.4;
    color: var(--white);
    white-space: nowrap;
}

/* ============================================================
   2. 영원의 꽃, 이모탈 — 스크롤 개화
   ------------------------------------------------------------
   .emortal-pin 이 스크롤 트랙(400vh)이고 그 안의 sticky 가 화면에 붙는다.
   꽃이 피는 91프레임(1447×678)을 스크롤 진행률로 넘긴다(js/main.js).
   원본은 mainFlower.mp4 인데 키프레임이 1개뿐이라 영상 스크럽으로는
   되감기가 버벅여서, 프레임을 뽑아 캔버스로 그리는 방식으로 갔다.
   ============================================================ */
.emortal-pin { position: relative; height: 400vh; }

.emortal-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background: var(--navy-deep);
}

.emortal { height: 100%; background: var(--navy-deep); }

.emortal-stages { position: absolute; inset: 0; }

/* 프레임은 캔버스에 그린다. 프레임이 아직 없을 때는 섹션 배경색이 그대로 보인다
   — 글자는 항상 읽힌다. */
.emortal-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.emortal-eyebrow,
.emortal-title,
.emortal-desc,
.emortal-note { position: absolute; left: 0; width: 100%; text-align: center; z-index: 2; }

/* ⚠️ 시안 좌표(150/188/272/340/395)에서 통째로 59px 올렸다.
   시안은 꽃의 **봉오리**(영상 첫 프레임)만 그려져 있어 버튼 아래가 비어 보이지만,
   실제로는 만개한 꽃이 캔버스 y=419 까지 올라온다. 시안대로 두면 버튼이 꽃잎을 덮는다.
   js/main.js 의 TOP_LIMIT(420) 은 버튼 아래끝 380 을 기준으로 잡은 값이라
   버튼을 그 자리로 되돌린다. 꽃 크기는 그대로 둔다. */
.emortal-eyebrow { top: 91px; font-size: 16px; line-height: 1.6; color: var(--muted-2); }
.emortal-title   { top: 129px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--white); }
.emortal-desc    { top: 213px; font-size: 16px; line-height: 1.8; color: var(--white); }
.emortal-desc b  { font-weight: 600; }
.emortal-note    { top: 281px; font-size: 14px; line-height: 1.8; color: #999; }

.emortal-btn {
    position: absolute;
    top: 336px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* ============================================================
   3. The Danaro Standard (5% → 5각 → 3공법) — 스크롤 3단 전환
   ------------------------------------------------------------
   .standard-pin 이 스크롤 트랙(300vh)이고 그 안의 .standard-sticky 가
   화면에 붙는다. 트랙을 다 지나면 자연스럽게 다음 섹션으로 넘어간다.
   세 상태 모두 시안 좌표가 같아서 틀은 고정이고 내용만 갈아끼운다.
   ============================================================ */
.standard-pin { position: relative; height: 300vh; }   /* 상태 3개 × 100vh */

.standard-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background: #fff;
}

.standard { height: 100%; background: #fff; }

/* 한 상태 = 이미지 + 글 한 덩어리. PC 는 좌우로 펼치고 모바일은 통째로 쌓는다. */
.standard-states { position: absolute; inset: 0; }
.standard-state  { position: absolute; inset: 0; }

/* ---- 왼쪽: 아래에서 올라와 덮는 이미지 ---- */
.standard-visual {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 49.375%;         /* 948 / 1920 */
    height: 100%;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.standard-visual img { width: 100%; height: 100%; object-fit: cover; }
/* 지나온 단계는 제자리에 남고, 다음 장이 그 위를 덮는다 */
.standard-state.is-shown .standard-visual { transform: translateY(0); }

.standard-label {
    position: absolute;
    top: 86px;
    left: 85.78125%;        /* 1647 / 1920 */
    z-index: 3;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
    text-transform: capitalize;
}

/* ---- 오른쪽: 제자리에서 크로스페이드하는 글 ----
   화면 높이가 900 이 아닐 수 있으므로 세로 중앙 기준으로 잡는다.
   시안(900 기준) 좌표 → 중앙(450) 대비 오프셋: 505→+55, 697→+247, 761→+311 */
.standard-text {
    position: absolute;
    left: 53.75%;           /* 1032 / 1920 */
    top: 50%;
    opacity: 0;
    transition: opacity .35s ease;
}
.standard-state.is-active .standard-text { opacity: 1; transition-delay: .3s; }  /* 먼저 지우고 나서 채운다 */

.standard-num,
.standard-h3,
.standard-p { position: absolute; left: 0; white-space: nowrap; }

.standard-num { top: 55px; display: flex; align-items: flex-start; gap: 6px; color: var(--ink); }
.standard-num .num  { font-size: 140px; font-weight: 700; line-height: 1.3; }
.standard-num .unit { margin-top: 76px; font-size: 64px; font-weight: 600; line-height: 1.3; }
/* 한글 단위(각 · 공법)는 시안에서 5px 위, 2px 오른쪽 */
.standard-text--ko .standard-num { gap: 8px; }
.standard-text--ko .standard-num .unit { margin-top: 71px; }

.standard-h3 { top: 247px; font-size: 30px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.standard-p  { top: 311px; font-size: 16px; line-height: 1.8; color: var(--body); }

/* 모션을 줄이도록 설정한 사용자에게는 전환 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
    .standard-visual,
    .standard-text { transition: none; }
}

/* ============================================================
   4. Well-Aging Complex (앰플 비주얼)
   ============================================================ */
.wellaging { height: 800px; }

.wellaging-label {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--white);
    text-transform: capitalize;
}

/* ============================================================
   5. 단아로 윤결세트
   ============================================================ */
.set { height: 900px; }

.set-eyebrow,
.set-title,
.set-desc,
.set-spec,
.set-btn { position: absolute; left: 53.75%; }   /* 1032 / 1920 */

.set-eyebrow { top: 266px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.set-title   { top: 304px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.set-desc    { top: 388px; font-size: 16px; line-height: 1.8; color: var(--body); }

.set-spec { top: 495px; font-size: 16px; line-height: 1.8; color: var(--body); }
.set-spec dt { float: left; clear: left; width: 40px; font-weight: 700; }  /* 값 시작 x=1072 = 1032+40 */
.set-spec dd { margin-left: 40px; }

.set-btn { top: 564px; }

/* ============================================================
   6. 피부의 균형을 깨우는 루틴
   ============================================================ */
.routine { height: 880px; background: #fff; }

.routine-head { position: absolute; top: 0; left: 0; width: 100%; text-align: center; }
.routine-head .section-title { margin-top: 12px; }

/* 스텝(번호·점·라벨)과 제품컷을 한 덩어리(.routine-item)로 묶었다.
   PC 는 4단 그리드에 타임라인으로 펼치고, 모바일은 가로로 넘기는 카드가 된다.
   4단 그리드는 시안의 402px + 24px 간격 = 1680 과 동일하게 나뉜다. */
.routine-track { position: absolute; top: 152px; left: 0; width: 100%; }

.routine-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* 시안 기준 152 ~ 877 */
.routine-item { position: relative; height: 725px; text-align: center; }

/* PC 에서는 묶음을 없는 것처럼 둬서 번호·라벨이 각자 자리를 잡게 한다.
   모바일에서만 가로 한 줄이 된다. */
.routine-meta { display: contents; }

.routine-no,
.routine-step {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 1.6;
    color: var(--navy-step);
}
.routine-no   { top: 0;    font-size: 20px; font-weight: 600; }
.routine-step { top: 86px; font-size: 20px; font-weight: 700; }

.routine-dot {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--navy-step);
}

/* 첫 점 ~ 마지막 점을 잇는 선. 한 칸의 절반 = (100% - 간격합) / 8 */
.steps-line {
    position: absolute;
    top: 56px;
    left: calc((100% - 72px) / 8);
    right: calc((100% - 72px) / 8);
    height: 1px;
    background: linear-gradient(90deg, #1f3050 0%, #5b7fb5 100%);
}

/* 제품컷 — 시안의 세로 위치와 폭을 그대로 유지한다 (칸 대비 %) */
.routine-item img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
}
.routine-item--skin    img { top: 148px; width: 37.8109%; }  /* 152 / 402 */
.routine-item--ampoule img { top: 204px; width: 40.0498%; }  /* 161 / 402 */
.routine-item--cream   img { top: 349px; width: 56.2189%; }  /* 226 / 402 */
.routine-item--sun     img { top: 120px; width: 93.7649%; }  /* 377 / 402 */

.routine-name,
.routine-desc { position: absolute; left: 0; width: 100%; }
.routine-name { top: 585px; font-size: 24px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.routine-desc { top: 639px; font-size: 16px; line-height: 1.8; color: var(--body); }
.routine-item--sun .routine-name { top: 590px; }
.routine-item--sun .routine-desc { top: 644px; }

/* 선크림 튜브 각인 */
.routine-emboss {
    position: absolute;
    top: 285px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Castoro Titling", serif;
    font-size: 15.526px;
    letter-spacing: 3.1052px;
    line-height: normal;
    color: var(--white);
    text-transform: capitalize;
    white-space: nowrap;
}

/* 모바일에서만 쓰는 진행바 */
.routine-bar { display: none; }

/* ============================================================
   7. 지금, 단아로
   ============================================================ */
.now { height: 1008px; background: #fff; }

.now-eyebrow,
.now-title { position: absolute; left: 0; width: 100%; text-align: center; }
.now-eyebrow { top: 160px; font-size: 14px; line-height: 1.6; color: var(--muted); text-transform: capitalize; }
.now-title   { top: 194px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink-2); }

.now-cards { position: absolute; top: 308px; left: 0; width: 100%; }
.now-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.now-card {
    position: relative;
    aspect-ratio: 402 / 500;
    border-radius: 12px;
    overflow: hidden;
}
.now-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 하단 그라데이션 — 시안: 높이 185(=37%), 투명도 80% */
.now-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 37%;
    opacity: .8;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
.now-card-logo {
    position: absolute;
    top: 46.93%;
    left: 25.44%;
    width: 48.86%;          /* 196.43 / 402 */
    height: auto;
    z-index: 1;
}

.now-card-text {
    position: absolute;
    left: 7.46%;            /* 30 / 402 */
    bottom: 8%;             /* 40 / 500 */
    z-index: 2;
    width: 53.23%;          /* 214 / 402 */
    color: var(--white);
}
.now-card-label { font-size: 14px; font-weight: 600; line-height: 1.6; }
.now-card-title { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.now-card-note  { margin-top: 8px; font-size: 16px; line-height: 1.6; }

/* ============================================================
   8. 맞춤형 피부 솔루션 (상담 CTA)
   ============================================================ */
.consult {
    height: 500px;
    background: linear-gradient(137.51deg, #010a28 38.931%, #374c73 65.087%, #9e9ea4 91.244%);
}

.consult-title,
.consult-desc { position: absolute; left: 0; width: 100%; text-align: center; color: var(--white); }
.consult-title { top: 110px; font-size: 40px; font-weight: 700; line-height: 1.6; }
.consult-desc  { top: 194px; font-size: 16px; line-height: 1.8; }

.consult-keys {
    position: absolute;
    top: 288px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--white);
    white-space: nowrap;
}
.consult-keys .bar { width: 1px; height: 15px; background: rgba(255, 255, 255, .6); }

.consult-btn {
    position: absolute;
    top: 348px;
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================================
   모바일 (≤768) — 시안 183:751 기준 390 폭
   세로 좌표는 시안 px 그대로, 가로는 20px 여백 기준.
   ============================================================ */

/* ============================================================
   화면을 따라다니는 구매상담 버튼 — 시안 183:3274(PC 140) / 218:4051(모바일 72)
   원·워드마크·글자를 직접 그린다. 이미지로 내보내면 그림자 여백이
   흰색으로 채워져 나와 배경이 하얗게 보인다.
   ============================================================ */
.consult-fab {
    position: fixed;
    right: 60px;
    bottom: 60px;
    z-index: 150;
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #355076;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    color: var(--white);
    text-align: center;
    transition: transform .2s ease;
}
.consult-fab:hover { transform: translateY(-2px); }

.consult-fab-mark {
    position: absolute;
    top: 51px;
    left: 50%;
    width: 111.309px;
    height: auto;
    transform: translateX(-50%);
}

.consult-fab span {
    position: absolute;
    top: 75.6px;            /* 시안: 아래끝 103.05 */
    left: 0;
    width: 100%;
    font-size: 19.6px;
    font-weight: 600;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .consult-fab { transition: none; }
}

/* ============================================================
   구매상담 팝업 — 시안 218:3693 (PC 310×405, 버튼 바로 위)
   모바일은 화면 폭을 꽉 채우는 바텀시트 (218:3763).
   ============================================================ */
.consult-pop[hidden] { display: none; }

.consult-pop-dim { display: none; }   /* PC 는 말풍선처럼 얹히므로 배경을 덮지 않는다 */

.consult-pop-panel {
    position: fixed;
    right: 60px;                    /* 버튼과 오른쪽을 맞춘다 */
    bottom: 220px;                  /* 버튼(140) + 아래여백(60) + 간격(20) */
    z-index: 160;
    width: 310px;
    height: 405px;
    border-radius: 12px;
    background: #f4f4f4;
    box-shadow: 0 4px 8px rgba(60, 60, 60, .16);
}

.consult-pop-logo {
    position: absolute;
    top: 31px;
    left: 24px;
    width: 123.057px;
    height: auto;
    filter: invert(1);              /* 흰 워드마크뿐이라 뒤집어 검정으로 쓴다 */
}

.consult-pop-close {
    position: absolute;
    top: 30px;
    right: 24px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.consult-pop-close span,
.consult-pop-close span::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 20px;
    height: 1.6px;
    background: var(--ink);
}
.consult-pop-close span { transform: rotate(45deg); }
.consult-pop-close span::before { top: 0; transform: rotate(-90deg); }

.consult-pop-lead {
    position: absolute;
    top: 70px;
    left: 24px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink);
}

/* ---- 입력 ---- */
.consult-field { position: absolute; left: 24px; width: 262px; }
.consult-field--name { top: 175px; }
.consult-field--tel  { top: 231px; }

.consult-label { display: none; }   /* PC 시안에서는 라벨을 감춘다 */

.consult-form input[type="text"],
.consult-form input[type="tel"] {
    width: 100%;
    height: 48px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
}
.consult-form input::placeholder { color: #999; }

/* 기본 포커스 테두리가 너무 세서 부드럽게 바꾼다 (키보드 사용자에겐 계속 보여야 한다) */
.consult-form input:focus,
.consult-agree input[type="checkbox"]:focus-visible,
.consult-submit:focus-visible,
.consult-pop-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(22, 33, 49, .35);
}

/* ---- 동의 ---- */
.consult-agree {
    position: absolute;
    top: 293px;
    left: 24px;
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.26px;
    color: var(--body);
    white-space: nowrap;
}
.consult-agree input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 2px 0 0;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.consult-agree input[type="checkbox"]:checked {
    border-color: var(--navy-btn);
    background: var(--navy-btn);
}
/* 체크 표시 — 선 두 개로 그린다 */
.consult-agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 5px;
    margin: 4px 0 0 3px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}
.consult-agree label { cursor: pointer; }
.consult-agree a { font-weight: 600; text-decoration: underline; }

/* ---- 제출 ---- */
.consult-submit {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 262px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--navy-btn);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
}

@media (max-width: 768px) {

    /* ---------- 1. 히어로 ---------- */
    .hero { height: 620px; }
    .hero .section-bg img { object-position: 36% center; }   /* 시안이 잡은 크롭 위치 */
    /* absolute 자식은 .inner 의 padding 을 무시하므로 좌표를 직접 준다 */
    .hero-copy {
        left: 20px;
        bottom: 40px;
        font-size: 26px;
        line-height: 1.4;
    }

    /* 버튼은 크기와 위치만 줄인다 */
    .consult-fab {
        right: 10px;
        bottom: 20px;
        width: 72px;
        height: 72px;
    }
    .consult-fab-mark { top: 25px; width: 57.243px; }
    .consult-fab span { top: 36.8px; font-size: 12px; }   /* 시안: 아래끝 53.63 */

    /* ---------- 2. 영원의 꽃 ---------- */
    .emortal-eyebrow { top: 70px; }
    .emortal-title   { top: 109px; font-size: 32px; line-height: 1.5; }
    .emortal-desc {
        top: 175px;
        left: 50%;
        width: 330px;
        transform: translateX(-50%);
    }
    .emortal-note { top: 336px; }
    .emortal-btn  { top: 385px; }

    /* ---------- 3. The Danaro Standard ---------- */
    /* 한 상태가 통째로 아래에서 올라와 쌓인다 */
    .standard-state {
        background: #fff;
        transform: translateY(100%);
        transition: transform .9s cubic-bezier(.16, 1, .3, 1);
        will-change: transform;
    }
    .standard-state.is-shown { transform: translateY(0); }

    .standard-label { top: 30px; left: 20px; }

    /* 이미지는 아래에 붙는다 — 상태 안에서는 움직이지 않는다 */
    .standard-visual,
    .standard-state.is-shown .standard-visual {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 370px;
        transform: none;
        transition: none;
    }

    /* 글은 제자리, 페이드 없이 상태와 함께 올라온다 */
    .standard-text,
    .standard-state.is-active .standard-text {
        position: static;
        opacity: 1;
        transition: none;
    }

    .standard-num { top: 77px; left: 20px; gap: 8px; }
    .standard-num .num  { font-size: 88px; }
    .standard-num .unit { margin-top: 51px; font-size: 36px; }
    .standard-text--ko .standard-num .unit { margin-top: 48px; }

    .standard-h3 {
        top: 191px;
        left: 20px;
        width: 311px;
        font-size: 26px;
        white-space: normal;
    }
    .standard-p {
        top: 241px;
        left: 20px;
        width: 311px;
        white-space: normal;
    }

    /* ---------- 4. Well-Aging ---------- */
    .wellaging { height: 520px; }
    .wellaging-label { top: 30px; }

    /* ---------- 5. 윤결세트 ---------- */
    .set { height: 843px; }
    .set-eyebrow { top: 462px; left: 20px; }
    .set-title   { top: 501px; left: 20px; font-size: 32px; line-height: 1.5; }
    .set-desc    { top: 567px; left: 20px; width: 293px; }
    .set-spec    { top: 670px; left: 20px; }
    .set-spec dt { width: 36px; }                      /* 값 시작 x=56 = 20+36 */
    .set-spec dd { margin-left: 36px; }
    .set-btn     { top: 729px; left: 20px; }

    /* ---------- 6. 루틴 — 가로로 넘기는 카드 ---------- */
    .routine { height: 761px; }
    .routine-head { top: 70px; }

    .routine-track { top: 199px; }
    .routine-track .inner { width: 100%; max-width: none; padding: 0; }

    .steps-line { display: none; }

    .routine-list {
        display: flex;
        gap: 20px;
        padding: 0 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .routine-list::-webkit-scrollbar { display: none; }

    .routine-item {
        flex: 0 0 350px;
        height: 518px;
        scroll-snap-align: start;
    }

    /* 번호 + 라벨이 한 줄로 */
    .routine-meta {
        display: flex;
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
    .routine-no,
    .routine-step {
        position: static;
        width: auto;
        font-size: 18px;
    }

    .routine-dot { top: 0; }

    /* 제품컷 — 시안 1번 카드(118.17 / top 69)에 맞춰 나머지도 같은 비율로 */
    .routine-item--skin    img { top: 69px;    width: 33.77%; }
    .routine-item--ampoule img { top: 119px;   width: 35.77%; }
    .routine-item--cream   img { top: 248px;   width: 50.21%; }
    .routine-item--sun     img { top: 44px;    width: 83.75%; }

    .routine-name,
    .routine-item--sun .routine-name { top: 409px; font-size: 22px; }
    .routine-desc,
    .routine-item--sun .routine-desc { top: 460px; }

    .routine-emboss { top: 150px; }

    /* 진행바 */
    .routine-bar {
        display: block;
        position: absolute;
        top: 757px;
        left: 50%;
        transform: translateX(-50%);
        width: 350px;
        height: 4px;
        background: #ddd;
    }
    .routine-bar span {
        display: block;
        width: 25%;
        height: 100%;
        background: var(--navy-btn);
        transition: transform .15s ease-out;
    }

    /* ---------- 7. 지금, 단아로 ---------- */
    /* 루틴(70/109/199)과 달리 이 섹션만 시안이 10px 아래다 */
    .now { height: 619px; }
    .now-eyebrow { top: 80px; }
    .now-title   { top: 119px; font-size: 32px; line-height: 1.5; }

    .now-cards { top: 197px; }
    .now-cards .inner { width: 100%; max-width: none; padding: 0; }

    .now-list {
        display: flex;
        gap: 17px;
        padding: 0 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .now-list::-webkit-scrollbar { display: none; }

    .now-card {
        flex: 0 0 281.4px;
        aspect-ratio: 281.4 / 350;
        border-radius: 0;
        scroll-snap-align: start;
    }
    /* 딤은 모바일이 더 높다 — 시안 190 / 350 */
    .now-card::after { height: 54.29%; }

    .now-card-text  { left: 20px; bottom: 28px; width: 149.8px; }
    .now-card-title { margin-top: 5.6px; font-size: 22px; line-height: 1.5; }
    .now-card-note  { margin-top: 5.6px; line-height: 1.8; }

    /* ---------- 8. 상담 CTA ---------- */
    /* 시안은 1920 폭 그라데이션의 가운데를 보여준다 */
    .consult {
        background-size: 1920px 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .consult-title { top: 111px; font-size: 32px; line-height: 1.5; }
    .consult-desc {
        top: 177px;
        left: 50%;
        width: 240px;
        transform: translateX(-50%);
    }
    .consult-keys { top: 292px; }
    .consult-btn  { top: 352px; }
}


/* ============================================================
   구매상담 팝업 — 모바일 (바텀시트, 시안 218:3763)
   ============================================================ */
@media (max-width: 768px) {
    /* 시트라서 뒤 화면을 덮어 둔다 (시안에 없는 부분 — 지우려면 이 블록만 빼면 된다) */
    .consult-pop-dim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 155;
        background: rgba(0, 0, 0, .4);
    }

    .consult-pop-panel {
        right: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 472px;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 8px rgba(60, 60, 60, .16);   /* 위로 드리운다 */
    }

    .consult-pop-logo { top: 30px; width: 130.954px; }
    .consult-pop-close { top: 30px; right: 24px; }

    .consult-pop-lead { top: 75px; font-size: 16px; line-height: 1.6; }

    /* 모바일에서는 라벨이 보인다 */
    .consult-field { width: calc(100% - 48px); }   /* 390 화면에서 시안의 342 */
    .consult-field--name { top: 184px; }
    .consult-field--tel  { top: 277px; }
    .consult-label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--ink);
    }

    .consult-agree { top: 364px; }
    .consult-agree input[type="checkbox"] { width: 20px; height: 20px; border-radius: 2.5px; }
    .consult-agree input[type="checkbox"]:checked::after { margin: 6px 0 0 5px; }

    /* 제출 버튼이 시트 아래 모서리를 꽉 채운다 */
    .consult-submit {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 52px;
        border-radius: 0;
        font-size: 18px;
        transform: none;
    }

    /* 시트가 떠 있는 동안에는 버튼을 감춘다 — 겹친다 */
    body.is-consult-open .consult-fab { display: none; }
}