/* ======================================================================== */
/* === HEADER (화이트365치과 상단 정보 바 + 메뉴 바) ========================= */
/* ======================================================================== */

/* 고정 헤더 + 본문 시작 위치 확보 (PC 헤더 높이 200px) */
#header { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; background: #fff; transition: box-shadow 0.3s; }
#header.on { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); }
#wrapper { padding-top: 200px; }

/* 상단 정보 바 */
.hd-top { position: relative; max-height: 130px; overflow: hidden; transition: max-height 0.4s ease; }
.hd-top__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1440px; height: 125px; margin: 0 auto; padding: 0 20px; }

.hd-subway { display: flex; align-items: center; gap: 18px; }
.hd-subway__badge { display: flex; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: #e6177a; color: #fff; line-height: 1; }
.hd-subway__txt { line-height: 1.35; color: #111; }

.hd-logo { justify-self: center; }
.hd-logo a { display: block; }
.hd-logo img { display: block; width: 375px; max-width: 100%; height: auto; }

.hd-call { justify-self: end; }
.hd-call__tit { line-height: 1.2; color: #111; }
.hd-call__num { display: block; margin-top: 2px; line-height: 1.1; letter-spacing: 0; color: #13afb0; }

/* 메뉴 바 */
nav { background: #002060; }
nav #nav_wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
nav #nav_wrap ul { display: flex; justify-content: space-between; align-items: center; height: 75px; }
nav #nav_wrap ul li { cursor: pointer; }
nav #nav_wrap ul li a { position: relative; display: inline-block; padding: 18px 0; color: #fff; line-height: 1.2; transition: color 0.3s; }
nav #nav_wrap ul li a::before { content: ""; position: absolute; left: 0; bottom: 8px; width: 0; height: 3px; background: #13afb0; transition: width 0.25s ease-in-out; }
nav #nav_wrap ul li:hover a, nav #nav_wrap ul li a.on { color: #13afb0; }
nav #nav_wrap ul li:hover a::before, nav #nav_wrap ul li a.on::before { width: 100%; }

/* 모바일 전용 버튼 (PC 숨김) */
#m_phone, #m_menu { display: none; }

/* 스크롤 시 상단 정보 바 접기 (PC) */
@media screen and (min-width: 1201px) {
  #header.on .hd-top { max-height: 0; }
}

/* ================== member-menu (기존 유지) ===================== */
.member-menu { border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.member-menu ul { display: flex; max-width: 900px; margin: auto; }
.member-menu ul li { width: 50%; text-align: center; border-right: 1px solid #eee; }
.member-menu ul li:first-child { border-left: 1px solid #eee; }
.member-menu ul li a { display: block; padding: 10px; }
.member-menu ul li a:hover { background: #13afb0; color: #fff; }

@media screen and (max-width: 1400px) {
  .hd-logo img { width: 300px; }
  .hd-subway__badge { flex-basis: 54px; width: 54px; height: 54px; }
  nav #nav_wrap ul li a { font-size: 18px; }
}

/* ============================== Mobile size : 1200px ============================== */
@media screen and (max-width: 1200px) {
  #wrapper { padding-top: 70px; }

  .hd-top { max-height: none; overflow: visible; }
  .hd-top__inner { grid-template-columns: 1fr; height: 70px; padding: 0 60px; }
  .hd-subway, .hd-call { display: none; }
  .hd-logo img { width: 190px; }

  #m_phone { display: block; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); }
  #m_phone img { display: block; width: 40px; height: 40px; }
  #m_menu { display: block; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); cursor: pointer; }
  #m_menu span { display: none; }
  #m_menu > img { display: block; width: 24px; height: auto; }

  /* 드롭다운 메뉴 */
  nav { position: absolute; top: 100%; left: 0; width: 100%; background: transparent; }
  nav #nav_wrap { display: none; max-width: 100%; padding: 0; background: rgba(0, 32, 96, 0.97); }
  nav #nav_wrap.on { display: block; }
  nav #nav_wrap ul { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; }
  nav #nav_wrap ul li { border-right: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); text-align: center; }
  nav #nav_wrap ul li:nth-child(3n) { border-right: 0; }
  nav #nav_wrap ul li a { display: block; padding: 14px 5px; font-size: 15px; }
  nav #nav_wrap ul li a::before { display: none; }
}

/* ============================== Mobile size : 769px ============================== */
@media screen and (max-width: 769px) {
  #quick_menu { display: none; }
}

@media screen and (max-width: 425px) {
  .hd-top__inner { padding: 0 55px; }
  .hd-logo img { width: 170px; }
  #m_phone { left: 10px; }
  #m_phone img { width: 45px; height: 45px; }
  #m_menu { right: 10px; }
  nav #nav_wrap ul li a { padding: 12px 3px; font-size: 13px; }
}
/* ======================================================================== */
/* === HEADER (화이트365치과 상단 정보 바 + 메뉴 바) ========================= */
/* ======================================================================== */