/* P2 — 인터뷰 등록·수정 화면 전용. 기존 tokens/components 위에 얹는다. */
.iv-form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.autosave-state { font-size: var(--font-size-caption, .82rem); color: var(--color-text-muted, #667); white-space: nowrap; }

/* 등록·수정 화면은 구역 제목(「S1. 업무 식별」)을 글자로 보여주지 않는다(요건 10-33).
   제목 줄과 테두리 상자가 구역마다 세로를 먹어 스크롤이 길었다. 제목은 지우되 경계는
   남긴다 — 구역 사이 **얇은 가로선 하나**로 바꿨다. 상자(테두리 4변 + 안쪽 여백)보다
   가볍고, "여백만"보다는 경계가 분명해 입력 중에 어디가 어느 구역인지 놓치지 않는다.
   제목 문자열은 fieldset의 aria-label 로 남아 있어 화면낭독기에서는 그대로 읽힌다.
   관리 화면(항목 정의·화면 배치 미리보기)의 구역 제목은 그대로다 — 거기서는 구역이
   조작 대상이라 이름이 필요하다. 그래서 이 규칙은 전부 #iv-form 안으로 한정했다.
   **이슈 등록 화면(#issue-form)도 같은 규칙을 쓴다**(2026-09-19) — 한 이슈를 스크롤 없이
   한 화면에 담는 것이 목적이라, 구역마다 제목 줄과 상자를 두면 그것만으로 화면을 넘긴다. */
#iv-form .sec, #issue-form .sec { border: 0; border-radius: 0; padding: 0; margin: 0; }
#iv-form .work-block .sec + .sec {
  /* --color-border(#e4eafa)는 업무 카드 배경(#f4f7fe) 위에서 사실상 안 보인다 —
     실제로 그려놓고 화면에서 확인하니 선이 없는 것과 같았다. 경계가 안 보이면 제목을
     지운 의미가 없으므로 배경과 관계없이 읽히는 중성 색을 쓴다. */
  border-top: 1px solid rgba(20, 40, 90, .16);
  margin-top: .55rem; padding-top: .55rem;
}
#iv-form fieldset.card.sec,
#issue-form fieldset.card.sec { box-shadow: var(--shadow-card, 0 1px 4px rgba(20,40,90,.12)); padding: .8rem 1rem; }

/* 항목 사이 세로 간격을 줄인다(요건 10-33). 가로 간격은 그대로 — 좁히면 옆 항목과
   붙어 보인다. 터치 대상 크기는 이 값과 무관하다(입력칸 자체 높이는 안 건드렸다). */
.grid { display: grid; gap: .5rem 1rem; grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* 태블릿: 4열은 좁아지기 전에 먼저 2열로 접는다 */
@media (max-width: 900px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
/* 모바일: 항목이 잘리지 않도록 전부 1열로 접는다 */
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* 서명 화면(sign_page.html)은 읽기전용 표시라 입력칸처럼 넓게 잡을 필요가 없다(요건
   10-23) — 좁은 화면에서도 2열을 유지해 상하 스크롤을 줄인다. 긴 값(longtext·repeat)은
   기존처럼 .ff-full로 항상 한 줄 전체를 쓰므로 이 규칙과 무관하다. */
@media (max-width: 720px) {
  .grid.sign-grid.cols-2, .grid.sign-grid.cols-3, .grid.sign-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* 라벨과 입력칸 사이 여백을 줄인다(요건 10-33) — 항목 수만큼 곱해져 세로가 길어진다. */
.ff { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ff-full { grid-column: 1 / -1; }
.ff > label { font-size: .85rem; font-weight: 600; }

/* ── 항목 제목 줄 : 라벨 + 잠금 + 읽기전용 배지 + 물음표 (요건 10-35) ───────────────
   flex-wrap이라 320px에서 제목이 길어도 아이콘이 잘리지 않고 다음 줄로 접힌다. */
.ff-head { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; min-width: 0; }
.ff-head > label { margin: 0; }

/* 읽기전용 배지 — **설명과 달리 절대 숨기지 않는다.** 왜 입력이 안 되는지는 눌러 보기
   전에 알아야 한다(요건 10-35). 입력칸의 .is-readonly 회색 배경과 함께 두 겹으로 알린다. */
.ff-badge {
  font-size: .68rem; font-weight: 600; color: #667;
  background: #e9edf6; border-radius: 4px; padding: 1px .35rem; white-space: nowrap;
}

.ff-help { display: inline-flex; }

/* 보이는 원은 18px이지만 **누를 수 있는 영역은 44px**이다(요건 10-34의 터치 기준).
   ::before로 투명한 판을 깔아 넓힌다 — 아이콘을 키우면 제목 줄이 두꺼워진다. */
.ff-help-btn {
  position: relative;
  width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--color-border, #c8cedd); border-radius: 50%;
  background: #fff; color: #667;
  font-size: .72rem; line-height: 1; font-weight: 700;
  cursor: pointer;
}
.ff-help-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.ff-help-btn:focus-visible { outline: 2px solid var(--color-primary, #2b56d6); outline-offset: 2px; }
.ff-help-btn[aria-expanded="true"] { background: var(--color-primary, #2b56d6); color: #fff; border-color: transparent; }

@media (min-width: 769px) {
  .ff-help-btn::before { width: 28px; height: 28px; }
}

/* 팝오버는 물음표가 아니라 **항목 칸(.ff)**을 기준으로 놓는다. 물음표에 붙이면 그 항목이
   화면 오른쪽 끝에 있을 때 팝오버가 밖으로 삐져나간다. .ff에 묶고 max-width를 100%로
   두면 **어느 화면 폭에서도 제 칸을 넘지 않아 잘릴 수가 없다**(요건 10-35). */
.ff { position: relative; }
.ff-help-pop {
  position: absolute; z-index: 30; top: 1.7rem; left: 0;
  width: max-content; max-width: 100%;
  background: #1b2236; color: #fff;
  font-size: .78rem; font-weight: 400; line-height: 1.45;
  padding: .45rem .6rem; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(20, 40, 90, .28);
  white-space: normal; word-break: break-word;
}
.ff .req { color: #c0392b; }
.ff .lock { font-size: .8rem; }
.ff input, .ff select, .ff textarea {
  font: inherit; padding: .4rem .5rem; border: 1px solid var(--color-border, #c8cedd);
  border-radius: 6px; background: #fff; width: 100%;
}
.ff input.is-readonly, .ff .is-readonly { background: #f1f3f8; color: #556; }
.ff .hint { font-size: .75rem; color: #778; }
.ff-multi, .approver-modes { display: flex; flex-wrap: wrap; gap: .5rem; }
.chk { font-size: .85rem; font-weight: 400; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }

.work-block { margin-bottom: 1rem; border-left: 3px solid var(--color-primary, #2b56d6); }

/* 목록에서 누른 업무로 바로 이동(요건 10-45).
   상단 헤더가 sticky라 그냥 두면 지정한 업무가 헤더 뒤에 깔린다 — 그만큼 위를 띄운다.
   높이를 CSS에 박지 않는 이유 : 헤더는 화면 폭에 따라 줄 수가 달라져(390px에서는 메뉴가
   접혀 훨씬 높아진다) 고정값이면 어떤 폭에서는 반드시 어긋난다. work_focus.js가 실제
   높이를 재서 --sticky-h로 넘긴다. 스크립트가 없을 때를 대비한 기본값만 남긴다.
   **머리띠(10-42)가 이 여백 안에 들어와야 한다** — 도착 지점의 이름표가 가려지면
   10-45가 「제대로 왔는지」를 알려주지 못한다. */
.work-block { scroll-margin-top: calc(var(--sticky-h, 4.5rem) + 10px); }

/* 「제대로 왔다」를 잠깐 보여준다. 화면만 옮기고 표시가 없으면 사용자가 확인할 방법이 없다.
   **바깥 테두리로만** 준다 — 10-42가 업무 블록 맨 위에 머리띠를 붙이는 안을 검토 중이라,
   안쪽(배경·머리말)을 건드리면 그 안과 부딪힌다. 2초 뒤 스스로 사라지므로 화면에 남지 않는다. */
@keyframes wi-focus-fade {
  from { box-shadow: 0 0 0 3px rgba(43, 86, 214, .55); }
  to   { box-shadow: 0 0 0 3px rgba(43, 86, 214, 0); }
}
.work-block.wi-focus { animation: wi-focus-fade 2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  /* 움직임을 줄여 달라고 한 사용자에게는 깜빡임 대신 테두리만 잠깐 남긴다 */
  .work-block.wi-focus { animation: none; box-shadow: 0 0 0 3px rgba(43, 86, 214, .45); }
}
/* ── 업무 블록 머리띠 (요건 10-42, PL 확정 B안) ──────────────────────────────
   10-33에서 구역 제목을 없애고 10-36에서 반복행 테두리를 걷어낸 뒤 업무 블록의 경계가
   약해졌다. 좌측 파란 라인뿐이라 업무가 어디서 끝나고 시작하는지 읽히지 않았다.

   띠 색은 회사 대표색 다크 브라운을 옅게 쓴다. **파랑을 안 쓰는 것이 핵심**이다 —
   이 앱에서 파랑은 「누를 수 있다」는 신호라, 구획 표시에 파랑을 쓰면 두 뜻이 섞인다.

   좌측 파란 라인은 **남긴다.** 띠는 「여기서 시작한다」를, 라인은 「여기까지가 한 업무」라는
   범위를 알려줘 역할이 다르다. 라인을 빼면 블록이 길 때 중간에서 소속을 잃는다.

   10-45(목록에서 누른 업무로 이동)와 짝이다 — 도착 지점에 「업무 6 · IV-0003-06」 이름표가
   있어야 제대로 왔는지 즉시 읽힌다. 10-45의 2초 강조가 사라지면 그 뒤로는 이 띠가 단서다.
   그래서 10-45의 강조를 **바깥 테두리**로 둔 것이 여기서 값을 한다 — 띠(안쪽)와 겹치지 않는다.

   네 화면(등록·수정 / 상세 / RFP 보기 / 담당자 서명)이 같은 마크업을 쓰도록 맞췄다.
   한 화면만 고치면 같은 업무가 화면마다 다르게 보인다. */
.work-block { padding-top: 0; overflow: hidden; }
.work-block-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--color-brand-brown-soft);
  border-top: 2px solid var(--color-brand-brown-line);
  /* 카드 안쪽 여백(--space-4 = 16px)을 좌우로 상쇄해 띠가 블록 폭을 꽉 채운다 */
  margin: 0 calc(-1 * var(--space-4)) .6rem;
  padding: .45rem var(--space-4);
}
.work-block-head h2 { font-size: 1.05rem; margin: 0; color: var(--color-brand-brown); min-width: 0; }

/* 머리띠의 「수정」(요건 10-47).

   **띠 높이를 키우지 않는 것이 조건이다** — 10-42에서 막 확정한 모양이라 여기서 띠가
   두꺼워지면 그 결정을 되돌리는 셈이 된다. 그래서 버튼 체계(10-34)의 min-height 44px을
   그대로 쓰지 않는다. 그걸 쓰면 flex 항목의 높이가 띠 높이를 밀어 올린다(42px → 44px+).

   대신 **보이는 크기는 작게 두고 누를 수 있는 영역만 넓힌다** — 10-34가 .btn-danger-link·
   .repeat-del에 쓴 것과 같은 취지이고, 방법만 다르다(min-height 대신 덧댄 히트영역).
   ::after는 자리를 차지하지 않으므로 띠 높이에 영향이 없다.

   색은 파랑을 쓴다. 띠 자체는 갈색(구획)이지만 이건 **누르는 것**이라 파랑이 맞다 —
   10-42에서 정한 「파랑은 누를 수 있다」를 그대로 따른다.

   white-space: nowrap — 좁은 화면에서 이 글자가 줄바꿈되면 띠가 두 줄이 되어 무너진다.
   줄어들어야 하는 쪽은 제목이므로 h2에 min-width: 0을 주고 여기는 안 줄인다. */
.work-block-head .wi-edit {
  position: relative;
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: var(--font-size-caption);
  text-decoration: underline;
  white-space: nowrap;
  padding: .1rem .35rem;
}
.work-block-head .wi-edit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  min-width: 100%;
}
/* PC는 마우스라 44px이 필요 없다(10-34와 같은 기준) */
@media (min-width: 769px) {
  .work-block-head .wi-edit::after { width: 28px; height: 28px; }
}
/* 320px에서 제목과 「수정」 사이 1rem은 과하다 — 띠 안에서만 좁힌다 */
@media (max-width: 400px) {
  .work-block-head { gap: .5rem; }
}
.work-block-head code { background: #eef1f8; padding: .1rem .4rem; border-radius: 4px; font-size: .85rem; }
.btn-danger-link { background: none; border: none; color: #c0392b; cursor: pointer; font: inherit; text-decoration: underline; }
.work-add-row { display: flex; align-items: center; gap: .75rem; margin: .5rem 0 1.25rem; flex-wrap: wrap; }

/* align-items: center — 기본값 stretch면 「×」가 행 높이만큼 늘어나 버튼 체계(10-34)의
   28px/44px을 벗어난다. 실측에서 PC인데도 40px이 나왔다. 가운데 정렬로 각자 제 크기를 쓴다. */
/* 반복입력 행 — **입력칸과 삭제 버튼만 남긴다**(요건 10-36). 예전에는 site.css의 v1 규칙이
   새어 들어와 행마다 테두리·안쪽 여백 12px·배경이 붙어 입력칸을 카드로 한 겹 더 감쌌다.
   입력칸 자체에 테두리가 있어 행 경계는 이미 보이므로 그 카드는 중복이었다.
   align-items: center — 기본값 stretch면 「×」가 행 높이만큼 늘어나 버튼 체계(10-34)의
   44px을 벗어난다. 가운데 정렬로 각자 제 크기를 쓴다.
   margin-bottom은 행이 서로 구분될 만큼만 남긴다. */
.repeat-row { display: flex; gap: .5rem; margin-bottom: .4rem; align-items: center; }
/* min-height는 site.css에 있던 v1 규칙을 여기로 옮긴 것이다 — 없애면 입력칸이 31px로
   작아진다. 반복입력 정의는 이 파일 한 곳에만 둔다. */
.repeat-row input { flex: 1; min-height: 40px; }
.repeat-del { border: none; background: #eee; border-radius: 6px; padding: 0 .6rem; cursor: pointer; }
.approver { display: flex; flex-direction: column; gap: .35rem; }

.cancel-link, .form-actions .cancel-link { margin-left: auto; }

/* ── 따라다니는 저장 바 (요건 10-37) ────────────────────────────────────────
   화면 하단 고정. 인터뷰 화면이 길어 중간에서 저장하려면 끝까지 내려갔다 와야 했다.
   높이는 버튼(모바일 44px·PC 28px, 10-34)에 위아래 여백만 더한 만큼이다 — 터치 기준을
   지키되 화면을 최대한 덜 가린다. 좁은 화면에서는 버튼 **라벨을 줄여 폭을 아낀다**
   (aria-label에 전체 문구가 있으므로 화면낭독기에서는 그대로 읽힌다).
   iOS Safari 하단 바에 가리지 않게 safe-area만큼 아래 여백을 더 준다. */
.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .6rem;
  padding-bottom: calc(.4rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid rgba(20, 40, 90, .16);
  box-shadow: 0 -2px 10px rgba(20, 40, 90, .10);
}
/* 넓은 화면에서는 **본문과 같은 폭으로 띄운다**(2026-09-19 PL 「안 A」).
   종전에는 창 전체 폭(left:0 right:0)이라, 본문이 가운데 1080px인 PC에서 버튼만 화면
   왼쪽 아래 구석에 떨어져 폼과 관계없는 요소처럼 보였다. 모바일은 본문도 화면 폭을
   다 쓰므로 종전 모양이 맞다 — 그래서 넓은 화면에만 건다.
   「따라다니는 저장 바」(10-37)의 취지는 그대로다. 바뀌는 것은 폭과 모서리뿐이다. */
@media (min-width: 769px) {
  .save-bar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(1080px, calc(100% - 2 * var(--space-4)));
    bottom: var(--space-3);
    border: 1px solid rgba(20, 40, 90, .16);
    border-radius: var(--radius-base);
    box-shadow: 0 6px 20px rgba(20, 40, 90, .14);
  }
}
/* 상태 표시가 버튼을 밀어내지 않게 — 남는 폭만 쓰고 넘치면 말줄임한다.
   이게 없으면 320px에서 바가 두 줄이 되어 화면을 더 가린다. */
.save-bar .autosave-state {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.save-bar .save-btn { flex: 0 0 auto; }
/* 담당자 화면의 저장 결과 표시(요건 10-44) — 「저장하지 않은 수정이 있습니다」와 같은
   자리를 쓰되 색으로 성격을 가른다(경고가 아니라 완료). */
.respondent-saved { color: var(--color-primary, #2b56d6); font-weight: 600; }
.save-bar .lbl-narrow { display: none; }
@media (max-width: 420px) {
  .save-bar .lbl-wide { display: none; }
  .save-bar .lbl-narrow { display: inline; }
  .save-bar { gap: .3rem; padding-left: .4rem; padding-right: .4rem; }
}

/* 마지막 내용이 바 뒤에 숨지 않도록 바 높이만큼 여백을 준다.
   **폼이 아니라 페이지에 건다**(2026-09-19). 종전에는 #iv-form에만 걸려 있어, 폼 바깥에
   있는 것(이슈 상세의 「수정 이력」)이 맨 아래에서 바에 그대로 덮였다.
   모바일 : 버튼 44 + 위아래 여백 → 약 72px, PC : 띄운 바라 바깥 여백까지 → 약 72px. */
body:has(.save-bar) .page-wrap {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
/* :has()를 못 읽는 브라우저를 위한 대비 — 폼에도 종전대로 걸어 둔다. */
#iv-form, #issue-form { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 769px) {
  #iv-form, #issue-form { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
/* 여러 줄 안내를 줄 나눔 그대로 보인다(10-72) — 「무엇이 어떻게 틀렸나」를
   한 줄로 뭉치면 읽히지 않는다. 한 줄짜리 기존 메시지는 그대로다. */
.flash { background: #fff7e0; border: 1px solid #f0d48a; padding: .5rem .75rem;
         border-radius: 6px; margin-bottom: 1rem; white-space: pre-line; }

/* ── P3 : 리스트 필터 · 상세 ── */
.filters { margin-bottom: 1rem; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem .8rem; }
/* 좁은 화면에서 열의 최소 너비(160px)를 강제하지 않는다(요건 10-32).
   320px에서는 그리드 폭이 256px뿐인데 `.kw`의 grid-column: span 2 가 두 번째 열을
   만들어내고, minmax의 **최소가 160px이라 첫 열이 줄기를 거부해** 160+12.8+123.5=296px가
   되어 화면 밖으로 8~9px 밀려났다. 손가락으로 훑을 때마다 화면이 흔들렸다.
   최소를 0으로 풀면 두 열이 121.6px씩 나눠 가져 정확히 들어맞는다 — 실측으로 잘리는
   입력칸은 없다. 1열로 접는 안도 넘침은 없애지만 필터 높이가 371px → 626px로 늘어
   세로 공간을 줄이려는 방향(10-33)과 반대라 택하지 않았다.
   480px에서는 기존 auto-fill도 어차피 2열이라 이 구간의 배치는 달라지지 않는다. */
@media (max-width: 480px) {
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.filter-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; color: #556; }
.filter-grid label.kw { grid-column: span 2; }
.filter-grid input, .filter-grid select { font: inherit; padding: .35rem .45rem; border: 1px solid var(--color-border, #c8cedd); border-radius: 6px; }
.filter-actions { display: flex; gap: .6rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }
/* 좁은 화면에서 표는 줄어드는 게 아니라 가로로 스크롤한다. 이 한 줄이 없으면 브라우저가
   열 폭을 화면에 맞춰 짜부라뜨려 글자가 세로로 한 자씩 쌓이고(320px에서 표 높이 206px),
   .table-scroll이 감싸고 있어도 스크롤할 게 없어진다. nowrap이면 표가 내용 폭을 그대로
   쓰므로(같은 조건에서 높이 68px) 넘치는 만큼만 가로 스크롤이 생긴다.
   폭이 실제로 넉넉한 표는 넘치지 않아 스크롤도 안 생긴다 — 고정 min-width를 두지 않는
   이유다. 768px 이상(PC)에는 적용되지 않는다. 긴 값은 기존 .ellip이 260px에서 자른다. */
@media (max-width: 767px) {
  .table-scroll > table.data-table th,
  .table-scroll > table.data-table td { white-space: nowrap; }
}
table.data-table td.ellip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data-table td, table.data-table th { padding: .35rem .55rem; font-size: .84rem; }

/* 상세 화면: 등록 화면과 같은 grid cols-N 안에 들어가는 압축 셀(라벨 위 · 값 아래) */
.d-cell { display: flex; flex-direction: column; gap: .15rem; padding: .3rem 0; border-bottom: 1px solid #eef0f5; min-width: 0; }
.d-label { font-weight: 600; font-size: .78rem; color: #667; }
.d-value { white-space: pre-wrap; word-break: break-word; }
.d-inactive .d-value, .d-inactive-group { color: #7a8598; }
.d-inactive-group { background: #f6f7fa; border-radius: 8px; }
.tag { font-size: .68rem; background: #8894a8; color: #fff; border-radius: 4px; padding: 0 .3rem; }
.sec-sub { margin: .5rem 0 1rem; }
.sec-sub h3 { font-size: .95rem; color: var(--color-primary, #2b56d6); margin: .5rem 0 .25rem; }
.card.sec > h2, .work-block > h2 { margin-top: 0; }

/* ── P4 : 관리자 화면 ── */
.admin-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.admin-tile { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.admin-tile:hover { box-shadow: 0 2px 10px rgba(20,40,90,.22); }
.admin-tile h2 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--color-primary, #2b56d6); }
.admin-tile p { margin: 0; font-size: .82rem; color: #667; }
tr.row-inactive { opacity: .55; }
.reorder-btns { display: inline-flex; gap: .25rem; }
.reorder-btns button { border: none; background: #eef1f8; border-radius: 4px; padding: 0 .4rem; cursor: pointer; }
.warn-banner { background: #fff1e6; border: 1px solid #f0a35a; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.warn-banner strong { color: #b35900; }
.preview-frame { border: 2px dashed var(--color-primary, #2b56d6); border-radius: 10px; padding: 1rem; margin-top: 1rem; background: #f8f9fd; }

/* ── 서명 상태 배지 (요건 10-9: 작성중/기록완료/서명완료) ── */
.badge--signed { background: var(--color-primary, #2b56d6); color: #fff; }

/* ── 서명 링크·서명 현황 (요건 10-8·10-9) — 업무담당자·작성자 박스를 나란히 배치 ── */
.sign-row { display: flex; gap: 1rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #eef0f5; flex-wrap: wrap; }
.sign-row .sign-box { flex: 1 1 260px; min-width: 0; margin-top: 0; padding-top: 0; border-top: none; }
.sign-box h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--color-primary, #2b56d6); }
.sign-box code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; background: #eef1f8; padding: .15rem .4rem; border-radius: 4px; }

/* 서명 이미지 — 그린 기기(모바일 전체화면 팝업 vs 데스크톱)에 따라 원본 해상도·가로세로
   비율이 달라서, 크기를 폭·높이 둘 다 고정하고 object-fit:contain으로 담아 항상 같은
   크기로 보이게 한다(요건 10-25). */
.sign-image {
  width: 260px; height: 130px; object-fit: contain;
  border: 1px solid var(--color-border, #c8cedd); border-radius: 6px; background: #fff;
}

/* ── 서명 화면(로그인 없이 접근) ── */
.sign-page-head { text-align: center; margin-bottom: 1rem; }

/* ── 업무담당자가 고칠 수 있는 항목 (요건 10-40 ③) ─────────────────────────────
   「어느 항목이 고칠 수 있고 어느 것이 읽기전용인지 한눈에」가 요구사항이다. 회색
   처리만으로는 부족하다는 지적이 있어 **테두리·배경·배지 세 겹**으로 알린다 —
   색만으로 구분하지 않으므로(✎ 글자 배지) 색각 이상에서도 읽힌다. */
.ff-respondent {
  border: 2px solid var(--color-primary, #2b56d6); border-radius: 8px;
  background: #f5f8ff; padding: .45rem .55rem;
}
.ff-badge--edit { color: #fff; background: var(--color-primary, #2b56d6); }
/* 읽기전용 항목은 반대로 눌러 앉힌다 — 나란히 놓였을 때 대비가 생겨야 한다. */
.sign-grid .d-cell { background: #fafbfd; border-radius: 6px; padding: .3rem .55rem; }

/* 좁은 화면에서 **수정 가능한 항목만** 한 줄을 쓴다. 서명 화면을 2열로 유지한 근거
   (요건 10-23)는 「읽기전용 표시라 입력칸처럼 넓게 잡을 필요가 없다」였는데, 10-40으로
   그중 일부가 실제 입력칸이 되어 그 전제가 깨졌다 — 320px에서 재보니 텍스트 입력칸이
   110px밖에 안 됐다. 읽기전용 항목은 종전대로 2열이라 세로 스크롤은 거의 늘지 않는다. */
@media (max-width: 720px) {
  .grid.sign-grid .ff-respondent { grid-column: 1 / -1; }
}

.respondent-notice { margin: 0 0 1rem; }
.respondent-save { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.respondent-save .caption { flex: 1 1 100%; margin: 0; }
.respondent-save .hint { color: #b35900; font-weight: 600; }
/* 첨부 파일명 — 다운로드 권한이 없으면 링크가 아니라 글자로만 보인다(요건 10-27) */
.attachment-row .att-name { flex: 1 1 auto; overflow-wrap: anywhere; color: #445; }

/* ── 인터뷰 상세: 변경 이력만 펼침/닫힘(<details>), 기본값 닫힘 (2026-09-05) ── */
details.history-details > summary {
  cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 700; margin: 0;
  padding: 0 0 0 1.1rem; position: relative;
}
details.history-details > summary::-webkit-details-marker { display: none; }
details.history-details > summary::before {
  content: "▶"; position: absolute; left: 0; font-size: .75rem; transition: transform .15s ease;
}
details[open].history-details > summary::before { transform: rotate(90deg); }
details.history-details > .table-scroll, details.history-details > p { margin-top: .75rem; }

/* ── 진행 경과 (요건 10-40 ⑤) ────────────────────────────────────────────────
   표가 아니라 목록이다 — 열이 4개뿐이고 값이 짧아서, 320px에서 가로 스크롤을 만드는
   표보다 줄바꿈되는 목록이 읽기 쉽다. 담당자가 한 일은 왼쪽 색띠로 구분한다. */
ol.timeline { list-style: none; margin: .75rem 0 .5rem; padding: 0; }
.timeline-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  padding: .3rem .55rem; border-left: 3px solid transparent; border-bottom: 1px solid #eef0f5;
}
.timeline-row.is-respondent { border-left-color: var(--color-primary, #2b56d6); background: #f5f8ff; }
.timeline-at { font-variant-numeric: tabular-nums; color: #667; font-size: .84rem; white-space: nowrap; }
.timeline-label { font-weight: 600; }
.timeline-who { color: #667; font-size: .84rem; }
.timeline-note { color: #7a8598; font-size: .78rem; flex: 1 1 100%; }

/* ── 메인 대시보드 (요건 10-12) ── */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-tile h2 { margin: 0 0 .3rem; font-size: .95rem; color: var(--color-text-muted, #667); font-weight: 600; }
.dash-num { font-size: 2.2rem; font-weight: 700; color: var(--color-primary, #2b56d6); line-height: 1.1; }
.dash-unit { font-size: 1rem; font-weight: 400; color: var(--color-text-muted, #667); margin-left: .3rem; }
.dash-breakdown { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.dash-links { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }

/* ── 화면 배치: 항목 순서 드래그(요건 10-16, 노션 스타일 손잡이) ── */
.field-reorder-list .drag-handle {
  cursor: grab; color: #99a2b5; font-size: 1.1rem; user-select: none; padding: 0 .4rem;
}
.field-reorder-list tr.field-row.dragging { opacity: .4; background: #eef1f8; }
.field-reorder-list tr.field-row td:first-child { width: 1.6rem; text-align: center; }

/* ── 서명 전용 전체화면 팝업 (요건 10-22) — 모바일 드래그가 페이지 이동으로
   인식되는 문제를, 스크롤할 게 아예 없는 화면으로 분리해서 없앤다. ── */
.sign-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #fff;
  display: flex; flex-direction: column; touch-action: none; overscroll-behavior: none;
}
.sign-modal-overlay[hidden] { display: none; }
.sign-modal-head {
  display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto;
  padding: .75rem 1rem; border-bottom: 1px solid var(--color-border, #d7dbe6);
}
.sign-modal-head h2 { margin: 0; font-size: 1.05rem; }
.sign-modal-close {
  border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: .25rem .6rem; color: #667;
}
.sign-modal-canvas-wrap { flex: 1 1 auto; position: relative; touch-action: none; overscroll-behavior: none; }
.sign-modal-canvas-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: #fff; touch-action: none;
}
.sign-modal-actions {
  display: flex; gap: .6rem; flex: 0 0 auto; padding: .75rem 1rem;
  border-top: 1px solid var(--color-border, #d7dbe6);
}

/* ── 첨부파일 (요건 10-27) ── */
.attachment-field { display: flex; flex-direction: column; gap: .5rem; }
.attachment-list { display: flex; flex-direction: column; gap: .3rem; }
.attachment-row {
  display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem;
  background: #f6f7fa; border-radius: 6px;
}
.attachment-row a { flex: 1 1 auto; overflow-wrap: anywhere; }
.attachment-field.is-readonly { color: #778; font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════════════════
   이슈사항협의 (요건 10-55 · 10-58)
   **새 CSS 변수를 만들지 않는다.** 기존 토큰만 쓴다. 인터뷰 목록과 나란히 띄웠을 때
   색·글꼴·버튼이 같은 화면으로 보여야 한다 — 다른 것은 **행 높이 하나뿐**이다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 상태 탭 — 기존 필터 카드(--color-surface 바탕) 안의 칩. 0건도 표시하므로 숫자가 0인
   칩도 그대로 그려진다(숨기지 않는다). */
.issue-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.issue-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-text); font-size: var(--font-size-caption);
}
.issue-chip b { font-family: var(--font-heading); }
.issue-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 결정 요청 띠 — 1순위 건이 있을 때만 그려진다. 브라운을 쓰는 **두 자리 중 하나**다. */
.decide-banner {
  margin-bottom: 1rem; padding: var(--space-3) var(--space-4);
  background: var(--color-brand-brown-soft);
  border: 1px solid var(--color-brand-brown-line);
  border-radius: var(--radius-base);
}
.decide-banner-head {
  font-family: var(--font-heading); color: var(--color-brand-brown);
  margin-bottom: var(--space-2);
}
.decide-banner-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .3rem 0;
}
.decide-banner-row + .decide-banner-row { border-top: 1px solid var(--color-brand-brown-line); }
.decide-title { font-family: var(--font-heading); }

/* 표 — **행 높이만** 인터뷰 목록보다 키운다(패딩 14px). 보고 자리에서 띄우는 화면이라
   그렇다. 글자 크기·색·테두리는 인터뷰 목록과 같게 둔다(10-55). */
table.issue-table td { padding: 14px var(--space-3); }
table.issue-table tr[data-href] { cursor: pointer; }
.work-count-cell { white-space: nowrap; }
.work-count { font-family: var(--font-heading); font-size: var(--font-size-h2); }

/* 「걸린 업무」 칩 — 아홉 개까지 붙는다(2026-09-21 PL).
   **칩 묶음만 감싸고 칸은 한 줄로 둔다.** 칸 전체를 감싸게 하면 큰 숫자와 칩이 갈라지고,
   칸을 계속 한 줄로 두면 표가 가로로 늘어나 제목·업무영역이 눌린다.
   `max-width`는 **td가 아니라 이 inline-block에** 건다 — table-layout:auto에서 td의
   max-width는 브라우저가 무시한다. 여기 걸어야 실제로 먹는다. */
.wi-chips {
  display: inline-block; vertical-align: middle;
  max-width: 17rem; white-space: normal; line-height: 1.85;
}
.wi-chip {
  display: inline-block; margin-left: 3px; padding: 1px 5px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-caption); color: var(--color-text-muted);
  white-space: nowrap;  /* 칩 하나는 절대 쪼개지지 않는다 */
}

/* 칩 칸이 넓어져도 **다른 칸은 접히지 않는다.** 제목은 .ellip이 260px에서 자르고,
   나머지는 여기서 한 줄로 묶는다. .wi-chips가 자기 안에서만 이것을 뒤집는다. */
table.issue-table tbody td { white-space: nowrap; }

.pager { display: flex; gap: .3rem; justify-content: center; margin-top: var(--space-4); }
.pager-page {
  padding: .25rem .6rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text);
}
.pager-page.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 상세 — 왼쪽 넓은 단 / 오른쪽 좁은 단. 좁은 화면에서는 한 줄로 쌓는다. */
.issue-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 1024px) { .issue-cols { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } }
.issue-side .d-cell + .d-cell { margin-top: var(--space-2); }

.issue-link-row { padding: var(--space-2) 0; }
.issue-link-row + .issue-link-row { border-top: 1px solid var(--color-border); }
.issue-link-add { margin-top: var(--space-3); display: grid; gap: .4rem; }
/* **체크박스를 빼고 고른다.** 그냥 `input`으로 받으면 체크박스에도 width:100%가 붙고,
   .chk의 flex 줄에서 체크박스가 남은 폭을 다 먹는다 — 제목이 길수록 덜 먹어서 줄마다
   시작 위치가 달라지고 목록이 계단처럼 보인다(2026-09-21 PL 지적). 바로 위의
   .link-pick 규칙은 처음부터 [type="text"]로 적혀 있었다. 그쪽에 맞춘다. */
.issue-link-add select, .issue-link-add input[type="text"] {
  font: inherit; width: 100%; padding: .35rem .45rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}

/* 「협의」 칸은 판단과 선택지를 한 칸에 쓰므로 세로를 넉넉히 준다 — 높이는 항목 정의의
   options.rows가 정한다(_field_macros.html). 여기서 강제하지 않는다. */

/* 결론 칸 — 브라운을 쓰는 **나머지 한 자리**다. 「결론안」일 때만 띠를 두른다:
   상태가 협의중이 아니거나 결론이 비면 배지도 안 뜨므로 강조도 같이 사라져야 한다. */
.ff-conclusion {
  padding: var(--space-3); border-radius: var(--radius-base);
  background: var(--color-brand-brown-soft);
  border: 1px solid var(--color-brand-brown-line);
}

/* 업무 상세의 「이슈 제기」 패널 — 하나의 패널에서 둘을 다 한다(10-56). */
.issue-raise-panel { margin-top: var(--space-3); }
.issue-raise-panel > summary { display: inline-block; cursor: pointer; list-style: none; }
.issue-raise-panel > summary::-webkit-details-marker { display: none; }
.issue-raise-modes { display: flex; gap: var(--space-4); margin: var(--space-3) 0; }
.issue-pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); }
.issue-pick-list .chk { display: block; padding: .2rem 0; }

/* 연결 메모를 줄마다 그 자리에서 고친다(§5.6) — 별도 화면으로 빼지 않는다. */
.link-note-form { display: flex; gap: .3rem; margin-top: .2rem; }
.link-note-form input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--font-size-caption);
  padding: .25rem .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}

/* 화면 제목 옆 도움말 — 항목 옆 물음표와 같은 부품이다. 팝오버 기준만 물음표 자신으로
   잡는다(항목은 .ff 칸이 기준이지만 제목 줄에는 그런 칸이 없다). */
.help-inline { position: relative; vertical-align: middle; }
.help-inline .ff-help-pop { top: 1.6rem; left: 0; max-width: min(34rem, 80vw); }

/* 분류 키워드 검색 (2026-09-19) — 새 변수를 만들지 않는다. */
.class-search { margin-top: var(--space-2); }
.class-search .kw { display: block; }
.class-search input {
  width: 100%; font: inherit; padding: .35rem .45rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.class-results { max-height: 9.5rem; overflow-y: auto; margin-top: .3rem; }
.class-results:empty { display: none; }
.class-hit {
  display: block; width: 100%; text-align: left; font: inherit;
  font-size: var(--font-size-caption); padding: .3rem .4rem;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); margin-bottom: .2rem; cursor: pointer;
}
.class-hit:hover, .class-hit:focus-visible { background: var(--color-primary-soft); }
.class-hit-area { color: var(--color-text-muted); }

/* 이슈 등록 화면은 **한 화면에 담는 것이 목적**이다(2026-09-19 PL 지시). 협의 회차를 빼면
   스크롤 없이 보여야 하므로 제목·구역 사이 여백과 본문 칸 높이를 줄인다. 글자 크기·색은
   그대로 둔다 — 줄이는 것은 빈 공간이지 읽는 크기가 아니다. */
.issue-compact .ff { margin-bottom: 0; }
/* 본문 장문 칸은 항목 정의의 rows(상세 화면 기준)를 그대로 쓰면 등록 화면이 세 화면이 된다.
   여기서만 높이를 줄인다 — 값은 그대로 다 들어가고 칸 안에서 스크롤된다. */
.issue-compact textarea { height: 4.6rem; min-height: 4.6rem; }

/* 제목줄의 버튼들 — 「삭제」가 <form> 안에 있어(블록) 줄이 갈라졌다. 한 줄에 나란히 둔다. */
.head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.head-actions form { margin: 0; }

/* 인터뷰 → 업무 고르기 (2026-09-19). 저장되는 것은 업무 체크박스이고 인터뷰는 길일 뿐이다. */
.link-pick { margin-top: var(--space-3); }
.link-pick-head { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.link-pick-head .kw { flex: 1 1 22rem; display: block; }
.link-pick select, .link-pick input[type="text"] {
  width: 100%; font: inherit; padding: .35rem .45rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.link-pick-items {
  max-height: 9rem; overflow-y: auto; margin: .4rem 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2);
}
.link-pick-items .chk { display: flex; gap: .4rem; align-items: baseline; padding: .15rem 0; }

/* 인터뷰 목록 — 행 하나가 인터뷰 하나이고 눌러서 업무를 펼친다(2026-09-19 「A안」).
   글자 크기·색·테두리는 종전 표와 같게 둔다. 바뀌는 것은 행의 뜻이지 모양이 아니다. */
.iv-group-table tr.iv-row { cursor: pointer; }
.iv-group-table .col-toggle { width: 2.2rem; text-align: center; }
.group-toggle {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: .9rem; color: var(--color-text-muted); line-height: 1;
}
.group-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* 펼쳐진 업무 행은 한 단 들여써서 부모에 딸린 것임을 보인다. 배경은 건드리지 않는다 —
   data-table의 짝/홀 줄무늬가 이미 행을 갈라 준다. */
.iv-group-table tr.wi-row > td:nth-child(2) { padding-left: var(--space-5); }
.link-pick > summary { cursor: pointer; font-family: var(--font-heading); margin-bottom: .2rem; }
.link-pick[open] > summary { margin-bottom: var(--space-2); }

/* 작성자가 붙는 글 목록(요건 B) — 누가 언제 썼는지가 행 머리에 붙는다. */
.repeat--authored .repeat-row { display: block; }
.row-byline { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.badge--author { background: var(--color-primary-soft); color: var(--color-primary); }
.repeat--authored .repeat-row + .repeat-row,
.repeat--authored .repeat-rows > .repeat-row { border-top: 1px solid var(--color-border); padding-top: .4rem; }
.repeat--authored .repeat-rows > .repeat-row:first-child { border-top: 0; padding-top: 0; }

/* 회차마다 접기(요건 C). 기본은 펼침이고 상태를 저장하지 않는다. */
.repeat-tools { margin-bottom: .3rem; }
details.repeat-row-wrap > summary { cursor: pointer; font-size: var(--font-size-caption); padding: .15rem 0; }

/* 수정 이력은 기본 닫힘(요건 C·D). */
.history-box > summary { cursor: pointer; list-style: none; }
.history-box > summary h2 { display: inline-block; margin: 0; }
.history-box > summary::before { content: "▸ "; color: var(--color-text-muted); }
.history-box[open] > summary::before { content: "▾ "; }

/* 제목이 아직 없는 업무 — 업무내용 첫 줄을 회색으로 대신 보인다(요건 E).
   회색은 「이건 제목이 아니다」는 표시다. PL이 제목을 채우면 검은 글씨로 바뀐다. */
.untitled { color: var(--color-text-muted); }

/* 협의 회차 한 줄 — **칸 높이를 날짜 칸에 맞춘다**(2026-09-19 PL 지시).
   종전에는 장문 칸만 rows만큼 높아 줄이 들쭉날쭉했고, flex 배분 탓에 「참석자」 칸이
   거의 0폭으로 눌려 값이 안 보였다. 칸 폭을 명시한 격자로 바꾸고 높이를 맞춘다.
   장문 칸은 세로로 끌어 늘릴 수 있게 둔다 — 길게 적어야 할 때 막지 않는다. */
.repeat-row-wrap .repeat-row {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(6rem, 1fr) minmax(10rem, 2fr) minmax(10rem, 2fr) auto;
  gap: .4rem; align-items: start;
}
.repeat-row-wrap .repeat-row > input,
.repeat-row-wrap .repeat-row > textarea {
  width: 100%; min-height: 40px; height: 40px; box-sizing: border-box;
}
.repeat-row-wrap .repeat-row > textarea { resize: vertical; }
.repeat-row-wrap .repeat-del { min-height: 40px; }
@media (max-width: 720px) {
  /* 좁은 화면에서는 한 줄에 다 넣지 않는다 — 칸이 글자보다 좁아진다. */
  .repeat-row-wrap .repeat-row { grid-template-columns: 1fr; }
}

/* 대시보드 — 줄 = 단계, 열 = 질문 (2026-09-19). **새 CSS 변수를 만들지 않는다.** */
.dash-row { margin-bottom: var(--space-5); }
.dash-row-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.dash-row-head h2 { margin: 0; }
.dash-num-link { text-decoration: none; display: inline-block; }
.dash-num-link:hover .dash-num { text-decoration: underline; }
.dash-breakdown .badge { text-decoration: none; }
.dash-sub { margin: .45rem 0 0; }
/* ── 줄마다 다른 푸른색 · 타일 농도 (2026-09-20 PL 지시) ──────────────────
   종전에는 세 줄이 전부 --color-surface(#F4F7FE) 한 색이라
   ① 흰 바탕과 구분이 안 되고 ② 인터뷰·이슈·요구사항이 같아 보였다.

   **농도는 --tile-tint 한 곳에서 정한다.** 색상은 줄마다 --row-tint 하나로 정하므로
   목록·상세도 나중에 **같은 변수를 물려받으면 된다** — 화면마다 색을 다시 적지 않는다.

   같은 푸른색 계열 안에서 **색상(hue)만** 벌렸다. 채도·명도까지 벌리면 어느 줄이 더
   중요해 보이는 서열이 생긴다. */
:root {
  --tile-tint: 12%;             /* 종전 약 5% — 흰 바탕과 구분이 안 됐다 */
  --tile-tint-later: 12%;        /* 2단계 줄 (2026-09-20 PL 확정).
                                   6%는 줄 색이 살지 않아 세 줄이 다시 뭉쳤고, 12%는
                                   아직 만들지도 않은 단계가 앞의 둘과 같은 무게가 됐다.
                                   **9%는 그 사이다** — 줄 색은 읽히되 한 발 물러나 있다.
                                   2026-09-21 요구사항을 실제로 만들면서 **12%로 올렸다**
                                   — 10-75가 남긴 한 줄이다. 이제 세 줄이 같은 무게다 */
}
.dash-row { --row-tint: var(--color-primary); }
.dash-row--interview   { --row-tint: #1C60EF; }   /* 로열블루 — 종전 계열 그대로 */
.dash-row--issue       { --row-tint: #0E8FA8; }   /* 틸블루 */
.dash-row--requirement { --row-tint: #123C6E; }   /* 네이비 — 인디고는 분홍기가 돈다고 PL 반려(2026-09-20) */

.dash-row .dash-tile {
  background: #E4ECFD;                                                  /* 구형 브라우저용 */
  background: color-mix(in srgb, var(--row-tint) var(--tile-tint), #fff);
}
/* 아직 만들지 않은 단계 — 본문(12%)보다 한 단계 옅은 9%. 줄 색은 읽히되 앞의 둘과
   같은 무게로 서지는 않는다. 「아직 아니다」는 타일 안의 「2단계」 글자가 말한다. */
.dash-row .dash-tile--later {
  background: #E3E8EE;
  background: color-mix(in srgb, var(--row-tint) var(--tile-tint-later), #fff);
}
.dash-later {
  font-family: var(--font-heading); font-size: var(--font-size-h2);
  color: var(--color-text-muted); line-height: 1.1;
}
/* 「결정 대기」가 1건 이상일 때만 브랜드 갈색. 0이면 회색 그대로 —
   갈색은 「결론안·결정 요청」 자리에만 쓰는 색이라(10-58) 0건에 쓰면 뜻을 잃는다. */
.dash-row .dash-tile--brand {
  background: var(--color-brand-brown-soft);
  border: 1px solid var(--color-brand-brown-line);
}
.dash-tile--brand .dash-num { color: var(--color-brand-brown); }

/* 2단계라 아직 눌리지 않는 「새 …」 버튼. 자리는 잡되 눌러서 404를 보게 하지 않는다. */
.btn-primary.is-later { opacity: .45; cursor: not-allowed; }

/* 아이콘은 **글자와 같은 줄에 같은 무게로** 앉는다(10-76). 앞서지 않게 색을 따로 주지
   않는다 — stroke="currentColor"라 그 줄의 글자 색을 그대로 따라간다. */
.dash-row-head h2, .dash-tile h2 { display: flex; align-items: center; gap: .4rem; }
.dash-tile h2 .ico, .dash-row-head h2 .ico { flex: 0 0 auto; }

/* 이슈 링크 — 「제기」 배지에 밑줄이 걸리지 않게(요건 10-77).

   문제는 **둘**이었다.
   ① 배지가 링크 안에 있어 밑줄이 그 위를 지났다 → 배지를 링크 **밖**으로 꺼냈다(템플릿)
   ② 그래도 걸려 보였다 — **배지 상자의 아래 변이 밑줄과 거의 같은 높이**라
      「배지 왼쪽 밑줄 → 배지 아래 변 → 배지 오른쪽 밑줄」이 한 줄로 읽혔다.
      한 줄에 올리면 번호·제목 둘 다 밑줄이라 배지 양쪽에 동시에 선이 생겼다

   그래서 **선이 배지 곁에 모이지 않게** 한다(2026-09-20 PL 「후보 B」).
   - **마우스를 올린 링크만** 밑줄 — 배지 양쪽에 동시에 선이 생기지 않는다
   - 밑줄을 **2px 내린다** — 배지 아래 변과 높이가 갈린다
   - 배지를 **글자 가운데에 맞춘다** — 기준선에 붙어 있지 않게

   ⚠ 보기 문제를 「밑줄을 끄는 규칙」으로 막으려다 두 번 실패했다(`base.css`의
   `a:hover`(0,1,1)를 계속 이겨야 하는 싸움이다). 여기서는 **끄지 않고** 기본 동작
   위에 얹기만 한다 — 이 규칙이 다 밀려도 배지에 줄이 지나가지는 않는다. */
.issue-link-line { display: inline; }
.issue-link-line a.issue-link:hover { text-underline-offset: 2px; }
.issue-link-line .badge { vertical-align: middle; }

/* 긴 글은 **줄바꿈을 보존해** 보여 준다(요건 10-79 §7). 세부내용·제약사항은 여러 줄이고
   한 줄로 뭉치면 읽히지 않는다. 기존 한 줄짜리 값은 달라지지 않는다. */
.d-value--pre { white-space: pre-line; }
/* 0건은 흐리게 — 「아직 없다」와 「세어 봤더니 0이다」를 눈으로 가른다. */
.work-count.is-zero { color: var(--color-text-muted); font-weight: 600; }