/* ============================================================
   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; }
/* c8b1: 1440px 화면에서 마지막(에스컬) 칼럼이 잘려 보였다 — 넓은 화면에선 칼럼을
   균등 분배해 전 칼럼이 한 화면에 들어오게 하고, 좁아지면 기존 가로 스크롤로 복귀. */
.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 */
.tk-col[data-status="open"]        .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="in_review"]   .tk-col-dot { background: var(--st-rev-fg); }
.tk-col[data-status="escalated"]   .tk-col-dot { background: var(--st-esc-fg); }
.tk-col[data-status="approved"]    .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); }

/* 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); }
.tk-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: var(--sp-5);
  background: rgba(0,0,0,.78); cursor: zoom-out;
}
.tk-lightbox.is-open { display: flex; }
.tk-lightbox img {
  max-width: 92vw; max-height: 90vh; border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}


/* empty column */
.tk-empty { font-size: var(--text-micro); color: var(--tk-mut); opacity: .7;
  text-align: center; padding: var(--sp-4) 0; }

/* ============================================================
   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; }
.tk-diary-hi { color: var(--tk-mut); font-size: var(--text-caption); margin-left: var(--sp-3); }

/* 오늘 자동 요약 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); }

/* ④ 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="open"]        { color: var(--st-open-fg); }
.tk-stamp[data-st="in_progress"] { color: var(--st-prog-fg); }
.tk-stamp[data-st="in_review"]   { color: var(--st-rev-fg); }
.tk-stamp[data-st="approved"]    { color: var(--st-ok-fg); }
.tk-stamp[data-st="escalated"]   { color: var(--st-esc-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="open"]        { --stub-c: var(--st-open-fg); --stub-bg: var(--st-open-bg); }
.tk-mq[data-st="in_progress"] { --stub-c: var(--st-prog-fg); --stub-bg: var(--st-prog-bg); }
.tk-mq[data-st="in_review"]   { --stub-c: var(--st-rev-fg);  --stub-bg: var(--st-rev-bg); }
.tk-mq[data-st="approved"]    { --stub-c: var(--st-ok-fg);   --stub-bg: var(--st-ok-bg); }
.tk-mq[data-st="escalated"]   { --stub-c: var(--st-esc-fg);  --stub-bg: var(--st-esc-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; }
.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 > .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; }
.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; }
}