/**
 * 서울비디치과 Responsive Devices CSS v1.0
 * =============================================
 * 모든 기기에 대응하는 반응형 스타일시트
 * 
 * 브레이크포인트:
 * - 320px: iPhone SE, iPhone 5/5s (초소형)
 * - 375px: iPhone 6/7/8/X/11/12/13/14, Galaxy S (소형)
 * - 390px: iPhone 12/13/14 Pro
 * - 414px: iPhone 6/7/8 Plus, iPhone 11 Pro Max (중형)
 * - 428px: iPhone 12/13/14 Pro Max
 * - 768px: iPad Mini, iPad (태블릿)
 * - 834px: iPad Air, iPad Pro 11" (태블릿)
 * - 1024px: iPad Pro 12.9", 노트북 (대형 태블릿/소형 데스크탑)
 * - 1280px: 노트북, 소형 모니터
 * - 1440px: 데스크탑
 * - 1920px+: 대형 모니터
 */

/* ========================================
   🎯 Root Variables - Responsive
======================================== */
:root {
  /* 반응형 폰트 사이즈 */
  --fs-display: clamp(2rem, 5vw + 1rem, 4.5rem);
  --fs-h1: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw + 0.5rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 2.5vw + 0.25rem, 2rem);
  --fs-h4: clamp(1.125rem, 2vw + 0.125rem, 1.5rem);
  --fs-body-lg: clamp(1rem, 1vw + 0.125rem, 1.25rem);
  --fs-body: clamp(0.875rem, 0.5vw + 0.5rem, 1.0625rem);
  --fs-small: clamp(0.75rem, 0.25vw + 0.5rem, 0.875rem);
  --fs-tiny: clamp(0.625rem, 0.2vw + 0.4rem, 0.75rem);
  
  /* 반응형 간격 */
  --space-xs: clamp(4px, 1vw, 8px);
  --space-sm: clamp(8px, 2vw, 16px);
  --space-md: clamp(16px, 3vw, 24px);
  --space-lg: clamp(24px, 4vw, 40px);
  --space-xl: clamp(32px, 5vw, 64px);
  --space-2xl: clamp(48px, 6vw, 96px);
  
  /* 반응형 컨테이너 패딩 */
  --container-padding: clamp(16px, 4vw, 120px);
  
  /* 반응형 border-radius */
  --radius-sm: clamp(8px, 1vw, 12px);
  --radius-md: clamp(12px, 1.5vw, 20px);
  --radius-lg: clamp(16px, 2vw, 28px);
  --radius-xl: clamp(20px, 2.5vw, 36px);
}

/* ========================================
   📱 iPhone SE / 5 시리즈 (320px)
======================================== */
@media (max-width: 320px) {
  html {
    font-size: 13px;
  }
  
  body {
    line-height: 1.6;
  }
  
  /* 컨테이너 */
  .container {
    padding: 0 12px;
  }
  
  /* 히어로 섹션 */
  .hero {
    padding: 30px 12px 60px;
  }
  
  h1, .text-display {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1rem !important;
  }
  
  .hero-badge {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
  }
  
  .hero-desc {
    font-size: 0.85rem !important;
  }
  
  .hero-cta .btn {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
  }
  
  .hero-card {
    min-width: 100px !important;
    padding: 14px 10px !important;
  }
  
  .hero-card-num {
    font-size: 1.25rem !important;
  }
  
  .hero-card-label {
    font-size: 0.65rem !important;
  }
  
  /* 카드 그리드 */
  .treatment-cards,
  .why-choose-grid,
  .concerns-grid {
    gap: 8px !important;
  }
  
  .treatment-card {
    padding: 16px 12px !important;
  }
  
  .treatment-card h3 {
    font-size: 0.9rem !important;
  }
  
  .treatment-card p {
    font-size: 0.75rem !important;
  }
  
  /* 버튼 */
  .btn {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }
  
  /* 퀵바 */
  .quick-action-item span {
    font-size: 0.5rem !important;
  }
  
  .quick-action-item i {
    font-size: 1rem !important;
  }
  
  /* 섹션 패딩 */
  section {
    padding: 40px 12px !important;
  }
  
  /* 통계 숫자 */
  .stat-number,
  .hero-stat-number {
    font-size: 1.5rem !important;
  }
}

/* ========================================
   📱 iPhone 6/7/8/X/11/12/13/14 (375px)
======================================== */
@media (min-width: 321px) and (max-width: 375px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding: 0 14px;
  }
  
  .hero {
    padding: 36px 14px 70px;
  }
  
  h1, .text-display {
    font-size: 1.625rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.375rem !important;
  }
  
  .hero-badge {
    font-size: 0.65rem !important;
    padding: 5px 10px !important;
  }
  
  .hero-card {
    min-width: 110px !important;
    padding: 16px 12px !important;
  }
  
  .hero-card-num {
    font-size: 1.5rem !important;
  }
  
  /* 버튼 */
  .btn {
    padding: 13px 18px !important;
    font-size: 0.875rem !important;
  }
  
  /* 카드 */
  .treatment-card {
    padding: 18px 14px !important;
  }
  
  section {
    padding: 48px 14px !important;
  }
}

/* ========================================
   📱 iPhone Pro/Plus 시리즈 (390px-428px)
======================================== */
@media (min-width: 376px) and (max-width: 428px) {
  html {
    font-size: 15px;
  }
  
  .container {
    padding: 0 16px;
  }
  
  .hero {
    padding: 40px 16px 80px;
  }
  
  h1, .text-display {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  .hero-badge {
    font-size: 0.7rem !important;
    padding: 6px 12px !important;
  }
  
  .hero-card {
    min-width: 130px !important;
    padding: 18px 14px !important;
  }
  
  .hero-card-num {
    font-size: 1.75rem !important;
  }
  
  .hero-card-label {
    font-size: 0.75rem !important;
  }
  
  /* 카드 */
  .treatment-card {
    padding: 20px 16px !important;
  }
  
  .treatment-card h3 {
    font-size: 1rem !important;
  }
  
  section {
    padding: 52px 16px !important;
  }
}

/* ========================================
   📱 대형 스마트폰 (429px-575px)
======================================== */
@media (min-width: 429px) and (max-width: 575px) {
  html {
    font-size: 15px;
  }
  
  .container {
    padding: 0 20px;
  }
  
  .hero {
    padding: 48px 20px 80px;
  }
  
  h1, .text-display {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.625rem !important;
  }
  
  /* 2열 그리드 시작 */
  .treatment-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .concerns-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .hero-cards {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .hero-card {
    min-width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
}

/* ========================================
   📱 소형 태블릿/대형 폰 (576px-767px)
======================================== */
@media (min-width: 576px) and (max-width: 767px) {
  html {
    font-size: 15px;
  }
  
  .container {
    padding: 0 24px;
  }
  
  .hero {
    padding: 56px 24px 80px;
  }
  
  h1, .text-display {
    font-size: 2.25rem !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
  }
  
  /* 2열 그리드 */
  .treatment-cards,
  .why-choose-grid,
  .doctor-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  .concerns-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .hero-cards {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  
  .hero-card {
    min-width: calc(33% - 12px) !important;
    flex: 0 0 calc(33% - 12px) !important;
  }
  
  /* CTA 버튼 가로 배치 */
  .hero-cta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .hero-cta .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 180px !important;
  }
  
  /* 리뷰 카드 2열 */
  .reviews-section > div > div:nth-child(3) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .reviews-section > div > div:nth-child(3) > div {
    min-width: unset !important;
  }
}

/* ========================================
   📱 iPad Mini / iPad (768px-833px)
======================================== */
@media (min-width: 768px) and (max-width: 833px) {
  html {
    font-size: 16px;
  }
  
  .container {
    padding: 0 32px;
  }
  
  .hero {
    padding: 80px 32px;
  }
  
  h1, .text-display {
    font-size: 2.5rem !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
  
  /* 3열 그리드 */
  .treatment-cards,
  .why-choose-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
  
  .doctor-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .concerns-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  .hero-cards {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  
  .hero-card {
    min-width: 150px !important;
    flex: 0 0 auto !important;
  }
  
  /* 히어로 CTA */
  .hero-cta {
    flex-direction: row !important;
    gap: 16px !important;
    justify-content: center !important;
  }
  
  .hero-cta .btn {
    width: auto !important;
  }
  
  /* 퀵바 숨김 */
  .quick-action-bar,
  .dynamic-quickbar {
    display: none !important;
  }
  
  /* 푸터 패딩 조정 */
  .footer {
    padding-bottom: 48px !important;
  }
}

/* ========================================
   📱 iPad Air / iPad Pro 11" (834px-1023px)
======================================== */
@media (min-width: 834px) and (max-width: 1023px) {
  html {
    font-size: 16px;
  }
  
  .container {
    padding: 0 40px;
    max-width: 100%;
  }
  
  .hero {
    padding: 100px 40px;
  }
  
  h1, .text-display {
    font-size: 2.75rem !important;
  }
  
  h2 {
    font-size: 2.125rem !important;
  }
  
  /* 3열 그리드 */
  .treatment-cards,
  .why-choose-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
  
  .doctor-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .concerns-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  
  /* 히어로 2열 레이아웃 */
  .hero-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
    text-align: left !important;
  }
  
  .hero-text {
    order: 1 !important;
  }
  
  .hero-visual {
    order: 2 !important;
    display: block !important;
  }
  
  .hero-badges {
    justify-content: flex-start !important;
  }
  
  .hero-cta {
    justify-content: flex-start !important;
  }
}

/* ========================================
   💻 iPad Pro 12.9" / 노트북 (1024px-1279px)
======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 960px;
    padding: 0 32px;
  }
  
  h1, .text-display {
    font-size: 3rem !important;
  }
  
  h2 {
    font-size: 2.25rem !important;
  }
  
  /* 3열 그리드 */
  .treatment-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
  
  .doctor-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .concerns-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ========================================
   💻 소형 데스크탑 (1280px-1439px)
======================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
  .container {
    max-width: 1140px;
    padding: 0 40px;
  }
  
  h1, .text-display {
    font-size: 3.25rem !important;
  }
  
  h2 {
    font-size: 2.5rem !important;
  }
  
  /* 4열 그리드 가능 */
  .treatment-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .doctor-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ========================================
   🖥️ 표준 데스크탑 (1440px-1919px)
======================================== */
@media (min-width: 1440px) and (max-width: 1919px) {
  .container {
    max-width: 1320px;
    padding: 0 60px;
  }
  
  h1, .text-display {
    font-size: 3.5rem !important;
  }
  
  h2 {
    font-size: 2.75rem !important;
  }
}

/* ========================================
   🖥️ 대형 모니터 (1920px+)
======================================== */
@media (min-width: 1920px) {
  .container {
    max-width: 1440px;
    padding: 0 80px;
  }
  
  h1, .text-display {
    font-size: 4rem !important;
  }
  
  h2 {
    font-size: 3rem !important;
  }
  
  section {
    padding: 100px 0 !important;
  }
  
  .hero {
    padding: 140px 80px !important;
  }
}

/* ========================================
   📺 초대형 모니터 (2560px+)
======================================== */
@media (min-width: 2560px) {
  html {
    font-size: 18px;
  }
  
  .container {
    max-width: 1800px;
  }
  
  h1, .text-display {
    font-size: 4.5rem !important;
  }
}

/* ========================================
   🔄 가로/세로 모드 전환
======================================== */
/* 모바일 가로 모드 */
@media (max-width: 896px) and (orientation: landscape) {
  .hero {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
  
  .hero-content {
    flex-direction: row !important;
    text-align: left !important;
  }
  
  .hero-text {
    flex: 1 !important;
  }
  
  .hero-cards {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  
  .hero-card {
    min-width: 100px !important;
    padding: 12px 10px !important;
  }
  
  .hero-card-num {
    font-size: 1.25rem !important;
  }
  
  h1, .text-display {
    font-size: 1.5rem !important;
  }
  
  /* 퀵바 높이 줄임 */
  .quick-action-bar,
  .dynamic-quickbar {
    padding: 8px 16px !important;
  }
  
  .quick-action-item {
    padding: 6px 8px !important;
  }
  
  .quick-action-item span {
    display: none !important;
  }
}

/* 태블릿 세로 모드 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-content {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .hero-visual {
    display: none !important;
  }
  
  .hero-cta {
    justify-content: center !important;
  }
}

/* ========================================
   🖐️ 터치 디바이스 최적화
======================================== */
@media (hover: none) and (pointer: coarse) {
  /* 모든 클릭 가능 요소 최소 터치 영역 */
  a, button, input, select, textarea,
  .btn, .nav-item > a, .treatment-card,
  .quick-action-item, .floating-btn,
  .faq-question, .tab-button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 호버 효과 제거 (터치에서는 무의미) */
  .treatment-card:hover,
  .why-card:hover,
  .btn:hover {
    transform: none;
  }
  
  /* 터치 피드백 */
  .treatment-card:active,
  .why-card:active,
  .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* 스크롤바 숨김 (터치 스크롤) */
  ::-webkit-scrollbar {
    display: none;
  }
  
  * {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* ========================================
   📱 Safe Area 지원 (노치/홈바)
======================================== */
@supports (padding: env(safe-area-inset-top)) {
  /* 헤더 노치 대응 */
  .header {
    padding-top: env(safe-area-inset-top);
  }
  
  /* 사이드 패딩 */
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  /* 하단 퀵바 홈바 대응 */
  .quick-action-bar,
  .dynamic-quickbar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  
  /* 푸터 하단 여백 */
  .footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  
  /* 모달/바텀시트 */
  .bottom-sheet {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ========================================
   ♿ 접근성 - 애니메이션 감소
======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-cards {
    scroll-behavior: auto;
  }
  
  .swipe-track {
    transition: none !important;
  }
}

/* ========================================
   🌓 다크모드 / 라이트모드 대응
======================================== */
@media (prefers-color-scheme: light) {
  /* 라이트 모드에서도 다크 테마 유지 (브랜드 일관성) */
  :root {
    color-scheme: dark;
  }
}

/* ========================================
   🖨️ 프린트 스타일
======================================== */
@media print {
  /* 불필요한 요소 숨김 */
  .header,
  .footer,
  .quick-action-bar,
  .dynamic-quickbar,
  .floating-cta,
  .chatbot-widget,
  .hero-visual,
  .hero-scroll {
    display: none !important;
  }
  
  /* 배경 제거 */
  body, .hero, section {
    background: white !important;
    color: black !important;
  }
  
  /* 링크 URL 표시 */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* 페이지 나눔 */
  section {
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* ========================================
   📱 iOS 특수 대응
======================================== */
/* iOS 입력 필드 줌 방지 */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* iOS 스크롤 바운스 */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* iOS 버튼 스타일 리셋 */
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  button {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ========================================
   🤖 Android 특수 대응
======================================== */
/* Android에서 탭 하이라이트 제거 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ========================================
   🔧 유틸리티 클래스
======================================== */
/* 반응형 숨김 */
.hide-mobile {
  display: block;
}
.hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  .hide-desktop {
    display: block !important;
  }
}

/* 반응형 텍스트 정렬 */
.text-center-mobile {
  text-align: inherit;
}

@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center !important;
  }
}

/* 반응형 flex 방향 */
.flex-column-mobile {
  flex-direction: row;
}

@media (max-width: 768px) {
  .flex-column-mobile {
    flex-direction: column !important;
  }
}

/* 풀 너비 모바일 */
.full-width-mobile {
  width: auto;
}

@media (max-width: 768px) {
  .full-width-mobile {
    width: 100% !important;
  }
}