/*
 * Nabiplay 기본 스타일
 * ------------------------------------------------------------------
 * tokens.css(디자인 토큰, bin/rails design:tokens 로 생성)는
 * app/views/layouts/application.html.erb 에서 이 파일보다 먼저 <link> 로 읽습니다
 * (Propshaft 는 CSS @import 안의 경로를 다시 쓰지 않아서, 배포 시 파일명이 깨지는
 * @import 대신 별도 stylesheet_link_tag 를 씁니다).
 * 색은 전부 var(--…) 로만 씁니다. 새 hex 값을 여기 적지 마세요 — tokens.css 에만 둡니다.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps.
 * 나중에 화면별 CSS 는 별도 파일로 나눠서 이 파일 아래에 추가합니다.
 */

/* ── 리셋 ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-ko);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  /* 한글은 단어(어절) 중간에서 줄바꿈하지 않는다 — 영어·숫자가 길게 이어질 때만 anywhere 로 감싼다.
     h1·h2·h3·.section-head p 처럼 화면 곳곳의 제목·부제·셀 제목이 이 기본값을 그대로 물려받는다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3 {
  font-family: var(--font-family-brand);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

code, kbd, .mono {
  font-family: var(--font-family-mono);
}

img, svg, video {
  max-width: 100%;
  display: block;
}

/* ── 포커스 링 · 터치 크기(docs/planning/05 §4) ───────────────── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  min-height: var(--touch-target-min);
}

button, [role="button"] {
  min-width: var(--touch-target-min);
  cursor: pointer;
}

/* ── 스킵 링크(docs/planning/05 §4) ──────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-background);
  border-radius: var(--radius-card);
  transition: top var(--motion-duration-synced-flap) var(--motion-timing-default);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ── 레이아웃 4종(docs/planning/05-design-system.md 참조 · 06-tasks P0-T0.3) ── */
/* 전체 너비 한 칸 — 공개 화면(탐색·작품 상세 등) */
.layout-full-width {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* 사이드바 + 본문(왼쪽 고정 메뉴) — 관리자 콘솔·포털 */
.layout-sidebar-main {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* 본문 + 사이드바(오른쪽 보조 정보) — 작품 상세·검수 화면 */
.layout-main-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* 대시보드(카드 그리드) — ESG·관리자 대시보드 */
.layout-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  padding: var(--space-6);
}

@media (max-width: 768px) {
  .layout-sidebar-main,
  .layout-main-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ── 폰 폭 공개 화면 공통 하단 고정 "사전 가입"(ESG-HERO-SIGNUP) ─────
   application 레이아웃(공개 화면)에서만 쓴다 — admin·me·portal 레이아웃은 이 컴포넌트를 렌더하지 않는다.
   home.css 의 예전 홈 전용 "탐색하기" 고정 단추(.home-mobile-cta)와 같은 자리·모양이다. */
.prelaunch-mobile-cta {
  display: none;
}

@media (max-width: 640px) {
  /* 하단 고정 단추(safe-area 포함 높이)와 본문이 안 겹치도록 여백을 넉넉히 둔다 */
  body.has-prelaunch-cta {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .prelaunch-mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: var(--space-3) var(--space-4) max(var(--space-6), env(safe-area-inset-bottom));
    background: var(--color-background);
    border-top: 1px solid var(--color-surface);
  }

  .prelaunch-mobile-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    width: 100%;
    border-radius: var(--radius-card);
    background: var(--color-primary-pressed);
    color: var(--color-background);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
  }
}

/* ── 스크린리더 전용(화면엔 안 보이고 음성 안내에만 잡힘) ────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── 공통 컴포넌트(app/components) 골격 스타일 ──────────────────
 * specs/shared/components.yaml 참고. 색은 전부 var(--…) 로만 씁니다.
 */

/* site_header — design/project/Main.dc.html·Explore.dc.html 캔버스 그대로(높이 64 · 메뉴 알약)
   화면 어디서나 스크롤해도 위에 붙어 있도록 sticky — z-index 는 content_popup·esg_company_popup(모달 40) ·
   toast-list(1000) 보다 낮고, 본문(위치값 없는 일반 콘텐츠 · z-index auto)보다는 높은 20 을 쓴다(UI-FIX-3). */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 64px;
  padding: 0 var(--space-16);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--color-surface);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 글자 로고는 글자색(밝은 바탕에서는 잉크, 어두운 바탕에서는 흰색) · 강조색은 심볼에만 */
  color: var(--color-text);
  text-decoration: none;
}

.site-header__logo-mark {
  flex-shrink: 0;
}

/* 글자 로고(워드마크 NABIPLAY · AICON) — 글씨가 아니라 PNG 파일을 마스크로 씌워 글자색(currentColor)으로 칠합니다
   (브랜드 가이드 docs/planning/05 §0.1 · 결정 68). 가로 : 세로 = 9.87 : 1 — 글자 높이 16px → 너비 158px. */
.site-header__wordmark {
  display: inline-block;
  flex-shrink: 0;
  width: 158px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("/assets/brand/wordmark/nabiplay-wordmark-ink-h64-6415b23f.png") no-repeat center / contain;
  mask: url("/assets/brand/wordmark/nabiplay-wordmark-ink-h64-6415b23f.png") no-repeat center / contain;
}

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border: none;
  border-radius: var(--space-3);
  background: transparent;
  color: var(--color-text);
}

.site-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--space-3);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-header__nav a[aria-current="page"] {
  /* 지금 있는 화면 메뉴는 미스트 알약 배경 + 진한 글자(P1-S4-T1 대비 규칙과 같은 결). */
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.site-header__submenu {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__picks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.site-header__login {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-4);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-header__signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.site-header__my-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-3);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-4);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sheet);
  background: var(--color-error);
  color: var(--color-background);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

/* 홈(/) 히어로는 어두운 바탕이라, 그 위에 있는 헤더도 다크 변형입니다(HOME-2).
   site_header 컴포넌트 자체는 손대지 않고, 뒤에 이어지는 main.home-page 유무로만 CSS 에서 고릅니다. */
.site-header:has(~ main.home-page) {
  background: var(--color-background-dark);
  border-bottom-color: var(--color-ink-3);
}

.site-header:has(~ main.home-page) .site-header__logo,
.site-header:has(~ main.home-page) .site-header__nav a,
.site-header:has(~ main.home-page) .site-header__login,
.site-header:has(~ main.home-page) .site-header__my-menu,
.site-header:has(~ main.home-page) .site-header__picks,
.site-header:has(~ main.home-page) .site-header__toggle {
  color: var(--color-ink-muted);
}

.site-header:has(~ main.home-page) .site-header__picks {
  background: var(--color-ink-2);
}

.site-header:has(~ main.home-page) .site-header__nav a[aria-current="page"] {
  background: var(--color-ink-2);
  color: var(--color-background);
}

.site-header:has(~ main.home-page) .site-header__signup {
  background: var(--color-primary-dark);
  color: var(--color-background-dark);
}

/* 모바일: 메뉴는 접혀 있고, 햄버거 버튼을 눌러야 나옵니다 */
@media (max-width: 767px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding: var(--space-2) var(--space-4);
  }

  /* 햄버거는 오른쪽 끝에 둡니다(왼쪽 로고 · 오른쪽 햄버거 — 2026-10-08). */
  .site-header__toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-header__nav {
    flex-basis: 100%;
  }

  /* 단추 묶음([사전 가입] · [로그인] · [고른 작품] · [프로필] 등)은 윗줄에서 빼고,
     햄버거를 눌러 메뉴를 열었을 때만 메뉴 아래 한 줄 폭으로 보여줍니다(2026-10-08).
     전에는 로고 · 햄버거 · 단추가 한 줄에 다 못 들어가 줄이 접히거나 화면 밖으로 밀렸습니다.
     [사전 가입]은 폰 폭 공개 화면마다 아래 고정 단추(.prelaunch-mobile-cta)로도 늘 보입니다. */
  .site-header__actions {
    display: none;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .site-header:has(.site-header__nav:not([hidden])) .site-header__actions {
    display: flex;
  }

  /* 열린 메뉴 안의 [사전 가입] · [회원가입] 단추는 한 줄 폭 전부를 씁니다. */
  .site-header__actions .site-header__signup {
    flex: 1 1 100%;
  }

  .site-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) 0;
  }

  /* 폰의 햄버거 드롭다운: 메뉴 글자를 오른쪽에 맞춥니다(대표 지시 2026-09-22).
     링크(a)는 inline-flex 라 제 폭만 차지하므로, 줄(li)을 flex 로 만들어 오른쪽 끝에 붙입니다. */
  .site-header__nav-item,
  .site-header__nav li {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .site-header__nav a {
    justify-content: flex-end;
    text-align: right;
  }

  .site-header__submenu {
    align-items: flex-end;
  }
}

/* 데스크톱: hidden 속성이 있어도(자바스크립트 꺼짐 대비) 항상 보여줍니다 */
@media (min-width: 768px) {
  .site-header__nav[hidden] {
    display: block;
  }
}

/* site_footer — design/project/Main.dc.html 캔버스대로(위 테두리만, 여백 40/64) */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-16);
  border-top: 1px solid var(--color-surface);
  color: var(--color-text-muted);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer ul a {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-decoration: none;
}

.site-footer__locale select {
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--space-2);
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-caption);
}

.site-footer__locale select option:disabled {
  color: var(--color-text-muted);
}

.site-footer__company {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-caption);
}

.site-footer__brand-mark {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .site-footer {
    padding: var(--space-6) var(--space-4);
  }
}

/* admin_sidebar · portal_nav */
.admin-sidebar,
.portal-nav {
  padding: var(--space-4);
  border-right: 1px solid var(--color-surface);
}

.admin-sidebar__todo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* 숫자 배지만 색을 칠합니다(문장 전체를 칠하면 흰 글자 대비가 모자랍니다) */
.admin-sidebar__todo-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
}

.admin-sidebar__group {
  margin-top: var(--space-4);
}

.admin-sidebar__group-label {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.admin-sidebar ul,
.portal-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-sidebar a[aria-current="page"],
.portal-nav a[aria-current="page"] {
  /* --color-primary 는 흰 배경 대비 3.4(AA 4.5 미달) 라 --color-primary-pressed 로 바꿉니다
     (ADM-18 화면에서 실제로 axe 가 잡아냈다 · P1-S4-T1). */
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.portal-nav__disabled {
  color: var(--color-text-muted);
}

/* status_badge — 색+아이콘+글자 3중(docs/planning/05 §1.2) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  background: color-mix(in srgb, var(--status-badge-color) 16%, var(--color-background));
  /* 글자는 톤 색 그대로 쓰지 않고 본문 글자색과 섞어 대비(AA 4.5:1)를 맞춥니다(라이트·다크 모드 둘 다) */
  color: color-mix(in srgb, var(--status-badge-color) 50%, var(--color-text));
}

.status-badge--success { --status-badge-color: var(--color-status-success); }
.status-badge--progress { --status-badge-color: var(--color-status-progress); }
.status-badge--error { --status-badge-color: var(--color-status-error); }
.status-badge--inactive { --status-badge-color: var(--color-status-inactive); }
/* REV-02(/review/queue) 경과일 8~13일 배지(P3-S9-T1) */
.status-badge--warning { --status-badge-color: var(--color-status-warning); }

/* confirm_modal — <dialog> 네이티브 초점 가둠·Esc 닫힘을 그대로 쓴다 */
.confirm-modal {
  border: none;
  border-radius: var(--radius-sheet);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
}

.confirm-modal::backdrop {
  background: rgba(23, 33, 43, 0.5);
}

.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* "내용을 확인했습니다" 체크박스 — 이걸 눌러야 확인 버튼이 눌립니다(DEC-032) */
.confirm-modal__ack {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* data_table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-surface);
}

/* empty_state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

/* amount_picker */
.amount-picker__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.amount-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.amount-picker__option.is-selected {
  border-color: var(--color-primary);
  /* 글자는 --color-primary(대비 3.4·AA 미달) 대신 더 짙은 --color-primary-pressed 를 써서
     대비(AA 4.5:1)를 맞춥니다 — 테두리는 UI 컴포넌트라 3:1 만 있어도 되니 그대로 둡니다(P1-S4-T1). */
  color: var(--color-primary-pressed);
}

/* upload_guide_box */
.upload-guide-box {
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.upload-guide-box__segments {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.upload-guide-box__segments li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius-card);
}

/* pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pagination__prev,
.pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--space-3);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.pagination__prev[aria-disabled="true"],
.pagination__next[aria-disabled="true"] {
  color: var(--color-text-muted);
  pointer-events: none;
}

.pagination__pages {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--space-3);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.pagination__page.is-current {
  background: var(--color-text);
  color: var(--color-background);
}

/* search_filter_bar */
.search-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.search-filter-bar__categories {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-filter-bar__categories a[aria-current="true"] {
  font-weight: var(--font-weight-bold);
  /* --color-primary 는 흰 배경 대비 3.4(AA 4.5 미달) 라 --color-primary-pressed 로 바꿉니다(P1-S4-T1). */
  color: var(--color-primary-pressed);
}

/* status_timeline */
.status-timeline {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-timeline__step {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-surface);
  color: var(--color-text-muted);
}

.status-timeline__step--done {
  border-left-color: var(--color-status-success);
  color: var(--color-text);
}

.status-timeline__step--current {
  border-left-color: var(--color-status-progress);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* file_dropzone */
.file-dropzone__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 120px;
  padding: var(--space-6);
  border: 2px dashed var(--color-text-muted);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.file-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ── toast(flash) — P1-S0-T1 ─────────────────────────────────── */
.toast-list {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-background);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.toast__dismiss {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-title-md);
  line-height: 1;
}

/* ── role_cards(WEB-11 /me) — P1-S0-T1 뼈대 · P1-S2-T1 완성 ──── */
.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-cards li {
  list-style: none;
}

.role-cards__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-decoration: none;
}

.role-cards__card:hover,
.role-cards__card:focus-visible {
  border-color: var(--color-primary);
}

.role-cards__card--disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.role-cards__icon {
  flex: 0 0 auto;
  font-size: var(--font-size-title-md);
  line-height: 1;
}

.role-cards__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
}

.role-cards__label {
  font-weight: var(--font-weight-bold);
}

.role-cards__description {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ── /me 허브 환영 절 — P1-S2-T1 ──────────────────────────────── */
.me-hub__welcome {
  margin-bottom: var(--space-6);
}

.me-hub__welcome-meta {
  color: var(--color-text-muted);
}

.me-hub__cards-desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ── WEB-13(/me/settings · /me/notifications · /me/invite) — P1-S3-T1 ───── */
.me-tabs ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border-bottom: 1px solid var(--color-surface);
}

.me-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

/* 글자는 --color-primary 대신 기본 글자색을 쓴다(굵기 3.4:1 로 AA 4.5:1 에 못 미쳐서 —
   site-header__nav 의 같은 문제와 같은 원인, 토큰 자체를 고치는 일은 이 태스크 범위가 아니다).
   대신 굵기 + 밑줄(테두리)만으로 "지금 탭"을 알린다. */
.me-tabs a[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  border-bottom-color: var(--color-primary);
}

.me-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sheet);
  background: var(--color-primary);
  color: var(--color-background);
  font-size: var(--font-size-caption);
}

.me-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.settings-form__section {
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.settings-form__status {
  display: block;
  min-height: var(--space-6);
  color: var(--color-status-progress);
  font-weight: var(--font-weight-medium);
}

.settings-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.settings-form__row .form-field {
  flex: 1 1 240px;
}

.settings-form__field {
  margin: var(--space-4) 0;
  padding: 0;
  border: none;
}

.settings-form__checkbox-group,
.settings-form__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.settings-form__checkbox,
.settings-form__radio,
.settings-form__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
}

.settings-form__toggle {
  margin: var(--space-4) 0;
}

.settings-form__radio.is-disabled {
  color: var(--color-text-muted);
}

.notification-inbox__count {
  color: var(--color-text-muted);
}

.notification-inbox__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-inbox__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3);
  border: none;
  border-bottom: 1px solid var(--color-surface);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.notification-inbox__item.is-unread .notification-inbox__row {
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
}

.notification-inbox__title {
  flex: 1 1 auto;
}

.notification-inbox__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.invites-section__link-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.invites-section__link-row input {
  flex: 1 1 auto;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  font-family: var(--font-family-mono);
}

.invites-section__use-count {
  color: var(--color-text-muted);
}

.invites-section__qr svg {
  width: 160px;
  height: 160px;
}

/* ── layouts/me · layouts/portal · layouts/admin — P1-S0-T1 ──── */
.me-layout__back {
  padding: var(--space-2) var(--space-4);
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-surface);
}

/* ── /dev/design-system 레이아웃 4종 미리보기(순전히 도식, aria-hidden) ── */
.layout-preview {
  margin-top: var(--space-2);
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.layout-preview__row {
  display: flex;
}

.layout-preview__box {
  flex: 1;
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-align: center;
}

.layout-preview__box--aside {
  flex: 0 0 30%;
  background: var(--color-surface);
}

/* ── WEB-10 로그인·가입(/login · /signup) — P1-S1-T1 · 2026-09-27 모던 개편 ──── */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 160px);
  padding: var(--space-12) var(--space-4);
  background: linear-gradient(180deg, var(--color-indigo-50) 0%, var(--color-background) 60%);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sheet);
  background: var(--color-background);
  box-shadow: var(--shadow-lg);
}

.auth-card__title {
  margin: 0;
  font-size: var(--font-size-title-md);
  letter-spacing: -0.02em;
}

.auth-card__subtitle {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.auth-card__error {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--tint-4);
  color: var(--color-status-error);
}

.auth-card__error li {
  list-style: none;
}

.auth-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.auth-card__divider::before,
.auth-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.auth-card__footer {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.auth-card__footer a {
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.google-button__form {
  width: 100%;
}

.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.google-button:hover {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label,
.otp-input__label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="tel"] {
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-background);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-indigo-100);
}

.form-field__hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.form-field__hint.is-valid {
  color: var(--color-status-success);
}

.form-field__hint.is-invalid {
  color: var(--color-status-error);
}

.auth-form__email-row {
  display: flex;
  gap: var(--space-2);
}

.auth-form__email-row input {
  flex: 1;
  min-width: 0;
}

.auth-form__resend,
.auth-form__submit {
  border: 0;
  border-radius: var(--radius-card);
  font: inherit;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.auth-form__resend {
  min-height: 52px;
  padding: 0 var(--space-4);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
}

.auth-form__resend:hover:not(:disabled) {
  background: var(--color-indigo-100);
}

.auth-form__resend:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-form__submit {
  min-height: var(--button-height);
  width: 100%;
  margin-top: var(--space-2);
  /* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색(더 짙은 인디고)을 쓴다 */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  box-shadow: var(--shadow-md);
}

.auth-form__submit:hover {
  background: var(--color-indigo-900);
}

/* 폰에서는 바깥 여백 · 카드 안쪽 여백을 줄여 이메일 칸이 좁아지지 않게 합니다. */
@media (max-width: 480px) {
  .auth-page {
    padding: var(--space-6) var(--space-3);
  }

  .auth-card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-card);
  }

  .auth-form__resend {
    padding: 0 var(--space-3);
  }
}

/* ── otp_code_input — 칸 하나(붙여넣기) · 2026-09-27 ────────────── */
.otp-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.otp-input__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.auth-form .otp-input__field,
.otp-input__field {
  width: 100%;
  min-height: 60px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5em;
  text-align: center;
}

.otp-input__field::placeholder {
  color: var(--color-status-inactive);
  letter-spacing: 0.5em;
}

.otp-input__field:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-background);
  box-shadow: 0 0 0 3px var(--color-indigo-100);
}

.otp-input__hint {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ── signup_form 개인/기업 — P1-S1-T1 ─────────────────────────── */
.signup-form__type {
  border: none;
  padding: 0;
  margin: 0;
}

.signup-form__type-card {
  display: inline-flex;
  flex-direction: column;
  width: calc(50% - var(--space-1));
  padding: var(--space-3);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.signup-form__type-input:checked + .signup-form__type-card {
  border-color: var(--color-primary);
}

.signup-form__type-hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.signup-form__corporate-fields {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

#signup-account-type-corporate:checked ~ .signup-form__corporate-fields {
  display: flex;
}

/* 개인(일반회원) 휴대폰 본인인증 칸 — 기업을 고르면 숨깁니다(결정 ㊾). */
#signup-account-type-corporate:checked ~ .signup-form__personal-fields {
  display: none;
}

.identity-verify {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.identity-verify__label {
  margin: 0;
  font-weight: 700;
}

.identity-verify__hint,
.signup-form__invite {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.identity-verify__status {
  margin: 0;
  font-weight: 600;
}

.identity-verify__error {
  margin: 0;
  color: var(--color-error);
}

.signup-form__corporate-note {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.signup-form__consents {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.signup-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.signup-form__agreement {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ── /dev/demo/phase-1/s1-web-10 미리보기(개발·테스트 전용) ──── */
.dev-demo__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dev-demo__state-label {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

/* ── ADM-23 감사 로그(/admin/audit · P2-S15-T1) ──────────────── */
.audit-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.audit-filter-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-caption);
}

.audit-filter-form__actions {
  display: flex;
  gap: var(--space-2);
}

.audit-view-toggle__buttons {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.audit-view-toggle__buttons button[aria-pressed="true"] {
  font-weight: var(--font-weight-bold);
  /* --color-primary 는 흰 배경 대비가 낮아(AA 4.5 미달) --color-primary-pressed 로 맞춥니다(P1-S4-T1 과 동일). */
  color: var(--color-primary-pressed);
  border-color: var(--color-primary-pressed);
}

.audit-table-wrapper {
  overflow-x: auto;
}

/* 원래 코드값(action·actor 문자열) — 사람이 읽는 라벨 옆에 작게 같이 보여줍니다 */
.audit-table__code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.audit-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.audit-timeline__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-surface);
}

.audit-timeline__time {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.audit-timeline__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.audit-detail-modal {
  border: none;
  border-radius: var(--radius-sheet);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  max-width: 720px;
  width: 100%;
}

.audit-detail-modal::backdrop {
  background: rgba(23, 33, 43, 0.5);
}

.audit-detail-modal__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}

.audit-detail-modal__meta dt {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.audit-detail-modal__diff {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.audit-detail-modal__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.audit-detail-modal__json {
  width: 100%;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  white-space: pre;
  resize: vertical;
}

.audit-detail-modal__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* poster_card — 탐색·홈·팝업·상세가 함께 쓰는 공용 카드(shared_components)
   design/project/Foundations.dc.html "작품 카드" 그대로: 포스터 3:4 · 제목 · 갈래 · 알약 3개. */
.poster-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-text);
  text-decoration: none;
}

.poster-card:hover .poster-card__title,
.poster-card:focus-visible .poster-card__title {
  color: var(--color-primary-pressed);
}

.poster-card__thumb {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface);
}

.poster-card--compact .poster-card__thumb {
  aspect-ratio: 16 / 9;
}

.poster-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 실제 포스터 이미지가 없을 때 — 카드 순서대로 tint-1~8 을 돌려 쓴다 */
.poster-card__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: var(--space-3);
  background: var(--tint-1);
}

.poster-card__placeholder-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.poster-card__placeholder-title {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.explore-grid li:nth-child(8n+2) .poster-card__placeholder,
.home-track__list li:nth-child(8n+2) .poster-card__placeholder { background: var(--tint-2); }
.explore-grid li:nth-child(8n+3) .poster-card__placeholder,
.home-track__list li:nth-child(8n+3) .poster-card__placeholder { background: var(--tint-3); }
.explore-grid li:nth-child(8n+4) .poster-card__placeholder,
.home-track__list li:nth-child(8n+4) .poster-card__placeholder { background: var(--tint-4); }
.explore-grid li:nth-child(8n+5) .poster-card__placeholder,
.home-track__list li:nth-child(8n+5) .poster-card__placeholder { background: var(--tint-5); }
.explore-grid li:nth-child(8n+6) .poster-card__placeholder,
.home-track__list li:nth-child(8n+6) .poster-card__placeholder { background: var(--tint-6); }
.explore-grid li:nth-child(8n+7) .poster-card__placeholder,
.home-track__list li:nth-child(8n+7) .poster-card__placeholder { background: var(--tint-7); }
.explore-grid li:nth-child(8n) .poster-card__placeholder,
.home-track__list li:nth-child(8n) .poster-card__placeholder { background: var(--tint-8); }

.poster-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poster-card__title {
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.poster-card__category {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.poster-card__badge,
.poster-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
}

.poster-card__badge--paid {
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
}

.poster-card__badge--free {
  background: var(--color-surface);
  color: var(--color-text);
}

.poster-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* content-request — 수어통역 요청 단추 한 덩어리(P2-R4-T1 이 만든 마크업, 꾸미기는 여기서) */
.content-request {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

/* --color-primary 토큰 위 흰 글자는 옛 틸 때 3.4:1 이라 눌림 색을 쓰기로 했습니다(인디고로 바꾼 뒤에도 같은 규칙).
   더 짙은 --color-primary-pressed 를 기본값으로 써서 대비를 맞춥니다(axe color-contrast). */
.content-request__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.content-request__button:hover {
  background: var(--color-indigo-900);
}

.content-request__button--done {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-status-success);
}

.content-request__count {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* content_detail(WEB-02) — /contents/:id 전체 페이지(SEO·공유용). 팝업(content-popup__*) 컴포넌트를
   그대로 재사용하므로 여긴 감싸는 뼈대 · 큰 QR · 공유 단추만 둡니다. */
.content-detail {
  padding: var(--space-6) 0 var(--space-12);
}

.content-detail__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.content-detail__back {
  color: var(--color-text-muted);
  text-decoration: none;
}

.content-detail__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .content-detail__body {
    grid-template-columns: 5fr 7fr;
  }
}

.content-detail__title {
  margin: var(--space-3) 0 0;
}

.content-detail__qr-card {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
}

/* 공유 단추 · 토스트 */
.content-detail__share {
  position: relative;
}

.content-detail__share-button {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 2px solid var(--color-primary-pressed);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.content-detail__toast {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 10;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-text);
  color: var(--color-background);
  font-size: var(--font-size-caption);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--motion-duration-synced-flap) var(--motion-timing-default);
}

.content-detail__toast.is-visible {
  visibility: visible;
  opacity: 1;
}

/* 큰 QR(app으로 시청하기) */
.content-detail__qr-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.content-detail__qr-image {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--color-background);
}

.content-detail__qr-image svg {
  width: 100%;
  height: 100%;
}

.content-detail__qr-info {
  flex: 1;
  min-width: 220px;
}

.content-detail__qr-instruction {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-bold);
}

.content-detail__qr-code {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-primary-pressed);
}

.content-detail__qr-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.content-detail__qr-refresh {
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* 통역 영상 선택 · 결제 · 앱 시청 안내(WEB-14) — P2-S8-T1 */
.watch-select {
  padding: var(--space-6) 0 var(--space-12);
}

.watch-select__breadcrumb {
  margin: 0 0 var(--space-2);
}

.watch-select__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.watch-select__title {
  margin: 0 0 var(--space-2);
}

.watch-select__subtitle {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

.watch-select__layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .watch-select__layout {
    grid-template-columns: 7fr 5fr;
  }
}

/* 비교 테이블 */
.watch-select__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}

.watch-select__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.watch-select__table th,
.watch-select__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-surface);
  text-align: left;
  vertical-align: middle;
}

.watch-select__table thead th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.watch-select__row.is-purchased {
  background: var(--color-indigo-50);
}

.watch-select__cell-interpreter {
  font-weight: var(--font-weight-bold);
}

.watch-select__sample-link {
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.watch-select__select-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.watch-select__radio {
  display: inline-flex;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.watch-select__radio input {
  width: 22px;
  height: 22px;
  accent-color: var(--color-primary);
}

/* 결제 패널(오른쪽 고정) */
.watch-select__panel {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-sheet);
  background: var(--color-background);
  box-shadow: var(--shadow-md);
}

.watch-select__panel-header h2 {
  margin: 0;
}

.watch-select__panel-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.watch-select__panel-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.watch-select__panel-price strong {
  color: var(--color-primary-pressed);
  font-size: var(--font-size-title-md);
}

.watch-select__panel-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.watch-select__buy-button {
  min-height: var(--button-height);
  border: none;
  border-radius: var(--radius-card);
  /* 굵은 글자 17px 는 "큰 글자" 기준(14pt bold)에 못 미쳐 흰 글자와 4.5:1 이 필요합니다.
     --color-primary 는 흰 글자와 3.4:1 이라 더 짙은 --color-primary-pressed 를 씁니다. */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.watch-select__buy-button:disabled {
  cursor: progress;
  opacity: 0.6;
}

.watch-select__purchased-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.watch-select__app-link {
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.watch-select__error {
  margin: 0;
  color: var(--color-error);
  font-size: var(--font-size-caption);
}

/* 무료 작품 안내 */
.watch-select__free {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-sheet);
  background: var(--color-indigo-50);
}

.watch-select__free-icon {
  font-size: 28px;
}

/* 무료 작품 영상 선택 */
.watch-select__video-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  border: none;
}

.watch-select__video-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  cursor: pointer;
}

/* 빈 상태 */
.watch-select__empty {
  padding: var(--space-8);
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
  text-align: center;
}

/* 앱 시청 안내(QR) */
.watch-select__qr-section {
  margin-top: var(--space-8);
}

.watch-select__qr-block[hidden] {
  display: none;
}

.watch-select__qr-block-title {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-bold);
}

/* ── ADM-00 관리자 홈(오늘 할 일 카드·빠른 액션·시스템 상태) ─────────────────
   색은 --color-status-* 4색만 씁니다(설계 시스템에 "주황" 토큰이 따로 없어서,
   높음(high) 등급도 error 톤을 씁니다 — 아이콘·글자로 한 번 더 구분합니다 · DEC-018). */
.admin-home-welcome {
  grid-column: 1 / -1;
}

.admin-home-welcome__time,
.admin-home-welcome__generated {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-home-welcome__refresh {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.admin-todo-grid,
.admin-quick-actions,
.admin-system-status {
  grid-column: 1 / -1;
}

.admin-todo-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-2) 0 var(--space-6);
  padding: 0;
}

.admin-todo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-surface);
  border-left: 4px solid var(--color-status-inactive);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}

.admin-todo-card--urgent {
  border-left-color: var(--color-status-error);
}

/* 높음(주황) 등급 — error 톤을 옅게 섞어 긴급(빨강)과 색조를 구분합니다(토큰은 그대로 error 만 씁니다). */
.admin-todo-card--high {
  border-left-color: color-mix(in srgb, var(--color-status-error) 55%, var(--color-background));
}

.admin-todo-card--info {
  border-left-color: var(--color-status-progress);
}

.admin-todo-card--neutral {
  border-left-color: var(--color-status-inactive);
}

.admin-todo-card--done {
  border-left-color: var(--color-status-success);
}

.admin-todo-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
}

.admin-todo-card__link[aria-disabled="true"] {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.admin-todo-card__count {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
}

.admin-todo-card__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-quick-actions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-2) 0 var(--space-6);
  padding: 0;
}

.admin-quick-actions__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-card);
  /* --color-primary 는 흰 글자 대비 3.4(AA 4.5 미달) 라 --color-primary-pressed 로 바꿉니다(admin_sidebar 와 같은 규칙). */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.admin-quick-actions__button.is-disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.admin-system-status dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-2) 0;
}

.admin-system-status dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-system-status dd {
  margin: 0;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
}

/* me-list — WEB-12 내 작품 목록·요청·구매·평가 4탭(P2-S7-T1) */
.me-list-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-surface);
  margin-bottom: var(--space-4);
}

.me-list-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.me-list-tabs__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.me-list-tabs__count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
}

.me-list-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-list-library__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.me-list-library__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* --color-error 토큰(코랄)은 흰 배경 위 글자로 쓰면 3.68:1 이라 WCAG AA(4.5:1)에 못 미칩니다.
   더 짙게 섞은 색을 글자에 써서 대비를 맞춥니다(axe color-contrast · content-request__button 과 같은 방식). */
.me-list-library__remove {
  min-height: var(--touch-target-min);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  background: var(--color-background);
  /* 오류색에 글자색을 섞어 대비를 높입니다(밝은 바탕에서는 짙게, 어두운 바탕에서는 밝게 · 검정을 섞으면 어두운 테마에서 안 보입니다). */
  color: color-mix(in srgb, var(--color-error) 70%, var(--color-text));
}

.me-list-requests,
.me-list-purchases,
.me-list-ratings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-list-requests__row,
.me-list-purchases__row,
.me-list-ratings__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.me-list-ratings__view,
.me-list-ratings__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.me-list-ratings__error {
  color: var(--color-error);
  width: 100%;
}

/* 1분 샘플 재생 페이지(WEB-04) — P2-S5-T1 */
.content-sample {
  padding: var(--space-6) 0 var(--space-12);
}

.content-sample__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.content-sample__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.content-sample__title {
  margin: 0 0 var(--space-4);
}

.content-sample__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.content-sample__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.content-sample__tab.is-selected {
  border-color: var(--color-primary);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.content-sample__security {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.content-sample__player {
  margin: 0 0 var(--space-6);
}

.content-sample__missing {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

.content-sample__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.content-sample__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.content-sample__back-link {
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* 재생기(VideoPlayerComponent) — 여러 화면이 함께 씁니다 */
.video-player {
  position: relative;
}

.video-player video {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--color-background-dark);
}

.video-player__error {
  margin: var(--space-2) 0 0;
}

/* 통역사 정보 카드(Sample::InterpreterInfoComponent) */
.sample-interpreter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.sample-interpreter__name {
  margin: 0 0 var(--space-1);
}

.sample-interpreter__approval {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.sample-interpreter__stats {
  display: flex;
  gap: var(--space-6);
  margin: 0;
}

.sample-interpreter__stat dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.sample-interpreter__stat dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

/* 액션(Sample::ActionButtonsComponent) */
.sample-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.sample-actions__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.sample-actions__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-6);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* ── INT-00 통역사 포털 공개 페이지(/interpreters) — P3-S1-T1 ──────── */
.interpreters-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-6);
}

.interpreters-hero__title {
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-bold);
}

.interpreters-hero__description {
  color: var(--color-text-muted);
  max-width: 40rem;
}

.interpreters-stats {
  margin-bottom: var(--space-8);
}

.interpreters-stats__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  font-weight: var(--font-weight-bold);
}

.interpreters-stats__separator {
  color: var(--color-text-muted);
}

.interpreters-works {
  margin-bottom: var(--space-8);
}

.interpreters-works__heading {
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.interpreters-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .interpreters-works__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .interpreters-works__grid {
    grid-template-columns: 1fr;
  }
}

.interpreters-works__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* JS(interpreter_portal_controller)가 관찰을 시작하기 전에만 붙이는 자리 — 자바스크립트가
   꺼져 있으면 이 클래스는 절대 붙지 않아서 카드는 항상 다 보인다(진행 향상용 꾸밈일 뿐). */
.interpreters-works__card--pending {
  opacity: 0;
  transform: translateY(12px);
}

.interpreters-works__thumb {
  aspect-ratio: 2 / 3;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.interpreters-works__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interpreters-works__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.interpreters-works__title {
  font-weight: var(--font-weight-bold);
}

.interpreters-works__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.interpreters-works__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sheet);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.interpreters-works__no-video {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.interpreters-cta {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.interpreters-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--space-8);
  border-radius: var(--radius-card);
  /* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색(더 짙은 인디고)을 쓴다 */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.interpreters-faq {
  margin-bottom: var(--space-8);
}

.interpreters-faq__heading {
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.interpreters-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.interpreters-faq__item dt {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.interpreters-faq__item dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* @TASK P3-S13-T1 - REV-06 구성원 관리(/review/members) */
.review-members {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.review-members__main {
  flex: 1;
  min-width: 0;
}

.review-members-header__meta {
  color: var(--color-text-muted);
}

.permission-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

.review-invite-section {
  margin-bottom: var(--space-8);
}

.review-invite-form__roles {
  display: flex;
  gap: var(--space-4);
  border: 0;
  padding: 0;
  margin: var(--space-2) 0;
}

.review-members-table-wrapper {
  overflow-x: auto;
}

.review-members-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.review-members-side-panel {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* @TASK P3-S2-T1 - INT-01 통역사 신청 화면(/me/interpreter/apply) */
.interpreter-apply__status {
  margin-bottom: var(--space-4);
}

.interpreter-apply__errors {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-status-error);
}

.interpreter-apply__errors li {
  list-style: none;
}

.interpreter-apply__note {
  padding: var(--space-3);
  margin: var(--space-4) 0;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.interpreter-apply__rejected,
.interpreter-apply__approved {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.interpreter-apply__review-note,
.interpreter-apply__pending-note,
.interpreter-apply__certificate-current {
  color: var(--color-text-muted);
}

.interpreter-apply__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.interpreter-apply__form.is-hidden {
  display: none;
}

/* @TASK P3-S7-T1 - INT-06 통역사 프로필 · 계좌 · 자격증 화면(/me/interpreter) */
.interpreter-profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.interpreter-profile__status {
  margin-bottom: var(--space-2);
}

.interpreter-profile__errors {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-status-error);
}

.interpreter-profile__errors li {
  list-style: none;
}

.interpreter-profile__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.interpreter-profile__section {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.interpreter-profile__notice,
.interpreter-profile__bank-current {
  color: var(--color-text-muted);
}

.interpreter-profile__certificate-current {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* display:flex 는 [hidden] 기본 스타일(브라우저 기본 display:none)보다 우선하므로 따로 덮어써야 한다 */
.interpreter-profile__certificate-current[hidden] {
  display: none;
}

.interpreter-profile__review-note {
  border-left: 4px solid var(--color-status-progress);
}

/* @TASK P3-S3-T1 - INT-02 제작 가능 작품 목록 · 제작 신청(/work) */
.work-concurrent-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.work-concurrent-notice--ok {
  border-left: 4px solid var(--color-status-success);
}

/* 토큰에 주황은 없어서 경고 색으로 --color-secondary(폴렌 옐로우)를 쓴다.
   색만으로 말하지 않도록 아이콘("!")과 글자를 항상 함께 둔다. */
.work-concurrent-notice--limit {
  border-left: 4px solid var(--color-secondary);
}

.work-concurrent-notice__icon {
  font-weight: var(--font-weight-bold);
}

.work-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.work-filters__tabs,
.work-filters__sort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-filters__tab,
.work-filters__sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
}

/* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색(더 짙은 인디고)을 쓴다
   (다른 화면과 같은 규칙 · P1-S4-T1). */
.work-filters__tab[aria-current="true"],
.work-filters__sort-link[aria-current="true"] {
  background: var(--color-primary-pressed);
  color: var(--color-background);
}

.work-table {
  width: 100%;
  border-collapse: collapse;
}

.work-table th,
.work-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-surface);
  text-align: left;
}

.work-card__poster-image {
  width: 64px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.work-card__poster-placeholder {
  display: block;
  width: 64px;
  height: 96px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.work-card__origin-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-card);
  background: var(--color-indigo-50);
  color: var(--color-indigo-700);
  font-size: var(--font-size-caption);
}

.work-card__paid-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.work-card__payout {
  position: relative;
}

.work-card__payout-amount {
  border-bottom: 1px dotted var(--color-text-muted);
  cursor: help;
}

/* 툴팁 — 평소엔 숨기고, 포커스·마우스 오버일 때만 보인다(키보드로도 닿을 수 있게 tabindex 를 둔다). */
.work-card__payout-tooltip {
  position: absolute;
  z-index: 1;
  max-width: 260px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-text);
  color: var(--color-background);
  font-size: var(--font-size-caption);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--motion-duration-synced-flap) var(--motion-timing-default);
}

.work-card__payout-amount:hover + .work-card__payout-tooltip,
.work-card__payout-amount:focus + .work-card__payout-tooltip {
  visibility: visible;
  opacity: 1;
}

.work-card__apply-button {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  /* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색을 쓴다. */
  background: var(--color-primary-pressed);
  color: var(--color-background);
}

.work-card__apply-button:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.work-note {
  color: var(--color-text-muted);
}

/* ── REV-03 검수 화면(P3-S10-T1) ──────────────────────────────── */
.video-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.video-review__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.video-review__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.video-review__tabs {
  display: flex;
  gap: var(--space-2);
}

.video-review__tab {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.video-review__tab.is-selected {
  background: var(--color-primary-pressed);
  color: var(--color-background);
}

.video-review__segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.video-review__segment {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-indigo-50);
  color: var(--color-indigo-700);
  text-align: left;
}

.video-review__segment-label {
  display: block;
  font-weight: var(--font-weight-bold);
}

.video-review__segment-range {
  display: block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
}

.video-review__checklist-item {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.video-review__comments {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.video-review__comment-item {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}

/* 처리(resolved)된 코멘트는 연한색으로 뒤로 물러난다(specs/screens/rev-03 timecode_comment_section). */
.video-review__comment-item.is-resolved {
  opacity: 0.6;
  background: var(--color-surface);
}

.video-review__comment-jump {
  min-height: var(--touch-target-min);
  font-family: var(--font-family-mono);
  color: var(--color-primary-pressed);
  background: none;
  border: none;
}

.video-review__comment-version,
.video-review__comment-reason,
.video-review__comment-author {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.video-review__comment-delete {
  min-height: var(--touch-target-min);
  color: var(--color-error);
  background: none;
  border: none;
}

/* @TASK P3-S9-T1 - REV-02 승인 요청 목록(/review/queue) — review-members 짜임과 같습니다. */
.review-queue {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.review-queue__main {
  flex: 1;
  min-width: 0;
}

.review-queue-header__meta {
  color: var(--color-text-muted);
}

.review-queue-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin-bottom: var(--space-6);
}

.review-queue-table-wrapper {
  overflow-x: auto;
}

.review-queue-table__poster-image {
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-card);
  vertical-align: middle;
  margin-right: var(--space-2);
}

.review-queue-table__title {
  cursor: pointer;
}

/* 예고 행(다른 검수자가 이미 진행 중) — 색만으로 가르지 않고 옅은 배경으로도 구분한다. */
tr.review-queue-row--taken {
  background: var(--color-surface);
}

.review-queue-side-panel {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* @TASK P3-S4-T1 - INT-03 내 작업 목록·타임라인(/work/mine) */
.mine-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.mine-card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mine-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mine-card__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mine-card__category {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.mine-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 기한(info_due_date)은 색만으로 말하지 않도록 status_badge(색+아이콘+글자)를 그대로 재사용합니다. */

.mine-card__review-body,
.mine-card__payout {
  color: var(--color-text-muted);
}

.mine-card__payout-amount {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-right: var(--space-2);
}

/* 반려 코멘트 열기 단추 — status-badge 색+대비 규칙을 그대로 쓰고, 단추 기본 테두리만 지웁니다. */
.mine-card__rejections-toggle {
  border: none;
  cursor: pointer;
  min-height: var(--touch-target-min);
}

.mine-card__rejections-panel {
  margin-top: var(--space-2);
}

.mine-card__actions {
  display: flex;
  justify-content: flex-end;
}

/* 작업 QR(결정 56) — 통역사 앱으로 찍으면 PC 에서 작품이 열림 */
.mine-card__work-qr {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-surface);
}

.mine-card__work-qr-image img {
  width: 132px;
  height: 132px;
  display: block;
}

.mine-card__work-qr-text p {
  margin: 0 0 4px;
  line-height: 1.5;
}

.mine-card__work-qr-title {
  font-weight: 700;
}

.mine-card__work-qr-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.mine-card__open-button {
  display: inline-flex;
  min-height: var(--touch-target-min);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
}

.mine-card__open-button--disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* 수평 타임라인(9단계) — 현재 강조 · 과거 회색 · 미래 희미 */
.assignment-timeline {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.assignment-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 72px;
  text-align: center;
}

.assignment-timeline__marker {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: 50%;
  border: 1px solid var(--color-surface);
  background: var(--color-background);
  color: var(--color-text-muted);
}

.assignment-timeline__step--past .assignment-timeline__marker {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.assignment-timeline__step--current .assignment-timeline__marker {
  background: var(--color-primary-pressed);
  color: var(--color-background);
  border-color: var(--color-primary-pressed);
}

.assignment-timeline__step--current .assignment-timeline__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* 미래 단계는 옅은 점선 테두리로만 구분합니다(글자·숫자에 opacity 를 쓰면 AA 대비가 깨집니다). */
.assignment-timeline__step--future .assignment-timeline__marker {
  border-style: dashed;
}

.assignment-timeline__label {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.assignment-timeline__tip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-text);
  color: var(--color-background);
  font-size: var(--font-size-caption);
  white-space: nowrap;
  z-index: 1;
}

/* INT-05 보수 · 수익 현황(/work/earnings) — P3-S6-T1 */
.earnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.earnings__section {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.earnings__stat-card {
  background: var(--color-indigo-50);
  border-color: var(--color-indigo-100);
}

.earnings__stat {
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.earnings__note,
.earnings__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.earnings__edit-bank {
  display: inline-flex;
  align-self: flex-start;
  min-height: var(--touch-target-min);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
}

.earnings__detail-toggle {
  min-height: var(--touch-target-min);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-text);
}

.earnings__detail-row td {
  background: var(--color-surface);
}

/* payout_summary(제작 보수 지급예정 · 지급완료 탭) */
.payout-summary__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-surface);
  margin-bottom: var(--space-4);
}

.payout-summary__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.payout-summary__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

/* ADM-05(/admin/productions) — 5탭 · 예산 검토 카드(P3-S15-T1) */
.admin-productions-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-surface);
  margin-bottom: var(--space-4);
}

.admin-productions-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.admin-productions-tabs__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.admin-productions-tabs__count {
  border-radius: var(--radius-card);
  padding: 0 var(--space-2);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
}

.admin-production-card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.admin-production-card__budget {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.admin-production-card__budget dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-production-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ADM-06(/admin/payouts) — 3탭 · 지급완료 확인 · 명단 다운 · 조정 줄(P3-S16-T1) */
.admin-payouts-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-surface);
  margin-bottom: var(--space-4);
}

.admin-payouts-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.admin-payouts-tabs__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.admin-payouts-tabs__count {
  border-radius: var(--radius-card);
  padding: 0 var(--space-2);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
}

.admin-payouts-confirm-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.admin-payouts-confirm-detail dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ADM-07(/admin/projects) — 상태 탭 · 경과일 칩 · 달성률 바 · 보충 상세(P4-S7-T1) */
.admin-projects-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-surface);
  margin-bottom: var(--space-3);
}

.admin-projects-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.admin-projects-tabs__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.admin-projects-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.admin-projects-chips__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
}

.admin-projects-chips__chip.is-selected {
  color: var(--color-primary-pressed);
  border-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.admin-projects-bar {
  width: 100%;
  height: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-sheet);
}

.admin-projects-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sheet);
}

.admin-projects-target {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-projects-target__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 저작자 스타일이 UA 기본값([hidden] { display: none })을 이겨 버리므로 다시 명시합니다. */
.admin-projects-target__form[hidden] {
  display: none;
}

.admin-projects-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.admin-projects-table__notice {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0;
}

.admin-projects-supplement-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.admin-projects-supplement-detail dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* @TASK P3-S8-T1 - REV-01 검수 대시보드(/review) — 단체 선택 · 5탭 · 카드 목록 */
.review-dashboard-header__meta {
  color: var(--color-text-muted);
}

.review-dashboard-header__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.review-dashboard-body-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

.review-dashboard-body-selector__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  border-bottom: 1px solid var(--color-surface);
}

.review-dashboard-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.review-dashboard-tabs__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.review-dashboard-tabs__count {
  border-radius: var(--radius-card);
  padding: 0 var(--space-2);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
}

.review-dashboard-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.review-dashboard-card {
  display: flex;
  gap: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.review-dashboard-card--sla-exceeded {
  border-color: var(--color-status-error);
}

.review-dashboard-card__poster {
  width: 56px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-card);
  flex-shrink: 0;
}

.review-dashboard-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-dashboard-card__title {
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.review-dashboard-card__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0;
}

.review-dashboard-card__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* @TASK P3-S11-T1 - REV-04 통역사 자격 심사(/review/interpreters) — review-queue 짜임과 같습니다. */
.review-interpreters {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.review-interpreters__main {
  flex: 1;
  min-width: 0;
}

.review-interpreters__side {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.review-interpreters-header__meta {
  color: var(--color-text-muted);
}

.review-interpreters-tabs {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.review-interpreters-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
}

.review-interpreters-tabs__tab.is-selected {
  background: var(--color-surface);
  font-weight: var(--font-weight-bold);
}

.review-interpreters-tabs__count {
  color: var(--color-text-muted);
}

.review-interpreters-table-wrapper {
  overflow-x: auto;
}

.review-interpreters-table__name-button {
  cursor: pointer;
  background: none;
  border: none;
  min-height: var(--touch-target-min);
}

.review-interpreters-table__actions {
  display: flex;
  gap: var(--space-2);
}

.review-interpreters-side-panel,
.review-interpreters-certificate-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* @TASK P3-S17-T1 - ADM-15 검수 단체 관리(/admin/review-bodies) */
.admin-review-bodies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.admin-review-bodies__toggle-form {
  display: inline;
}

.admin-review-body-stats-card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.admin-review-body-stats-card__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

.admin-review-body-stats-card__summary dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-review-body-stats-card__summary dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

/* 그래프는 외부 라이브러리 없이 CSS 막대로 그립니다(디자인 토큰만 사용) */
.admin-review-body-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  height: 140px;
  margin-top: var(--space-4);
}

.admin-review-body-bar-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  gap: var(--space-1);
}

.admin-review-body-bar-chart__bar {
  width: 100%;
  min-height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.admin-review-body-bar-chart__value {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.admin-review-body-bar-chart__month,
.admin-review-body-bar-chart__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ADM-17(/admin/works/:id) — 작품 축 조회 11블록(P3-S19-T1) */
.admin-work-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.admin-work-header__poster {
  width: 120px;
  height: auto;
  border-radius: var(--radius-card);
  flex-shrink: 0;
}

.admin-work-header__meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  flex: 1;
}

.admin-work-header__meta dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-work-header__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.admin-work-header__blocked-reason {
  color: var(--color-error);
  width: 100%;
}

.admin-work-project__meta,
.admin-work-requests__summary,
.admin-work-supporters__summary,
.admin-work-purchases-summary,
.admin-work-stats__totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.admin-work-project__meta dt,
.admin-work-requests__summary dt,
.admin-work-supporters__summary dt,
.admin-work-purchases-summary dt,
.admin-work-stats__totals dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* 통계 그래프는 외부 라이브러리 없이 CSS 막대로 그립니다(디자인 토큰만 사용) */
.admin-work-stats-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  height: 140px;
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.admin-work-stats-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  gap: var(--space-1);
}

.admin-work-stats-chart__bar {
  width: 100%;
  min-height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.admin-work-stats-chart__value {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.admin-work-stats-chart__month {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.admin-work-history-timeline {
  list-style: none;
  padding: 0;
  border-left: 2px solid var(--color-surface);
}

.admin-work-history-timeline__item {
  padding: var(--space-2) 0 var(--space-4) var(--space-4);
}

.admin-work-history-timeline__action {
  font-weight: var(--font-weight-bold);
  margin: var(--space-1) 0;
}

.admin-work-history-timeline__transition,
.admin-work-history-timeline__actor,
.admin-work-history-timeline__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ADM-21(/admin/finance) — 수익 요약 5칸 · 필터 표 · 대조 · PG 로그(P3-S20-T1) */
.admin-finance-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.admin-finance-filter > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.finance-summary__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.finance-summary__card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--color-indigo-50);
}

.finance-summary__card dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.finance-summary__card dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* @TASK P3-S12-T1 - REV-05 검수 이력(/review/history) — review-members 짜임과 같습니다. */
.review-history {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.review-history__main {
  flex: 1;
  min-width: 0;
}

.review-history-header__meta {
  color: var(--color-text-muted);
}

.review-history-header__period {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin: var(--space-4) 0;
}

.review-history-member-selector {
  display: block;
  margin-bottom: var(--space-4);
}

.review-history-stats-card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.review-history-stats-card__summary {
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-bold);
}

.review-history-stats-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

.review-history-stats-card__grid dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.review-history-stats-card__grid dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.review-history-timeline {
  margin-bottom: var(--space-6);
}

.review-history-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  height: 140px;
  margin-top: var(--space-4);
}

.review-history-bar-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  gap: var(--space-1);
}

.review-history-bar-chart__bar {
  width: 100%;
  min-height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.review-history-bar-chart__value {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.review-history-bar-chart__month,
.review-history-bar-chart__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.review-history-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}

.review-history-table-wrapper {
  overflow-x: auto;
}

.review-history-table__title-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  cursor: pointer;
}

.review-history-side-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.review-history-side-panel__interpreter {
  color: var(--color-text-muted);
  margin-top: 0;
}

.review-history-checklist-detail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.review-history-checklist-detail__label {
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-2);
}

.review-history-checklist-detail__note {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* @TASK P3-S14-T1 - REV-07 검수 단체 설정(/review/settings) — review-members 짜임과 같습니다. */
.review-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 640px;
}

.review-settings-header__meta {
  color: var(--color-text-muted);
  margin-top: 0;
}

.review-settings-preview {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.review-settings-preview__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.review-settings-sign-languages {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin: 0;
}

.review-settings-sign-languages__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: var(--space-4);
}

.review-settings-checklist {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.review-settings-checklist__default-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-settings-checklist__default-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review-settings-checklist__badge {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: 0 var(--space-2);
}

.review-settings-checklist__custom-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.review-settings-checklist__custom-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.review-settings-actions {
  display: flex;
  gap: var(--space-3);
}

/* add-request — SUP-06 작품 추가 요청 화면(P4-S6-T1) */
.add-request__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-surface);
  margin-bottom: var(--space-4);
}

.add-request__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.add-request__tab.is-selected {
  color: var(--color-primary-pressed);
  border-bottom-color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.add-request__search {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.add-request__search-label {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.add-request__search-input {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-text);
}

.add-request__search-empty {
  color: var(--color-text-muted);
}

.add-request__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.add-request__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.add-request__result-action {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.add-request__result-action:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: default;
}

.add-request__free-notice {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0 0 var(--space-4);
}

.add-request__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 40rem;
}

.add-request__form-error {
  /* 오류색에 글자색을 섞어 대비를 높입니다(밝은 바탕에서는 짙게, 어두운 바탕에서는 밝게 · 검정을 섞으면 어두운 테마에서 안 보입니다). */
  color: color-mix(in srgb, var(--color-error) 70%, var(--color-text));
}

.add-request__form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.add-request__submit {
  min-height: var(--button-height);
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.add-request__cancel {
  color: var(--color-text-muted);
}

/* [hidden] 이 아닐 때만 flex 를 켭니다 — 그냥 .add-request__confirmation { display: flex }
   로 두면 브라우저 기본 [hidden]{display:none} 을 이겨 버려서(작성자 스타일이 항상 이깁니다),
   자바스크립트가 감추기 전인데도 확인 화면이 보이는 버그가 생깁니다. */
.add-request__confirmation:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-status-success);
  border-radius: var(--radius-card);
  margin: var(--space-4) 0;
}

.add-request__confirmation-link {
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.add-request__history {
  margin-top: var(--space-8);
}

.add-request__history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.add-request__history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.add-request__history-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ── SUP-01 서포터 소개(/supporter) — P4-S1-T1 ────────────────────── */
.supporter-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.supporter-intro__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

.supporter-intro__title {
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-bold);
}

.supporter-intro__lead {
  color: var(--color-text-muted);
  max-width: 40rem;
}

.supporter-intro__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-6);
  border-radius: var(--radius-card);
  /* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색을 씁니다 */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* 맡기기 참여(결정 55) — [서포터 참여하기] 옆 보조 단추 · 맡기기 화면 · 내 참여 표시 */
.supporter-intro__entrust {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-6);
  border: 2px solid var(--color-primary-pressed);
  border-radius: var(--radius-card);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.entrust .picks__header {
  margin-top: var(--space-6);
}

.entrust__options,
.entrust__rules ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-6);
}

.entrust__available,
.entrust__empty,
.entrust__picks-link {
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
}

.entrust__rules {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

.points-checkout__entrust ol {
  padding-left: var(--space-6);
}

.contribution-result__entrusted {
  margin: var(--space-4) 0;
}

.contribution-result__entrusted ol {
  padding-left: var(--space-6);
}

.my-picks__entrusted {
  padding: 0 var(--space-2);
  border: 1px solid var(--color-primary-pressed);
  border-radius: var(--radius-card);
  color: var(--color-primary-pressed);
  font-size: 0.85em;
}

.supporter-intro__methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .supporter-intro__methods-grid {
    grid-template-columns: 1fr;
  }
}

.supporter-intro__method {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.supporter-intro__method--highlight {
  border-color: var(--color-primary);
  border-width: 2px;
  background: var(--color-indigo-50);
}

.supporter-intro__method-title {
  font-weight: var(--font-weight-bold);
}

.supporter-intro__method-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.supporter-intro__stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-3) 0;
}

.supporter-intro__stat dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.supporter-intro__stat dd {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title-md);
}

.supporter-intro__me {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface);
}

.supporter-intro__login {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.supporter-intro__list-caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.supporter-intro__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.supporter-intro__card,
.supporter-intro__text-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
}

.supporter-intro__card {
  color: var(--color-text);
}

.supporter-intro__text-row {
  border: 1px solid var(--color-surface);
  color: var(--color-text-muted);
}

.supporter-intro__card-name,
.supporter-intro__text-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.supporter-intro__card-tier {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.supporter-intro__more {
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: none;
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.supporter-intro__more:not([hidden]) {
  display: inline-flex;
}

/* ── SUP-02 대기 중인 작품(/supporter/waiting) — P4-S2-T1 ─────────── */
.waiting {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.waiting__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.waiting__badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-card);
  /* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색을 씁니다 */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.waiting__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.waiting-projects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .waiting-projects {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .waiting-projects {
    grid-template-columns: 1fr;
  }
}

.waiting-projects__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.waiting-projects__poster {
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--color-surface);
}

.waiting-projects__poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waiting-projects__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

.waiting-projects__title a {
  color: var(--color-text);
}

.waiting-projects__category {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.waiting-projects__request {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.waiting-projects__free-badge {
  padding: 0 var(--space-2);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-secondary) 24%, var(--color-background));
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.waiting-projects__achievement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.waiting-projects__achievement-bar {
  flex: 1 1 auto;
  display: block;
  height: 8px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}

.waiting-projects__achievement-fill {
  display: block;
  height: 100%;
}

.waiting-projects__achievement-fill--progress {
  background: var(--color-status-progress);
}

.waiting-projects__achievement-fill--success {
  background: var(--color-status-success);
}

.waiting-projects__achievement-text {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.waiting-projects__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.waiting-projects__pick-form,
.waiting-projects__remove-form {
  display: contents;
}

.waiting-projects__pick-button,
.waiting-projects__picked-link,
.waiting-projects__remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary-pressed);
  border-radius: var(--radius-card);
  /* --color-primary 는 흰 글자와 대비가 4.5:1 을 못 넘어서(axe color-contrast), 눌림 색을 씁니다 */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.waiting-projects__picked-link,
.waiting-projects__remove-button {
  background: none;
  color: var(--color-primary-pressed);
}

.waiting-projects__pick-button--max,
.waiting-projects__pick-button:disabled {
  border-color: var(--color-text-muted);
  background: none;
  color: var(--color-text-muted);
}

.waiting-projects__notice {
  margin: 0;
  color: var(--color-error);
  font-size: var(--font-size-caption);
}

.waiting-projects__notice[hidden] {
  display: none;
}

/* my_picks — SUP-05 내 참여(목록 · 상세 · 환불 모달 · 명단 표시 · P4-S5-T1) */
.my-picks__header {
  margin-bottom: var(--space-4);
}

.my-picks__caption {
  color: var(--color-text-muted);
}

.my-picks__conditions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.my-picks__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.my-picks__row {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.my-picks__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.my-picks__refund-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary-pressed);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
}

.my-picks__blocked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-error);
  font-size: var(--font-size-caption);
}

.my-picks__refunded-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* 모집 실패 · 취소로 일부 작품 몫을 돌려받은 참여(E-52 · 결정 51) */
.my-picks__share-refunded {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-indigo-50);
  color: var(--color-indigo-700);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.my-picks__work-refunded {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-caption);
}

.my-picks__details {
  margin-top: var(--space-3);
}

.my-picks__detail-heading {
  font-size: var(--font-size-body);
  margin: var(--space-4) 0 var(--space-2);
}

.my-picks__works,
.my-picks__display-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.my-picks__work,
.my-picks__display-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.my-picks__message-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* picks — SUP-03 고른 작품(목록 · 금액 10가지 · 영수증 · 환불 안내 · 결제 요약 · P4-S3-T1) */
.picks__header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.picks__count-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-pressed);
}

.picks__capacity {
  margin-top: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}

.picks__capacity-fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.picks-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.picks-list__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.picks-list__poster-img {
  width: 4rem;
  border-radius: var(--radius-card);
}

.picks-list__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.picks-list__per-work {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.picks-list__remove-button {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  background: none;
  color: var(--color-primary-pressed);
}

.picks-receipt {
  margin: var(--space-6) 0;
}

.picks-receipt__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.picks-receipt__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
}

.picks-receipt__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.picks-receipt__fields[hidden] {
  display: none;
}

.picks-refund-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-6) 0;
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

.picks-summary {
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.picks-summary__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.picks-summary__row--total {
  border-top: 1px solid var(--color-surface);
  font-weight: var(--font-weight-bold);
}

.picks-summary__pay-button {
  width: 100%;
  min-height: var(--touch-target-min);
  margin-top: var(--space-4);
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
}

.picks-summary__pay-button:disabled {
  background: var(--color-text-muted);
}

.picks-checkout__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* @TASK P4-S8-T1 - ADM-08 개인 서포터 관리 화면(명단 · 상세 · 환불/강제 해제 모달) */
.admin-supporters-swatch {
  display: inline-block;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  margin-right: var(--space-1);
  vertical-align: middle;
}

.supporter-tier-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-card);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.admin-supporter-contributions__notice {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0;
}

.admin-supporter-refund-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.admin-supporter-refund-detail dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* 진동 타임라인(결정 56) — 검수 화면 그래프 */
.vibration-timeline__graph {
  width: 100%;
  height: 72px;
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.vibration-timeline__bass { fill: var(--color-primary-dark); }
.vibration-timeline__level { fill: var(--color-secondary); }
.vibration-timeline__event { fill: var(--color-status-warning); }
.vibration-timeline__gap { fill: var(--color-error); opacity: 0.35; }

.vibration-timeline__legend {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.vibration-timeline__key::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  background: currentColor;
}

.vibration-timeline__key--bass::before { background: var(--color-primary-dark); }
.vibration-timeline__key--level::before { background: var(--color-secondary); }
.vibration-timeline__key--event::before { background: var(--color-status-warning); }

/* 진동 타임라인 수집 · 채택(결정 57) — 관리자 콘솔 */
.vibration-admin__caption,
.vibration-admin__hint { color: var(--color-text-muted); font-size: 0.9rem; }
.vibration-admin__counts { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 12px; }
.vibration-admin__count {
  min-width: 140px;
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.vibration-admin__count-value { font-size: 1.5rem; font-weight: 700; }
.vibration-admin__upload,
.vibration-admin__search { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 12px 0; }
.vibration-admin__upload label,
.vibration-admin__search label { display: flex; flex-direction: column; gap: 4px; }
.vibration-admin__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-line); margin: 16px 0; }
.vibration-admin__tab { padding: 8px 14px; border-radius: 8px 8px 0 0; text-decoration: none; }
.vibration-admin__tab[aria-current="page"] { background: var(--color-surface); border: 1px solid var(--color-line); border-bottom-color: var(--color-surface); font-weight: 700; }
.vibration-admin__table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.vibration-admin__table th,
.vibration-admin__table td { padding: 8px 10px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.vibration-admin__current { background: var(--color-indigo-50); }
.vibration-admin__groups { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vibration-admin__group,
.vibration-admin__round { padding: 12px 16px; border: 1px solid var(--color-line); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.vibration-admin__round { margin-bottom: 12px; }
.vibration-admin__round-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vibration-admin__choices { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vibration-admin__inline { display: inline-block; margin: 0 4px 0 0; }
.vibration-admin__actions { white-space: nowrap; }
.vibration-admin__badge { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 0.8rem; background: var(--color-indigo-100); }
.vibration-admin__error { color: var(--color-error); }
.vibration-admin__pages { display: flex; gap: 16px; }