/* modal.css — 레이어 팝업(대화상자) 단일 구현 (UI-DESIGN-SYSTEM §4 모달).
   규격: 중앙 카드 radius 20 · 배경 blur(8px) dim · 모바일(≤734) 하단 시트(상단만 radius 20).
   브라우저 기본 alert/confirm/prompt 를 대체한다 — 그쪽은 테마·로케일·타이포를 못 따르고
   OS 마다 생김새가 달라 "우리 화면"이 아니다.
   base.css 예산(≤29220B)이 빠듯해 별도 파일로 둔다. 색은 tokens.css 변수만 쓴다. */

.lc-modal {
  position: fixed;
  inset: 0;
  z-index: 120;               /* 상단 나브(고정)보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: lc-modal-in .18s ease-out;
}

.lc-modal-card {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 26px 26px 20px;
  animation: lc-modal-rise .2s cubic-bezier(.22,.9,.3,1);
}

/* 제목은 선택 — 없으면 본문이 곧 레이블이다(aria-labelledby 가 본문을 가리킨다). */
.lc-modal-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
}

.lc-modal-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-line;      /* 서버 문구의 줄바꿈을 그대로 살린다 */
  overflow-wrap: anywhere;    /* 긴 토큰·URL 이 카드를 밀어내지 않도록 */
}

.lc-modal-field { margin: 18px 0 0; }

.lc-modal-field label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.lc-modal-field input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;            /* iOS 확대 방지 하한 */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 12px 14px;
}

.lc-modal-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* 버튼 줄 — 확인이 오른쪽(플랫폼 관용), 취소는 조용하게. */
.lc-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

.lc-modal-actions .btn { min-width: 88px; justify-content: center; }

/* 되돌릴 수 없는 동작은 확인 버튼이 위험색을 입는다(무심코 누르는 것을 늦춘다). */
.lc-modal-card.danger .lc-modal-actions .btn.lc-modal-ok {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
}

@keyframes lc-modal-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes lc-modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(.97) }
  to   { opacity: 1; transform: none }
}

/* 모바일 — 하단 시트. 엄지가 닿는 곳에 버튼이 오고, 상단만 둥글다(UI §4). */
@media (max-width: 734px) {
  .lc-modal { align-items: flex-end; padding: 0; }
  .lc-modal-card {
    max-width: none;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    animation: lc-modal-sheet .22s cubic-bezier(.22,.9,.3,1);
  }
  .lc-modal-actions .btn { flex: 1; }
}

@keyframes lc-modal-sheet {
  from { transform: translateY(100%) }
  to   { transform: none }
}

/* 움직임을 줄여 달라고 한 사용자에게는 페이드만 남긴다(멀미·주의 분산 배려). */
@media (prefers-reduced-motion: reduce) {
  .lc-modal,
  .lc-modal-card { animation: none; }
}