@charset "utf-8";

/*
 * 메인 리뉴얼 섹션 (Figma PC 1920 / MO 390)
 *   .mc-*  맞춤 임플란트 진료 카드 4개 + 의사 사진 (Frame 59213 / 모바일 Frame 59343·59306)
 *   .mr-*  임플란트 후기 슬라이더 (Frame 59212 / 모바일 Frame 191)
 * 이전에는 이 두 영역이 Figma 이미지 한 장씩(main_renewal/01·02_*.png)이었다.
 */
.mc-section, .mr-section {width: 100%; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; color: #1C1C1C; word-break: keep-all;}
.mc-section *, .mr-section * {box-sizing: border-box;}
.mc-section h2, .mc-section p, .mr-section h2, .mr-section p, .mr-section figure {margin: 0; padding: 0;}
.mc-mo, .mr-mo {display: none;}
/* common.css:22 의 리셋이 nav·section·figure 에 overflow:hidden 을 걸어 카드 그림자가 영역 경계에서 잘린다 */
.mc-section, .mc-cards, .mc-visual, .mr-section {overflow: visible;}

/* ═════════ 맞춤 임플란트 진료 ═════════ */
.mc-section {display: flex; flex-direction: column; align-items: center; gap: 70px; padding: 160px 24px 130px; background: #fff;}
.mc-head {display: flex; flex-direction: column; align-items: center; gap: 20px; width: 1127px; max-width: 100%; height: 116px; text-align: center;}
.mc-head__title {font-size: 50px; font-weight: 700; line-height: 60px; letter-spacing: -1px; white-space: nowrap;}
.mc-head__title em {font-style: normal; color: #3D5796;}
.mc-head__sub {font-size: 25px; font-weight: 500; line-height: 36px; letter-spacing: -0.5px; color: #7E7E7E; white-space: nowrap;}
.mc-body {display: flex; align-items: center; justify-content: center; gap: 44px; width: 100%;}
.mc-cards {display: flex; flex-direction: column; flex: none; gap: 15px; width: 475px;}
.mc-card {display: flex; align-items: center; justify-content: flex-start; gap: 20px; height: 140px; padding: 0 30px; border-radius: 10px; background: #fff; color: #1C1C1C; text-decoration: none; box-shadow: 0 6px 12.5px rgba(0,0,0,0.1);}
.mc-card--navy {background: #243359; color: #fff;}
.mc-card__icon {flex: none; width: 64px; height: 64px; background: no-repeat; background-size: 128.13% 128.13%; background-position: 50% 58.7%;}
.mc-card--1 .mc-card__icon {height: 74px; background-image: url(../images/main_renewal/v2/card_icon_1.webp); background-size: 90.96% 90.96%; background-position: 53.5% 44.8%;}
.mc-card--2 .mc-card__icon {background-image: url(../images/main_renewal/v2/card_icon_2.webp);}
.mc-card--3 .mc-card__icon {background-image: url(../images/main_renewal/v2/card_icon_3.webp); background-size: 105.36% 105.36%; background-position: 8.7% 100%;}
.mc-card--4 .mc-card__icon {background-image: url(../images/main_renewal/v2/card_icon_4.webp); background-size: 131.25% 131.25%; background-position: 50% 57.8%;}
.mc-card__text {display: flex; flex: none; flex-direction: column; width: 265px; min-width: 0; line-height: 40px;}
.mc-card__text span {font-size: 22px; font-weight: 400; letter-spacing: -0.44px;}
.mc-card__text strong {font-size: 28px; font-weight: 600; letter-spacing: -0.56px; color: #3D5796; white-space: nowrap;}
.mc-card--navy .mc-card__text strong {color: #fff;}
.mc-card__arrow {flex: none; width: 36px; height: 36px; margin-top: 0; background: url(../images/main_renewal/v2/arrow_blue.svg) center / 100% 100% no-repeat; transform: rotate(180deg);}
.mc-card--navy .mc-card__arrow {background-image: url(../images/main_renewal/v2/arrow_white.svg);}
.mc-visual {display: flex; flex-direction: column; flex: none; gap: 50px; width: 1063px;}
.mc-photo {width: 100%; height: 494px; border-radius: 10px 0 0 10px; background: #fff url(../images/main_renewal/v2/card_photo.webp) 0.4% 38.9% / 102.2% 166.28% no-repeat; box-shadow: 0 5px 12.5px rgba(0,0,0,0.1);}
.mc-quote {font-family: 'KCC-Sonkeechung', 'Noto Sans KR', sans-serif; font-size: 40px; font-weight: 400; line-height: 50px; letter-spacing: -0.8px; text-align: center;}

/* ═════════ 임플란트 후기 슬라이더 ═════════ */
.mr-section {display: flex; flex-direction: column; align-items: center; gap: 70px; padding: 140px 0 160px; background: #F4F6FB;}
.mr-head {display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;}
.mr-head__lead {font-size: 25px; font-weight: 500; line-height: 30px; letter-spacing: -0.5px; color: #7E7E7E;}
.mr-head__title {font-size: 50px; font-weight: 700; line-height: 60px; letter-spacing: -1px;}
.mr-slider {--mr-a: 70px; --mr-gap: 130px; display: flex; align-items: center; justify-content: center; gap: var(--mr-gap); width: 100%;}
.mr-arrow {flex: none; width: var(--mr-a); height: var(--mr-a); padding: 0; border: 0; border-radius: 50%; background: url(../images/main_renewal/v2/pc_arrow_prev.svg) center / 100% 100% no-repeat; cursor: pointer;}
.mr-arrow--next {background-image: url(../images/main_renewal/v2/pc_arrow_next.svg); transform: rotate(180deg);}
.mr-stage {display: flex; width: min(1090px, calc(100vw - 2 * (var(--mr-a) + var(--mr-gap)))); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none;}
.mr-stage::-webkit-scrollbar {display: none;}
.mr-case {position: relative; display: flex; flex: 0 0 100%; gap: 30px; width: 100%; scroll-snap-align: start; color: inherit; text-decoration: none; -webkit-user-drag: none;}
.mr-pane {position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 0; height: 360px; overflow: hidden; border-radius: 20px; background: #000;}
.mr-pane img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none;}
.mr-pane.is-locked img {opacity: 0.55;}
.mr-pane figcaption {position: relative; display: flex; align-items: center; justify-content: center; height: 81px; padding-bottom: 2px; font-size: 35px; font-weight: 600; line-height: 1; letter-spacing: -0.7px; color: #fff;}
.mr-pane--before figcaption {background: #7E7E7E;}
.mr-pane--after figcaption {background: #1E2B4B; color: #FFD83B;}
.mr-lock-text {position: absolute; top: 31.7%; left: 0; right: 0; font-size: 22px; font-weight: 500; line-height: 38.458px; letter-spacing: -0.44px; text-align: center; color: #fff;}
.mr-lock-badge {position: absolute; top: 50%; left: -71.5px; z-index: 2; width: 113px; height: 113px; border-radius: 50%; background: #fff url(../images/main_renewal/v2/lock.svg) center / 48.07px 64.56px no-repeat; transform: translateY(-50%); filter: drop-shadow(0 5px 7.5px rgba(0,0,0,0.25));}
.mr-pane--after {overflow: visible; border-radius: 20px;}
.mr-pane--after img {border-radius: 20px;}
.mr-pane--after figcaption {border-radius: 0 0 20px 20px;}
.mr-pane--before figcaption {border-radius: 0 0 20px 20px;}
.mr-pane--before img {border-radius: 20px;}
/* 후기 1~3번: 사진 영역을 캡션 띠(81px) 위까지로 제한 — 하단(임플란트 식립부)이 띠에 가려지지 않게 한다 */
.mr-case:nth-child(-n+3) .mr-pane img {height: calc(100% - 81px); border-radius: 20px 20px 0 0;}

/* ═════════ 769~1280px: 태블릿·소형 노트북 ═════════ */
@media screen and (min-width: 769px) and (max-width: 1280px) {
    .mc-section {gap: clamp(48px, 5.5vw, 70px); padding: clamp(100px, 12.5vw, 160px) 24px clamp(80px, 10vw, 130px);}
    .mc-head__title {font-size: clamp(32px, 3.9vw, 50px);}
    .mc-head {height: auto;}
    .mc-head__title {line-height: 1.3; white-space: normal;}
    .mc-head__sub {font-size: clamp(16px, 1.95vw, 25px); line-height: 1.5; white-space: normal;}
    .mc-body {flex-direction: column; gap: 40px;}
    .mc-cards {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(960px, 100%);}
    .mc-card {padding: 0 clamp(14px, 2.4vw, 30px); gap: clamp(10px, 1.6vw, 20px);}
    .mc-card__text {flex: 1; width: auto; min-width: 0;}
    .mc-card__text strong {white-space: normal;}
    .mc-card__icon {width: clamp(44px, 5vw, 64px); height: clamp(44px, 5vw, 64px);}
    .mc-card--1 .mc-card__icon {height: clamp(51px, 5.8vw, 74px);}
    .mc-card__text strong {font-size: clamp(20px, 2.2vw, 28px);}
    .mc-card__text span {font-size: clamp(15px, 1.7vw, 22px);}
    .mc-visual {gap: 30px; width: min(960px, 100%);}
    .mc-photo {height: clamp(300px, 46vw, 494px);}
    .mc-quote {font-size: clamp(24px, 3.1vw, 40px);}

    .mr-section {gap: clamp(48px, 5.5vw, 70px); padding: clamp(100px, 11vw, 140px) 0 clamp(100px, 12.5vw, 160px);}
    .mr-head__lead {font-size: clamp(16px, 1.95vw, 25px);}
    .mr-head__title {font-size: clamp(32px, 3.9vw, 50px);}
    .mr-slider {--mr-a: clamp(40px, 5.5vw, 70px); --mr-gap: clamp(16px, 6.8vw, 130px);}
    .mr-case {gap: clamp(16px, 2.35vw, 30px);}
    .mr-pane {height: auto; aspect-ratio: 530 / 360; border-radius: clamp(12px, 1.56vw, 20px);}
    .mr-pane figcaption {height: 22.5%; font-size: clamp(20px, 2.73vw, 35px);}
    .mr-case:nth-child(-n+3) .mr-pane img {height: 77.5%; border-radius: clamp(12px, 1.56vw, 20px) clamp(12px, 1.56vw, 20px) 0 0;}
    .mr-lock-text {font-size: clamp(13px, 1.72vw, 22px); line-height: 1.75;}
    .mr-lock-badge {width: clamp(70px, 8.8vw, 113px); height: clamp(70px, 8.8vw, 113px); left: calc(clamp(16px, 2.35vw, 30px) / -2 - clamp(70px, 8.8vw, 113px) / 2); background-size: 42.5% auto;}
}

/* ═════════ ~768px: 모바일 (390px 시안) ═════════ */
@media screen and (max-width: 768px) {
    .mc-mo, .mr-mo {display: inline;}

    .mc-section {gap: 0; padding: 31.5px 0 9.5px;}
    .mc-head {gap: 7px; width: 288px; max-width: 100%; height: auto;}
    .mc-head__title {height: 150px; padding: 10px; font-size: 35px; line-height: 43px; letter-spacing: -0.7px; white-space: nowrap;}
    .mc-head__sub {height: 87px; font-size: 15px; line-height: 22px; letter-spacing: -0.3px; white-space: nowrap;}
    .mc-body {flex-direction: column; gap: 0; padding-top: 5px;}
    .mc-cards {gap: 12px; width: 100%; padding: 10px 30px;}
    .mc-card {position: relative; gap: 0; height: 86px; padding: 0; border-radius: 4.844px; box-shadow: 0 2.907px 12.11px rgba(0,0,0,0.1);}
    .mc-card__icon {flex: none; width: 48.27px; height: 48.27px; margin: 0 18px 0 50px;}
    .mc-card--1 .mc-card__icon {width: 40px; height: 46px; margin: 0 20px 0 56px; background-size: 100% 100%; background-position: center;}
    .mc-card--2 .mc-card__icon {background-size: 128.13% 128.13%; background-position: 50% 58.7%;}
    .mc-card--3 .mc-card__icon {width: 60.65px; margin: 0 7.5px 0 50.4px; background-size: 86.67% 100%; background-position: -8% 50%;}
    .mc-card--4 .mc-card__icon {margin: 0 18px 0 52.2px; background-size: 131.25% 131.25%; background-position: 58.2% 57.8%;}
    .mc-card__text {flex: 1; width: auto; line-height: 24px;}
    .mc-card__text span {font-size: 13.7px; line-height: 23.5px; letter-spacing: -0.27px;}
    .mc-card__text strong {font-size: 17.4px; line-height: 24px; letter-spacing: -0.35px;}
    .mc-card__arrow {position: absolute; top: 50%; right: 15px; width: 22px; height: 22px; margin-top: -11px;}
    .mc-visual {gap: 0; width: min(390px, 100%); margin-top: 67px;}
    .mc-photo {height: 244px; border-radius: 3.5px 3.5px 0 0; background-size: cover; background-position: center;}
    .mc-quote {display: flex; align-items: center; justify-content: center; height: 160px; padding: 0 10px; background: #fff; border-radius: 0 0 3.5px 3.5px; box-shadow: 0 2.42px 12.11px rgba(0,0,0,0.1); font-size: 22px; line-height: 35px; letter-spacing: -0.44px;}

    .mr-section {gap: 40px; padding: 52px 0 100px;}
    .mr-head {gap: 10px;}
    .mr-head__lead {font-size: 17px; line-height: 25px; letter-spacing: -0.34px;}
    .mr-head__title {font-size: 35px; line-height: 42px; letter-spacing: -0.7px;}
    .mr-slider {position: relative; display: block; width: 100%;}
    .mr-stage {width: 100%;}
    .mr-case {flex: 0 0 200%; width: 200%; gap: 0; scroll-snap-align: none;}
    .mr-pane {flex: 0 0 50%; height: 260px; border-radius: 0; scroll-snap-align: start;}
    .mr-pane img, .mr-pane--before img, .mr-pane--after img {border-radius: 0;}
    .mr-pane--after {overflow: hidden; border-radius: 0;}
    .mr-pane figcaption, .mr-pane--before figcaption, .mr-pane--after figcaption {height: 40px; padding-bottom: 0; border-radius: 0; font-size: 16px; letter-spacing: -0.32px;}
    .mr-case:nth-child(-n+3) .mr-pane img {height: calc(100% - 40px); border-radius: 0;}
    .mr-lock-text {top: auto; bottom: 60px; font-size: 20px; line-height: 30px; letter-spacing: -0.4px;}
    .mr-lock-badge {top: 38px; left: 50%; width: 46px; height: 62px; border-radius: 0; background: url(../images/main_renewal/v2/lock.svg) center / 46px 62px no-repeat; transform: translateX(-50%); filter: none;}
    .mr-arrow {position: absolute; top: 112px; z-index: 3; width: 30px; height: 30px;}
    .mr-arrow--prev {left: 20px;}
    .mr-arrow--next {right: 20px;}
}

/* ═════════ 481~768px: 큰 폰·태블릿 세로 — 390px 시안을 한 단계 확대 ═════════ */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .mc-head {width: min(480px, 100%);}
    .mc-head__title {font-size: 42px; letter-spacing: -0.84px;}
    .mc-head__sub {font-size: 18px; line-height: 26px;}
    .mc-cards {width: min(560px, 100%);}
    .mc-card {height: 100px; padding-right: 30px;}
    .mc-card__text span {font-size: 16px;}
    .mc-card__text strong {font-size: 21px;}
    .mc-visual {width: min(560px, 100%);}
    .mc-photo {height: 300px;}
    .mc-quote {height: 190px; font-size: 26px; line-height: 40px;}

    .mr-head__lead {font-size: 19px;}
    .mr-head__title {font-size: 42px;}
    .mr-slider {width: min(560px, 100%); margin: 0 auto;}
    .mr-pane {height: auto; aspect-ratio: 3 / 2;}
    .mr-arrow {top: calc(50% - 20px); width: 40px; height: 40px;}
    .mr-lock-text {bottom: 22%; font-size: 22px; line-height: 33px;}
}

/* ═════════ 메인 나머지 영역: PC 시안 일치 (1281px 이상) ═════════
 * Figma 메인_3(미디어 1029) · 메인_4(병원 둘러보기 890) · 메인_5(진료시간 663) · 메인_6(오시는 길 1130).
 * 텍스트 데이터(진료시간·주소)는 실제 값을 유지하고 크기·간격·글꼴만 시안에 맞춘다.
 * 헤더 줄 높이를 지정하는 것은 시안이 제목 60px / 라벨 30px 로 고정돼 있기 때문이다. */
@media screen and (min-width: 1281px) {
    /* 메인_3 미디어: 140 + 헤더 110 + 70 + 영상 569 + 140 = 1029 */
    .media-section {padding: 140px 0;}
    .media-section:not(.interior-wrap) .media-inner {width: 1010px; gap: 70px;}
    .media-section .media-header {gap: 20px;}
    .media-section .media-header__label {font-size: 25px; line-height: 30px; color: #3D5796;}
    .media-section .media-header__title {font-size: 50px; line-height: 60px; letter-spacing: -1px;}
    .media-section:not(.interior-wrap) .media-video {width: 1010px; height: 569px; aspect-ratio: auto; border-radius: 0;}

    /* 메인_4 병원 둘러보기: 140 + 110 + 70 + 430 + 140 = 890, 카드 677×430 간격 20, 가운데 카드가 중앙 */
    .media-section.interior-wrap .media-inner {gap: 70px;}
    .interior-slider-outer {height: 430px; min-height: 0;}
    .interior-cards {gap: 20px;}
    .interior-card {width: 677px;}
    #interiorPrev {left: 59px;}
    #interiorNext {right: 61px;}

    /* 메인_5 진료시간: 제목 60 → 막대(95~100) → 70 → 표(y 310) , 표 398 + 60 + 구분선 + 60 + 연락처 279 */
    .hours-section {padding: 140px 0 107px;}
    .hours-inner {gap: 70px;}
    .hours-header {gap: 0;}
    .hours-header__title {line-height: 60px;}
    .hours-header__bar {width: 70px; height: 5px; margin-top: 35px;}
    .hours-content .inner {width: 797px; gap: 0; justify-content: space-between;}
    .hours-table {width: 398px; gap: 30px;}
    .hours-table__rows {gap: 12px;}
    .hours-table__row {justify-content: flex-start; gap: 100px; padding-left: 22px;}
    .hours-table__day {width: 72px; margin-left: 0;}
    .hours-table__time {margin-right: 0;}
    .hours-contact {width: 279px; gap: 15px;}
    /* style.css 의 `border-left: 1.clamp(...)` 는 잘못된 값이라 구분선이 통째로 사라진다 */
    .hours-divider {border-left: 1px solid #E4E4E4;}

    /* 메인_6 오시는 길: 140 + 제목 60 → 막대 → 주소(y 140, 36px) + 70 + 지도 745 */
    .map-section {padding: 140px 0 0; gap: 70px;}
    .map-header {gap: 0;}
    .map-header__title {line-height: 60px;}
    .map-header__bar {width: 70px; height: 5px; margin-top: 35px;}
    .map-header__address {margin-top: 40px; font-size: 30px; line-height: 36px; letter-spacing: -0.6px;}
    .map-wrap #kakao_map_main {height: 745px !important;}
}