/* ==========================================================================
   Responsive CSS - 연세바탕치과
   ========================================================================== */

/* 1280px 이하: 태블릿 가로 */
@media screen and (max-width: 1280px) {
  .container { padding: 0 40px; }
  .site-header .header-inner { padding: 0 28px; }
  .hero-section .hero-content { padding: 0 40px; }
  .section-title { font-size: 2.4rem; }
  .hero-content h1 { font-size: 3rem; }
  .signature-grid { grid-template-columns: repeat(2, 1fr); }
  .doctor-columns { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .doctor-col-photo { max-width: 420px; margin: 0 auto; }
  .doctor-info-list { text-align: left; max-width: 420px; margin: 0 auto; }
  .features-flex { grid-template-columns: 1fr; height: auto; max-height: none; }
  .features-left { padding: 60px 40px 40px; }
  .features-right { height: 420px; }
  .yt-card { flex: 0 0 260px; aspect-ratio: 16 / 9; }
  .gallery-banner { height: 50vh; min-height: 360px; }
  .gallery-banner-title { font-size: 2.2rem; }
  .info-grid { grid-template-columns: 1fr; gap: 50px; }
  .footer-top { flex-wrap: wrap; }
  .gnb { gap: 28px; }
  .sub-visual-content h1 { font-size: 2.3rem; }
  .sub-visual-content h1.sub-visual-h1-lg { font-size: 3.4rem; }
  .sub-title { font-size: 2.1rem; }
  .split-section { grid-template-columns: 1fr; gap: 40px; }
  .split-section.reverse .split-media { order: 1; }
  .split-section.reverse .split-content { order: 2; }
  .split-media { min-height: 320px; }
  .badge-grid { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .icon-list-grid { grid-template-columns: 1fr; }
  .icon-list-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .icon-list-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .process-card { padding: 32px; gap: 28px; }
  .process-media { width: 150px; height: 150px; }
  .data-table th { width: 200px; }
  .sub-visual-tall .sub-visual-content { padding-left: 40px; }
  .push-right { padding-left: 40px; }
  .about-gallery-slider { max-width: 640px; }
  #doctor-1, #doctor-2 { grid-template-columns: 1fr; }
  #doctor-1 .split-media, #doctor-2 .split-media { max-width: 400px; }
  #doctor-1 .split-heading, #doctor-2 .split-heading { font-size: 2.4rem; }
  #doctor-1 .doctor-role-tag, #doctor-2 .doctor-role-tag { font-size: 1.4rem; }
  #doctor-1 .split-content { padding-left: 0; }
  #doctor-2 .split-content.push-right { padding-left: 0; }
}

/* 1024px 이하: 태블릿 */
@media screen and (max-width: 1024px) {
  html { font-size: 16px; }
  .gnb-wrap { display: none; }
  .all-menu-btn .all-menu-text { display: none; }
  .section-pad { padding: 90px 0; }
  .all-menu-grid { grid-template-columns: 1fr; gap: 40px; }
  .all-menu-close { top: 20px; right: 24px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 1.1rem; }
  .quick-menu { right: 16px; }
  .quick-menu a, .quick-menu button { width: 52px; height: 52px; }
  .quick-menu a i, .quick-menu button i { width: 52px; height: 52px; font-size: 1.05rem; }
  .quick-menu a:hover, .quick-menu button:hover { width: 150px; }
  .quick-menu .quick-top:hover { width: 52px; }
  .brand-marquee .marquee-track span.en { font-size: 2.8rem; }
  .brand-marquee .marquee-track span.marquee-dot { font-size: 1.8rem; }
  .sub-section { padding: 80px 0; }
  .sub-visual { height: 340px; }
  .sub-visual-tall { height: 560px; }
  .sub-visual-tall .sub-visual-content { padding-left: 0; padding-right: 0; align-items: center; text-align: center; }
  .sub-visual-content h1.sub-visual-h1-lg { font-size: 2.6rem; }
  .sub-visual-hr { display: none; }
  .type-grid { grid-template-columns: 1fr; }
  .stage-grid { grid-template-columns: 1fr; }
  .stage-card { grid-template-columns: 1fr; }
  .stage-media { min-height: 220px; }
  .data-table th, .data-table td { padding: 20px 22px; font-size: 17px; }
  .data-table th { width: 170px; }
  .split-heading { font-size: 1.6rem; }
  .about-gallery-arrow { width: 46px; height: 46px; min-width: 46px; font-size: 0.95rem; }
  .about-gallery-wrap { gap: 16px; }
  .about-gallery-slider { max-width: 520px; }
  .push-right { padding-left: 0; }
  #doctor-1 .split-heading, #doctor-2 .split-heading { font-size: 2rem; }
  #doctor-1 .doctor-role-tag, #doctor-2 .doctor-role-tag { font-size: 1.25rem; }
  #doctor-1 .split-media, #doctor-2 .split-media { max-width: 380px; }
  #doctor-1 .split-content { padding-left: 0; }
  #doctor-2 .split-content.push-right { padding-left: 0; }
}

/* 768px 이하: 모바일 */
@media screen and (max-width: 768px) {
  html { font-size: 15px; }
  .container { padding: 0 24px; }
  .site-header .header-inner { padding: 0 24px; }
  .hero-section .hero-content { padding: 0 24px; }
  .hero-content h1 { font-size: 2.1rem; }
  .hero-content .hero-desc { font-size: 1.05rem; }
  .hero-section .hero-content { align-items: center; text-align: center; }
  .hero-content .hero-desc { max-width: 100%; }
  .hero-section .hero-media img { object-position: 65% 25%; }
  .brand-marquee { display: none !important; }
  .section-title { font-size: 1.8rem; }
  .section-desc { font-size: 1rem; }
  .section-head { margin-bottom: 50px; }
  .mobile-only-break { display: inline; }
  .pc-only-break { display: none; }
  .signature-grid { grid-template-columns: 1fr; gap: 24px; }
  .features-left { padding: 50px 24px; }
  .features-left .section-title { font-size: 1.8rem; }
  .features-right { height: 260px; }
  .features-list li { padding: 14px 4px; gap: 14px; }
  .gallery-banner { height: 42vh; min-height: 300px; }
  .gallery-banner-title { font-size: 1.6rem; }
  .gallery-banner-eyebrow { font-size: 0.8rem; letter-spacing: 2px; }
  .info-phone a { font-size: 1.9rem; }
  .info-address { font-size: 1rem; }
  .map-wrap { height: 320px; }
  .info-col-head { flex-wrap: wrap; }
  .info-map-btn { width: 100%; text-align: center; }
  .doctor-section.section-pad { padding-top: 0; }
  .doctor-info-title { font-size: 1.55rem; white-space: normal; }
  .doctor-info-title .doctor-name-main { font-size: 1.15em; }
  .doctor-columns { text-align: center; display: flex; flex-direction: column; align-items: stretch; }
  .doctor-col-photo { margin-top: 30px; margin-bottom: 30px; width: 100%; flex-basis: auto; }
  .doctor-photo-stack { width: 100%; max-width: 420px; margin: 0 auto; }
  .doctor-col-label { padding-right: 0; align-items: center; }
  .doctor-col-label .doctor-eyebrow-big { font-size: 2.6rem; text-align: center; }
  .doctor-label-title { font-size: 1.3rem; text-align: center; }
  .doctor-label-desc { text-align: center; }
  .doctor-pagination { justify-content: center; }
  .doctor-col-info { padding-left: 0; text-align: left; }
  .doctor-col-info .doctor-eyebrow { font-size: 1.6rem; }
  .doctor-info-list { text-align: left; }
  .doctor-info-list li { padding-left: 18px; font-size: 1rem; }
  .doctor-pagination-btn { padding: 10px 18px; font-size: 0.85rem; }
  .gallery-banner-subtitle { font-size: 0.95rem; }
  .youtube-head { flex-direction: column; align-items: flex-start; }
  .youtube-carousel { flex-wrap: nowrap; }
  .yt-card { flex: 0 0 220px; aspect-ratio: 16 / 9; }
  .yt-viewmore { padding: 12px 20px; font-size: 0.8rem; }
  .quick-menu { flex-direction: row; bottom: 0; top: auto; right: 0; left: 0; transform: none; width: 100%; justify-content: center; align-items: stretch; background-color: var(--color-white); padding: 10px; border-top: 1px solid var(--color-border); gap: 8px; }
  .quick-menu a, .quick-menu button { width: 100%; height: 60px; border-radius: 6px; flex-direction: column; justify-content: center; gap: 4px; background-color: var(--color-white); box-shadow: none; }
  .quick-menu a i, .quick-menu button i { width: auto; height: auto; font-size: 1.2rem; color: var(--color-brown); }
  .quick-menu .quick-label { opacity: 1; max-width: none; padding-right: 0; font-size: 0.68rem; font-weight: 600; color: var(--color-black); }
  .quick-menu a:hover, .quick-menu button:hover { width: 100%; }
  .quick-menu .quick-top { display: none !important; }
  .page-visual h1 { font-size: 2rem; }
  .brand-marquee .marquee-track span.en { font-size: 2.1rem; }
  .brand-marquee .marquee-track span.marquee-dot { font-size: 1.4rem; }

  .all-menu-overlay { align-items: flex-start; overflow-y: auto; padding: 60px 0 40px; }
  .all-menu-inner { padding: 0 24px; }
  .all-menu-logo { display: none; }
  .all-menu-grid { grid-template-columns: 1fr; gap: 26px; text-align: left; margin-bottom: 20px; }
  .all-menu-title { margin-bottom: 12px; }
  .all-menu-col ul li { margin-bottom: 10px; }
  .all-menu-col ul li a { font-size: 1rem; text-align: left; }

  .faq-question { padding: 26px 4px; }
  .faq-answer .faq-answer-inner { padding: 0 4px 26px 4px; }

  .site-footer { padding-bottom: 100px; }

  .sub-visual { height: 300px; padding-top: calc(var(--header-height) - 20px); }
  .sub-visual-tall { height: 560px; }
  .sub-visual-tall .sub-visual-content { padding-left: 0; padding-right: 0; align-items: center; text-align: center; transform: translateY(-42px); }
  .sub-visual-hr { display: none; }
  .sub-visual-content h1 { font-size: 1.9rem; }
  .sub-visual-content h1.sub-visual-h1-lg { font-size: 2.75rem; }
  .sub-visual-desc { font-size: 17px; }
  .sub-visual-desc-lead { font-size: 18px; }
  .sub-breadcrumb { font-size: 13px; }
  .sub-section-head { margin-bottom: 44px; }
  .sub-title { font-size: 2rem; }
  .sub-desc { font-size: 17px; }
  .doctor-intro-desc { white-space: normal; }
  .split-body { font-size: 17px; }
  .split-media { min-height: 260px; }
  #implant-recommend .split-media { min-height: 260px; }
  #periodontal-target .split-media { min-height: 260px; }
  #wisdomtooth-target .split-media { min-height: 260px; }
  #wisdomtooth-definition .split-media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  #cosmetic-target .split-media { min-height: 260px; }
  #cosmetic-definition .split-media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .badge-card { padding: 26px 22px; }
  .badge-card h3 { font-size: 1.25rem; white-space: nowrap; }
  .badge-line-break { display: none; }
  .process-card { flex-direction: column; text-align: center; padding: 30px 24px; border-radius: 32px; }
  .process-media { width: 150px; height: 150px; margin: 0 auto; }
  .process-body p { font-size: 17px; }
  .icon-list-grid.cols-4 { grid-template-columns: 1fr; }
  .icon-list-grid.cols-4 .icon-list-item { aspect-ratio: auto; }
  .icon-list-grid.cols-5 { grid-template-columns: 1fr; }
  .icon-list-grid.cols-5 .icon-list-item { aspect-ratio: auto; }
  .icon-list-item { flex-direction: column; align-items: center; text-align: center; padding: 30px 22px; }
  .icon-list-ico { margin: 0 auto; }
  .icon-row-item { gap: 18px; }
  .check-list li { font-size: 17px; }
  .data-table th, .data-table td { padding: 16px 16px; font-size: 15px; }
  .data-table th { width: 130px; }
  .type-card-body h3 { font-size: 1.5rem; }
  .stage-body { padding: 26px 22px; }
  .stage-body h3 { font-size: 1.5rem; }
  .stage-desc-list li { font-size: 17px; }
  .icon-list-body h3 { font-size: 1.4rem; }
  .icon-row-body h3 { font-size: 1.4rem; }
  .icon-row-body p { font-size: 17px; }
  .faq-answer p { font-size: 17px; }
  .split-section + .split-section { margin-top: 60px; }
  .sub-pretitle { font-size: 1.15rem; }
  .doctor-credit-list li { font-size: 17px; }
  .about-gallery-wrap { flex-direction: column; gap: 18px; }
  .about-gallery-arrow { display: none; }
  .about-gallery-slider { max-width: 100%; }
  #doctor-1 .split-media, #doctor-2 .split-media { max-width: 470px; width: 92%; }
  #doctor-1 .split-heading, #doctor-2 .split-heading { font-size: 2.1rem; }
  #doctor-1 .doctor-role-tag, #doctor-2 .doctor-role-tag { font-size: 1.5rem; }
  #doctor-1 .doctor-credit-list li, #doctor-2 .doctor-credit-list li { font-size: 17px; }
  #doctor-1 .split-content { padding-left: 0; }
  #doctor-2 .split-content.push-right { padding-left: 0; }
}