/* ACUAR 공통 컴포넌트 · B안(AR 렌즈)
   ─────────────────────────────────────────────
   버튼 · 입력 · 카드 · 모달의 모양과 상태(hover · focus · active · disabled · error)를 한 곳에서 정한다.
   색·모서리는 tokens.css 의 --ui-* 토큰만 쓴다. 각 페이지 <style>에는 자리·크기 같은 배치만 남긴다.
   라이트는 :root, 다크는 [data-theme="dark"]. AR 화면은 html에 data-theme="dark"를 고정해 같은 컴포넌트를 쓴다.

   버튼   .btn + .btn-primary | .btn-secondary | .btn-ghost,  크기 .btn-lg · .btn-block · .btn-icon
   입력   .field (감싸는 판) 안에 input/textarea,  오류 .field.is-error 또는 [aria-invalid="true"] + .field-msg.is-error
   카드   .card-ui (정적),  누를 수 있으면 a/button.card-ui
   모달   .modal-backdrop > .modal-panel (+ .modal-title, .modal-actions)
   상태 규칙: hover는 마우스가 있는 기기에서만, 누름은 살짝 줄어듦(.97~.985), focus는 2px 테두리 고리,
   disabled는 흐리게(.45) + 누름 없음, error는 --ui-no 2px 테두리와 아래 문구. */

/* ── 포커스: 키보드로 이동할 때만 보이는 고리 ── */
:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.btn:focus-visible, .card-ui:focus-visible, .field:focus-within { outline: none; }

/* ═══ 버튼 ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: none; border-radius: var(--ui-r-control);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .1s ease, opacity .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-focus); }

.btn-primary { background: var(--ui-accent); color: var(--ui-on-accent); }
.btn-secondary { background: var(--ui-panel); color: var(--ui-ink); box-shadow: inset 0 0 0 1px var(--ui-line); }
.btn-secondary:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-line), 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-focus); }
.btn-ghost { background: none; color: var(--ui-sub); min-height: 44px; padding: 0 12px; }

.btn-lg { min-height: 56px; font-size: 16.5px; font-weight: 800; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; min-height: 44px; height: 44px; padding: 0; flex: none; }   /* 누르는 영역 44px */
.btn-icon svg { width: 22px; height: 22px; }
.btn-icon.is-accent { color: var(--ui-accent-text); }

@media (hover: hover) {
  .btn-primary:hover { background: var(--ui-accent-hover); }
  .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--ui-line-strong); }
  .btn-ghost:hover { color: var(--ui-ink); }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
/* 라임 버튼은 흐리게 하면 다크에서 탁한 올리브가 되므로, 꺼진 회색 판으로 바꾼다 */
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { opacity: 1; background: var(--ui-panel-2); color: var(--ui-sub); box-shadow: inset 0 0 0 1px var(--ui-line); }
@media (hover: hover) {
  .btn-primary:disabled:hover, .btn-primary[aria-disabled="true"]:hover { background: var(--ui-panel-2); }
  .btn-secondary:disabled:hover, .btn-secondary[aria-disabled="true"]:hover { box-shadow: inset 0 0 0 1px var(--ui-line); }
}

/* ═══ 입력 ═══ */
.field {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 14px;
  background: var(--ui-panel); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ui-line);
  transition: box-shadow .15s ease;
}
.field.is-multiline { align-items: stretch; padding: 10px 12px; }
.field input, .field textarea {
  flex: 1; min-width: 0; width: 100%; border: none; background: none; outline: none; resize: vertical;
  font: inherit; font-size: 16px; color: var(--ui-ink); letter-spacing: -.2px;
}
.field textarea { min-height: 88px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ui-sub); }
@media (hover: hover) { .field:hover { box-shadow: inset 0 0 0 1px var(--ui-line-strong); } }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--ui-focus); }
.field.is-error, .field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--ui-no); }
.field.is-disabled, .field:has(:disabled) { opacity: .5; }
.field-label { display: block; font-size: 13px; font-weight: 700; color: var(--ui-ink); margin-bottom: 6px; }
.field-msg { font-size: 12.5px; line-height: 1.5; color: var(--ui-sub); margin-top: 6px; }
.field-msg.is-error { color: var(--ui-no); font-weight: 600; }

/* ═══ 카드 ═══ */
.card-ui { background: var(--ui-panel); border-radius: var(--ui-r-panel); box-shadow: inset 0 0 0 1px var(--ui-line); color: inherit; }
/* :where()로 우선순위를 낮춰, 각 화면의 배치(display:flex 등)가 이기게 한다 */
:where(a.card-ui, button.card-ui) { display: block; text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
:where(button.card-ui) { width: 100%; text-align: left; border: none; font: inherit; }
@media (hover: hover) { a.card-ui:hover, button.card-ui:hover { box-shadow: inset 0 0 0 1px var(--ui-line-strong); } }
a.card-ui:active, button.card-ui:active { transform: scale(.985); }
a.card-ui:focus-visible, button.card-ui:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-focus); }
button.card-ui:disabled { cursor: default; transform: none; }

/* ═══ 모달 ═══ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; padding: 24px;
  display: flex; align-items: center; justify-content: center; background: var(--ui-scrim);
}
.modal-backdrop[hidden], .modal-backdrop.hidden { display: none; }
.modal-panel {
  width: min(400px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 22px 20px 20px; border-radius: 18px; color: var(--ui-ink);
  background: var(--ui-panel); box-shadow: inset 0 0 0 1px var(--ui-line), 0 24px 60px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 12px;
}
.modal-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.modal-title svg { width: 20px; height: 20px; color: var(--ui-warn); flex: none; }
.modal-text { font-size: 14px; line-height: 1.6; color: var(--ui-sub); margin: 0; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.modal-actions .btn { flex: 1; }

/* 화면에는 안 보이고 화면 낭독기만 읽는 글(화면 제목 등) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn, .card-ui, .field { transition: none; }
  .btn:active, a.card-ui:active, button.card-ui:active { transform: none; }
}