/* ==========================================================================
   modal — 공용 모달

   열기   [data-modal-open="모달id"]
   닫기   [data-modal-close] · 배경 클릭 · Esc

   base.css 의 [hidden]:not(:root) 가 .modal 보다 특이도가 높아
   hidden 속성만으로 닫힌다. display 를 따로 되돌릴 필요가 없다.
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  /* safe — 들어갈 자리가 있으면 가운데, 넘치면 **위부터** 붙는다 `[2026-09-21]`.
     그냥 center 로 두면 창이 화면보다 길어졌을 때 위아래로 똑같이 넘치고,
     아래 overflow: hidden 이 윗부분을 잘라 낸다 — 제목과 닫기 X 가 화면 밖으로
     나가 손이 닿지 않는다. 아래가 잘리는 것은 안쪽 스크롤로 닿을 수 있지만
     위가 잘리면 닿을 길이 없다. 지원하지 않는 브라우저는 center 로 읽는다 */
  align-items: safe center;
  justify-content: center;
  padding: var(--sp-5);
  overscroll-behavior: contain;

  /* 모바일에서 position: fixed 는 **주소창이 접힌 상태의 큰 화면**을 기준으로 잡는다
     `[2026-09-18]`. 주소창이 펼쳐져 있으면 이 상자가 실제로 보이는 높이보다 커지고,
     가운데 정렬이라 넘친 윗부분(로고 줄과 닫기 X)이 화면 위로 잘려 손이 닿지 않았다.
     dvh 는 지금 보이는 높이다 — 지원하지 않는 브라우저는 위의 inset 값을 그대로 쓴다 */
  max-height: 100dvh;
  overflow: hidden;
}

/* 배경. 버튼이라 키보드로도 닫을 수 있지만 탭 순서에서는 뺀다 */
.modal__backdrop {
  position: fixed;
  inset: 0;
  padding: 0;
  background: rgb(0 20 46 / .45);
  border: 0;
  cursor: default;
}

/* 화면 높이를 넘지 않는다. 내용이 길어져도 모달 자체는 커지지 않고
   안쪽 스크롤 영역만 늘어난다 (쿠키 모달의 아코디언). */
.modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 472px;
  /* 바깥(.modal)이 화면에 딱 맞는 고정 박스라, 그 높이의 100% 로 가둔다 `[2026-09-18]`.
     100vh 는 모바일에서 주소창이 접히고 펴지는 만큼 실제 보이는 높이와 어긋나
     다이얼로그가 화면보다 커졌다 — 가운데 정렬이라 넘친 윗부분(닫기 X 포함)에
     손이 닿지 않았다. min-height: 0 은 안쪽 스크롤 영역이 줄어들 수 있게 한다 */
  min-height: 0;
  max-height: 100%;
  background: var(--c-bg);
  border-radius: var(--radius);
  /* 안쪽 스크롤 막대가 둥근 모서리를 뚫고 나오지 않게 잘라낸다 */
  overflow: hidden;
  box-shadow: 0 18px 50px rgb(0 24 56 / .25);
}

/* 약관처럼 긴 글은 472px 에 가두면 한 줄이 너무 짧아 읽기 어렵다.
   본문 한 줄이 70자 안팎이 되도록 넓힌다 (modal-privacy). */
.modal__dialog--wide { max-width: 720px; }

/* 알림처럼 한두 줄짜리는 472px 도 넓다 */
.modal__dialog--narrow { max-width: 380px; }

/* 문의 도크가 이 창 **위로** 떠 있는 경우 `[2026-09-21]` (.floating-cta.is-above-modal).
   좁은 화면에서는 도크 단추가 오른쪽 아래에 붙어 창의 Buy Now·Inquiry 를 덮었다.
   창을 그만큼 짧게 만들어 자리를 비운다 — 도크를 내리면 스펙을 보면서 쓰라는
   뜻이 사라지고, z-index 로 다투면 어느 쪽이 위인지 화면마다 달라진다.

   비우는 높이 = 도크가 화면 아래에서 띄운 만큼(--gutter) + 단추 높이(44px,
   손가락 최소 크기) + 숨 쉴 틈. 넓은 화면은 창이 가운데 있고 도크는 오른쪽
   끝이라 겹치지 않는다 — 기본 여백으로 되돌린다 */
.modal--docked { padding-bottom: calc(var(--gutter) + 44px + var(--sp-3)); }

/* 아래에서 올라오는 시트 `[2026-09-21]` — 주문 줄의 더보기가 쓴다.
   손이 닿는 화면 아래쪽에 붙고 가로를 꽉 채운다. 위 모서리만 둥글다:
   아래는 화면 끝에 맞닿아 있어 둥글릴 자리가 없다.
   넓은 화면에서는 열리지 않지만, 열어 둔 채 창을 넓히면 보통 모달로 돌아간다 */
.modal--sheet {
  align-items: flex-end;
  padding: 0;
}
.modal--sheet .modal__dialog {
  max-width: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: sheet-up .22s ease-out;
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* 움직임을 줄여 달라고 한 사람에게는 올라오는 동작을 빼고 그냥 띄운다 */
@media (prefers-reduced-motion: reduce) {
  .modal--sheet .modal__dialog { animation: none; }
}

@media (min-width: 768px) {
  .modal--docked { padding-bottom: var(--sp-5); }
  .modal--sheet { align-items: center; padding: var(--sp-5); }
  .modal--sheet .modal__dialog {
    max-width: 472px;
    border-radius: var(--radius);
    animation: none;
  }
}

/* 시안에는 닫기 버튼이 없다. 키보드 · 스크린리더 사용자를 위해 추가했다 */
/* 내용이 스크롤되어도 제자리에 있어야 하므로, 글자가 비쳐 보이지 않게 배경을 깐다 */
.modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  background: var(--c-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--c-text-sub);
}
.modal__close:hover { background: var(--c-surface); color: var(--c-text); }

/* 모달이 열려 있는 동안 배경을 세워 둔다 `[2026-09-18]`.
   overflow: hidden 만으로는 iOS 사파리에서 배경이 그대로 스크롤돼,
   모달 안을 읽으려고 손가락을 올리면 뒤 페이지가 움직인다.
   --scroll-lock-top 은 modal.js 가 넣는다 (열기 직전의 스크롤 위치) */
body.is-modal-open {
  position: fixed;
  top: var(--scroll-lock-top, 0);
  left: 0;
  width: 100%;
  overflow: hidden;
}

/* 배경을 세우지 않는 창 `[2026-09-18]` — 제품 미리보기가 그렇다.
   읽으면서 뒤 목록을 훑고 문의 폼에 쓰기도 한다. 배경 딤을 옅게 깔아
   "뒤가 죽지 않았다" 를 보이고, 딤 자체는 스크롤을 막지 않는다 */
.modal--light { pointer-events: none; }
.modal--light .modal__dialog,
.modal--light .modal__backdrop { pointer-events: auto; }
.modal--light .modal__backdrop { background: rgb(0 20 46 / .25); }