/* AIDRA 버튼 시스템 — 형태·variant·사이즈. 마이크로 인터랙션은 buttonMotion.css.
 * 생성은 ui/button.js 하나만 — 여기 클래스를 손으로 붙이지 않는다.
 *
 * 출처: Amicro(MIT, https://amicro.vercel.app) 의 버튼 언어를 vanilla CSS 로 포팅.
 *   원본 값 그대로: 알약형 · 높이 36px · padding-x 24px · 아이콘 16px · 간격 10px
 *                  라벨 13px/500/tracking-tight · rest .04 → hover .06 → active .09
 *                  hover scale(1.02) · active scale(0.96)
 *   의도적 차이 1: 원본은 hover 시 padding 24→28px 을 애니메이션한다. 쇼케이스에선 좋지만
 *     여기선 툴바에 버튼이 8개씩 늘어서므로 이웃이 밀려 흔들린다. 같은 "커지는" 느낌을
 *     레이아웃을 건드리지 않는 scale(1.02) 로 낸다.
 *   의도적 차이 2: 원본의 spring(stiffness 600/damping 25)은 cubic-bezier 근사로 대체
 *     (--btn-spring). framer-motion 없이 같은 오버슈트 느낌을 낸다.
 *
 * ⚠️ index.html 에서 glass.css 보다 뒤에 로드해야 한다 — glass.css 의 button:active 와
 *    특이도가 같아(0,1,1) 순서로만 이긴다. 앞에 두면 magnetic 변환이 먹히지 않는다.
 */

:root {
  --btn-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* 오버슈트 — spring 600/25 근사 */
}

/* nova 링의 회전 각도. @property 로 등록해야 각도로 **보간**된다 — 등록하지 않은 커스텀 속성은
 * 애니메이션에서 중간값이 없어 50% 지점에 툭 튄다(회전이 아니라 점프가 된다).
 * 미지원 브라우저(Safari<16.4)에서는 링이 정지한 그라데이션으로 남는다 — 형태는 그대로다. */
@property --nova-rot {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── 기본 형태 ── */
.btn {
  /* glass.css 의 button{} 리셋(사각·헤어라인·8px 15px)을 전부 덮는다 */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  gap: var(--btn-gap);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: 500;
  letter-spacing: -0.01em; /* tracking-tight */
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--btn-spring);
}

/* ── 사이즈 (md = Amicro 원본 값) ── */
.btn--sm { --btn-h: 28px; --btn-px: 12px; --btn-fs: var(--fs-fine); --btn-gap: 6px; }
.btn--md { --btn-h: 36px; --btn-px: 24px; --btn-fs: 13px; --btn-gap: 10px; min-width: 75px; }
.btn--lg { --btn-h: 44px; --btn-px: 28px; --btn-fs: var(--fs-caption); --btn-gap: 10px; min-width: 96px; }

.btn--icon-only {
  padding: 0;
  width: var(--btn-h);
  min-width: var(--btn-h);
  gap: 0;
}
.btn--block { width: 100%; }

.btn__icons {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1em;
  height: 1em;
  font-size: var(--btn-fs);
}
/* 아이콘 슬롯은 라벨 폰트가 아니라 아이콘 크기를 따라야 한다 — svg 실제 크기로 맞춘다. */
.btn--sm .btn__icons { width: 14px; height: 14px; }
.btn--md .btn__icons { width: 16px; height: 16px; }
.btn--lg .btn__icons { width: 18px; height: 18px; }

.btn__ico {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* B(상태 on·확인용) 겹은 기본으로 숨는다 — 교차 규칙은 buttonMotion.css */
.btn__ico--b { opacity: 0; transform: scale(0.5); }

.btn__label { display: inline-block; }

/* ── variant ── */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600; /* 주 CTA 가 본문보다 얇던 기존 .primary-btn(400)의 교정 */
}
.btn--secondary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  /* 🔴 **hover 배경이 1px 테두리 곡선을 덮어 "보더가 깨져" 보였다**(오너 신고 2026-08-29 · 브라우저 실측).
   * 기전: 배경은 기본값이 `border-box` 라 **테두리 아래까지** 칠해진다. 평소에는 배경이 투명이라 안 보이는데,
   *   hover 에서 `--accent-soft` 가 깔리면 그 칠이 둥근 캡의 안티에일리어싱과 겹쳐 **1px 선이 끊긴 것처럼**
   *   보인다. 특히 정수가 아닌 화면 배율(실측 2560/1512 ≈ 1.69)에서 테두리가 반 픽셀에 걸려 두드러진다.
   * ★ 확인 방법도 함께 적는다: hover 전 캡은 **깨끗한 곡선**이고 hover 에서만 계단이 생긴다 — 즉 테두리·반경이
   *   아니라 **칠하는 범위**의 문제다. 실제로 이 한 줄을 라이브 페이지에 넣자 계단이 사라졌다.
   * ⚠️ **기본 `.btn` 에는 걸지 않는다.** 그쪽은 테두리가 `transparent` 라 padding-box 로 자르면 배경이 1px
   *    안쪽으로 물러나 **투명한 테두리 띠**가 생긴다(고치려던 것과 다른 곳이 바뀐다).
   * ⚠️ 다른 변종(`--chip`·`--danger`)도 같은 구조지만 **재보지 않았다** — 같은 증상이 보고되면 그때 옮긴다. */
  background-clip: padding-box;
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-48);
}
.btn--chip {
  background: var(--surface-1);
  border-color: var(--hairline);
  color: var(--ink-80);
}
.btn--chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--danger {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
}

/* ── nova: 회전 그라데이션 링 + 글로우 ──
 * 출처: Framer NovaGlowButton(오너 지정 2026-07-30) 을 vanilla CSS 로 포팅.
 *   원본 값 그대로: conic-gradient 정지점(0/70/135/190 투명/260/360) · 1px 상단 하이라이트
 *                  idle→hover 2단 글로우 · hover translateY(-1px) · scale 1.02 · 220ms
 *   의도적 차이 1: 원본은 requestAnimationFrame 으로 각도를 굴린다 → @property + CSS 애니메이션.
 *     JS 0 이고, 백그라운드 탭에서 알아서 멈추며, prefers-reduced-motion 에서 정지한다.
 *   의도적 차이 2: 원본의 블러 처리된 conic 블룸 레이어는 컬러 box-shadow 로 대체했다.
 *     그 레이어는 pill 밖에 있어야 하는데, .btn:hover 의 scale(1.02) 가 버튼을 스택 컨텍스트로 만들면
 *     z-index:-1 자손이 배경 **위로** 올라와 알약 얼굴을 덮는다(hover 마다 색 덩어리가 앞을 가린다).
 *   의도적 차이 3: 액센트 3색 중 #111499 를 제품 액센트(--accent)로 갈았다 — 보라·시안만 남기면
 *     AIDRA 색 언어에서 떠 버린다.
 * ⚠️ ::before(링) 을 쓴다 → motion 'glare'(같은 ::before) 와 겹칠 수 없다. */
.btn--nova {
  --nova-1: #9c43fe;
  --nova-2: #4cc2e9;
  --nova-3: var(--accent);
  background: #0b0b14;                       /* 캔버스(#0f0f17)보다 어둡게 — 면에서 떠 있는 물체로 읽힌다 */
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(156, 67, 254, 0.16), 0 0 14px rgba(76, 194, 233, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    box-shadow 0.22s var(--ease), transform 0.22s var(--btn-spring);
}
/* 링 — 원본의 mask-composite xor 방식. inset 0 이라 버튼 자신의 1px 보더 위에 얹힌다. */
.btn--nova::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--nova-rot),
    var(--nova-3) 0deg, var(--nova-1) 70deg, var(--nova-2) 135deg,
    transparent 190deg, var(--nova-3) 260deg, var(--nova-1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.9;
  pointer-events: none;
}

/* ── hover (포인터 있는 기기에서만 — 모바일 sticky hover 방지) ── */
@media (hover: hover) {
  .btn:hover:not(:disabled) { background: var(--surface-2); }
  .btn--primary:hover:not(:disabled) { background: var(--accent-focus); border-color: var(--accent-focus); }
  .btn--secondary:hover:not(:disabled) { background: var(--accent-soft); }
  .btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
  .btn--chip:hover:not(:disabled) { border-color: var(--divider-soft); color: var(--ink); }
  .btn--chip.is-on:hover:not(:disabled) { background: var(--accent-focus); border-color: var(--accent-focus); }
  .btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger-ring); }
  /* nova 는 자기 배경을 지켜야 한다 — .btn:hover 의 --surface-2 가 얼굴을 회색으로 덮는다.
   * 특이도를 (0,4,0) 으로 올려 순서와 무관하게 이긴다. */
  .btn--nova:hover:not(:disabled) {
    background: #0d0d18;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 23px rgba(156, 67, 254, 0.32), 0 0 30px rgba(76, 194, 233, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

/* ── press / 상태 ── */
.btn:active:not(:disabled) { background: var(--surface-3); }
.btn--primary:active:not(:disabled) { background: var(--accent); }
.btn--nova:active:not(:disabled) { background: #0b0b14; }

.btn:disabled { opacity: 0.4; cursor: default; }

/* focus-visible 은 glass.css 의 button:focus-visible(2px accent 링)을 그대로 물려받는다. */

/* ── 변형 애니메이션은 모션 축소 설정에서 전부 끈다 ──
 * magnetic 은 --btn-mx/--btn-my(JS 가 채움)를 변환으로 쓴다. hover/active 에서도
 * translate 를 같이 쓰지 않으면 scale 이 단독으로 덮어서 끌림이 사라진다. */
@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(:disabled) { transform: scale(0.96); }
  /* 링 회전 — 원본 speed 5(=120deg/s) → 한 바퀴 3s. 정지 시에도 그라데이션 형태는 남는다. */
  .btn--nova::before { animation: btn-nova-spin 3s linear infinite; }
  .btn-m-magnetic { transform: translate(var(--btn-mx, 0), var(--btn-my, 0)); }
  .btn-m-magnetic:active:not(:disabled) {
    transform: translate(var(--btn-mx, 0), var(--btn-my, 0)) scale(0.96);
  }
}

@keyframes btn-nova-spin { to { --nova-rot: 360deg; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) { transform: scale(1.02); }
  /* 원본은 hover 에서 살짝 떠오른다(translateY -1px) — scale 과 한 transform 에 같이 실어야 덮이지 않는다. */
  .btn--nova:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); }
  .btn-m-magnetic:hover:not(:disabled) {
    transform: translate(var(--btn-mx, 0), var(--btn-my, 0)) scale(1.02);
  }
}