/* 모달 — 네이티브 <dialog> 기반.
   showModal()이 포커스 트랩·Escape·top layer·::backdrop을 맡고, main.js initModals는 열기/닫기·Lenis 정지·
   포커스 복귀만 담당한다. 닫힌 상태는 UA 기본(display: none)이라 CSS가 초기 상태를 숨기지 않는다.
   마크업: <dialog class="c-modal" id="…" aria-labelledby="…"> <button data-modal-close/> <div class="c-modal__dialog">…</div> </dialog>
   트리거: [data-modal-open="<id>"] — <a href="#…">에 붙이면 JS 부재·<dialog> 미지원 시 href로 그대로 동작한다. */
.c-modal {
  margin: auto;
  padding: 0;
  border: 0;
  width: min(600px, calc(100vw - 2 * var(--space-6)));
  max-height: calc(100dvh - 2 * var(--space-6));
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(30, 41, 59, 0.22);
  overflow: hidden;
}

.c-modal::backdrop {
  background: rgba(34, 34, 34, 0.55);
  backdrop-filter: blur(3px);
}

/* 열림/닫힘 전환 — display·overlay의 allow-discrete로 닫힐 때도 페이드가 끝난 뒤 사라진다 */
.c-modal,
.c-modal::backdrop {
  opacity: 0;
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

.c-modal {
  transform: translateY(14px) scale(0.98);
}

.c-modal[open],
.c-modal[open]::backdrop {
  opacity: 1;
}

.c-modal[open] {
  transform: none;
}

@starting-style {
  .c-modal[open],
  .c-modal[open]::backdrop {
    opacity: 0;
  }

  .c-modal[open] {
    transform: translateY(14px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-modal,
  .c-modal::backdrop {
    transition: none;
  }
}

/* 스크롤 영역은 안쪽 컨테이너 — 닫기 버튼이 함께 스크롤되지 않도록 dialog 자체는 overflow: hidden */
.c-modal__dialog {
  max-height: calc(100dvh - 2 * var(--space-6));
  overflow-y: auto;
  padding: var(--space-8);
}

.c-modal__close {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.c-modal__close:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.c-modal__title {
  margin: 0 0 var(--space-3);
  padding-inline-end: var(--space-12);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 열릴 때 제목으로 포커스를 옮긴다(autofocus + tabindex=-1) — 프로그램적 포커스라 링은 그리지 않음 */
.c-modal__title:focus {
  outline: none;
}

.c-modal__lede {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

.c-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* 팝업이 열린 동안 뒤 문서 스크롤 잠금 — Lenis 활성 시엔 lenis.stop()이 .lenis-stopped로 같은 일을 하고,
   축소 모션·Lenis 미로드 경로는 이 클래스가 담당한다(main.js initModals가 토글). */
html.has-modal {
  overflow: hidden;
}

/* 모바일: 하단 시트 */
@media (max-width: 599px) {
  .c-modal {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(28px);
  }

  .c-modal[open] {
    transform: none;
  }

  @starting-style {
    .c-modal[open] {
      transform: translateY(28px);
    }
  }

  .c-modal__dialog {
    max-height: 92dvh;
    padding: var(--space-6);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}