/* ============================================================
   VERADI UI — Ticket / Kanban component layer (BASE)
   ------------------------------------------------------------
   외과적 원칙: style.css 토큰(--primary, --card, --line, --ok, --warn,
   --high, --r-, --shadow-, --sp-)을 재사용. 여기서는 티켓 전용
   컴포넌트(칸반·ptype 칩·상태 배지·개인 대시보드)만 얇게 추가.
   Light + Dark 모두 대응(.tk-page 로컬 변수로 자기완결).
   ※ 이것은 BASE 입니다 — 최종 취향은 장호님이 확정.
   ============================================================ */

/* ---------- 티켓 페이지 로컬 팔레트 (light) ---------- */
.tk-page {
  --tk-page-bg: transparent;
  --tk-col-bg: #F1ECE3;              /* warm sand column (was #eef2f8 cool) */
  --tk-card: #FFFDFA;                /* warm white (was #ffffff) */
  --tk-card-line: rgba(60, 50, 34, .12);
  --tk-ink: #2A2620;                 /* warm ink (was #16243b) */
  --tk-mut: #726858;                 /* warm muted (was #73849e) */
  --tk-chip-bg: rgba(60, 50, 34, .06);
  /* ptype: 단일 정본은 style.css :root (--pt-* 상속) — 로컬 재정의 제거(안2) */
  /* status (warm, AA) */
  --st-open-fg: #6E6456; --st-open-bg: rgba(110, 100, 86, .13);
  --st-prog-fg: #1B6FD4; --st-prog-bg: rgba(27, 111, 212, .12);
  --st-rev-fg: #9A6A12;  --st-rev-bg: rgba(198, 127, 26, .16);
  --st-esc-fg: #B0442A;  --st-esc-bg: rgba(176, 68, 42, .14);
  --st-ok-fg: #3C7D45;   --st-ok-bg: rgba(60, 125, 69, .15);

  background: var(--tk-page-bg);
  color: var(--tk-ink);
}

/* ---------- Dark (data-theme override) ---------- */
:root[data-theme="dark"] .tk-page,
.tk-page[data-tk-theme="dark"] {
  --tk-page-bg: #17130E;
  --tk-col-bg: #221C15;
  --tk-card: #2A2318;
  --tk-card-line: rgba(240, 232, 216, .10);
  --tk-ink: #ECE6DB;
  --tk-mut: #A89E8E;
  --tk-chip-bg: rgba(240, 232, 216, .08);
  /* ptype 상속(:root[data-theme=dark]) — 로컬 재정의 제거 */
  --st-open-fg: #B0A794; --st-open-bg: rgba(176, 167, 148, .16);
  --st-prog-fg: #6BA7EE; --st-prog-bg: rgba(27, 111, 212, .22);
  --st-rev-fg: #E0B055;  --st-rev-bg: rgba(224, 176, 85, .20);
  --st-esc-fg: #EF8D6F;  --st-esc-bg: rgba(239, 141, 111, .20);
  --st-ok-fg: #7FCA8B;   --st-ok-bg: rgba(127, 202, 139, .20);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
}

/* ============================================================
   Header
   ============================================================ */
.tk-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.tk-head h1 { font-size: var(--text-title); margin: 0; letter-spacing: -.01em; color: var(--tk-ink); }
.tk-filter { margin-left: auto; display: flex; gap: var(--sp-2); }
.tk-filter a {
  font-size: var(--text-caption); padding: .34rem .8rem; border-radius: var(--r-pill);
  border: 1px solid var(--tk-card-line); color: var(--tk-mut); text-decoration: none;
  transition: background .18s var(--ease-smooth, ease), color .18s ease, border-color .18s ease;
}
.tk-filter a:hover { background: var(--tk-chip-bg); color: var(--tk-ink); }
.tk-filter a.is-active { background: var(--pt-a-bg); color: var(--pt-a-fg); border-color: transparent; }
.tk-note { font-size: var(--text-caption); color: var(--tk-mut); margin: -.4rem 0 var(--sp-4); }
.tk-exam-filter { display: flex; gap: var(--sp-2); align-items: center; }
.tk-exam-filter select {
  font-size: var(--text-caption); padding: .34rem .7rem; border-radius: var(--r-pill);
  border: 1px solid var(--tk-card-line); color: var(--tk-mut);
  background: var(--tk-card); font-family: inherit; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.tk-exam-filter select:hover { color: var(--tk-ink); border-color: var(--tk-mut); }
.tk-exam-filter select:focus { outline: none; border-color: var(--pt-a-fg); box-shadow: 0 0 0 3px var(--pt-a-bg); }

/* ============================================================
   New-ticket composer
   ============================================================ */
.tk-new {
  background: var(--tk-card); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.tk-new-title { font-size: var(--text-caption); font-weight: 600; color: var(--tk-mut);
  text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: var(--sp-3); }
.tk-new-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tk-new input, .tk-new select {
  font-size: var(--text-callout); padding: .42rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--tk-card-line); background: var(--tk-card); color: var(--tk-ink);
  font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease;
}
.tk-new input:focus, .tk-new select:focus {
  outline: none; border-color: var(--pt-a-fg);
  box-shadow: 0 0 0 3px var(--pt-a-bg);
}
.tk-new input::placeholder { color: var(--tk-mut); }

/* ============================================================
   Kanban board
   ============================================================ */
.tk-board { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-4); align-items: flex-start; }
/* ★SV-41d0 '내 티켓' 관계축 섹션 머리(발부/담당) — 기존 토큰만, 얇고 조용하게.
   첫 섹션은 위 여백을 접어 헤더와 붙는다(불필요한 빈칸 방지). */
.tk-section-head {
  font-size: var(--text-caption); font-weight: 600; color: var(--tk-mut);
  letter-spacing: -.01em; margin: var(--sp-4) 0 var(--sp-2);
}
.tk-board-groups > .tk-section-head:first-child,
.tk-section-head:first-of-type { margin-top: 0; }
/* c8b1: 1440px 화면에서 마지막 칼럼이 잘려 보였다 — 넓은 화면에선 칼럼을
   균등 분배해 전 칼럼이 한 화면에 들어오게 하고, 좁아지면 기존 가로 스크롤로 복귀.
   (22d9로 칼럼이 6→5개가 되어 여유가 늘었지만 규칙 자체는 그대로 유효) */
.tk-col {
  flex: 0 0 258px; min-width: 0; background: var(--tk-col-bg);
  border-radius: var(--r-md); padding: var(--sp-3);
}
.tk-col-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--text-caption); color: var(--tk-mut);
  text-transform: uppercase; letter-spacing: .03em;
  padding: .2rem .3rem var(--sp-3);
}
.tk-col-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tk-col-count {
  margin-left: auto; font-size: var(--text-micro); font-weight: 700;
  background: var(--tk-chip-bg); color: var(--tk-mut);
  min-width: 20px; text-align: center; padding: .1rem .4rem; border-radius: var(--r-pill);
  letter-spacing: 0;
}
/* per-column accent dot */
/* ★3상태(수정중·승인대기중·완료) + 취소. 'issued'(내가 발행) 칼럼은 개인 보드 전용. */
.tk-col[data-status="issued"]           .tk-col-dot { background: var(--st-open-fg); }
.tk-col[data-status="in_progress"]      .tk-col-dot { background: var(--st-prog-fg); }
.tk-col[data-status="pending_approval"] .tk-col-dot { background: var(--st-rev-fg); }
.tk-col[data-status="done"]             .tk-col-dot { background: var(--st-ok-fg); }
.tk-col[data-status="cancelled"]        .tk-col-dot { background: var(--st-open-fg); }

/* ---------- Card ---------- */
.tk-card {
  background: var(--tk-card); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-sm); padding: var(--sp-3); margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-smooth, ease), box-shadow .18s ease, border-color .18s ease;
}
.tk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--tk-mut); }
.tk-card:last-child { margin-bottom: 0; }
.tk-card-title {
  font-weight: 600; font-size: var(--text-callout); line-height: 1.35;
  color: var(--tk-ink); margin-bottom: var(--sp-2);
}

/* ---------- Meta chips ---------- */
.tk-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); align-items: center; }
.tk-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--text-micro); font-weight: 500; line-height: 1;
  padding: .26rem .5rem; border-radius: var(--r-pill);
  background: var(--tk-chip-bg); color: var(--tk-mut); white-space: nowrap;
}
.tk-chip.assignee { color: var(--tk-ink); }
.tk-chip.assignee::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pt-a-fg); opacity: .7;
}
.tk-chip.due::before { content: "🕑"; font-size: .78em; opacity: .7; }
.tk-chip.line { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: -.01em; }
/* exam_label (모의고사 회차) — 외곽선 칩(채운 line 칩과 시각 구분). subtle outlined. */
.tk-chip.tk-exam {
  background: transparent; color: var(--pt-b-fg);
  border: 1px solid var(--pt-b-fg); font-weight: 600; gap: .28rem;
}

/* ptype colored chip */
.tk-ptype { font-weight: 700; letter-spacing: .02em; padding: .26rem .55rem; }
.tk-ptype[data-p="A"] { color: var(--pt-a-fg); background: var(--pt-a-bg); }
.tk-ptype[data-p="B"] { color: var(--pt-b-fg); background: var(--pt-b-bg); }
.tk-ptype[data-p="C"] { color: var(--pt-c-fg); background: var(--pt-c-bg); }
.tk-ptype[data-p="ETC"] { color: var(--pt-etc-fg); background: var(--pt-etc-bg); }

/* reason (반려) */
.tk-reason {
  font-size: var(--text-micro); color: var(--st-esc-fg);
  background: var(--st-esc-bg); border-radius: var(--r-xs);
  padding: .34rem .5rem; margin-bottom: var(--sp-2); line-height: 1.4;
}

/* ---------- Actions ---------- */
.tk-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tk-actions button {
  font-size: var(--text-micro); font-weight: 600; padding: .34rem .62rem;
  border-radius: var(--r-xs); border: 1px solid var(--tk-card-line);
  background: var(--tk-card); color: var(--tk-ink); cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.tk-actions button:hover { background: var(--tk-chip-bg); }
.tk-actions button:active { transform: scale(.96); }
.tk-actions button.primary { background: var(--st-ok-fg); color: #fff; border-color: transparent; }
.tk-actions button.primary:hover { filter: brightness(1.06); }
.tk-actions button.warn { background: var(--st-esc-fg); color: #fff; border-color: transparent; }
.tk-actions button.warn:hover { filter: brightness(1.06); }

/* ── 첨부 스크린샷: 썸네일 + 라이트박스 (7e41) ─────────────────────── */
.tk-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tk-thumb {
  width: 54px; height: 54px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--tk-card-line); cursor: zoom-in; background: var(--tk-chip-bg);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tk-thumb:hover { transform: scale(1.05); box-shadow: var(--shadow-md); border-color: var(--tk-mut); }
.tk-attach {
  display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
  font-size: var(--text-micro); color: var(--tk-mut); padding: .2rem .5rem;
  border: 1px dashed var(--tk-card-line); border-radius: 999px; margin-bottom: var(--sp-2);
  transition: color .12s ease, border-color .12s ease;
}
.tk-attach:hover { color: var(--tk-ink); border-color: var(--tk-mut); }


/* empty column */
.tk-empty { font-size: var(--text-micro); color: var(--tk-mut); opacity: .7;
  text-align: center; padding: var(--sp-4) 0; }
/* ★2026-08-12 SV: 0건 칼럼은 258px 자리를 통째로 먹었다(빈 상자 3개가 나란히).
   몸통만 접고 **머리(라벨 + 0 카운트 칩)는 남긴다** — 0건 정보 삭제 0.
   폰(mobile.css)은 .tk-col 이 !important 로 100% 폭이라 여기 flex 가 안 먹고,
   머리 한 줄만 남는 결과는 동일하다(아코디언 기본 접힘과 겹쳐도 무해). */
.tk-col-empty { flex: 0 0 auto; padding-bottom: var(--sp-2); }
.tk-col-empty .tk-empty { display: none; }
.tk-col-empty .tk-col-head { padding-bottom: .2rem; }

/* ============================================================
   Personal dashboard
   ============================================================ */
.tk-dash-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.tk-panel {
  background: var(--tk-card); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.tk-panel h2 {
  font-size: var(--text-caption); font-weight: 700; color: var(--tk-mut);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--sp-4);
}

/* progress */
.tk-prog-stats { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.tk-stat { display: flex; flex-direction: column; gap: 2px; }
.tk-stat .n { font-size: var(--text-headline); font-weight: 700; color: var(--tk-ink);
  font-family: var(--font-tabular); line-height: 1; }
.tk-stat .l { font-size: var(--text-micro); color: var(--tk-mut); }
.tk-bar { height: 10px; border-radius: var(--r-pill); background: var(--tk-chip-bg); overflow: hidden; display: flex; }
.tk-bar > span { display: block; height: 100%; }
.tk-bar .seg-ok { background: var(--st-ok-fg); }
.tk-bar .seg-prog { background: var(--st-prog-fg); }
.tk-bar .seg-open { background: var(--st-open-fg); opacity: .5; }
.tk-bar-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--text-micro); color: var(--tk-mut); }
.tk-bar-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.tk-bar-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* upcoming / notification lists */
.tk-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--tk-chip-bg);
}
.tk-item .body { min-width: 0; flex: 1; }
.tk-item .title { font-size: var(--text-callout); font-weight: 500; color: var(--tk-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-item .sub { font-size: var(--text-micro); color: var(--tk-mut); margin-top: 2px; }
.tk-due-pill {
  font-size: var(--text-micro); font-weight: 700; flex: 0 0 auto;
  padding: .24rem .5rem; border-radius: var(--r-pill);
  background: var(--st-prog-bg); color: var(--st-prog-fg);
}
.tk-due-pill.soon { background: var(--st-rev-bg); color: var(--st-rev-fg); }
.tk-due-pill.urgent { background: var(--st-esc-bg); color: var(--st-esc-fg); }

/* notification kind dot */
.tk-note-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tk-note-dot.approved { background: var(--st-ok-fg); }
.tk-note-dot.rework   { background: var(--st-esc-fg); }
.tk-note-dot.assigned { background: var(--st-prog-fg); }


/* ============================================================
   Shared polish (4a48) — composer CTA proportion
   ------------------------------------------------------------
   전역 button.primary(12px 20px)는 tk 입력칸(.42rem) 대비 과대.
   컴포저(발행/개설) 1차 CTA를 입력칸 스케일에 맞춰 정렬.
   색·동작은 전역 primary 유지(브랜드 블루) — 크기만 조정.
   ============================================================ */
.tk-new .primary { padding: .5rem 1.1rem; font-size: var(--text-callout); box-shadow: none; }


/* ============================================================
   84f9 대시보드 4카드 재편 — 업무 일지 + 2/3/4 카드 그리드
   기존 .tk-* 토큰 재사용. 신규 클래스만 추가(외과적).
   ============================================================ */
.tk-diary { margin-top: var(--sp-4); }
.tk-diary-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); flex-wrap: wrap; }
.tk-diary-date { font-family: var(--font-tabular); font-weight: 700; color: var(--tk-ink);
  font-size: var(--text-body); letter-spacing: -.01em; }
/* ★SV-5623: word-break 는 **한국어 어절 단위**로 끊는다(.dz-hero h1 과 같은 규칙).
   날짜 옆에 생일 요약이 붙으면서 이 줄이 길어졌는데, 기본 break-word 로는
   "안녕하세/요," 처럼 낱말 한가운데가 잘렸다(390px 실측). 캡션 줄 전용이다. */
.tk-diary-hi { color: var(--tk-mut); font-size: var(--text-caption); margin-left: var(--sp-3);
  word-break: keep-all; }

/* 오늘 자동 요약 4-count (tabular, prominent) */
.tk-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin: var(--sp-4) 0; }
.tk-sum .tk-stat { background: var(--tk-chip-bg); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); gap: 4px; }
.tk-sum .tk-stat .n { font-size: var(--text-title); font-family: var(--font-tabular);
  font-weight: 700; color: var(--tk-ink); line-height: 1; }
.tk-sum .tk-stat .l { font-size: var(--text-micro); color: var(--tk-mut); }

/* 2/3/4 카드 그리드 — 넓으면 2열(일정=왼쪽 세로 span·399d), 좁으면 1열 */
.tk-dash-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-top: var(--sp-4); align-items: start; }
.tk-card-schedule { grid-column: 1; grid-row: 1 / span 2; }
.tk-dash-grid2 > .tk-panel:nth-child(1) { grid-column: 2; grid-row: 1; }
.tk-dash-grid2 > .tk-panel:nth-child(3) { grid-column: 2; grid-row: 2; }

/* 카드 내 소제목 — 여러 섹션을 한 카드에 그루핑 */
.tk-subhead { font-size: var(--text-caption); font-weight: 700; color: var(--tk-mut);
  text-transform: uppercase; letter-spacing: .04em; margin: var(--sp-5) 0 var(--sp-3); }

@media (max-width: 860px) {
  .tk-dash-grid2 { grid-template-columns: 1fr; }
  .tk-card-schedule,
  .tk-dash-grid2 > .tk-panel:nth-child(1),
  .tk-dash-grid2 > .tk-panel:nth-child(3) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .tk-sum { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   e57b — TICKET metaphor: ONE shared .tk-* ticket component
   ------------------------------------------------------------
   실제 티켓(입장권) 은유를 board 카드 · 내 문항 티켓(.tk-mq) ·
   회의실 🎫 칩에 공통 적용. 순수 CSS/마크업 — 상태머신·라우트·JS 무변경.
   색은 기존 토큰만 사용(--pt-*, --st-*). stub 색은 컨테이너가
   --stub-c/--stub-bg 로 주입(board=ptype, 내문항=status) → 정의는 1곳.
   ============================================================ */

/* 카드를 stub(왼쪽 색띠) | body 2단으로 — .tk-card 클래스/데이터속성 무변경(JS 의존) */
.tk-card { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.tk-card > .tk-body { flex: 1 1 auto; min-width: 0; padding: var(--sp-3); }

/* ① 왼쪽 색 stub 띠  ② 점선 tear line(오른쪽 경계) */
.tk-stub {
  flex: 0 0 44px; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: var(--sp-3) .2rem;
  background: var(--stub-bg, var(--tk-chip-bg));
  color: var(--stub-c, var(--tk-mut));
  border-right: 1.5px dashed var(--tk-card-line);
  position: relative;
}
/* stub 왼쪽 끝 solid 색 밴드(ptype/status 색 강조) */
.tk-stub::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--stub-c, var(--tk-mut)); opacity: .9;
}
/* ③ 도드라지는 티켓 번호 #001 (tabular, stub 색) */
.tk-num {
  font-family: var(--font-tabular); font-weight: 800; font-size: 12.5px;
  letter-spacing: -.03em; line-height: 1; color: var(--stub-c, var(--tk-ink));
  white-space: nowrap;
}
/* stub 안 ptype 글자(작은 원형 배지) */
.tk-stub-p {
  font-size: 10px; font-weight: 800; line-height: 1;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--stub-c, var(--tk-mut));
}

/* board 카드: stub 색 = ptype 토큰(카드 위 tk-ptype 칩과 일치) */
.tk-card[data-p="A"] { --stub-c: var(--pt-a-fg); --stub-bg: var(--pt-a-bg); }
.tk-card[data-p="B"] { --stub-c: var(--pt-b-fg); --stub-bg: var(--pt-b-bg); }
.tk-card[data-p="C"] { --stub-c: var(--pt-c-fg); --stub-bg: var(--pt-c-bg); }
.tk-card[data-p="ETC"] { --stub-c: var(--pt-etc-fg); --stub-bg: var(--pt-etc-bg); }

/* ④ body 상단: 제목 + 상태 스탬프 한 줄 */
.tk-card-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.tk-card-top .tk-card-title { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

/* ⑤ 상태 배지 = 고무 스탬프(대기/진행/검토/승인/반려) — 값/전이 무변경, 스타일만 */
.tk-stamp {
  flex: 0 0 auto; align-self: flex-start;
  display: inline-block; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; line-height: 1.2;
  padding: .2rem .46rem; border-radius: 4px;
  color: var(--st-open-fg);
  border: 1.5px solid currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 22%, transparent);
  transform: rotate(-3deg); transform-origin: center;
  opacity: .92;
}
.tk-stamp[data-st="in_progress"]      { color: var(--st-prog-fg); }
.tk-stamp[data-st="pending_approval"]  { color: var(--st-rev-fg); }
.tk-stamp[data-st="done"]              { color: var(--st-ok-fg); }
.tk-stamp[data-st="cancelled"]         { color: var(--st-open-fg); opacity: .7; }

/* ── 내 문항 티켓(.tk-mq): 같은 ticket family(익명 유지 — 번호는 신원 아님) ── */
.tk-mq { padding: 0; overflow: hidden; align-items: stretch; }
.tk-mq > .tk-stub { flex: 0 0 40px; }
.tk-mq .tk-mq-body { padding: 10px 12px 10px 4px; }
.tk-mq .tk-mq-thumb { margin: 10px 0 10px 0; }
/* 내 문항 stub 색 = status 토큰(여기 표시되는 스탬프와 일치) */
.tk-mq[data-st="in_progress"]      { --stub-c: var(--st-prog-fg); --stub-bg: var(--st-prog-bg); }
.tk-mq[data-st="pending_approval"] { --stub-c: var(--st-rev-fg);  --stub-bg: var(--st-rev-bg); }
.tk-mq[data-st="done"]             { --stub-c: var(--st-ok-fg);   --stub-bg: var(--st-ok-bg); }
.tk-mq[data-st="cancelled"]        { --stub-c: var(--st-open-fg); --stub-bg: var(--st-open-bg); }

/* ── 회의실 🎫 칩: mini 티켓 태그(같은 family) — er-badge / rm-chip.tk 에 부여 ── */
.tk-tkt {
  position: relative; padding-left: 1.15rem !important;
  font-family: var(--font-tabular); font-weight: 700; letter-spacing: -.01em;
}
.tk-tkt::before {
  content: ""; position: absolute; left: .48rem; top: 15%; bottom: 15%;
  border-left: 1.5px dashed currentColor; opacity: .55;
}

/* ============================================================
   c7b9 — TICKET card CONTENT refine: hierarchy + compaction
   순수 시각(CSS+마크업) — 상태머신·라우트·JS·이중맹검 무변경.
   1st-read = 제목 + ptype(stub) + stamp / 2nd-read = 촘촘한 meta.
   e57b 요소(stub/tear/#num/stamp)는 그대로 두고 body 밀도만 조정.
   ============================================================ */

/* body 세로 리듬: 쌓인 margin → 균일 gap 으로 교체(사이 여백 낭비 제거) */
.tk-card > .tk-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.tk-card > .tk-body > * { margin: 0; }

/* ① 제목 = 최우선 first-read: 더 굵게 + 2줄 clamp(카드 높이 균일화) */
.tk-card-top { gap: var(--sp-2); margin: 0; align-items: flex-start; }
.tk-card-top .tk-card-title {
  font-size: .9rem; font-weight: 700; line-height: 1.32; color: var(--tk-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ② meta = 촘촘한 2nd-read: 담당·라인·마감 = 가벼운 middot 행, 모의고사 = subtle 칩 */
.tk-body .tk-meta { gap: 4px 7px; margin: 0; align-items: center; }
.tk-mrow {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  min-width: 0; font-size: 11px; line-height: 1.3; color: var(--tk-mut);
}
.tk-mrow .tk-m { white-space: nowrap; }
.tk-mrow .tk-m + .tk-m::before { content: "·"; margin: 0 .36rem; opacity: .5; }
.tk-mrow .assignee { color: var(--tk-ink); font-weight: 600; }
.tk-mrow .assignee::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pt-a-fg); opacity: .7; margin-right: .3rem; vertical-align: middle;
}
.tk-mrow .line { font-family: var(--font-mono); font-size: 10px; letter-spacing: -.01em; }
.tk-mrow .due::before { content: "🕑 "; font-size: .82em; opacity: .7; }
/* 모의고사(exam) = 얇은 외곽선 태그, 길면 말줄임(카드 폭 폭주 방지) */
.tk-body .tk-chip.tk-exam {
  font-size: 10.5px; padding: .16rem .42rem; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
}

/* ③ reason·attach·actions — 남는 세로 여백 정리(정보 유지, 밀도만 ↑) */
.tk-body .tk-reason { font-size: 11px; padding: .3rem .46rem; line-height: 1.35; }
.tk-body .tk-attach { align-self: flex-start; padding: .16rem .46rem; }
.tk-body .tk-actions { gap: 6px; }

/* ★28ad 카드 밀도 — 「📎 첨부」가 자기 줄을 통째로 쓰던 것을 **버튼 줄과 같은 행**으로.
   마크업 무변경(그리드 배치만) · 표시 텍스트 삭제 0 · 버튼은 그대로 오른쪽.
   블록 자식들의 암묵 여백도 gap 하나로 통일된다(측정에서 정체불명 21px 이 여기 있었다). */
.tk-card > .tk-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px;
  align-content: start;
}
.tk-body > .tk-card-top,
.tk-body > .tk-meta,
.tk-body > .tk-reason,
.tk-body > .tk-thumbs { grid-column: 1 / -1; }
.tk-body > .tk-attach  { grid-column: 1; justify-self: start; align-self: center; margin: 0; }
.tk-body > .tk-actions { grid-column: 2; justify-self: end; align-items: center; }
.tk-body .tk-actions button { padding: .3rem .56rem; }
.tk-body .tk-thumb { width: 46px; height: 46px; }

/* ④ 내 문항 티켓(.tk-mq) — 같은 family: 제목 2줄 clamp + meta 촘촘(익명 유지) */
.tk-mq .tk-mq-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.tk-mq .tk-mq-meta { gap: 5px; margin-top: 5px; align-items: center; }


/* ============================================================
   Ticket DETAIL view (e1ae) — 발부→수정→재검토→승인 상세.
   기존 --tk-*/--st-*/--pt-* 토큰만 재사용(신규 색 정의 없음). 라이트/다크 동시.
   ============================================================ */
.tkd-wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.tkd-back {
  align-self: flex-start; font-size: var(--text-caption); color: var(--tk-mut);
  text-decoration: none; padding: .28rem .1rem; transition: color .14s ease;
}
.tkd-back:hover { color: var(--tk-ink); }

/* ── 헤더: 스텁 색띠 + 본문 ── */
.tkd-header {
  display: flex; align-items: stretch; gap: 0; overflow: hidden;
  background: var(--tk-card); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.tkd-header[data-p="A"] { --stub-c: var(--pt-a-fg); --stub-bg: var(--pt-a-bg); }
.tkd-header[data-p="B"] { --stub-c: var(--pt-b-fg); --stub-bg: var(--pt-b-bg); }
.tkd-header[data-p="C"] { --stub-c: var(--pt-c-fg); --stub-bg: var(--pt-c-bg); }
.tkd-header[data-p="ETC"] { --stub-c: var(--pt-etc-fg); --stub-bg: var(--pt-etc-bg); }
.tkd-header > .tk-stub { flex: 0 0 62px; }
.tkd-header .tk-num { font-size: 15px; }
.tkd-head-body { flex: 1 1 auto; min-width: 0; padding: var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.tkd-head-top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.tkd-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--text-title); line-height: 1.3; color: var(--tk-ink); letter-spacing: -.01em; }
.tkd-head-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ── 패널 공통 ── */
.tkd-panel {
  background: var(--tk-card); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm);
}
.tkd-panel-h {
  font-size: var(--text-caption); font-weight: 700; color: var(--tk-mut);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}
.tkd-count {
  font-size: var(--text-micro); font-weight: 700; color: var(--tk-mut);
  background: var(--tk-chip-bg); border-radius: var(--r-pill); padding: .05rem .5rem;
}

/* ── 타임라인 스텝퍼(가로 → 좁으면 세로) ── */
.tkd-timeline {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0;
}
.tkd-step {
  flex: 1 1 0; position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: .3rem; padding: 0 .3rem;
}
/* 연결선 — 스텝 사이 */
.tkd-step::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--tk-card-line); z-index: 0;
}
.tkd-step:first-child::before { display: none; }
.tkd-step.is-done::before { background: var(--st-ok-fg); }
.tkd-dot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; line-height: 1;
  background: var(--tk-card); border: 2px solid var(--tk-card-line); color: var(--tk-mut);
}
.tkd-step.is-done .tkd-dot { background: var(--st-ok-fg); border-color: var(--st-ok-fg); color: #fff; }
.tkd-step.is-current .tkd-dot {
  border-color: var(--st-prog-fg); color: var(--st-prog-fg);
  box-shadow: 0 0 0 4px var(--st-prog-bg);
}
.tkd-step-label { font-size: var(--text-callout); font-weight: 700; color: var(--tk-ink); }
.tkd-step.is-future .tkd-step-label { color: var(--tk-mut); }
.tkd-step-role {
  font-size: var(--text-micro); font-weight: 600; color: var(--tk-mut);
  background: var(--tk-chip-bg); border-radius: var(--r-pill); padding: .04rem .46rem;
}
.tkd-step.is-current .tkd-step-role { color: var(--st-prog-fg); background: var(--st-prog-bg); }
.tkd-step-when { font-size: var(--text-micro); color: var(--tk-mut); font-family: var(--font-tabular); }

.tkd-flag { margin: var(--sp-3) 0 0; font-size: var(--text-caption); font-weight: 600; padding: .4rem .6rem; border-radius: var(--r-xs); }
.tkd-flag.esc { color: var(--st-esc-fg); background: var(--st-esc-bg); }
.tkd-flag.cancel { color: var(--tk-mut); background: var(--tk-chip-bg); }

/* ── 본문 / 이력 ── */
.tkd-body-title { font-size: var(--text-body); font-weight: 600; color: var(--tk-ink); line-height: 1.5; }
.tkd-reason { margin-top: var(--sp-3); }
.tkd-history { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tkd-hist-row { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--text-caption); flex-wrap: wrap; }
.tkd-hist-badge {
  font-size: var(--text-micro); font-weight: 700; padding: .06rem .42rem; border-radius: var(--r-xs);
  color: var(--tk-mut); background: var(--tk-chip-bg);
}
.tkd-hist-row.is-rework .tkd-hist-badge { color: var(--st-esc-fg); background: var(--st-esc-bg); }
.tkd-hist-role { font-weight: 700; color: var(--tk-mut); }
.tkd-hist-reason { flex: 1 1 160px; color: var(--tk-ink); }
.tkd-hist-when { color: var(--tk-mut); font-family: var(--font-tabular); font-size: var(--text-micro); }

/* ── 코멘트 스레드 ── */
.tkd-thread { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tkd-comment {
  border: 1px solid var(--tk-card-line); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); background: var(--tk-chip-bg);
}
.tkd-comment.is-mine { border-color: var(--st-prog-fg); background: var(--st-prog-bg); }
.tkd-c-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: .3rem; }
.tkd-c-role { font-size: var(--text-caption); font-weight: 800; color: var(--tk-ink); }
.tkd-c-role[data-role="PM"] { color: var(--pt-c-fg); }
.tkd-c-role[data-role="검토자"] { color: var(--st-rev-fg); }
.tkd-c-role[data-role="출제자"] { color: var(--st-prog-fg); }
.tkd-c-when { font-size: var(--text-micro); color: var(--tk-mut); font-family: var(--font-tabular); }
.tkd-c-body { font-size: var(--text-callout); color: var(--tk-ink); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tkd-empty { font-size: var(--text-caption); color: var(--tk-mut); opacity: .8; padding: var(--sp-2) 0; list-style: none; }
.tkd-c-form { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
/* ★6cd4 ⑥ 코멘트 이미지 첨부 pill — 숨긴 file input 의 라벨(보드 첨부와 같은 모양) */
.tkd-c-attach { flex: 0 0 auto; margin-bottom: 0; align-self: flex-end; }
.tkd-c-form textarea {
  flex: 1 1 auto; resize: vertical; min-height: 42px; font-family: inherit;
  font-size: var(--text-callout); padding: .5rem .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--tk-card-line); background: var(--tk-card); color: var(--tk-ink);
}
.tkd-c-form textarea:focus { outline: none; border-color: var(--pt-a-fg); box-shadow: 0 0 0 3px var(--pt-a-bg); }
.tkd-c-form button {
  flex: 0 0 auto; font-size: var(--text-caption); font-weight: 700; padding: .5rem .9rem;
  border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  background: var(--st-ok-fg); color: #fff; transition: filter .14s ease;
}
.tkd-c-form button:hover { filter: brightness(1.06); }

/* ── CTA ── */
.tkd-cta .tkd-actions { gap: var(--sp-3); }
.tkd-cta .tkd-actions button { font-size: var(--text-callout); padding: .5rem .9rem; border-radius: var(--r-sm); }

/* ── 반응형: 좁은 화면에서 타임라인 세로 ── */
@media (max-width: 640px) {
  .tkd-timeline { flex-direction: column; gap: var(--sp-3); }
  .tkd-step { flex-direction: row; text-align: left; justify-content: flex-start; gap: var(--sp-3); }
  .tkd-step::before { top: -50%; left: 15px; width: 2px; height: 100%; }
  .tkd-step:first-child::before { display: block; }
  .tkd-step-when { margin-left: auto; }
}

/* 보드 카드 제목을 상세뷰 링크로 — 밑줄/색 상속(신원 아님, 번호 기반 이동) */
.tk-card-title.tk-open { text-decoration: none; color: var(--tk-ink); cursor: pointer; display: block; }
.tk-card-title.tk-open:hover { color: var(--pt-a-fg); text-decoration: underline; }


/* ============================================================
   7096 — DETAIL view contrast / WCAG AA fix
   순수 시각(CSS+wrapper class). 상태머신·라우트·JS·CTA 노출로직·이중맹검 무변경.
   ROOT CAUSE: .tkd-wrap 이 .tk-page 스코프 밖이라 --tk-*/--st-* 토큰이 미정의 →
   CTA 버튼 배경이 transparent 로 fallback, 흰 글자가 안 보여 disabled 처럼 보임
   (장호님 지적). 템플릿에 tk-page 부여로 토큰 복원 + 아래에서 (1) CTA 색을
   semantic·AA 로, (2) 타임라인/코멘트 muted 서브텍스트를 AA(>=4.5:1)로 darken.
   .tkd-* 스코프 한정 — board/dashboard 무변경. muted 는 리터럴 hex(#5c6a80,
   dark #aab4c6)로 확정(런타임 측정치 반영).
   측정(흰 배경 대비): primary #1B6FD4=4.92, danger #c1502f=4.71, secondary ink=14.1,
   muted #5c6a80=5.49, is-current role #155BB0=5.68, comment 검토자 #8f5e12=5.56.
   ============================================================ */

/* ── CTA: 채운 배경 + 고대비 글자(ghost/near-white 제거) ── */
/* primary rule → 파일 끝으로 이동(그룹 셀렉터 파싱 이슈 회피, 단일 셀렉터 분리) */
/* danger(재반려) = 기존 escalation 토큰(흰 글자 4.71:1) */
.tkd-cta .tkd-actions button.warn { background: var(--st-esc-fg); color: #fff; border-color: transparent; }
:root[data-theme="dark"] .tkd-wrap .tkd-cta .tkd-actions button.warn { background: #b53a1e; }
/* secondary(착수·취소) = 틴트 + 뚜렷한 테두리(투명 아님) + 잉크 글자(14.1:1) */
.tkd-cta .tkd-actions button:not(.primary):not(.warn) {
  background: var(--tk-chip-bg); color: var(--tk-ink); border: 1.5px solid #5c6a80;
}
.tkd-cta .tkd-actions button:not(.primary):not(.warn):hover {
  background: var(--st-prog-bg); border-color: var(--st-prog-fg); color: var(--st-prog-fg);
}

/* ── 타임라인/이력/카운트/헤더/back: muted 서브텍스트 AA (#5c6a80=5.49:1 on white) ── */
.tkd-step-role, .tkd-step-when,
.tkd-hist-role, .tkd-hist-when, .tkd-hist-badge,
.tkd-c-when, .tkd-count, .tkd-empty,
.tkd-panel-h, .tkd-back,
.tkd-step.is-future .tkd-step-label { color: #5c6a80; }
.tkd-step.is-current .tkd-step-role { color: var(--primary-dark); background: var(--st-prog-bg); }

/* ── 코멘트 작성자 ROLE 색 AA(검토자 갈색 토큰 #b7791b=3.64:1 미달 → #8f5e12=5.56:1) ── */
.tkd-c-role[data-role="검토자"] { color: #8f5e12; }

/* ── Dark: muted 를 밝은 회색으로(다크 카드 위 legible) ── */
:root[data-theme="dark"] .tkd-wrap .tkd-step-role,
:root[data-theme="dark"] .tkd-wrap .tkd-step-when,
:root[data-theme="dark"] .tkd-wrap .tkd-hist-role,
:root[data-theme="dark"] .tkd-wrap .tkd-hist-when,
:root[data-theme="dark"] .tkd-wrap .tkd-hist-badge,
:root[data-theme="dark"] .tkd-wrap .tkd-c-when,
:root[data-theme="dark"] .tkd-wrap .tkd-count,
:root[data-theme="dark"] .tkd-wrap .tkd-empty,
:root[data-theme="dark"] .tkd-wrap .tkd-panel-h,
:root[data-theme="dark"] .tkd-wrap .tkd-back,
:root[data-theme="dark"] .tkd-wrap .tkd-step.is-future .tkd-step-label { color: #aab4c6; }
:root[data-theme="dark"] .tkd-wrap .tkd-cta .tkd-actions button:not(.primary):not(.warn) { border-color: #aab4c6; }
:root[data-theme="dark"] .tkd-wrap .tkd-c-role[data-role="검토자"] { color: var(--st-rev-fg); }

/* primary(수정완료·최종승인·등록) = 브랜드 블루 + 흰 글자 (4.92:1) — 단일 셀렉터 분리 */
.tkd-cta .tkd-actions button.primary { background: var(--primary); color: #fff; border-color: transparent; }
.tkd-cta .tkd-actions button.primary:hover { background: var(--primary-dark); filter: none; }
.tkd-c-form button.primary { background: var(--primary); color: #fff; border-color: transparent; }
.tkd-c-form button.primary:hover { background: var(--primary-dark); filter: none; }

/* c8b1: 첨부 이미지 로드 실패 시 정직한 플레이스홀더 + 상세 썸네일 가독 크기 */
.tk-thumb-missing{display:inline-flex;align-items:center;justify-content:center;
  min-width:88px;height:64px;padding:0 10px;border:1px dashed var(--line);border-radius:8px;
  font-size:11px;color:var(--gray);background:var(--bg)}
.tkd-thumbs .tk-thumb{width:120px;height:120px;object-fit:cover}

@media (min-width: 1180px) {
  .tk-board { overflow-x: visible; }
  .tk-board .tk-col { flex: 1 1 0; }
  .tk-board .tk-col.tk-col-empty { flex: 0 0 auto; }   /* ★빈 칼럼은 균등분배에서 뺀다 */
}

/* ★2d20 티켓 수정본 파일(hwpx·pdf) — 검토→수정 흐름의 산출물 */
.tkd-rev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tkd-rev li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.tkd-rev .rev-note { flex-basis: 100%; font-size: 12.5px; }
.tkd-rev-up { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tkd-rev-up input[type="text"] { flex: 1; min-width: 0; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; font-size: 13px; }

/* ── e48f 진행바 / 카드 단계 / 처리 이력 (기존 토큰만 사용·신규 색 0) ───────── */
.tkd-pbar { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:0 0 12px; }
.tkd-pb-dot { width:11px; height:11px; border-radius:50%; background:var(--line);
  border:1px solid var(--line); flex:0 0 auto; }
.tkd-pb-dot.is-done { background:var(--pt-a-fg); border-color:transparent; }
.tkd-pb-dot.is-current { background:var(--pt-a-bg); border-color:var(--pt-a-fg);
  box-shadow:0 0 0 3px var(--pt-a-bg); }
.tkd-pb-dot.is-cancelled { background:var(--gray); border-color:transparent; }
.tkd-pb-line { width:18px; height:2px; background:var(--line); flex:0 0 auto; }
.tkd-pb-line.is-done { background:var(--pt-a-fg); }
.tkd-pb-now { font-size:12px; font-weight:700; margin-left:6px; }
.tkd-pb-rw { font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px;
  background:var(--pt-b-bg); color:var(--pt-b-fg); }
.tkd-hist-h { font-size:12px; font-weight:800; color:var(--gray); margin:12px 0 6px; }
.tk-step { font-size:11px; font-weight:700; color:var(--gray); }


/* ============================================================
   ★6cd4 티켓보드 UX 정리 — ① 역할별 탭 · ② 승인대기 배너 · ⑤ 마감 배지
   표시 전용(권한·RBAC 무관). 모바일 가로밀림 0 = 640px 브레이크포인트는 mobile.css.
   ============================================================ */

/* ② 승인 대기 배너 — 0건이면 템플릿이 아예 렌더하지 않는다(빈 배너 금지) */
.tk-banner {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-4); padding: .55rem .85rem;
  border: 1px solid var(--st-rev-fg); border-radius: var(--r-md);
  background: var(--st-rev-bg); color: var(--tk-ink);
  font-size: var(--text-caption); line-height: 1.4;
}
.tk-banner-n {
  flex: 0 0 auto; min-width: 22px; text-align: center; font-weight: 800; font-size: 12px;
  padding: .1rem .45rem; border-radius: var(--r-pill);
  background: var(--st-rev-fg); color: #1b1409;
}
.tk-banner-t { min-width: 0; }
.tk-banner-go {
  margin-left: auto; flex: 0 0 auto; text-decoration: none; font-weight: 700;
  padding: .22rem .7rem; border-radius: var(--r-pill);
  border: 1px solid var(--st-rev-fg); color: var(--st-rev-fg);
}
.tk-banner-go:hover { background: var(--st-rev-fg); color: #1b1409; }

/* ① 탭에 없는 보기 = 작은 링크(탭 개수를 늘리지 않는다) */
.tk-sublinks { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: -.2rem 0 var(--sp-3); }
.tk-sublinks a {
  font-size: var(--text-micro, 11px); color: var(--tk-mut); text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.tk-sublinks a:hover { color: var(--tk-ink); border-bottom-color: currentColor; }
.tk-sublinks a.on { color: var(--tk-ink); font-weight: 700; }
/* 팀원 화면의 유일한 링크 — 탭처럼 보이지 않게 한 톤 낮춘다 */
.tk-filter a.tk-small-link {
  font-size: var(--text-micro, 11px); padding: .2rem .55rem; border-style: dashed;
}

/* ⑤ 마감일자 배지 — due 가 있을 때만 렌더된다(None 이면 요소 자체가 없다).
   지남 = 빨강 / 3일 내 = 주황 / 그 외 = 기본색(추가 스타일 없음). */
.tk-mrow .due.late { color: var(--high, #d9534f); font-weight: 700; }
.tk-mrow .due.soon { color: var(--st-rev-fg, #e08a2e); font-weight: 700; }

/* ============================================================
   ★6cd4 ④ 마이페이지(Work Diary) 컴팩트 — 여백만 줄인다.
   기능·권한·표시 항목 무변경(같은 수치를 두 번 그리던 중복만 템플릿에서 제거).
   스코프: .tk-compact (마이페이지 루트에만 부여 — 티켓보드는 영향 없음)
   ============================================================ */
.tk-compact .tk-head { margin-bottom: var(--sp-3); }
.tk-compact .tk-panel { padding: var(--sp-4); }
.tk-compact .tk-panel h2 { margin: 0 0 var(--sp-3); }
.tk-compact .tk-subhead { margin: var(--sp-4) 0 var(--sp-2); }
.tk-compact .tk-diary { margin-top: var(--sp-3); }
.tk-compact .tk-sum { margin: var(--sp-3) 0 0; gap: var(--sp-2); }
.tk-compact .tk-sum .tk-stat { padding: var(--sp-2) var(--sp-3); }
.tk-compact .tk-dash-grid2 { gap: var(--sp-3); margin-top: var(--sp-3); }
.tk-compact .tk-prog-stats { gap: var(--sp-4); margin-bottom: var(--sp-3); }
.tk-compact .tk-list { gap: 4px; }
.tk-compact .tk-item { padding: var(--sp-2) var(--sp-3); }
.tk-compact .tk-cal-day { min-height: 52px; }
.tk-compact .tk-turn { margin-bottom: 10px; }


/* ============================================================
   ★SV-140d 전역 알림 벨(우상단) — 종 + 안읽음 배지 + 패널
   색·타이포는 전부 기존 A안 토큰 재사용(신규 색 0): 종이 #FFFFFF / 선 rgba(40,34,24,.12) /
   글 var(--dark)·var(--gray) / 배지는 사이드바 .sn-badge 와 **같은 네이비 #17538F + #fff**.
   z-index 는 --z-sidebar(90) — 사이드바 드로어와 같은 층. 명령팔레트(200)·토스트(250) 아래다.
   ============================================================ */
.nv-bell-wrap {
  position: fixed;
  top: 8px;
  right: calc(18px + env(safe-area-inset-right, 0px));
  z-index: var(--z-sidebar);
}
/* ★PC 에서 종이 놓일 상단 띠를 **비워 둔다**. 안 비우면 화면마다 우상단에 이미 있는
   액션(마이페이지의 [내 티켓]·[내 문항 원장] 등)을 덮는다 — 실측으로 겹쳤다.
   ★폰에서 이미 쓰는 것과 **같은 패턴**이다(style.css:2576 `.app-shell main{padding-top:64px}` —
     고정 상단 컨트롤 자리를 padding 으로 비운다). 가로 폭(카드 배치)은 건드리지 않는다. */
@media (min-width: 961px) {
  .app-shell main { padding-top: 56px; }
}
.nv-bell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #FFFFFF;
  border: 1px solid rgba(40,34,24,.12);
  border-radius: 10px;
  color: #4A443A;                      /* 흰 배경 대비 8.6:1 — 신규 미달 0 */
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(40,34,24,.06);
}
.nv-bell:hover { background: #FAF8F4; color: #221E19; }
.nv-bell:focus-visible { outline: 2px solid #17538F; outline-offset: 2px; }
.nv-bell svg { width: 19px; height: 19px; }
.nv-bell-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: #17538F; color: #fff;    /* 대비 7.4:1 — .sn-badge 와 같은 쌍 */
  font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.nv-bell-badge[hidden] { display: none; }

.nv-panel {
  position: absolute; top: 48px; right: 0;
  width: 340px; max-width: calc(100vw - 24px);
  max-height: min(70vh, 520px); overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid rgba(40,34,24,.12);
  border-radius: 12px;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.10), 0 30px 60px -12px rgba(0,0,0,.14);
}
.nv-panel[hidden] { display: none; }
.nv-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 13.5px; color: #221E19;
}
.nv-panel-more { font-size: 12px; color: #17538F; text-decoration: none; }
.nv-panel-more:hover { text-decoration: underline; }
.nv-panel-body { padding: 0 8px 8px; }
.nv-empty { margin: 4px 8px 10px; font-size: 12.5px; color: #5F5849; }
/* ★SV-a912 '모두 읽음' — 열기만 해도 지워지던 것을 **누를 때만**으로 바꾸며 생긴 명시 버튼.
   색·폰트 신규 0(같은 패널의 .nv-sec-t·.nv-empty 값 재사용). */
.nv-foot { padding: 6px 8px 8px; border-top: 1px solid rgba(40,34,24,.10); text-align: right; }
.nv-readall { border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #17538F; padding: 6px 8px; border-radius: 8px;
  min-height: 32px; }
.nv-readall:hover { background: rgba(23,83,143,.09); }
.nv-sec + .nv-sec { border-top: 1px solid rgba(40,34,24,.08); margin-top: 6px; padding-top: 6px; }
.nv-sec-t {
  padding: 6px 6px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #5F5849;                      /* 흰 배경 대비 6.6:1 */
}
.nv-list { list-style: none; margin: 0; padding: 0; }
.nv-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 8px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: #221E19;
  text-decoration: none;
}
a.nv-item:hover { background: rgba(40,34,24,.055); }
.nv-item.due { font-weight: 600; }
.nv-item > span { flex: 1 1 auto; min-width: 0; }
.nv-when { flex: none; font-size: 11px; color: #5F5849; padding-top: 2px; }
.nv-dot { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #17538F; }

/* 폰 — 좌상단 햄버거가 숨겨져 비어 있는 상단 띠의 오른쪽 끝. 터치 타깃 44px.
   안전영역(노치·다이나믹아일랜드) 아래로 내린다(mobile.css 의 --sat 과 같은 규칙). */
@media (max-width: 960px) {
  .nv-bell-wrap {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .nv-bell { width: 44px; height: 44px; }
  .nv-panel { width: calc(100vw - 24px); right: 0; }
}
@media print { .nv-bell-wrap { display: none !important; } }

/* ============================================================
   폼 공통 컴포넌트 (SV-a3a9 · 2026-08-19) — 형태만 통일, 색·크기는 modifier
   ============================================================
   ★기준 톤 = 교재검토 폼(output/SV_입력칸통일_참고/2_교재검토폼_기준.png):
     카드·라운드 입력·아웃라인 파일버튼·넉넉한 패딩·조용한 라벨.
   ★형태(모양·라운드·테두리·패딩·폰트·포커스링·hover/focus)만 공통이다.
     색·크기는 맥락별로 달라도 되므로 modifier(--primary/--secondary, --sm/--lg)로만 가른다.
   ★additive — 기존 셀렉터(.tk-new input·.tk-actions button·.tkd-c-form 등)는 건드리지 않는다
     (무회귀). 템플릿이 vf-* 를 채택하면 그 자리에서 통일된다. 과설계 금지(최소 세트). */

/* ★액센트 확정 (SV-54cb · 2026-08-19 장호님 버튼) = #24385B 리파인드 슬레이트네이비.
   ★폼 전용 스코프 토큰 — 전역 --primary(사이트 액센트)는 건드리지 않는다(폼 통일 범위 초과 방지).
   primary=채움 네이비 / secondary=아웃라인 네이비(단일 포인트색·위계만). */
:root { --vf-accent: #24385B; --vf-accent-dark: #182740; --vf-ring: rgba(36,56,91,.18); }

/* — 라벨 + 컨트롤 묶음 — */
.vf-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.vf-label { font-size: var(--text-caption); font-weight: 600; color: var(--tk-mut); letter-spacing: -.01em; }
.vf-label .vf-req { color: var(--st-esc-fg); margin-left: .15em; }        /* (필수) 표시 */
.vf-hint { font-size: var(--text-caption); color: var(--tk-mut); }

/* — 입력 형태 공통: input·textarea·select 가 같은 모양 — */
.vf-input, .vf-textarea, .vf-select {
  width: 100%; font: inherit; font-size: var(--text-body); color: var(--tk-ink);
  background: var(--tk-card-bg, #fff); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-md); padding: .55rem .7rem; transition: border-color .12s, box-shadow .12s;
}
.vf-input::placeholder, .vf-textarea::placeholder { color: var(--tk-mut); }
.vf-textarea { min-height: 4.5rem; resize: vertical; line-height: 1.5; }
.vf-select { appearance: none; padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23726858' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; }
.vf-input:hover, .vf-textarea:hover, .vf-select:hover { border-color: var(--tk-mut); }
/* ★포커스링 = 폼 액센트(--vf-accent) 통일 */
.vf-input:focus, .vf-textarea:focus, .vf-select:focus {
  outline: none; border-color: var(--vf-accent); box-shadow: 0 0 0 3px var(--vf-ring); }

/* — 파일 선택(아웃라인, 기준 폼의 「파일 선택」 모양) — */
.vf-file::file-selector-button {
  font: inherit; font-size: var(--text-callout); font-weight: 600; color: var(--tk-ink);
  background: var(--tk-card-bg, #fff); border: 1px solid var(--tk-card-line);
  border-radius: var(--r-sm); padding: .4rem .8rem; margin-right: .7rem; cursor: pointer;
  transition: background .12s, border-color .12s; }
.vf-file::file-selector-button:hover { background: var(--tk-chip-bg); border-color: var(--tk-mut); }

/* — 버튼 형태 공통(라운드·패딩·전이·active). 색은 modifier 로만 — */
.vf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: inherit; font-size: var(--text-callout); font-weight: 600; line-height: 1;
  border: 1px solid var(--tk-card-line); border-radius: var(--r-md); padding: .55rem 1.1rem;
  background: var(--tk-card-bg, #fff); color: var(--tk-ink); cursor: pointer;
  transition: filter .12s, background .12s, border-color .12s, transform .08s; }
.vf-btn:hover { background: var(--tk-chip-bg); }
.vf-btn:active { transform: scale(.97); }
.vf-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* 색 modifier — 형태는 위와 동일, 색만 바뀐다. 폼 액센트 = --vf-accent(네이비) */
.vf-btn--primary { background: var(--vf-accent); color: #fff; border-color: transparent; }
.vf-btn--primary:hover { background: var(--vf-accent-dark); filter: none; }
.vf-btn--secondary { background: transparent; color: var(--vf-accent); border-color: var(--vf-accent); }
.vf-btn--secondary:hover { background: var(--vf-ring); }
/* 크기 modifier — 형태 분기 0, 패딩·폰트만 */
.vf-btn--sm { font-size: var(--text-caption); padding: .35rem .7rem; }
.vf-btn--lg { font-size: var(--text-body); padding: .7rem 1.4rem; }

/* — 토글(스위치) 형태 공통 — */
.vf-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.vf-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.vf-toggle .vf-track {
  width: 2.2rem; height: 1.25rem; border-radius: 999px; background: var(--tk-card-line);
  transition: background .14s; flex: none; }
.vf-toggle .vf-thumb {
  position: absolute; left: .18rem; width: .9rem; height: .9rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .14s; }
.vf-toggle input:checked ~ .vf-track { background: var(--vf-accent); }
.vf-toggle input:checked ~ .vf-thumb { transform: translateX(.95rem); }
.vf-toggle input:focus-visible ~ .vf-track { box-shadow: 0 0 0 3px var(--vf-ring); }