/* dataflow — polished admin theme (light, slate-neutral + PuzzleAI mint/teal accent). */

:root {
  /* surface */
  --bg:           #f6f7f9;
  --surface:      #ffffff;
  --surface-2:    #fafbfc;
  --surface-hover:#f3f4f6;

  /* text */
  --fg:           #0f172a;
  --fg-soft:      #334155;
  --muted:        #64748b;
  --muted-soft:   #94a3b8;

  /* lines */
  --border:       #e2e8f0;
  --border-soft:  #eef0f3;
  --ring:         rgba(13, 148, 136, 0.22);

  /* brand — PuzzleAI mint/teal */
  --primary:      #0d9488;       /* teal-600 */
  --primary-hover:#0f766e;       /* teal-700 */
  --primary-soft: #ccfbf1;       /* teal-100 */
  --primary-ink:  #115e59;       /* teal-800 */

  /* semantic */
  --ok:        #16a34a;
  --ok-soft:   #dcfce7;
  --warn:      #d97706;
  --warn-soft: #fef3c7;
  --danger:      #e11d48;       /* rose-600 — 틸의 보색 계열, 순빨강보다 톤이 어울림 */
  --danger-hover:#be123c;       /* rose-700 */
  --danger-soft: #ffe4e6;       /* rose-100 — 옅은 배경 */
  --danger-ink:  #be123c;       /* rose-700 — 옅은 배경 위 텍스트 */
  --danger-border:#fecdd3;      /* rose-200 — 옅은 테두리 */
  --info:      #0891b2;
  --info-soft: #cffafe;

  /* shape */
  --r-sm: 4px;
  --r:    6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* shadow */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --sh-2: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
               "Helvetica Neue", Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* 선택 컨트롤(체크박스/라디오/범위)을 테마 틸 색으로 — 기본 파란색 제거 */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--primary);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--r-sm);
}

code, kbd, samp {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--fg-soft);
}

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.012em; margin: 0; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
     color: var(--muted); margin: 0 0 14px 0; }

/* ─── Dry-run banner ─────────────────────────────────────────── */
.dryrun-banner {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  color: #78350f;
  text-align: center;
  padding: 7px 12px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f5d27a;
}

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-weight: 800;
  font-size: 16px;
  color: var(--fg);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand::before {
  content: "";
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--primary) 0%, #2dd4bf 100%);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.nav { display: flex; gap: 4px; flex: 1; align-items: center; }
.nav a, .nav-placeholder {
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r);
  transition: background-color .12s ease, color .12s ease;
}
.nav a:hover { color: var(--primary); background: var(--primary-soft); }

/* 외부 서비스 바로가기 드롭다운 */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  color: var(--fg-soft);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  padding: 6px 12px;
  border-radius: var(--r);
  transition: background-color .12s ease, color .12s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle { color: var(--primary); background: var(--primary-soft); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 6px;
  z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-group + .nav-dropdown-group { margin-top: 4px; border-top: 1px solid var(--border-soft); padding-top: 4px; }
.nav-dropdown-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  padding: 4px 10px 2px;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--fg-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--r);
  text-decoration: none;
}
.nav-dropdown-menu a:hover { color: var(--primary); background: var(--primary-soft); }
.nav-dropdown-menu .ext-arrow { color: var(--muted-soft); font-size: 11px; }
.nav-dropdown-menu a:hover .ext-arrow { color: var(--primary); }
.nav-placeholder { color: var(--muted-soft); opacity: 0.6; cursor: not-allowed; }

.user-box {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.user-name { color: var(--fg-soft); font-weight: 500; }
.user-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.role-owner { background: var(--primary-soft); color: var(--primary-ink); }
.role-worker { background: #fef3c7;            color: #92400e; }
.role-admin { background: var(--primary-soft); color: var(--primary-ink); } /* 이관 전 하위호환 */
.role-user  { background: #f1f5f9;             color: #475569; }
.role-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.role-form select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }

.logout-form { margin: 0; }
.link-button {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 0;
  font-family: inherit;
}
.link-button:hover { color: var(--danger-ink); }

/* 모바일 앱 하단 고정바 — 데스크탑에서는 숨김(모바일 미디어쿼리에서 노출). */
.bottombar { display: none; }

/* ─── Layout ─────────────────────────────────────────────────── */
.content { padding: 24px clamp(16px, 3vw, 44px); max-width: min(1880px, 100%); margin: 0 auto; }
.page    { max-width: 100%; margin: 0 auto; }

/* 좁은 화면 대응 */
@media (max-width: 720px) {
  .content { padding: 16px 12px; }
  /* 하단 고정바 높이만큼 아래 여백 — 단, 하단바가 있는(로그인된) 페이지에만.
     로그인/회원가입엔 하단바가 없으니 여백을 빼서 불필요한 스크롤을 막는다. */
  .has-bottombar .content { padding-bottom: 84px; }

  /* 로그인/회원가입 카드: 폰에서는 상단 여백을 줄여 위쪽 공백 때문에 생기던 스크롤 완화 */
  .login-card { margin: 24px auto; padding: 24px 22px 28px; }

  /* ── 모바일 상단바: 로고 + 아이디 + 로그아웃만 ──
     요청등록 메뉴는 하단 고정바로 분리, 대시보드는 로고(dataflow) 클릭으로 복귀.
     (네이버 N 로고처럼 브랜드가 홈 버튼 역할) */
  .topbar { gap: 10px; padding: 10px 14px; }
  .brand { font-size: 15px; }
  .nav { display: none; }   /* 상단 메뉴(대시보드/요청등록/바로가기) 전부 제거 → 하단바로 이동 */
  .user-box { margin-left: auto; padding-left: 0; border-left: none; gap: 10px; }
  .user-role { display: none; }      /* 역할 뱃지는 폰에서 생략해 군더더기 제거 */
  .user-name { font-size: 13px; }

  /* ── 하단 고정바: 요청등록 ── */
  .bottombar {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* iPhone 홈 인디케이터 */
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
  }
  .bottombar-action {
    flex: 1; text-align: center; text-decoration: none;
    background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 600;
    padding: 13px; border-radius: var(--r-md);
  }
  .bottombar-action:active { background: var(--primary-hover); }

  /* 페이지 헤더(제목+우측 액션)도 좁은 화면에서 세로로 */
  .page-header { flex-direction: column; align-items: stretch; }

  /* 앱에서는 페이지 제목을 생략 — 페이지가 둘뿐이라 메뉴/로고로 충분히 구분된다.
     요청등록: 제목만 있는 헤더라 통째로 숨김. */
  .page-request-new .page-header { display: none; }
}

.muted { color: var(--muted); }
.small { font-size: 12px; }

.error {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border: 1px solid var(--danger-border);
  padding: 10px 14px;
  border-radius: var(--r);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
}

/* ─── Login ──────────────────────────────────────────────────── */
.login-card {
  max-width: 380px;
  margin: 48px auto;
  background: var(--surface);
  padding: 32px 36px 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.login-card h1 { margin: 0 0 6px 0; font-size: 22px; }
.login-card label {
  display: block;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.login-card input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* 비밀번호 보기/숨기기 토글 — 입력란을 .pw-field 로 감싸면 JS가 눈 버튼을 자동 삽입 */
.pw-field { position: relative; display: block; margin-top: 6px; }
.pw-field input { margin-top: 0; padding-right: 44px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--muted-soft); -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover { color: var(--fg-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: var(--r); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.login-card button.primary {
  margin-top: 20px;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
}

/* ─── Page header ────────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}
.page-header h1 { margin: 0 0 4px 0; }
.page-actions { display: flex; gap: 8px; align-items: center; }

.dashboard h1 { margin-bottom: 4px; }

/* ─── Cards ─────────────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 26px 24px;
  margin-bottom: 18px;
  box-shadow: var(--sh-1);
}

/* 요청 정보 카드의 '메모' 값 — 라벨은 kv-grid 라벨열에, 박스는 값열에 정렬 */
.note-box {
  margin-top: 4px;        /* 다른 값들보다 살짝 아래로 */
  /* 버튼군(.actions)이 우측정렬. 등장빈도 사전 필터는 단어목록 카드로 옮겼으니
     이제 남은 우측 버튼(요청삭제 ≈ 84px) 직전까지만 오도록 여백을 비운다. */
  margin-right: 100px;
  box-sizing: border-box;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 0;       /* 둥근 모서리 제거 — 각지게 */
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg-soft);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Forms ─────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.form-grid label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.form-grid label.span-2,
.form-grid .span-2 { grid-column: 1 / -1; }

.form-grid input[type="text"],
.form-grid select,
.form-grid textarea,
.form-grid input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.form-grid textarea {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
}
.form-grid input[type="text"]:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.form-grid input[type="file"] {
  padding: 8px 12px;
  cursor: pointer;
  background: var(--surface-2);
}
.form-grid input[type="file"]::file-selector-button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--fg-soft);
}
.form-grid input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }

.req { color: var(--danger); font-weight: 700; }

/* ─── Buttons ───────────────────────────────────────────────── */
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
}
button, a.primary, a.secondary {
  font-family: inherit;
}
button.primary, a.primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: var(--r);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--sh-1);
  transition: background-color .12s, border-color .12s, transform .04s;
}
button.primary:hover, a.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
button.primary:active, a.primary:active { transform: translateY(0.5px); }

button.secondary, a.secondary {
  background: var(--surface);
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color .12s, border-color .12s, color .12s;
}
button.secondary:hover, a.secondary:hover {
  background: var(--surface-hover);
  border-color: var(--muted-soft);
  color: var(--fg);
}

/* ─── Tables: requests / words ──────────────────────────────── */
.requests-table,
.words-table,
.words-extract {
  width: 100%;
  table-layout: fixed;     /* 컬럼 폭 고정 — 발음 칩이 늘어도 셀이 넓어지지 않음 */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  margin-top: 14px;
}
.requests-table th,
.words-table th,
.words-extract th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.requests-table td,
.words-table td,
.words-extract td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-soft);
}

/* 대시보드 목록: 고정 레이아웃에서 긴 접수단어/파일명이 옆 컬럼을 침범하지 않도록
   한 줄 유지 + 말줄임(…). 줄바꿈으로 행 높이가 커지지 않는다. (전체 값은 hover title 로) */
.requests-table th,
.requests-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.requests-table td a {
  overflow: hidden;
  text-overflow: ellipsis;
}
.requests-table tbody tr:last-child td,
.words-table tbody tr:last-child td,
.words-extract tbody tr:last-child td { border-bottom: none; }

.requests-table tbody tr:hover { background: var(--surface-hover); }
.requests-table tbody tr { transition: background-color .08s; }

/* 좌측 인덱스 번호(No) 컬럼 — 목록 페이지 공통 */
/* No 컬럼: border-box 라 width 에 좌우 패딩이 포함된다. 3자리(최대 수백건) 숫자가
   잘리지 않도록 넉넉히. 패딩도 줄여 숫자 표시 폭을 확보. */
.requests-table th.idx, .requests-table td.idx {
  width: 56px;
  padding-left: 10px;
  padding-right: 12px;
  text-align: right;
  color: var(--muted);
}

/* 액션 버튼 묶음 — td 는 table-cell 로 두고 안쪽 div 만 flex (행 구분선 유지) */
.requests-table td .row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.requests-table td.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--muted);
  font-style: italic;
  background: var(--surface-2);
}

/* 단어 검수 / 등록 테이블 내부 인풋 */
.words-extract input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  color: var(--fg);
  transition: background-color .1s, border-color .1s, box-shadow .1s;
}
.words-extract input[type="text"]:hover { background: var(--surface-2); }
.words-extract input[type="text"]:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.words-extract td:first-child,
.words-table th:first-child,
.requests-table th:first-child { white-space: nowrap; }

.words-table tr.word-status-abandoned td {
  color: var(--muted-soft);
  text-decoration: line-through;
}

/* 발음 칩 — 한 단어에 발음 여러 개를 칩으로 나열 */
.pron-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

#add-row { margin-top: 12px; }

/* row-link (대시보드 접수단어 컬럼 링크) */
.row-link td > a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.row-link td > a:hover { color: var(--primary); }

.cycle-marker {
  color: var(--muted-soft);
  margin-right: 6px;
  font-weight: 600;
}

/* ─── Status / Badges ───────────────────────────────────────── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.7;
}
/* 진행 단계는 틸 중심의 차가운 그라데이션(sky→cyan→teal→emerald)으로 통일.
   사람 작업 대기 = 앰버, 결정 필요 = 로즈, 최종 완료/배포 = 브랜드 틸, 중단/대기 = 슬레이트 */
.status-registered         { background: #e0f2fe; color: #0369a1; }  /* sky — 시작 */
.status-on_hold            { background: #ffe4e6; color: #9f1239; }  /* rose-pale — 보류 (관리자 검토 대기) */
.status-sentences_approved { background: #fef3c7; color: #92400e; }  /* amber — 사람 검수/승인 */
.status-tts_uploaded       { background: #cffafe; color: #0e7490; }  /* cyan */
.status-trained            { background: var(--primary-soft); color: var(--primary-ink); }  /* teal — 학습완료 */
.status-tested             { background: #d1fae5; color: #047857; }  /* emerald — 테스트 */
.status-decision_pending   { background: var(--danger-soft); color: var(--danger-ink); }  /* rose — 결정 필요 */
.status-completed          { background: var(--primary); color: #fff; }  /* 브랜드 틸 — 완료 */
.status-deployed           { background: var(--primary); color: #fff; }  /* 브랜드 틸 — 배포 */
.status-abandoned          { background: #e2e8f0; color: #64748b; }  /* slate — 중단 */
.status-pending            { background: #f1f5f9; color: #64748b; }  /* slate — 대기 */
.status-reregistering      { background: #fef3c7; color: #92400e; }  /* amber — 재등록 진행 */
.status-completed::before, .status-deployed::before { background: #fff; opacity: 0.8; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #475569;
}
.badge-warn { background: var(--warn-soft); color: #92400e; }
.badge-ok   { background: var(--ok-soft);   color: #166534; }

/* ─── Definition list (메타) ────────────────────────────────── */
.kv { margin: 0; }
.kv dt, .kv dd { display: inline; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); margin-right: 6px; font-weight: 500; }
.kv dt::after { content: ":"; }
.kv dd { margin-right: 22px; color: var(--fg-soft); }

.kv-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 18px;
}
.kv-grid dt, .kv-grid dd { display: block; }
.kv-grid dt::after { content: ""; }

/* 요청 상세 '작업자' 인라인 지정 폼 — kv 값 칸 안에 셀렉트+저장 버튼 한 줄 */
.worker-assign { display: inline-flex; align-items: center; gap: 6px; }
.worker-assign select {
  padding: 3px 6px; font-size: 13px; color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface, #fff);
}
.worker-assign button { padding: 3px 10px; font-size: 12px; }

/* ─── Coverage 화면 ─────────────────────────────────────────── */
.cov-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 14px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--muted);
}
.cov-summary b {
  font-size: 18px;
  color: var(--fg);
  margin-right: 4px;
  font-weight: 700;
}
tr.is-sufficient td {
  background: #fffbeb;
}
tr.is-sufficient td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

/* ─── Scrollbar (살짝 다듬기) ────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* ─── Generate / 단어 카드 ──────────────────────────────────── */
.word-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.word-card-head h2 { text-transform: none; letter-spacing: 0; }
.word-card-head .badge { margin-left: 4px; }

/* 단어 목록 카드 헤더 — 제목 좌측, 등장빈도 사전 필터 버튼 우측 */
.list-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.list-card-head h2 { margin: 0; }
.head-actions { display: flex; gap: 8px; align-items: center; }

/* 등장빈도 사전 필터 — 일반 secondary 와 구분되는 색 (인디고 틴트) */
a.secondary.coverage-btn {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
a.secondary.coverage-btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #3730a3;
}

.prompt-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin: 6px 0 0;
}
.prompt-area {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  resize: vertical;
  transition: border-color .12s, box-shadow .12s;
}
.prompt-area:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.status-msg { margin-left: 8px; }

.sentences-wrap { margin-top: 14px; }
.sentences-title { font-size: 13px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.sentences-table input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  color: var(--fg);
}
.sentences-table input[type="text"]:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ─── Selection ─────────────────────────────────────────────── */
::selection { background: var(--primary-soft); color: var(--primary-ink); }

/* ─── Danger button ─────────────────────────────────────────── */
/* 평상시엔 옅은 로즈(soft)로 테마와 어울리게, 호버하면 채워져 의도를 강조 */
button.danger, a.danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border: 1px solid var(--danger-border);
  border-radius: var(--r);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
  text-align: center;
  box-shadow: none;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, transform .04s;
}
/* 행 삭제 — 작은 사이즈 변종 (표 안에서 행 단위) */
button.danger.row-del,
button.danger.btn-row-del,
button.danger.small {
  padding: 5px 12px;
  font-size: 12px;
  min-width: 56px;
  box-shadow: none;
}
button.danger:hover, a.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.24);
}
button.danger:active { transform: translateY(0.5px); }
button.danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
button.danger:disabled:hover {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-ink);
  box-shadow: none;
}
/* 확인 모달의 최종 삭제 버튼은 실제 파괴적 액션 → 처음부터 채워서 강조 */
.modal-card .danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: 0 1px 2px rgba(225, 29, 72, 0.18);
}
.modal-card .danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

/* ─── Busy overlay (LLM 추출 진행 중) ────────────────────────── */
.busy-overlay,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fade-in .12s ease;
}
.busy-overlay.visible,
.modal-overlay.visible { display: flex; }

.busy-card,
.modal-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  min-width: 320px;
  max-width: 460px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  text-align: center;
  animation: pop-in .16s ease;
}
.modal-card { text-align: left; }
.modal-card h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.modal-card p {
  margin: 6px 0;
  font-size: 13px;
  color: var(--fg-soft);
}
.modal-card .actions {
  margin-top: 18px;
  justify-content: flex-end;
}

.busy-title {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.busy-sub { margin-top: 6px; }

.spinner {
  width: 38px; height: 38px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in  { from { transform: scale(0.96); opacity: 0; }
                     to   { transform: scale(1);    opacity: 1; } }

/* 버튼 disabled 일반 */
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* hidden 속성은 .form-grid 의 display:block 보다 항상 우선 (패널 토글·숨은 필드) */
[hidden] { display: none !important; }

/* ─── 입력 방식 토글 (segmented) ───────────────────────────── */
.field-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.seg {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seg-opt input { display: none; }
.seg-opt.is-active {
  background: var(--surface);
  color: var(--primary-ink);
  box-shadow: var(--sh-1);
}
.seg-opt:hover:not(.is-active) { color: var(--fg-soft); }

/* ─── 단어 칩 입력 (입력란 내부 인라인 칩) ──────────────────── */
.chip-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: text;
  transition: border-color .12s, box-shadow .12s;
}
.chip-field.focused {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
/* 명시도를 .form-grid input[type="text"] 보다 높여, 칩-필드 안 입력칸이
   자기 테두리·풀폭 박스로 그려지지 않게 함 (박스-인-박스 방지) */
.form-grid .chip-field .chip-entry-inline {
  display: block;
  flex: 1 1 120px;
  width: auto;
  min-width: 120px;
  margin: 0;
  padding: 4px 2px;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg);
  border: none;
  background: transparent;
}
.form-grid .chip-field .chip-entry-inline:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
/* 대시보드 상태 배지(.status)와 같은 타원형 회색 칩 */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg-soft);
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
  animation: pop-in .12s ease-out;
}

/* 검수 테이블의 발음 칩 입력 — .words-extract input[type="text"] 규칙을 덮어씀 */
.words-extract .chip-field {
  width: 100%;
  margin: 0;
  padding: 4px 6px;
  height: 36px;            /* 고정 높이 — 칩이 쌓여도 박스가 커지지 않음 */
  min-height: 36px;
  flex-wrap: nowrap;       /* 줄바꿈 금지 (세로로 안 늘어남) */
  overflow-x: auto;        /* 칩이 넘치면 가로 스크롤 */
  overflow-y: hidden;
}
.words-extract .chip-field .chip { flex: 0 0 auto; }   /* 칩은 줄어들지 않음 */

/* 검수 단계: 이미 등록된 단어 표시 */
.dup-head {
  display: flex;
  align-items: center;
  gap: 10px;                    /* 제목 바로 옆에 범례 */
  margin-bottom: 14px;
}
.dup-head h2 { margin: 0; }
.dup-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.dup-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #facc15;          /* 노란 원형 */
}
.words-extract .word-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.words-extract .word-cell .word-en { flex: 0 1 auto; width: auto; min-width: 60px; max-width: 100%; }
/* 오타의심 — 행 옅은 붉은색 + '오타의심' 빨간 구슬 + 추천단어 칩 */
.words-extract tr.word-row.spell-suspect > td { background: #fef2f2; }
.words-extract .word-cell { flex-wrap: wrap; }      /* 추천 칩이 많으면 줄바꿈 */
.spell-legend {                /* '단어 검수' 헤더 우측 범례 — 빨간 점 + '오타의심' (이미 등록됨과 동형) */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.spell-dot {                   /* 범례용 빨간 점 — 이미 등록됨 노란 점(#facc15)과 톤 맞춤 */
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f87171;
}
.spell-flag {                  /* 오타의심 행 라벨 — 추천이 없어도 항상 뜨는 빨간 구슬 */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 999px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  white-space: nowrap;
}
.spell-suggest {               /* 추천 단어 칩 — 클릭하면 그 단어로 교체 (약한 깜빡임) */
  flex: 0 0 auto;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  border: 1px solid #fca5a5;
  background: #fff1f2;
  color: #b91c1c;
  white-space: nowrap;
  cursor: pointer;
  animation: spellBlink 2.4s ease-in-out infinite;
}
.spell-suggest:hover { background: #fecaca; animation: none; }
@keyframes spellBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .spell-suggest { animation: none; } }

/* 프롬프트 템플릿 선택 (문장생성) — 눈에 띄는 세그먼트 토글 */
.tpl-select {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tpl-select .seg {
  display: inline-flex;
  align-items: center;
  height: 26px;               /* 칩(.cat-chip) 바깥높이와 동일 → edge 정렬 */
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 3px;
  gap: 2px;
}
.tpl-select .seg-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tpl-select .seg-btn.active { background: var(--primary); color: #fff; }
.tpl-select .cat-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;               /* 토글 버튼(.seg-btn)과 동일 크기 */
  box-sizing: border-box;
  align-self: center;
  position: relative;
  top: 2px;                   /* 살짝 아래로 */
  padding: 0 16px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.dup-count {                    /* 칩과 같은 타원형 요소 — 노란 톤 */
  flex: 0 0 auto;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  background: #fef9c3;          /* 옅은 노랑 배경 */
  color: #a16207;               /* 진한 노랑 글자 */
  white-space: nowrap;
  cursor: help;
}
.words-extract .chip-field .chip-entry-inline {
  width: auto;
  min-width: 90px;
  padding: 2px 2px;
  border: none;
  background: transparent;
}
.words-extract .chip-field .chip-entry-inline:hover { background: transparent; }
.words-extract .chip-field .chip-entry-inline:focus {
  outline: none;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* ───── 단어·발음 내보내기 (요청 상세 하단 우측) ───── */
.export-bar { display: flex; justify-content: flex-end; margin-top: 14px; }
.export-menu { position: relative; }
.export-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-soft);
}
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > summary:hover,
.export-menu[open] > summary { border-color: var(--primary); color: var(--primary); }
.export-menu-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);   /* 페이지 하단이라 위로 펼친다 */
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 6px;
  z-index: 30;
}
.export-menu-list a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r);
  color: var(--fg-soft);
  font-size: 13px;
  text-decoration: none;
}
.export-menu-list a:hover { background: var(--surface-hover); color: var(--primary); }

/* ───── 재등록 이력 드로어 ───── */
.history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.83rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--r);
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.04s ease;
}
.history-toggle:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--sh-2);
}
.history-toggle:active { transform: translateY(1px); }
/* 펼침을 암시하는 화살표 — 별도 설명 텍스트 없이 클릭 가능함을 드러낸다 */
.history-toggle::after {
  content: '›';
  font-size: 1.15rem;
  line-height: 1;
  margin-left: 2px;
  transform: translateY(-1px);
}

.history-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 40;
}
.history-backdrop.visible { display: block; }

.history-drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(580px, 94vw);
  background: var(--surface);
  box-shadow: -10px 0 28px rgba(15, 23, 42, 0.18);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.history-drawer.visible { transform: translateX(0); }

.history-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.history-drawer-head h3 { margin: 0; font-size: 1rem; }
.history-close {
  background: none;
  border: none;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
}
.history-close:hover { color: var(--fg); }

.history-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 40vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.history-list li { margin: 0; }
.history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 8px 10px;
  cursor: pointer;
  align-items: center;
}
.history-item:hover { background: var(--surface-hover); }
.history-item.active {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.history-cycle {
  grid-row: 1;
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--primary-ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.history-item.current .history-cycle {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: transparent;
}
.history-word {
  grid-row: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-date {
  grid-row: 1;
  grid-column: 3;
  font-size: 0.72rem;
  color: var(--muted-soft);
  white-space: nowrap;
}
.history-meta {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 0.74rem;
  color: var(--muted);
}

.history-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.history-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
#history-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: none;
  background: var(--bg);
}

/* ───── 메모/댓글 색인 탭 (우측 가장자리 고정, 북마크처럼) ───── */
.comments-tab {
  position: fixed;
  top: 172px;            /* 좌측 '요청 정보' 박스 윗줄에 맞춤 (헤더에서 충분히 내려옴) */
  right: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 7px;
  border: 1px solid var(--primary);
  border-right: none;
  border-radius: var(--r) 0 0 var(--r);
  /* 좌측 상단 로고와 동일한 민트/teal 그라데이션 */
  background: linear-gradient(135deg, var(--primary) 0%, #2dd4bf 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: -3px 0 12px rgba(15, 23, 42, 0.18);
  transition: padding-right 0.12s ease, filter 0.12s ease;
}
.comments-tab:hover { filter: brightness(1.06); padding-right: 11px; }
.comments-tab-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.comments-tab-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary-ink);
  background: #fff;
  border-radius: 999px;
  min-width: 18px;
  padding: 1px 5px;
  text-align: center;
}

/* ───── 메모/댓글 드로어 ───── */
.comments-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comment-empty { margin: 4px 0; }
.comment-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 11px;
  background: var(--surface);
}
.comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.comment-stage {
  font-size: 0.7rem;
  padding: 1px 8px;
}
.comment-author { font-size: 0.82rem; font-weight: 600; color: var(--fg); }
.comment-admin-tag {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
}
.comment-time {
  font-size: 0.68rem;
  color: var(--muted-soft);
  margin-left: auto;
  white-space: nowrap;
}
.comment-del-form { margin: 0; display: inline; }
.comment-del, .comment-edit {
  background: none;
  border: none;
  color: var(--muted-soft);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 2px 4px;
  opacity: 0.45;            /* 아주 작고 흐리게 */
  transition: opacity 0.12s ease, color 0.12s ease;
}
.comment-edit { font-size: 0.74rem; }
.comment-item:hover .comment-del,
.comment-item:hover .comment-edit { opacity: 0.8; }
.comment-edit:hover { opacity: 1; color: var(--primary); }
.comment-del:hover { opacity: 1; color: var(--danger, #dc2626); }

.comment-edit-form { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.comment-edit-form textarea {
  resize: vertical;
  min-height: 38px;
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.comment-edit-actions { display: flex; justify-content: flex-end; gap: 6px; }
.comment-edit-actions .small { font-size: 0.78rem; padding: 4px 10px; }
.comment-body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.comment-form textarea {
  flex: 1 1 auto;
  resize: vertical;
  min-height: 38px;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.comment-form button { flex: 0 0 auto; }

/* ───── TTS 페이지 프롬프트(생성) 카드 ───── */
.prompt-card { padding: 0; }
.prompt-card > .prompt-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  user-select: none;
}
.prompt-card > .prompt-summary::-webkit-details-marker { display: none; }
.prompt-card > .prompt-summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 0.12s ease;
}
.prompt-card[open] > .prompt-summary::before { transform: rotate(90deg); }
.prompt-card[open] > .prompt-summary { border-bottom: 1px solid var(--border); }
.prompt-card .prompt-body { padding: 14px 16px; }
.prompt-card .prompt-body textarea {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
}

/* embed(미리보기 iframe) 모드: 여백 축소 */
body.embed { background: var(--surface); }
.content-embed { padding: 12px 16px; max-width: none; }

/* ───── 테스트 문장별 상세 ───── */
.test-detail {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  padding: 4px 12px;
}
.test-detail > summary {
  cursor: pointer;
  padding: 8px 2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.test-detail > summary::-webkit-details-marker { display: none; }
.test-detail > summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 0.12s ease;
}
.test-detail[open] > summary::before { transform: rotate(90deg); }
.test-sentence-table { margin: 4px 0 10px; table-layout: fixed; width: 100%; }
.test-sentence-table th, .test-sentence-table td { vertical-align: middle; }
.test-sentence-table td.cell-script, .test-sentence-table td.cell-hyp { word-break: break-word; }
/* # 와 판정 컬럼은 내용(숫자/뱃지)에 맞게 좁게, 나머지 3컬럼이 남는 폭을 나눠 넓게 */
/* # 와 판정 컬럼은 좁게(좌우 패딩도 축소해 내용이 잘리지 않게), 나머지는 남는 폭을 나눔 */
.test-sentence-table th:first-child, .test-sentence-table td:first-child {
  width: 34px; padding-left: 6px; padding-right: 6px; text-align: center;
}
.test-sentence-table th:last-child, .test-sentence-table td:last-child {
  width: 64px; padding-left: 8px; padding-right: 8px; text-align: center; white-space: nowrap;
}
.test-audio { height: 30px; width: 100%; max-width: 100%; }

/* 테스트 진행 상태 강조 + 인라인 스피너 */
#status-line.running {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spinner-inline {
  display: inline-block;
  width: 14px; height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}

/* ── 프레즌스(누가 지금 어디를 보는지) ───────────────────────── */
/* 요청에 매인 페이지 — 같은 요청을 다른 사람이 볼 때, 깜빡이며 이름만 표시(안내문구 없음). */
.presence-badge {
  margin: 28px 24px 0;       /* 한 칸 더 아래로 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* 가운데 정렬 */
  gap: 6px;
}
.presence-badge[hidden] { display: none; }
.presence-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger-ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sh-1);
  animation: presence-blink 1.2s ease-in-out infinite;
}
.presence-live-dot {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--danger);
}
@keyframes presence-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .presence-live { animation: none; }
}

/* 대시보드 접속자 패널. */
.presence-panel {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.presence-panel[hidden] { display: none; }
.presence-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: none;
}
.presence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.presence-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.presence-dot {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.presence-name { font-weight: 600; color: var(--fg); }
.presence-me { font-weight: 400; color: var(--muted); }
.presence-where { color: var(--primary-ink); }
.presence-ago { color: var(--muted-soft); font-size: 12px; }

/* ═══ llm-dataflow — 큐레이션 파이프라인 추가 스타일 ═══════════ */

/* 파이프라인 단계 배지 (파생 stage) */
.stage-pending    { background: #f1f5f9; color: #64748b; }  /* slate — 미정 */
.stage-kept       { background: #d1fae5; color: #047857; }  /* emerald — 사용 확정 */
.stage-judge_wait { background: #fef3c7; color: #92400e; }  /* amber — Judge 대기 */
.stage-judged     { background: #e0f2fe; color: #0369a1; }  /* sky — Judge 완료 */
.stage-final      { background: #ede9fe; color: #6d28d9; }  /* violet — 최종 선별 */
.stage-exported   { background: var(--primary); color: #fff; }  /* 브랜드 틸 — 완료 */
.stage-exported::before { background: #fff; opacity: 0.8; }
.stage-rejected   { background: #ffe4e6; color: #9f1239; }  /* rose — 제외 */

/* judge 런 상태 배지 */
.run-pending   { background: #f1f5f9; color: #64748b; }
.run-running   { background: #e0f2fe; color: #0369a1; }
.run-completed { background: var(--primary-soft); color: var(--primary-ink); }
.run-failed    { background: #ffe4e6; color: #9f1239; }
.run-cancelled { background: #fef3c7; color: #92400e; }

/* 단계 흐름 표시줄 */
.flow-crumb { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.flow-crumb b { color: var(--primary-ink); }

/* 대시보드 단계 카드 */
.stage-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 14px 0 18px;
}
.stage-card {
  display: block; background: var(--surface, #fff); border: 1px solid var(--border, #e5e8eb);
  border-radius: 10px; padding: 12px 14px; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.stage-card:not(.static):hover { border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(15,23,42,.06); }
.stage-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(20,184,166,.18); }
.stage-card.hl .stage-card-value { color: var(--primary-ink); }
.stage-card.static { opacity: .85; }
.stage-card-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.stage-card-value { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-top: 2px; }

/* 완료(export) 행 회색 처리 */
tr.exported-row td { color: #9aa3ad; background: #fafafa; }

/* 플래시 메시지 */
.flash-msg {
  background: var(--primary-soft, #e6f7f1); color: var(--primary-ink, #0f766e);
  border-radius: 8px; padding: 9px 14px; margin: 10px 0; font-size: 13.5px;
}
.flash-msg.error { background: #ffe4e6; color: #9f1239; }

/* 패널 (섹션 카드) */
.panel {
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e8eb);
  border-radius: 10px; padding: 14px 16px; margin: 14px 0;
}
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h2 { font-size: 15px; margin: 0; }
.panel-head .muted { color: var(--muted); font-weight: 400; font-size: 13px; }
.panel-actions { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.panel .empty { color: var(--muted); text-align: center; padding: 18px 0; }

/* 필터 패널 (details) */
.filter-panel > summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.filter-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin: 12px 0; }
.filter-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.filter-grid label.check { flex-direction: row; align-items: center; color: inherit; font-weight: 500; }
.filter-actions { display: flex; gap: 8px; }
.where-sql { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.where-sql textarea { width: 100%; margin-top: 4px; font-family: inherit; }
.hint { font-size: 12px; color: var(--muted); }

/* 미정/사용/제외 세그먼트 */
.seg3 { display: inline-flex; border: 1px solid var(--border, #d5d9de); border-radius: 8px; overflow: hidden; }
.seg3 button, .seg3 a {
  border: none; background: #fff; padding: 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; text-decoration: none;
}
.seg3 button + button, .seg3 a + a { border-left: 1px solid var(--border, #e5e8eb); }
.seg3 .on { background: #f1f5f9; color: #1b1f27; }
.seg3 .on.keep { background: #047857; color: #fff; }
.seg3 .on.reject { background: #dc2626; color: #fff; }

/* 중복 그룹 인라인 펼침 */
.dup-toggle { cursor: pointer; border: none; }
.dup-box { background: #fbfcfd; border-radius: 8px; padding: 10px 14px; }
.dup-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; }
.dup-row a { color: inherit; }

/* 점수 히스토그램 (서버 렌더) */
.hist { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 8px 4px 0; }
.hist-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.hist-bar { width: 70%; background: #3b82f6; border-radius: 4px 4px 0 0; min-height: 2px; }
.hist-count { font-size: 11px; color: var(--muted); }
.hist-label { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* threshold 폼 */
.threshold-form label { display: block; font-size: 13px; margin-bottom: 10px; }
.threshold-form input[type="range"] { width: 70%; vertical-align: middle; }

/* 2단 레이아웃 */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

/* 전문 보기 */
.io-pre {
  white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px;
  max-height: 460px; overflow-y: auto; background: #fbfcfd; border-radius: 8px; padding: 12px;
}

/* 최종 선별 체크 버튼 */
.check-btn { border: 1px solid var(--border, #d5d9de); background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 14px; }
.check-btn.on { border-color: #047857; }

/* 타임라인/메모 */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 6px 0; border-bottom: 1px solid var(--border, #eef1f4); }
.comment-list { list-style: none; margin: 0 0 12px; padding: 0; }
.comment-list li { padding: 8px 0; border-bottom: 1px solid var(--border, #eef1f4); font-size: 13.5px; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; }
.comment-form textarea { flex: 1; }

/* 페이저 */
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 14px 0; font-size: 13px; }
.pager.inline { margin: 0; }
.inline-form { display: inline; }

/* ─── 필터 조건 구조화 (행 단위 그룹) ─────────────────────────── */
.filter-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.filter-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 10px 12px; background: #fbfcfd; border: 1px solid var(--border, #eef1f4); border-radius: 8px;
}
.filter-row-title {
  align-self: center; min-width: 64px; font-size: 12px; font-weight: 700; color: var(--muted);
}
.filter-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.filter-row label.check { flex-direction: row; align-items: center; gap: 6px; color: inherit; font-weight: 500; align-self: center; }
.filter-row input[type="date"], .filter-row select { min-width: 150px; }
.filter-row input[type="search"] { min-width: 220px; }
.range-row { display: inline-flex; align-items: center; gap: 6px; }
.range-row input { width: 76px; }
.filter-row-details {
  padding: 8px 12px; background: #fbfcfd; border: 1px solid var(--border, #eef1f4); border-radius: 8px;
}
.filter-row-details > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.where-sql-input { width: 100%; margin-top: 8px; font-family: inherit; }
.filter-actions { display: flex; gap: 8px; }

/* 행 인라인 펼침 (입력/출력 전문) */
.io-expand td { background: #fbfcfd; padding: 12px 16px; }
.io-expand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1000px) { .io-expand-grid { grid-template-columns: 1fr; } }
.io-expand-title { font-size: 12px; font-weight: 700; color: var(--muted); margin: 6px 0 4px; }

/* Judge 런 설정 — 왼쪽(인자) : 오른쪽(프롬프트) = 1 : 3 */
.judge-config { display: grid; grid-template-columns: 1fr 3fr; gap: 18px; margin-top: 10px; }
@media (max-width: 900px) { .judge-config { grid-template-columns: 1fr; } }
.judge-config-args { display: flex; flex-direction: column; gap: 12px; }
.judge-config-args label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.judge-config-args input, .judge-config-args select { width: 100%; }
.judge-config-prompt label { display: flex; flex-direction: column; gap: 4px; height: 100%; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.judge-config-prompt textarea { width: 100%; flex: 1; font-family: inherit; line-height: 1.6; }

/* 사람 이름 역할 배지 (관리자=틸 / 작업자=앰버 / 일반=슬레이트 — role-* 색 재사용) */
.who {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}

/* 실패 일괄 처리 버튼 2개 — 동일 크기 */
.failed-actions button { min-width: 220px; text-align: center; }

/* 상단 네비 — 현재 탭 활성 표시 */
.topbar .nav > a.active {
  background: var(--primary-soft);
  color: var(--primary-ink);
  border-radius: var(--r);
  font-weight: 700;
}

/* 필터 — 사용 여부 체크박스 그룹 */
.status-checks { display: flex; flex-direction: column; gap: 4px; }
.status-checks-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.status-checks-row { display: inline-flex; gap: 12px; align-items: center; padding: 6px 0; }
.status-checks .check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }

/* ─── 부드러운 페이지 전환 (MPA View Transitions — Chromium 126+) ──
   같은 오리진 내 내비게이션(카드 클릭·필터 등)을 흰 화면 깜빡임 없이
   짧은 크로스페이드로 전환한다. 미지원 브라우저는 기존 동작 그대로. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.12s;
}

/* config별 현황 */
.hl-teal { color: var(--primary-ink); }

/* 컬럼 정렬 표시 */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--primary-ink); }
th.sorted-asc::after  { content: " ▲"; font-size: 10px; color: var(--primary-ink); }
th.sorted-desc::after { content: " ▼"; font-size: 10px; color: var(--primary-ink); }

/* 최종 선별 — run 선택 패널 (좌측, 메타+프롬프트) */
.run-picker { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.run-picker-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.run-picker-form select { min-width: 320px; font-size: 14px; padding: 8px 10px; }
.run-meta { margin: 0; align-self: center; }
.run-prompt { flex-basis: 100%; }
.run-prompt > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.run-prompt .io-pre { max-height: 260px; margin-top: 6px; }
.judge-dl { display: inline-flex; align-items: center; gap: 8px; }

/* 점수분포 막대 클릭 필터 */
a.hist-col { text-decoration: none; color: inherit; border-radius: 6px; padding: 2px; }
a.hist-col:hover .hist-bar { background: var(--primary); }
a.hist-col.active { background: var(--primary-soft); }
a.hist-col.active .hist-bar { background: var(--primary); }
.chip { display: inline-block; background: var(--primary-soft); color: var(--primary-ink);
        border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.chip a { color: inherit; text-decoration: none; margin-left: 4px; }

/* 최종 선별 상단 — run 선택(좌) : 점수분포(우) 가로 배치 */
.final-top { align-items: stretch; }
.final-top .panel { margin: 14px 0 0; }

/* 중복 멤버 인라인 펼침 */
.dup-member-toggle {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 13px; text-align: left; flex: 1; padding: 0;
}
.dup-member-toggle:hover { color: var(--primary-ink); }
.dup-member-io { padding: 8px 0 10px 26px; }

/* 필터링 — 사용여부 세그먼트 잘림 방지 */
.status-seg-form { white-space: nowrap; }
.status-seg-form .seg3 button { padding: 4px 8px; }