/* themes-tokens.css — panel-dev 디자인 시스템 토큰
   docs/19-panel-dev-design-system.md §1 컬러·§3 타이포·§4 간격 일관.
   각 artboard에 .themes-frame 클래스 + (.dark | .light) 모드 토글. */

.themes-frame {
  /* default: dark mode */
  --bg-base: #1a1d23;
  --bg-surface: #21252e;
  --bg-card: #272b35;
  --bg-hover: #2e3340;
  --border: #363b47;
  --text-primary: #e2e6f0;
  --text-secondary: #8b92a5;
  --text-muted: #545c70;
  --accent: #6c8ef5;
  --accent-soft: #2a3356;

  /* 상태/시맨틱 색 (panel-dev §1-3, 테마 무관) */
  --sm-success: #4ade80;
  --sm-success-bg: rgba(22, 163, 74, 0.125);
  --sm-warning: #fb923c;
  --sm-warning-bg: rgba(234, 88, 12, 0.125);
  --sm-error: #f87171;
  --sm-error-bg: rgba(220, 38, 38, 0.125);
  --sm-info: #60a5fa;
  --sm-info-bg: rgba(37, 99, 235, 0.125);
  --sm-purple: #a78bfa;
  --sm-purple-bg: rgba(124, 58, 237, 0.125);
  --sm-newpost: #f59e0b;
  --sm-streak: #f97316;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.themes-frame.light {
  --bg-base: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f0f1f4;
  --border: #e2e4ea;
  --text-primary: #1a1d23;
  --text-secondary: #5a6072;
  --text-muted: #7a8294;
  --accent: #4a6cf7;
  --accent-soft: #eef1fe;
}

/* ─── 공용 골격 ─────────────────────────────────────── */
.themes-frame * { box-sizing: border-box; }
.themes-frame button { font: inherit; cursor: pointer; }

/* TopNavbar — h-14 (56px) */
.tf-nav {
  position: sticky; top: 0; z-index: 50;
  height: 56px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
}
.tf-nav-logo {
  font-size: 15px; font-weight: 500; color: var(--text-primary);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.tf-nav-logo .env { font-size: 11px; color: var(--accent); font-weight: 500; }
.tf-nav-spacer { flex: 1; }
.tf-nav-right { display: flex; align-items: center; gap: 8px; }

.tf-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  transition: color 120ms, border-color 120ms, background 120ms;
}
.tf-icon-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.tf-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
}

/* Sidebar — 220px */
.tf-layout { display: flex; min-height: calc(100% - 56px); }
.tf-side {
  width: 220px; flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 8px 0;
  font-size: 13px;
}
.tf-side-label {
  padding: 8px 16px 4px; font-size: 11px; font-weight: 500;
  color: var(--text-muted); letter-spacing: 0.02em;
}
.tf-side-item {
  display: flex; align-items: center; gap: 10px;
  margin: 0 4px; padding: 8px 12px;
  border-radius: 6px; color: var(--text-secondary);
  transition: color 120ms, background 120ms;
}
.tf-side-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.tf-side-item.active {
  background: var(--accent-soft); color: var(--accent);
}
.tf-side-divider {
  border-top: 1px solid var(--border);
  margin: 8px 4px;
}
.tf-side-dot {
  margin-left: auto;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--sm-newpost);
}

.tf-main {
  flex: 1; min-width: 0;
  padding: 24px 32px;
  background: var(--bg-base);
  overflow: auto;
}

/* Page title */
.tf-h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); }
.tf-h2 { font-size: 17px; font-weight: 500; color: var(--text-primary); }
.tf-h3 { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.tf-sub { font-size: 13px; color: var(--text-secondary); }
.tf-meta { font-size: 11px; color: var(--text-muted); }

/* Card */
.tf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.tf-card.tight { padding: 12px; }
.tf-card.big { padding: 20px; }
.tf-card.hoverable { transition: border-color 120ms; }
.tf-card.hoverable:hover { border-color: var(--accent); }

/* Button */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 400;
  border: 1px solid transparent;
  transition: opacity 120ms, background 120ms, border-color 120ms, color 120ms;
}
.tf-btn.primary { background: var(--accent); color: #fff; }
.tf-btn.secondary { background: var(--bg-hover); border-color: var(--border); color: var(--text-primary); }
.tf-btn.ghost { background: transparent; color: var(--text-secondary); }
.tf-btn.ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.tf-btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 5px; }
.tf-btn.lg { padding: 11px 18px; font-size: 14px; }

/* Badge */
.tf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 400; line-height: 1.4;
  background: var(--bg-hover); color: var(--text-secondary);
}
.tf-badge.accent { background: var(--accent-soft); color: var(--accent); }
.tf-badge.success { color: var(--sm-success); background: var(--sm-success-bg); }
.tf-badge.warning { color: var(--sm-warning); background: var(--sm-warning-bg); }
.tf-badge.error { color: var(--sm-error); background: var(--sm-error-bg); }
.tf-badge.info { color: var(--sm-info); background: var(--sm-info-bg); }
.tf-badge.purple { color: var(--sm-purple); background: var(--sm-purple-bg); }

/* Input */
.tf-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 120ms;
  font-family: inherit;
}
.tf-input:focus { border-color: var(--accent); }
.tf-input::placeholder { color: var(--text-muted); }

/* Progress bar */
.tf-progress { height: 6px; background: var(--bg-hover); border-radius: 999px; overflow: hidden; }
.tf-progress .fill { height: 100%; background: var(--accent); border-radius: inherit;
  transition: width 300ms cubic-bezier(.4,0,.2,1); }
.tf-progress.thin { height: 4px; }

/* Divider */
.tf-divider { border-top: 1px solid var(--border); }

/* Streak ring/flame */
.tf-flame { color: var(--sm-streak); }

/* Utility flex */
.tf-row { display: flex; align-items: center; }
.tf-col { display: flex; flex-direction: column; }
.tf-between { display: flex; align-items: center; justify-content: space-between; }
.tf-grow { flex: 1; }

/* Mask (anonymous) */
.tf-mask-blur { filter: blur(7px) saturate(0.6); user-select: none; }

/* placeholder striped image */
.tf-placeholder {
  background:
    repeating-linear-gradient(45deg, var(--bg-hover) 0 6px, transparent 6px 12px),
    var(--bg-card);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}

/* Skeleton */
@keyframes tf-shimmer { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }
.tf-skel { background: var(--bg-hover); border-radius: 4px; animation: tf-shimmer 1.6s infinite; }

/* SRS button state — 4종 (panel-dev §11-6 확장: HARD/MEDIUM/GOOD/EASY) */
.tf-srs {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary);
  min-width: 90px;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.tf-srs .label { font-size: 12px; font-weight: 500; }
.tf-srs .hint { font-size: 10px; color: var(--text-muted); }
.tf-srs.hard.active { border-color: var(--sm-error); color: var(--sm-error); background: var(--sm-error-bg); }
.tf-srs.medium.active { border-color: var(--sm-warning); color: var(--sm-warning); background: var(--sm-warning-bg); }
.tf-srs.good.active { border-color: var(--sm-success); color: var(--sm-success); background: var(--sm-success-bg); }
.tf-srs.easy.active { border-color: var(--sm-info); color: var(--sm-info); background: var(--sm-info-bg); }

/* ─── Vocab Card 확장 — 회차30·31 신규 4종 (panel-dev §11 확장) ─────────
   web/app/globals.css 실 토큰 원본 SSOT 미러링.
   결정59 회차30 fix-2 (vocab 카드 재디자인 최종 모델):
     - 우상단 비스듬 테이프(.tf-tape) = *담김 단어장명*(녹색 단일, 학년 분기 폐기)
     - ★ 별점(.tf-stars) = 수능+모의 합 ≥3/5/7 (3개 outline+채움)
     - 출처 표 4행(.tf-source-*) = 교과서·모의·수능·빈출, 항상 표시(없으면 "-")
   결정60 회차31 W4 (dead code 3 필드 호버 메타 a안):
     - .tf-card-meta = PC hover/focus 노출 + 모바일 (hover: none) opacity 0.6
   결정60 회차31 W1·W2 (color-mix Safari <16.4 fallback + 라이트 tape AA 대비):
     - rgba()/color-mix() 2회 cascade · 라이트 색 #15803d (대비 6.8:1 AA) override */

/* 우상단 비스듬 마스킹 테이프 — 종이 위 부착감(rotate·종이 결·찢긴 가장자리). */
.tf-tape {
  position: absolute;
  top: 14px;
  right: -18px;
  padding: 4px 26px;
  transform: rotate(8deg);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 4px),
    var(--sm-success-bg);
  /* 라이트 모드 진한 녹색(흰 배경 대비 약 6.8:1 AA Pass). */
  color: #15803d;
  /* fallback: 신형 브라우저는 아래 color-mix가 cascade override. */
  border: 1px solid rgba(22, 163, 74, 0.35);
  border: 1px solid color-mix(in srgb, var(--sm-success) 35%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
  /* 양 끝 찢긴 가장자리 — polygon clip-path(비율 좌표). */
  clip-path: polygon(
    2% 10%, 5% 0%, 12% 12%, 22% 2%, 35% 14%, 50% 0%, 65% 12%, 78% 2%, 88% 14%,
    95% 0%, 98% 12%, 100% 50%, 98% 88%, 95% 100%, 88% 86%, 78% 98%, 65% 88%,
    50% 100%, 35% 86%, 22% 98%, 12% 88%, 5% 100%, 2% 90%, 0% 50%);
  pointer-events: none;
  z-index: 2;
  /* 단어장명이 길어도 한 줄 유지 + max-width로 카드 폭 침범 차단. */
  white-space: nowrap;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* panel-dev는 .themes-frame.light가 라이트 모드 진입자, 실 코드는 .dark가 다크 모드 진입자
   (next-themes pattern). SSOT 미러링 시 라이트 분기는 base에 통합되어 있고 다크 override만 분리. */
.themes-frame:not(.light) .tf-tape,
.dark .tf-tape {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px),
    var(--sm-success-bg);
  /* 다크 모드는 기존 --sm-success(#4ade80) 보존(어두운 카드 위 대비 약 8.5:1 AAA). */
  color: var(--sm-success);
  /* fallback: 신형 브라우저는 아래 color-mix가 cascade override. */
  border-color: rgba(74, 222, 128, 0.45);
  border-color: color-mix(in srgb, var(--sm-success) 45%, transparent);
}

/* ★ 별점 — 3개 outline 기본 + 채움 시각. 수능+모의 합 ≥3 1개 / ≥5 2개 / ≥7 3개. */
.tf-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.5px;
}
.tf-stars > span { color: var(--text-muted); }
.tf-stars > span.filled { color: var(--sm-warning); }

/* "출처" divider — 중앙 라벨 양쪽 1px 라인(시안 ──── 출처 ──── 형식). */
.tf-source-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tf-source-divider::before,
.tf-source-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.tf-source-divider > span { padding: 0 10px; background: var(--bg-card); }

/* 출처 표 — 2x2 grid (결정63 + 64 fix-1). 셀 = [모의·수능 / 교과서·빈출].
   라벨-칩 사이 인접성 확보: display: contents 평탄화 폐기 → 셀 자체를 flex로 묶음.
   .tf-source-grid = 2 cells(1fr 1fr) / .tf-source-row = flex 라벨+칩(gap 8px). */
.tf-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 0;
}
.tf-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 결정64 fix-2 회차32 — 라벨 폭 44px 통일(x 시작점 위아래 일치) + 칩 min-width 36px 통일.
   빈출(.tf-stars)는 .tf-badge가 아니라 무영향(본부장 명시 "빈출은 그대로"). */
.tf-source-label {
  margin: 0;
  width: 44px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.tf-source-chips {
  margin: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}
.tf-source-chips > .tf-badge {
  min-width: 36px;
  justify-content: center;
}

/* 결정60 회차31 W4 → 결정64 회차32 본부장 명시 — 호버 동작 폐기, **상시 표기**로 변경.
   카드 하단 회색 1줄 메타 (모의·수능 시간 추상화만, 교과서 학년 제외 — 출처 표 2x2와 중복 회피).
   aria-hidden 처리 = button aria-label과 분리(보조 정보·중복 읽기 회피). 모든 카드 일관 표시.
   (결정64 fix-3 QA MED-2 — globals.css 주석과 SSOT 정합 미러링.) */
.tf-card-meta {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  pointer-events: none;
}