/* =========================================================
   CareTrip — responsive.css
   미디어쿼리는 이 파일에만 모은다. 반드시 마지막에 로드한다.
   breakpoint : 1024 / 960(모바일 메뉴 전환) / 560
   ========================================================= */

@media(max-width:1024px){
  .menu{gap:16px;font-size:14px}
}

@media(max-width:960px){
  .menu{display:none}
  .hamb{display:flex}

  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .carousel{max-width:420px}

  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .feat-grid,.spec-grid,.step-grid,.ba-grid{grid-template-columns:repeat(2,1fr)}
  .sol-grid,.svc-grid,.col-grid,.pkg-grid,.pkg-theme-grid,.treat-grid,.coup-grid,.rev-grid{grid-template-columns:1fr}

  /* .hcard.has-photo 는 클래스 2개라 우선순위가 더 높다. 함께 적어야 한 줄로 접힌다 */
  .hcard,.hcard.has-photo{grid-template-columns:1fr}
  .hcard .hthumb{min-height:120px}
  .hcard .hphoto{padding:0 22px 18px}
  .hcard .hphoto img{height:190px}
  .hcard .hspec{border-left:0;border-top:1px solid var(--line);flex-direction:row;gap:14px}

  .rec-list,.contact-grid,.fd-steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}

  .menu.open{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 22px;gap:14px;box-shadow:var(--shadow)}
}

@media(max-width:560px){
  .feat-grid,.spec-grid,.step-grid,.foot-top{grid-template-columns:1fr}
  .c-slide{height:460px}
  .pad{padding:60px 0}

  /* 좁은 화면에서는 헤더 우측이 비좁다 — 이름 배지와 앱 버튼을 접는다 */
  .nav-user{display:none}
  .nav-right > .btn-primary{display:none}
  .nav-auth{gap:8px;font-size:13px}

  .mp-card{padding:24px 20px}
  .mp-head{flex-wrap:wrap}
  .mp-rows > div{flex-direction:column;gap:4px}
  .mp-rows dt{min-width:0}

  /* 앱 안내 카드 — 아이콘을 위로 올리고 한 줄로 세운다.
     제목은 18.66px 미만으로 줄이지 않는다 (명암비 기준이 '큰 글씨'에 걸려 있다) */
  .auth-notice{grid-template-columns:1fr;padding:24px 20px;text-align:center;justify-items:center}
  .auth-notice-body b{font-size:19px}
}

@media(max-width:900px){
  /* 병원 상세 — 두 칸에서 한 칸으로 */
  .cd-wrap{grid-template-columns:1fr}
}

@media(max-width:640px){
  /* 병원찾기 목록 — 버튼을 아래로 내린다 */
  .clinic{flex-direction:column;align-items:stretch;gap:14px}
  .clinic .c-side{flex-direction:row;align-items:center;justify-content:space-between}
  .clinic .c-side .btn{flex:0 0 auto}
  .cf-search{flex-direction:column}
  .cf-search .btn{width:100%}
  .cd-staff{grid-template-columns:repeat(2,1fr)}
  .cd-row{flex-direction:column;gap:3px}
  .cd-row dt{flex:none;min-width:0}
  .cd-map iframe{height:220px}
}