/* =====================================================================
   ui-polish.css — 공용 컴포넌트 질감 고급화 (B안: 전역 보수적 폴리시)
   팔레트·레이아웃·카드는 그대로 두고, 버튼/포커스 인터랙션만 한 단계 끌어올린다.
   기존 디자인 토큰만 사용. index.html에서 가장 마지막에 로드한다.
   ===================================================================== */

/* ── Primary 버튼: 평면 단색 → 은은한 세로 그라데이션 + 상단 하이라이트 + 떠 있는 그림자 ──
   (홈 컨셉의 바이올렛 액센트를 그대로 쓰되 더 입체적으로) */
.button.primary,
.static-button.primary,
#story-builder-static .static-button.primary {
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent)) !important;
  box-shadow: 0 6px 18px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.button.primary:hover,
.static-button.primary:hover,
#story-builder-static .static-button.primary:hover {
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent-press)) !important;
  box-shadow: 0 10px 26px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.button.primary:active,
.static-button.primary:active { transform: translateY(1px) scale(.99); }

/* 전환을 부드럽게(그라데이션·그림자·눌림 모두) */
.button, .static-button {
  transition: background-color .15s ease, background-image .15s ease,
              box-shadow .18s ease, transform .08s ease, color .15s ease;
}

/* ── 일반(보조) 버튼: 누를 때 살짝 눌리는 촉감 (이미 scale을 가진 icon/round 류는 제외) ── */
.button:not(.primary):active { transform: translateY(1px); }

/* ── 키보드 포커스 링 통일 (접근성 + 마감) — 마우스 클릭에는 안 뜨고 키보드 탐색에만 ── */
.button:focus-visible,
.static-button:focus-visible,
.icon-button:focus-visible,
.round-button:focus-visible,
.sidenav-item:focus-visible,
.mtab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── 입력/콤보/텍스트영역: 포커스 외곽선을 토큰 링으로 통일(브라우저 기본 파란 테두리 제거) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}