@charset "utf-8";
/* 별가람치과 상단 메뉴 (2026-10)
   · PC: 메뉴에 마우스를 올리면 머리글 아래로 전체 메뉴가 펼쳐집니다.
   · 휴대폰: 메뉴 버튼 → 큰 항목을 누르면 세부 항목이 펼쳐집니다.
   메뉴 내용은 board_menu.php 에서 고칩니다. */

/* ===== PC (751px 이상) ===== */
@media (min-width:751px){
  #header{--gnb-w:min(960px, calc(100vw - 380px))}
  #topMenu{align-self:stretch;display:flex;align-items:stretch}
  #topMenu .gnb{display:flex;align-items:stretch;justify-content:center;width:var(--gnb-w);margin:0}
  #topMenu .gnb>dd{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center}
  #topMenu .gnb>dd>a.gnb-t{position:relative;height:5rem;line-height:5rem;padding:0 .2em;font-size:1.05em;font-weight:600;letter-spacing:-.05em;white-space:nowrap;color:#fff}
  #topMenu .gnb>dd>a.gnb-t::after{content:"";position:absolute;left:50%;bottom:.6rem;width:0;height:2px;border-radius:2px;background:#8cf0ff;transform:translateX(-50%);transition:width .35s cubic-bezier(.2,.75,.15,1)}
  #topMenu .gnb>dd:hover>a.gnb-t::after,
  #topMenu .gnb>dd:focus-within>a.gnb-t::after,
  #topMenu .gnb>dd.on>a.gnb-t::after{width:1.6em}

  /* 세부 메뉴 (메뉴 하나마다 한 줄씩, 모두 함께 펼쳐짐) */
  #topMenu .gnb>dd>.gnb-sub{position:absolute;left:0;right:0;top:100%;z-index:3;display:block;height:auto;min-height:var(--gnb-h,0px);margin:0;padding:2.4rem .4rem 2.8rem;overflow:visible;white-space:normal;text-align:center;opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);transition:opacity .22s ease,transform .38s cubic-bezier(.2,.75,.15,1),visibility 0s linear .38s,background-color .2s}
  #topMenu .gnb>dd+dd>.gnb-sub{border-left:1px solid #edf3f4}
  #header.gnb-open #topMenu .gnb>dd>.gnb-sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  #header.gnb-open #topMenu .gnb>dd:hover>.gnb-sub,
  #header.gnb-open #topMenu .gnb>dd:focus-within>.gnb-sub{background-color:#f1f8f9}
  #topMenu .gnb .gnb-sub li{position:static;height:auto;line-height:1.4}
  #topMenu .gnb .gnb-sub li::before{display:none}
  #topMenu .gnb .gnb-sub li+li{margin-top:.2rem}
  #topMenu .gnb .gnb-sub a{display:inline-block;max-width:100%;padding:.7rem .6rem;border-radius:.8rem;font-size:max(13px,.72em);font-weight:500;letter-spacing:-.04em;line-height:1.4;color:#41545c;word-break:keep-all;transition:color .2s,background-color .2s}
  #topMenu .gnb .gnb-sub a:hover,
  #topMenu .gnb .gnb-sub a:focus-visible{color:#0a616d;background-color:rgba(35,156,173,.13)}
  #topMenu .gnb .gnb-sub a:focus-visible{outline:2px solid #239cad;outline-offset:1px}
  #topMenu .gnb .gnb-sub a.on{color:#0a616d;font-weight:700}
  #topMenu .gnb .gnb-sub .ext{display:inline-block;width:.85em;height:.85em;vertical-align:-.06em;opacity:.55}
  #topMenu .gnb .gnb-sub .ext svg{display:block;width:100%;height:100%}

  /* 펼친 메뉴의 흰 바탕 (머리글 아래 전체 폭) */
  #header::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--gnb-h,0px);background:#fff;box-shadow:0 34px 50px -30px rgba(14,34,48,.4);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .25s}
  #header.gnb-open::after{opacity:1;visibility:visible;transition-delay:0s}
  #header.gnb-open{background-color:var(--primary,#239cad)}

  /* 펼친 메뉴 왼쪽: 전화 · 진료 시간 · 예약 */
  #topMenu .gnb-info{position:absolute;top:100%;right:calc(2rem + var(--gnb-w) + 3.2rem);z-index:3;width:clamp(220px,calc(100vw - var(--gnb-w) - 9rem),300px);padding:2.6rem 0 2.8rem;text-align:left;letter-spacing:-.03em;color:#11232c;opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);transition:opacity .22s ease,transform .38s cubic-bezier(.2,.75,.15,1),visibility 0s linear .38s}
  #header.gnb-open #topMenu .gnb-info{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  #topMenu .gnb-info-eb{font-size:12px;font-weight:700;letter-spacing:.3em;color:#239cad}
  #topMenu .gnb-info-tel{display:block;margin-top:4px;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#0a616d}
  #topMenu .gnb-info-hrs{display:grid;gap:4px;margin-top:14px;padding-top:14px;border-top:1px solid #e3ecee;font-size:13.5px;line-height:1.5;color:#51646c}
  #topMenu .gnb-info-hrs li{display:flex;justify-content:space-between;gap:10px}
  #topMenu .gnb-info-hrs b{font-weight:600;color:#11232c;white-space:nowrap}
  #topMenu .gnb-info-hrs span{text-align:right}
  #topMenu .gnb-info-hrs em{margin-left:4px;font-style:normal;font-size:12px;color:#239cad}
  #topMenu .gnb-info-btns{display:flex;gap:8px;margin-top:16px}
  #topMenu .gnb-info-btns a{flex:1 1 0;padding:9px 0;border:1px solid #cfe2e5;border-radius:999px;text-align:center;font-size:13.5px;font-weight:600;color:#0a616d;transition:background-color .2s,color .2s,border-color .2s}
  #topMenu .gnb-info-btns a:hover{background:#0a616d;border-color:#0a616d;color:#fff}
}
@media (prefers-reduced-motion:reduce){
  #topMenu .gnb>dd>.gnb-sub,#topMenu .gnb-info,#header::after{transition:none !important;transform:none !important}
}

/* ===== 휴대폰 (750px 이하) ===== */
@media (max-width:750px){
  #mobileMenu .gnb{margin:2.4rem 2.4rem 2rem}
  #mobileMenu .gnb>dd>a.gnb-t{font-size:1.15em;font-weight:700;line-height:5.2rem;color:#11232c}
  #mobileMenu .gnb>dd.on>a.gnb-t{color:#0a616d}
  #mobileMenu .gnb>dd>.gnb-sub{background:#f4f8f9;border-radius:1rem}
  #mobileMenu .gnb>dd.active>.gnb-sub{max-height:600px;margin-bottom:1.2rem;padding:.6rem 0;border-top:0}
  #mobileMenu .gnb .gnb-sub a{display:block;padding:0 1.4rem;border-bottom:0;font-size:1.06em;line-height:2.8em;color:#41545c}
  #mobileMenu .gnb .gnb-sub a::before{content:"";display:inline-block;width:4px;height:4px;margin-right:.9rem;border-radius:50%;background:#239cad;vertical-align:middle}
  #mobileMenu .gnb .gnb-sub a.on{color:#0a616d;font-weight:700}
  #mobileMenu .gnb .gnb-sub .ext{display:inline-block;width:1em;height:1em;margin-left:.2em;vertical-align:-.12em;opacity:.55}
  #mobileMenu .gnb .gnb-sub .ext svg{display:block;width:100%;height:100%}
  #mobileMenu .gnb-info{margin:0 2.4rem 2.4rem;padding:1.8rem 2rem;border-radius:1.4rem;background:#f1f8f9;color:#11232c}
  #mobileMenu .gnb-info-eb{font-size:1.1rem;font-weight:700;letter-spacing:.3em;color:#239cad}
  #mobileMenu .gnb-info-tel{display:block;margin-top:.4rem;font-size:2.4rem;font-weight:800;letter-spacing:-.02em;color:#0a616d}
  #mobileMenu .gnb-info-hrs{display:grid;gap:.3rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid #dbe8ea;font-size:1.3rem;line-height:1.5;color:#51646c}
  #mobileMenu .gnb-info-hrs li{display:flex;justify-content:space-between;gap:1rem}
  #mobileMenu .gnb-info-hrs b{font-weight:600;color:#11232c}
  #mobileMenu .gnb-info-hrs em{margin-left:.4rem;font-style:normal;font-size:1.15rem;color:#239cad}
  #mobileMenu .gnb-info-btns{display:flex;gap:.8rem;margin-top:1.4rem}
  #mobileMenu .gnb-info-btns a{flex:1 1 0;padding:1rem 0;border-radius:99rem;background:#fff;border:1px solid #cfe2e5;text-align:center;font-size:1.35rem;font-weight:600;color:#0a616d}
}