/* ============================================================
   일산퍼스트정형외과 — 반응형 (desktop-first)
   breakpoints: 1180 / 768 / 640 / 480
   ============================================================ */

/* ---------- 1281~1460px : 컴팩트 데스크톱 헤더 ---------- */
@media (max-width: 1460px) and (min-width: 1281px) {
  .site-header .header-inner {
    gap: 24px;
  }
  .h-logo img {
    height: 30px;
    width: auto;
  }
  .gnb {
    gap: 2px;
  }
  .gnb > li > a {
    font-size: 16px;
    padding: 0 13px;
  }
  .gnb > li > a::after {
    left: 13px;
    right: 13px;
  }
  .h-tel {
    font-size: 16px;
    padding: 10px 18px;
  }
}

/* ---------- ~1280px : 데스크톱 GNB → 햄버거 전환 ---------- */
@media (max-width: 1280px) {
  .gnb-nav {
    display: none;
  }
  .site-header .header-inner {
    justify-content: space-between;
  }
  .menu-trigger {
    display: flex;
  }
  /* 햄버거 구간: 영상을 헤더 바로 아래에 둠 (데스크탑 오버랩 해제) */
  .hero--typo {
    --hero-lift-extra: 0px;
    margin-top: 0;
  }
}

/* ---------- ~1180px : 태블릿 ---------- */
@media (max-width: 1180px) {
  :root {
    --header-h: 68px;
    --frame: 16px;
  }
  /* 모바일/태블릿 가로 오버플로 차단 — 넓은 요소(비급여 price 테이블 등)가 넘쳐도
     페이지가 좌우로 밀리지 않게 해 고정 헤더(햄버거) 탭 좌표가 어긋나지 않도록 함.
     (이 구간에선 sticky가 static이라 안전, 테이블은 .price-scroll 내부에서 계속 스크롤됨) */
  html,
  body {
    overflow-x: clip; /* hidden은 스크롤 컨테이너를 만들어 sticky 헤더를 깨므로 clip 사용 */
  }
  .h-tel {
    font-size: 16px;
    padding: 10px 18px;
  }
  .section {
    padding: 88px 0;
  }

  /* 메인 */
  
  
  
  
  
  .doctors__slider .swiper-slide.doc-slide {
    width: calc(100% - 24px);
    height: auto;
    min-height: 0;
    padding: 28px 22px;
  }
  
  
  
  
  
  
  
  
  
  
  
}

/* ---------- ~768px : 모바일 가로/작은 태블릿 ---------- */
@media (max-width: 768px) {
  :root {
    --frame: 12px;
    --topbar-h: 0px; /* 모바일: 상단바 숨김 → 헤더 top:0 */
  }
  .topbar {
    display: none;
  }
  .inner {
    width: calc(100% - 40px);
  }
  /* 모바일: 소스와 같은 16:9 — 가로가 잘리지 않게 박스를 채움 */
  .hero {
    aspect-ratio: 16 / 9;
  }
  .hero--typo {
    --hero-lift-extra: 0px;
    margin-top: 0;
  }
  .hero__media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 서브픽셀 1px 틈(네이비 배경)만 가리기 — 가로는 거의 그대로 */
    transform: scaleY(1.02);
  }
  .hero__title {
    font-size: 30px;
  }
  .ticker {
    padding: 14px 0;
  }
  .marquee-unit span {
    font-size: 14.5px;
  }
  .section {
    padding: 68px 0;
  }
  .sec-head {
    margin-bottom: 36px;
  }

  
  
  

  

  .diag__slider .swiper-slide.diag__item {
    grid-template-columns: 1fr;
  }
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  .faq--bare .faq__q {
    font-size: 17px;
  }
  .faq--bare .faq__a .in {
    margin-left: 4px;
    margin-right: 4px;
  }

  
  
  
  .faq--bare .faq__q {
    font-size: 17px;
  }
  .faq--bare .faq__a .in {
    margin-left: 4px;
    margin-right: 4px;
  }

  
  /* vw 스케일은 소형폰 전용 — 태블릿 폭에서 커지지 않게 clamp 상한 */
  
  
  

  /* 푸터 */
  .site-footer {
    padding: 60px 0 36px;
  }
  .footer-top {
    flex-direction: column;
  }
  
  
  
  .footer-bottom {
    flex-direction: column;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  /* 퀵버튼 */
  /* 퀵 위젯: 하단 풀폭 가로 바 (전화·카톡·블로그·길찾기 균등 분할) */
  .quick-float {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    /* border-top: 1px solid var(--line); */
    box-shadow: 0 -3px 18px rgba(10, 41, 97, 0.1);
    z-index: 950;
    padding-bottom: env(safe-area-inset-bottom); /* iOS 홈바 대응 */
  }
  .qf-tel {
    flex: 1;
    width: auto;
    height: auto;
    min-height: 58px;
    flex-direction: column;
    gap: 3px;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 0 7px;
  }
  .qf-tel svg {
    /* 다른 퀵메뉴 아이콘(.qf-item .ic 28px)과 크기 통일 */
    width: 28px;
    height: 28px;
  }
  .qf-tel::before {
    display: none; /* 펄스 링 제거 */
  }
  .qf-tel::after {
    content: "전화";
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .qf-tel:hover,
  .qf-tel:active {
    background: var(--navy);
    transform: none;
  }
  .qf-dock {
    flex: 3;
    flex-direction: row;
    gap: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .qf-item {
    flex: 1;
    width: auto;
    border-radius: 0;
    gap: 3px;
    padding: 8px 0 7px;
  }
  .qf-item + .qf-item {
    border-left: 1px solid #eef1f6;
  }
  .qf-item:hover {
    background: transparent;
    transform: none;
  }
  .qf-item .ic {
    width: 28px;
    height: 28px;
  }
  .qf-item span {
    font-size: 11.5px;
  }
  /* 맨 위로: 바 위에 떠 있는 원형 버튼 */
  .qf-top {
    position: fixed;
    right: 14px;
    bottom: calc(66px + env(safe-area-inset-bottom));
    width: 44px; /* 최소 탭 타깃 44px */
    height: 44px;
    z-index: 951;
  }
  /* 하단 바에 콘텐츠(푸터)가 가리지 않도록 여백 확보 */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  /* 서브 공통 */
  .sub-hero {
    padding: 56px 0 44px;
  }
  .sub-hero .inner {
    width: calc(100% - 32px);
  }
  .sub-hero h2 {
    font-size: 32px;
  }
  /* 좁은 폭: 고정 줄바꿈 해제 → 자연 랩 */
  .sub-hero .lead br {
    display: none;
  }
  
  
  .sub-section {
    padding: 56px 0;
  }
}

/* ---------- ~640px ---------- */
@media (max-width: 640px) {
  .hero__eyebrow {
    display: none;
  }
  
  .hero__pill {
    padding: 4px 16px;
    margin-bottom: 12px;
  }
  .hero__actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .hero__actions .btn {
    width: 100%;
    padding: 8px 10px;
    font-size: clamp(14px, 3vw, 16.5px);
    justify-content: center;
  }
  .h-logo img {
    height: 26px;
    width: auto;
  }
  .h-right {
    gap: 12px;
  }
  /* 모바일: 번호 숨기고 원형 아이콘 버튼으로 */
  .h-tel {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
  }
  .h-tel .h-tel__num {
    display: none;
  }
  .h-tel svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- ~480px : 모바일 ---------- */
@media (max-width: 480px) {
  .inner {
    width: calc(100% - 32px);
  }
  .h-logo img {
    height: 22px;
    width: auto;
  }
  .h-tel {
    width: 40px;
    height: 40px;
  }
  .menu-trigger {
    width: 40px;
    height: 40px;
  }
  
  
  
  
  
  
}

/* ---------- ~360px : 초소형 (갤럭시 폴드 등) ---------- */
@media (max-width: 360px) {
  .h-logo img {
    height: 19px;
    width: auto;
  }
  .h-right {
    gap: 8px;
  }
  /* 드로어 상단 퀵 버튼: 좁은 폭에서 넘치지 않게 축소 */
  .mobile-nav__quick {
    gap: 6px;
  }
  .mobile-nav__quick a {
    font-size: 13.5px;
    padding: 11px 0;
    letter-spacing: -0.03em;
  }
  .site-header .header-inner {
    padding: 0 14px;
    gap: 10px;
  }
  .inner {
    width: calc(100% - 24px);
  }
  .hero__title {
    font-size: 26px;
  }
  
  .hero__pill {
    font-size: 14px;
    padding: 7px 14px;
  }
  /*  */
  .hero__actions {
    flex-wrap: wrap;
  }
  .hero__actions .btn {
    font-size: clamp(14px, 4.5vw, 16.5px);
  }
  /* 수치: 1열 */
  
  
  
  /* 진단 탭: 가로 스크롤 */
  
  
  
  /* 프로세스: 넘버 축소 */
  
  
  /* FAQ: 패널 들여쓰기 축소 */
  .faq--bare .faq__q em {
    flex: 0 0 36px;
    font-size: 19px;
  }
  .faq--bare .faq__a .in {
    padding-left: 54px;
    padding-right: 18px;
  }
  .faq--bare .faq__a .in::before {
    left: 14px;
    font-size: 22px;
  }
  .faq--bare .faq__item.is-open .faq__a .in {
    padding-left: 54px;
    padding-right: 18px;
  }
  
  /* 푸터 전화번호 축소 (280 대응) */
  
  
  /* 의료진 */
  
  
  
  /* 퀵 하단 바: 초소형 화면 폰트·아이콘만 축소 (레이아웃은 가로 바 유지) */
  .qf-item .ic,
  .qf-tel svg {
    width: 25px;
    height: 25px;
  }
  .qf-item span,
  .qf-tel::after {
    font-size: 10.5px;
  }
}