/* OX 카드 학습앱 — Raycast + Vercel + Superhuman 트리오 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono/index.css");

:root {
  /* Surface ladder — Raycast */
  --canvas: #07080a;
  --surface: #0d0d0d;
  --surface-elevated: #101111;
  --surface-card: #121212;

  /* Accent + soft pair — Raycast */
  --accent-o: #6EA0E0;
  --accent-o-soft: rgba(110, 160, 224, 0.15);
  --accent-x: #e84545;
  --accent-x-soft: rgba(232, 69, 69, 0.15);
  --accent-hold: #57c1ff;
  --accent-hold-soft: rgba(87, 193, 255, 0.15);
  --accent-trap: #ffc533;
  --accent-trap-soft: rgba(255, 197, 51, 0.15);

  /* Text — Raycast */
  --ink: #f4f4f6;
  --ink-body: #cdcdcd;
  --ink-mute: #9c9c9d;
  --ink-ash: #6a6b6c;

  /* Hairlines */
  --hairline: #242728;
  --hairline-soft: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* Keycap gradient */
  --key-bg-start: #1a1a1a;
  --key-bg-end: #0d0d0d;

  /* Fonts */
  --font-sans: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", monospace;

  /* Weight axis — Superhuman 영감, Pretendard Variable 사용 */
  --w-body: 450;
  --w-strong: 540;
  --w-display: 540;
  --w-hud: 600;

  /* Radius */
  --r-card: 16px;
  --r-pill: 9999px;
  --r-key: 4px;
  --r-button: 8px;

  /* Spacing */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-section: 64px;

  /* Card shadow-as-border — Vercel 기법 */
  --card-ring: rgba(255, 255, 255, 0.08) 0 0 0 1px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* UA stylesheet의 [hidden]{display:none}은 작성자 display:flex에 덮어씌워짐 — 강제 fix */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  touch-action: manipulation;
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

button { font-family: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent-hold); outline-offset: 2px; }

/* === Typography === */
.t-display {
  font-size: 28px;
  font-weight: var(--w-display);
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.t-display-lg {
  font-size: 40px;
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: -1px;
}
.t-body {
  font-size: 16px;
  font-weight: var(--w-body);
  line-height: 1.5;
}
.t-body-strong {
  font-size: 16px;
  font-weight: var(--w-strong);
  line-height: 1.5;
}
.t-caption {
  font-size: 13px;
  font-weight: var(--w-body);
  color: var(--ink-mute);
  line-height: 1.4;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.t-mono-strong {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  height: 48px;
  padding: 0 var(--s-xl);
  border: none;
  border-radius: var(--r-button);
  background: var(--ink);
  color: var(--canvas);
  font-size: 14px;
  font-weight: var(--w-hud);
  letter-spacing: 0.2px;
  transition: transform 80ms ease, background 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-secondary {
  background: var(--surface-elevated);
  color: var(--ink);
  box-shadow: var(--card-ring);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-body);
}

/* === Keycap (Raycast 시그니처) === */
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-key);
  background: linear-gradient(180deg, var(--key-bg-start), var(--key-bg-end));
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--hairline-soft),
    0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-body);
  line-height: 1;
}

/* 학습 화면 우상단 홈 아이콘 (ESC 키캡 대체, 단색 SVG) */
.hud-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: var(--r-button);
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background 160ms ease;
}
.hud-home-btn:hover { color: var(--ink); background: var(--hairline-soft); }
.hud-home-btn:active { transform: scale(0.94); }

/* === Pill === */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-elevated);
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pill-trap {
  background: var(--accent-trap-soft);
  color: var(--accent-trap);
}
.pill-low {
  background: var(--accent-hold-soft);
  color: var(--accent-hold);
}

/* === Card === */
.card {
  background: var(--surface-card);
  border-radius: var(--r-card);
  box-shadow: var(--card-ring);
  padding: var(--s-xl);
}

/* === Page roots === */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* PWA standalone: --real-height(JS에서 screen 기반 물리 화면 높이 주입) 사용.
   window.innerHeight는 study.html에서 safe-top 빼고 보고하는 iOS 버그 있음. */
@media (display-mode: standalone) {
  .page {
    position: fixed;
    inset: 0;
    height: var(--real-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }
  /* .study (0010, line~1068) height:100dvh로 위 .page height를 덮어씀.
     .page.study (0020) specificity로 다시 잡음 */
  .page.study {
    height: var(--real-height, 100dvh);
  }
  #home {
    padding-bottom: env(safe-area-inset-bottom, var(--s-sm));
  }
}

.container {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  padding: var(--s-lg);
}

/* === HOME === */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--s-md) + env(safe-area-inset-top)) var(--s-lg) env(safe-area-inset-bottom, var(--s-sm));
  position: relative; /* edge-nav 절대 위치 앵커 */
}
/* 최상단 상태바 — 브랜드 + 통계 + 프로필을 한 줄로 */
.home-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-brand {
  flex-shrink: 0;
  margin: 0;
  font-size: 16px;
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.home-brand b { font-weight: 700; }
.home-help-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 140ms ease, color 140ms ease, transform 80ms ease;
}
.home-help-btn:hover {
  border-color: var(--ink-mute);
  color: var(--ink-body);
}
.home-help-btn:active { transform: scale(0.92); }
.home-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-sm);
}
.home-stats {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  /* 칩 노출로 폭이 좁아질 때 우측을 하드컷 대신 부드럽게 페이드 */
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.home-stats > span { flex-shrink: 0; }
.home-stats strong {
  color: var(--ink);
  font-weight: 500;
}
/* === 필터 초기화 칩 — 상단 상태바 우측 (필터 1개 이상 시 등장) === */
.home-reset {
  display: none;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 25px;
  padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, transform 80ms ease;
}
.home-reset.is-revealed {
  display: inline-flex;
  animation: home-reset-in 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes home-reset-in {
  from { opacity: 0; transform: translateX(9px) scale(0.86); }
  to   { opacity: 1; transform: none; }
}
.home-reset svg { width: 11px; height: 11px; flex-shrink: 0; }
.home-reset:hover { border-color: var(--ink-mute); color: var(--ink-body); }
.home-reset:active { transform: scale(0.94); }
.home-cta {
  width: 100%;
  height: 59px;
  font-size: 16px;
}
.home-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* === FILTER === */
.home-filter {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

/* 엣지 레이아웃 — edge-nav는 .home에 absolute, filter-content가 전체 너비 사용 */
.filter-edge-layout { /* 래퍼만 */ }
.edge-nav {
  position: absolute;
  left: 0;          /* .home 패딩 영역 좌측 끝 = 화면 왼쪽 가장자리 */
  top: 0;           /* JS가 헤더 bottom + 20px로 조정 */
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ★ stretch 방지 → 각 라벨 독자 너비 */
  gap: 4px;
  pointer-events: auto;
}
/* 엣지 라벨: bar를 텍스트 오른쪽(끝)에 고정, 접힘·활성 모두 테두리 없음 */
.edge-nav .label,
.edge-nav .label.is-on {
  flex-direction: row-reverse; /* [텍스트][bar] — bar가 오른쪽 끝 */
  border-color: transparent;
  transition: transform 80ms ease; /* 색상 transition 제거로 잔상 방지 */
}
.edge-nav .label .label-bar {
  box-shadow: inset 1px 0 0 rgba(0,0,0,0.15);
}

/* 우측 유형 엣지 인덱스 — 20% 소형 */
.edge-nav-right {
  left: auto;
  right: 0;
  align-items: flex-end;
  gap: 3px; /* 라벨 간 gap도 축소 */
}
.edge-nav-right .label {
  height: 22px;        /* 28 * 0.8 ≈ 22 */
  border-radius: 2px;
}
.edge-nav-right .label .label-content {
  font-size: 10px;     /* 12.5 * 0.8 = 10 */
}
.edge-nav-right .label .label-bar { width: 8px; } /* 10 * 0.8 */
.edge-nav-right .label.is-on .label-bar { width: 4px; }
.edge-nav-right .label .label-count { font-size: 9px; }
/* 유형 라벨: 기본 = 접힘 */
.edge-nav .label-trap .label-content {
  max-width: 0;
  padding: 0;
  opacity: 0;
}
.edge-nav .label-trap:hover .label-bar { opacity: 0.55; }
/* 소주제 활성 시 유형 엣지 잠금: 시각적 약화 + 클릭 차단 */
.edge-nav-right.is-locked {
  pointer-events: none;
  opacity: 0.35;
  filter: grayscale(0.4);
}

/* === 소주제 엣지 라벨 (오답집중 아래, 좌측) === */
#sew-container { display: contents; }
.subtopic-edge-wrap {
  --c: 71 85 105;  /* slate-600 (더 어두운 슬레이트) */
  position: relative; /* 패널 absolute 앵커 */
  z-index: 60;        /* 우측 유형 엣지(z-index 20)·feedback(20)보다 확실히 위 */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-12px);
  transition:
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 200ms ease;
}
.subtopic-edge-wrap.sew-visible {
  opacity: 1;
  transform: translateX(0);
}
.subtopic-edge-wrap.is-open {
  box-shadow: 0 0 0 1px rgba(148,163,184,0.35), 0 6px 20px rgba(0,0,0,0.45);
}
.sew-btn {
  width: 14px;
  min-height: 48px;
  background: rgb(var(--c));
  opacity: 0.85;
  border: none;
  border-radius: 3px;          /* 다른 엣지 라벨과 같은 square 코너 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 0;
  transition: opacity 200ms ease, width 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.subtopic-edge-wrap.is-open .sew-btn {
  opacity: 1;
  width: 12px;
}
.sew-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #e6e8ea;
  letter-spacing: 1px;
  white-space: nowrap;
  pointer-events: none;
}
.sew-panel {
  /* 첫 과목 라벨 top ~ 카드 카운터 위까지 spanning */
  position: absolute;
  top: var(--sew-top, 0);
  height: var(--sew-height, auto);
  left: 18px; /* sew-btn width */
  --sew-w: min(86vw, 360px);
  width: var(--sew-w);
  max-width: 0; /* 접힘: width 0 */
  overflow: hidden;
  background: var(--surface-elevated);
  border-radius: 14px 18px 18px 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  transition:
    max-width 340ms cubic-bezier(0.32, 0.72, 0, 1),
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.subtopic-edge-wrap.is-open .sew-panel {
  max-width: var(--sew-w);
  padding: 14px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(16, 17, 17, 0.7); /* 70% 불투명 */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.subtopic-edge-wrap.is-open {
  box-shadow: none; /* 그림자는 panel에 위임 */
}
.sep-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(var(--c));
  margin: 4px 0 -2px;
}
.sep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sep-chip {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-body);
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.sep-chip:active { transform: scale(0.96); }
.sep-chip.is-on {
  background: rgba(var(--c), 0.15);
  border-color: rgba(var(--c), 0.5);
  color: rgb(var(--c));
}

.edge-spacer { height: 10px; }
.filter-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

/* home-bottom: 카운터 + 시작 버튼 — 화면 하단에 고정.
   하단 여백은 .home 의 env(safe-area-inset-bottom) 만으로 충분(추가 padding 시 죽은공간). */
.home-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin-top: auto;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-ash);
}
.filter-hint {
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--ink-ash);
  opacity: 0.7;
}
.label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.label-row.is-right { justify-content: flex-end; }
.filter-group-right .filter-label { justify-content: flex-end; gap: 6px; }

/* === 라벨: 책 인덱스 탭. 평상시 컬러 바만, 클릭 시 텍스트 펼침 === */
.label {
  --c: 230 230 235;
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--ink-mute);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 80ms ease;
}
.label-row.is-right .label { flex-direction: row-reverse; }

/* 컬러 바 = 평상시 보이는 인덱스 탭 색띠 */
.label-bar {
  flex-shrink: 0;
  width: 10px;
  background: rgb(var(--c));
  opacity: 0.55;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.15);
  transition: width 240ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease;
}
.label-row.is-right .label-bar {
  box-shadow: inset 1px 0 0 rgba(0,0,0,0.15);
}

/* 펼쳐지는 콘텐츠 */
.label-content {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width 280ms cubic-bezier(0.32, 0.72, 0, 1),
    padding 240ms ease,
    opacity 200ms ease;
}

.label:hover { border-color: var(--ink-ash); }
.label:hover .label-bar { opacity: 0.9; width: 12px; }
.label:active { transform: scale(0.97); }

/* === 적용(선택) 상태 = 펼쳐진 책 라벨 === */
.label.is-on {
  background: rgba(var(--c), 0.10);
  border-color: rgba(var(--c), 0.45);
  color: rgb(var(--c));
}
.label.is-on .label-bar { width: 5px; opacity: 1; }
.label.is-on .label-content {
  max-width: 240px;
  padding: 0 10px;
  opacity: 1;
}

/* === 유형 라벨: 색 구분이 없으므로 텍스트는 항상 노출, 컬러바만 미묘 === */
.label-trap { --c: 200 200 210; color: var(--ink-body); }
.label-trap .label-bar { width: 4px; opacity: 0.32; }
.label-trap .label-content {
  max-width: 240px;
  padding: 0 10px;
  opacity: 1;
}
.label-trap:hover .label-bar { width: 4px; opacity: 0.55; }
.label-trap.is-on {
  background: rgba(245, 245, 250, 0.07);
  border-color: rgba(245, 245, 250, 0.5);
  color: var(--ink);
}
.label-trap.is-on .label-bar { width: 5px; opacity: 1; background: rgba(245,245,250,0.95); }

/* === 오답 집중 엣지 인덱스 (#C5BCAD 글로우 — 접힘 여부 무관) === */
.label-wrong {
  --c: 197 188 173; /* #C5BCAD */
  animation: wrong-glow-pulse 2s ease-in-out infinite;
}
.label-wrong.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
}
@keyframes wrong-glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(197,188,173,0.25); }
  50%       { box-shadow: 0 0 22px rgba(197,188,173,0.55); }
}

/* === 북마크 필터 엣지 (오답 집중 아래, 밝은 붉은색) === */
.label-bookmark {
  --c: 232 69 69;   /* accent-x 계열 밝은 붉은색 */
  animation: bookmark-slide-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.label-bookmark.is-on {
  --c: 232 69 69;
  animation: none;
}
@keyframes bookmark-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === ILO 전용 필터 엣지 === */
.label-ilo {
  --c: 100 180 255; /* 파란 계열 */
}
.label-ilo.is-on {
  --c: 100 180 255;
}

.label-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: currentColor;
  opacity: 0.7;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* 섹션 등장 모션 */
#filter-group-traps,
#filter-group-subtopics {
  animation: trap-reveal 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes trap-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === 한 줄 접이식: 유형 필터 (사용 빈도 낮음) === */
.filter-collapsible-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  padding: 0 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-ash);
  -webkit-tap-highlight-color: transparent;
}
.filter-collapsible-head:hover { color: var(--ink-mute); }
.filter-collapsible-head .panel-arrow {
  font-size: 9px;
  color: var(--ink-ash);
  transition: transform 200ms ease;
}
.filter-collapsible.is-open .filter-collapsible-head .panel-arrow {
  transform: rotate(90deg);
}
.filter-collapsible-name { color: var(--ink-mute); }
.filter-collapsible-head .filter-hint { margin-left: auto; }
.filter-collapsible:not(.is-open) .label-row { display: none; }
.filter-collapsible.is-open .label-row {
  margin-top: 6px;
  animation: trap-reveal 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* === 소주제 트리거 버튼 === */
.subtopic-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  padding: 0 10px 0 12px;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, background 120ms ease;
}
.subtopic-trigger:hover { border-color: var(--ink-ash); }
.subtopic-trigger:active { transform: scale(0.98); }
.subtopic-trigger .st-label { color: var(--ink-ash); white-space: nowrap; }
.subtopic-trigger .st-hint { flex: 1; text-align: right; color: var(--ink-mute); }
.subtopic-trigger .st-chevron { color: var(--ink-ash); font-size: 14px; }

/* === 소주제 바텀 시트 === */
.subtopic-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.ss-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ss-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 72vh;
  background: var(--surface-elevated);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -1px 0 var(--hairline-soft), 0 -20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.subtopic-sheet.is-open .ss-panel { transform: translateY(0); }
.ss-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.ss-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.ss-close {
  background: none; border: none;
  color: var(--ink-mute); font-size: 18px;
  cursor: pointer; padding: 4px 6px; line-height: 1;
}
.ss-body {
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
}
.ss-group-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgb(var(--c));
  margin-bottom: 8px;
}
.ss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-body);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ss-chip:active { transform: scale(0.97); }
.ss-chip.is-on {
  background: rgba(var(--c), 0.14);
  border-color: rgba(var(--c), 0.45);
  color: rgb(var(--c));
}
.ss-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  color: currentColor;
}

/* === 소주제: 과목별 collapsible 패널 + 그 안에 작은 텍스트 라벨 === */
.subtopic-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subtopic-panel {
  --c: 230 230 235;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
}
.subtopic-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 12.5px;
  width: 100%;
  text-align: left;
}
.subtopic-panel-head::before {
  content: "";
  width: 5px;
  align-self: stretch;
  background: rgb(var(--c));
  opacity: 0.7;
  flex-shrink: 0;
}
.subtopic-panel-head .panel-arrow {
  font-size: 9px;
  color: var(--ink-ash);
  margin-left: 4px;
  transition: transform 200ms ease;
}
.subtopic-panel.is-open .subtopic-panel-head .panel-arrow {
  transform: rotate(90deg);
}
.subtopic-panel-head .panel-name {
  flex: 1;
  color: rgb(var(--c));
  font-weight: 500;
}
.subtopic-panel-head .panel-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-ash);
}
.subtopic-panel-head .panel-meta strong {
  color: rgb(var(--c));
  font-weight: 500;
}
.subtopic-panel-body {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 10px 10px;
}
.subtopic-panel.is-open .subtopic-panel-body { display: flex; }

/* 소주제 라벨: 작은 라벨 + 좌측 과목 컬러바 + 텍스트 항상 노출 */
.label-subtopic {
  --c: 230 230 235;
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--ink-body);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  overflow: hidden;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease;
}
.label-subtopic::before {
  content: "";
  width: 3px;
  background: rgb(var(--c));
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 160ms ease, width 160ms ease;
}
.label-subtopic .sub-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 11.5px;
  white-space: nowrap;
}
.label-subtopic .sub-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-ash);
  opacity: 0.75;
}
.label-subtopic:hover { border-color: var(--ink-ash); }
.label-subtopic:hover::before { opacity: 0.85; }
.label-subtopic:active { transform: scale(0.97); }
.label-subtopic.is-on {
  background: rgba(var(--c), 0.13);
  border-color: rgba(var(--c), 0.5);
  color: rgb(var(--c));
}
.label-subtopic.is-on::before { opacity: 1; width: 4px; }
.label-subtopic.is-on .sub-count { color: rgb(var(--c)); opacity: 0.85; }

/* === 필터 초기화 라벨 (카드갯수 게이지 바로 위, 좌측, 필터 1개 이상 시 슬라이드 인) === */
/* 필터 초기화 — .home-reset 칩(상단 상태바)으로 대체됨 */

/* === 매치 카운트 + 진행 바 === */
.filter-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-meta-bar {
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.filter-meta-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #a78bfa, #fb7185, #fbbf24, #2dd4bf, #38bdf8);
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 360ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 0 10px rgba(255,255,255,0.08);
  animation: meta-shimmer 6s linear infinite;
}
@keyframes meta-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.filter-meta-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  min-height: 16px; /* JS 텍스트 렌더 전 공간 선점 — height 점프 방지 */
}
.filter-meta-text strong {
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
}

/* === 연도 구간 필터 — 매치바 공유 히스토그램 슬라이더 ===
   .yf-stage 가 매치바를 감싼 드래그 영역. 평소엔 매치바(4px)만 보이고,
   홈에서 위로 스와이프 시 .yf-on 으로 히스토그램·듀얼 핸들이 매치바 위에 펼쳐진다. */
.yf-stage {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.yf-stage.yf-on {
  touch-action: none;   /* 펼친 상태에서만 드래그가 페이지 제스처를 가로채지 않게 */
  cursor: pointer;
}
.yf-stage.is-active { cursor: grabbing; }

/* 연도별 카드량 히스토그램 — 매치바 바로 위. 접힘 시 max-height 0 으로 숨김 */
.yf-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 320ms cubic-bezier(0.32, 0.72, 0, 1),
              margin-bottom 320ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 200ms ease,
              transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.yf-stage.yf-on .yf-bars {
  max-height: 30px;
  margin-bottom: 7px;
  opacity: 1;
  transform: translateY(0);
}
.yf-bar {
  flex: 1;
  min-width: 0;
  height: calc(26% + var(--h, 0) * 74%);   /* 최소 26% + 카드량 비율 */
  background: var(--hairline);
  border-radius: 1.5px 1.5px 0 0;
  opacity: 0.5;
  transition: height 320ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 220ms ease, background 220ms ease;
}
.yf-bar.in-range {
  opacity: 1;
  background: linear-gradient(180deg, #a78bfa 0%, #38bdf8 100%);
}
.yf-bar.is-empty { opacity: 0.22; }   /* 현재 필터 조합에 그 해 카드 없음 */

/* 연도 프리셋 칩 — 최근 3년·최근 5년·전체. 히스토그램과 함께 .yf-on 시 펼침 */
.yf-presets[hidden] { display: none; }   /* 보류 — 메인앱 OX 카드 탭 이관 예정 */
.yf-presets {
  display: flex;
  gap: 6px;
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 320ms cubic-bezier(0.32, 0.72, 0, 1),
              margin-bottom 320ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 200ms ease,
              transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.yf-stage.yf-on .yf-presets {
  max-height: 26px;
  margin-bottom: 7px;
  opacity: 1;
  transform: translateY(0);
}
.yf-preset {
  flex: 1;
  min-width: 0;
  height: 26px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--ink-mute);
  background: var(--surface-elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.yf-preset:hover { border-color: var(--ink-ash); color: var(--ink-body); }
.yf-preset.is-on {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 100%);
  border-color: transparent;
}

/* 듀얼 핸들 — 매치바(4px) 중앙에 올라타는 좌표 마커. 접힘 시 숨김 */
.yf-handle {
  position: absolute;
  bottom: -6px;          /* 4px 매치바 중앙(아래서 2px)에 16px 핸들 센터 정렬 */
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--canvas);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--hairline-strong);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 100ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 200ms ease, box-shadow 120ms ease;
  cursor: grab;
  z-index: 3;
}
.yf-stage.yf-on .yf-handle {
  opacity: 1;
  pointer-events: auto;
}
.yf-handle::before {           /* 잡기 영역 확대 — 위쪽 히스토그램까지 터치 타겟 ~38px */
  content: "";
  position: absolute;
  inset: -11px;
}
.yf-stage.is-active .yf-handle { cursor: grabbing; }
.yf-handle.is-dragging {
  transform: translateX(-50%) scale(1.18);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.7),
              0 0 0 4px var(--accent-hold-soft), 0 0 0 1px var(--accent-hold);
}
.yf-handle:focus-visible {
  outline: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65),
              0 0 0 3px var(--accent-hold-soft), 0 0 0 1px var(--accent-hold);
}

/* === 연도 필터 스와이프 안내 힌트 — 매치바 위, 첫 진입 시 1회성 노출 === */
.yf-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 280ms ease, height 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.yf-hint.is-shown { opacity: 1; }
.yf-hint.is-leaving {           /* 첫 펼침과 동시에 접힘 — 히스토그램으로 핸드오프 */
  opacity: 0;
  height: 0;
}
/* 위로 떠오르며 사라지는 손가락 점 — 스와이프 업 모션 */
.yf-hint-finger {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fff, #d7d7df);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4),
              inset 0 -3px 5px rgba(0, 0, 0, 0.14);
  animation: yf-hint-swipe 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes yf-hint-swipe {
  0%,  100% { opacity: 0; transform: translateY(6px)  scale(0.66); }
  16%       { opacity: 1; transform: translateY(5px)  scale(1); }
  58%       { opacity: 1; transform: translateY(-6px) scale(0.97); }
  74%       { opacity: 0; transform: translateY(-9px) scale(0.72); }
}
.yf-hint-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--ink-ash);
}
.yf-hint-label b {
  color: var(--ink-mute);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .yf-hint-finger { animation: none; opacity: 0.9; transform: translateY(-1px); }
}

/* === dev9k 전용 디버그 — qid 점프 입력창 (프로덕션 미노출) === */
.xo-debug-jump {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--hairline);
}
.xo-debug-jump::before {
  content: "DEV";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--accent-trap);
  border: 1px solid var(--accent-trap);
  border-radius: 3px;
  padding: 2px 4px;
}
.xo-debug-qid {
  flex: 1;
  min-width: 0;
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 9px;
}
.xo-debug-qid::placeholder { color: var(--ink-ash); }
.xo-debug-qid:focus { outline: none; border-color: var(--accent-hold); }
.xo-debug-qid.is-error {
  border-color: var(--accent-x);
  animation: xo-debug-shake 280ms ease;
}
@keyframes xo-debug-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.xo-debug-go {
  flex-shrink: 0;
  width: 38px;
  height: 30px;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink-body);
  font-size: 14px;
  cursor: pointer;
  transition: transform 80ms ease, border-color 140ms ease;
}
.xo-debug-go:hover { border-color: var(--ink-mute); }
.xo-debug-go:active { transform: scale(0.94); }

/* === STUDY (full-screen) === */
.study {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  /* 학습 화면 전체에서 텍스트 선택·복사 팝업 원천 차단 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--s-md) + env(safe-area-inset-top)) var(--s-md) var(--s-md);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-body);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  gap: var(--s-sm);
}
.hud-left {
  display: flex;
  gap: var(--s-md);
  flex-wrap: wrap;
  min-width: 0;
}
.hud-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hud-stat-icon { color: var(--ink-mute); }
.hud-stat-value { color: var(--ink); font-weight: 500; }
.hud-stat-value.hot { color: var(--accent-trap); }
.hud-right { display: inline-flex; align-items: center; gap: var(--s-sm); }

/* prefix bar: ox-card-body 안, ox-card-body-inner(대괄호 장식) 바로 위 */
.ox-card-body.has-prefix {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.card-prefix-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--accent-hold);
  padding: 2px 0 2px 10px;
  margin: 0 var(--s-lg) 10px var(--s-sm);
}
.prefix-chip {
  font-size: clamp(12px, 3vw, 15px);
  font-family: var(--font-sans);
  color: var(--ink-ash);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.card-stack {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-sm) var(--s-sm) 0;
  min-height: 0;
  overflow: hidden;
}
.ox-card {
  position: absolute;
  /* bottom: env(safe-area-inset-bottom) — iPhone 화면 곡선/홈 인디케이터 회피 */
  inset: var(--s-sm) var(--s-sm) max(env(safe-area-inset-bottom, 2px), 2px) var(--s-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-lg) var(--s-lg) max(env(safe-area-inset-bottom, 0px), var(--s-lg));
  background: var(--surface-card);
  border-radius: var(--r-card);
  box-shadow: var(--card-ring);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  will-change: transform, opacity;
  transition: box-shadow 120ms ease;
  max-width: 100%;
  overflow: hidden;
}
.ox-card.is-dragging { transition: none; }
.ox-card.swipe-o {
  background: linear-gradient(160deg, var(--surface-card), var(--accent-o-soft));
  box-shadow: 0 0 0 1px var(--accent-o), 0 0 30px var(--accent-o-soft);
}
.ox-card.swipe-x {
  background: linear-gradient(160deg, var(--surface-card), var(--accent-x-soft));
  box-shadow: 0 0 0 1px var(--accent-x), 0 0 30px var(--accent-x-soft);
}
/* 정답: 부드러운 초록 글로우 (흔들림 없음) */
/* 글로우는 background-image(transparent→soft) 레이어로 깔고 surface-card 솔리드는 유지
   — 그래야 답 후 뒤에 깔린 next-preview가 비춰 보이지 않음 */
.ox-card.pass-glow {
  background-color: var(--surface-card);
  background-image: linear-gradient(160deg, transparent, var(--accent-o-soft));
  box-shadow: 0 0 0 2px var(--accent-o), 0 0 40px var(--accent-o-soft);
  transition: box-shadow 200ms ease;
}
/* 오답: 빨간 글로우 + shake와 함께 */
.ox-card.fail-glow {
  background-color: var(--surface-card);
  background-image: linear-gradient(160deg, transparent, var(--accent-x-soft));
  box-shadow: 0 0 0 2px var(--accent-x), 0 0 40px var(--accent-x-soft);
  transition: box-shadow 200ms ease;
}
/* 왼쪽 스와이프 → 다음 카드 원형 인디케이터 (O·X와 다른 색) */
.next-card-cue {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(87, 193, 255, 0.5);
  background: rgba(87, 193, 255, 0.07);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 180ms ease, transform 180ms ease;
}
.ox-card.next-drag .next-card-cue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* peek 1회 인-게임 데모 — 첫 X카드 morph 완료 직후 가상 손가락이 우측으로 미는 모션을 무한 반복.
   손가락이 카드를 지나가는 타이밍과 동기로 본문도 우측 nudge + 색 swap(파랑↔노랑) — peek 시뮬.
   사용자가 실제 드래그 시작하면 .peek-demo-active 해제되며 모든 변형 즉시 복귀. */
.peek-demo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 22;
  opacity: 0;
  transition: opacity 280ms ease;
}
.peek-demo.show { opacity: 1; }
.peek-demo-finger {
  position: absolute;
  left: 16%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.45),
    inset 0 -5px 8px rgba(0, 0, 0, 0.12);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: peek-demo-swipe 1.8s ease-in-out infinite;
}
@keyframes peek-demo-swipe {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1;   transform: translate(calc(-50% + 150px), -50%) scale(0.95); }
  90%  { opacity: 0;   transform: translate(calc(-50% + 180px), -50%) scale(0.7); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
}
.peek-demo-label {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 17, 20, 0.92);
  color: #d8dde3;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 22px rgba(0,0,0,0.7),
    0 18px 44px rgba(0,0,0,0.55);
}
/* 본문 우측 nudge — 손가락 모션과 동기, 손가락이 본문을 미는 듯한 시각 신호 */
.ox-card.peek-demo-active .ox-card-body {
  animation: peek-demo-body-nudge 1.8s ease-in-out infinite;
}
@keyframes peek-demo-body-nudge {
  0%, 15%   { transform: translateX(0); }
  45%, 65%  { transform: translateX(22px); }
  88%, 100% { transform: translateX(0); }
}
/* morph-right 정답 토큰의 색을 손가락 통과 타이밍에 원본(노랑)으로 swap → 다시 정답(파랑) */
.ox-card.peek-demo-active .ox-card-body .morph-right {
  animation: peek-demo-color-swap 1.8s ease-in-out infinite;
}
@keyframes peek-demo-color-swap {
  0%, 15% {
    color: var(--accent-o);
    text-shadow: 0 0 8px rgba(110, 160, 224, 0.7), 0 0 18px rgba(110, 160, 224, 0.4);
  }
  45%, 65% {
    color: var(--accent-trap);
    text-shadow: 0 0 8px rgba(255, 197, 51, 0.7), 0 0 18px rgba(255, 197, 51, 0.45);
  }
  88%, 100% {
    color: var(--accent-o);
    text-shadow: 0 0 8px rgba(110, 160, 224, 0.7), 0 0 18px rgba(110, 160, 224, 0.4);
  }
}

/* 다음 카드 미리보기 — 답 후 현재 카드 뒤에 같은 위치로 자리 잡고,
   왼쪽 스와이프로 현재 카드가 비키면 자연스럽게 드러남 (진짜 카드 넘기듯) */
.ox-card.next-preview {
  pointer-events: none;
  box-shadow: var(--card-ring);
}

/* 커튼식 엣지바 — 평소엔 얇게 양쪽에 떠 있다가, 좌/우 드래그 시 그 방향이 안쪽으로 넓어지며
   숨어있던 X / O 글자가 드러남. 카드는 고정 — 시각 신호는 커튼이 전담 */
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.5;
  overflow: hidden;
  transition: width 120ms cubic-bezier(0.32, 0.72, 0, 1), opacity 120ms ease;
  will-change: width;
}
/* 위치는 원래대로 — X=좌(빨강), O=우(초록).
   스와이프 방향대로 반대편 커튼이 따라 늘어나면서 안에서 글자가 빠져나오는 느낌 */
.curtain-x {
  left: 0;
  background: linear-gradient(90deg, var(--accent-x), transparent);
}
.curtain-o {
  right: 0;
  background: linear-gradient(270deg, var(--accent-o), transparent);
}
/* 글자는 절대 위치로 안쪽 가장자리에 고정 — 커튼이 좁을 땐 overflow:hidden에 가려졌다가
   넓어지면서 드러남 */
.curtain-mark {
  position: absolute;
  top: 50%;
  font-family: var(--font-sans);
  font-size: clamp(96px, 26vw, 200px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--ink);
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
  user-select: none;
}
/* 글자는 커튼 안쪽(화면 중앙 쪽) 가장자리에 고정 — 좁을 땐 overflow:hidden에 숨었다가
   커튼이 화면 중앙 방향으로 늘어나면서 빠져나옴 */
.curtain-x .curtain-mark { right: 18px; color: var(--accent-x); }
.curtain-o .curtain-mark { left: 18px; color: var(--accent-o); }
/* 활성(드래그 중) 상태 — 더 진해짐 */
.curtain.is-active { opacity: 0.85; transition: width 0ms, opacity 100ms ease; }
/* 커밋 임계 도달 시 — 글자 살짝 펄스 */
.curtain.is-armed .curtain-mark { animation: curtain-arm 220ms ease-out; }
@keyframes curtain-arm {
  0%   { transform: translateY(-50%) scale(1); }
  40%  { transform: translateY(-50%) scale(1.12); }
  100% { transform: translateY(-50%) scale(1); }
}

.ox-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-sm);
  min-height: 24px;
  margin-bottom: var(--s-sm);
}
.ox-card-meta-source {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
}
.meta-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--surface-elevated);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.meta-topic {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-ash);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ox-card-low-mark {
  font-size: 14px;
  color: var(--ink-ash);
  opacity: 0.5;
  flex-shrink: 0;
}

/* 답 후 피드백 — 카드 위 상단 오버레이. 정답 ✓/✕가 큼직하게.
   cardEl 자식으로 nested — 카드 transform(슬라이드/회전)에 자연스럽게 따라가도록 */
.answer-feedback {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #1c1c1c;
  border-radius: var(--r-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 0 rgba(0,0,0,0.9),
    0 8px 16px rgba(0,0,0,0.75),
    0 26px 50px rgba(0,0,0,0.88),
    0 48px 100px rgba(0,0,0,0.75);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.32, 0.72, 0, 1), background-color 240ms ease;
  pointer-events: none;
  z-index: 20;
  max-width: calc(100vw - 2 * var(--s-sm));
  overflow: hidden;
}
.answer-feedback.is-correct { background: #1a2128; }
.answer-feedback.is-wrong   { background: #281a1a; }
.answer-feedback .ox-feedback-core,
.answer-feedback .ox-feedback-tip,
.answer-feedback .ox-feedback-right {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.answer-feedback.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ox-feedback-row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  flex-wrap: wrap;
}
.ox-feedback-ox {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ox-feedback-ox.is-o { color: var(--accent-o); }
.ox-feedback-ox.is-x { color: var(--accent-x); }
.ox-feedback-verdict {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ox-feedback-verdict.verdict-correct { color: var(--accent-o); }
.ox-feedback-verdict.verdict-wrong { color: var(--accent-x); }
.ox-feedback-answer {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-body);
  margin-left: auto;
}
.ox-feedback-answer strong {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-left: 6px;
}
.ox-feedback-answer strong.is-o { color: var(--accent-o); }
.ox-feedback-answer strong.is-x { color: var(--accent-x); }
.ox-feedback-tip {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--w-body);
  color: var(--ink-body);
  line-height: 1.5;
}
/* 정답 요약 (corePoint) — 답 후 결과박스에 즉시 노출. tip보다 살짝 더 권위감 */
.ox-feedback-core {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  padding-top: 2px;
}
.ox-feedback-right {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-o);
  letter-spacing: 0.2px;
}
.pill-amend {
  background: var(--accent-trap-soft);
  color: var(--accent-trap);
}

.ox-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-md);
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 본문 텍스트 래퍼 — 대괄호 [ ]는 텍스트 크기에 맞춰 늘어남 */
.ox-card-body-inner {
  position: relative;
  font-size: clamp(18px, 4.6vw, 24px);
  font-weight: var(--w-display);
  line-height: 1.45;
  letter-spacing: -0.4px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding: var(--s-sm) var(--s-lg);
  max-width: 100%;
}
.ox-card-body-inner::before,
.ox-card-body-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  border-color: var(--ink-mute);
  border-style: solid;
  pointer-events: none;
}
.ox-card-body-inner::before {
  left: 0;
  border-width: 3px 0 3px 3px;
}
.ox-card-body-inner::after {
  right: 0;
  border-width: 3px 3px 3px 0;
}
/* 본문이 길수록 폰트 자동 축소 (.long, .very-long 클래스로 분기) */
.ox-card-body-inner.long { font-size: clamp(16px, 4vw, 21px); }
.ox-card-body-inner.very-long { font-size: clamp(15px, 3.6vw, 19px); line-height: 1.5; }
.ox-card-body .same { color: var(--ink); }
/* 함정 키워드 강조 — 박스 없이 텍스트 자체 글로우. 줄바꿈 흐름 보존 */
.ox-card-body .trap-mark {
  color: var(--accent-trap);
  font-weight: inherit;
  text-shadow:
    0 0 8px rgba(255, 197, 51, 0.7),
    0 0 18px rgba(255, 197, 51, 0.45);
  animation: trap-pulse 700ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes trap-pulse {
  0%   { color: inherit; text-shadow: none; }
  30%  {
    color: var(--accent-trap);
    text-shadow:
      0 0 4px rgba(255, 197, 51, 1),
      0 0 14px rgba(255, 197, 51, 0.95),
      0 0 28px rgba(255, 197, 51, 0.6);
  }
  100% {
    color: var(--accent-trap);
    text-shadow:
      0 0 8px rgba(255, 197, 51, 0.7),
      0 0 18px rgba(255, 197, 51, 0.45);
  }
}
/* 옛 .wrong/.right (호환성) — 동일 글로우 */
.ox-card-body .wrong, .ox-card-body .right {
  color: var(--accent-trap);
  font-weight: 700;
  text-shadow:
    0 0 8px rgba(255, 197, 51, 0.7),
    0 0 18px rgba(255, 197, 51, 0.45);
}

/* wrong → right 문장 변환 애니. 박스 없이 텍스트 글로우 + 색상 + 취소선만.
   1단계: morph-wrong (빨강 글로우 + 취소선) → morph-out (페이드아웃 + 위로 살짝)
   2단계: 텍스트 swap → morph-in (아래에서 튕기며 등장) → morph-right (초록 글로우 정착) */
.ox-card-body .morph-target {
  display: inline;
  transition: opacity 380ms ease, transform 380ms ease,
              color 380ms ease, text-shadow 380ms ease;
}
.ox-card-body .morph-wrong {
  color: var(--accent-x);
  text-shadow:
    0 0 8px rgba(232, 69, 69, 0.6),
    0 0 18px rgba(232, 69, 69, 0.35);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 69, 69, 0.7);
  text-decoration-thickness: 2px;
  font-weight: inherit;
}
.ox-card-body .morph-out {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}
.ox-card-body .morph-right {
  color: var(--accent-o);
  font-weight: inherit;
  text-shadow:
    0 0 8px rgba(110, 160, 224, 0.7),
    0 0 18px rgba(110, 160, 224, 0.4);
}
.ox-card-body .morph-in {
  animation: morph-in-pop 520ms cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes morph-in-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  55%  { opacity: 1; transform: translateY(-3px) scale(1.06); }
  80%  { opacity: 1; transform: translateY(0) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ox-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Reveal sheet (해설) */
.reveal-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* .study(=뷰포트) 기준 % — vh 와 달리 브라우저 크롬을 반영해
     기기별로 시트가 화면 밖으로 밀려 하단(비교 포인트)이 짤리던 문제 해소 */
  max-height: 88%;
  background: var(--surface-elevated);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -1px 0 var(--hairline-soft), 0 -10px 40px rgba(0,0,0,0.5);
  padding: 0 var(--s-md) calc(var(--s-lg) + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  /* 해설이 max-height 를 넘으면 세로 스크롤 허용 — 닫기 드래그는 JS 가
     scrollTop===0(최상단)에서만 가로채므로 스크롤과 충돌하지 않음 */
  touch-action: pan-y;
  /* 카드(.ox-card는 will-change로 layer 생성)와 answer-feedback(z-index:20)·엣지 바(z-index:5)
     모두 위에 떠야 함 — 충분히 높은 z-index */
  z-index: 40;
}
.reveal-sheet.open { transform: translateY(0); }
/* 상단 핸들 = 시트 닫기 버튼. 가로선 자체는 슬림하게 두되 ::before 로 탭 영역 확장 */
.sheet-handle {
  display: block;
  width: 48px;
  height: 5px;
  margin: 14px auto 12px;
  padding: 0;
  border: none;
  background: var(--hairline-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  position: relative;
  transition: background 140ms ease, width 140ms ease;
}
.sheet-handle::before {
  content: "";
  position: absolute;
  inset: -16px -36px;
}
.sheet-handle:hover { background: var(--ink-mute); }
.sheet-handle:active {
  background: var(--ink-mute);
  width: 56px;
}
/* 섹션별 카드 — 각 섹션 성격에 맞춘 색·아이콘·타이포로 시인성↑ */
.reveal-sheet-row {
  margin: var(--s-sm) 0;
  padding: var(--s-md) var(--s-md);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--hairline);
}
.reveal-sheet-row .row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.reveal-sheet-row .row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.reveal-sheet-row .row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-ash);
  font-weight: 500;
}
.reveal-sheet-row .row-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* 정답 — 가장 중요. 큰 폰트 + O/X 색 강조 (학습 핵심을 한눈에) */
.reveal-sheet-row[data-kind="answer"] {
  background: linear-gradient(135deg, var(--accent-o-soft), rgba(255,255,255,0.02));
  border-left-color: var(--accent-o);
}
.reveal-sheet-row[data-kind="answer"][data-ox="X"] {
  background: linear-gradient(135deg, var(--accent-x-soft), rgba(255,255,255,0.02));
  border-left-color: var(--accent-x);
}
.reveal-sheet-row[data-kind="answer"] .row-icon,
.reveal-sheet-row[data-kind="answer"] .row-label { color: var(--accent-o); }
.reveal-sheet-row[data-kind="answer"][data-ox="X"] .row-icon,
.reveal-sheet-row[data-kind="answer"][data-ox="X"] .row-label { color: var(--accent-x); }
.reveal-sheet-row[data-kind="answer"] .row-body {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}

/* 암기 팁 — 노란 형광펜 톤. 짧은 hook으로 즉시 기억 */
.reveal-sheet-row[data-kind="tip"] {
  background: linear-gradient(135deg, var(--accent-trap-soft), rgba(255,255,255,0.02));
  border-left-color: var(--accent-trap);
}
.reveal-sheet-row[data-kind="tip"] .row-icon,
.reveal-sheet-row[data-kind="tip"] .row-label { color: var(--accent-trap); }

/* 함정 분석 — 경고 톤. 왜 틀렸는지 명확히 */
.reveal-sheet-row[data-kind="trap"] {
  background: linear-gradient(135deg, rgba(232,69,69,0.10), rgba(255,255,255,0.02));
  border-left-color: var(--accent-x);
}
.reveal-sheet-row[data-kind="trap"] .row-icon,
.reveal-sheet-row[data-kind="trap"] .row-label { color: var(--accent-x); }

/* 조문 근거 — 법조문 톤. 모노폰트로 정확성·인용 느낌 */
.reveal-sheet-row[data-kind="article"] {
  background: linear-gradient(135deg, var(--accent-hold-soft), rgba(255,255,255,0.02));
  border-left-color: var(--accent-hold);
}
.reveal-sheet-row[data-kind="article"] .row-icon,
.reveal-sheet-row[data-kind="article"] .row-label { color: var(--accent-hold); }
.reveal-sheet-row[data-kind="article"] .row-body {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2px;
}

/* 비교 포인트 — 중립 강조. 옆 개념 연결 */
.reveal-sheet-row[data-kind="compare"] {
  background: rgba(255,255,255,0.045);
  border-left-color: var(--hairline-strong);
}
.reveal-sheet-row[data-kind="compare"] .row-label { color: var(--ink-body); }

/* === Beautifier — 해설 텍스트 패턴 시각 분리 ===
   영문 jargon(negation_inversion 등) → 한글 칩
   조문(제○조) → 모노 ref 배지
   따옴표 인용 → 인용 톤
   em-dash → 점 구분자, 화살표/등호 → 연산 글리프 */
.ox-feedback-tip, .reveal-sheet-row .row-body {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 박스/패딩 없이 색+text-shadow로만 강조 — 인라인 박스가 줄바꿈을 비틀던 문제 해결.
   모든 bf-* 스팬은 순수 inline (display 변경 X, padding X, background X) */
.bf-trap {
  color: var(--accent-x);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(232, 69, 69, 0.45);
}
.bf-trap-ico {
  font-family: var(--font-mono);
  margin-right: 2px;
  opacity: 0.85;
}
.bf-amend {
  color: var(--accent-trap);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 197, 51, 0.45);
}
.bf-quote {
  color: var(--ink);
  font-weight: 500;
  text-shadow: 0 0 6px rgba(255, 197, 51, 0.35);
}
.bf-quote::before { content: "\201C"; color: var(--accent-trap); opacity: 0.7; margin-right: 1px; }
.bf-quote::after  { content: "\201D"; color: var(--accent-trap); opacity: 0.7; margin-left: 1px; }
.bf-ref {
  color: var(--accent-hold);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1px;
  text-shadow: 0 0 6px rgba(87, 193, 255, 0.4);
}
.bf-op {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-weight: 500;
  margin: 0 2px;
}
/* memoryTip의 = ≠는 동치/정의식 — 노란 톤으로 좌우항 구분 시각화 (다른 섹션은 muted 유지) */
.reveal-sheet-row[data-kind="tip"] .bf-op {
  color: var(--accent-trap);
  opacity: 0.95;
  text-shadow: 0 0 6px rgba(255, 197, 51, 0.35);
}
/* 인과 화살표 — op에서 분리. 시안 톤으로 방향성 강조 (전 섹션 일관) */
.bf-arrow {
  color: var(--accent-hold);
  font-family: var(--font-mono);
  font-weight: 500;
  margin: 0 3px;
  opacity: 0.9;
}
.reveal-sheet-row[data-kind="tip"] .bf-arrow {
  color: var(--accent-hold);
  opacity: 1;
  text-shadow: 0 0 6px rgba(87, 193, 255, 0.4);
}
/* 가운뎃점 — 동급 항목 구분. 색만 살짝 띄워 28k건 출현해도 시각 잡음 최소 */
.bf-mid {
  color: var(--accent-hold);
  opacity: 0.6;
  padding: 0 2px;
}
/* 양옆 공백 슬래시 — "또는/대비". 가시도 약하게, 시각 호흡만 추가 */
.bf-slash {
  color: var(--ink-mute);
  opacity: 0.7;
  padding: 0 3px;
}
/* 한국어 단서표지 — 단,/그러나/반면. 자간으로 다음 절 띄우고 노란 톤 약하게 */
.bf-but {
  color: var(--accent-trap);
  opacity: 0.85;
  letter-spacing: 0.4px;
  margin-right: 2px;
}
/* corePoint 끝 verdict pill — 카드 결론 시각 닻 */
.bf-verdict {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  vertical-align: 0.05em;
  white-space: nowrap;
}
.bf-verdict-ok {
  background: rgba(110, 160, 224, 0.12);
  color: var(--accent-o);
  border: 1px solid rgba(110, 160, 224, 0.3);
}
.bf-verdict-ng {
  background: rgba(232, 69, 69, 0.12);
  color: var(--accent-x);
  border: 1px solid rgba(232, 69, 69, 0.3);
}
.bf-verdict-ox {
  font-weight: 600;
  margin-right: 4px;
  opacity: 0.85;
}
/* em-dash 대체 — 가는 세로 막대로 토픽/디테일 분리. 글자 자체는 없음 */
.bf-dash {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 0.55em;
  background: currentColor;
  opacity: 0.28;
  vertical-align: -0.05em;
  border-radius: 1px;
}

/* article 섹션은 이미 mono 톤이라 ref가 본문과 동화 — 글로우만 살짝 */
.reveal-sheet-row[data-kind="article"] .bf-ref {
  color: var(--accent-hold);
  font-size: 1em;
}
.reveal-sheet-row[data-kind="article"] .bf-quote {
  font-family: var(--font-sans);
  font-size: 0.95em;
}

/* 답변 카드(answer) 섹션의 ref는 강조 색에 동화 */
.reveal-sheet-row[data-kind="answer"] .bf-ref {
  color: var(--ink);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

/* === 조문 근거 — [배지 제목] [인용] [부연] 3단 === */
.article-title {
  display: inline-block;
  padding: 5px 11px;
  margin-bottom: var(--s-sm);
  border-radius: 6px;
  background: rgba(87, 193, 255, 0.13);
  border: 1px solid rgba(87, 193, 255, 0.32);
  color: var(--accent-hold);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.35;
  word-break: keep-all;
}
/* 배지 안의 ref는 다시 박스 처리하지 않고 색만 통일 */
.article-title .bf-ref {
  color: var(--accent-hold);
  text-shadow: none;
  background: transparent;
}
.article-quote {
  margin: var(--s-sm) 0 0;
  padding: var(--s-sm) var(--s-md);
  border-left: 2px solid rgba(87, 193, 255, 0.55);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.article-quote::before {
  content: "\201C";
  color: var(--accent-hold);
  margin-right: 3px;
  opacity: 0.55;
  font-size: 1.15em;
  font-weight: 600;
  vertical-align: -0.08em;
}
.article-quote::after {
  content: "\201D";
  color: var(--accent-hold);
  margin-left: 3px;
  opacity: 0.55;
  font-size: 1.15em;
  font-weight: 600;
  vertical-align: -0.08em;
}
.article-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-body);
  line-height: 1.55;
  margin-top: var(--s-sm);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* === 비교 포인트 — A vs B 양쪽 카드 / 헤더+리스트 / 캡션 === */
.compare-header {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-sm);
  word-break: keep-all;
  line-height: 1.4;
}
.compare-pair {
  display: flex;
  align-items: stretch;
  gap: var(--s-sm);
  margin: var(--s-xs) 0;
}
.compare-card {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--s-sm) var(--s-md);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--hairline-strong);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* N항 색조 ramp — 좌측부터 hold·trap·x·mute 순환. 레거시 .compare-a/b는 후방호환 */
.compare-c0, .compare-a { border-left-color: var(--accent-hold); }
.compare-c1, .compare-b { border-left-color: var(--accent-trap); }
.compare-c2 { border-left-color: var(--accent-x); }
.compare-c3 { border-left-color: var(--ink-mute); }
.compare-vs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 2px;
}
/* === 조문 N항 분리 — 각 행 = [조문 ref] + [본문] 2열 === */
.compare-articles {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin: var(--s-xs) 0;
}
.compare-article-row {
  display: flex;
  gap: var(--s-md);
  padding: var(--s-sm) var(--s-md);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--hairline-strong);
  align-items: baseline;
}
/* .compare-c{i} ramp는 위 .compare-card와 동일 색조 — 클래스 단독으로도 적용됨 */
.article-row-ref {
  flex: 0 0 auto;
  min-width: 96px;
  white-space: nowrap;
}
.article-row-ref .bf-ref {
  font-size: 12.5px;
}
.article-row-meta {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-mute);
  opacity: 0.85;
  white-space: normal;
  word-break: keep-all;
}
.article-row-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 380px) {
  .compare-article-row {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .article-row-ref { min-width: 0; }
}

.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.compare-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--ink-body);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.compare-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-hold);
  opacity: 0.55;
  font-size: 0.82em;
  line-height: 1.7;
}
.compare-caption {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: var(--s-sm);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 좁은 화면 — 비교 카드를 위·아래로 쌓기 */
@media (max-width: 380px) {
  .compare-pair {
    flex-direction: column;
    gap: 6px;
  }
  .compare-vs {
    align-self: flex-start;
    padding: 2px 0;
  }
}

/* === 첫 진입 사용법 튜토리얼 === */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 8, 10, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 280ms ease;
}
.onboarding.ob-shown { opacity: 1; }
.onboarding.ob-leaving { opacity: 0; }
/* 북마크 소개 모달 아이콘 */
.ob-bm-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-bm-icon svg {
  width: 72px;
  height: 72px;
  fill: #f5c542;
  filter: drop-shadow(0 0 18px rgba(245,197,66,0.55));
  animation: ob-bm-intro-pop 500ms cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
@keyframes ob-bm-intro-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  70%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

.ob-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-lg);
  padding: var(--s-xl);
  max-width: 320px;
}
.ob-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.ob-stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-card-mock {
  width: 124px;
  height: 124px;
  background: var(--surface-card);
  border-radius: var(--r-card);
  box-shadow: var(--card-ring);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 튜토리얼 카드 넘김 애니메이션 — 카드가 왼쪽으로 슬라이드하며 페이드아웃 후 복귀 */
.ob-card-mock.ob-card-advance {
  animation: ob-card-advance 1.7s ease-out;
}
@keyframes ob-card-advance {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  18%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  58%  { opacity: 0.7; transform: translate(-48px, 6px) rotate(-9deg); }
  74%  { opacity: 0;   transform: translate(-72px, 10px) rotate(-13deg); }
  75%  { opacity: 0;   transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 1;   transform: translate(0, 0) rotate(0deg); }
}
/* 튜토리얼 북마크 스텝 — 더블탭 후 리본 아이콘 팝인→페이드아웃 */
.ob-card-mock.ob-card-bookmark {
  position: relative;
  overflow: hidden;
}
.ob-card-mock.ob-card-bookmark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5c542' d='M18.383%2C10.367l-6.383-1.276V2.607C12%2C1.333%2C11.104%2C.228%2C9.916%2C.034c-.732-.116-1.475%2C.085-2.035%2C.562-.56%2C.476-.881%2C1.17-.881%2C1.906l.004%2C1.499H3.5c-.215%2C0-.406%2C.138-.474%2C.342-.068%2C.204%2C.002%2C.429%2C.174%2C.558l1.466%2C1.1-1.466%2C1.1c-.172%2C.129-.243%2C.354-.174%2C.558%2C.068%2C.204%2C.259%2C.342%2C.474%2C.342h3.507l.01%2C2.985L2.927%2C15.048c-.596%2C.592-.925%2C1.381-.927%2C2.222-.001%2C.84%2C.325%2C1.63%2C.919%2C2.225l2.308%2C2.308c1.416%2C1.417%2C3.299%2C2.197%2C5.303%2C2.197h6.969c2.481%2C0%2C4.5-2.019%2C4.5-4.5v-4.721c0-2.138-1.521-3.993-3.617-4.413Z'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
  animation: ob-bm-icon 2s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(245,197,66,0.55));
}
@keyframes ob-bm-icon {
  /* scale 변화 없이 fade만 — 스케일 바운스가 탭처럼 보이는 것 방지 */
  0%   { opacity: 0; }
  62%  { opacity: 0; }
  74%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 답 후(revealed) 상태 — 푸른 ring으로 정답 결과 카드임을 표시 */
.ob-card-mock.ob-revealed {
  box-shadow:
    var(--card-ring),
    0 0 0 2px rgba(87, 193, 255, 0.45),
    0 0 24px rgba(87, 193, 255, 0.25);
}
/* peek 시뮬 — 카드가 우측으로 살짝 밀리며 노란 글로우(원본 노출)로 전환 후 복귀 */
.ob-card-mock.ob-card-peek {
  animation: ob-card-peek 1.7s ease-out;
}
@keyframes ob-card-peek {
  0%   { transform: translate(0, 0); box-shadow: var(--card-ring), 0 0 0 2px rgba(87,193,255,0.45), 0 0 24px rgba(87,193,255,0.25); }
  35%  { transform: translate(28px, 0); box-shadow: var(--card-ring), 0 0 0 2px rgba(251,191,36,0.55), 0 0 28px rgba(251,191,36,0.35); }
  70%  { transform: translate(28px, 0); box-shadow: var(--card-ring), 0 0 0 2px rgba(251,191,36,0.55), 0 0 28px rgba(251,191,36,0.35); }
  100% { transform: translate(0, 0); box-shadow: var(--card-ring), 0 0 0 2px rgba(87,193,255,0.45), 0 0 24px rgba(87,193,255,0.25); }
}

.ob-logo {
  width: 72px;
  height: 72px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  border-radius: 12px;
}
.ob-finger {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.45),
    inset 0 -5px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  opacity: 0;
}
.ob-finger.ob-motion-right     { animation: ob-right     1.7s ease-out; }
.ob-finger.ob-motion-left      { animation: ob-left      1.7s ease-out; }
.ob-finger.ob-motion-up        { animation: ob-up        1.7s ease-out; }
.ob-finger.ob-motion-doubletap { animation: ob-doubletap 1.7s ease-out; }
@keyframes ob-right {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  18%  { opacity: 1;   transform: translate(0, 0) scale(1); }
  78%  { opacity: 1;   transform: translate(95px, 0) scale(0.95); }
  100% { opacity: 0;   transform: translate(120px, 0) scale(0.7); }
}
@keyframes ob-left {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  18%  { opacity: 1;   transform: translate(0, 0) scale(1); }
  78%  { opacity: 1;   transform: translate(-95px, 0) scale(0.95); }
  100% { opacity: 0;   transform: translate(-120px, 0) scale(0.7); }
}
@keyframes ob-up {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  18%  { opacity: 1;   transform: translate(0, 0) scale(1); }
  78%  { opacity: 1;   transform: translate(0, -95px) scale(0.95); }
  100% { opacity: 0;   transform: translate(0, -120px) scale(0.7); }
}
@keyframes ob-doubletap {
  /* 등장: scale 변화 없이 fade만 — scale 변화가 탭처럼 보이는 것 방지 */
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: 1; transform: scale(1); }
  22%  { opacity: 0.5; transform: scale(0.82); } /* tap 1 */
  33%  { opacity: 1;   transform: scale(1); }    /* release 1 */
  50%  { opacity: 0.5; transform: scale(0.82); } /* tap 2 */
  62%  { opacity: 1;   transform: scale(1); }    /* release 2 */
  100% { opacity: 0;   transform: scale(1); }
}
.ob-step-label {
  font-size: 14px;
  color: var(--ink-body);
  font-weight: 500;
  letter-spacing: -0.2px;
  text-align: center;
  min-height: 1.4em;
  line-height: 1.6;
}
.ob-cta {
  height: 44px;
  padding: 0 var(--s-xl);
  background: var(--ink);
  color: var(--canvas);
  border: none;
  border-radius: var(--r-button);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: transform 80ms ease;
}
.ob-cta:active { transform: scale(0.96); }

/* Empty / loading */
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-xxl);
  text-align: center;
  color: var(--ink-mute);
}
.empty-icon { font-size: 32px; margin-bottom: var(--s-md); }

/* === DEBRIEF === */
.debrief {
  flex: 1;
  padding: var(--s-xl) var(--s-lg);
}
.debrief-hero {
  text-align: center;
  padding: var(--s-xxl) 0;
}
.debrief-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-sm);
}
.debrief-hero-score {
  font-size: 80px;
  font-weight: var(--w-display);
  letter-spacing: -3px;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent-o), #b3cdf0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.debrief-section {
  margin-top: var(--s-xxl);
}
.debrief-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-md);
}
.trap-row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-body);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.trap-row-name { width: 140px; }
.trap-row-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-elevated);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.trap-row-fill {
  height: 100%;
  background: var(--accent-o);
  border-radius: var(--r-pill);
  transition: width 400ms ease;
}
.trap-row-fill.weak { background: var(--accent-x); }
.trap-row-fill.medium { background: var(--accent-trap); }
.trap-row-pct { width: 40px; text-align: right; color: var(--ink); }

.hesitation-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.hesitation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-md);
  background: var(--surface);
  border-radius: var(--r-button);
  box-shadow: var(--card-ring);
  font-size: 14px;
  color: var(--ink-body);
}
.hesitation-item .qid {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Confidence/streak milestones — Hero stripe band */
.milestone-band {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--accent-o) 0%,
    var(--accent-hold) 50%,
    var(--accent-x) 100%
  );
  margin-bottom: var(--s-xl);
  border-radius: var(--r-pill);
}

/* ── PWA 설치 모달 ── */
.xo-pwa-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 64px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: xoPwaFade 0.25s ease;
}
@keyframes xoPwaFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.xo-pwa-popup {
  position: relative;
  width: calc(100% - 40px);
  max-width: 320px;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 28px 24px 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: xoPwaSlide 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes xoPwaSlide {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.xo-pwa-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: var(--r-button);
}
.xo-pwa-close:active { background: var(--hairline-soft); }
.xo-pwa-icon {
  display: block;
  margin: 0 auto 14px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.xo-pwa-title {
  font-size: 1.05em;
  font-weight: var(--w-strong);
  color: var(--ink);
  margin-bottom: 6px;
}
.xo-pwa-desc {
  font-size: 0.85em;
  color: var(--ink-body);
  line-height: 1.55;
  margin-bottom: 18px;
}
.xo-pwa-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.xo-pwa-btn-install {
  padding: 13px;
  border-radius: var(--r-button);
  border: none;
  background: var(--accent-hold);
  color: #07080a;
  font-size: 0.92em;
  font-weight: var(--w-strong);
  cursor: pointer;
  box-shadow: 0 2px 10px var(--accent-hold-soft);
}
.xo-pwa-btn-install:active { transform: translateY(1px); }
.xo-pwa-btn-later {
  padding: 10px;
  border-radius: var(--r-button);
  border: none;
  background: transparent;
  color: var(--ink-mute);
  font-size: 0.8em;
  font-weight: var(--w-body);
  cursor: pointer;
}

/* ── 나의 정보 메뉴 ── */
.me-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 16px 24px;
  overflow-y: auto;
  animation: meOverlayFade 0.2s ease;
}
@keyframes meOverlayFade { from { opacity: 0; } to { opacity: 1; } }
.me-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface-elevated);
  border: none;
  border-radius: var(--r-card);
  padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: meSheetSlide 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.me-sheet-tall { padding-bottom: 8px; }
@keyframes meSheetSlide {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.me-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--r-button);
  cursor: pointer;
}
.me-close:active { background: var(--hairline-soft); }

.me-profile {
  padding: 0 0 16px;
  border-bottom: none;
  margin-bottom: 16px;
}
.me-email {
  font-size: 0.95em;
  color: var(--ink);
  font-weight: var(--w-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}
.me-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.me-plan {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0;
  border: none;
  background: transparent;
}
.me-plan.plan-pro  { color: #3de0a0; }
.me-plan.plan-ox   { color: var(--accent-o); }
.me-plan.plan-free { color: var(--ink-mute); }
.me-expiry {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* 메뉴 항목 = .label.label-trap 차용. 색바는 8px로 조금 더 강조. */
.me-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.me-list .me-label {
  width: 100%;
  height: 32px;
  border: none;
  border-radius: 4px;
  box-shadow: none;
}
.me-list .me-label .label-bar {
  width: 8px;
  opacity: 0.65;
  box-shadow: none;
}
.me-list .me-label:hover {
  background: rgba(var(--c), 0.06);
  color: var(--ink);
}
.me-list .me-label:hover .label-bar { width: 10px; opacity: 0.95; }
.me-list .me-label .label-content {
  width: 100%;
  max-width: none;
  flex: 1;
  font-size: 13px;
  font-weight: var(--w-strong);
  padding: 0 12px;
  justify-content: space-between;
  gap: 10px;
}
.me-list .me-label .me-label-text { flex-shrink: 0; }
.me-list .me-label .label-count {
  margin-left: auto;
  text-align: right;
}
.me-list .me-label .me-label-email {
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--ink-ash);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.me-list .me-label .label-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.me-list .me-label:hover .label-count { color: var(--ink-body); }
.me-status-ok { color: #3de0a0 !important; }

/* 로그아웃 — 흰 바탕 컴팩트 버튼 */
.me-logout {
  display: block;
  margin: 16px auto 0;
  padding: 4px 16px;
  height: 24px;
  background: var(--ink);
  border: none;
  border-radius: 4px;
  color: #07080a;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--w-strong);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.me-logout:hover { background: var(--accent-x); color: #fff; }
.me-logout:active { transform: scale(0.97); }

/* 서브 화면 (오답노트·설치 가이드 공용 헤더) */
.me-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.me-back {
  background: none;
  border: none;
  color: var(--ink-body);
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: var(--r-button);
}
.me-back:active { background: var(--hairline-soft); }
.me-sub-title {
  flex: 1;
  font-weight: var(--w-strong);
  color: var(--ink);
  font-size: 1em;
}
.me-sub-count {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--ink-mute);
}

/* 오답노트 카드 */
.me-wrong-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.me-wrong-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-button);
  padding: 12px 14px;
}
.me-wrong-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.me-wrong-tag {
  font-size: 0.92em;
  color: var(--ink-ash);
}
.me-wrong-choice {
  font-size: 0.88em;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 6px;
  word-break: keep-all;
}
.me-wrong-answer {
  font-family: var(--font-mono);
  font-size: 0.74em;
  color: var(--ink-mute);
}
.me-wrong-answer strong { color: var(--accent-trap); font-weight: 700; }
.me-empty {
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.88em;
  padding: 36px 12px;
  line-height: 1.6;
}

/* 설치 가이드 — 메인앱 ob-a2hs-* 포팅 */
.me-guide-header {
  text-align: center;
  margin-bottom: 18px;
}
.me-guide-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-hold);
  color: #07080a;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(87, 193, 255, 0.3);
}
.me-guide-title {
  font-size: 1em;
  font-weight: var(--w-strong);
  color: var(--ink);
  line-height: 1.4;
}
.me-guide-subtitle {
  font-size: 0.78em;
  color: var(--ink-mute);
  margin-top: 4px;
}
.me-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.me-guide-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-button);
  transition: background .2s;
}
.me-guide-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-hold);
  color: #07080a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.me-guide-step-icon {
  flex-shrink: 0;
  color: var(--accent-hold);
  opacity: 0.8;
  display: inline-flex;
}
.me-guide-step-body {
  flex: 1;
  min-width: 0;
}
.me-guide-step-label {
  font-size: 0.82em;
  font-weight: var(--w-strong);
  color: var(--ink);
  line-height: 1.4;
}
.me-guide-step-desc {
  font-size: 0.72em;
  color: var(--ink-body);
  line-height: 1.5;
  margin-top: 2px;
}
.me-guide-step-desc strong { color: var(--accent-hold); font-weight: var(--w-strong); }
.me-guide-hint {
  font-size: 0.7em;
  color: var(--ink-ash);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 12px;
  opacity: 0.75;
}
.me-guide-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  color: #fbbf24;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.me-guide-btn-install {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  min-height: 48px;
  border-radius: 12px;
  border: none;
  background: var(--accent-hold);
  color: #07080a;
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 10px rgba(87, 193, 255, 0.3);
}
.me-guide-btn-install:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(87, 193, 255, 0.4);
}
.me-guide-btn-install:active { transform: translateY(0); }
.me-guide-btn-secondary {
  display: block;
  width: 100%;
  padding: 12px;
  min-height: 44px;
  border-radius: 12px;
  border: none;
  background: var(--surface-card);
  color: var(--ink-body);
  font-family: inherit;
  font-size: 0.85em;
  font-weight: var(--w-strong);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.me-guide-btn-secondary:hover { background: var(--hairline-soft); color: var(--ink); }
.me-back-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  background: none;
  border: none;
  color: var(--ink-body);
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--r-button);
  cursor: pointer;
}
.me-back-icon:active { background: var(--hairline-soft); }

/* 첫 단계 강조 — 메인앱 ob-a2hs-step-hot 포팅 */
.me-guide-step-hot {
  border-color: rgba(87, 193, 255, 0.55) !important;
  background: rgba(87, 193, 255, 0.08) !important;
  animation: meHotPulse 1.8s ease-in-out infinite;
}
@keyframes meHotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87, 193, 255, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(87, 193, 255, 0); }
}

/* 화살표 말풍선 — 메인앱 ob-a2hs-bubble 포팅 */
.me-overlay-top { align-items: flex-start; padding-top: 80px; }
.me-bubble { z-index: 9700; pointer-events: none; }
.me-bubble-tri path { fill: var(--accent-hold); }
.me-bubble-body {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent-hold);
  color: #07080a;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(87, 193, 255, 0.4);
}
.me-bubble-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.me-bubble-icon svg { display: block; }
.me-guide-text svg {
  display: inline-block;
  vertical-align: -2px;
  margin: 0 2px;
}
.me-bubble-top .me-bubble-tri,
.me-bubble-top .me-bubble-body {
  animation: meBubbleFloatUp 1.4s ease-in-out infinite;
}
.me-bubble-bottom .me-bubble-tri,
.me-bubble-bottom .me-bubble-body {
  animation: meBubbleFloatDown 1.4s ease-in-out infinite;
}
@keyframes meBubbleFloatUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes meBubbleFloatDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* 토스트 */
.me-toast {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--surface-elevated);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 0.88em;
  z-index: 9700;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.me-toast-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== 북마크 버스트: 중앙 팝인 → 유지 → 페이드아웃 ===== */
.bookmark-burst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 200;
  animation: bm-show 1s ease forwards;
}
.bookmark-burst svg {
  width: 68px;
  height: 68px;
}
.bookmark-burst--add svg {
  fill: #f5c542;
  filter: drop-shadow(0 0 14px rgba(245,197,66,0.65));
}
.bookmark-burst--remove svg {
  fill: #888;
  filter: drop-shadow(0 0 6px rgba(140,140,140,0.25));
}
@keyframes bm-show {
  0%   { opacity: 0; transform: scale(0.45); }
  18%  { opacity: 1; transform: scale(1.12); }
  30%  { transform: scale(0.95); }
  42%  { transform: scale(1); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}