/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 테마 색상 변수는 css/theme/{지점코드}.css 에서 정의 (admin 저장 시 재생성) */
html {
  scroll-behavior: smooth;
}
body {
  color: #333;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 1.2;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* layout */
.inner,
main .cont,
#subLayout .cont {
  max-width: 1216px;
  margin: 0 auto;
}

/* header */
header#header {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
}
/* 스크롤 내리면 상단 고정 (JS가 scrollY > 80 에서 .fixed 토글) */
header#header.fixed {
  position: fixed;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
  animation: hdrSlideDown .25s ease;
}
@keyframes hdrSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
header#header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
/* 로고 — 심볼 이미지 + 텍스트(자연과한의원/지점명) 조합 */
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img {
  width: 36px;
  height: auto; /* 원본 비율(36:46.62) 유지 */
}
.logo_txt {
  display: flex;
  flex-direction: column;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 125%;
}
.logo_txt small {
  color: var(--pointColor);
  font-size: 12px;
  font-weight: 300;
  line-height: 125%;
}
header#header .inner .gnb_area ul {
  display: flex;
  align-items: center;
  gap: 22px;
}
header#header .inner .gnb_area ul a {
  padding: 0 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 38px;
  display: block;
}
.gnb_area a.sub:after {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  content: "";
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: translate(-50%, -50%) rotate(135deg);
  box-sizing: border-box;
}
.gnb_area ul > li {
  position: relative;
}
.gnb_area ul > li.open > a {
  background-color: var(--gnbhover);
  border-radius: 32px;
}
.gnb_area ul .sub_cate {
  position: absolute;
  display: none;
  background: #fff;
  padding: 2px 0 0 0;
}
#header .util {
  display: flex;
  align-items: center;
}
.util .call {
  color: var(--pointColor);
  font-weight: 500;
}
.util .call img {
  width: 14px;
  display: inline-block;
  margin-right: 4px;
}

/* ── 테마색 아이콘 (SVG mask) — 모양은 인라인 SVG, 색은 var(--pointColor)가 입힘.
      기존 지점별 png 슬롯(hrd_call/clock/dt_clock/call01/office/foo_icon01~03) 대체.
      ※ mask-image 는 background 와 달리 원격 URL 이면 CORS 필수 → 반드시 인라인 유지 ── */
.ico-call,
.ico-clock,
.ico-foo-call,
.ico-foo-pin,
.ico-foo-clock {
  display: inline-block;
  flex: none;
  background: var(--pointColor);
}
/* 헤더 전화기 (구 hrd_call.png) */
.ico-call {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M13.0944 10.6871C12.5982 10.1871 11.3963 9.45745 10.8132 9.16338C10.0538 8.78088 9.99129 8.74963 9.39442 9.19307C8.99629 9.48901 8.7316 9.75338 8.26567 9.65401C7.79973 9.55463 6.78723 8.99432 5.90067 8.11057C5.0141 7.22682 4.42129 6.18495 4.3216 5.72057C4.22192 5.2562 4.49067 4.99463 4.78379 4.59557C5.19692 4.03307 5.16567 3.93932 4.81254 3.17995C4.53723 2.58932 3.78629 1.3987 3.28442 0.904947C2.74754 0.374635 2.74754 0.468384 2.4016 0.612134C2.11996 0.730607 1.84977 0.874647 1.59442 1.04245C1.09442 1.37463 0.816917 1.65057 0.622855 2.06526C0.428792 2.47995 0.341605 3.45213 1.34379 5.27276C2.34598 7.09338 3.0491 8.02432 4.50442 9.47557C5.95973 10.9268 7.07879 11.7071 8.71473 12.6246C10.7385 13.7581 11.5147 13.5371 11.9307 13.3434C12.3466 13.1496 12.6238 12.8746 12.9566 12.3746C13.1248 12.1197 13.2692 11.8498 13.3879 11.5684C13.5319 11.2237 13.6257 11.2237 13.0944 10.6871Z' stroke='black' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M13.0944 10.6871C12.5982 10.1871 11.3963 9.45745 10.8132 9.16338C10.0538 8.78088 9.99129 8.74963 9.39442 9.19307C8.99629 9.48901 8.7316 9.75338 8.26567 9.65401C7.79973 9.55463 6.78723 8.99432 5.90067 8.11057C5.0141 7.22682 4.42129 6.18495 4.3216 5.72057C4.22192 5.2562 4.49067 4.99463 4.78379 4.59557C5.19692 4.03307 5.16567 3.93932 4.81254 3.17995C4.53723 2.58932 3.78629 1.3987 3.28442 0.904947C2.74754 0.374635 2.74754 0.468384 2.4016 0.612134C2.11996 0.730607 1.84977 0.874647 1.59442 1.04245C1.09442 1.37463 0.816917 1.65057 0.622855 2.06526C0.428792 2.47995 0.341605 3.45213 1.34379 5.27276C2.34598 7.09338 3.0491 8.02432 4.50442 9.47557C5.95973 10.9268 7.07879 11.7071 8.71473 12.6246C10.7385 13.7581 11.5147 13.5371 11.9307 13.3434C12.3466 13.1496 12.6238 12.8746 12.9566 12.3746C13.1248 12.1197 13.2692 11.8498 13.3879 11.5684C13.5319 11.2237 13.6257 11.2237 13.0944 10.6871Z' stroke='black' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 진료시간 시계 (구 clock.png·dt_clock.png) — 메인·오시는길 제목, 상세페이지 */
.ico-clock {
  width: 20px;
  height: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.75 4.75V9.75L12.75 12.75M0.75 9.75C0.75 10.9319 0.982792 12.1022 1.43508 13.1942C1.88738 14.2861 2.55031 15.2782 3.38604 16.114C4.22177 16.9497 5.21392 17.6126 6.30585 18.0649C7.39778 18.5172 8.5681 18.75 9.75 18.75C10.9319 18.75 12.1022 18.5172 13.1942 18.0649C14.2861 17.6126 15.2782 16.9497 16.114 16.114C16.9497 15.2782 17.6126 14.2861 18.0649 13.1942C18.5172 12.1022 18.75 10.9319 18.75 9.75C18.75 7.36305 17.8018 5.07387 16.114 3.38604C14.4261 1.69821 12.1369 0.75 9.75 0.75C7.36305 0.75 5.07387 1.69821 3.38604 3.38604C1.69821 5.07387 0.75 7.36305 0.75 9.75Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.75 4.75V9.75L12.75 12.75M0.75 9.75C0.75 10.9319 0.982792 12.1022 1.43508 13.1942C1.88738 14.2861 2.55031 15.2782 3.38604 16.114C4.22177 16.9497 5.21392 17.6126 6.30585 18.0649C7.39778 18.5172 8.5681 18.75 9.75 18.75C10.9319 18.75 12.1022 18.5172 13.1942 18.0649C14.2861 17.6126 15.2782 16.9497 16.114 16.114C16.9497 15.2782 17.6126 14.2861 18.0649 13.1942C18.5172 12.1022 18.75 10.9319 18.75 9.75C18.75 7.36305 17.8018 5.07387 16.114 3.38604C14.4261 1.69821 12.1369 0.75 9.75 0.75C7.36305 0.75 5.07387 1.69821 3.38604 3.38604C1.69821 5.07387 0.75 7.36305 0.75 9.75Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sec8_info_title .ico-clock,
.loc_info_title .ico-clock {
  margin-right: 8px;
}
h4.info_title .ico-clock {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
/* 푸터 전화기 (구 foo_icon01.png) */
.ico-foo-call {
  width: 17px;
  height: 17px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M16.0011 13.0375C15.3903 12.4221 13.911 11.5241 13.1933 11.1622C12.2587 10.6914 12.1818 10.653 11.4471 11.1987C10.9571 11.5629 10.6313 11.8883 10.0579 11.766C9.48439 11.6437 8.2382 10.9541 7.14702 9.86645C6.05584 8.77881 5.32621 7.49656 5.20352 6.92504C5.08082 6.35353 5.4116 6.03162 5.77238 5.54049C6.28085 4.84821 6.24239 4.73283 5.80776 3.79825C5.46891 3.07136 4.54465 1.60604 3.92695 0.998375C3.26616 0.345711 3.26616 0.46109 2.84038 0.638006C2.49373 0.783812 2.16118 0.961085 1.8469 1.1676C1.2315 1.57643 0.889949 1.91603 0.651097 2.42639C0.412245 2.93675 0.304935 4.13324 1.53843 6.37391C2.77192 8.61459 3.63732 9.76031 5.42852 11.5464C7.21972 13.3325 8.59706 14.2928 10.6106 15.422C13.1014 16.8169 14.0568 16.545 14.5687 16.3066C15.0807 16.0681 15.4218 15.7297 15.8315 15.1143C16.0385 14.8006 16.2162 14.4684 16.3622 14.122C16.5396 13.6978 16.6549 13.6978 16.0011 13.0375Z' stroke='black' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M16.0011 13.0375C15.3903 12.4221 13.911 11.5241 13.1933 11.1622C12.2587 10.6914 12.1818 10.653 11.4471 11.1987C10.9571 11.5629 10.6313 11.8883 10.0579 11.766C9.48439 11.6437 8.2382 10.9541 7.14702 9.86645C6.05584 8.77881 5.32621 7.49656 5.20352 6.92504C5.08082 6.35353 5.4116 6.03162 5.77238 5.54049C6.28085 4.84821 6.24239 4.73283 5.80776 3.79825C5.46891 3.07136 4.54465 1.60604 3.92695 0.998375C3.26616 0.345711 3.26616 0.46109 2.84038 0.638006C2.49373 0.783812 2.16118 0.961085 1.8469 1.1676C1.2315 1.57643 0.889949 1.91603 0.651097 2.42639C0.412245 2.93675 0.304935 4.13324 1.53843 6.37391C2.77192 8.61459 3.63732 9.76031 5.42852 11.5464C7.21972 13.3325 8.59706 14.2928 10.6106 15.422C13.1014 16.8169 14.0568 16.545 14.5687 16.3066C15.0807 16.0681 15.4218 15.7297 15.8315 15.1143C16.0385 14.8006 16.2162 14.4684 16.3622 14.122C16.5396 13.6978 16.6549 13.6978 16.0011 13.0375Z' stroke='black' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
ul.fl li .ico-foo-call,
ul.fl li .ico-foo-pin {
  margin-right: 4px;
}
/* 푸터 위치 핀 (구 foo_icon02.png) */
.ico-foo-pin {
  width: 17px;
  height: 22px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='22' viewBox='0 0 17 22' fill='none'%3E%3Cpath d='M14.1569 2.84315C12.6566 1.34285 10.6217 0.5 8.5 0.5C6.37827 0.5 4.34344 1.34285 2.84315 2.84315C1.34285 4.34344 0.5 6.37827 0.5 8.5C0.5 15 8.5 20.5 8.5 20.5C8.5 20.5 16.5 15 16.5 8.5C16.5 6.37827 15.6571 4.34344 14.1569 2.84315Z' stroke='black'/%3E%3Cpath d='M11.5 8.5C11.5 9.29565 11.1839 10.0587 10.6213 10.6213C10.0587 11.1839 9.29565 11.5 8.5 11.5C7.70435 11.5 6.94129 11.1839 6.37868 10.6213C5.81607 10.0587 5.5 9.29565 5.5 8.5C5.5 7.70435 5.81607 6.94129 6.37868 6.37868C6.94129 5.81607 7.70435 5.5 8.5 5.5C9.29565 5.5 10.0587 5.81607 10.6213 6.37868C11.1839 6.94129 11.5 7.70435 11.5 8.5Z' stroke='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='22' viewBox='0 0 17 22' fill='none'%3E%3Cpath d='M14.1569 2.84315C12.6566 1.34285 10.6217 0.5 8.5 0.5C6.37827 0.5 4.34344 1.34285 2.84315 2.84315C1.34285 4.34344 0.5 6.37827 0.5 8.5C0.5 15 8.5 20.5 8.5 20.5C8.5 20.5 16.5 15 16.5 8.5C16.5 6.37827 15.6571 4.34344 14.1569 2.84315Z' stroke='black'/%3E%3Cpath d='M11.5 8.5C11.5 9.29565 11.1839 10.0587 10.6213 10.6213C10.0587 11.1839 9.29565 11.5 8.5 11.5C7.70435 11.5 6.94129 11.1839 6.37868 10.6213C5.81607 10.0587 5.5 9.29565 5.5 8.5C5.5 7.70435 5.81607 6.94129 6.37868 6.37868C6.94129 5.81607 7.70435 5.5 8.5 5.5C9.29565 5.5 10.0587 5.81607 10.6213 6.37868C11.1839 6.94129 11.5 7.70435 11.5 8.5Z' stroke='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 푸터 진료시간 시계 (구 foo_icon03.png) */
.ico-foo-clock {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M8.5 4.05556V7.40133C8.50001 7.73155 8.59199 8.05524 8.76564 8.33611C8.93928 8.61699 9.18772 8.84395 9.48311 8.99156L12.0556 10.2778M16.5 8.5C16.5 12.9183 12.9183 16.5 8.5 16.5C4.08172 16.5 0.5 12.9183 0.5 8.5C0.5 4.08172 4.08172 0.5 8.5 0.5C12.9183 0.5 16.5 4.08172 16.5 8.5Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M8.5 4.05556V7.40133C8.50001 7.73155 8.59199 8.05524 8.76564 8.33611C8.93928 8.61699 9.18772 8.84395 9.48311 8.99156L12.0556 10.2778M16.5 8.5C16.5 12.9183 12.9183 16.5 8.5 16.5C4.08172 16.5 0.5 12.9183 0.5 8.5C0.5 4.08172 4.08172 0.5 8.5 0.5C12.9183 0.5 16.5 4.08172 16.5 8.5Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 모바일 햄버거 메뉴 버튼 (구 mo.png) */
.ico-menu {
  display: inline-block;
  width: 20px;
  height: 13px;
  flex: none;
  background: var(--pointColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' viewBox='0 0 20 13' fill='none'%3E%3Cpath d='M0 13V10.8333H20V13H0ZM0 7.58333V5.41667H20V7.58333H0ZM0 2.16667V0H20V2.16667H0Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' viewBox='0 0 20 13' fill='none'%3E%3Cpath d='M0 13V10.8333H20V13H0ZM0 7.58333V5.41667H20V7.58333H0ZM0 2.16667V0H20V2.16667H0Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 원형 연한 배경 + 아이콘 — 메인·오시는길 전화(구 call01.png)/주소(구 office.png) */
.ico-call-circle,
.ico-office {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--smtitbackground);
}
.ico-call-circle::after,
.ico-office::after {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--pointColor);
}
.ico-call-circle::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.2263 16.5215C19.4629 15.7523 17.6138 14.6297 16.7166 14.1773C15.5483 13.5889 15.4522 13.5408 14.5339 14.223C13.9214 14.6783 13.5142 15.085 12.7973 14.9321C12.0805 14.7792 10.5227 13.9172 9.15876 12.5577C7.79478 11.1981 6.88274 9.59531 6.72937 8.88091C6.576 8.16652 6.98947 7.76413 7.44044 7.15022C8.07604 6.28487 8.02796 6.14065 7.48468 4.97243C7.06111 4.06381 5.90579 2.23216 5.13366 1.47258C4.30768 0.656748 4.30768 0.800972 3.77545 1.02212C3.34214 1.20437 2.92645 1.42597 2.53359 1.68411C1.76435 2.19514 1.33741 2.61964 1.03885 3.2576C0.740282 3.89555 0.606144 5.39116 2.14801 8.192C3.68987 10.9928 4.77163 12.425 7.01063 14.6576C9.24962 16.8902 10.9713 18.0906 13.4882 19.5021C16.6017 21.2458 17.796 20.9059 18.4359 20.6078C19.0758 20.3097 19.5023 19.8867 20.0143 19.1175C20.2731 18.7253 20.4952 18.3101 20.6778 17.8772C20.8994 17.3469 21.0437 17.3469 20.2263 16.5215Z' stroke='black' stroke-width='1.7' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.2263 16.5215C19.4629 15.7523 17.6138 14.6297 16.7166 14.1773C15.5483 13.5889 15.4522 13.5408 14.5339 14.223C13.9214 14.6783 13.5142 15.085 12.7973 14.9321C12.0805 14.7792 10.5227 13.9172 9.15876 12.5577C7.79478 11.1981 6.88274 9.59531 6.72937 8.88091C6.576 8.16652 6.98947 7.76413 7.44044 7.15022C8.07604 6.28487 8.02796 6.14065 7.48468 4.97243C7.06111 4.06381 5.90579 2.23216 5.13366 1.47258C4.30768 0.656748 4.30768 0.800972 3.77545 1.02212C3.34214 1.20437 2.92645 1.42597 2.53359 1.68411C1.76435 2.19514 1.33741 2.61964 1.03885 3.2576C0.740282 3.89555 0.606144 5.39116 2.14801 8.192C3.68987 10.9928 4.77163 12.425 7.01063 14.6576C9.24962 16.8902 10.9713 18.0906 13.4882 19.5021C16.6017 21.2458 17.796 20.9059 18.4359 20.6078C19.0758 20.3097 19.5023 19.8867 20.0143 19.1175C20.2731 18.7253 20.4952 18.3101 20.6778 17.8772C20.8994 17.3469 21.0437 17.3469 20.2263 16.5215Z' stroke='black' stroke-width='1.7' stroke-miterlimit='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ico-office::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M3.57737 16.3042H5.39555M7.21373 16.3042H9.03192M7.21373 10.8496H9.03192M3.57737 10.8496H5.39555M3.57737 5.39506H5.39555M7.21373 5.39506H9.03192M17.2137 20.8496H20.8501V9.94052H11.7592V0.849609H0.850098V20.8496H11.7592M17.2137 20.8496H11.7592M17.2137 20.8496V13.5769H11.7592V20.8496' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M3.57737 16.3042H5.39555M7.21373 16.3042H9.03192M7.21373 10.8496H9.03192M3.57737 10.8496H5.39555M3.57737 5.39506H5.39555M7.21373 5.39506H9.03192M17.2137 20.8496H20.8501V9.94052H11.7592V0.849609H0.850098V20.8496H11.7592M17.2137 20.8496H11.7592M17.2137 20.8496V13.5769H11.7592V20.8496' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.util .login {
  box-sizing: border-box;
  margin-left: 10px;
  padding: 10px 24px;
  color: #fff;
  border-radius: 24px;
  background: var(--pointColor);
  font-weight: 500;
}

/* mobile menu */
.mobile_menu_bar {
  display: none;
}
aside#aside {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
}
.aside_wrap .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
}
.aside_wrap .top p {
  font-size: 16px;
  font-weight: 400;
}
.aside_wrap .top a {
  color: var(--pointColor);
  font-size: 12px;
  font-weight: 300;
}
.aside_wrap .top button.close {
  width: 30px;
  height: 30px;
  border: 0;
  background: url(https://cdn.withnatural.co.kr/branch-site/public/img/common/mo_close.png) no-repeat center / 15px;
  font-size: 0;
}
.aside_wrap .cate {
  box-sizing: border-box;
  padding: 16px 15px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.aside_wrap .cate a {
  display: block;
  padding: 12px;
  color: #282828;
  font-size: 14px;
  font-weight: 400;
}
.aside_wrap .cate a.sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.aside_wrap .cate a.sub:after {
  display: inline-block;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: translate(-50%, -50%) rotate(45deg);
}
.aside_wrap .cate a.sub.active {
  box-sizing: border-box;
  color: var(--pointColor);
  border-radius: 40px;
  font-weight: 500;
  background-color: var(--activebackground);
}
.aside_wrap .cate a.sub.active:after {
  border-color: var(--pointColor);
}
.aside_wrap .sub_cate {
  display: none;
  padding-left: 12px;
}
.aside_wrap .util {
  padding: 20px 15px;
}

.aside_wrap .util a {
  display: block;
  margin-bottom: 10px;
  padding: 12px 0;
  color: #fff;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.aside_wrap .util a.online {
  background: var(--pointColor);
}

.aside_wrap .util a.loginlink {
  background: var(--pointColor);
}

/* ── 하단 고정 CTA 바 — 가운데 플로팅 바텀시트, 앵커(data-cta-anchor) 전체 노출 시 숨김 ── */
.cta-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  bottom: 0; /* 화면 바닥에 밀착 — 위쪽 모서리만 둥근 바텀시트 형태 */
  z-index: 999;
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 15%);
  backdrop-filter: blur(6px);
  /* 기본 숨김 — 앵커가 화면 밖으로 나가면 JS 가 .show 부여 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.cta-bar.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cta-bar a {
  padding: 15px 40px;
  border-radius: 50px;
  color: #fff;
  background: var(--pointColor);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.15s;
}
.cta-bar a:hover {
  transform: translateY(-2px);
}
.cta-bar a.kakao {
  color: #000;
  background: #fee500;
}
.cta-bar a.naver {
  background: #03c75a;
}
/* 고정 바가 푸터 하단을 가리지 않게 여백 확보 (바 있는 페이지만) */
body:has(.cta-bar) #footer {
  padding-bottom: 130px;
}

/* ===== Footer ===== */
#footer {
  padding: 60px 0;
  color: #aaa;
  background: #333;
  background: rgb(0 0 0 / 70%);
}
.footer_inner {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr 1.2fr;
  gap: 40px;
}
.footer_logo a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer_logo img {
  width: 36px;
  height: auto; /* 원본 비율(36:46.62) 유지 */
}
.footer_logo_txt {
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 125%;
}
.footer_logo_txt small {
  color: var(--pointColor);
  font-size: 12px;
  font-weight: 300;
  line-height: 125%;
}

.footer_desc {
  margin-bottom: 16px;
  color: #999;
  font-size: 13px;
  line-height: 1.8;
}
.footer_sns {
  display: flex;
  gap: 10px;
}
.sns_kakao,
.sns_naver {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.sns_kakao {
  background: #fee500;
}
.sns_naver {
  background: #03c75a;
}
p.footer_col_title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
p.footer_col_title img {
  width: 16px;
  margin-right: 5px;
}
.footer_col ul li {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
}
.footer_col ul li a.call {
  color: #fff;
}
ul.fl li img {
  margin-right: 4px;
}
ul.fl li {
  display: flex;
}
ul.footer_hours li {
  display: flex;
  justify-content: space-between;
}
ul.footer_hours li span {
  color: #fff;
}
ul.footer_hours li .pink {
  color: var(--pointColor);
}

.pc {
  display: block;
}
.mobile {
  display: none;
}
/* ===== Responsive ===== */
@media (max-width: 1216px) {
  .inner,
  main .cont,
  #subLayout .cont {
    padding: 0 10px;
  }
}
@media (max-width: 1024px) {
  .inner,
  main .cont,
  #subLayout .cont {
    padding: 0 24px;
  }

  /* header */
  header#header .inner {
    height: 64px;
  }
  header#header .inner .gnb_area ul {
    gap: 12px;
  }
  header#header .inner .gnb_area ul a {
    padding: 0 8px;
    line-height: 32px;
  }

  /* footer */
  .footer_inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 850px) {
  /* header */
  #header {
    border-bottom: 1px solid #e2e2e2;
  }
  header#header .inner {
    height: 56px;
  }
  header#header .inner .gnb_area,
  header#header .inner .util {
    display: none;
  }
  .mobile_menu_bar {
    display: block;
  }
  .util .login {
    padding: 8px 16px;
    font-size: 13px;
  }
  .util .call {
    font-size: 13px;
  }
}
/* ── 모바일 (≤767px) ── */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .inner,
  main .cont,
  #subLayout .cont {
    padding: 0 15px;
  }

  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }

  /* 하단 고정 CTA 바 — 모바일 축소 */
  .cta-bar {
    gap: 5px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    max-width: 100%;
  }
  .cta-bar a {
    padding: 13px 16px;
    font-size: 14px;
  }

  /* footer */
  #footer {
    padding: 30px 0;
  }
  .footer_inner {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  ul.foo_cate {
    display: flex;
    flex-wrap: wrap;
  }

  ul.foo_cate li,
  .footer_col .fl li,
  ul.footer_hours li * {
    flex: 1 1 50%;
  }
  ul.foo_cate li:nth-child(2) {
    order: 3;
  }
  ul.foo_cate li:nth-child(3) {
    order: 5;
  }
  ul.foo_cate li:nth-child(4) {
    order: 2;
  }
  ul.foo_cate li:nth-child(5) {
    order: 4;
  }
  .footer_col .fl {
    display: flex;
  }
  ul.footer_hours li {
    justify-content: flex-start;
  }
}

/* ===== 메인 프론트 팝업 오버레이 (풀스크린) =====
   버튼 바는 오버레이(absolute)가 아니라 이미지 아래 고정 행 —
   작업표시줄·브라우저 UI 로 뷰포트가 줄어도 버튼이 항상 화면 안에 보임 */
/* 팝업 표시 여부는 <html>.fp-open 클래스가 결정 — header.php의 head 스크립트가
   body 파싱 전에 부여하므로 첫 paint부터 오버레이가 화면을 덮음 (메인 선노출 방지) */
html.fp-open {
  overflow: hidden; /* 팝업 열려 있는 동안 스크롤 잠금 */
}
html.fp-open body::before {
  /* 팝업 마크업(#frontPopup)이 파싱되기 전 구간을 메우는 전면 오버레이.
     반투명 + 블러 — 투명 배경 영상 뒤로 사이트가 흐릿하게 비침 */
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99998;
}
.front-popup {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh; /* 모바일 주소창·동적 뷰포트 대응 */
  z-index: 99999;
  display: none;
  flex-direction: column;
}
html.fp-open .front-popup {
  display: flex;
}
.front-popup__backdrop {
  position: absolute;
  inset: 0;
  /* 배경은 body::before(반투명+블러)가 담당 — 여기서 또 깔면 이중으로 어두워짐 */
  background: transparent;
}
.front-popup__body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.front-popup__media {
  /* 래퍼는 박스를 만들지 않고 내부 미디어(video/img)가 flex 아이템으로 참여 */
  display: contents;
}
.front-popup__img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  cursor: pointer;
}
.front-popup__bottom {
  flex: none;
  margin-top: auto; /* 미디어 로드 전에도 항상 화면 하단 고정 — 위→아래 점프 방지 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .8);
}
.front-popup__today {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.front-popup__today:hover {
  color: #fff;
}
.front-popup__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s;
}
.front-popup__close:hover {
  background: rgba(255, 255, 255, .35);
}

.consult_alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.consult_alert.ok {
  border: 1px solid #6ee7b7;
  background: #ecfdf5;
  color: #065f46;
}
.consult_alert.err {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}