/* ============================================================
   헬버홈 모바일·태블릿 최적화
   - 767px 이하(휴대폰): 상단 메뉴 → 햄버거 메뉴 (768px 이상 태블릿·데스크톱은 전체 메뉴)
   - 640px 이하: 카드 그리드·히어로 등 모바일 배치
   ============================================================ */

/* ---------- 햄버거 버튼 & 메뉴 패널 (mobile-nav.js가 생성) ---------- */
.hbm-burger, .hbm-drawer { display:none; }
.hb-hs-btn { display:none; }

@media (max-width: 767px) {
  .hb-gnb-nav { display:none !important; }
  .hb-gnb > div { padding:12px 64px 12px 16px !important; min-height:53px; box-sizing:border-box; }
  /* 휴대폰에서도 '가맹 문의' 파란 버튼은 보이게 (☰ 버튼 왼쪽) */
  .hb-gnb-cta { margin-left:auto; }
  .hb-gnb-cta a { font-size:12px !important; padding:7px 12px !important; box-shadow:0 4px 12px rgba(0,132,255,.25) !important; }
  .hb-gnb-logo { height:28px !important; }

  .hbm-burger {
    display:flex; position:fixed; top:8px; right:12px; z-index:60;
    width:40px; height:36px; border:0; border-radius:12px; background:transparent;
    align-items:center; justify-content:center; cursor:pointer; padding:0;
  }
  .hbm-burger:focus-visible { outline:2px solid #0084ff; outline-offset:2px; }
  .hbm-burger span, .hbm-burger span::before, .hbm-burger span::after {
    display:block; width:20px; height:2px; border-radius:2px; background:#0a0a0a; position:relative;
    transition:transform 220ms ease, background 220ms ease;
  }
  .hbm-burger span::before, .hbm-burger span::after { content:""; position:absolute; left:0; }
  .hbm-burger span::before { top:-6px; }
  .hbm-burger span::after  { top:6px; }
  .hbm-open .hbm-burger span { background:transparent; }
  .hbm-open .hbm-burger span::before { transform:translateY(6px) rotate(45deg); }
  .hbm-open .hbm-burger span::after  { transform:translateY(-6px) rotate(-45deg); }

  .hbm-drawer {
    display:block; position:fixed; left:0; right:0; top:53px; bottom:0; z-index:55;
    background:#fbfaf6; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:8px 20px 32px; box-sizing:border-box;
    font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',sans-serif;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity 220ms ease, transform 220ms ease, visibility 0s 220ms;
  }
  .hbm-open .hbm-drawer { opacity:1; visibility:visible; transform:none; transition:opacity 220ms ease, transform 220ms ease; }
  .hbm-open { overflow:hidden; }

  .hbm-list { list-style:none; margin:0 auto; padding:0; max-width:720px; }
  .hbm-list > li { border-bottom:1px solid #ececec; }
  .hbm-link {
    display:flex; align-items:center; justify-content:space-between; padding:16px 4px;
    font-family:'Jalnan','Malgun Gothic','Apple SD Gothic Neo',sans-serif; font-size:20px; color:#0a0a0a;
  }
  .hbm-link[aria-current="page"] { color:#0084ff; }
  .hbm-sub { display:flex; flex-wrap:wrap; gap:8px; padding:0 4px 16px; }
  .hbm-sub a {
    font-size:14px; font-weight:700; color:#2a2a2a; background:#fff; border:1px solid #ececec;
    border-radius:999px; padding:8px 14px;
  }
  .hbm-sub a[aria-current="page"] { color:#0084ff; border-color:#0084ff; background:#e6f3ff; }
  .hbm-quick { display:grid; grid-template-columns:1fr 1fr; margin:24px -20px 0; border-top:1px solid #e2e2e2; }
  .hbm-quick a {
    display:flex; align-items:center; justify-content:center; min-height:56px; padding:8px; box-sizing:border-box;
    background:#f4f4f2; border-bottom:1px solid #e2e2e2; color:#2a2a2a; font-size:15px; font-weight:600; text-align:center;
  }
  .hbm-quick a:nth-child(odd) { border-right:1px solid #e2e2e2; }
  .hbm-quick a:hover { color:#0084ff; }
  .hbm-quick a.is-cta { background:#0084ff; color:#fff; font-weight:700; border-bottom-color:#0076e4; }
  .hbm-quick a.is-cta:hover { background:#0066cc; color:#fff; }
  .hbm-quick a.is-brand { font-family:'Jalnan','Apple SD Gothic Neo',sans-serif; font-weight:normal; font-size:clamp(13px, 3.9vw, 16px); letter-spacing:.01em; color:#6b6b6b; white-space:nowrap; }
  .hbm-quick a.is-brand small { font-family:'Pretendard Variable','Pretendard',sans-serif; font-size:10px; font-weight:400; letter-spacing:.1em; margin-left:3px; }
  .hbm-cta {
    display:block; box-sizing:border-box; max-width:720px; margin:24px auto 0; text-align:center; background:#0084ff; color:#fff !important;
    font-weight:700; font-size:16px; padding:16px; border-radius:999px; box-shadow:0 8px 24px rgba(0,132,255,.28);
  }
  .hbm-tel { margin-top:12px; text-align:center; font-size:13px; color:#6b6b6b; user-select:all; }
}


/* ---------- 640px 이하: 모바일 배치 ---------- */
@media (max-width: 640px) {
  /* 사진 + 설명 카드 (무엇이 특별한가요?) → 2열 */
  .hb-m-feat { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:22px 12px !important; }
  .hb-m-feat > * { gap:10px !important; }
  .hb-m-feat > * > div:first-child { border-radius:14px !important; }
  .hb-m-feat > * > div:last-child { gap:6px !important; }
  .hb-m-feat > * > div:last-child > div:first-child { font-size:16px !important; }
  .hb-m-feat p { font-size:12.5px !important; line-height:1.6 !important; }

  /* 원형 사진 일과표 → 3열 */
  .hb-m-day { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:20px 10px !important; }
  .hb-m-day > * { gap:10px !important; }
  .hb-m-day > * > div:last-child > div:first-child { font-size:11.5px !important; }
  .hb-m-day > * > div:last-child > div:last-child { font-size:14px !important; }

  /* 텍스트·인물 카드 → 2열 */
  .hb-m-2col { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; }

  /* 센터 카드 → 가로 스크롤 */
  .hb-m-hscroll {
    grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:78%;
    gap:12px !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:-24px; padding:4px 24px 14px; scroll-padding-inline:24px; scrollbar-width:none;
  }
  .hb-m-hscroll::-webkit-scrollbar { display:none; }
  .hb-m-hscroll > * { scroll-snap-align:start; }

  /* 센터 카드 가로 스크롤 화살표 */
  .hb-hs-btn {
    display:flex; position:absolute; top:34%; transform:translateY(-50%); z-index:3;
    width:40px; height:40px; border-radius:999px; border:1px solid #ececec; padding:0;
    align-items:center; justify-content:center; cursor:pointer;
    background:rgba(255,255,255,.95); color:#0084ff; box-shadow:0 6px 18px rgba(10,10,10,.14);
    transition:opacity 200ms ease, transform 200ms ease;
  }
  .hb-hs-btn:active { transform:translateY(-50%) scale(.92); }
  .hb-hs-btn:focus-visible { outline:2px solid #0084ff; outline-offset:2px; }
  .hb-hs-prev { left:-12px; }
  .hb-hs-next { right:-12px; }
  .hb-hs-btn[data-hidden="true"] { opacity:0; pointer-events:none; }

  /* 활동 사진 제목 가운데 정렬 */
  .hb-ph-head { align-items:center !important; text-align:center !important; }

  /* 센터 안내 제목 가운데 정렬 */
  .hb-ct-head { flex-direction:column; align-items:center !important; text-align:center; }
  .hb-ct-titles { align-items:center; }

  /* 보호자님 후기: 모바일은 자동 롤링 대신 손으로 넘기기 + 화살표 */
  .hb-rv-head { align-items:center !important; text-align:center !important; }
  .hb-rv-wrap { padding:0 16px; }
  .hb-rv-track {
    animation:none !important; transform:none !important; width:auto !important; padding:4px 0 14px !important;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:12px !important;
  }
  .hb-rv-track::-webkit-scrollbar { display:none; }
  .hb-rv-track { align-items:flex-start; }
  .hb-rv-track > * { width:84% !important; flex-shrink:0; scroll-snap-align:start; }
  .hb-rv-track > :nth-child(n+10) { display:none !important; }
  .hb-rv-wrap .hb-hs-prev { left:4px; }
  .hb-rv-wrap .hb-hs-next { right:4px; }
  .hb-rv-wrap .hb-hs-btn { top:calc(4px + 42vw); }

  /* 메인 히어로 슬라이더 */
  .hb-m-hero { height:520px !important; }
  .hb-m-hero .hb-hero-copy { gap:24px !important; padding:24px 20px 56px !important; }
  .hb-m-hero h1 { font-size:clamp(24px, 7.4vw, 34px) !important; line-height:1.5 !important; }
  .hb-m-hero h1 + p { font-size:14px !important; line-height:1.7 !important; }
}

/* ---------- PC 상단 바로가기 (공지사항·인재채용·제휴문의) — 휴대폰은 ☰ 메뉴 하단에 있음 ---------- */
.hb-gnb-util { display:flex; align-items:center; gap:0; margin-right:4px; }
.hb-gnb-util a { position:relative; padding:6px 10px; font-size:13px; font-weight:600; color:#7a7a7a; white-space:nowrap; text-decoration:none; transition:color .2s; }
.hb-gnb-util a + a::before { content:""; position:absolute; left:0; top:50%; width:1px; height:10px; margin-top:-5px; background:#d9d9d9; }
.hb-gnb-util a:hover, .hb-gnb-util a[aria-current="page"] { color:#0084ff; }
@media (max-width: 1100px) { .hb-gnb-util a { padding:6px 7px; font-size:12px; } }
@media (max-width: 960px) { .hb-gnb-util { display:none; } }

/* ---------- 함께하는 파트너 로고 롤링 (가맹안내 · 홈 공용, 복제·속도는 mobile-nav.js) ---------- */
.fr-marquee { flex:1; min-width:0; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.fr-marquee-track { list-style:none; margin:0; padding:0; display:flex; gap:12px; width:max-content; animation:fr-marquee var(--fr-mq-dur, 30s) linear infinite; }
.fr-marquee:hover .fr-marquee-track { animation-play-state:paused; }
.fr-marquee-track li { flex:0 0 auto; width:200px; height:84px; border-radius:14px; background:#fff; border:1px solid #e3ebf5; display:flex; align-items:center; justify-content:center; padding:0 22px; box-sizing:border-box; }
.fr-marquee-track img { display:block; max-width:100%; max-height:42px; width:auto; height:auto; object-fit:contain; }
@keyframes fr-marquee { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 6px)); } }
@media (max-width: 640px) { .fr-marquee-track { gap:8px; } .fr-marquee-track li { width:150px; height:64px; padding:0 16px; } .fr-marquee-track img { max-height:32px; } @keyframes fr-marquee { to { transform:translateX(calc(-50% - 4px)); } } }
@media (prefers-reduced-motion: reduce) { .fr-marquee-track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; } .fr-marquee { -webkit-mask-image:none; mask-image:none; } .fr-marquee-track li[aria-hidden] { display:none; } }