/* ============================================================
   전대서한의원 — responsive-refactor.css
   반응형 시스템 재설계 (v50 → v51)
   
   이 파일은 style.css 다음에 로드되어 선택적으로 오버라이드합니다.
   ============================================================ */

/* ─── 1. 반응형 토큰 시스템 ───────────────────────────────── */
:root {
  --content-max: 1280px;
  --sb-scale: 1;
  --sb-font: 12px;
  --sb-pad-y: 10px;
  --sb-pad-x: 14px;
  --sb-logo-size: 52px;
  --sb-ic-size: 28px;
  --sb-min-w: 120px;
}

/* ─── 2. 해상도별 토큰 재정의 ───────────────────────────── */

@media (min-width: 1920px) {
  :root {
    --content-max: 1520px;
  }
}

@media (min-width: 2400px) {
  :root {
    --content-max: 1680px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --content-max: 1360px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  :root {
    --content-max: 1160px;
    --sb-scale: 0.85;
    --sb-font: 11.5px;
    --sb-pad-y: 8px;
    --sb-pad-x: 11px;
    --sb-logo-size: 40px;
    --sb-ic-size: 24px;
    --sb-min-w: 100px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  :root {
    --content-max: 980px;
    --sb-scale: 0.72;
    --sb-font: 10.5px;
    --sb-pad-y: 6px;
    --sb-pad-x: 8px;
    --sb-logo-size: 32px;
    --sb-ic-size: 20px;
    --sb-min-w: 82px;
  }
}

/* ─── 3. 컨테이너 너비 동적화 ────────────────────────────── */

.container,
.s1-inner, .s2-inner, .s4-inner, .s5-inner,
.h1c-inner,
.hd-inner {
  max-width: var(--content-max) !important;
}

.quick-grid,
.clinic-cards-grid,
.stats-cards,
.intro-split-grid,
.philosophy-grid,
.notice-grid {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ─── 4. 사이드바 스케일링 ───────────────────────────────── */

@media (min-width: 769px) {
  #sidebar-fixed {
    min-width: var(--sb-min-w) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }
  #sidebar-fixed .sb-btn {
    padding: var(--sb-pad-y) var(--sb-pad-x) !important;
    font-size: var(--sb-font) !important;
    gap: 7px !important;
  }
  #sidebar-fixed .sb-phone-btn {
    padding: calc(var(--sb-pad-y) + 2px) var(--sb-pad-x) !important;
    font-size: calc(var(--sb-font) + 1px) !important;
  }
  #sidebar-fixed .sb-ic {
    width: var(--sb-ic-size) !important;
    height: var(--sb-ic-size) !important;
  }
  #sidebar-fixed .sb-ic svg,
  #sidebar-fixed .sb-phone-btn svg {
    width: calc(var(--sb-ic-size) * 0.54) !important;
    height: calc(var(--sb-ic-size) * 0.54) !important;
  }
  #sidebar-fixed .sb-logo-link svg {
    width: var(--sb-logo-size) !important;
    height: var(--sb-logo-size) !important;
  }
  #sidebar-fixed .sb-logo-block {
    padding: calc(var(--sb-pad-y) + 2px) var(--sb-pad-x) var(--sb-pad-y) !important;
  }
  #sidebar-fixed .sb-logo-ko {
    font-size: calc(var(--sb-font) + 1px) !important;
  }
  #sidebar-fixed .sb-logo-en {
    font-size: calc(var(--sb-font) - 3px) !important;
  }
}

#sidebar-fixed::-webkit-scrollbar {
  width: 3px;
}
#sidebar-fixed::-webkit-scrollbar-thumb {
  background: rgba(15, 74, 110, 0.2);
  border-radius: 2px;
}

/* ─── 5. GNB(상단 내비) 반응형 개선 ──────────────────────── */

.gnb-ham,
.gnb-ham span {
  white-space: nowrap !important;
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .gnb-ham {
    padding: 14px 12px 14px 0 !important;
  }
  .gnb-list a {
    padding: 15px 12px !important;
    font-size: 13.5px !important;
  }
}

/* 1024~1199 → 메뉴 숨기고 햄버거만 (기존 768 기준을 올림) */
@media (max-width: 1199px) {
  .gnb-list,
  .gnb-divider,
  .gnb-sub {
    display: none !important;
  }
  .gnb-ham {
    font-size: 14px !important;
    padding: 14px 16px 14px 0 !important;
  }
}

/* ─── 6. 히어로 섹션 큰 화면 콘텐츠 정렬 ───────────────── */

@media (min-width: 1920px) {
  .s1-inner,
  .s2-inner,
  .s3-inner,
  .s4-inner,
  .s5-inner,
  .h1c-inner {
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ─── 7. 히어로 높이 동적화 ───────────────────────────── */

@media (min-width: 1024px) {
  .hero-slide {
    min-height: clamp(520px, 60vh, 760px) !important;
  }
}

/* ─── 8. 모바일 — 히어로 스텝(01~04) 줄바꿈 방지 ─────── */

@media (max-width: 480px) {
  .s1-method {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .s1-method .s1-m-num {
    font-size: 13px !important;
    min-width: 18px !important;
  }
  .s1-method span {
    font-size: 17px !important;
    margin-right: 2px !important;
  }
  .s1-bottom {
    gap: 16px !important;
  }
}

@media (max-width: 400px) {
  .s1-method {
    gap: 6px !important;
  }
  .s1-method .s1-m-num {
    font-size: 12px !important;
    min-width: 16px !important;
  }
  .s1-method span {
    font-size: 15px !important;
    margin-right: 0 !important;
  }
}

/* ─── 9. 사이드바 모바일 숨김 강화 ──────────────────── */

@media (max-width: 768px) {
  #sidebar-fixed { display: none !important; }
}

/* ─── 10. 1024~1439 구간 히어로와 사이드바 충돌 방지 ─── */

@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-slide {
    padding-right: calc(var(--sb-min-w) + 16px) !important;
  }
  .s1-inner,
  .s2-inner,
  .s3-inner,
  .s4-inner,
  .s5-inner {
    padding-right: 12px !important;
  }
}

/* ─── 11. 사이드바 위치 — 작은 화면에서 상단 잘림 방지 ─── */

@media (min-width: 1024px) and (max-width: 1439px) {
  #sidebar-fixed {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* ─── 12. 2560px+ 에서 사이드바 위치 — 콘텐츠에 더 가깝게 ─── */

@media (min-width: 1920px) {
  #sidebar-fixed {
    right: max(0px, calc((100vw - var(--content-max)) / 2 - var(--sb-min-w) - 20px)) !important;
  }
}