@charset "utf-8";

/* ============================================================
   고르다치과의원 강남점 — 오스템 임플란트 랜딩 B (25만원안)
   시안: 랜딩페이지_25.jpg (1080 x 11745)

   좌표 체계
   - 시안 캔버스 폭 1080px 을 100cqw 로 둔다 (1cqw = 10.8px)
   - 시안 실측 px -> cqw 환산 = px / 10.8
   - .landing 이 container 이므로 1080px 이하에서 전 요소가 비례 축소된다
   ============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100%;
    background: #020016;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
    overflow-x: hidden;
}

.landing {
    position: relative;
    width: min(100vw, 1080px);
    margin: 0 auto;
    background: #020016;
    container-type: inline-size;
}

/* 시안 블록 이미지 (01 / 02 / 06 / 07 / cta-top / cta-bottom) */
.block-img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* 시안 블록 영상 (03 / 04 / 05 — gif 를 mp4 로 변환한 블록)
   mp4 는 yuv420p 제약으로 높이를 짝수(+1px)로 pad 했으므로
   --ar 에 시안 원본 비율을 주고 object-fit:cover 로 그 1px 을 잘라낸다. */
.block-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ar);
    object-fit: cover;
    object-position: top;
    background: #020016;
    user-select: none;
    pointer-events: none;
}

/* ============================================================
   상담폼 블록 — 시안 664px (블록 4 / 블록 11)
   상단여백100 + 필드130 + 간격18 + 필드130 + 간격37 + 버튼149 + 하단여백100
   ============================================================ */

.consult {
    padding: 9.2593cqw 0; /* 100px */
    background: #020016;
}

.consult__form {
    width: 82.963%; /* 896px */
    margin: 0 auto;
}

.consult__fields {
    display: flex;
    flex-direction: column;
    gap: 1.6667cqw; /* 18px */
}

.consult__field {
    display: flex;
    align-items: center;
    height: 12.037cqw; /* 130px */
    padding: 0 4.1667cqw; /* 45px */
    border: 0.2778cqw solid #ffffff; /* 3px */
    border-radius: 2.2222cqw; /* 24px */
    background: #2c293c;
}

.consult__label {
    flex: 0 0 19.2593cqw; /* 라벨 시작 142px -> placeholder 시작 348px */
    color: #ffffff;
    font-size: 4.3981cqw; /* 47.5px — 시안 잉크 높이 41px 기준 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.consult__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 5.3704cqw; /* 58px */
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.consult__input::placeholder {
    color: #51505e;
    opacity: 1;
}

.consult__input:-ms-input-placeholder {
    color: #51505e;
}

/* 개인정보 수집 동의 — 시안에 없던 요소(위버 지시로 추가)
   클래스명은 randinga 관행(privacy-row / privacy-checkbox / privacy-label) 승계,
   비주얼만 시안 폼 톤(어두운 남색 배경 + 하늘색 accent)에 맞춘다.
   이 블록이 폼 높이를 32(간격) + 40(체크박스) = 72px 늘린다. */
.privacy-row {
    display: flex;
    align-items: center;
    gap: 1.8519cqw; /* 20px */
    /* 상하 패딩으로 터치 영역을 행 전체(72px)로 넓힌다.
       margin 대신 padding 을 쓰므로 폼이 늘어나는 총량은 72px 그대로다. */
    padding: 2.2222cqw 0 0.7407cqw; /* 24px 0 8px */
    cursor: pointer;
}

.privacy-checkbox {
    position: relative;
    flex: 0 0 3.7037cqw; /* 40px */
    width: 3.7037cqw;
    height: 3.7037cqw;
    margin: 0;
    border: 0.1852cqw solid #ffffff; /* 2px */
    border-radius: 0.5556cqw; /* 6px */
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.privacy-checkbox:checked {
    border-color: #00deff;
    background: #00deff;
}

.privacy-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 34%;
    width: 28%;
    height: 54%;
    border-right: 0.2778cqw solid #020016; /* 3px */
    border-bottom: 0.2778cqw solid #020016;
    transform: rotate(45deg);
}

.privacy-label {
    color: #ffffff;
    font-size: 2.7778cqw; /* 30px */
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: underline;
    text-underline-offset: 0.463cqw; /* 5px */
    cursor: pointer;
}

.consult__submit {
    display: block;
    width: 100%;
    height: 13.7963cqw; /* 149px */
    margin-top: 3.4259cqw; /* 37px */
    border: 0;
    border-radius: 2.2222cqw; /* 24px */
    background: linear-gradient(180deg, #75eaff 0%, #14d4ff 100%);
    color: #000000;
    font-family: inherit;
    font-size: 5.1296cqw; /* 55.4px — 시안 잉크 높이 48px 기준 */
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.consult__submit:active {
    filter: brightness(0.94);
}

/* ============================================================
   개인정보 동의 행 — 토글 영역과 [상세보기] 분리
   이전에는 label.privacy-row 가 행 전체(100%)를 체크박스 토글 영역으로
   먹어 모달 트리거를 넣을 자리가 없었다. 토글은 label.privacy-agree 안쪽만.
   행 높이(72px)는 그대로 유지된다.
   ============================================================ */
.privacy-row {
    display: flex;
    align-items: center;
    gap: 1.2963cqw; /* 14px — 동의 라벨과 [상세보기] 사이 */
    padding: 2.2222cqw 0 0.7407cqw; /* 24px 0 8px */
}

/* 체크박스 토글 영역 = 이 label 안쪽만 */
.privacy-agree {
    display: flex;
    align-items: center;
    gap: 1.8519cqw; /* 20px */
    cursor: pointer;
}

/* [상세보기] — 모달 트리거. label 밖이라 눌러도 체크박스가 토글되지 않는다.
   상하 padding 6px 으로 터치 영역을 체크박스 높이(40px)와 같게 맞춘다. */
.privacy-more {
    padding: 0.463cqw 0.9259cqw; /* 5px 10px — 6px 면 버튼이 42px 가 되어 행이 2px 늘어난다 */
    margin-left: -0.9259cqw; /* 좌측 padding 만큼 되돌려 시각 간격을 14px 로 유지 */
    border: 0;
    background: transparent;
    color: #00deff;
    font-family: inherit;
    font-size: 2.7778cqw; /* 30px */
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: underline;
    text-underline-offset: 0.463cqw; /* 5px */
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.privacy-more:active {
    opacity: 0.65;
}

/* 모바일 터치 보정 — 시안 캔버스(1080)가 390px 폰에서 0.36배로 축소되므로
   버튼 자체 높이(40px)는 렌더 14px 밖에 안 된다. 레이아웃에 영향을 주지 않는
   투명 히트영역을 위아래로 16px 씩 넓혀 오조작을 줄인다.
   (위 여백 24px · 아래 여백 8px+37px 안이라 인접 요소와 겹치지 않는다) */
.privacy-more::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6.6667cqw; /* 72px */
    transform: translateY(-50%);
}

/* 하단 주의문구 (고객 제공 이미지 문구) */
.disclaimer {
    padding: 4.6296cqw 3.7037cqw 6.4815cqw; /* 50px 40px 70px */
    background: #020016;
    color: #8e8ca3;
    font-size: 2.5926cqw; /* 28px */
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: keep-all;
}

/* ============================================================
   실시간 상담 대기 현황 — 시안 979px (블록 12, 소스 이미지 없음)
   ============================================================ */

.live {
    position: relative;
    height: 90.6481cqw; /* 979px */
    padding-top: 9.2593cqw; /* pill top 100px */
    background: #020016;
    overflow: hidden;
    text-align: center;
}

/* 헤더 LIVE 배지 — 150 x 50, 빨강 */
.live__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8333cqw; /* 9px */
    width: 13.8889cqw; /* 150px */
    height: 4.6296cqw; /* 50px */
    border: 0.1852cqw solid #fe0000; /* 2px */
    border-radius: 999px;
    background: #08121e;
    vertical-align: top;
}

.live__badge-dot {
    width: 1.9444cqw; /* 21px */
    height: 1.9444cqw;
    border-radius: 50%;
    background: #fe0000;
}

.live__badge-text {
    color: #fe0000;
    font-size: 2.5926cqw; /* 28px */
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* 헤드라인 — 실측 잉크 폭 751px / 높이 79px */
.live__title {
    margin-top: 2.3704cqw; /* 25.6px */
    color: #ffffff;
    font-size: 8.1296cqw; /* 87.8px — 시안 잉크 높이 79px 기준 */
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.016em;
    white-space: nowrap;
}

.live__title em {
    color: #fe0000;
    font-style: normal;
}

/* 서브 카피 2줄 — 잉크 높이 25px / 줄간격 37px */
.live__desc {
    margin-top: 3.8519cqw; /* 41.6px */
    color: #ffffff;
    font-size: 2.713cqw; /* 29.3px — 시안 잉크 높이 25px 기준 */
    font-weight: 600;
    line-height: 1.263; /* 37px */
}

/* 리스트 — 첫 행 상단 441px, 행 높이 120px x 4 */
.live__list {
    width: 82.963%; /* 896px */
    margin: 5.7407cqw auto 0; /* 62px */
    list-style: none;
}

.live__row {
    position: relative;
    display: flex;
    align-items: center;
    height: 11.1111cqw; /* 120px */
    text-align: left;
}

.live__row + .live__row {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* 행 LIVE 배지 — 100 x 35, 하늘색 */
.live__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9259cqw; /* 10px */
    flex: 0 0 9.2593cqw; /* 100px */
    height: 3.2407cqw; /* 35px */
    border: 0.1852cqw solid #00deff; /* 2px */
    border-radius: 999px;
}

.live__tag-dot {
    width: 0.9259cqw; /* 10px */
    height: 0.9259cqw;
    border-radius: 50%;
    background: #00deff;
}

.live__tag-text {
    color: #00deff;
    font-size: 1.7593cqw; /* 19px */
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* 이름 — 잉크 시작 213px (배지 우측 191px 기준 +22px) */
.live__name {
    flex: 0 0 auto;
    margin-left: 2.037cqw; /* 22px */
    margin-right: auto;
    color: #ffffff;
    font-size: 2.3519cqw; /* 25.4px — 시안 잉크 높이 21px 기준 */
    font-weight: 700;
    line-height: 1;
}

/* 신청 내용 — 컨테이너 중앙 정렬 */
.live__act {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4d4d4;
    font-size: 1.9074cqw; /* 20.6px — 시안 잉크 높이 17px 기준 */
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* 경과 시간 + 점 */
.live__time {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 1.9074cqw; /* 20.6px */
    font-weight: 600;
    line-height: 1;
}

.live__time-dot {
    flex: 0 0 auto;
    width: 0.8333cqw; /* 9px */
    height: 0.8333cqw;
    margin-left: 1.2963cqw; /* 14px */
    border-radius: 50%;
    background: #00deff;
}

/* 하단 페이드 — 시안 y720~979 구간에서 흰빛이 차오른다 */
.live__fade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 26.4815cqw; /* 286px (블록 하단 720~979 + 여유) */
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 17%,
        rgba(255, 255, 255, 0.26) 32%,
        rgba(255, 255, 255, 0.37) 48%,
        rgba(255, 255, 255, 0.46) 64%,
        rgba(255, 255, 255, 0.53) 81%,
        rgba(255, 255, 255, 0.6) 100%
    );
}

/* 전송 응답 주입 영역 */
#dummy {
    display: block;
}

/* container query 미지원 폴백 — 1cqw 를 1vw 로 근사 (1080px 이하에서 동일) */
@supports not (container-type: inline-size) {
    .consult {
        padding: 9.2593vw 0;
    }
    .consult__fields {
        gap: 1.6667vw;
    }
    .consult__field {
        height: 12.037vw;
        padding: 0 4.1667vw;
        border-width: 0.2778vw;
        border-radius: 2.2222vw;
    }
    .consult__label {
        flex-basis: 19.2593vw;
        font-size: 4.3981vw;
    }
    .consult__input {
        font-size: 5.3704vw;
    }
    .privacy-row {
        gap: 1.2963vw;
        padding: 2.2222vw 0 0.7407vw;
    }
    .privacy-agree {
        gap: 1.8519vw;
    }
    .privacy-more {
        padding: 0.463vw 0.9259vw;
        margin-left: -0.9259vw;
        font-size: 2.7778vw;
        text-underline-offset: 0.463vw;
    }
    .privacy-more::before {
        height: 6.6667vw;
    }
    .disclaimer {
        padding: 4.6296vw 3.7037vw 6.4815vw;
        font-size: 2.5926vw;
    }
    .privacy-checkbox {
        flex-basis: 3.7037vw;
        width: 3.7037vw;
        height: 3.7037vw;
        border-width: 0.1852vw;
        border-radius: 0.5556vw;
    }
    .privacy-checkbox:checked::after {
        border-right-width: 0.2778vw;
        border-bottom-width: 0.2778vw;
    }
    .privacy-label {
        font-size: 2.7778vw;
        text-underline-offset: 0.463vw;
    }
    .consult__submit {
        height: 13.7963vw;
        margin-top: 3.4259vw;
        border-radius: 2.2222vw;
        font-size: 5.1296vw;
    }
    .live {
        height: 90.6481vw;
        padding-top: 9.2593vw;
    }
    .live__badge {
        gap: 0.8333vw;
        width: 13.8889vw;
        height: 4.6296vw;
        border-width: 0.1852vw;
    }
    .live__badge-dot {
        width: 1.9444vw;
        height: 1.9444vw;
    }
    .live__badge-text {
        font-size: 2.5926vw;
    }
    .live__title {
        margin-top: 2.3704vw;
        font-size: 8.1296vw;
    }
    .live__desc {
        margin-top: 3.8519vw;
        font-size: 2.713vw;
    }
    .live__list {
        margin-top: 5.7407vw;
    }
    .live__row {
        height: 11.1111vw;
    }
    .live__tag {
        gap: 0.9259vw;
        flex-basis: 9.2593vw;
        height: 3.2407vw;
        border-width: 0.1852vw;
    }
    .live__tag-dot {
        width: 0.9259vw;
        height: 0.9259vw;
    }
    .live__tag-text {
        font-size: 1.7593vw;
    }
    .live__name {
        margin-left: 2.037vw;
        font-size: 2.3519vw;
    }
    .live__act {
        font-size: 1.9074vw;
    }
    .live__time {
        font-size: 1.9074vw;
    }
    .live__time-dot {
        width: 0.8333vw;
        height: 0.8333vw;
        margin-left: 1.2963vw;
    }
    .live__fade {
        height: 26.4815vw;
    }
}

/* ============================================================
   LIVE 대기현황 — 경과시간 옆 점 빛남 + 깜빡임
   (고객 요청 2026-08-21 · randinga glow pulse 표현 계승)
   ============================================================ */

.live__time-dot {
    animation: liveDotPulse 1.8s ease-in-out infinite;
}

/* 행마다 위상을 어긋내 자연스럽게 */
.live__row:nth-child(2) .live__time-dot {
    animation-delay: 0.45s;
}

.live__row:nth-child(3) .live__time-dot {
    animation-delay: 0.9s;
}

.live__row:nth-child(4) .live__time-dot {
    animation-delay: 1.35s;
}

@keyframes liveDotPulse {
    0%,
    12% {
        opacity: 0.45;
        box-shadow: 0 0 0 0 rgba(0, 222, 255, 0);
    }
    45% {
        opacity: 1;
        box-shadow: 0 0 1.1cqw 0.37cqw rgba(0, 222, 255, 0.85);
    }
    68% {
        opacity: 0.8;
        box-shadow: 0 0 1.48cqw 0.56cqw rgba(0, 222, 255, 0.3);
    }
    85%,
    100% {
        opacity: 0.45;
        box-shadow: 0 0 0 0 rgba(0, 222, 255, 0);
    }
}

/* container query 미지원 폴백 */
@supports not (container-type: inline-size) {
    .live__time-dot {
        animation-name: liveDotPulseVw;
    }

    @keyframes liveDotPulseVw {
        0%,
        12% {
            opacity: 0.45;
            box-shadow: 0 0 0 0 rgba(0, 222, 255, 0);
        }
        45% {
            opacity: 1;
            box-shadow: 0 0 1.1vw 0.37vw rgba(0, 222, 255, 0.85);
        }
        68% {
            opacity: 0.8;
            box-shadow: 0 0 1.48vw 0.56vw rgba(0, 222, 255, 0.3);
        }
        85%,
        100% {
            opacity: 0.45;
            box-shadow: 0 0 0 0 rgba(0, 222, 255, 0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .live__time-dot {
        animation: none;
        opacity: 1;
        box-shadow: 0 0 0.9cqw 0.28cqw rgba(0, 222, 255, 0.55);
    }
}
/* ============================================================
   개인정보 전문 모달
   .landing 은 container-type:inline-size(= layout containment) 라
   그 안에서는 position:fixed 의 기준이 .landing 이 된다.
   그래서 마크업을 main 밖에 두었고, 치수도 cqw 가 아닌 뷰포트 단위로 잡는다.
   ============================================================ */
.pv-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
}

/* [hidden] 은 display:flex 에 지므로 명시적으로 눌러 준다 */
.pv-modal[hidden] {
    display: none;
}

.pv-modal__dim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.74);
}

.pv-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(90vw, 620px);
    max-height: min(84vh, 780px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: #16132b;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.pv-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 12px 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #1d1a36;
}

.pv-modal__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.pv-modal__close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pv-modal__close:active {
    background: rgba(255, 255, 255, 0.2);
}

.pv-modal__body {
    flex: 1;
    min-height: 0;
    padding: 18px 20px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #d7d5e4;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.68;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

.pv-modal__body p {
    margin: 0;
}

.pv-modal__lead {
    margin: 0 0 18px !important;
    color: #ffffff;
    font-weight: 700;
}

.pv-modal__h {
    margin: 20px 0 6px !important;
    color: #00deff;
    font-weight: 700;
    line-height: 1.5;
}

.pv-modal__li {
    padding-left: 0.85em;
    text-indent: -0.85em;
}

.pv-modal__agree {
    margin-top: 22px !important;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 700;
}

/* 모달 열림 시 배경 스크롤 잠금 */
body.pv-modal-open {
    overflow: hidden;
}