/* 사이트 공용 반응 (2026-10-16, 사이트 완성도 7가지 기준): 알림 · 처리 중 단추 · 칸별 오류 ·
   창이 열리고 닫히는 움직임 · 폰에서는 아래에서 올라오는 판 · 스크롤하면 나타나기.
   React 도구(Sonner · Skeleton · Vaul · Motion …)를 들이지 않고 같은 동작을 이 파일과 ui.js 로. */

/* 알림: 저장 · 전송 · 복사 결과를 화면 아래에 잠깐 */
.toasts { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; gap: 8px; z-index: 1000; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { background: #1d1d1f; color: #fff; border-radius: 14px; padding: 14px 18px; font-size: 16px; line-height: 1.5;
  box-shadow: 0 12px 32px rgba(14, 16, 45, .25); opacity: 0; transform: translateY(12px);
  transition: opacity .2s ease-out, transform .2s ease-out; text-wrap: pretty; word-break: keep-all; }
.toast.in { opacity: 1; transform: none; }
.toast.ok::before { content: "✓"; color: #7ee2a0; font-weight: 800; margin-right: 8px; }
.toast.bad { background: #b42318; }

/* 칸별 오류: 틀린 칸만 빨간 테두리와 그 칸 아래 한 줄 */
[aria-invalid="true"] { border-color: #b42318 !important; }
.field-error { color: #b42318; font-size: 14px; margin-top: 6px; line-height: 1.5; }
.agree + .field-error { margin-top: -10px; padding-left: 30px; }

/* 처리 중: 단추 안에 도는 표시 */
button.busy { cursor: progress; }
button.busy::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 창: 열릴 때 살짝 떠오르고, 닫힐 때 가라앉는다 */
dialog[open] { animation: ui-pop .2s ease-out; }
dialog[open]::backdrop { animation: ui-fade .2s ease-out; }
dialog.closing { animation: ui-sink .16s ease-in forwards; }
dialog.closing::backdrop { animation: ui-fade-out .16s ease-in forwards; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ui-sink { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-fade-out { to { opacity: 0; } }

/* 폰: 창 대신 아래에서 올라오는 판, 손잡이를 끌어내리면 닫힌다 */
@media (max-width: 600px) {
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom)); touch-action: pan-x; }
  dialog.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px;
    background: #d1d1d6; margin: 10px auto 0; }
  dialog.sheet[open] { animation: ui-up .26s cubic-bezier(.2, .8, .2, 1); }
  dialog.sheet.closing { animation: ui-down .2s ease-in forwards; }
  dialog.sheet.dragging { animation: none; transition: none; }
}
@keyframes ui-up { from { transform: translateY(100%); } }
@keyframes ui-down { to { transform: translateY(100%); } }

/* 스크롤하면 나타나기 (ui.js 가 붙인다 — 스크립트가 없으면 처음부터 보임) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease-out, transform .55s ease-out; }
.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}