@charset "utf-8";

/* [1] 타이틀 및 공통 규격 (PC 기준) */
#sub-page-container { width: 100%; overflow: hidden; }
.sub-visual { height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.sub-visual .main-title { font-size: 42px; font-weight: 700; letter-spacing: -1px; }
.content-header { padding: 80px 0 50px; text-align: center; }
.content-header .page-title { font-size: 36px; font-weight: 700; color: #333; margin-bottom: 15px; }
.content-header .title-underline { width: 40px; height: 3px; background: #102476; margin: 0 auto; }
.top-padding-zero { padding-top: 0 !important; }

/* [2] 배경색 f8f8f8 공통 클래스 */
.bg-f8 { background: #f8f8f8 !important; padding: 100px 0; }

/* [3] 탭 메뉴 (PC 중앙 / 모바일 스냅) */
.sub-tab-nav { border-bottom: 1px solid #e2e2e2; background: #fff; width: 100%; position: relative; overflow: hidden; }
.tab-list { 
    display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; list-style: none; padding: 0; 
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab-list li { flex: 0 0 auto; width: 180px; text-align: center; }
.tab-list li a { display: block; padding: 25px 15px; font-size: 18px; color: #999; text-decoration: none; position: relative; transition: 0.3s; }
.tab-list li a.active { color: #102476; font-weight: 700; }
.tab-list li a.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: #102476; }

/* [4] 진료 안내 섹션 공통 스타일 */
.clinic-content-section { padding: 100px 0 80px; background: #fff; }
.inner-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.section-top-header { text-align: center; margin-bottom: 40px; }
.section-title-h3 { font-size: 32px; color: #222; }
.section-title-h3 strong { font-weight: 700; }
.title-line-short { width: 30px; height: 2px; background: #102476; margin: 20px auto 0; }

.definition-bracket-box { 
    display: block; position: relative; padding: 40px 100px; text-align: center; margin: 40px auto 0; width: fit-content; max-width: 90%;
}
.definition-bracket-box::before, .definition-bracket-box::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; border-color: #e2e2e2; border-style: solid; }
.definition-bracket-box::before {left: 0; border-width: 10px 0 10px 10px;}
.definition-bracket-box::after {right: 0; border-width: 10px 10px 10px 0;}
.def-txt { font-size: 22px; color: #444; line-height: 1.8; word-break: keep-all; margin: 0; }
.highlight-blue { color: #102476 !important; font-weight: 700 !important; }

/* [5] 이미지 크기 제어 (600px 제한) */
.full-implant-img, .bone-graft-img, .sinus-main-img, .immediate-main-img, .custom-main-img { text-align: center; margin-bottom: 40px; }
.full-implant-img img, .bone-graft-img img, .sinus-main-img img, .immediate-main-img img, .custom-main-img img { max-width: 600px; width: 100%; height: auto; }

/* [6] 임플란트 구조 */
.implant-structure-wrap { max-width: 1100px; margin: 0 auto 60px; }
.structure-header { display: flex; align-items: center; margin-bottom: 20px; }
.s-label { background: #102476; color: #fff; padding: 10px 25px; font-size: 16px; font-weight: 600; flex-shrink: 0; }
.s-line { flex-grow: 1; height: 1px; background: #102476; margin-left: 10px; }
.structure-grid { display: flex; gap: 40px; background: #fff; }
.s-card { flex: 1; background: #102476; padding: 45px 20px; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.s-img { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.s-img img { max-height: 100%; width: auto; }
.s-info strong { display: block; font-size: 19px; margin-bottom: 12px; color: #fff; font-weight: 700; }
.s-info p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.9); word-break: keep-all; }

/* [7] 필요한 경우 (2x2 그리드) */
.target-grid-2x2 { display: grid; grid-template-columns: repeat(2, 480px); justify-content: center; gap: 30px; margin: 0 auto; }
.target-card { background: #fff; padding: 60px 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.04); text-align: center; }
.t-num { font-size: 34px; font-weight: 800; color: #102476; display: block; margin-bottom: 20px; position: relative; }
.t-num::after { content: ''; display: block; width: 30px; height: 2px; background: #102476; margin: 10px auto 0; }
.target-card p { font-size: 19px; color: #444; line-height: 1.7; word-break: keep-all; }

/* [8] 전체 임플란트 체크리스트 */
.full-implant-check-section.dark-bg { background: #3d4a5d; padding: 100px 0; }
.check-list-wrap { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.check-item { background: #fff; padding: 22px 30px 22px 75px; border-radius: 50px; font-size: 18px; color: #333; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.15); font-weight: 500; text-align: left; }
.check-item::before { 
    content: ''; position: absolute; left: 35px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 18px; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230099cc'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* [9] 뼈이식 수술과정 */
.bone-process-section.bg-f8 { background: #f8f8f8 !important; }
.process-grid-3 { display: flex; justify-content: center; gap: 25px; max-width: 1100px; margin: 0 auto; }
.process-card { flex: 1; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.05); text-align: center; display: flex; flex-direction: column; }
.process-card .p-img { width: 100%; height: auto; }
.process-card .p-img img { width: 100%; height: auto; display: block; }
.process-card .p-info { padding: 30px 20px 40px; }
.process-card .p-step { display: inline-block; background: #102476; color: #fff; padding: 4px 20px; border-radius: 20px; font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.process-card p { font-size: 16px; color: #444; line-height: 1.6; margin: 0; word-break: keep-all; }

/* [10] 상악동 종류 (둥근 사각형 카드) */
.sinus-types-section.bg-f8 { background: #f8f8f8 !important; }
.sinus-grid-2 { display: flex; justify-content: center; gap: 40px; max-width: 1100px; margin: 0 auto; }
.sinus-card { flex: 1; max-width: 480px; text-align: center; }
.s-img-box { width: 100%; height: 320px; border-radius: 25px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 30px; }
.s-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-title-tag { display: inline-block; background: #102476; color: #fff; padding: 8px 40px; border-radius: 5px; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.s-desc { font-size: 17px; color: #444; line-height: 1.6; word-break: keep-all; }

/* [11] 발치즉시 장점 테이블 */
.immediate-advantage-section.bg-f8 { background: #f8f8f8 !important; }
.advantage-table-wrap { max-width: 900px; margin: 0 auto; border-top: 2px solid #102476; background: #fff; }
.advantage-row { display: flex; border-bottom: 1px solid #e2e2e2; align-items: stretch; }
.adv-th { flex: 0 0 240px; background: #102476; color: #fff; padding: 25px 20px; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; }
.adv-td { flex: 1; padding: 25px 30px; font-size: 17px; color: #444; line-height: 1.6; display: flex; align-items: center; word-break: keep-all; }

/* [12] 기성 vs 맞춤 지대주 */
.grad-custom-bg { padding: 100px 0; background: linear-gradient(to bottom, #ffffff 0%, #f1f7ff 50%, #cbe0ff 100%); }
.compare-grid { display: flex; justify-content: center; gap: 30px; max-width: 850px; margin: 0 auto; }
.compare-card { flex: 1; background: #fff; overflow: hidden; display: flex; flex-direction: column; text-align: center; max-width: 380px; box-shadow: 0 5px 20px rgba(0,0,0,0.06); }
.compare-card.custom { border: 2px solid #102476; box-shadow: 0 10px 30px rgba(16, 36, 118, 0.1); }
.compare-card .c-header { padding: 12px; font-size: 18px; font-weight: 700; text-align: center; color: #fff; }
.compare-card.standard .c-header { background: #b5b5b5; }
.compare-card.custom .c-header { background: #102476; }
.compare-card .c-img-box { padding: 20px; height: 220px; display: flex; align-items: center; justify-content: center; }
.compare-card .c-img-box img { max-height: 100%; width: auto; display: block; }
.compare-card .c-desc-box { padding: 0 20px 30px; flex-grow: 1; }
.compare-card .c-desc-box p { font-size: 16px; color: #444; line-height: 1.5; word-break: keep-all; margin: 0; }
.c-line-dashed { width: 100%; height: 1px; border-top: 1px dashed #e2e2e2; margin: 20px 0; }
.highlight-txt { color: #102476 !important; font-weight: 700 !important; }

/* ==========================================================================
   [13] 반응형 모바일 최적화 (모바일에서 가독성 정밀 보정)
   ========================================================================== */
@media screen and (max-width: 991px) {
    /* 공통 줄바꿈 해제 (모바일에서 반 토막 현상 방지) */
    .pc-br { display: none !important; }

    /* 비주얼 및 헤더 크기 조정 */
    .sub-visual { height: 250px; }
    .sub-visual .main-title { font-size: 28px; }
    .content-header { padding: 50px 0 30px; }
    .content-header .page-title { font-size: 28px; }

    /* 탭 메뉴 중앙 스냅 및 크기 */
    .tab-list { justify-content: flex-start; padding: 0 20px; scroll-snap-type: x mandatory; }
    .tab-list li { width: 130px; scroll-snap-align: center; }
    .tab-list li a { font-size: 14px; padding: 18px 0; }

    /* 모든 그리드 레이아웃을 1열 세로 배치로 변경 */
    .structure-grid, .process-grid-3, .sinus-grid-2, .compare-grid { 
        flex-direction: column; align-items: center; gap: 25px; padding: 0 10px; 
    }
    .target-grid-2x2 { grid-template-columns: 1fr; padding: 0 10px; width: 100%; gap: 20px; }
    
    /* 카드 너비 및 내부 간격 최적화 */
    .s-card, .process-card, .sinus-card, .compare-card { width: 100%; max-width: 420px; }
    .target-card { padding: 40px 20px; }
    .s-img-box { height: 240px; margin-bottom: 20px; }

    /* 섹션 제목 및 대괄호 박스 보정 */
    .section-title-h3 { font-size: 24px; }
    .definition-bracket-box { padding: 25px 30px; width: 92%; margin-top: 30px; }
    .def-txt { font-size: 16px; line-height: 1.6; }

    /* 뼈이식 수술과정 모바일 디테일 */
    .process-card .p-info { padding: 25px 20px 35px; }
    .process-card p { font-size: 15px; }

    /* 발치즉시 장점 테이블 모바일 가로 해제 */
    .advantage-row { flex-direction: column; }
    .adv-th { flex: 0 0 auto; width: 100%; justify-content: flex-start; padding: 15px 20px; font-size: 16px; }
    .adv-td { padding: 20px; font-size: 15px; }

    /* 하단 그라데이션 섹션 여백 조정 */
    .grad-custom-bg { padding: 60px 0; }
    .compare-card .c-img-box { height: 180px; }
    .compare-card .c-desc-box p { font-size: 14px; }

    /* 체크리스트 모바일 크기 */
    .check-list-wrap { gap: 10px; }
    .check-item { padding: 15px 20px 15px 55px; font-size: 14px; border-radius: 30px; }
    .check-item::before { left: 20px; width: 22px; height: 16px; }
}

@media screen and (max-width: 768px) {
    /* 아주 작은 기기 추가 대응 */
    .section-title-h3 { font-size: 22px; }
    .def-txt { font-size: 15px; }
}