/* =====================================================
   common.css — 모든 페이지 공통 (index / about / sub2 / sub3 / sub4)
   - 포함: 리셋 / 기본 / 폰트 · 디자인 변수 / 헤더(PC · 모바일 메뉴) / 퀵메뉴 / 푸터 / 알림 / 공통 반응형
   - 로드 순서: common.css → (index: main.css) / (서브: sub_common.css → sub1~4.css)
   - 메인 전용 스타일은 main.css, 서브 공통(히어로 · 제목)은 sub_common.css, 페이지 전용은 sub1~4.css
   - 폰트: 기본 "Pretendard Variable","Noto Sans KR",sans-serif / 영문 "Manrope","Pretendard Variable",sans-serif
   ===================================================== */

/* =====================================================
   기본 설정 / 공통
   ===================================================== */
:root {
  --gold: #D6B992;
  --brown: #7B6957;
  --navy: #1E3A52;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-notosans: "Noto Sans KR, sans-serif";
  --font-manrope: "Manrope, sans-serif";
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0; /* 비주얼 / 푸터가 브라우저 가장자리까지 닿도록 바깥 여백 없음 */
  background: #f5f3ee;
  font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
  color: white;
  overflow-x:hidden;
}
/* 영문 전용 요소 */
.font-en {
  font-family: "Manrope", "Pretendard Variable", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 6px;
}
button {
  color: inherit;
}
main {
  display: block;
  background: #f2eee8; /* 히어로 우하단 라운드 뒤로 보이는 색 = 소개 섹션 배경 */
}
/* =====================================================
   헤더 / 내비게이션
   ===================================================== */
.header {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  height: 172px;
  --brand-logo-w: 237px; /* 중앙 로고 폭 (PC 원본 237×108). 좁은 화면에서는 아래 미디어쿼리에서 비율 유지로 축소 */
  --ink: white;
  color: var(--ink);
  container-name: site-header;
  container-type: inline-size; /* 1차 메뉴 간격이 스크롤바를 뺀 실제 헤더 폭(100cqi)을 보게 함 */
}
.header:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  height: 350px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.48s var(--ease);
  box-shadow: 0 6px 18px #00000008;
}
.header.open {
  --ink: #292a28;
}
.header.open:before {
  transform: scaleY(1);
}
.head-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px 3%;
  gap: 24px;
}
/* 1차 메뉴 간격 (--nav-gap).
   헤더가 충분히 넓으면 50px(--nav-gap-wide). 실제 헤더 폭이 줄어들면 글자 크기는 그대로 두고 간격만 줄입니다.
   1600px 미만은 모바일 메뉴로 전환합니다 (main.js HEADER_MOBILE_QUERY 와 같은 1599px). */
.nav {
  --nav-gap-wide: 50px;
  --nav-gap-tight: 42px; /* 헤더 폭 1600px */
  --nav-gap: var(--nav-gap-wide);
  display: flex;
  gap: var(--nav-gap);
  padding-top: 12px;
}
/* 2차 메뉴는 absolute: 1차 메뉴(부모) 폭 계산에서 제외되어, 길어도 부모 밖으로 펼쳐질 뿐 1차 간격은 변하지 않음 */
.nav-group {
  position: relative;
}
.nav-main {
  border: 0;
  background: none;
  padding: 0;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  transition: color 0.25s;
}
/*
.nav-group:hover .nav-main {
  color: var(--brown);
}
*/
.submenu {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin: 0;
  padding: 22px 0 0; /* 위쪽 간격은 margin 이 아닌 padding: 1차↔2차 메뉴 사이 hover/focus 이동 구간(bridge)이 같은 요소 안에 유지됨 */
  list-style: none;
  display: grid;
  gap: 18px;
  white-space: nowrap;
  font-size: 16px;
  color: #333;
  visibility: hidden;
  pointer-events: none; /* 닫힌 서브메뉴가 투명한 채로 포인터를 받지 않음 */
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.22s,
    transform 0.35s;
}
.open .submenu {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}
.submenu a:hover {
  color: var(--brown);
}
/* 로고: 왼쪽 메뉴 / 오른쪽 연락처 폭과 무관하게 헤더(=브라우저) 가로 중앙.
   중앙 정렬은 transform 이 아닌 개별 속성 translate 로 처리 → 이후 어떤 transform 모션을 붙여도 충돌하지 않음 */
.brand {
  position: absolute;
  left: 50%;
  top: 28px;
  translate: -50% 0;
  display: block;
  width: var(--brand-logo-w);
  aspect-ratio: 237 / 108; /* 이미지 로딩 전에도 같은 크기를 미리 확보 (레이아웃 이동 없음) */
  line-height: 0;
}
/* 로고 2장(흰색 / 어두운색)을 같은 자리에 겹쳐 두고 헤더 상태(.open)에 따라 opacity 만 교체 → 크기 / 위치 변화 없음 */
.brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}
.brand__logo--c {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.open .brand__logo--w {
  opacity: 0;
}
.open .brand__logo--c {
  opacity: 1;
}
.contact {
  display: flex;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 4px 12px #0001;
  white-space: nowrap;
  font-size: 16px;
  position: relative;
}
.hours {
  background: #89755de6;
  padding: 16px;
  font-size:18px;
  color: white;
}
.phone {
  background: var(--navy);
  padding: 16px 20px;
  color: white;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left:1px solid rgba(255,255,255,0.2);
}
.phone__icon {
  display: inline-flex;
  flex: none;
  width: 21px; /* 아이콘 원본 19×19 를 21px 박스 안에 중앙 정렬 */
  justify-content: center;
}
.phone__icon img {
  display: block;
  width: 19px;
  height: 19px;
}
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 8px;
}
/* =====================================================
   푸터 (site-footer)
   - main 다음에 배치. 고정 높이 없이 콘텐츠에 맞춤. 핀 / 애니메이션 없음
   - 바깥 여백은 footer 의 padding 으로만 처리 (PC 75px 80px 92px).
     body 에 바깥 여백이 없으므로 footer 는 margin 없이 브라우저 좌우 · 아래 끝까지 이어지고,
     내부 래퍼(.site-footer__inner)는 폭 제한 / 좌우 padding · margin 이 없어 콘텐츠가 브라우저 끝에서 정확히 80px
   - 태블릿 좌측 40px, 모바일 좌측 20px. 우측은 fixed 퀵메뉴(56px / 50px) 폭만큼 더 비워 글자가 가려지지 않게 함
   ===================================================== */
.site-footer {
  --site-footer-quick-w: 82px; /* 우측 fixed 퀵메뉴 폭 (1000px 이하 56px, 580px 이하 50px) */
  --site-footer-line: rgb(255 255 255 / 0.14);
  --site-footer-gray: #9d978d; /* 보조 정보 (배경 대비 약 5:1) */
  --site-footer-gray: rgba(255, 255, 255, 0.5);
  --site-footer-light: #d4cfc6; /* 밝은 회색 */

  margin: 0;
  padding: 75px 80px 92px; /* 위 · 좌우 · 아래 (PC) */
  background: #292720;
  color: #fff;
}
.site-footer__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.site-footer a,
.site-footer button {
  transition: color 0.25s;
}
/* ① 로고 */
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
  color: #fff;
}
/* 심볼 + 텍스트가 하나로 된 이미지 (원본 412×69, 비율 유지로 축소) */
.site-footer__logo-img {
  display: block;
  width: clamp(220px, 21.5vw, 412px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 412 / 69;
}
/* ② 메뉴(왼쪽) + 진료비 안내(오른쪽 끝) */
.site-footer__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(12px, 0.8vw, 16px);
  padding-bottom: clamp(14px, 1.4vw, 26px);
  border-bottom: 1px solid var(--site-footer-line);
}
.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 76px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__link {
  display: inline-block;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}
.site-footer__link:hover {
  color: var(--gold);
}
.site-footer__fee {
  flex: none;
  width: clamp(180px, 13.5vw, 260px);
  height: clamp(48px, 3.4vw, 64px);
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: clamp(14px, 1.05vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  transition: background-color 0.25s;
}
.site-footer__fee:hover {
  background: #1b4b68;
}
/* ③ 상담 · 진료정보(왼쪽) + 지도(오른쪽): 좌우 절반, 맞닿게 배치 */
.site-footer__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--site-footer-line);
}
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(20px, 1.6vw, 30px) clamp(24px, 3vw, 60px) clamp(14px, 1vw, 19px) 0;
}
.site-footer__label {
  margin: 0;
  padding: 0.28em 1em;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 6px;
  font-size: clamp(12px, 0.9vw, 17px);
  line-height: 1.5;
  color: #e7e3dc;
}
.site-footer__tel {
  margin-top: clamp(6px, 0.9vw, 14px);
  font-size: clamp(28px, 2.55vw, 50px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gold);
}
.site-footer__tel:hover {
  color: #f0d6ae;
}
.site-footer__hours {
  display: flex;
  align-items: center;
  margin-top: clamp(16px, 1.8vw, 34px);
}
.site-footer__hours-main {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-right: clamp(10px, 1vw, 20px);
  border-right: 1px solid rgb(255 255 255 / 0.25);
  font-size: clamp(20px, 1.9vw, 40px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.site-footer__hours-main b {
  font-weight: 800;
}
.site-footer__hours-detail {
  padding-left: clamp(10px, 1vw, 21px);
}
.site-footer__hours-time {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 22px);
  color: var(--site-footer-light);
  font-weight:500;
}
.site-footer__hours-time b {
  font-weight: 700;
  color: #fff;
  margin-left:5px;
}
.site-footer__hours-note {
  margin: 0.5em 0 0;
  font-size: clamp(11px, 0.85vw, 16px);
  line-height: 1.5;
  color: var(--site-footer-gray);
}
.site-footer__address {
  display: flex;
  align-items: flex-start; /* 주소가 여러 줄이 되어도 아이콘은 첫 줄에 맞춤 */
  gap: 0.6em;
  margin-top: auto;
  padding-top: clamp(24px, 3.1vw, 60px);
  font-size: clamp(13px, 1.05vw, 22px);
  font-style: normal;
  line-height: 1.5;
  color: #fff;
}
/* 아이콘 원본 14×22 (비율 유지). 첫 줄(1.5em) 가운데에 오도록 위쪽 여백 계산 */
.site-footer__address-icon {
  --pin-h: clamp(16px, 1.15vw, 22px);

  flex: none;
  display: block;
  width: auto;
  height: var(--pin-h);
  aspect-ratio: 14 / 22;
  margin-top: calc((1.5em - var(--pin-h)) / 2);
}
/* 지도: 해당 행의 높이를 채움 (직사각형, 둥근 모서리 없음) */
.site-footer__map {
  position: relative;
  display: block;
  min-width: 0;
  min-height: clamp(300px, 20vw, 384px);
  overflow: hidden;
  background: #dcdcd8;
}
.site-footer__map-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% 43%; /* 병원 마커가 잘리지 않게 */
}
/* ④ 사업자 정보 + 카피라이트 (오른쪽 정렬) */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 40px clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 1.5vw, 28px);
  font-size: clamp(11px, 0.85vw, 18px);
  line-height: 1.6;
  text-align: right;
  color: var(--site-footer-gray);
}
.site-footer__biz {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__biz li {  position:relative; }
.site-footer__biz li + li {
  margin-left: clamp(10px, 1vw, 19px);
  padding-left: clamp(10px, 1vw, 19px);
/*  border-left: 1px solid rgb(255 255 255 / 0.22); */
}
.site-footer__biz li::before {
	content:""; position:absolute; left:0; top:50%; height:14px; transform:translateY(-50%);
	background:rgb(255 255 255 / 0.5); width:1px; display:block;
}
.site-footer__biz li:nth-child(1)::before {display:none;}
.site-footer__copy {
  margin: 0;
}
/* 태블릿: 좌 40px (우는 퀵메뉴 폭만큼 더), 메뉴 줄바꿈 허용 */
@media (max-width: 1100px) {
  .site-footer {
    padding: 56px calc(var(--site-footer-quick-w) + 12px) 72px 40px;
  }
  .site-footer__bar {
    flex-wrap: wrap;
  }
  .site-footer__menu {
    gap: 10px clamp(18px, 3vw, 40px);
  }
}
@media (max-width: 1000px) {
  .site-footer {
    --site-footer-quick-w: 56px;
  }
}
/* 상담 · 지도 세로 전환 */
@media (max-width: 900px) {
  .site-footer__info {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-footer__contact {
    padding-right: 0;
    padding-bottom: 24px;
  }
  .site-footer__tel {
    font-size: clamp(28px, 6vw, 44px);
  }
  .site-footer__hours-main {
    font-size: clamp(20px, 3.6vw, 28px);
  }
  .site-footer__hours-time {
    font-size: 15px;
  }
  .site-footer__hours-note {
    font-size: 13px;
  }
  .site-footer__label,
  .site-footer__address {
    font-size: 14px;
  }
  .site-footer__address {
    padding-top: 28px;
  }
  .site-footer__map {
    min-height: clamp(260px, 56vw, 320px);
  }
  .site-footer__legal {
    font-size: 12px;
  }
}
/* 모바일: 좌 20px, 메뉴 2열, 진료비 안내 버튼 전체 너비, 하단 정보는 오른쪽 정렬 유지 + 여러 줄 */
@media (max-width: 680px) {
  .site-footer {
    padding: 44px calc(var(--site-footer-quick-w) + 12px) 56px 20px;
  }
  .site-footer__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .site-footer__menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }
  .site-footer__link {
    font-size: 15px;
  }
  .site-footer__fee {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }
  .site-footer__hours {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .site-footer__hours-main {
    padding-right: 0;
    border-right: 0;
  }
  .site-footer__hours-detail {
    padding-left: 0;
  }
  .site-footer__legal {
    flex-direction: column;
    align-items: flex-end;
  }
  .site-footer__biz {
    flex-direction: column;
    align-items: flex-end;
  }
  .site-footer__biz li + li {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
	.site-footer__biz li::before { display:none; }

}
@media (max-width: 580px) {
  .site-footer {
    --site-footer-quick-w: 50px;
  }
}
/* =====================================================
   퀵메뉴 / 안내
   ===================================================== */
/* 퀵메뉴는 body 의 직접 자식(transform 조상 없음) → right:0 이 뷰포트 콘텐츠 영역(스크롤바 제외) 오른쪽 끝과 정확히 일치.
   컨테이너 padding · 스크롤바 폭의 영향을 받지 않음 */
.quick {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 82px;
  padding: 24px 10px 18px;
  background: #484437d9;
  background: rgba(52, 47, 42, 0.6);
  border-radius: 24px 0 0 24px;
  display: grid;
  gap: 23px;
  text-align: center;
  backdrop-filter: blur(12px);
}
.quick a,
.quick button {
  display: grid;
  justify-items: center;
  gap: 7px;
  font-size: 13px;
  background: none;
  border: 0;
  padding: 0;
  color: #fff; /* body 글자색(페이지 클래스)을 물려받지 않음. sub1~sub3 과 같은 흰색 */
}
.quick a:hover,
.quick a:focus,
.quick a:focus-visible,
.quick a:visited,
.quick button:hover,
.quick button:focus,
.quick button:focus-visible {
  color: #fff;
}
.quick__label {
  color: #fff;
}
.quick a,
.quick button {
  min-height: 44px; /* 클릭 영역 확보 */
}
/* 아이콘 크기가 제각각(24×37 ~ 38×43)이라 같은 높이의 박스 안에 중앙 정렬 → 라벨 기준선이 항상 같음 */
.quick__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 43px;
}
/* 크기는 HTML width / height 속성(시안 크기)을 그대로 사용. 칸보다 크면 칸에 맞춰 줄어듦 (SVG 비율은 유지) */
.quick__ico img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.quick .top {
  border-top: 1px solid #ffffff50;
  padding-top: 18px;
}
.notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  background: var(--navy);
  color: white;
  z-index: 50;
  padding: 14px 24px;
  border-radius: 8px;
  transition: 0.25s;
  pointer-events: none;
}
.notice.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* =====================================================
   반응형
   ===================================================== */
/* ---- 헤더 반응형 (데스크톱 → 모바일 메뉴) ----
   1차 메뉴 글자는 1600px 까지 18px 을 유지하고, 폭이 줄면 메뉴 간격만 줄입니다.
   간격은 뷰포트 숫자가 아니라 헤더 실제 폭(100cqi, 스크롤바 제외) 기준입니다.
   로고 폭·연락처·2차 메뉴 글자 크기는 기존 구간 값을 유지합니다.
   1600px 미만은 모바일 메뉴로 전환합니다 (main.js HEADER_MOBILE_QUERY 와 동일). */
@media (max-width: 1919px) {
  .head-inner {
    padding-left: 3%;
    padding-right: 3%;
  }
  /* 로고 200px · 패딩 3% 구간. 헤더 폭 1717px 이상이면 간격 50px.
     그보다 좁으면(1700px 창은 스크롤바를 빼면 약 1685px) 간격만 줄여 마지막 메뉴와 로고 사이에 32px 이상을 남깁니다. */
  .nav {
    --nav-gap: clamp(
      36px,
      calc(var(--nav-gap-wide) + (100cqi - 1717px) * 0.125),
      var(--nav-gap-wide)
    );
  }
  .nav-main {
    font-size: 18px;
  }
  .submenu {
    font-size: 16px;
  }
  .contact {
    font-size: 14px;
  }
  .phone {
    font-size: 20px;
    padding: 16px;
  }
  .header {
    --brand-logo-w: 200px;
  }
}
@media (max-width: 1699px) {
  .head-inner {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
  /* 로고 180px · 패딩 2.5% 구간. 헤더 폭 1600px → 42px, 1700px → 50px. 상한 50px, 하한 36px. */
  .nav {
    --nav-gap: clamp(
      36px,
      calc(var(--nav-gap-tight) + (100cqi - 1600px) * 0.08),
      var(--nav-gap-wide)
    );
  }
  .nav-main {
    font-size: 18px; /* 1700px 이상과 동일. 굵기·자간·줄 높이는 기본 규칙 유지 */
  }
  .submenu {
    font-size: 12px;
  }
  .contact {
    font-size: 12px;
  }
  .hours {
    padding: 14px;
  }
  .phone {
    font-size: 16px;
    padding: 14px;
  }
  .header {
    --brand-logo-w: 180px;
  }
}
/* 모바일 / 태블릿 헤더: 로고는 그대로 중앙(left:50% + translate), 메뉴는 토글로 여는 패널 */
@media (max-width: 1599px) {
  .header {
    height: 120px;
    --brand-logo-w: 130px;
  }
  .head-inner {
    padding: 22px 3%;
  }
  .brand {
    top: 20px;
  }
  .menu-toggle {
    display: block;
    margin-top: 6px;
  }
  .contact .hours {
    display: none;
  }
  .phone {
    font-size: 14px;
    padding: 12px;
  }
  .nav {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    padding: 24px 3%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    visibility: hidden;
    opacity: 0;
    max-height: calc(100svh - 150px);
    overflow: auto;
  }
  .open .nav {
    visibility: visible;
    opacity: 1;
  }
  .header:before {
    height: min(620px, 100svh);
  }
  .nav-main {
    font-size: 15px;
  }
  /* 패널 안에서는 2차 메뉴를 다시 일반 흐름으로 */
  .submenu {
    position: static;
    padding: 0;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    white-space: normal;
  }
}
@media (max-width: 1000px) {
  .nav {
    padding: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
  .head-inner {
    padding: 22px;
  }
  /* 모바일 퀵메뉴: 세로 중앙 → 우측 하단 fixed 아이콘 전용 세로 배열 (콘텐츠 위 overlay, 본문 여백 보정 없음) */
  .quick {
    position: fixed;
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: 48px;
    max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px)); /* 가로모드에서 화면 밖으로 잘리지 않게 */
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 6px 2px;
    gap: 2px;
    border-radius: 24px 0 0 24px; /* 오른쪽 끝에 붙으므로 데스크톱과 같은 방향의 둥근 모서리 */
  }
  .quick::-webkit-scrollbar {
    display: none;
  }
  .quick a,
  .quick button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-content: center;
    justify-self: center;
  }
  .quick__ico {
    width: 26px;
    height: 26px;
  }
  .quick__label {
    display: none;
  }
  .quick .top {
    margin-top: 2px;
    padding-top: 5px;
    height: 49px;
    min-height: 49px;
    border-radius: 0;
  }
}
@media (max-width: 580px) {
  .phone {
    font-size: 0;
    padding: 10px;
    gap: 0;
  }
  .header {
    --brand-logo-w: 104px;
  }
  .nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .header:before {
    height: 100svh;
  }
}
/* =====================================================
   모션 접근성
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}