/* ===== Responsive — 강남서연성형외과 모바일/태블릿 완전 최적화 ===== */
/* Breakpoints: 1024px / 768px / 640px / 480px / 380px */

/* ===========================================
   INLINE STYLE OVERRIDES
   Views use inline grid-template-columns that
   don't respond — force them via attribute selectors
   =========================================== */
@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat("] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    [style*="grid-template-columns: repeat("] {
        grid-template-columns: 1fr !important;
    }
}


/* ===========================================
   1024px — TABLET
   =========================================== */
@media (max-width: 1024px) {

    /* --- Header: 로고 중앙 + 햄버거 --- */
    .top-bar { display: none }
    .gnb { display: none }
    .mega-overlay { display: none }
    .head-util .overseas { display: none }
    .head-util .util-menu { display: none }
    .head-util {
        position: absolute; top: 0; right: 0; bottom: 0;
        display: flex; align-items: center; padding-right: 16px;
    }
    .mobile-menu-btn { display: flex }
    .header-row2.gnb-sticky { position: relative; backdrop-filter: none }

    .header-nav {
        flex-direction: column;
        align-items: center;
        padding: 12px 16px;
        position: relative;
    }
    .header-logo { width: 100%; text-align: center }
    .header-logo a { justify-content: center; padding: 4px 0 }
    .header-logo .logo-symbol { font-size: 36px; letter-spacing: 4px }
    .header-logo .logo-sub { font-size: 10px; letter-spacing: 2px }

    .quick-menu { display: none }
    .left-sns { display: none }

    /* --- Hero (main page) --- */
    .hero-slide { height: 360px }
    .hero-slide-content h2 { font-size: 26px }
    .hero-slide-content p { font-size: 14px }

    /* --- Quick icon bar --- */
    .quick-icon-bar-inner { gap: 20px; padding: 0 12px }
    .quick-icon-item i { font-size: 22px }
    .quick-icon-item { font-size: 11px }

    /* --- 위젯 반응형 --- */
    .counter-grid { grid-template-columns: repeat(4, 1fr); gap: 12px }
    .counter-number { font-size: 36px }
    .surgery-info-grid { grid-template-columns: repeat(2, 1fr) }
    .insta-grid { grid-template-columns: repeat(3, 1fr) }

    /* --- Specialty grid: 5col -> 3col --- */
    .specialty-grid { grid-template-columns: repeat(3, 1fr) }

    /* --- Doctor note section --- */
    .doctor-note-section { min-height: 320px }
    .doctor-note-content h2 { font-size: 24px }

    /* --- Media grid: 4col -> 2col --- */
    .media-grid { grid-template-columns: repeat(2, 1fr) }

    /* --- TV layout: side-by-side -> stacked --- */
    .tv-layout { grid-template-columns: 1fr }
    .tv-playlist {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .tv-playlist-item {
        min-width: 260px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* --- Review grid: 5col -> 3col --- */
    .review-grid { grid-template-columns: repeat(3, 1fr) }

    /* --- Footer contact: 2col -> 1col --- */
    .footer-contact-inner { grid-template-columns: 1fr; gap: 32px }
    .footer-phone-big { font-size: 32px }

    /* --- Page hero (sub pages) --- */
    .page-hero { height: 200px }
    .page-hero-content h2 { font-size: 26px }

    /* --- Sub nav: horizontal scroll with touch --- */
    .sub-nav-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .sub-nav-inner::-webkit-scrollbar { display: none }
    .sub-nav a {
        padding: 0 14px;
        font-size: 13px;
        height: 42px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* --- Info grid: 2col -> 1col --- */
    .info-grid { grid-template-columns: 1fr }

    /* --- Feature list: single column --- */
    .feature-list { grid-template-columns: 1fr }

    /* --- Doctor section: photo+info 2col on tablet --- */
    .doctor-section { grid-template-columns: 1fr 1fr; gap: 24px }

    /* --- Responsive utility grids --- */
    .responsive-grid-2 { grid-template-columns: 1fr; gap: 24px }
    .responsive-grid-3 { grid-template-columns: 1fr }
    .responsive-grid-auto { grid-template-columns: repeat(2, 1fr) }

    /* --- Process steps: horizontal scroll --- */
    .process-steps {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .process-steps > * {
        flex-shrink: 0;
        min-width: 200px;
        scroll-snap-align: start;
    }

    /* --- CTA banner: stack vertically --- */
    .cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 28px;
    }

    /* --- General sections --- */
    .section { padding: 48px 16px }
    .section-header h2 { font-size: 22px }
    .content-page { padding: 36px 16px }
    .board-wrap { padding: 32px 16px 48px }

    /* --- Bottom bar --- */
    .bottom-bar { height: auto; padding: 6px 0 }
    .bottom-bar-inner { flex-wrap: wrap; gap: 6px; padding: 8px 12px }
    .bottom-bar-label { font-size: 13px }
    .bb-check { font-size: 10px }

    /* --- Board --- */
    .board-gallery { grid-template-columns: repeat(2, 1fr) }
    .board-table th:first-child, .board-table td:first-child,
    .board-table th:last-child, .board-table td:last-child { display: none }

    /* --- Scrollbar hiding for all horizontal scroll areas --- */
    .process-steps::-webkit-scrollbar,
    .ba-slider::-webkit-scrollbar,
    .tv-playlist::-webkit-scrollbar,
    .sub-nav-inner::-webkit-scrollbar {
        display: none;
    }
    .process-steps,
    .ba-slider,
    .tv-playlist,
    .sub-nav-inner {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}


/* ===========================================
   768px — SMALL TABLET
   =========================================== */
@media (max-width: 768px) {

    /* --- Hero --- */
    .hero-slide { height: 300px }
    .hero-slide-content h2 { font-size: 24px }
    .hero-slide-content p { font-size: 13px }

    /* --- 위젯 반응형 --- */
    .counter-grid { grid-template-columns: repeat(2, 1fr) }
    .counter-number { font-size: 32px }
    .counter-label { font-size: 12px }
    .surgery-info-grid { grid-template-columns: 1fr 1fr }
    .faq-question { font-size: 15px }
    .insta-grid { grid-template-columns: repeat(3, 1fr) }

    /* --- Specialty grid: 3col -> 2col --- */
    .specialty-grid { grid-template-columns: repeat(2, 1fr); gap: 10px }

    /* --- Review grid: 3col -> 2col --- */
    .review-grid { grid-template-columns: repeat(2, 1fr); gap: 10px }

    /* --- Media grid --- */
    .media-grid { grid-template-columns: repeat(2, 1fr); gap: 10px }

    /* --- Doctor section: stack on small tablet --- */
    .doctor-section {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .doctor-photo { max-width: 100% }

    /* --- Feature num circles: smaller --- */
    .feature-num {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    /* --- Process steps: smaller cards --- */
    .process-steps > * { min-width: 180px }

    /* --- Page hero --- */
    .page-hero { height: 180px }
    .page-hero-content h2 { font-size: 22px }
    .page-hero-content p { font-size: 13px }

    /* --- CTA banner --- */
    .cta-banner { padding: 24px 20px }
    .cta-banner h3 { font-size: 18px }
    .cta-banner p { font-size: 13px }

    /* --- Bottom bar: compact --- */
    .bottom-bar-inner {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 10px;
        justify-content: center;
    }
    .bottom-bar-label { font-size: 12px; width: 100%; text-align: center }
    .bottom-bar input, .bottom-bar select {
        font-size: 12px;
        height: 34px;
        flex: 1 1 auto;
        min-width: 80px;
    }
    .bb-submit { height: 34px; font-size: 12px; padding: 0 16px }

    /* --- Board table: hide more columns --- */
    .board-table th:nth-child(2), .board-table td:nth-child(2) {
        display: none;
    }

    /* --- Footer --- */
    .footer-bottom-links { flex-wrap: wrap; gap: 12px; justify-content: center }
    .footer-phone-big { font-size: 28px }
}


/* ===========================================
   640px — MOBILE
   =========================================== */
@media (max-width: 640px) {

    /* --- Header --- */
    .header-logo .logo-symbol { font-size: 30px }
    .header-logo .logo-sub { font-size: 9px }

    /* --- Hero (main) --- */
    .hero-slide { height: 260px }
    .hero-slide-content h2 { font-size: 22px }
    .hero-slide-content p { font-size: 12px; margin-bottom: 16px }

    /* --- Quick icon bar --- */
    .quick-icon-bar-inner { gap: 10px; flex-wrap: wrap; justify-content: center }
    .quick-icon-item i { font-size: 20px }
    .quick-icon-item { font-size: 10px }

    /* --- Specialty grid --- */
    .specialty-grid { grid-template-columns: repeat(2, 1fr); gap: 8px }
    .specialty-card-overlay { padding: 10px 8px }
    .specialty-card-title { font-size: 13px }
    .specialty-card-num { font-size: 9px }

    /* --- Doctor note --- */
    .doctor-note-section { min-height: 260px }
    .doctor-note-content { padding: 32px 16px }
    .doctor-note-content h2 { font-size: 20px }
    .doctor-note-points li { font-size: 12px }
    .doctor-note-points .point-num { width: 50px; font-size: 10px }

    /* --- BA slider --- */
    .ba-card { width: 150px }

    /* --- Media grid --- */
    .media-grid { grid-template-columns: 1fr 1fr; gap: 8px }

    /* --- Review grid --- */
    .review-grid { grid-template-columns: repeat(2, 1fr); gap: 8px }

    /* --- TV playlist: stack completely --- */
    .tv-playlist {
        flex-direction: column;
        overflow-x: visible;
    }
    .tv-playlist-item { min-width: 0 }
    .tv-playlist-item .thumb { width: 100px }

    /* --- Section general --- */
    .section { padding: 36px 12px }
    .section-header h2 { font-size: 20px }
    .section-header { margin-bottom: 24px }

    /* --- Page hero: compact for mobile --- */
    .page-hero { height: 160px }
    .page-hero-content h2 { font-size: 20px }
    .page-hero-content p { font-size: 12px }

    /* --- Sub nav: tighter --- */
    .sub-nav a {
        padding: 0 12px;
        font-size: 12px;
        height: 40px;
    }

    /* --- Info grid --- */
    .info-grid { gap: 20px }

    /* --- Feature list --- */
    .feature-list { gap: 16px; margin: 24px 0 }
    .feature-item { gap: 12px }
    .feature-item h4 { font-size: 14px }
    .feature-item p { font-size: 12px }
    .feature-num {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    /* --- Process steps --- */
    .process-steps { gap: 8px; margin: 24px 0 }
    .process-steps > * { min-width: 160px; padding: 16px }
    .process-step-num { font-size: 10px }

    /* --- CTA banner --- */
    .cta-banner {
        padding: 20px 16px;
        margin: 32px 0;
        border-radius: 8px;
    }
    .cta-banner h3 { font-size: 16px }
    .cta-banner p { font-size: 12px }
    .cta-banner .btn { font-size: 13px; padding: 8px 20px }

    /* --- Doctor section: stacked --- */
    .doctor-section { gap: 16px }
    .doctor-info h3 { font-size: 22px !important }
    .doctor-title-text { font-size: 14px }

    /* --- Responsive utility grids --- */
    .responsive-grid-auto { grid-template-columns: 1fr 1fr }
    .press-logos { gap: 10px }
    .press-logo-item { padding: 12px 20px }

    /* --- Footer --- */
    .footer-phone-big { font-size: 26px }
    .footer-bottom-links { flex-wrap: wrap; gap: 12px }
    .footer-bottom-info { font-size: 10px }
    .footer-contact-inner { gap: 24px }

    /* --- Bottom bar: grid layout for mobile --- */
    .bottom-bar .bb-check { display: none }
    .bottom-bar-label { display: none }
    .bottom-bar-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 6px 10px;
    }
    .bottom-bar input, .bottom-bar select {
        font-size: 12px;
        height: 32px;
        width: 100%;
    }
    .bb-submit {
        grid-column: 1 / -1;
        height: 32px;
        font-size: 12px;
        padding: 0 16px;
        width: 100%;
    }

    /* --- Board --- */
    .board-header { flex-direction: column; align-items: flex-start; gap: 8px }
    .board-header h2 { font-size: 20px }
    .board-search { flex-direction: column }
    .board-gallery { grid-template-columns: 1fr }
    .board-detail-header h1 { font-size: 18px }

    /* --- Board table: hide more columns --- */
    .board-table th:nth-child(2), .board-table td:nth-child(2),
    .board-table th:nth-child(4), .board-table td:nth-child(4) {
        display: none;
    }
    .board-table th, .board-table td { padding: 8px 6px; font-size: 12px }

    /* --- Consultation modal --- */
    .consult-modal-content { padding: 20px 16px; width: 95% }
    .consult-modal h3 { font-size: 18px }

    /* --- Content page --- */
    .content-page { padding: 28px 12px }
}


/* ===========================================
   480px — SMALL MOBILE
   =========================================== */
@media (max-width: 480px) {

    /* --- Hero --- */
    .hero-slide { height: 220px }
    .hero-slide-content h2 { font-size: 20px }
    .hero-slide-content p { font-size: 11px }

    /* --- 위젯 반응형 --- */
    .counter-section { padding: 36px 16px }
    .counter-number { font-size: 28px }
    .counter-number .counter-unit { font-size: 16px }
    .surgery-info-grid { grid-template-columns: 1fr }
    .faq-question { font-size: 14.5px; padding: 16px 0 }
    .faq-answer-inner { font-size: 14px; padding-left: 24px }
    .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 4px }
    .cta-banner { flex-direction: column; text-align: center; gap: 16px; padding: 28px 20px }

    /* --- Page hero --- */
    .page-hero { height: 140px }
    .page-hero-content h2 { font-size: 18px }
    .page-hero-content p { font-size: 11px }

    /* --- Media grid: full width --- */
    .media-grid { grid-template-columns: 1fr; gap: 12px }

    /* --- TV playlist: smaller thumbs --- */
    .tv-playlist-item .thumb { width: 80px }
    .tv-playlist-item .info h5 { font-size: 12px }

    /* --- Responsive utility grids --- */
    .responsive-grid-auto { grid-template-columns: 1fr }

    /* --- Bottom bar: single column --- */
    .bottom-bar-inner {
        grid-template-columns: 1fr;
    }
    .bb-submit { grid-column: 1 }

    /* --- Board gallery: full width --- */
    .board-gallery { grid-template-columns: 1fr }

    /* --- Process steps: smaller --- */
    .process-steps > * { min-width: 140px; padding: 14px 12px }

    /* --- CTA banner --- */
    .cta-banner { padding: 16px 12px; margin: 24px 0 }
    .cta-banner h3 { font-size: 15px }

    /* --- Section --- */
    .section { padding: 28px 10px }
    .section-header h2 { font-size: 18px }

    /* --- Footer --- */
    .footer-phone-big { font-size: 22px }
    .footer-bottom-info { font-size: 9px; line-height: 1.6 }
    .footer-contact { padding: 32px 12px }
}


/* ===========================================
   380px — VERY SMALL MOBILE
   =========================================== */
@media (max-width: 380px) {

    /* --- Header --- */
    .header-logo .logo-symbol { font-size: 26px }

    /* --- Hero --- */
    .hero-slide { height: 200px }
    .hero-slide-content h2 { font-size: 18px }
    .hero-slide-content p { font-size: 10px }

    /* --- Page hero --- */
    .page-hero { height: 120px }
    .page-hero-content h2 { font-size: 16px }

    /* --- Grids --- */
    .specialty-grid { grid-template-columns: 1fr 1fr; gap: 6px }
    .review-grid { grid-template-columns: 1fr 1fr; gap: 6px }
    .media-grid { gap: 8px }

    /* --- BA slider --- */
    .ba-card { width: 130px }

    /* --- Quick icons --- */
    .quick-icon-bar-inner { gap: 6px }

    /* --- Sub nav --- */
    .sub-nav a { padding: 0 10px; font-size: 11px; height: 38px }

    /* --- Feature --- */
    .feature-num { width: 28px; height: 28px; font-size: 10px }
    .feature-item h4 { font-size: 13px }
    .feature-item p { font-size: 11px }

    /* --- Doctor info --- */
    .doctor-info h3 { font-size: 20px !important }

    /* --- CTA --- */
    .cta-banner h3 { font-size: 14px }
    .cta-banner p { font-size: 11px }
    .cta-banner .btn { font-size: 12px; padding: 6px 16px }

    /* --- Bottom bar --- */
    .bottom-bar input, .bottom-bar select { font-size: 11px; height: 30px }
    .bb-submit { font-size: 11px; height: 30px }

    /* --- Board --- */
    .board-table th, .board-table td { padding: 6px 4px; font-size: 11px }
    .board-detail-header h1 { font-size: 16px }

    /* --- Modal --- */
    .consult-modal-content { padding: 16px 12px; width: 98% }

    /* --- Sections --- */
    .section { padding: 24px 8px }
    .content-page { padding: 24px 8px }
}


/* ===========================================
   LANDSCAPE PHONE
   =========================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-slide { height: 200px }
    .page-hero { height: 120px }
    .doctor-note-section { min-height: 200px }
}