/* AX 시황예측 웹 — 디자인 토큰 + 셸 + 전환 효과 (개발서 §5, P2)
   linear.app 기조: 다크 기본 / 우상단 토글로 라이트. 외부 리소스 0, CSS 전용 애니메이션. */

@view-transition { navigation: auto; }          /* 크로스 도큐먼트 전환 (Edge 126+) */

/* 워드마크 서체 — SK innovation 계열 모던 그로테스크(Manrope ExtraBold). 로컬 동봉(외부 요청 없음) */
@font-face {
  font-family: "AROMIS Wordmark";
  src: url("../vendor/wordmark.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* 관리앱(AXTheme) 팔레트 재현 — bg=black, card=white .10, border=white .18, accent=iOS blue */
  --bg: #000000;  --surface: #1a1a1a;  --elevated: #232325;  --hover: #2a2a2c;
  --border: #2e2e2e;  --border-strong: #3d3d40;
  --text: #ffffff;  --text-2: #9e9e9e;  --text-3: #6d6d70;
  --accent: #0a84ff;  --accent-hover: #339cff;  --accent-soft: rgba(10,132,255,.16);
  --mark: #2f5fe8;
  --good: #30d158;  --warn: #ff9f0a;  --bad: #ff453a;  --info: #64d2ff;
  --alert: #b82e2e;                      /* alertRed — 전쟁/경고 (면·배지 배경용) */
  /* --alert 를 어두운 배경 위 '글자색'으로 쓰면 대비가 2.9:1까지 떨어진다.
     텍스트에는 아래 --alert-tx 를 쓴다 (다크 6.2:1 · 라이트 6.5:1, WCAG AA). */
  --alert-tx: #ff6b60;
  --claude: #d9804d;                     /* claudeOrange — LLM 연결 */
  --l5: #9e59d1;  --l6: #339999;         /* l5Purple · l6Teal */
  --lv1: #2e2e2e; --lv2: #616161; --lv3: #29386b; --lv4: #1a2447;
  --radius: 8px;  --radius-lg: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,.6);
  --ease: cubic-bezier(.25,.1,.25,1);
  --bar-h: 52px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  /* ── 밝은 테마 "다크 앵커"(C안, 2026-07-29 사용자 채택) ──────────────────
     옛 값은 배경 #f1f1f3 과 카드 #ffffff 의 대비가 1.13, 테두리도 1.13 이라
     카드가 배경에서 떨어져 나오지 못했다("백지 같다"). 두 가지를 고쳤다:
       ① 판을 한 단계 눌러(#eff1f4) 카드/배경 1.13 · 테두리/배경 1.29 를 확보
       ② **상단바를 검게** 눌러 화면에 뼈대를 세운다 — 밝은 영역이 '빈 공간'이 아니라
          '내용'으로 읽히게 하는 것이 이 안의 핵심이고, 어두운 테마와 골격도 공유된다.
     본문 18.7 · 보조 7.4 · 약한 글씨 3.8 · 강조 6.7 (모두 흰 카드 위 기준). */
  --bg: #eff1f4;  --surface: #ffffff;  --elevated: #ffffff;  --hover: #e4e8ed;
  --border: #d2d6dd;  --border-strong: #b9bfc9;
  --text: #101216;  --text-2: #51565e;  --text-3: #7d838c;
  --accent: #0b5cad;  --accent-hover: #094a8c;  --accent-soft: rgba(11,92,173,.10);
  --mark: #0b5cad;
  --good: #1c6b3a;  --warn: #9a6206;  --bad: #a8302a;  --info: #1d6fb8;
  --alert: #a8302a;  --alert-tx: #96271f;  --claude: #a85a2c;  --l5: #6a2f9c;  --l6: #1d6b6b;
  /* --lv1 은 흰 글자를 얹는 레벨 박스 배경 — 흰 글자 대비 4.5:1 이상을 지킨다 */
  --lv1: #656b74; --lv2: #51565e; --lv3: #35447a; --lv4: #232d58;
  --shadow: 0 1px 2px rgba(16,22,28,.07), 0 4px 14px rgba(16,22,28,.06);
  /* 상단바 전용(검은 앵커) — 바 안의 글자·아이콘은 이 값을 쓴다 */
  --bar-bg: #16181c;  --bar-fg: #f2f3f5;  --bar-fg2: #a6acb5;  --bar-bd: #16181c;
  color-scheme: light;
}
/* 어두운 테마에서는 바가 본문과 같은 세계에 있으므로 본문 토큰을 그대로 쓴다 */
:root { --bar-bg: color-mix(in srgb, var(--bg) 82%, transparent); --bar-fg: var(--text);
        --bar-fg2: var(--text-2); --bar-bd: var(--border); }

* { box-sizing: border-box; }

/* 스크롤·배경 (iPad Safari 실측 버그 두 건을 고친 결과 — 손대기 전에 아래를 읽어라)
   ────────────────────────────────────────────────────────────────
   증상 ① 페이지 끝에서 더 내리면 흰 여백이 끝없이 딸려 나온다.
   증상 ② 그때 고정돼 있어야 할 상단바가 같이 밀려 올라간다.

   원인은 하나였다. `html, body { height: 100% }` 로 body 박스를 뷰포트 높이에 묶어 놓고
   그 위에 그라디언트를 `background-attachment: fixed` 로 깔았다. iOS Safari 는 fixed
   배경을 제대로 그리지 않아 body 박스 바깥(=본문이 넘친 구간과 고무줄 구간)이 흰 캔버스로
   드러난다. 그리고 고무줄 스크롤이 일어나면 시각 뷰포트 자체가 움직이므로 position:fixed
   요소도 함께 밀린다 — 바가 "가끔" 안 붙어 보이던 것이 이것이다.

   고친 방법
     · 배경 색은 **html** 에 준다 → 캔버스로 전파되어 고무줄 구간까지 덮는다.
     · 그라디언트는 body 에 두되 **min-height:100%** 로 문서 전체 높이만큼 자라게 하고
       `no-repeat` 을 명시한다(안 하면 뷰포트마다 그라디언트가 반복돼 띠가 생긴다).
     · `background-attachment: fixed` 를 걷어낸다(iOS 에서 신뢰할 수 없다).
     · `overscroll-behavior: none` 으로 고무줄 자체를 끈다 → 바가 밀리지 않는다. */
html {
  height: 100%;
  background: var(--bg);
  overscroll-behavior: none;
}
body {
  min-height: 100%; margin: 0; color: var(--text);
  background: var(--bg) none no-repeat;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
:root[data-theme="light"] { --subbar-bg: #ffffff; --bar-mark: #4a9eff; }
:root[data-theme="light"] body {
  background: linear-gradient(180deg, #f3f5f7 0%, #eff1f4 40%, #eaedf1 100%) no-repeat;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; }

/* ── 상단 글로벌 바 ───────────────────────────────────────────── */
body.ax-shell { padding-top: var(--bar-h); }                 /* 고정 바 높이만큼 본문 밀기 */
body.ax-shell.has-subbar { padding-top: calc(var(--bar-h) + 40px); }
.ax-bar {
  view-transition-name: ax-bar;            /* 바는 고정, 본문만 교체 */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; gap: 4px; padding: 0 16px;
  background: var(--bar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bar-bd);
}
/* 브랜드 — AROMIS(약어 강조) + 우측에 작은 회색 full name */
.ax-brand { display: flex; align-items: center; gap: 9px; margin-right: 28px; }
.ax-mark { width: 22px; height: 22px; flex: none; color: var(--mark); }
.ax-word {
  font-family: "AROMIS Wordmark", "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -.012em; color: var(--bar-fg);
}
.ax-full {
  font-size: 11px; color: var(--bar-fg2); letter-spacing: 0; white-space: nowrap;
  padding-left: 9px; margin-left: 1px;
  border-left: 1px solid color-mix(in srgb, var(--bar-fg2) 34%, transparent);
}
@media (max-width: 1180px) { .ax-full { display: none; } }
.ax-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ax-nav > * { position: relative; }
.ax-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 15px;
  border-radius: 999px;                     /* 양측 원형 캡슐 (linear 선택 표시) */
  border: 0; background: transparent; color: var(--bar-fg2);
  font-size: 13.5px; font-weight: 450; cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
/* 바가 어두우므로 두 테마 모두 흰색 알파를 쓴다(라이트에서 검은 알파를 쓰면 안 보인다) */
.ax-link:hover { background: rgba(255,255,255,.07); color: var(--bar-fg); }
.ax-link.active,
.ax-link[aria-expanded="true"] { color: var(--bar-fg); background: rgba(255,255,255,.12); }

.ax-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 194px; padding: 5px;
  background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: none;
  transform-origin: top left; animation: menu-in .15s var(--ease);
}
.ax-menu.open { display: block; }

/* 메가 메뉴 — 테두리 실선과 안쪽 패널 사이는 투명(배경이 비친다, linear.app) */
.ax-mega {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(660px, calc(100vw - 24px)); padding: 11px;
  display: none;
  background: transparent;                        /* 바깥은 테두리만 */
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px;
  animation: mega-in .16s var(--ease);
}
:root[data-theme="light"] .ax-mega { border-color: rgba(0,0,0,.10); }
.ax-mega.open { display: block; }
.ax-mega .inner {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(244px, 1fr));
  padding: 10px 4px; border-radius: 13px;
  background: #131314;                            /* 안쪽 패널만 채움 */
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
:root[data-theme="light"] .ax-mega .inner { background: #fbfbfc; box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.ax-mega .inner.split::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%;
  width: 1px; background: rgba(255,255,255,.08);
}
:root[data-theme="light"] .ax-mega .inner.split::before { background: rgba(0,0,0,.08); }
.ax-mega a {
  display: block; padding: 12px 18px; border-radius: 10px;
  transition: background .13s var(--ease);
}
.ax-mega a:hover { background: rgba(255,255,255,.05); }
:root[data-theme="light"] .ax-mega a:hover { background: rgba(0,0,0,.04); }
.ax-mega .t { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.ax-mega .d { display: block; margin-top: 4px; font-size: 13px; color: #8a8a8e; line-height: 1.4; }
.ax-mega a.soon .t { color: var(--text-3); }
.ax-mega a.soon .t::after {
  content: "준비 중"; margin-left: 7px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600; color: var(--text-3); background: rgba(255,255,255,.07);
}
.ax-mega a.active .t { color: var(--accent); }
.ax-subtab.soon { color: var(--text-3); cursor: default; }
.ax-subtab.soon::after {
  content: "준비 중"; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600; background: rgba(255,255,255,.07);
}
:root[data-theme="light"] .ax-subtab.soon::after { background: rgba(0,0,0,.06); }
/* 라이트에서 --text-3(#8a8f98)은 페이지 배경(#f1f1f3) 위 2.88:1이라 서브탭 라벨이 묻힌다.
   '준비 중' 항목만 조금 더 진한 회색으로 (4.06:1). */
:root[data-theme="light"] .ax-subtab.soon { color: #70767f; }
@keyframes mega-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.985); } }
.ax-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 9px; border-radius: 6px; font-size: 13px; color: var(--text-2);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.ax-menu a:hover { background: var(--hover); color: var(--text); }
.ax-menu a.active { color: var(--text); }
.ax-menu a.active::after { content: "●"; font-size: 7px; color: var(--accent); }
.ax-menu a.soon { color: var(--text-3); }
.ax-menu a.soon::after { content: "준비 중"; font-size: 10px; color: var(--text-3); }
.ax-menu .sep { height: 1px; margin: 5px 3px; background: var(--border); }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-3px); } }

.ax-right { display: flex; align-items: center; gap: 6px; margin-left: 18px; padding-left: 16px;
            border-left: 1px solid var(--border); }
.ax-icon-btn {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ax-icon-btn:hover { background: var(--hover); color: var(--text); }
.ax-user {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 5px;
  border-radius: 6px; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--text-2); transition: background .15s var(--ease);
}
.ax-user:hover { background: var(--hover); color: var(--text); }
.ax-avatar {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #ffffff; color: #101115; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--border-strong);
}
/* 바 **안쪽**의 아이콘·사용자 버튼만 바 색을 따른다. 같은 클래스가 본문에도 쓰이므로
   (페이지 우상단 새로고침·복사 버튼) 반드시 .ax-bar 하위로 한정한다. */
/* 로고 마크는 --mark(진한 파랑)라 검은 바 위에서 대비 2.66 으로 묻힌다 → 바 안에서만 밝게 */
.ax-bar .ax-mark { color: var(--bar-mark, var(--mark)); }
.ax-bar .ax-icon-btn, .ax-bar .ax-user { color: var(--bar-fg2); }
.ax-bar .ax-icon-btn:hover, .ax-bar .ax-user:hover {
  background: rgba(255,255,255,.10); color: var(--bar-fg);
}
.ax-bar .ax-avatar { border-color: rgba(255,255,255,.28); }

.ax-menu.right { left: auto; right: 0; transform-origin: top right; }
.ax-menu .who { padding: 8px 9px 9px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.ax-menu .who b { display: block; font-size: 13px; color: var(--text); }
.ax-menu .who span { font-size: 11px; color: var(--text-3); }

/* ── 서브탭 (그룹 하위 페이지) ───────────────────────────────── */
.ax-subbar {
  display: flex; gap: 2px; padding: 0 20px; height: 40px; align-items: center;
  border-bottom: 1px solid var(--border); background: var(--subbar-bg, var(--bg));
  position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 55;
}
.ax-subtab {
  position: relative; height: 39px; display: inline-flex; align-items: center; padding: 0 11px;
  font-size: 13px; color: var(--text-2); transition: color .15s var(--ease);
}
.ax-subtab:hover { color: var(--text); }
.ax-subtab.active { color: var(--text); }
.ax-subtab::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transition: transform .2s var(--ease);
}
.ax-subtab.active::after { transform: scaleX(1); }

/* ── 본문 레이아웃 ───────────────────────────────────────────── */
.ax-main { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; }
.ax-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.ax-head h1 { font-size: 21px; }
.ax-head .sub { font-size: 12px; color: var(--text-3); padding-bottom: 2px; }
.ax-head .spacer { flex: 1; }

/* 좁은 화면(≤430px, 아이폰 세로) — 제목줄이 접히게 해서 본문이 가로로 흐르지 않게 한다.
   넓은 표·차트는 각 화면에서 자기 컨테이너 안에 스크롤을 가둔다(본문 body는 넘치지 않는다). */
@media (max-width: 430px) {
  .ax-main { padding-left: 14px; padding-right: 14px; }
  .ax-head { flex-wrap: wrap; row-gap: 8px; }
  .ax-head .spacer { flex-basis: 100%; height: 0; }
}

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px;
}
.card > h2, .card > h3 { font-size: 14px; margin-bottom: 12px; }
.grid { display: grid; gap: 14px; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.btn {
  height: 32px; padding: 0 13px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--elevated); color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.input {
  width: 100%; height: 34px; padding: 0 11px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.input { height: auto; padding: 8px 11px; resize: vertical; }
label.fld { display: block; margin-bottom: 11px; }
label.fld > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent);
}
.chip.good { background: rgba(76,183,130,.14); color: var(--good); }
.chip.warn { background: rgba(242,201,76,.14); color: var(--warn); }
.chip.bad  { background: rgba(235,87,87,.14);  color: var(--bad); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 100; padding: 10px 16px; border-radius: 8px; font-size: 13px;
  background: var(--elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  animation: toast-in .2s var(--ease);
}
.toast.err { border-color: var(--bad); color: var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* 모달 */
.ax-backdrop {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px); animation: fade .15s var(--ease);
}
.ax-modal {
  width: min(440px, calc(100vw - 32px)); max-height: 86vh; overflow: auto; padding: 20px;
  background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); animation: modal-in .16s var(--ease);
}
/* 차트를 담는 팝업 — 기본 440px 로는 축과 선이 뭉개진다. 폭만 덮어쓴다(배경·테두리는 위 규칙 공유) */
.ax-modal.wide { width: min(1120px, calc(100vw - 40px)); max-height: 90vh; padding: 22px 24px; }
@keyframes fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(6px); } }

/* ── 랜딩 공지·알림 팝업 (28차) ───────────────────────────────
   항목은 중요도별 색으로 구분: info=accent, warn=warn, urgent=bad */
.ax-modal:has(.ax-nt-list) {
  width: min(520px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(142,142,147,.13), rgba(142,142,147,.05)), var(--bg);
  border: 1px solid rgba(142,142,147,.42); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -30px rgba(0,0,0,.85);
}
:root[data-theme="light"] .ax-modal:has(.ax-nt-list) {
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.35);
}
.ax-nt-head { display: flex; align-items: baseline; gap: 8px; }
.ax-nt-head h1 { font-size: 16px; }
.ax-nt-count {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.ax-nt-lead { font-size: 12.5px; color: var(--text-2); margin: 4px 0 14px; }
.ax-nt-list { display: flex; flex-direction: column; gap: 9px; max-height: 50vh; overflow: auto; }
.ax-nt-item {
  border: 1px solid rgba(255,255,255,.07); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 11px 12px;
  background: linear-gradient(180deg, rgba(142,142,147,.15), rgba(142,142,147,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="light"] .ax-nt-item {
  border-color: var(--border); background: var(--surface); box-shadow: none;
}
.ax-nt-item.lv-info   { border-left-color: var(--accent); }
.ax-nt-item.lv-warn   { border-left-color: var(--warn); }
.ax-nt-item.lv-urgent { border-left-color: var(--bad); }
.ax-nt-top { display: flex; align-items: center; gap: 8px; }
.ax-nt-kind {
  flex: none; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.lv-warn   .ax-nt-kind { background: rgba(255,159,10,.15); color: var(--warn); }
.lv-urgent .ax-nt-kind { background: rgba(255,69,58,.15);  color: var(--bad); }
.ax-nt-title { font-size: 13px; font-weight: 600; line-height: 1.45; }
.ax-nt-when { margin-left: auto; flex: none; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.ax-nt-body { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 6px; white-space: pre-wrap; }
.ax-nt-go {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--accent); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 4px 9px; transition: background .15s var(--ease);
}
.ax-nt-go:hover { background: var(--hover); }
.ax-nt-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ax-nt-mute { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.ax-nt-mute input { cursor: pointer; }
.ax-nt-foot .btn { margin-left: auto; }

/* ── 진입 애니메이션 · 스켈레톤 (개발서 §5.4-2) ──────────────── */
.fade-up { animation: fade-up .34s var(--ease) both; }
.stagger > * { animation: fade-up .34s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .00s; }
.stagger > *:nth-child(2) { animation-delay: .03s; }
.stagger > *:nth-child(3) { animation-delay: .06s; }
.stagger > *:nth-child(4) { animation-delay: .09s; }
.stagger > *:nth-child(5) { animation-delay: .12s; }
.stagger > *:nth-child(6) { animation-delay: .15s; }
.stagger > *:nth-child(7) { animation-delay: .18s; }
.stagger > *:nth-child(8) { animation-delay: .21s; }
.stagger > *:nth-child(n+9) { animation-delay: .24s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

.skel {
  border-radius: 6px; background: var(--hover); position: relative; overflow: hidden;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent);
  animation: shimmer 1.25s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel-line { height: 12px; margin: 9px 0; }
.skel-card { height: 108px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}