:root {
  /* 경기도교육청 톤 참고, 밝은 파랑 계열로 재설정(2026-08) → 실무자가 오래 보는 도구 특성상
     더 밝고 채도 낮은 톤으로 재조정(2026-08, 2차). 중립색·기본 강조색만 파랑으로 옮기고,
     의미를 전달하는 색(경고·에러·AI버튼·섹션 구분색·법령 유형색)은 아래에서 그대로 둔다. */
  /* A안 하늘빛(2026-10-13~): 바탕 #f4f9ff ㆍ 포인트 #1d6fe0 ㆍ 제목 #0a3a85 ㆍ 본문 #0f172a ㆍ 보조 #3b4a63 ㆍ
     테두리 #bcd6f5 ㆍ 옅은 면 #dcecff ㆍ 상단 띠 #e3f0ff→#c9e2ff. 업무분야 색(--field-*ㆍ--dom)은 그대로. */
  --bg: #f4f9ff;
  /* 화면 전체 바탕색(2026-08~). --bg는 사이드바 버튼 hover 등 작은 면에도 쓰여서 그대로 두고,
     페이지 바닥(body·#detail)만 이 토큰으로 분리했다. 되돌리려면 이 한 줄만 되돌리면 된다.
     예전에는 --bg를 흰색과 섞은 파생값(--c-bg-light, 약 #fafbfd)이었는데 거의 흰색이라
     여백이 허전했다 — 무채색으로 한 단계 내렸다(파생으로는 이 색이 안 나온다: --bg가
     푸른 기가 있어 아무리 섞어도 중성 회색이 되지 않는다). */
  --page-bg: var(--bg);

  /* 우측 목차 전용 글자색(2026-08~). 전에는 --text-faint(퍼렁한 회색)를 썼는데 목차는
     본문에서 눈을 떼지 않고 곁눈으로 훑는 것이라 더 진해야 읽힌다. --text-muted(#4a6786)보다
     푸른 기를 빼고 한 단계 내린 값이라 기존 토큰에서 파생되지 않아 별도로 둔다.
     페이지 배경(--page-bg #f2f3f5) 기준 대비: 본문 6.72:1 / 현재 항목 7.85:1 — 둘 다 AA(4.5:1) 통과.
     현재 항목은 예전에 --accent(#2f74c2, 4.30:1)를 썬어서 AA에 미달이었다. */
  --toc-text: var(--text-muted);
  --toc-text-active: var(--heading);
  --panel-bg: #ffffff;
  --border: #bcd6f5;
  /* 테두리보다 한 단계 진한 선 — 따로 받은 값이 없어 테두리에 포인트를 섞어 만든다. */
  --border-strong: color-mix(in srgb, var(--border) 70%, var(--accent));
  /* 표 격자 전용 토큰(2026-09~). 표는 칸 경계가 보여야 값을 읽을 수 있어서, 카드·패널
     테두리(--border/--border-strong)보다 한 단계 진한 회청색을 따로 쓴다. 이 두 값을
     --border 계열에 합치지 않는 이유는, 표를 진하게 하려고 --border를 올리면 사이트 전체의
     카드·구분선까지 같이 진해지기 때문이다(표만 바꾸려는 것이므로 별도 토큰으로 분리).
     --table-border: 모든 셀 경계(가로·세로 공통) / --table-border-header: 머리글 행 아래 */
  --table-border: var(--border);
  --table-border-header: var(--border-strong);
  /* 알약형 사이트 링크(.site-pill, 2026-09~) — 산업안전 4 「교육 신청과 서류」의 "그 밖의
     교육·자료" 한 줄. --border/--accent-bg보다 살짝 진한 테두리·옅은 바탕으로, 표·서식 목록
     아래에 붙어도 묻히지 않으면서 버튼처럼 무겁지도 않게 한다. */
  --pill-border: var(--border);
  --pill-bg: var(--bg);
  --text: #0f172a;
  --heading: #0a3a85; /* 화면ㆍ절 제목 */
  --text-muted: #3b4a63;
  /* 바탕색을 #f2f3f5로 내리면서(2026-08~) 한 단계 진하게 했다 — #7c93ad는 새 배경에서
     2.85:1로 WCAG AA(4.5:1)에 못 미쳤다(옛 배경에서도 3.06:1로 이미 미달이었다).
     색상·채도는 그대로 두고 명도만 낮춘 최소값이라 --text-muted보다는 여전히 옅다. */
  --text-faint: var(--text-muted); /* 흐릿한 회색 캡션도 보조색으로 올림(2026-10-13) */
  --accent: #1d6fe0;
  --accent-bg: #dcecff;
  --accent-hover: color-mix(in srgb, var(--accent) 65%, var(--heading));
  /* 상단 띠(#topbar) 그러데이션 */
  --band-start: #e3f0ff;
  --band-end: #c9e2ff;
  /* --accent보다 한 단계 밝은 톤. 홈 표지처럼 넓은 면적에 accent를 쓰면 진해 보일 때만
     쓴다(흰 글씨 대비 4.5:1 이상 확보). 배지 등 작은 요소에는 계속 --accent를 쓴다. */
  --accent-soft: var(--accent);

  /* 짙은 남색 한 벌(2026-09-19~). 2026-09-20에 쓰임을 좁혔다 — 도구 카드·앱 배너는
     도메인 색(--dom-base/--dom-deep)으로 옮겼고, 이 남색은 넓은 색면을 쓰는 두 곳에만 남는다:
     보수 자동화 서식 격자(.featured-grid — 2026-09-21부터는 진한 그러데이션 대신 이 남색을
     30%로 옅게 깐 띠, 그 절 주석 참고)와
     홈·감사사례 띠(.featured-tool-home/.featured-tool-navy, 특정 도메인에 속하지 않는다).
     --tool-navy      기준색. 띠 그러데이션 시작이자 도구 카드 아이콘·단추 색
     --tool-navy-soft 띠 그러데이션 끝(기준색보다 밝음)
     --tool-navy-deep 격자형 그러데이션 시작(기준색보다 어두움)
     --tool-navy-mid  격자형 그러데이션 끝
     --tool-navy-on   남색 위에 얹는 글자·반투명 면의 바탕색(흰색)
     --tool-navy-veil 반투명 계산용 rgb 세 값(rgba()에 넣어 쓴다) */
  --tool-navy: #3a5f9a;
  --tool-navy-soft: #5a83c2;
  --tool-navy-deep: #1e3d6b;
  --tool-navy-mid: #2d5a99;
  --tool-navy-on: #fff;
  --tool-navy-veil: 255, 255, 255;
  /* 참고 자료 단추의 둘째 색(2026-09-18~). 법령 원문(파랑 --accent)과 규정 참조표(청록)를
     나란히 놓을 때 서로 구분되게 하려고 토큰 하나를 더 뒀다. 의미색(경고·에러)과 겹치지
     않는 계열이다. */
  --accent-teal: #0a7c62;
  --accent-teal-hover: #086350;
  --warn-border: #c98a2b;
  --warn-bg: #fbf2e2;
  --danger: #a92f27;
  --danger-bg: #fbeceb;

  /* 포인트 노랑 — 파랑 기본 톤 위에 아주 작은 요소에만 쓰는 강조색(양평군청 사이트 참고).
     --warn-border(주황)와 헷갈리지 않도록 더 노란 쪽(색상각 45°대)으로 잡았고, 흰 배경 위
     텍스트 대비 4.6:1 이상 확보했다. 절대 넓은 면적(배경 전체·큰 버튼)에는 쓰지 않는다. */
  --point: #8c7300;
  --point-bg: #fbf3cf;

  /* 검색 결과에서 찾아온 문구를 본문에서 강조할 때 쓰는 배경(2026-09~). 본문에는 이미 노란
     계열 상자가 둘 있어서(알아두기 --warn-bg #fbf2e2, 포인트 --point-bg #fbf3cf) 그 위에
     얹혀도 "상자 안의 한 문구"로 읽히도록 둘보다 채도를 뚜렷하게 올린 값을 골랐다. 글자색은
     건드리지 않고 배경만 깐다(테두리 없음). */
  --search-hit-bg: #fff3bf;

  /* 홈 화면 업무분야 카드색 — 채도 50%·명도 93%로 동일하게 맞추고 색상각만 띄워서 톤을
     통일했다. 기존 --sec-*, --warn-*, --point-bg 등과 정확히 겹치는 값은 피했다(완전히
     다른 문맥이라 계열이 비슷한 것 자체는 괜찮다). 1~8은 45°씩 고정 간격, 9~10(2026-08
     추가)은 기존 8색 사이에서 가장 넓게 비어 있던 두 구간의 중간 색상각을 계산해서 넣었다
     (기존 카드와 겹치지 않는 색인지 확인 후 배정). */
  /* 업무분야 팔레트(2026-08~) — 열 가지 색이 색상(hue)만 다르고 채도·명도는 같았으므로
     색마다 hex 세 벌을 적는 대신 hue만 토큰으로 두고 톤은 아래 세 조합으로 파생시킨다.
     화면 층마다 같은 hue를 다른 톤으로 써서 "어느 층인지"가 색의 무게로 읽히게 한다.
       soft(S50 L92.9) — 원래 파스텔. 세부업무 카드의 번호 배지 배경
       deep(S65 L82.9) — 파스텔에서 채도 +15 / 명도 −10
       ink (S60 L28)   — 세부업무 카드의 왼쪽 색 막대와 배지 글자색
     하위 화면(세부업무 카드)은 이 색을 --card-sub-mix 만큼만 남기고 흰색을 섞어 한 단계
     조용하게 둔다 — 홈을 진하게, 하위를 순백으로 두니 층을 오갈 때 단차가 커서 화면이
     하얗게 비쳤다. */
  /* 홈 카드 기준색(2026-09~) — 분야마다 하나씩 정하고, 바탕ㆍ테두리ㆍ배지ㆍ왼쪽 막대를
     전부 이 색에서 파생시킨다. 예전에는 색상각(--field-h-*)만 두고 채도ㆍ명도를 공통값으로
     묶었는데, 색상각이 같아도 눈에 보이는 진하기가 색마다 달라 나란히 놓으면 들쭉날쭉했다.
     지금은 사람이 고른 색을 그대로 쓰고 섞는 비율만 공통으로 둔다.
     번호는 홈 격자 순서(1 예산결산 → 9 산업안전)와 같다. */
  --field-base-1: #2f6fc0; /* 학교회계예산결산 — 파랑 */
  --field-base-2: #1f8a70; /* 계약관리 — 초록 */
  --field-base-3: #d9822b; /* 물품관리 — 주황 */
  --field-base-4: #6b5bd2; /* 국공유재산관리 — 보라 */
  --field-base-5: #c9a227; /* 학교발전기금 — 노랑 */
  --field-base-6: #c2508c; /* 학교운영위원회 — 분홍 */
  --field-base-7: #e0566b; /* 교육공무직원 — 빨강 */
  --field-base-8: #3a9d4f; /* 교직원 급여·복지 — 연두 */
  --field-base-9: #c0392b; /* 산업안전 및 중대재해 예방 — 적갈 */
  --field-base-10: #0d7d94; /* 채권관리 — 청록파랑 */
  --field-base-11: #2a9bb5; /* 학교회계 지출 — 청록하늘(2026-10-13~, 처음 갈색 #8b5e3c는 열람실 사이드바가 무거워 바꿈) */
  --field-base-12: #3f4fa0; /* 지방공무원 인사 — 남보라(2026-10-13~) */

  /* 섞는 비율 — 바탕은 기준색 18%, 테두리는 30%를 흰색에 섞는다. */
  --field-fill-mix: 18%;
  --field-line-mix: 30%;

  --card-sub-mix: 45%;
  --card-sub-hover-mix: 62%;
  /* 카드에 붙는 .home-tab-color-N은 --card-base(기준색)만 정하고, 섞는 일은 각 층의
     규칙에서 color-mix로 한다 — 섞은 값을 :root에 두면 거기서 한 번 계산돼 버려 카드마다
     다른 기준색이 반영되지 않는다. */

  /* 상세화면 섹션별 구분 색(아이콘 배지 전용, 본문 글자색은 항상 --text 유지).
     legal은 accent와 항상 같은 값이라 accent 계열을 따라간다. 나머지는 섹션 종류를
     구분하는 목적이라 파랑으로 통일하지 않고 그대로 둔다. */
  --sec-legal: var(--accent);
  --sec-legal-bg: var(--accent-bg);
  --sec-procedure: #1f7a5c;
  --sec-procedure-bg: #e6f5ee;
  --sec-form: #5b4b9e;
  --sec-form-bg: #efecf9;
  --sec-audit: #8a4b12;
  --sec-audit-bg: #fbf2e2;
  --sec-sites: #146c7a;
  --sec-sites-bg: #e6f3f4;
  --sec-casebook: #a13d5c;
  --sec-casebook-bg: #fbe9ef;

  /* 관련법령 콜아웃 종류별 색 — 법률(파랑, accent 계열)·시행령(초록)·조례(주황)·학교 자체
     규정(회색)을 구분하는 의도된 색 코딩이라 법률만 accent를 따라가고 나머지는 유지한다. */
  --law-act: var(--accent);
  --law-act-bg: var(--accent-bg);
  --law-decree: #1f7a5c;
  --law-decree-bg: #e6f5ee;
  --law-ordinance: #b2560c;
  --law-ordinance-bg: #fbf0e2;
  --law-school: #5b6472;
  --law-school-bg: #eef1f4;

  /* AI 질문 버튼 전용 강조색. 나머지 화면의 파랑 톤과 확실히 구분되도록 다른 계열을 사용한다. */
  --ai-accent: #6c3fc5;
  --ai-accent-hover: #58329f;

  /* 시스템 태그(K-에듀파인/온나라/나이스 등) 배지 6색 — 예전엔 .tag-system.sys-* 규칙에
     하드코딩돼 있었다. sys-1은 accent와 같은 파랑이라 accent를 따라가고, 나머지 5개는
     서로 다른 시스템을 구분하는 목적이라 색 다양성을 그대로 유지한다. */
  --sys-1: var(--accent);
  --sys-1-bg: var(--accent-bg);
  --sys-1-border: var(--border-strong);
  --sys-2: #0f766e;
  --sys-2-bg: #e6f5f3;
  --sys-2-border: #a9dcd6;
  --sys-3: #5b4b9e;
  --sys-3-bg: #efecf9;
  --sys-3-border: #c9bfe8;
  --sys-4: #8a5a20;
  --sys-4-bg: #f7ecdd;
  --sys-4-border: #e3c495;
  --sys-5: #2f7a4d;
  --sys-5-bg: #e8f5ec;
  --sys-5-border: #a9d9ba;
  --sys-6: #475569;
  --sys-6-bg: #eef1f5;
  --sys-6-border: #c3cad4;

  /* K-에듀파인 전용 색(2026-08~) — toolCallout.variant === 'kedufine'일 때만 쓴다. 위 --sys-*
     (해시로 무작위 배정되는 절차표 시스템 태그)와는 별개로, K-에듀파인 안내 블록임을 항상 같은
     색으로 표시하기 위한 고정 배정. K-에듀파인 UI의 초록(상단바 진한 초록/좌측 메뉴 밝은 초록)
     톤을 참고했다. */
  --kedufine: #1a7a3c;
  --kedufine-bg: #eaf6ee;
  --kedufine-border: #8fcaa3;

  /* 에듀파인 화면 안내 전용 색(2026-09-22~, item.blocks type 'edufineGuide') — 위 --kedufine*
     (본문 안 K-에듀파인 경로 안내 박스)와는 별개의 한 벌이다. 화면 캡처를 늘어놓는 이 덩어리는
     도메인 색(--dom)을 따라가지 않는다 — 어느 도메인에 놓이든 「에듀파인 화면 이야기」로 읽혀야
     해서, 도메인과 무관한 고정 초록을 쓴다. --edu-num은 캡처 그림에 찍혀 있는 붉은 번호와
     같은 색이라야 화면 속 번호와 작업순서 번호가 한 쌍으로 읽히므로 --danger가 아닌 별도 값이다. */
  --edu: #127a5e;
  --edu-deep: #0c5744;
  --edu-pale: #e6f5f0;
  --edu-line: #a9dccd;
  --edu-num: #c8282d;

  /* 큰갈래(줄) 색 다섯 칸(2026-09-23~) — 화면 안내의 줄마다 하나씩 배정한다(block.tracks의
     color: 'c1'~'c5'). 머리띠는 --edu 초록 그대로 두므로 상자는 계속 「에듀파인 한 덩어리」로
     읽히고, 안쪽 줄만 색으로 갈린다. c1~c3은 시안에서 정한 값이고 c4ㆍc5는 대비비가 검증된
     --field-dom-4(보라)ㆍ--field-dom-6(자주) 값을 그대로 가져왔다 — 값이 도메인 색과 겹치지만
     쓰이는 자리가 달라(도메인 색은 이 덩어리 안에 나타나지 않는다) 한 화면에서 부딪히지 않는다.
     청록은 c1 초록과 색상이 너무 가깝고 붉은색은 화면 속 번호(--edu-num)와 부딪혀 뺐다. */
  --edu-c1: #127a5e; --edu-c1-pale: #e6f5f0; --edu-c1-line: #a9dccd;
  --edu-c2: #2f5fa8; --edu-c2-pale: #e9f0fa; --edu-c2-line: #b6cbe8;
  --edu-c3: #96601f; --edu-c3-pale: #fbf2e4; --edu-c3-line: #e2cba3;
  --edu-c4: #5c4eb5; --edu-c4-pale: #eeecfa; --edu-c4-line: #c5bdeb;
  --edu-c5: #a74578; --edu-c5-pale: #fbeaf3; --edu-c5-line: #e6bcd4;

  --shadow-card: 0 1px 2px rgba(31, 36, 48, 0.07), 0 1px 1px rgba(31, 36, 48, 0.04);
  /* 글꼴(2026-09~) — assets/fonts/fonts.css가 --font-body·--font-display를 정의하고,
     index.html에서 이 파일보다 먼저 읽는다. 예전엔 jsdelivr CDN의 프리텐다드 가변폰트
     ('Pretendard Variable')를 썼는데 업무망에서 CDN이 막혀 글꼴이 안 내려왔다 — 지금은
     저장소 안의 woff2만 쓰며 굵기가 400·600·700 세 단계뿐이다(500·800은 쓰지 않는다).
     --font-sans는 기존 이름을 그대로 두고 값만 본문용 글꼴로 잇는다. --font-display(도현)는
     fonts.css가 정의한 값을 그대로 쓴다 — 여기서 다시 선언하면 두 곳을 함께 고쳐야 한다.
     도현은 굵기가 400 하나뿐이라 굵게 지정하면 브라우저가 억지로 굵혀 모양이 뭉개진다. */
  --font-sans: var(--font-body);
  --mono: "Consolas", "D2Coding", monospace;

  /* 타이포그래피 사다리(2026-09-15~) — 화면 전반의 font-size는 아래 여섯 칸 중 하나만 쓴다.
     값은 px가 아니라 rem이다. 기준(루트 <html>)은 아래 html 규칙의 100% = 16px이므로
     (2026-10-15에 15px에서 한 단계 올림 — 「글씨가 전체적으로 작다」는 사용자 요청),
     기본 단계에서 각 칸은 다음 px가 된다.

       --fs-2xl  1.53rem  24.5px 화면 제목(.detail-header h2 · .overview-header h2 · 홈 섹션 제목)
       --fs-xl   1.27rem  20.3px 머리띠 제목(원문 2단 .block-section-heading) · 판정기 큰 숫자
       --fs-lg   1.07rem  17.1px 절 제목(.section-heading) · 카드 제목 · 흐름도 제목
       --fs-md   0.93rem  14.9px 본문 · 목록 · 소제목(.overview-block-heading · .notes-subheading)
       --fs-sm   0.83rem  13.3px 표 안 · 카드 · 도식 칸 · 보조 텍스트
       --fs-xs   0.75rem  12px   딱지(배지) · 근거 줄 · 빵부스러기 · 캡션

     예전 8단계 px 사다리(--fs-2xs 12.5 / xs 12.5 / sm 14.5 / base 16 / md 17 / lg 18 / xl 19 /
     2xl 25)는 12.5·13.5·15.5·17.5처럼 눈으로 구별되지 않는 값이 열 가지 넘게 흩어져 화면마다
     비율이 어긋났다. 2026-09-15에 여섯 칸으로 줄이고(--fs-2xs·--fs-base 제거) 고정 px·calc()를
     전부 이 칸으로 옮겼다 — 사다리 밖 값은 tools/check-font-size-ladder.js가 잡는다.
     사다리 밖의 새 px 값을 만들지 말 것. 어느 칸에도 안 맞으면 인접 칸을 쓰고 굵기·색으로 구분한다.

     글자 크기 단추(가 · 가⁺ · 가⁺⁺, js/fontSize.js)는 아래 html.fs-l / html.fs-xl 규칙이 루트
     글씨만 17px / 18px로 올린다 — 모든 칸이 rem이라 토큰을 다시 적지 않아도 전부 따라 커진다. */
  --fs-2xl: 1.53rem;
  --fs-xl: 1.27rem;
  --fs-lg: 1.07rem;
  --fs-md: 0.93rem;
  --fs-sm: 0.83rem;
  --fs-xs: 0.75rem;

  /* 여백 스케일 — 4px 배수 6단계 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* 정렬 기준(2026-08~): 헤더 안쪽·본문·푸터가 전부 이 한 컨테이너를 쓴다. 폭을 정하는
     곳이 세 군데(1190/1040/960)로 갈라져 기준선이 세 개로 보이던 것을 하나로 합쳤다. */
  --page-max: 1280px;
  --page-pad: 24px;
  /* 우측 보조 목차(.toc-rail) 폭과 본문과의 간격. 목차가 실제로 뜰 때만 자리를 차지한다. */
  --rail-w: 190px;
  --rail-gap: 40px;
  /* 컨테이너 안쪽 오른쪽 끝이 화면 오른쪽에서 얼마나 떨어져 있는지. 화면에 고정되는 요소
     ("의견 보내기" 버튼)를 본문과 같은 기준선에 세울 때 쓴다. --scroll-gutter는 본문이
     예약해 둔 세로 스크롤바 폭(js/main.js가 실측), 616px은 --page-max/2 - --page-pad다. */
  --page-edge: calc(var(--scroll-gutter, 0px) + max(var(--page-pad), 50vw - var(--scroll-gutter, 0px) / 2 - 616px));
  /* 홈 화면 섹션 사이 세로 간격(제목↔내용은 --space-3으로 더 좁게). */
  --section-gap: 40px;
}

/* ---------- 루트 글씨 크기와 글자 크기 단계(가 · 가⁺ · 가⁺⁺, 2026-09~) ----------
   --fs-* 여섯 칸이 전부 rem이므로 화면 전체의 글씨 크기는 이 루트 값 하나에서 나온다.
   기본 100%는 브라우저 기본 16px(2026-10-15까지는 93.75% = 15px) — 사용자가 브라우저 글꼴 크기를 바꿔 두었으면
   그 비율대로 함께 움직인다(px로 고정하지 않는 이유).
   상단바의 세 단추가 <html>에 fs-m(기본) / fs-l / fs-xl 중 하나를 붙인다(js/fontSize.js).
   예전(2026-09 초)에는 토큰 여덟 개를 +1px / +2px씩 다시 적었지만, 지금은 루트 글씨만
   17px / 18px로 올리면 제목·본문·표·딱지가 같은 비율로 따라 커져 위계가 그대로 유지된다.
   fs-m은 기본값 그대로라 별도 규칙이 없다(클래스는 aria-pressed 판정용으로만 붙는다). */
html {
  font-size: 100%;
}

html.fs-l {
  font-size: 106.25%;
}

html.fs-xl {
  font-size: 112.5%;
}

* {
  box-sizing: border-box;
}

/* hidden 속성은 어떤 저자 스타일(display:flex 등)보다 우선한다. 이게 없으면 JS로
   hidden을 켜도 display를 지정해 둔 요소(헤더 검색창 등)가 그대로 보인다 — 조용히
   지나가는 버그라 전역에서 한 번에 막아둔다(2026-08~). */
[hidden] {
  display: none !important;
}

html, body {
  height: 100%;
  margin: 0;
}

/* 본문 불릿(.notes-list li)처럼 자기 font-size가 없는 요소가 그대로 물려받는 기준값이라,
   px 하드코딩 대신 본문 칸 --fs-md(14px)를 쓴다(2026-09~) — 루트 글씨(html)가 바뀌면 rem인
   토큰이 따라오므로 글자 크기 단추가 루트만 바꿔도 본문이 함께 움직인다. */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper); /* 2026-09-13 위계 규칙: 메인ㆍ중분류ㆍ항목 바탕 모두 미색 */
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---------- 상단바 ----------
   진한 남색 배경을 써봤지만(2026-08) 관공서 사이트처럼 딱딱해 보여서, 실무자가 오래
   들여다보는 도구에 맞게 흰 배경 + 얇은 accent 밑줄로 가볍게 되돌렸다(2026-08, 2차).
   헤더 검색창을 없애고 로고를 한 줄로 압축해서 높이를 더 낮췄다(2026-08, 3차 — 135px → 94px). */

/* 헤더 안쪽·본문·푸터가 공유하는 유일한 정렬 컨테이너(2026-08~). 이 값을 바꾸면 세
   영역의 왼쪽·오른쪽 끝이 함께 움직인다. */
.page-container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* 배경·아래 파란 줄은 화면 전체 폭 그대로 두고, 가로 여백은 .topbar-inner가 담당한다.
   padding-right의 --scroll-gutter는 본문(#detail)이 오른쪽에 항상 예약해 두는 세로 스크롤바
   폭이다(js/main.js가 실측해서 넣는다). 이게 없으면 헤더만 스크롤바 폭만큼 더 오른쪽까지
   차지해서 본문·푸터와 오른쪽 기준선이 어긋난다. 스크롤바가 겹침(overlay) 방식인 환경에서는
   0이라 아무 영향이 없다. */
#topbar {
  padding: 18px var(--scroll-gutter, 0px) 16px 0; /* 로고를 키우며 위아래 여백은 줄임(2026-09-13) */
  background: linear-gradient(180deg, var(--band-start), var(--band-end));
  border-bottom: 3px solid var(--accent);
  flex-shrink: 0;
}

/* 업무목록 화면에서는 검색창·분야 선택이 hidden이라 로고만 남는다. 그때도 헤더 높이가
   달라지지 않도록(화면을 오갈 때 헤더가 들썩이지 않도록) 최소 높이를 로고 높이로 고정한다. */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
}

/* 로고 전체(#brand-home-btn)가 <a>라 밑줄과 링크 색을 지우고 버튼처럼 보이게 만든다.
   호버 시 살짝 커지는 정도(scale 1.02)로만 반응해 클릭 가능함을 알려준다 — transform은
   레이아웃에 영향을 주지 않으므로(문서 흐름에서 크기를 차지하지 않음) 옆 요소(검색·드롭다운)를
   밀어내지 않는다. 포커스는 기본 아웃라인 대신 --accent 톤의 전용 스타일을 지정한다(제거하지
   않음 — 키보드 접근성 유지, CLAUDE.md 접근성 규칙 참고). */
.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  border-radius: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.brand-group:hover {
  transform: scale(1.02);
}

.brand-group:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 로고(2026-10-13~): 3D 책 아이콘 + 「올인원! 학교행정업무 매뉴얼」을 그린 이미지 한 장
   (assets/img/brand-logo.webp, 원본 높이 160px을 줄여 써서 선명한 화면에서도 안 깨짐).
   560px 이하는 index.html의 <picture>가 아이콘만 자른 brand-logo-icon.webp로 바꾼다 —
   글자까지 줄이면 둘째 줄이 읽히지 않을 만큼 작아져서다. 높이만 정하고 폭은 비율대로. */
#brand {
  display: flex;
  margin: 0;
  min-width: 0;
}

#brand picture {
  display: flex;
  min-width: 0;
}

.brand-logo-img {
  display: block;
  height: clamp(52px, 5vw, 68px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 560px) {
  .brand-logo-img {
    height: 52px;
  }
}

/* ---------- 레이아웃 ---------- */

#layout {
  flex: 1;
  display: flex;
  min-height: 0;
}

#sidebar {
  width: 310px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  padding: 10px 0;
}

/* C안 롤아웃(2026-08): 좌측 사이드바를 시각적으로만 숨긴다. HTML/JS는 그대로 두었으니
   되돌리려면 이 규칙 하나만 지우면 된다. 도메인 이동은 #topbar의 업무분야 드롭다운으로,
   세부업무 이동은 본문 상단 pill 목차로 대체했다(preview/sidebar-test.html에서 검증). */
#sidebar {
  display: none;
}

/* 가로 여백은 안쪽 .page-container가 담당하므로 좌우 패딩을 두지 않는다. 세로 스크롤바가
   생기면 내용이 왼쪽으로 밀려 헤더(스크롤바 없음)와 기준선이 어긋나므로 scrollbar-gutter로
   오른쪽 스크롤바 자리를 항상 예약해(scrollbar-gutter: stable) 내용이 있든 없든 폭이
   달라지지 않게 하고, 헤더에도 같은 폭을 padding-right로 넘겨 기준선을 맞춘다(위 #topbar).
   아래쪽 패딩은 "의견 보내기" 버튼(고정, 아래에서 64px까지 차지)이 푸터 마지막 줄과
   겹치지 않을 만큼 준다. */
#detail {
  flex: 1;
  overflow-y: auto;
  padding: 36px 0 140px;
  scrollbar-gutter: stable;
}

.loading-text, .empty-state {
  color: var(--text-muted);
  font-size: var(--fs-md);
  padding: 10px 18px;
}

/* ---------- 사이드바: 업무분야 / 세부업무 ---------- */

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

.category-item {
  border-bottom: 1px solid var(--border);
}

.category-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  transition: background-color 0.12s ease;
}

.category-toggle:hover {
  background: var(--bg);
}

.category-toggle.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.category-toggle.active .toggle-arrow {
  color: var(--accent);
}

.toggle-arrow {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  width: 12px;
  flex-shrink: 0;
}

.category-body {
  padding-bottom: 6px;
}

.subtask-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}

.subtask-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px 11px 36px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text);
  font-family: inherit;
  transition: background-color 0.12s ease;
}

.subtask-btn:hover {
  background: var(--bg);
}

.subtask-btn.active {
  background: var(--accent-bg);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

/* subTask.items가 있는 세부업무 아래에 중첩 표시되는 항목 목록(예: 학교운영위원회 구성 → 학부모위원 선출 외) */
.subtask-item-nav-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.subtask-item-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 16px 8px 56px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text-muted);
  font-family: inherit;
  transition: background-color 0.12s ease;
}

.subtask-item-nav-btn:hover {
  background: var(--bg);
}

.subtask-item-nav-btn.active {
  background: var(--accent-bg);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.subtask-item-nav-btn-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.field-error {
  margin: 8px 16px;
  padding: 10px 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
}

/* ---------- 링크 공통 (상세화면 관련 사이트) ---------- */

.link-anchor {
  display: block;
  text-decoration: none;
  color: inherit;
}

.link-anchor .link-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent);
}

a.link-anchor:hover .link-name {
  text-decoration: underline;
}

.link-anchor .link-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.link-anchor.link-disabled {
  cursor: default;
}

.link-anchor.link-disabled .link-name {
  color: var(--text-faint);
}

/* ---------- 상세 화면: 헤더 ---------- */

.placeholder {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-top: 48px;
  text-align: center;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--text);
}

.detail-header-main {
  flex: 1;
  min-width: 0;
}

/* ---------- 상세 화면: AI 질문 버튼 ---------- */

.ai-assistant-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 240px;
}

.btn-ai-assistant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ai-accent);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transition: background-color 0.12s ease;
}

a.btn-ai-assistant:hover {
  background: var(--ai-accent-hover);
}

.btn-ai-assistant svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-ai-assistant .icon-3d {
  width: 24px;
  height: 24px;
  margin: -4px 0;
  flex-shrink: 0;
}

/* url이 없을 때: 자리는 유지하되 회색으로 흐리게, 클릭 불가 */
.btn-ai-assistant.is-disabled {
  background: var(--bg);
  color: var(--text-faint);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.ai-assistant-caption {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: right;
}

/* 분야 개요 화면: 제목 바로 아래, 왼쪽 정렬로 항상 표시(섹션 목록에 속하지 않는 고정 요소) */
.ai-assistant-box-overview {
  align-items: flex-start;
  max-width: none;
  margin: 4px 0 16px;
}

.ai-assistant-box-overview .ai-assistant-caption {
  text-align: left;
}

/* ---------- 분야 개요: 앱 진입점 배너 ---------- */
/* apps/ 폴더의 웹 도구로 가는 링크(js/detailView.js의 renderAppLinkBanner, 2026-09~).
   서식 배지·세부업무 카드와 달리 도메인에 들어오자마자 눈에 들어와야 해서 카드 그리드
   위에 가로로 길게 한 줄 놓는다. 세부업무 파스텔 카드와 섞이지 않도록 파스텔 배경 대신
   테두리 + 옅은 바탕으로 구분한다. 색은 그 화면이 속한 도메인 색을 따른다
   (--dom-base/--dom-deep) — 도메인 홈 도구 카드와 같은 파스텔 한 벌이다(2026-09-20~).
   도구 카드와 마찬가지로 왼쪽 색 막대는 두지 않는다. */
.app-link-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--dom-base) 32%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--dom-base) 10%, var(--panel-bg));
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.app-link-banner:hover {
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
}

.app-link-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--dom-base) 20%, var(--panel-bg));
  color: var(--dom-deep);
}

.app-link-icon svg {
  width: 21px;
  height: 21px;
}

.app-link-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.app-link-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--dom-deep);
}

.app-link-desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  word-break: keep-all;
}

/* 새 탭으로 열린다는 것은 글자("열기")로 알리고, 화살표는 장식이므로 ::after로만 붙인다. */
.app-link-open {
  flex: none;
  align-self: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--dom-base) 40%, transparent);
  border-radius: 7px;
  background: var(--panel-bg);
  color: var(--dom-deep);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.app-link-open::after {
  content: ' →';
}

.app-link-banner:hover .app-link-open {
  background: color-mix(in srgb, var(--dom-base) 16%, var(--panel-bg));
}

/* 좁은 화면에서는 "열기"를 아래로 내리고 아이콘 폭만큼 들여써서 제목과 왼쪽을 맞춘다. */
@media (max-width: 640px) {
  .app-link-banner {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .app-link-text {
    flex-basis: calc(100% - 54px);
  }

  .app-link-open {
    margin-left: 54px;
  }
}

/* 앱 배너 + 그 아래 서식 묶음(2026-09~). 배너의 아래쪽 여백은 묶음 전체가 갖고, 배너
   자신은 서식 상자와 붙어 보이도록 여백을 없앤다. */
.app-link-block {
  margin: 0 0 var(--space-6);
}

.app-link-block .app-link-banner {
  margin: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 앱이 없어도 손으로 쓸 수 있게 두는 서식. 배너와 한 덩어리로 읽히도록 위쪽 테두리를
   지우고 흰 배경으로 이어 붙인다("도구 → 서식" 순서). */
.app-link-forms {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--panel-bg);
}

.app-link-forms-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.app-link-forms-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.app-link-forms-asof {
  padding: 1px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.app-link-forms-source {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  word-break: keep-all;
}

/* ---------- 상세 화면: 분야 개요 ---------- */

.overview-header {
  margin-bottom: 24px; /* 16px → 24px, 큰 구획 경계라 섹션 간 여백에 맞춰 넓힘 */
  padding-bottom: 10px;
  border-bottom: 2px solid var(--text);
}

.overview-header .breadcrumb {
  margin-bottom: 6px;
}

.overview-header h2 {
  margin: 0 0 6px;
  font-size: var(--fs-2xl);
  color: var(--heading);
}

/* 도메인 첫 화면 기준일ㆍ최종수정일 줄(2026-10-12~, 모양은 세부업무 머리 .meta-dates 그대로) */
.overview-dates {
  margin-bottom: 10px;
}

.overview-summary {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-muted);
}

/* 홈 화면 업무분야 카드(.home-tab)와 같은 3열·파스텔 카드 비율로 시작했지만, 세부업무는
   페이지에서 중요도가 높은 섹션이라(2026-08) 여백·최소높이·제목 폰트를 홈 카드보다
   한 단계 더 키웠다. 배경색은 .home-tab-color-N을 그대로 재사용한다(항목마다 다른 색은
   detailView.js에서 순서대로 배정). */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3); /* 8px → 12px */
}

/* 카드가 딱 2장이면(학교운영위원회 「구성」ㆍ「운영」, 2026-10~) 3열의 셋째 칸이 통째로 비어 허전해
   보이므로 2열로 꽉 채운다. 카드 수를 세는 스크립트 없이 :has()로 판단한다. 좁은 화면 규칙은
   아래 미디어쿼리가 같은 선택자로 다시 덮는다. */
.overview-cards:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .overview-cards,
  .overview-cards:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }
}

/* 세부업무 카드는 <button>, 다른 페이지로 이동하는 카드(.toolCards)는 <a>로 렌더링되므로
   링크 기본 스타일(파란 글씨·밑줄)을 여기서 지워 둘 다 같은 모양으로 보이게 한다. */
/* 세부업무 카드는 흰 카드 + 왼쪽 색 막대로 홈의 색면 카드보다 한 단계 조용하게 둔다
   (2026-08~). 홈과 같은 파스텔을 같은 크기 3열 그리드로 돌려 쓰다 보니 층을 오갈 때
   지금 어느 화면인지 헷갈렸다. 색 정체성은 왼쪽 4px 막대(기준색)와 번호
   배지에 남기고 카드 면은 자기 색을 아주 옅게 깐 틴트로 둔다(2026-08~ — 처음엔 순백으로
   뒀는데 홈의 색면과 단차가 너무 커서 넘어올 때 화면이 하얗게 비쳤다). 페이지 배경(--bg)과는
   1px 테두리와 왼쪽 색 막대가 구분해 준다. 크기·글자 크기는 그대로다 — 무게만 바꾼다. */
.overview-card {
  --card-soft: color-mix(in srgb, var(--card-base, var(--field-base-1)) var(--field-fill-mix), #fff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: left;
  background: var(--panel-bg); /* 2026-09-13 위계 규칙: 파스텔 틴트 폐지, 흰 카드 + 왼쪽 색 띠 */
  border: 1px solid var(--border);
  border-left: 4px solid var(--card-base, var(--field-base-1));
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: var(--space-4); /* 12px → 16px */
  min-height: 92px; /* 110px는 태그 줄(기준일자·서식 건수)이 있던 시절 값 — 태그 줄 제거로 되돌림 */
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* hover는 같은 틴트를 한 단계만 더 진하게 한다(--card-sub-hover-mix). 카드 면이 틴트가
   되면서(2026-08~) 예전의 --bg(회청색 페이지 배경)로 바꾸던 방식은 색 계열이 튀어 보였다. */
.overview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(31, 36, 48, 0.14);
  background: var(--panel-bg);
  border-color: var(--border-strong);
  border-left-color: var(--card-base, var(--field-base-1));
}

/* 키보드 포커스는 카드 전체를 감싸는 링으로 남긴다. */
.overview-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.overview-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 카드 면이 흰색이 됐으므로(2026-08~) 반투명 흰 배지 대신 그 분야의 파스텔을 배경으로,
   같은 hue의 진한 톤을 글자색으로 쓴다 — 색 정체성이 왼쪽 막대와 이 배지에만 남는다.
   열 가지 hue 전부 파스텔 위 대비 5.16:1 이상(AA 통과)이다. */
.overview-card-badge {
  flex-shrink: 0;
  width: 24px; /* 22px → 24px */
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-base, var(--field-base-1)) var(--field-fill-mix), #fff);
  color: var(--card-base, var(--field-base-1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs); /* 11.5px → 12.5px */
  font-weight: 700;
  line-height: 1;
}

/* 「다른 페이지로」 카드 배지의 3D 그림(2026-10-13~) — 번호 배지의 원 바탕 없이 그림만 */
.overview-card-badge:has(.icon-3d) {
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 0;
}

.overview-card-title {
  /* font-size는 파일 뒤쪽의 "위계 3단계" 규칙에서 .overview-toggle-summary 등과 함께 정한다. */
  font-weight: 700;
  color: var(--text);
  min-width: 0;
}

/* 세부업무 카드 제목 아래 한 줄(2026-09~) — 지금은 감사사례 도메인의 "사례 N건 · 반복 N건"만
   쓴다. 카드 배경이 파스텔이라 --text-muted로는 옅어 보여서 한 단계 진한 --text-muted 대신
   본문색을 옅게 쓰는 대신 굵기로 구분한다(제목보다는 작고 연하게). */
.overview-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-left: 32px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* 시기 딱지(subTask.timing, 2026-09-14~) — 물품관리 첫 화면의 「업무처리 절차도」를 지우면서
   절차도 상자에만 있던 시기 정보를 세부업무 카드로 옮긴 것이다. 때가 정해진 일(1월ㆍ7월)은
   도메인 색, 「수시」는 회색 — 절차도 상자의 딱지(.lf-when/.lf-when-always)와 같은 뜻ㆍ같은
   모양이지만, 그쪽은 절차도 안에서만 쓰는 --lf-* 토큰을 쓰므로 규칙을 따로 둔다. */
.overview-card-when {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text-faint);
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--text) 8%);
  border: 1px solid var(--border);
}

.overview-card-when-fixed {
  color: var(--dom);
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--dom) 10%);
  border-color: color-mix(in srgb, var(--panel-bg) 65%, var(--dom) 35%);
}

/* 「K-에듀파인 안내」 꼬리표(2026-09-28~) — 세부업무나 그 안 항목에 에듀파인 화면 안내
   (edufineGuide)가 있다는 표시. 시기 딱지와 같은 알약에 K-에듀파인 초록 토큰만 입힌다. */
.overview-card-when-kedufine {
  color: var(--kedufine);
  background: var(--kedufine-bg);
  border-color: var(--kedufine-border);
}

/* 링크 꼬리표(2026-09-28~) — 누르면 그 세부업무에서 안내가 처음 나오는 자리로 간다. 눌리는
   것으로 보이게 손가락 커서ㆍ호버 때 진한 초록 채움ㆍ뒤에 작은 화살표(장식이라 ::after로만). */
a.overview-card-when-kedufine {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

a.overview-card-when-kedufine::after {
  content: '→';
}

a.overview-card-when-kedufine:hover {
  color: #fff;
  background: var(--kedufine);
  border-color: var(--kedufine);
}

a.overview-card-when-kedufine:focus-visible {
  outline: 2px solid var(--kedufine);
  outline-offset: 2px;
}

/* toolCards(다른 페이지로 이동하는 카드)의 설명문 — 세부업무 카드의 .overview-card-meta 자리를
   대신한다. 이 카드에는 기준일자·서식 건수가 없으므로 태그 대신 설명 문장을 보여준다. */
.overview-card-desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- 분야 개요: 목차형 세부업무 카드(.overview-card-toc, 2026-09-21~) ---------- */
/* 카드 안에 그 세부업무의 항목 이름을 전부 나열해 도메인 홈 자체가 목차가 되게 한다
   (js/detailView.js의 renderSubtaskTocCard — 항목이 있는 세부업무는 전 도메인 공통).
   .overview-card의 크기ㆍ테두리ㆍ왼쪽 색 막대ㆍ그림자는 그대로 물려받되, 카드는 <div>라
   누를 수 있는 것은 머리줄(<a>, 세부업무 화면)과 항목 링크(<a>, 항목 화면)뿐이다. 그래서
   카드 전체가 뜨는 hover 대신 눌리는 부분만 각각 반응한다. 색은 시안의 카드별 순환이 아니라
   도메인 색 토큰(--dom-base/--dom-deep)의 농담만 쓴다 — 위계 규칙(2026-09-13)과 같다. */
.overview-card.overview-card-toc {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  cursor: default;
  overflow: hidden; /* 머리줄 음영이 둥근 모서리를 넘지 않게 */
}

.overview-card.overview-card-toc:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--border);
}

/* 머리줄 — 옅은 도메인 색 음영을 깔아 아래 목록과 구분하고, 눌리는 것으로 보이게 hover에서
   음영을 한 단계 진하게 한다. 항목 목록 밖에도 내용이 있는 세부업무(계약의 운영 흐름도ㆍ
   일상감사 준비 자료)는 이 머리줄로만 갈 수 있으므로 링크임이 드러나야 한다. 제목은 카드
   제목의 한 칸 위(--fs-lg)로 키운다. */
.overview-card-toc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--space-4);
  background: color-mix(in srgb, var(--card-base, var(--field-base-1)) 10%, var(--panel-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--card-base, var(--field-base-1)) 28%, var(--panel-bg));
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.overview-card-toc-head:hover {
  background: color-mix(in srgb, var(--card-base, var(--field-base-1)) var(--field-fill-mix), var(--panel-bg));
}

.overview-card-toc-head:hover .overview-card-title {
  color: var(--dom-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.overview-card-toc-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.overview-card-toc-head .overview-card-title {
  font-size: var(--fs-lg);
  flex: 1 1 auto;
}

/* 머리줄 배지는 음영 위에 놓이므로 파스텔 원 대신 흰 원으로 띄운다. */
.overview-card-toc-head .overview-card-badge {
  background: var(--panel-bg);
}

/* 목차형 카드에서는 시기 딱지 줄(.overview-card-meta)이 머리줄 아래 목록 위에 온다. */
.overview-card-toc .overview-card-meta {
  margin-top: 8px;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* 항목 목록 — 작은 글씨, 앞에 도메인 색 점. */
.overview-card-toc-list {
  list-style: none;
  margin: 0;
  padding: 8px var(--space-4) 12px;
}

.overview-card-toc-link {
  display: block;
  position: relative;
  padding: 3px 0 3px 12px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
}

.overview-card-toc-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--card-base, var(--field-base-1));
  opacity: 0.45;
}

.overview-card-toc-link:hover {
  color: var(--dom-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.overview-card-toc-link:hover::before {
  opacity: 1;
}

.overview-card-toc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 묶음 목록(subTask.homeGroups, 2026-10~, renderTocGroupsHTML) — 항목이 많은 세부업무 카드를 소제목
   몇 묶음과 분류 칩으로 나눈다. 묶음 사이는 목록 자체의 위아래 여백만 줄여 촘촘하게 잇는다. */
.overview-card-toc-group + .overview-card-toc-group {
  border-top: 1px dashed color-mix(in srgb, var(--card-base, var(--field-base-1)) 28%, var(--panel-bg));
}

.overview-card-toc-group .overview-card-toc-list {
  padding-top: 2px;
  padding-bottom: 8px;
}

.overview-card-toc-subhead {
  padding: 8px var(--space-4) 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom-deep);
}

/* 카드 맨 위 바로가기 한 줄(topLink) — 항목 목록과 구분되게 옅은 도메인 색 바탕의 알약. */
.overview-card-toc-toplink {
  display: inline-block;
  margin: 10px var(--space-4) 2px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom-deep);
  background: color-mix(in srgb, var(--card-base, var(--field-base-1)) 10%, var(--panel-bg));
  border: 1px solid color-mix(in srgb, var(--card-base, var(--field-base-1)) 28%, var(--panel-bg));
  text-decoration: none;
  align-self: flex-start;
}

.overview-card-toc-toplink::after {
  content: " →";
}

.overview-card-toc-toplink:hover {
  background: color-mix(in srgb, var(--card-base, var(--field-base-1)) var(--field-fill-mix), var(--panel-bg));
}

.overview-card-toc-toplink:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 접는 묶음(folds) — 네이티브 <details>, 기본 접힘. 원문 순서를 지키며 제목만 붙인 묶음이라 세로로 쌓고,
   펼치면 그 자리에서 항목 링크가 나온다. */
.overview-card-toc-folds {
  padding: 4px var(--space-4) 12px;
}

.overview-card-toc-fold + .overview-card-toc-fold {
  margin-top: 4px;
}

.overview-card-toc-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--card-base, var(--field-base-1)) 28%, var(--panel-bg));
  cursor: pointer;
}

.overview-card-toc-fold > summary::-webkit-details-marker {
  display: none;
}

.overview-card-toc-fold > summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 700;
  color: var(--dom-deep);
}

.overview-card-toc-fold[open] > summary {
  color: var(--dom-deep);
  background: color-mix(in srgb, var(--card-base, var(--field-base-1)) 10%, var(--panel-bg));
}

.overview-card-toc-fold[open] > summary::after {
  content: "−";
}

.overview-card-toc-fold > summary:hover {
  color: var(--dom-deep);
}

.overview-card-toc-fold > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.overview-card-toc-fold-n {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom-deep);
}

.overview-card-toc-fold .overview-card-toc-list {
  padding: 4px 0 2px 6px;
}

/* ---------- 분야 개요·세부업무: 영상 카드 ---------- */
/* 영상이 여럿이면 세로로 쌓는다(가로 배치는 좁은 화면에서 무너짐) — 카드 사이 간격은 이
   묶음 하나가 맡고, 개별 .video-card는 자기 여백을 갖지 않는다. */
.video-card-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* 영상 콜아웃은 도메인 색을 따르지 않고 어디서나 같은 연보라를 쓴다(2026-09~) — 도구 카드는
   도메인 색, 영상은 연보라로 나눠 두면 색만 보고도 "이건 도메인 자료가 아니라 영상"임이
   구분된다. 예전에는 .overview-card처럼 흰 패널 + 도메인 색 막대(home-tab-color-N)였다.
   클릭 대상이 카드 전체가 아니라 안의 버튼 하나뿐이라 <button> 대신 <div>로 만든다. 다른
   내용보다 먼저(분야 개요·세부업무 화면 맨 위) 붙는다. */
.video-card {
  background: linear-gradient(120deg, #f2eefc, #e6dff8);
  border: 1px solid #cfc2ee;
  border-left: 4px solid #6b5bd2;
  border-radius: 12px;
  padding: 16px 20px;
}

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

.video-card-info {
  min-width: 0;
}

.video-card-title {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: #3f3390;
}

.video-card-source {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: #5b5175;
}

.video-card-play-btn {
  flex-shrink: 0;
  font-size: var(--fs-md);
  padding: 8px 18px;
  border: 1px solid #6b5bd2;
  border-radius: 999px;
  background: #6b5bd2;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  transition: background-color 0.12s ease;
}

/* 누를 때 색이 파랑(--accent-hover)으로 튀지 않게 같은 보라의 한 단계 진한 색을 쓴다. */
.video-card-play-btn:hover {
  background: #5a4ac2;
  border-color: #5a4ac2;
}

/* 버튼을 누르기 전에는 만들어지지도 않는 iframe 자리 — 16:9 비율만 유지하고 본문 폭을
   넘지 않는다(가로 스크롤 없음). */
.video-card-frame-wrap {
  margin-top: var(--space-4);
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.video-card-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-card-links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: var(--space-3);
}

.video-card-link {
  font-size: var(--fs-sm);
  color: #6b5bd2;
  text-decoration: none;
}

.video-card-link:hover {
  text-decoration: underline;
}

/* 재생목록 링크(2026-08~) — 카드마다 반복하지 않고 영상 카드 묶음 아래에 한 줄로만 둔다
   (도메인 레벨 videoPlaylist에만 있는 필드라 세부업무 화면에는 나타나지 않는다). */
.video-card-playlist-link {
  align-self: flex-end;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.video-card-playlist-link:hover {
  text-decoration: underline;
}

/* ---------- 업무사례집(아코디언) ---------- */
/* <details>/<summary>를 사용해 별도 토글 스크립트 없이 클릭 시 펼쳐지도록 구현했다. */

.casebook-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.casebook-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.casebook-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.casebook-summary::-webkit-details-marker {
  display: none;
}

.casebook-summary::before {
  content: '▸';
  color: var(--sec-casebook);
  font-size: var(--fs-xs);
  margin-right: 10px;
  flex-shrink: 0;
}

.casebook-item[open] .casebook-summary::before {
  content: '▾';
}

.casebook-title {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.casebook-date {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.casebook-body {
  padding: 4px 18px 18px 42px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.casebook-field {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
}

.casebook-field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--sec-casebook);
  margin-bottom: 3px;
}

/* ---------- 업무개요 상세 블록(heading/table/callout) ---------- */

.overview-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.overview-block-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 2px 0 -4px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

/* item.blocks(type:'body')의 도입문(block.intro, 2026-08~) — "이 항목은 Ⅴ장에서 다루는
   처분 방법 중 하나"처럼 항목을 소개하는 문장은 사실 나열이 아니라서 다른 불릿과 같은
   줄에 섞이면 위계가 안 보였다(5-1 매각 등). 목록 위 별도 문단으로 분리하고 옅은 색으로
   눌러서, 본문 사실 목록(.notes-list, 진한 --text)보다 한 단계 낮은 "안내 문구"로 읽히게
   한다. 간격은 renderBodyBlock이 감싸는 .overview-blocks의 gap을 그대로 쓴다. */
.body-block-intro {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
}

/* "한눈에 보기" 표 제목만 위쪽 여백을 더 크게 줘서 표 하나하나가 시각적으로 구분되는
   단위로 보이게 한다(2026-08, 도메인 공통 적용). overview-block-heading은 개념 정의 블록·
   업무개요 콜아웃 제목과도 공유하는 클래스라 margin-top만 이 클래스로 덮어써서 다른 곳에는
   영향이 없게 한다. margin-bottom(-4px, 표와의 간격)은 그대로 유지된다. */
.table-caption-heading {
  margin-top: var(--space-5);
}

/* "한눈에 보기" 섹션 안 개별 표 제목 앞 체크 마커 — 섹션 헤더 아이콘(30px, 색배지)보다
   작고 옅게 둬서 하위 위계임을 보여준다(2026-08). renderItemTablesSection에서만 쓴다. */
.table-caption-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.table-caption-icon svg {
  width: 100%;
  height: 100%;
}

/* 개념 정의(conceptBox) 블록 소제목 앞 순번 배지 — 세부업무 카드 번호 배지
   (.overview-card-badge)와 같은 모양이되, 파스텔 카드 배경이 아니라 흰 패널 위에 놓이므로
   반투명 흰색 대신 기존 accent 색을 재사용한다. */
.concept-block-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

/* 업무개요 표 블록 아코디언 — <details>/<summary>만 쓰고 별도 토글 스크립트는 없다.
   summary 우측 +/− 표시는 ::after 장식 콘텐츠라 스크린리더에 별도 텍스트로 읽히지 않는다. */

.overview-toggle-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.overview-toggle-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.overview-toggle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4); /* 12px → 8px(세로), 컴팩트하게 */
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  background: var(--border-strong);
}

.overview-toggle-summary:hover {
  background: var(--text-faint);
}

.overview-toggle-summary::-webkit-details-marker {
  display: none;
}

/* 기본 포커스 아웃라인은 유지하고, 키보드 탭 이동 시 더 또렷하게 보이도록 focus-visible만 강화한다. */
.overview-toggle-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.overview-toggle-summary::after {
  content: '+';
  flex-shrink: 0;
  width: 20px;
  font-size: var(--fs-md); /* 제목(.overview-toggle-summary, --fs-md)과 같은 칸 */
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}

.overview-toggle-item[open] .overview-toggle-summary::after {
  content: '\2212';
}

.overview-toggle-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
}

/* 모바일 등 좁은 화면에서 표가 넘치면 표 자체가 아니라 이 래퍼가 가로 스크롤된다. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table th,
.data-table td {
  border: 1px solid var(--table-border);
  padding: 4px 10px; /* 6px → 4px, 표 행을 더 조밀하게(2026-08) — .procedure-table과 동일해짐 */
  text-align: left;
  vertical-align: top;
  min-width: 96px;
  /* 낱말 단위 줄바꿈과 줄간격 통일(2026-09~) — 기본 줄바꿈은 한글을 글자 단위로 끊어
     「산업안전보건관리」가 「산업안전보/건관리」처럼 갈라 줄 끝이 들쭉날쭉해 보였다.
     keep-all로 낱말을 붙여두되, 칸 폭보다 긴 낱말(긴 URL 등)만 break-word로 예외처리한다.
     여백 자체는 아래 .data-table-wrap 규칙이 덮어쓴다(본문 표는 항상 그 래퍼 안에 있다). */
  line-height: 1.62;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 숫자를 등폭으로 — 요율·금액·조문 번호가 세로로 늘어설 때 자릿수가 어긋나 보이지 않게
     한다(2026-09~). 셀 전체에 걸어도 한글·영문 글자 모양은 바뀌지 않고 숫자만 폭이 고정되므로
     "숫자 칸"을 따로 표시하는 클래스 없이 th/td에 한 번만 지정한다. */
  font-variant-numeric: tabular-nums;
}

.data-table th {
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 700;
}

/* 머리글 행 아래만 한 단계 진하게 — 머리글과 본문의 경계를 셀 격자보다 뚜렷하게 한다
   (2026-09~). 배경색·글자색은 건드리지 않고 아래 경계선 색만 지정한다. */
.data-table thead th {
  border-bottom-color: var(--table-border-header);
}

/* 칸이 9개 이상인 넓은 표는 칸 최소 너비(96px)를 4em으로, 좌우 여백을 8px로 낮춘다(2026-10-15~) — 11칸 표는
   96px × 11만으로 본문 폭(약 980px)을 넘겨 가로 스크롤이 생겼다(계약 「입찰」 적격심사 배점표,
   복무 「연가」 일수표). 「27」「15일」처럼 짧은 칸은 좁게, 긴 낱말 칸은 keep-all로 제 폭을 가진다. */
.data-table:has(tr > :nth-child(9)) th,
.data-table:has(tr > :nth-child(9)) td {
  min-width: 4em;
  /* 칸 좌우 여백도 12px → 8px — 가장 큰 글씨(가⁺⁺)에서 입찰 배점표가 72px 넘쳤다 */
  padding-left: 8px;
  padding-right: 8px;
}

/* 표.narrowColumns로 지정한 열을 내용 폭까지만 줄인다 — .procedure-table의 "단계" 열에 쓰던
   width:1% 트릭과 같다(2026-08, renderDataTable의 narrowColumns 옵션). min-width도 같이
   풀어야 좁아진다. td에도 같은 클래스를 붙여야 본문 셀도 한 줄로 안 깨진다(2026-08 수정 —
   처음엔 th에만 있어서 헤더는 한 줄인데 본문("100분의 50 감액" 등)은 여전히 줄바꿈됐다). */
.data-table th.col-narrow,
.data-table td.col-narrow {
  width: 1%;
  min-width: 0;
  white-space: nowrap;
}

/* 표.centerColumns로 지정한 열만 가운데 정렬한다(renderDataTable의 centerColumns 옵션,
   2026-08). 지정하지 않은 열은 기존 기본값(왼쪽 정렬)을 유지한다. */
.data-table th.col-center,
.data-table td.col-center {
  text-align: center;
}

/* rowspan으로 세로 병합된 셀은 여러 행 높이를 차지하므로, 기본값인 상단 정렬 대신 세로
   가운데 정렬해야 병합된 영역 안에서 위로 쏠려 보이지 않는다(renderDataTable의 rowspan
   셀, 2026-08). */
.data-table td[rowspan] {
  vertical-align: middle;
}

/* .code-table — 물품관리 "정수관리대상물품(12종 품목)"(item.tables[].tableClass, renderDataTable) 코드 표
   스타일(2026-09~, 시안 정수관리물품-묶음표-시안.html ㉯ 묶음 표). 연번ㆍ분류번호 열은 데이터의
   centerColumns로 가운데 정렬, 품목명만 왼쪽. 머리글의 파란 채움을 없애고 아래 선만 도메인 색(--dom,
   body[data-field])으로 두며, 세로 칸선을 빼고 가로 선만 가늘게 남긴다. 같은 꼴의 코드 표(연번ㆍ코드ㆍ
   이름)가 다른 도메인에 생기면 tableClass:'code-table'만 붙이면 그 도메인 색으로 같은 모양이 된다. */
.data-table-wrap .code-table th,
.data-table-wrap .code-table td {
  border-right: none;
  padding: 9px 12px;
  vertical-align: middle; /* 연번(작은 글자)과 분류번호 칩의 세로 중심을 맞춘다 */
}

.data-table-wrap .code-table thead th {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 2px solid var(--dom);
}

.data-table-wrap .code-table tbody tr:last-child td {
  border-bottom: none;
}

/* 연번 열 — 작고 옅게(시안 .no). */
.data-table-wrap .code-table td:first-child {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 분류번호 칩(renderDataTable의 codeColumns, .cell-code) — 자릿수가 눈으로 맞아떨어지도록 고정폭 글꼴.
   assets/fonts/에는 고정폭 글꼴이 없으므로(Pretendard·Do Hyeon뿐) 기기 글꼴로 넘긴다:
   ui-monospace → --mono(Consolas, D2Coding). */
.cell-code {
  display: inline-block;
  font-family: ui-monospace, var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-hover);
  background: var(--c-accent-bg-light, var(--accent-bg));
  border: 1px solid var(--c-border-light, var(--border));
  border-radius: 6px;
  padding: 2px 9px;
  line-height: 1.5;
}

/* 가름줄 행(renderDataTable의 { group, note } 행, 시안 .gh) — 전체 열을 덮는 묶음 머리. 색은 도메인 색을
   흰색과 섞어 만든다(시안의 --dom-soft/--dom-ln에 해당). */
.data-table-wrap .code-table .data-table-group-row td {
  background: color-mix(in srgb, var(--dom) 8%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--dom) 30%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--dom) 30%, #fff);
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  text-align: left;
}

.data-table-wrap .code-table tbody tr:first-child.data-table-group-row td {
  border-top: none;
}

.data-table-group-name {
  font-weight: 700;
  color: var(--dom);
  letter-spacing: .02em;
}

.data-table-group-note {
  margin-left: 6px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* .rate-table — property 4-2 "대부료 요율표"(block.tableClass, renderDataTable) 전용 스타일.
   요율(3번째) 열만 우측 정렬한다(세로 구분선 제거는 2026-08~ .data-table-wrap 기본 스타일이
   전체 표에 적용하므로 이 표만의 별도 규칙은 필요 없어져 삭제했다). 열 구성이 고정된(근거
   조문 | 대부 목적·재산 구분 | 요율 | 비고) 표 하나에만 쓰는 스타일이라 새 renderDataTable
   옵션을 늘리는 대신 nth-child로 범위를 좁혔다. */
.rate-table th:nth-child(3),
.rate-table td:nth-child(3) {
  text-align: right;
}

/* 요율 구간 구분 행(.rate-tier-row) — colspan 한 칸짜리 행으로 "5.0%  1천분의 50 이상"처럼
   구간을 표시한다. 5.0%(빨강)→1.0%(파랑) 순서로 기존 의미색 변수를 그대로 재사용한다
   (--danger가 원래 오류, --warn이 원래 경고 등 다른 의미로 쓰이는 변수지만, 여기서는 순서만
   빌려 쓰는 것이라 문제 없음 — 새 색상값은 만들지 않았다). */
.rate-table .rate-tier-row td {
  font-weight: 700;
  padding: 6px 10px;
}
.rate-table .rate-tier-5 td { background: var(--danger-bg); color: var(--danger); }
.rate-table .rate-tier-4 td { background: var(--warn-bg); color: var(--warn-border); }
.rate-table .rate-tier-3 td { background: var(--point-bg); color: var(--point); }
.rate-table .rate-tier-2-5 td { background: var(--sec-procedure-bg); color: var(--sec-procedure); }
.rate-table .rate-tier-1 td { background: var(--accent-bg); color: var(--accent); }

/* "주거용건물이 있는 토지" 행처럼 구간 안에서 학교 실무상 특히 자주 쓰는 항목 하나를
   강조할 때(2026-08~). 구간 구분 행과 헷갈리지 않도록 굵게 하지 않고 배경색만 준다. */
.rate-table .rate-row-highlight td {
  background: var(--accent-bg);
}

/* item.flowchartImage — 분기·재합류가 여러 단계 겹쳐 SVG로 다시 그리면 좁은 화면(본문
   컬럼 약 680px)에서 글씨가 깨지는 원문 흐름도(예: 5-1 불용품의 처분 "불용품 처분 흐름도",
   30박스)를 위한 컴포넌트(2026-08~). SVG 재현 대신 PDF 원본에서 흐름도 영역만 크롭한
   이미지를 <details>/<summary> 안에 기본 접힘으로 넣는다 — 평소에는 스크롤을 차지하지
   않다가 클릭하면 펼쳐진다(별도 토글 스크립트 없음). summary는 .legal-section-summary와
   같은 +/− 표시를 그대로 쓴다(선택자 묶음, 아래). 이미지는 원본 width/height 비율을 유지한
   채 본문 폭에 맞춰서만 축소되고(가로 스크롤 없음), 클릭하면 원본 파일을 새 탭에서 원본
   크기로 연다. 다른 도메인의 흐름도(국공유재산관리 매각 흐름도 19박스, 학교운영위원회
   회의진행 흐름도 15박스 등)도 이 컴포넌트를 그대로 재사용한다 —
   docs/reference/흐름도-구조-메모.md 참고. summary의 +/− 토글 표시는 .legal-section-summary와
   선택자를 묶어서 함께 정의한다(파일 뒤쪽 "근거법령이 많으면" 규칙 참고) — 스타일 중복 정의를
   피하기 위해 여기서는 이미지 관련 스타일만 둔다. */
.flowchart-image-body {
  padding-top: 4px;
}

/* 도식(흐름도·구조도) 크기 규칙(2026-09~, 한 곳에 모아 둔다) — SVG·PNG·JPG·WEBP 전부 이
   규칙 하나만 따른다. 예전에는 파일 형식마다(SVG는 컨테이너를 항상 채움, 래스터는 원본
   해상도 이상 안 키움) 다르게 굴었고, SVG는 도식마다 flowchartImage.width(JSON)를 CSS
   변수로 주입해 원본 viewBox 폭만큼만 채우도록 개별 조정했다 — 그 결과 도식마다 최종
   크기가 다 달라서(학교회계는 컨테이너의 2/3만 쓰고, 물품 불용품 처분 흐름도는 원본
   래스터가 세로로 매우 길어(2135×3285) 높이 제한이 아예 없어 화면 여러 장을 넘겼다)
   "곳마다 다르다"는 지적을 받았다.
   새 규칙: 폭은 항상 컨테이너에 맞추고(width:100%), 높이는 자동이되 화면 높이의 78%를
   넘으면 그때부터 높이 기준으로 줄인다(max-height:78vh, width는 비율 유지하며 같이
   줄어듦) — width:100%+height:auto+max-height는 표준 치환 요소 크기 계산으로 두 조건을
   동시에 만족하는 값을 브라우저가 알아서 고른다(둘 중 하나를 골라 분기할 필요 없음).
   가로로 넓은 도식(학교회계)은 폭 규칙에 걸려 커지고, 세로로 긴 도식(불용품 처분 흐름도)은
   높이 규칙에 걸려 작아진다. 높이 규칙에 걸려 폭이 컨테이너보다 좁아진 도식은 margin:0
   auto로 가운데 정렬한다. 도식 크기와 무관하게 도식 "안" 글자 크기는 SVG 파일 안의
   font-size 속성만 조절한다(래스터는 텍스트가 이미지에 박혀 있어 여기서 손댈 수 없다) —
   도식을 키운다고 안의 글자까지 키울 이유가 없기 때문. */
.flowchart-image-link {
  display: block;
}

/* "읽는 그림"(flowchartImage.zoomable, 2026-09~) 전용 — 화면에는 78vh 규칙대로 줄어든 채
   보여주되, 원본을 크게 볼 수 있다는 것을 커서로도 드러낸다. <a>라 기본 포인터 커서가
   이미 뜨지만 확대라는 의도를 더 분명히 하려고 zoom-in으로 바꾼다(별도 아이콘·라이브러리
   없이 브라우저 내장 커서 키워드만 사용). */
.flowchart-image-link-zoomable {
  cursor: zoom-in;
}

/* 그림 아래 "새 탭에서 원본 크기로 열기" 한 줄(flowchartImage.openLabel, 2026-08~).
   본문보다 뒤로 물러나 보이도록 출처 캡션(.notes-source)과 같은 크기·색을 쓴다. */
.flowchart-image-open {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
}

.flowchart-image-open-link {
  color: var(--text-muted);
}

.flowchart-image-open-link:hover {
  color: var(--accent);
}

.flowchart-image-link img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  /* width:100%(정의값)+height:auto는 max-height가 실제로 걸릴 때 브라우저가 폭은 그대로
     두고 높이만 줄여 그림을 왜곡시킨다(치환 요소는 width가 auto가 아니면 높이 제약이
     폭으로 되먹임되지 않는다) — object-fit:contain으로 박스 안에서 원본 비율대로만
     그리게 해 왜곡을 막는다. 높이 규칙에 걸린 도식은 그 안에서 가운데 정렬되고 좌우에
     여백이 남을 수 있다(정상 — 그림이 일그러지는 것보다 낫다). */
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.overview-callout {
  border: 1px solid var(--warn-border);
  border-left: 5px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
}

/* K-에듀파인 toolCallout 전용 박스 색(2026-08~) — .overview-callout 위에 얹는 추가 클래스라
   알아두기·개념정의 등 이 클래스를 안 쓰는 다른 overview-callout은 영향을 받지 않는다.
   toolCallout.variant === 'kedufine'일 때만 붙는다. */
.tool-callout-kedufine {
  border-color: var(--kedufine-border);
  border-left-color: var(--kedufine);
  background: var(--kedufine-bg);
}

/* toolCallout.description이 "[유형명] 경로"를 여러 줄 담고 있을 때 유형명을 배지로 떼어
   보여주는 그룹 스타일(2026-08~, renderToolCalloutDescription). 유형별로 아래 여백을 둬
   덩어리를 구분한다(마지막 그룹은 박스 자체 padding으로 충분해 여백 생략). */
.tool-callout-group {
  margin-bottom: 10px;
}

.tool-callout-group:last-child {
  margin-bottom: 0;
}

.tool-callout-label {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
}

.tool-callout-path {
  margin: 0;
}

/* K-에듀파인 박스는 배경이 이미 옅은 초록(--kedufine-bg)이라 같은 초록 배지를 얹으면
   묻힌다. 흰 배경 + 초록 테두리로 뒤집어 박스 안에서도 배지가 도드라지게 한다. */
.tool-callout-kedufine .tool-callout-label {
  background: #fff;
  border-color: var(--kedufine);
  color: var(--kedufine);
}

/* 개념 정의(conceptBox) 블록 본문 — 알아두기 등 다른 overview-callout보다 위아래 여백과
   줄 간격을 좁혀 박스가 덜 커 보이게 한다(2026-08, 도메인 공통 적용). points를 여러 개
   쓴 경우 <p>마다 붙는 브라우저 기본 여백(1em)도 함께 좁힌다. */
.concept-block-body {
  padding: 8px 16px;
  line-height: 1.5;
}

.concept-block-body p {
  margin: 4px 0;
}

.concept-block-body p:first-child {
  margin-top: 0;
}

.concept-block-body p:last-child {
  margin-bottom: 0;
}

/* ---------- 라벨표 공용 틀(labelTable, 2026-09~, 시안 보고상자-라벨표-시안.html ㉰) ----------
   js/detailView.js renderLabelTable — conceptBox 블록의 layout:'labelTable', item.blocks의 type:'labelTable'
   둘 다 이 구조를 만든다. 라벨은 왼쪽 고정폭 칸(회색 바탕), 값은 오른쪽. 노란 전체 채움(.overview-callout)
   대신 왼쪽 도메인 색 띠(--dom, body[data-field]) 4px만 남긴다. 첫 사례: 물품관리 1-2 보고 항목 01ㆍ02. */
.label-table-wrap {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--dom);
  border-radius: 0 10px 10px 0;
  background: var(--panel-bg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.label-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.label-table th,
.label-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--table-border);
  vertical-align: top;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.label-table th {
  width: 118px;
  min-width: 118px;
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--text) 8%);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.label-table tr:last-child th,
.label-table tr:last-child td {
  border-bottom: none;
}

/* 시기처럼 눈에 먼저 띄어야 하는 값(row.lead) */
.label-table-lead {
  font-weight: 700;
  color: var(--accent-hover);
}

/* 단계 칸 흐름(row.steps) — 화살표로 잇고 마지막 칸만 도메인 색으로 짚는다(시안 .steps). */
.label-table-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.label-table-step {
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 11px;
}

.label-table-step-last {
  border-color: color-mix(in srgb, var(--dom) 30%, #fff);
  background: color-mix(in srgb, var(--dom) 8%, #fff);
  color: var(--dom);
  font-weight: 700;
}

.label-table-step-arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 10px;
  background: var(--dom);
  opacity: .55;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 값이 아니라 딸린 말(row.note, "참고: …") — 값 아래 작은 줄 */
.label-table-note {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 좁은 화면ㆍ인쇄: 라벨이 값 위로 올라가 두 줄이 된다(표 셀을 블록으로 풀어 한 열로 쌓는다). */
@media (max-width: 560px), print {
  .label-table,
  .label-table tbody,
  .label-table tr,
  .label-table th,
  .label-table td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .label-table th {
    border-bottom: none;
    padding-bottom: 2px;
    white-space: normal;
  }

  .label-table td {
    padding-top: 0;
  }

  .label-table tr:last-child th {
    border-bottom: none;
  }
}

@media print {
  .label-table-wrap {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* 알아두기 박스 전용 여백 축소(2026-08~) — .overview-callout 기본값(패딩 14px 16px, 줄간격
   1.7)은 K-에듀파인 toolCallout 등 다른 용도에도 쓰여 그대로 두고, 알아두기 박스(renderItemNotesSection)
   에만 이 클래스를 얹어 개념정의 블록(.concept-block-body)과 비슷한 밀도로 좁힌다. 줄간격을
   좁히면 항목이 두 줄로 감싸질 때도 위아래로 헐렁해 보이지 않는다. */
.overview-callout-notes {
  padding: 8px 16px;
  line-height: 1.5;
}

/* 알아두기(item.notes) 목록 — overview-callout 박스 하나 안에 항목을 불릿으로 나열한다(2026-08,
   예전엔 항목마다 overview-callout 카드를 따로 둘렀다). 불릿은 장식 기호라 ::before로만 넣고,
   padding-left로 둘째 줄부터도 텍스트 시작 위치에 맞춰 들여쓰기되게 한다. */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notes-list li {
  position: relative;
  padding-left: 16px;
  word-break: keep-all;
}

.notes-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* 알아두기 목록 중 소제목으로 묶인 그룹({heading, points}) — 소제목 자신은 불릿 항목이
   아니므로 부모 .notes-list li의 불릿·들여쓰기를 지우고, 소제목 아래 불릿 목록만 한 단
   들여써서 소속을 보여준다(2026-08). 위쪽 여백을 하위 불릿(.notes-list의 flex gap)보다
   넓게 둬서(8px, 2026-08 축소 — 이전 14px은 알아두기 박스 전체가 헐렁해 보인다는 피드백)
   소제목이 새 덩어리의 시작임을 보여준다 — 다만 목록의 첫 항목이 소제목이면(드묾) 섹션
   제목 바로 아래에 불필요한 여백이 또 생기므로 :first-child는 뺀다. */
.notes-subheading-item {
  padding-left: 0;
  margin-top: 8px;
}

.notes-subheading-item:first-child {
  margin-top: 0;
}

/* 안쪽 제목이 없는 덩어리(2026-09~, renderItemBlocks가 연속된 'notes' 블록을 한 상자로 합칠
   때 제목 없는 블록이 섞인 경우) — 굵은 소제목 자리가 비어 보이는 대신 위에 옅은 가로선을 그어
   앞 덩어리와 붙어 보이지 않게 한다. 맨 앞이면(:first-child) 위 여백이 0이라 선만 남아
   어색하므로 선도 함께 뺀다. */
.notes-subheading-item-untitled {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.notes-subheading-item-untitled:first-child {
  padding-top: 0;
  border-top: none;
}

/* .notes-list li::before(불릿)보다 이 규칙의 명시성이 낮아 상속되지 않던 문제를 고쳤다
   (2026-08 — .notes-list li::before는 클래스+타입+가상요소로 명시성이 더 높아서
   .notes-subheading-item::before { content: none }만으로는 안 지워졌다. 예: 5-1 불용품의
   처분 "매각 방법"·"예정가격 결정" 등 소제목에 하위 항목과 똑같은 점 불릿이 찍혀 위계가
   안 보이던 문제 — 부모 선택자에 li를 넣어 명시성을 맞춰야 실제로 지워진다). */
.notes-list li.notes-subheading-item::before {
  content: none;
}

/* 소제목과 하위 설명 텍스트의 위계를 크기·색·왼쪽 표식 세 가지로 함께 구분한다(2026-08~,
   font-weight 하나만으로는 부족했다 — 소제목(진한 --text) vs 하위 불릿(색은 깊이별로 아래
   .notes-item-d2/d3/d4에서 지정)의 색 대비 + 소제목만 왼쪽 세로선).
   세로선 색은 --text-muted(회색 계열)를 쓴다(2026-08, --accent(파랑)에서 변경) — section
   제목(.block-section-heading)의 하단 밑줄도 --accent라서, 이 소제목까지 같은 파랑을 쓰면
   section과 notes 서브헤딩이 같은 색으로 읽혀 그 사이에 있는 body 제목(회색 밑줄)이 오히려
   더 약해 보이는 위계 역전이 있었다. 파랑을 section 전용으로 남기고 서브헤딩은 회색으로
   낮춰 "진한 파랑(section) > 회색 밑줄+아이콘(body) > 연한 회색 세로선(서브헤딩)"으로 색도
   층위를 따라가게 했다. --text-muted는 알아두기 배경(--warn-bg)·K-에듀파인 배경
   (--kedufine-bg) 대비 각각 5.3:1로, 밝은 --accent 못지않게 두 박스 배경과 뚜렷이 구분된다.
   font-size도 --fs-lg(17px, body 제목 19px과 2px 차이라 구분이 약했다) →
   --fs-md(15.5px, 3.5px 차이)로 낮췄다. */
.notes-subheading {
  margin: 13px 0 3px;
  padding-left: 12px;
  border-left: 3px solid var(--dom-base);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dom-deep);
}

/* 묶음 첫 소제목은 위 여백을 주지 않는다 — 박스 안쪽 여백과 겹쳐 뜬다. */
.notes-list > .notes-subheading-item:first-child > .notes-subheading {
  margin-top: 0;
}

.notes-sublist {
  padding-left: 22px;
}

/* item.notes·item.blocks 본문의 2~4단계 기호 체계(2026-08~) — 매뉴얼 원문 계층(↘/●/-/·)을
   그대로 옮긴다. 1단계(↘)는 위 .notes-subheading(파란 세로선)을 그대로 쓰고, 1단계의 홑
   불릿(그룹이 없는 문자열)도 기존 점 불릿(.notes-list li::before)을 그대로 쓴다 — 둘 다 이미
   있던 스타일이라 바꾸지 않았다. 2단계부터는 buildNotesListNode(js/detailView.js)가 재귀
   깊이에 따라 .notes-item-d2/d3/d4를 붙이고, 깊어질수록 기호와 글자색이 옅어져(검은 원 →
   하이픈 → 가운뎃점, --text → --text-muted → --text-faint) 위계가 읽힌다. 소제목처럼 하위
   그룹을 가진 항목은 깊이와 무관하게 .notes-item-heading으로 굵게 표시해 같은 깊이의 홑
   불릿과 구분한다. 5-1 매각뿐 아니라 item.notes/item.blocks 'body'를 쓰는 모든 도메인·항목에
   공통 적용된다. */
.notes-list li.notes-item-d2 {
  position: relative;
  padding-left: 16px;
  color: var(--text);
}

.notes-list li.notes-item-d2::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
}

.notes-list li.notes-item-d3 {
  position: relative;
  padding-left: 14px;
  color: var(--text-muted);
}

.notes-list li.notes-item-d3::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.notes-list li.notes-item-d4 {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-md); /* 2026-09-15: 불릿은 깊이와 무관하게 본문 크기 — 4단계는 기호·색으로만 구분 */
  color: var(--text-faint);
}

.notes-list li.notes-item-d4::before {
  content: '·';
  position: absolute;
  left: 1px;
  top: -0.15em;
  font-weight: 700;
  color: var(--text-faint);
}

/* note.segments(2026-08~)로 문장 일부만 강조할 때 쓰는 인라인 색상 — 사이트 기존 경고색
   (--danger)을 그대로 재사용한다. 밑줄은 링크로 오인되므로 쓰지 않고, 색만으로 뜻을 전달하지
   않도록(글자 자체로 의미가 통하는 문장에만 적용) buildNotesListNode에서 제한적으로 쓴다. */
.text-danger {
  color: var(--danger);
}

/* 하위 그룹을 가진 항목(소제목)은 위 .notes-item-d2/d3/d4::before 점 불릿을 지우고, 대신
   .notes-item-text에 자기만의 기호를 따로 붙인다(바로 아래) — 그래야 소제목 텍스트에만
   기호+여백이 붙고, 그 아래 중첩된 <ul>(.notes-sublist)은 소제목의 여백과 별개로 자기 몫의
   들여쓰기(22px)만 갖는다. LI 자체에 padding-left를 그대로 두면 중첩 목록까지 함께 밀려
   깊어질수록 여백이 배로 늘어난다. */
.notes-list li.notes-item-heading::before {
  content: none;
}

.notes-item-heading {
  padding-left: 0;
}

.notes-item-heading .notes-item-text {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.notes-item-heading.notes-item-d2 .notes-item-text {
  padding-left: 16px;
  position: relative;
}

.notes-item-heading.notes-item-d2 .notes-item-text::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
}

.notes-item-heading.notes-item-d3 .notes-item-text,
.notes-item-heading.notes-item-d4 .notes-item-text {
  padding-left: 14px;
  position: relative;
}

.notes-item-heading.notes-item-d3 .notes-item-text::before {
  content: '-';
  position: absolute;
  left: 0;
}

.notes-item-heading.notes-item-d4 .notes-item-text::before {
  content: '·';
  position: absolute;
  left: 1px;
  top: -0.15em;
  font-weight: 700;
}

/* 알아두기 출처 캡션(item.notesSource) — 목록과 같은 박스 안, 불릿 목록과는 구분되도록
   여백을 두고 옅은 글자색으로 작게 표시한다(2026-08). */
.notes-source {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 참조표 아래 주의 한 줄(block.warn, renderBlockTableSection, 2026-09-15~) — 각주(.notes-source)와
   같은 자리·크기지만 옮겨 둔 표의 신뢰 한계(「원본 고시를 우선 확인할 것」)라 경고색(--danger)에
   굵게. .notes-source 클래스를 함께 쓰지 않는 이유: 항목 화면 층(body[data-screen="item"]
   .notes-source)이 글자색을 --text-faint로 덮어 .text-danger가 밀리기 때문. */
.ref-table-warn {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--danger);
}

/* 출처 캡션 안의 원문 파일 링크(buildNotesSourceNode, 2026-09~). 캡션 자체가 이미 작고 옅은
   글씨라 링크 색까지 바꾸면 본문보다 눈에 띄므로, 색은 그대로 두고 밑줄로만 누를 수 있음을
   알린다. 마우스를 올리거나 키보드 초점이 오면 그때 강조색으로 바뀐다. */
.notes-source-link {
  color: inherit;
  text-decoration: underline;
}

.notes-source-link:hover,
.notes-source-link:focus-visible {
  color: var(--accent);
}

/* 알아두기·본문 불릿 안의 서식 다운로드 링크(renderTextWithFormLinks, 2026-09-13~). 본문 글자와
   같은 색에 밑줄만 두어 「누르면 이 서식을 받는다」는 것만 알리고, 용어집 점선 밑줄(.gloss-term)과
   구분되도록 실선을 쓴다. */
.notes-form-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notes-form-link:hover,
.notes-form-link:focus-visible {
  color: var(--accent-hover);
}

/* ---------- 세로 단계 카드(item.blocks type 'stepCards', renderStepCardsBlock — 2026-09-13~) ----------
   왼쪽 세로선 위에 번호 원을 얹고 단계마다 카드를 둔다. 카드 안 두 갈래(.step-card-branches)는
   2열 격자, 620px 이하에서는 위아래로 쌓인다. 색은 구조용 파랑 토큰만 쓴다. */
.step-cards {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
  counter-reset: step-card;
}

.step-cards::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-strong);
}

.step-card {
  position: relative;
  padding-bottom: 12px;
  counter-increment: step-card;
}

.step-card:last-child {
  padding-bottom: 0;
}

.step-card::before {
  content: counter(step-card);
  position: absolute;
  left: -30px;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.step-card-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  padding: 10px 14px;
}

.step-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--text);
}

.step-card-sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-faint);
}

.step-card-box > .notes-list {
  margin: 0;
}

.step-card-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 620px) {
  .step-card-branches {
    grid-template-columns: 1fr;
  }
}

.step-card-branch {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.step-card-branch-title {
  padding: 6px 12px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-hover);
}

.step-card-branch > .notes-list {
  margin: 0;
  padding: 10px 12px 10px 30px;
  font-size: var(--fs-md); /* 2026-09-15: 갈래 안 불릿도 본문 크기 */
}

/* ---------- 한 줄 단계 목록(item.blocks type 'stepList', renderStepListBlock — 2026-09-13~) ----------
   세로 단계 카드(.step-cards)와 같은 왼쪽 잇는 선·번호 원을 쓰되, 단계마다 카드 대신 「단계 이름(고정 폭)
   | 할 일ㆍ할 일」 한 줄로 그린다. 단계 사이는 옅은 점선. 620px 이하에서는 할 일이 이름 아래로 내려간다. */
/* ---------- 업무사례 단계 목록(item.blocks type 'caseSteps', renderCaseStepsBlock — 2026-09-21~) ----------
   단계 하나가 <details> 한 줄. 접힌 줄에 번호ㆍ제목ㆍ요약ㆍ담당이 나란히 보이고, 펼치면 확인사항ㆍ근거ㆍ
   서식이 나온다. 색은 그 화면의 도메인 색(--dom-base/--dom-deep)만 쓴다 — 도메인을 가리지 않는 공용
   부품이라 고정 색을 박지 않는다. 인쇄는 전 단계 펼침. */
.case-steps-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.case-steps-toggle-all {
  border: 1px solid color-mix(in srgb, var(--dom-base) 45%, transparent);
  background: color-mix(in srgb, var(--dom-base) 10%, var(--panel-bg));
  color: var(--dom-deep);
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.case-steps-toggle-all:hover {
  background: color-mix(in srgb, var(--dom-base) 20%, var(--panel-bg));
}

.case-steps-note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.case-step {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  margin-bottom: 6px;
}

.case-step[open] {
  border-color: color-mix(in srgb, var(--dom-base) 45%, transparent);
}

.case-step-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.case-step-summary::-webkit-details-marker {
  display: none;
}

/* 여닫기 표시(+/−)는 장식 기호라 글자로 넣지 않고 ::after로만 붙인다. */
.case-step-summary::after {
  content: "+";
  margin-left: auto;
  align-self: center;
  color: var(--dom-deep);
  font-weight: 800;
  font-size: var(--fs-md);
}

.case-step[open] > .case-step-summary::after {
  content: "−";
}

.case-step-no {
  flex: none;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: var(--dom-base);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: center;
  align-self: center;
}

.case-step-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.case-step-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.case-step-gist {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.case-step-who {
  flex: none;
  align-self: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.case-step-body {
  padding: 2px 14px 12px 44px;
}

.case-step-group-heading {
  margin: 13px 0 3px;
  padding-left: 12px;
  border-left: 3px solid var(--dom-base);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dom-deep);
}

.case-step-checks {
  margin: 0;
  padding-left: 1.1em;
  list-style: none;
}

.case-step-check {
  position: relative;
  margin-bottom: 4px;
  font-size: var(--fs-md);
  color: var(--text);
}

.case-step-check::before {
  content: "·";
  position: absolute;
  left: -0.9em;
  color: var(--text-faint);
}

/* 실무에서 자주 어긋나는 줄. 「!」는 장식 기호라 ::before로만 넣는다. */
.case-step-check-hot {
  background: var(--warn-bg);
  border-radius: 5px;
  padding: 3px 8px 3px 6px;
  margin-left: -6px;
  font-weight: 700;
}

.case-step-check-hot::before {
  content: "!";
  left: -0.85em;
  color: var(--warn-strong, #8a5620);
  font-weight: 800;
}

.case-step-laws {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.case-step-law {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--accent-bg);
}

.case-step-law-link {
  color: var(--dom-deep);
  font-weight: 700;
  text-decoration: none;
  border-color: color-mix(in srgb, var(--dom-base) 40%, transparent);
}

.case-step-law-link:hover {
  background: color-mix(in srgb, var(--dom-base) 18%, var(--panel-bg));
}

@media (max-width: 620px) {
  .case-step-body {
    padding-left: 14px;
  }

  .case-step-who {
    order: 3;
  }
}

@media print {
  .case-steps-toolbar {
    display: none;
  }

  .case-step::details-content {
    content-visibility: visible;
    display: block;
  }
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
  counter-reset: step-list;
}

.step-list::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-strong);
}

.step-list-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 8px 4px;
  border-bottom: 1px dotted var(--border);
  counter-increment: step-list;
}

.step-list-item:last-child {
  border-bottom: 0;
}

.step-list-item::before {
  content: counter(step-list);
  position: absolute;
  left: -30px;
  top: 7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.step-list-title {
  flex: 0 0 130px;
  font-weight: 700;
  color: var(--text);
}

.step-list-tasks {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.step-list-task + .step-list-task::before {
  content: 'ㆍ';
  margin: 0 6px;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 620px) {
  .step-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .step-list-title {
    flex-basis: auto;
  }
}

/* ---------- 원형 흐름(item.blocks type 'circleFlow', renderCircleFlowBlock — 2026-09-13~) ----------
   안내서 인포그래픽 모양: 원(아이콘) 칸을 가로로, 칸 사이 삼각 화살표(::before), 원 아래 제목과 점 목록.
   active 칸만 보라(--field-base-4), 나머지 회색. 620px 이하는 두 칸씩 접히고 화살표를 숨긴다. */
.circle-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.circle-flow-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 10px;
  text-align: center;
}

/* 칸 사이 삼각 화살표 — 둘째 칸부터, 원의 세로 가운데 높이에 왼쪽 경계선 위로 */
.circle-flow-item + .circle-flow-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 24px;
  border: 8px solid transparent;
  border-left: 12px solid var(--border-strong);
  border-right: 0;
}

.circle-flow-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--border-strong);
  color: #fff;
  display: grid;
  place-items: center;
}

.circle-flow-circle svg {
  width: 30px;
  height: 30px;
}

.circle-flow-no {
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* 강조 칸이 없는 흐름(처리 절차처럼 모든 칸이 같은 무게)은 원을 기준색 파랑으로 */
.circle-flow:not(.circle-flow-has-active) .circle-flow-circle {
  background: var(--accent);
}

.circle-flow-item.is-active .circle-flow-circle {
  background: var(--field-base-4);
}

.circle-flow-title {
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  word-break: keep-all;
}

.circle-flow-item.is-active .circle-flow-title {
  color: var(--field-base-4);
}

/* 강조 칸이 있는 흐름은 나머지 칸 제목을 옅게 */
.circle-flow-has-active .circle-flow-item:not(.is-active) .circle-flow-title {
  color: var(--text-muted);
}

.circle-flow-points {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

.circle-flow-points li {
  position: relative;
  padding-left: 12px;
}

.circle-flow-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}

@media (max-width: 620px) {
  .circle-flow {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .circle-flow-item {
    flex: 0 0 50%;
  }

  .circle-flow-item + .circle-flow-item::before {
    display: none;
  }
}

/* ---------- 알약 줄(item.blocks type 'pills', renderPillsBlock — 2026-09-13~) ----------
   「라벨 | 값」 알약 몇 개를 한 줄에, 아래 작은 글씨 단서 한 줄. 라벨 칸은 옅은 파랑, 값 칸은 진하게. */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
  font-size: var(--fs-md);
}

.pill-label {
  padding: 6px 14px;
  background: var(--accent-bg);
  color: var(--accent-hover);
  font-weight: 700;
}

.pill-value {
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.pill-note {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- 대화형 판정기(item.blocks type 'decisionFlow', renderDecisionFlowBlock — 2026-09-13~) ----------
   한 번에 한 문항(.dq-step.is-current)만 보이고, 답한 자취는 위 꼬리표(.dq-tag), 결론은 .dq-result.
   문항 안 「표 열어 보기」(.dq-table-btn)는 그 자리에 검색 상자 달린 표를 펼친다. 인쇄는 전부 펼침. */
.dq-intro {
  margin: 0 0 10px;
  color: var(--text-muted);
  line-height: 1.6;
}

.dq-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.dq-trail:empty {
  display: none;
}

.dq-tag {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  overflow: hidden;
  font-size: var(--fs-xs);
  background: var(--pill-bg);
}

.dq-tag-q {
  padding: 2px 10px;
  color: var(--text-muted);
}

.dq-tag-a {
  padding: 2px 9px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.dq-tag-no .dq-tag-a {
  background: var(--warn-border);
}

.dq-step {
  display: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  padding: 14px 16px;
}

.dq-step.is-current {
  display: block;
}

.dq-step-no {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
}

.dq-q {
  margin-top: 4px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
}

.dq-sub {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.dq-btns {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.dq-btn {
  flex: 1 1 0;
  padding: 10px 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.dq-btn-no {
  background: var(--panel-bg);
  color: var(--accent-hover);
}

.dq-btn:hover {
  background: var(--accent-hover);
  color: #fff;
}

.dq-btn:focus-visible,
.dq-table-btn:focus-visible,
.dq-reset:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 표 열어 보기 */
.dq-table {
  margin-top: 10px;
}

.dq-table-btn {
  padding: 5px 14px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.dq-table-btn::after {
  content: '＋';
  margin-left: 6px;
}

.dq-table-btn[aria-expanded="true"]::after {
  content: '−';
}

.dq-table-wrap {
  display: none;
  margin-top: 10px;
}

.dq-table-wrap.is-open {
  display: block;
}

.dq-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  background: var(--panel-bg);
  color: var(--text);
}

.dq-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dq-table-caption {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dq-table-count {
  display: block;
  margin: 6px 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.dq-table-grid td:first-child {
  white-space: nowrap;
  text-align: center;
}

.dq-row-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 결론 */
.dq-result {
  display: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-bg);
  padding: 14px 16px;
}

.dq-result.is-open {
  display: block;
}

.dq-result-out {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}

.dq-result-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-faint);
}

.dq-result-verdict {
  margin-top: 2px;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent-hover);
}

.dq-result-out .dq-result-verdict {
  color: var(--text);
}

.dq-result-explain {
  margin: 8px 0 0;
  line-height: 1.6;
  color: var(--text);
}

.dq-result-basis {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.dq-footer {
  display: none;
  margin-top: 10px;
}

.dq-footer.is-visible {
  display: block;
}

.dq-reset {
  padding: 5px 14px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

@media print {
  .dq-step {
    display: block;
    margin-bottom: 8px;
    break-inside: avoid;
  }

  .dq-table-wrap {
    display: block;
  }

  .dq-btns,
  .dq-table-btn,
  .dq-search,
  .dq-footer {
    display: none;
  }
}

/* 대화형 판정기 확장(2026-09-13, 노무비 구분관리제 적용 서류 판정기 시안 .judge 구조): 진행 막대ㆍ선택지 여러 개ㆍ
   입력 단계ㆍ앞 질문으로ㆍ결과 두 칸(받아야 할 서류 | 해야 할 일)ㆍ노란 주의 띠ㆍ결과 색 네 가지. 시안 색은
   사이트 토큰으로 맞췄다(--accent/--accent-bg/--pill-border/--warn-bg/--kedufine-bg 등). */
.dq-steps {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}

.dq-steps i {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--border);
}

.dq-steps i.on {
  background: var(--accent);
}

.dq-options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.dq-options-two {
  grid-template-columns: 1fr 1fr;
}

.dq-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  font: inherit;
  cursor: pointer;
  border: 1.5px solid var(--pill-border);
  border-radius: 10px;
  background: var(--panel-bg);
  padding: 11px 14px;
  color: var(--text);
  transition: border-color 0.12s, background-color 0.12s;
}

.dq-opt:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.dq-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dq-opt em {
  font-style: normal;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--accent-bg);
  border: 1px solid var(--pill-border);
  color: var(--accent-hover);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.dq-opt b {
  font-size: var(--fs-sm);
  font-weight: 700;
  display: block;
}

.dq-opt small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-top: 1px;
  line-height: 1.5;
}

.dq-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.dq-fld label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.dq-fld input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--fs-md);
  text-align: right;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1.5px solid var(--pill-border);
  background: var(--panel-bg);
  color: var(--text);
}

.dq-fld input:focus {
  outline: none;
  border-color: var(--accent);
}

.dq-rd {
  font-size: var(--fs-xs);
  color: var(--accent);
  min-height: 17px;
  margin: 4px 0 0;
  font-weight: 700;
}

.dq-err {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--danger);
}

.dq-err:empty {
  display: none;
}

.dq-go {
  margin-top: 14px;
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  background: var(--accent-hover);
  border: 0;
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
}

.dq-go:hover {
  background: var(--accent);
}

.dq-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dq-privacy {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.dq-back {
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-right: 12px;
}

.dq-back:hover {
  color: var(--accent);
  text-decoration: underline;
}

.dq-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 안내 단계(step.kind 'info', 2026-09-15~) — 절차 카드를 <details>로 감싼다. 「표 열어 보기」 단추
   (.dq-table-btn)와 같은 알약 모양의 summary로, 이 단계에 이르면 스크립트가 열어 준다. */
.dq-info {
  margin: 12px 0 14px;
}

.dq-info-summary {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}

.dq-info-summary::-webkit-details-marker {
  display: none;
}

.dq-info-summary::after {
  content: '＋';
  margin-left: 6px;
}

.dq-info[open] > .dq-info-summary::after {
  content: '－';
}

.dq-info-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 결과 두 칸 + 주의 띠 */
.dq-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.dq-card {
  background: var(--panel-bg);
  border-radius: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border);
}

.dq-card h4 {
  margin: 0 0 7px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-weight: 700;
}

.dq-card ul {
  margin: 0;
  padding-left: 16px;
}

.dq-card li {
  font-size: var(--fs-md); /* 2026-09-15: 결과·안내 카드 안 불릿은 본문 크기(제목 h4·근거 줄만 작게) */
  color: var(--text-muted);
  margin: 4px 0;
  line-height: 1.55;
}

.dq-card li b {
  color: var(--text);
}

.dq-warn {
  margin: 11px 0 0;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: var(--fs-xs);
  color: var(--text);
}

/* 결과 색 — a 파랑(원칙) / b 주황(일부 제외) / c 초록(둘 다 제외) / x 회색(대상 아님) */
.dq-result-a { border-color: var(--accent); background: var(--accent-bg); }
.dq-result-a .dq-result-verdict { color: var(--accent-hover); }
.dq-result-b { border-color: var(--warn-border); background: var(--warn-bg); }
.dq-result-b .dq-result-verdict { color: var(--text); }
.dq-result-c { border-color: var(--kedufine-border); background: var(--kedufine-bg); }
.dq-result-c .dq-result-verdict { color: var(--kedufine); }
.dq-result-x { border-color: var(--border-strong); background: var(--pill-bg); }
.dq-result-x .dq-result-verdict { color: var(--text-muted); }

@media (max-width: 560px) {
  .dq-options-two,
  .dq-fields,
  .dq-split {
    grid-template-columns: 1fr;
  }
}

@media print {
  .dq-steps,
  .dq-go,
  .dq-back,
  .dq-err {
    display: none;
  }

  .notes-toggle-print-open::details-content {
    content-visibility: visible;
    display: block;
  }
}

/* ---------- 갈래 단추(item.blocks type 'branchTabs', renderBranchTabsBlock — 2026-09-13~) ----------
   갈래 단추 한 줄(사례 카드 꼬리표 단추와 같은 알약 모양) + 고른 갈래의 블록만 표시. 인쇄는 전부 펼침. */
.branch-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.branch-tabs-btn {
  padding: 5px 16px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.branch-tabs-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.branch-tabs-btn[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.branch-tabs-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



/* ---------- 절차도 상자판(2026-09-22~, renderStepBoardBlock, js/detailView.js) ----------
   맨 위 절차도 상자를 누르면 그 아래 같은 블록 안의 단계 설명으로 내려가고, 단계 끝의
   「절차도로」로 다시 올라온다. 상자는 「번호ㆍ이름ㆍ꼬리말」 세 줄이고 색은 도메인 색 하나만 쓴다.
   좁은 화면에서는 auto-fit 격자가 저절로 줄을 바꾸므로 미디어 쿼리를 두지 않는다. */
.step-board-top {
  padding: 14px 15px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 12px;
}

.step-board-title {
  margin: 0 0 2px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--dom-deep);
}

.step-board-sub {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.step-board-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 7px;
}

.step-board-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--pill-bg);
  color: var(--text);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.step-board-box:hover {
  border-color: var(--dom-base);
  background: var(--accent-bg);
}

.step-board-box:focus-visible {
  outline: 2px solid var(--dom-base);
  outline-offset: 2px;
}

.step-board-no {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dom-deep);
}

.step-board-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

.step-board-tail {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--text-faint);
  word-break: keep-all;
}

.step-board-step {
  margin-top: 8px;
  padding: 13px 15px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  scroll-margin-top: 12px;
}

.step-board-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.step-board-head-no {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--dom-base);
  border-radius: 4px;
  padding: 1px 7px;
}

.step-board-head-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.step-board-who {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom-deep);
  background: var(--accent-bg);
  border-radius: 4px;
  padding: 1px 7px;
}

.step-board-lead {
  margin: 6px 0 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.step-board-group {
  margin-top: 10px;
}

/* 본문 소제목 A안(2026-09-22~, 시안 「소제목 강조 세 가지 안」): 소제목을 본문과 같은 칸
   글씨로 두되 굵기ㆍ도메인 색ㆍ왼쪽 세로 막대 세 가지로 본문과 가른다. 막대는 어디부터
   어디까지가 한 묶음인지까지 드러낸다. 색은 토큰(--dom-base/--dom-deep)만 쓰므로 도메인마다
   색이 따라 바뀌고, 어두운 화면을 켜도 토큰만 바꾸면 된다.
   ※ 시안의 0.87rem은 글씨 사다리(여섯 칸)에 없는 값이라 인접 칸인 --fs-md(본문과 같은 칸)를
   쓰고 굵기 800과 색으로 차이를 낸다 — 알아두기 소제목(.notes-subheading)이 쓰는 방식과 같다. */
.step-board-group-heading {
  margin: 13px 0 3px;
  padding-left: 12px;
  border-left: 3px solid var(--dom-base);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dom-deep);
}

/* 소제목 아래 목록도 막대 안쪽으로 들여 한 묶음으로 보이게 한다. */
.step-board-group-heading + ul {
  padding-left: 30px;
}

.step-board-warn {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-border);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* 「하면 안 되는 것」은 한 단계 더 짚는다 — 왼쪽 굵은 띠로만 구분하고 새 색은 만들지 않는다. */
.step-board-warn-hot {
  border-left: 3px solid var(--warn-border);
  font-weight: 700;
}

.step-board-warn::before {
  content: '※';
  margin-right: 6px;
  font-weight: 700;
}

/* 열린 단계는 상자를 도메인 색으로 채워 지금 어디가 펼쳐져 있는지 드러낸다. */
.step-board-box[aria-expanded="true"] {
  border-color: var(--dom-base);
  background: var(--dom-base);
  color: #fff;
}

.step-board-box[aria-expanded="true"] .step-board-no,
.step-board-box[aria-expanded="true"] .step-board-tail {
  color: #fff;
}

/* 펼친 내용 첫 줄의 꼬리말과 「접기」. 접기는 표시줄 오른쪽 끝으로 밀어 둔다. */
.step-board-head-tail {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.step-board-close {
  margin-left: auto;
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.step-board-close:hover {
  border-color: var(--dom-base);
  color: var(--dom-deep);
}

.step-board-close:focus-visible {
  outline: 2px solid var(--dom-base);
  outline-offset: 2px;
}

.branch-tabs-panel {
  display: none;
}

.branch-tabs-panel.is-active {
  display: block;
}

/* 갈래 제목은 화면에서는 단추가 대신하므로 숨기고, 인쇄에서만 갈래 경계로 보여준다. */
.branch-tabs-panel-title {
  display: none;
  margin: 12px 0 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

@media print {
  .branch-tabs-bar {
    display: none;
  }

  .branch-tabs-panel {
    display: block;
  }

  .branch-tabs-panel-title {
    display: block;
  }
}

/* ---------- 차례 도식(item.blocks type 'roundFlow', renderRoundFlowBlock — 2026-09-13~) ----------
   시작 상자 → 갈림 두 칸 → 차례 상자(왼쪽 학교 쪽 강조 | 화살표 | 오른쪽 받는 부서) → … → 붉은 줄 경고.
   상자 사이는 짧은 세로선(.rf-link). 620px 이하는 왼쪽ㆍ오른쪽이 위아래로 쌓이고 화살표를 숨긴다. */
.rf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rf-link {
  width: 2px;
  height: 16px;
  margin: 0 auto;
  background: var(--border-strong);
}

.rf-start {
  align-self: center;
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--pill-bg);
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.rf-gate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rf-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--pill-bg);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.rf-opt-label {
  font-weight: 700;
  color: var(--text);
}

.rf-opt-go {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.rf-opt-go .rf-opt-label {
  color: var(--accent-hover);
}

.rf-round {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  overflow: hidden;
}

.rf-round-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--pill-bg);
}

.rf-round-no {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.rf-round-title {
  font-weight: 700;
  color: var(--text);
}

.rf-round-badge {
  padding: 2px 9px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.rf-round-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  padding: 12px 14px;
}

.rf-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}

.rf-side-primary {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* 왼쪽 → 오른쪽 화살표: 오른쪽 칸 왼편 여백 가운데 */
.rf-side-right::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 50%;
  margin-top: -7px;
  border: 7px solid transparent;
  border-left: 11px solid var(--border-strong);
  border-right: 0;
}

.rf-actor {
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel-bg);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.rf-side-primary .rf-actor {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.rf-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}

.rf-warning {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-left: 4px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .rf-gate,
  .rf-round-body {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rf-side-right::before {
    display: none;
  }
}

/* ---------- 금액 판정기(item.blocks type 'amountChecker', renderAmountCheckerBlock — 2026-09-13~) ----------
   계약 구분 단추 한 줄 + 금액 칸(세 자리 쉼표, 옆에 한글 읽기) + 결과 상자(대상 파랑 / 아님 주황) + 안내 줄. */
.ac-intro {
  margin: 0 0 10px;
  color: var(--text-muted);
  line-height: 1.6;
}

.ac-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.ac-cat {
  padding: 5px 14px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.ac-cat:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.ac-cat[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.ac-cat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ac-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.ac-input-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ac-input {
  width: 220px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: right;
  background: var(--panel-bg);
  color: var(--text);
}

.ac-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ac-reading {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-hover);
}

.ac-reading:empty {
  display: none;
}

.ac-note {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.ac-result {
  display: none;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-bg);
}

.ac-result.is-open {
  display: block;
}

.ac-result-out {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}

.ac-result-verdict {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent-hover);
}

.ac-result-out .ac-result-verdict {
  color: var(--text);
}

.ac-result-basis {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text);
}

.ac-result-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dotted var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

.ac-privacy {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- 색 상자(item.blocks type 'callout', renderCalloutBlock — 2026-09-13~) ----------
   tone danger(붉은 테두리ㆍ바탕) / accent(파랑). 알아두기(주황)와 구분해 제외ㆍ금지ㆍ주의에 쓴다. */
.callout {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--accent-bg);
  padding: 12px 16px;
}

.callout-danger {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.callout-heading {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.callout-danger .callout-heading {
  color: var(--danger);
}

.callout-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: var(--text);
}

.callout-list li + li {
  margin-top: 3px;
}

.callout-strong {
  font-weight: 700;
}

.callout-danger .callout-strong {
  color: var(--danger);
}

/* 경고ㆍ강조 상자 안 「자세히 보기」 팝업 단추(block.modal, 2026-10-12~). 모달 틀은 서식 내용 모달(.content-modal)과 같다. */
.callout-modal-btn {
  margin-top: 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  background: var(--panel-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
}

.callout-modal-btn::before {
  content: "⧉ ";
}

.callout-modal-btn:hover {
  background: var(--accent);
  color: var(--panel-bg);
}

.callout-modal-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.callout-danger .callout-modal-btn {
  color: var(--danger);
  border-color: var(--danger);
}

.callout-danger .callout-modal-btn:hover {
  background: var(--danger);
  color: var(--panel-bg);
}

.callout-danger .callout-modal-btn:focus-visible {
  outline-color: var(--danger);
}

/* ---------- 누를 수 있는 업무 흐름도(item.blocks type 'linkFlow', renderLinkFlowBlock — 2026-09-13~) ----------
   상자를 가로로, 사이에 삼각 화살표(::before). 갈 곳이 있는 상자(<a>.lf-box-link)는 손가락 포인터와
   올렸을 때 테두리ㆍ배경 변화, 포커스 테두리. 아래 띠(.lf-band)는 전 과정에 걸치는 업무. 620px 이하는
   상자가 두 칸씩 접히고 화살표를 숨긴다. */
.lf-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.lf-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 8px;
  display: flex;
}

.lf-item + .lf-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  margin-top: -7px;
  border: 7px solid transparent;
  border-left: 11px solid var(--border-strong);
  border-right: 0;
}

.lf-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 8px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--pill-bg);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}

.lf-sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

/* 갈 곳이 있는 상자 */
.lf-box-link {
  border-color: var(--accent);
  color: var(--accent-hover);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.lf-box-link:hover {
  background: var(--accent-bg);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

.lf-box-link:focus-visible,
.lf-part-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lf-box-link .lf-label::after {
  content: '\2197';
  margin-left: 4px;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* 한 상자 안 낱말 여럿 */
.lf-parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
}

.lf-parts-sep {
  color: var(--text-faint);
  font-weight: 500;
}

.lf-part-link {
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  color: var(--accent-hover);
  text-decoration: underline;
  text-decoration-color: var(--pill-border);
  text-underline-offset: 3px;
  cursor: pointer;
}

.lf-part-link:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  text-decoration-color: var(--accent);
}

/* 아래 띠 */
.lf-band-line {
  width: 2px;
  height: 12px;
  margin: 2px auto;
  background: var(--border-strong);
}

.lf-band {
  min-height: 0;
  padding: 8px 12px;
}

@media (max-width: 620px) {
  .lf-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .lf-item {
    flex: 0 0 50%;
  }

  .lf-item + .lf-item::before {
    display: none;
  }
}

/* ---------- 기재 예시 접기 서랍(item.blocks type 'exampleBox', renderExampleBoxBlock — 2026-09-13~) ----------
   시안(기재예시-상자-시안.html ㉯ details.exd)의 구조ㆍ규칙을 그대로 옮기되 색은 사이트 토큰으로 맞췄다
   (시안 #17427a→--accent-hover, #2f6fc0→--accent, #eef4fc→--accent-bg, #c9dcf0→--pill-border, #f7fafe→--pill-bg).
   바로 위 항목에 딸린 서랍이라 왼쪽으로 14px 들여 놓는다(560px 이하는 들이지 않음). 인쇄는 펼침. */
details.exd {
  margin: 10px 0 0 14px;
  border: 1px solid var(--pill-border);
  border-left: 4px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: var(--pill-bg);
  overflow: hidden;
}

details.exd > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: var(--accent-bg);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-hover);
}

details.exd > summary::-webkit-details-marker {
  display: none;
}

details.exd > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

details.exd > summary .lb {
  font-size: var(--fs-xs);
  background: var(--panel-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  padding: 1px 10px;
  font-weight: 700;
}

details.exd > summary .ar {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: 400;
}

details.exd[open] > summary .ar::after {
  content: '접기';
}

details.exd:not([open]) > summary .ar::after {
  content: '펴기';
}

details.exd .exhd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-bottom: 1px dashed var(--pill-border);
  background: var(--accent-bg);
}

details.exd .exhd-inner {
  border-top: 1px dashed var(--pill-border);
  background: var(--pill-bg);
}

details.exd .tt {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 700;
}

details.exd .tt-muted {
  font-weight: 400;
  color: var(--text-faint);
}

details.exd .cp {
  margin-left: auto;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-hover);
  cursor: pointer;
  background: var(--panel-bg);
  border: 1px solid var(--pill-border);
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
}

details.exd .cp:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
}

details.exd .cp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

details.exd .exbd {
  padding: 11px 14px 12px;
}

details.exd .exbd p {
  margin: 0;
  padding: 6px 0 6px 15px;
  position: relative;
  font-size: var(--fs-md); /* 2026-09-15: 예시 문안도 본문 크기 */
  color: var(--text-muted);
  line-height: 1.6;
  border-bottom: 1px dotted var(--border);
}

details.exd .exbd p:last-child {
  border-bottom: none;
}

details.exd .exbd p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pill-border);
}

/* 복사 알림 토스트(시안 .toast) */
.exd-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  background: var(--text);
  color: #fff;
  font-size: var(--fs-xs);
  padding: 8px 16px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 1000;
}

.exd-toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 클립보드 대체용 숨은 textarea */
.exd-clip {
  position: fixed;
  opacity: 0;
}

@media (max-width: 560px) {
  details.exd {
    margin-left: 0;
  }
}

@media print {
  details.exd::details-content {
    content-visibility: visible;
    display: block;
  }

  details.exd > summary .ar,
  details.exd .cp {
    display: none;
  }
}

/* ---------- 갈림 도식(item.blocks type 'forkFlow', renderForkFlowBlock — 2026-09-13~) ----------
   시안(조달비조달-갈림도식-시안.html ㉮ .start ~ .lanes) 구조 그대로: 출발 상자 → 줄기 → 갈림선 → 두 갈래.
   색은 사이트 토큰(초록 --kedufine*, 주황 --warn*, 파랑 --accent*). 620px 이하는 갈래가 위아래로, 갈림선 숨김. */
.ff-start {
  display: flex;
  justify-content: center;
}

.ff-startbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--pill-border);
  border-radius: 10px;
  background: var(--accent-bg);
  padding: 9px 18px;
}

.ff-start-icon svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  display: block;
}

.ff-startbox b {
  font-size: var(--fs-sm);
  color: var(--accent-hover);
}

.ff-startbox small {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.ff-stem {
  height: 16px;
  width: 1.5px;
  background: var(--pill-border);
  margin: 0 auto;
}

.ff-fork {
  height: 14px;
  border-top: 1.5px solid var(--pill-border);
  border-left: 1.5px solid var(--pill-border);
  border-right: 1.5px solid var(--pill-border);
  border-radius: 8px 8px 0 0;
  margin: 0 12.5%;
}

.ff-forkstem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ff-forkstem i {
  height: 12px;
  width: 1.5px;
  background: var(--pill-border);
  justify-self: center;
  display: block;
}

.ff-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.ff-lane {
  border: 1.5px solid;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-bg);
}

.ff-hd {
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ff-hd b {
  font-size: var(--fs-sm);
}

.ff-hd small {
  display: block;
  width: 100%;
  font-size: var(--fs-xs);
  opacity: 0.8;
  margin-top: -1px;
}

.ff-verdict {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 11px;
  background: var(--panel-bg);
}

.ff-in {
  background: var(--panel-bg);
  padding: 12px 13px 13px;
}

.ff-chain {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ff-node {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--pill-bg);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}

.ff-node-dim {
  color: var(--text-faint);
}

.ff-node-hot {
  border-color: currentColor;
}

.ff-arw {
  width: 9px;
  height: 11px;
  flex: 0 0 auto;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0.5;
}

.ff-list {
  margin: 0;
  padding-left: 16px;
}

.ff-list li {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 4px 0;
  line-height: 1.55;
}

.ff-list li b {
  color: var(--text);
}

.ff-lane-g { border-color: var(--kedufine-border); }
.ff-lane-g .ff-hd { background: var(--kedufine-bg); color: var(--kedufine); }
.ff-lane-g .ff-verdict { color: var(--kedufine); border: 1px solid var(--kedufine-border); }
.ff-lane-g .ff-node-hot { color: var(--kedufine); background: var(--kedufine-bg); }
.ff-lane-g .ff-arw { background: var(--kedufine); }
.ff-lane-o { border-color: var(--warn-border); }
.ff-lane-o .ff-hd { background: var(--warn-bg); color: var(--warn-border); }
.ff-lane-o .ff-verdict { color: var(--warn-border); border: 1px solid var(--warn-border); }
.ff-lane-o .ff-node-hot { color: var(--warn-border); background: var(--warn-bg); }
.ff-lane-o .ff-arw { background: var(--warn-border); }

@media (max-width: 620px) {
  .ff-lanes {
    grid-template-columns: 1fr;
  }

  .ff-fork,
  .ff-forkstem {
    display: none;
  }
}

/* ---------- 역할 흐름(roleFlow)ㆍ갈림 흐름(splitFlow) — 2026-09~, 시안 불용결정-보완-시안.html ①② ----------
   js/detailView.js renderRoleFlowBlock / renderSplitFlowBlock. 첫 사례: 물품관리 3-1 반납 절차, 3-2 처분 흐름.
   화살표는 도메인 색(--dom, body[data-field])의 clip-path 삼각형, 상자는 흰 바탕ㆍ회색 머리. 좁은 폭(≤680px)에서는
   역할 흐름은 2열 격자, 갈림 흐름은 한 열로 쌓이고 화살표는 숨긴다. */
.role-flow-wrap,
.split-flow-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.role-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}

.rf-cell {
  position: relative;
  padding-right: 13px;
}

.rf-cell:last-child {
  padding-right: 0;
}

.rf-cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  margin-top: -6px;
  width: 9px;
  height: 12px;
  background: var(--dom);
  opacity: .55;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rf-box {
  height: 100%;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.rf-who {
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--text) 8%);
  border-bottom: 1px solid var(--border);
  padding: 7px 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.35;
}

.rf-act {
  padding: 9px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.rf-tag {
  font-style: normal;
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom);
  background: color-mix(in srgb, var(--dom) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--dom) 30%, #fff);
  border-radius: 999px;
  padding: 1px 8px;
}

/* 역할 흐름 서식 알약(roleFlow roles[].forms) — 눌러서 서식을 여는 링크 */
a.rf-tag-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

a.rf-tag-link:hover {
  background: color-mix(in srgb, var(--dom) 18%, #fff);
}

/* 갈림 흐름 — 앞 칸 둘 + 갈래 열(조금 넓게) */
.split-flow {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 0;
  align-items: start;
}

.sf-cell {
  position: relative;
  padding-right: 13px;
}

.sf-cell:last-child {
  padding-right: 0;
}

.sf-cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 26px;
  width: 9px;
  height: 12px;
  background: var(--dom);
  opacity: .55;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sf-box {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.sf-box .sf-h {
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--text) 8%);
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

.sf-box .sf-b {
  padding: 8px 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

.sf-branches {
  display: grid;
  gap: 7px;
}

.sf-br {
  border: 1px solid;
  border-radius: 9px;
  overflow: hidden;
}

.sf-br .sf-h {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

.sf-br .sf-b {
  padding: 7px 10px;
  font-size: var(--fs-xs);
  text-align: center;
  background: var(--panel-bg);
  color: var(--text-muted);
}

.sf-br .sf-b small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-top: 2px;
}

/* 갈래 색 — 활용 가능(초록, K-에듀파인 계열 토큰) / 활용 불가능(주황, 알아두기 계열 토큰) */
.sf-br-ok { border-color: var(--kedufine-border); }
.sf-br-ok .sf-h { background: var(--kedufine-bg); color: var(--kedufine); }
.sf-br-no { border-color: var(--warn-border); }
.sf-br-no .sf-h { background: var(--warn-bg); color: var(--warn-border); }

/* 흐름 위아래 불릿 묶음(intro / lists) */
.flow-list-heading {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-hover);
}

.flow-list-items {
  margin: 0;
  padding-left: 17px;
}

.flow-list-items li {
  margin: 5px 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
}

.flow-list-items li b {
  color: var(--text);
}

@media (max-width: 680px) {
  .role-flow {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .rf-cell {
    padding-right: 0;
  }

  .rf-cell:not(:last-child)::after {
    display: none;
  }

  .split-flow {
    grid-template-columns: 1fr;
  }

  .sf-cell {
    padding-right: 0;
    margin-bottom: 9px;
  }

  .sf-cell:last-child {
    margin-bottom: 0;
  }

  .sf-cell::after {
    display: none;
  }
}

/* ---------- linkFlow 가로 마디형(block.stages, renderLinkFlowStages — 2026-09~) ----------
   시안 물품관리-절차도-가로띠-시안.html .band/.cycle/.pbox. 첫 사례: 물품관리 중분류 첫 화면
   「업무처리 절차도」. 마디 하나가 가로 띠 한 줄이다 — 왼쪽 마디 이름 칸은 폭 고정(92px)이라 띠
   넷이 세로로 맞아떨어지고, 오른쪽 상자는 글자 길이만큼만 차지하며 넘치면 줄바꿈으로 흘러간다.
   예전 네 칸 세로 목록(grid 4열)은 칸마다 상자 개수가 달라(취득 1개ㆍ처분 5개) 높이가 어긋나고
   빈 자리가 생겨서 폐기했다(2026-09).
   색은 도메인 색 한 가지(시안 지정값 #c98a3c, 진한 쪽 #a86f28)와 회색만 — 띠 바탕은 같은 주황을
   네 단계 농도(1→4 짙어짐, .lf-band-N)로 깔되 왼쪽에서 오른쪽으로 흐려지는 그러데이션이라
   상자 글자가 바탕색에 묻히지 않는다. 시기 딱지는 정해진 때(1월ㆍ7월)만 주황이고 수시는 회색,
   주체 딱지는 타 기관이 함께 하는 것만 점선. 다른 도메인에서 쓰려면 body[data-field]별로 아래
   --lf-* 토큰만 덮어쓴다. */
.lf-stages-wrap {
  --lf-dom: #c98a3c;
  --lf-dom-d: #a86f28;
  --lf-dom-soft: #fdf4e8;
  --lf-dom-ln: #eed9b8;
  --lf-tint-1: #fdf9f3;
  --lf-tint-2: #fcf3e7;
  --lf-tint-3: #faecd8;
  --lf-tint-4: #f7e2c4;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.lf-stages-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.lf-bands {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* 마디 띠 한 줄 — [고정폭 마디 이름 | 상자들]. */
.lf-band {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--lf-dom);
  border-radius: 10px;
  padding: 9px 11px;
  break-inside: avoid;
}

.lf-band-1 { background: linear-gradient(90deg, var(--lf-tint-1), var(--panel-bg) 40%); }
.lf-band-2 { background: linear-gradient(90deg, var(--lf-tint-2), var(--panel-bg) 40%); }
.lf-band-3 { background: linear-gradient(90deg, var(--lf-tint-3), var(--panel-bg) 40%); }
.lf-band-4 { background: linear-gradient(90deg, var(--lf-tint-4), var(--panel-bg) 40%); }

.lf-band-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lf-band-head em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  background: var(--lf-dom-d);
  border-radius: 999px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.lf-band-head b {
  font-size: var(--fs-sm);
  color: var(--lf-dom-d);
}

.lf-band-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* 상자 사이 화살표 — 장식 기호라 글자가 아니라 도형으로 넣는다. 나란한 갈래(item.parallel)
   사이에는 렌더러가 아예 만들지 않는다. */
.lf-band-sep {
  width: 7px;
  height: 9px;
  background: var(--lf-dom);
  opacity: .4;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex: 0 0 auto;
}

/* 추진과정 상자 — 글자 길이만큼만 차지하는 흰 상자. 갈 곳이 있으면 <a>. */
.lf-pbox {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  color: inherit;
  text-decoration: none;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 11px;
  break-inside: avoid;
  transition: border-color .12s, background .12s, box-shadow .12s;
}

a.lf-pbox {
  cursor: pointer;
}

a.lf-pbox:hover {
  background: var(--lf-dom-soft);
  border-color: var(--lf-dom);
  box-shadow: 0 2px 6px -3px rgba(168, 111, 40, .5);
}

a.lf-pbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 상자 이름은 줄 안에서 끊지 않는다 — 끊기면 「관리전환 소요조회ㆍ신청」이 두 줄이 되어 띠
   높이가 들쭉날쭉해진다. 대신 상자 단위로 다음 줄에 흘러간다(.lf-band-row의 flex-wrap). */
.lf-pbox b {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
}

.lf-pbox-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lf-pbox-meta i,
.lf-legend i {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}

.lf-when {
  color: var(--lf-dom-d, #a86f28);
  background: var(--lf-dom-soft, #fdf4e8);
  border: 1px solid var(--lf-dom-ln, #eed9b8);
}

.lf-when-always {
  color: var(--text-faint);
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 400;
}

.lf-with {
  color: var(--text-muted);
  background: var(--panel-bg);
  border: 1px dashed var(--border-strong);
}

/* 해마다 도는 고리 — 회색 점선(흐름 밖). 머리말과 상자가 한 줄에 이어 흐른다. */
.lf-cycle {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  padding: 9px 12px;
  break-inside: avoid;
}

.lf-cycle-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 0 0;
}

.lf-cycle-head svg {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  flex: 0 0 auto;
}

.lf-cycle-head b {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.lf-cycle-head small {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.lf-cycle .lf-pbox {
  border-color: var(--border);
}

.lf-cycle a.lf-pbox:hover {
  border-color: var(--lf-dom);
  background: var(--lf-dom-soft);
}

.lf-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.lf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 좁은 폭에서는 마디 이름이 상자 위로 올라가고 화살표는 숨긴다(상자가 여러 줄로 흘러가면
   화살표가 줄 끝에 홀로 남아 방향을 잘못 가리킨다). */
@media (max-width: 620px) {
  .lf-band {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .lf-band-sep {
    display: none;
  }
}

@media print {
  .lf-band,
  .lf-pbox,
  .lf-cycle {
    break-inside: avoid;
  }
}

/* ---------- 낱말 음영(block.termMarks, applyTermMarks — 2026-09-13~) ----------
   서로 헷갈리는 두 낱말(추정가격 / 추정금액)에 다른 음영을 입힌다. 굵게, 좌우 3px, 모서리 3px, 아래 2px 밑줄.
   tone price 파랑 / amount 주황. 어두운 화면용 색은 :root[data-theme="dark"] 아래에 둔다(사이트가 어두운
   화면을 켜면 그대로 쓰임). */
.term-mark {
  font-weight: 700;
  padding: 0 3px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.term-mark-price {
  background: var(--accent-bg);
  color: var(--heading);
  box-shadow: inset 0 -2px 0 var(--border-strong);
}

.term-mark-amount {
  background: #fdf0e4;
  color: #8a5a12;
  box-shadow: inset 0 -2px 0 #e0b877;
}

:root[data-theme="dark"] .term-mark-price {
  background: #18243a;
  color: #9dc1ef;
  box-shadow: inset 0 -2px 0 #2b4568;
}

:root[data-theme="dark"] .term-mark-amount {
  background: #2a2114;
  color: #e0b877;
  box-shadow: inset 0 -2px 0 #6b4a1c;
}

/* ---------- 세로 줄기 도식(item.blocks type 'trunkFlow', renderTrunkFlowBlock — 2026-09-13~) ----------
   시안(이견처리-세로줄기-시안.html ㉮ .trunk 이하) 구조 그대로. 줄기ㆍ점ㆍ옆가지 선은 배경색이 아니라 테두리로
   그려 인쇄(배경 그래픽 끔)에서도 보인다. 색은 사이트 토큰(파랑 --accent*, 회색 --text-faint/--pill-bg,
   빨강 --danger*, 주황 --warn*). 640px 이하는 두 부서 상자가 위아래로 쌓이고 화살표가 아래를 향한다. */
.tf-trunk {
  position: relative;
  padding-left: 26px;
}

.tf-trunk::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 34px;
  width: 0;
  border-left: 2px solid var(--pill-border);
}

.tf-node {
  position: relative;
  margin-bottom: 12px;
}

.tf-node::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 13px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 2.5px solid var(--accent);
  box-sizing: border-box;
}

.tf-node-start::before {
  background: var(--accent);
}

.tf-node-end::before {
  border-color: var(--text-faint);
  background: var(--text-faint);
}

.tf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.tf-step {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  background: var(--accent-hover);
  border-radius: 99px;
  padding: 2px 11px;
}

.tf-head b {
  font-size: var(--fs-md);
  color: var(--accent-hover);
}

.tf-title0 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.tf-once {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: 99px;
  padding: 1px 10px;
}

/* 두 부서 짝 */
.tf-pair {
  display: grid;
  grid-template-columns: 1fr 22px 1fr;
  align-items: stretch;
  gap: 0;
}

.tf-who {
  border: 1.5px solid var(--pill-border);
  border-radius: 10px;
  background: var(--panel-bg);
  padding: 11px 13px;
}

.tf-who-act {
  background: var(--accent-bg);
}

.tf-role {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--panel-bg);
  border: 1px solid var(--pill-border);
  border-radius: 99px;
  padding: 1px 10px;
  margin-bottom: 6px;
}

.tf-who p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

.tf-due {
  display: inline-block;
  margin-top: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 99px;
  padding: 2px 11px;
}

.tf-mid {
  display: grid;
  place-items: center;
}

.tf-mid i {
  width: 9px;
  height: 12px;
  background: var(--accent);
  opacity: 0.5;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  display: block;
}

/* 갈림 — 옆가지(끝맺음)와 잇는 표시 */
.tf-branch {
  position: relative;
  margin: 0 0 12px;
}

.tf-branch::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 19px;
  width: 17px;
  height: 0;
  border-top: 2px solid var(--border);
}

.tf-off {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  background: var(--pill-bg);
  padding: 7px 13px;
  margin-left: 2px;
}

.tf-off .tf-lb {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-faint);
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  padding: 1px 9px;
}

.tf-off span:not(.tf-lb) {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.tf-cont {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px 2px;
}

.tf-cont .tf-lb {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-bg);
  border: 1px solid var(--pill-border);
  border-radius: 99px;
  padding: 2px 12px;
}

.tf-cont span:not(.tf-lb) {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.tf-warn {
  margin: 6px 0 0;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: 0 9px 9px 0;
  padding: 10px 13px;
  font-size: var(--fs-sm);
  color: var(--danger);
  font-weight: 700;
}

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

  .tf-mid {
    height: 20px;
    justify-self: center;
  }

  .tf-mid i {
    transform: rotate(90deg);
  }
}

/* ---------- 서식 모양 표(item.blocks type 'formSheet', renderFormSheetBlock — 2026-09-13~) ----------
   원본 서식을 그대로 보여준다: 제목은 표 위 가운데, 바깥 테두리 굵게, 라벨 칸은 회색 바탕·가운데 정렬.
   좁은 화면에서도 칸을 접지 않고 .table-scroll로 가로 스크롤한다(표의 min-width는 데이터의 minWidth). */
.form-sheet-scroll {
  overflow-x: auto;
}

.form-sheet {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--text-muted);
  background: var(--panel-bg);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
}

.form-sheet-title {
  caption-side: top;
  padding: 6px 0 9px;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
}

.form-sheet th,
.form-sheet td {
  border: 1px solid var(--table-border-header);
  padding: 7px 10px;
  vertical-align: middle;
}

.form-sheet-label {
  width: 110px;
  background: var(--bg);
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.form-sheet-value {
  text-align: left;
}

.form-sheet-note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 표 칸의 「신설」 꼬리표(renderDataTable badge tone 'new', 2026-09-13~) — 경고색 계열로 바뀐 자리만 표시. */
.cell-badge-new {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---------- 세부업무 항목(items)의 절차 표 — 단계/업무명/D-day/별지서식 ---------- */
/* 행을 클릭하면 바로 아래 숨겨둔 행(procedure-row-detail)이 펼쳐져 설명·추진부서·주의사항 전문을 보여준다. */

.procedure-table-note {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-faint);
}

/* .data-table 기본 패딩이 2026-08부터 이미 4px 10px라 지금은 값이 같다 — 이후 .data-table
   패딩을 다시 늘려도 업무절차 표는 조밀하게 유지하고 싶어서 규칙은 남겨둔다. */
.procedure-table th,
.procedure-table td {
  padding: 4px 10px;
}

.procedure-table td:nth-child(3),
.procedure-table td:nth-child(4),
.procedure-table th:nth-child(3),
.procedure-table th:nth-child(4) {
  white-space: nowrap;
}

/* 업무명 열도 한 줄로(2026-10-06~) — 별지서식 배지를 서식명으로 길게 쓰면서 업무명이 「온라인 기탁 /
   안내」처럼 두 줄로 쪼개졌다. 배지 묶음(.form-badge-list)은 줄바꿈되므로 줄어드는 쪽은 서식 열이다. */
.procedure-table td:nth-child(2),
.procedure-table th:nth-child(2) {
  white-space: nowrap;
}

/* 단계 컬럼: 배지 하나만 담으면 되므로 .data-table의 기본 min-width(96px)를 없애고
   내용에 맞춰 최소 폭으로 줄인다. */
.procedure-table td:nth-child(1),
.procedure-table th:nth-child(1) {
  width: 1%;
  min-width: 0;
  white-space: nowrap;
}

.procedure-step-badge-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sec-procedure);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.procedure-row {
  cursor: pointer;
}

.procedure-row:hover {
  background: var(--bg);
}

.procedure-row td:first-child {
  position: relative;
  padding-left: 22px;
}

/* 펼침·접힘 표시(▸/▾) — 예전엔 유니코드 글자를 content로 넣었는데, top을 지정하지 않아
   절대배치 정적 위치(줄 상자 맨 위)에 걸렸고 폰트에 따라 배지 원과 어긋나 보이는 문제가
   있었다(2026-08~). 폰트 글리프에 기대지 않는 순수 CSS 삼각형(테두리 트릭)으로 바꾸고
   top:50%+translateY로 배지 원(18px 높이) 세로 중앙에 맞췄다 — 도메인을 가리지 않는 공용
   규칙이라 모든 procedures 표(학교운영위원회·국공유재산 포함)에 동일하게 적용된다. */
.procedure-row td:first-child::before {
  content: '';
  position: absolute;
  left: 10px;
  /* 2026-10-06: top:50%는 행이 두 줄 이상(서식 배지가 줄바꿈)일 때 삼각형이 위에 붙은 배지 원보다
     아래로 내려갔다. 칸 위 여백(4px) + 배지 원 반지름(9px)으로 첫 줄 배지에 고정한다. */
  top: 13px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent var(--sec-procedure);
}

.procedure-row.is-open td:first-child::before {
  border-width: 5px 4px 0 4px;
  border-color: var(--sec-procedure) transparent transparent transparent;
}

.procedure-row.is-open {
  background: var(--accent-bg);
}

.procedure-row.is-open td:first-child {
  box-shadow: inset 4px 0 0 var(--accent);
}

.procedure-row-detail {
  display: none;
}

.procedure-row.is-open + .procedure-row-detail {
  display: table-row;
}

/* 상세 영역: 일반 행(흰색)·호버(--bg)와 확실히 다른 톤 + 왼쪽 컬러 바 + 하단 구분선으로
   "이건 펼쳐진 상세 내용"임을 표시한다. */
.procedure-row-detail td {
  background: var(--panel-bg);
  box-shadow: inset 4px 0 0 var(--sec-procedure);
  border-bottom: 2px solid var(--border-strong);
}

.procedure-detail {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 2px;
}

.procedure-detail-field {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
}

.procedure-detail-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--sec-procedure);
  margin-bottom: 2px;
}

/* 절차 상세의 "관련 서식" — 별지서식 컬럼과 같은 배지를 쓰되 제목까지 한 줄에 보여준다. */
.procedure-forms-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.procedure-forms-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.procedure-forms-title {
  font-size: var(--fs-sm);
  color: var(--text);
}

/* ---------- 세부업무 항목(items) 목록 — subTask.items가 있을 때 procedures 카드 대신 표시 ---------- */
/* 노션 스타일: 파란 사각형 숫자 배지 + 제목만 있는 한 줄짜리 목록. 클릭하면 펼치지 않고
   항목 상세 화면(renderSubTaskItemDetail)으로 이동한다. */

.subtask-items-nav-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.subtask-item-nav-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.12s ease;
}

.subtask-item-nav-row:last-child {
  border-bottom: none;
}

.subtask-item-nav-row:hover {
  background: var(--bg);
}

.subtask-item-nav-badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}

.subtask-item-nav-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

/* 세부 항목 아코디언(.subtask-item-accordion) 접힌 줄 — 배지+제목을 하나로 감싸야
   .overview-toggle-summary의 justify-content:space-between이 이 묶음과 +/− 표시 2단으로만
   나뉜다(자식이 늘어나면 간격이 깨진다). 배지·제목 스타일은 기존 세부 항목 목록과 동일하게
   .subtask-item-nav-badge/-title을 그대로 재사용한다. */
.subtask-item-accordion-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 사이드바에서 특정 항목으로 스크롤 이동할 때(main.js selectSubTaskItemAccordion) 카드 상단이
   화면 가장자리에 바짝 붙지 않도록 여유를 둔다. */
.subtask-item-accordion {
  scroll-margin-top: 16px;
}

/* 항목 상세 화면 상단의 "← 세부업무명" 뒤로가기 링크 */
.item-back-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-bottom: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

.item-back-link:hover {
  text-decoration: underline;
}

.cell-file-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cell-file-link {
  color: var(--accent);
  text-decoration: underline;
  white-space: nowrap;
}

.cell-file-link.is-disabled {
  color: var(--text-faint);
  text-decoration: none;
  cursor: default;
}

.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.breadcrumb .sep {
  margin: 0 var(--space-1);
}

.breadcrumb-link {
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
  padding: 2px 5px;
  margin: -2px -5px;
  transition: background-color 0.15s, text-decoration-color 0.15s;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  text-decoration: underline;
  background-color: var(--accent-bg);
}

.detail-header h2 {
  margin: 0 0 8px;
  font-size: var(--fs-2xl);
  color: var(--heading);
}

.meta-dates {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.basis-date {
  display: inline-block;
  font-size: var(--fs-md);
  line-height: 1.3;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 11px;
}

.last-updated {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- 상세 화면: 섹션 공통 ---------- */

.detail-section {
  margin-bottom: 36px; /* 22px → 36px, 큰 섹션 사이 여백을 항목 사이 여백과 뚜렷이 구분 */
}

.detail-section:last-child {
  margin-bottom: 0;
}

/* item.blocks type:'section'(2026-08~) — 여러 body/table/notes 블록을 h3보다 큰 제목
   아래 묶는다(원문이 "항목 > 그룹 > 세부항목" 3단 구조일 때). 안쪽 .detail-section들의
   margin-bottom은 위 규칙을 그대로 물려받으므로 여기서 따로 손볼 필요가 없다. */
.block-section {
  margin-bottom: 36px;
}

.block-section:last-child {
  margin-bottom: 0;
}

.block-section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--accent);
}

.block-section-body {
  padding-left: var(--space-5);
  border-left: 2px solid var(--border);
}

/* ---------- 절 탭(item.sectionTabs, renderSectionTabs — 2026-09-17~) ----------
   원문 2단(section)을 탭 하나씩으로, caseDeck은 마지막 탭으로(계약관리 2-4 계약심사제도가 첫 사례). 단추 줄은
   갈래 단추(.branch-tabs-bar/.branch-tabs-btn)를 그대로 쓰고 패널만 .section-tabs-panel로 구분한다. 절 안에
   갈래 단추가 다시 들어가면 탭 안의 탭이 되므로 안쪽 단추는 한 단계(--fs-xs) 작게. 인쇄는 전 패널 펼침. */
.section-tabs {
  margin-bottom: 36px;
}

.section-tabs-bar {
  gap: 8px;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.section-tabs-btn {
  font-size: var(--fs-md);
  padding: 6px 18px;
}

.section-tabs-panel {
  display: none;
}

.section-tabs-panel.is-active {
  display: block;
}

.section-tabs-panel.block-section {
  margin-bottom: 0;
}

.section-tabs-panel .branch-tabs-btn {
  font-size: var(--fs-xs);
  padding: 3px 12px;
}

@media print {
  .section-tabs-bar {
    display: none;
  }

  .section-tabs-panel {
    display: block;
    margin-bottom: 36px;
  }
}

/* ---------- 절 아코디언(item.sectionAccordion, renderSectionAccordion — 2026-09-17~) ----------
   원문 2단(section)을 절 단위 <details>로 접는다(계약관리 3-2 입찰이 첫 사례). summary 안에 기존
   h2.block-section-heading을 그대로 넣어 제목 모양·목차 연동은 유지하고, 밑줄(--accent 2px)은 h2에서
   summary로 옮겨 +/− 표시까지 한 줄로 감싼다. +/− 표시는 근거 접기(.legal-section-summary)와 같은
   규칙. 열고 닫는 애니메이션은 ::details-content의 max-height transition(지원 브라우저만, 미지원은
   즉시 펼침) — 별도 토글 스크립트 없음. */
.block-accordion {
  margin-bottom: 36px;
}

.block-accordion-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.block-accordion-toggle-all {
  padding: 5px 16px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.block-accordion-toggle-all:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.block-accordion-toggle-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.block-section-accordion {
  margin-bottom: var(--space-4);
}

.block-section-accordion[open] {
  margin-bottom: 36px;
}

.block-accordion-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--accent);
}

.block-accordion-summary::-webkit-details-marker {
  display: none;
}

.block-accordion-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.block-accordion-summary > .block-section-heading {
  flex: 1;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.block-accordion-summary::after {
  content: '+';
  margin-left: auto;
  flex-shrink: 0;
  width: 20px;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}

.block-section-accordion[open] > .block-accordion-summary::after {
  content: '\2212';
}

.block-section-accordion > .block-section-body {
  margin-top: var(--space-5);
}

.block-section-accordion::details-content {
  max-height: 0;
  overflow: clip;
  transition: max-height 0.35s ease, content-visibility 0.35s allow-discrete;
}

.block-section-accordion[open]::details-content {
  max-height: 20000px;
}

/* .details-no-anim: js/main.js openDetailsInstantly가 스크롤 목적지로 여는 순간만 붙인다 — 애니메이션 중엔
   내용이 아직 안 그려져 scrollIntoView가 자리를 못 찾기 때문. */
.block-section-accordion.details-no-anim::details-content {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .block-section-accordion::details-content {
    transition: none;
  }
}

@media print {
  .block-accordion-toolbar {
    display: none;
  }

  .block-section-accordion::details-content {
    content-visibility: visible;
    display: block;
    max-height: none;
  }
}

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border);
  color: var(--heading);
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}

.section-icon svg {
  width: 17px;
  height: 17px;
}

.section-overview .section-icon { background: var(--accent-bg); color: var(--accent); }
.section-sites .section-icon { background: var(--sec-sites-bg); color: var(--sec-sites); }
.section-legal .section-icon { background: var(--sec-legal-bg); color: var(--sec-legal); }
/* 요약 상자(item.summary, 2026-09~)는 개념정의와 같은 전구 아이콘(iconKey concept)을 쓴다. */
.section-procedure .section-icon { background: var(--sec-procedure-bg); color: var(--sec-procedure); }
.section-form .section-icon { background: var(--sec-form-bg); color: var(--sec-form); }
/* 자료 묶음(subTask.resources, renderResourcesSection — 2026-09~)의 학사모 아이콘. 서식 섹션과
   같은 보라 계열을 써 "서류·자료" 성격임을 이어받는다. */
.section-icon-education { background: var(--sec-form-bg); color: var(--sec-form); }
.section-audit .section-icon { background: var(--sec-audit-bg); color: var(--sec-audit); }
.section-subtasks .section-icon { background: var(--bg); color: var(--text-muted); }
.section-casebook .section-icon { background: var(--sec-casebook-bg); color: var(--sec-casebook); }
/* 표/알아두기는 새 색상값을 만들지 않고 기존 변수를 재사용한다 — 표는 근거법령·서식과 겹치지
   않는 sites 팔레트를, 알아두기는 overview-callout과 동일한 warn 팔레트를 그대로 쓴다. */
.section-table .section-icon { background: var(--sec-sites-bg); color: var(--sec-sites); }
.section-note .section-icon { background: var(--warn-bg); color: var(--warn-border); }
/* K-에듀파인 toolCallout 전용(2026-08~) — .section-note와는 별개 클래스라 알아두기(item.notes)
   색은 그대로 warn 팔레트를 유지한다. toolCallout.variant === 'kedufine'일 때만 이 클래스가
   붙는다(js/detailView.js의 renderToolCalloutSection). */
.section-kedufine .section-icon { background: var(--kedufine-bg); color: var(--kedufine); }

/* block.icon(2026-08~) 전용 색 — type이 아니라 아이콘 이름 자체에 색을 묶는다. body처럼
   여러 인스턴스가 같은 type(=같은 section-* 클래스)을 공유해도 인스턴스별로 다른 색을 줄 수
   있어야 하기 때문(위 buildSectionIconHtml, js/detailView.js 참고). 새 hex를 만들지 않고
   기존에 정의돼 있지만 섹션 아이콘 용도로는 안 쓰던 토큰(관련 시스템 배지용 --sys-*,
   --point, --law-ordinance, --danger)을 재사용한다. */
.section-icon-hire { background: var(--sys-5-bg); color: var(--sys-5); }
.section-icon-hours { background: var(--sys-6-bg); color: var(--sys-6); }
.section-icon-evaluate { background: var(--point-bg); color: var(--point); }
.section-icon-staffing { background: var(--law-ordinance-bg); color: var(--law-ordinance); }
.section-icon-caution { background: var(--danger-bg); color: var(--danger); }
/* 개념정의(conceptBox) 전용 — 알아두기(.section-note, warn 팔레트)와 아이콘·색을 분리한다
   (2026-08~, renderItemConceptSection이 iconKey: 'concept'을 고정으로 넘김). */
.section-icon-concept { background: var(--sys-4-bg); color: var(--sys-4); }
/* 가격·요율 산출, 사용료·연체료 징수, 반환금 처리처럼 "돈을 계산·수납"하는 body 블록 전용
   (2026-08~). --sys-2는 시스템 태그 팔레트 중 섹션 아이콘 용도로는 안 쓰던 색이라 새로
   가져다 쓴다. */
.section-icon-finance { background: var(--sys-2-bg); color: var(--sys-2); }
/* body 블록이 서식 작성 절차(사용허가서·계약서 등 문서 내용을 채우는 절차)를 다룰 때 기존
   서식 섹션(.section-form)과 같은 아이콘·색을 재사용한다(2026-08~) — type이 아니라 iconKey로
   호출되므로 이 클래스가 별도로 필요하다. */
.section-icon-form { background: var(--sec-form-bg); color: var(--sec-form); }
/* body 블록에 icon을 지정하지 않았을 때 자동 적용되는 기본값(2026-08~, SECTION_ICONS.body).
   `.section-body .section-icon`(디센던트, 명시도 0,2,0)로 걸면 위 .section-icon-hire 등
   (단일 클래스, 0,1,0)을 명시도로 눌러버려 iconKey를 지정한 body 블록까지 이 색으로
   깔리는 사고가 난다 — 그래서 다른 type 기본값과 달리 iconKey 클래스와 같은 명시도로 건다
   (buildSectionIconHtml이 type==='body'일 때만 이 클래스를 명시적으로 붙임). 성격이
   뚜렷하지 않은 body 블록에 6종 중 하나를 억지로 끼워 맞추지 않고 이 중립색(--law-school,
   법령 유형색 중 "학교 규정" 회색과 동일 — 섹션 아이콘 용도로는 처음 재사용)을 쓴다. */
.section-icon-body { background: var(--law-school-bg); color: var(--law-school); }
/* 3D 그림 아이콘(2026-10-13~, js/detailView.js buildSectionIconHtml) — 위 색 배지 바탕을 지우고 그림만 조금 크게.
   (0,2,0)이라 .section-xxx .section-icon(0,2,0)보다 뒤에 둬야 이긴다. */
.section-icon.section-icon-3d {
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 0;
}

/* ---------- 관련 사이트 ---------- */

.related-sites-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
}

.related-sites-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.related-sites-item:last-child {
  border-bottom: none;
}

/* ---------- 자료 묶음(subTask.resources, 2026-09~) ---------- */
/* 관련서식 목록 → 표 → 알약 줄이 한 섹션 안에 위아래로 놓인다. 각 덩어리 사이 간격만 준다. */
.resources-body > * + * {
  margin-top: 14px;
}

.resources-body > .notes-source {
  margin-top: 6px;
}

/* 표에 딸린 안내 불릿(resources.tables[].notes)과 그 근거 캡션(basis) — 각주(※) 바로 아래에
   붙되, 다음 덩어리(알약 줄)와는 기본 간격을 둔다. */
.resources-body > .notes-list {
  margin-top: 8px;
}

.resources-body > .resources-basis {
  margin-top: 4px;
}

.resources-sites-label {
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* 알약 한 줄 — 상자 대신 이름만 나열한다(원래 .related-sites-list 상자가 화면 폭을 다 차지해
   보조 자료치고 무거웠다). */
.site-pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-pill-item {
  padding: 0;
  border: none;
}

.link-anchor.site-pill {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
}

.link-anchor.site-pill .link-name {
  font-size: var(--fs-xs);
  font-weight: 600;
}

a.link-anchor.site-pill:hover,
a.link-anchor.site-pill:focus-visible {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* ---------- 요약 상자(item.summary, 2026-09~ 표본) ---------- */
/* 색·글꼴·간격은 기존 토큰만 쓴다(꾸미기는 나중에). 흰 패널 + 기본 테두리, 숫자 카드는 accent 배경. */
.item-summary {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  padding: 14px 16px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
}

/* 요약 상자 맨 위 소개 문장(summary.intro, 2026-09-12~) — 본문보다 한 단계 진한 색으로 "이 항목이
   무엇인지"를 먼저 읽게 한다. */
.item-summary-intro {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--text);
}

.item-summary-when {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.item-summary-label {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 6px;
  line-height: 1.6;
  white-space: nowrap;
}

.item-summary-stats {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.item-summary-stat {
  border-radius: 6px;
  background: var(--accent-bg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-summary-stat-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent-hover);
  line-height: 1.3;
}

.item-summary-stat-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* 요약 상자 안 구간 표(summary.table, 2026-09~) — 숫자 카드 대신 쓰는 표. 본문 표(.data-table)를
   그대로 쓰고 위아래 여백만 카드 줄과 맞춘다. */
.item-summary-table {
  margin-top: 12px;
}

.item-summary-table .item-summary-subheading {
  margin-top: 0;
  margin-bottom: 6px;
}

/* 요약 상자 안 「다른 항목으로」 링크 줄(summary.related, 2026-09-12~) — 소관이 다른 숫자는 표·카드로
   내지 않고 이 줄로만 보낸다. 캡션(.notes-source)과 같은 크기·옅은 색, 링크만 강조색. */
.item-summary-related {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.item-summary-related-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.item-summary-subheading {
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.item-summary-todos {
  margin: 4px 0 0;
  padding-left: 22px;
}

.item-summary-todos li + li {
  margin-top: 2px;
}

/* ---------- 질문 판(item.askBox, 2026-09~) ---------- */
/* 요약 상자(.item-summary) 바로 아래. 질문마다 <details> 하나, 첫 번째만 펼침. 질문 줄은 본문보다
   한 단계 진하게, 답은 본문 글자 그대로. 펼침 표시는 근거 접기의 +/−가 아니라 작은 삼각(▸/▾)을
   ::before로 넣어 "읽는 질문"처럼 보이게 한다. 색·글꼴은 기존 토큰만 쓴다. */
.ask-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  padding: 4px 16px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
}

.ask-item + .ask-item {
  border-top: 1px solid var(--border);
}

.ask-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  font-weight: 700;
  color: var(--text);
}

.ask-q::-webkit-details-marker {
  display: none;
}

.ask-q::before {
  content: '\25B8';
  flex: none;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.ask-item[open] > .ask-q::before {
  content: '\25BE';
}

.ask-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.ask-a {
  padding: 0 0 12px 22px;
}

.ask-a-list {
  margin: 0;
  padding-left: 20px;
}

.ask-a-list li + li {
  margin-top: 2px;
}

.ask-jump {
  margin: 8px 0 0;
  padding: 3px 10px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--accent);
  cursor: pointer;
}

.ask-jump::after {
  content: ' \2193';
}

.ask-jump:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.ask-jump:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 사례 카드 묶음(item.caseDeck, 2026-09~ 표본) ---------- */
/* 카드는 업무개요 아코디언(.overview-toggle-item/.overview-toggle-summary)을 그대로 쓰고,
   찾기 칸·꼬리표 단추만 여기서 정한다. 색·글꼴은 기존 토큰만. */
.case-deck-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.case-deck-search {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  background: var(--panel-bg);
  color: var(--text);
}

.case-deck-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.case-deck-count {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.case-deck-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* 단추 두 줄(2026-09~): 첫 줄 공종 갈래, 둘째 줄 자주 나온 꼬리표. 첫 줄 아래 간격만 줄인다. */
.case-deck-bar-group {
  margin-bottom: 6px;
}

.case-deck-tag {
  padding: 3px 12px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.case-deck-tag:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.case-deck-tag[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.case-deck-tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 접힌 줄: 제목이 남는 폭을 차지하고 꼬리표는 오른쪽에 붙는다. 좁은 화면에서는 줄바꿈. */
.case-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  flex: 1;
}

.case-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
}

.case-card-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.case-card-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.case-deck-empty {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- 근거법령 / 관련법령 및 지침 (법령 콜아웃 한 줄 카드) ---------- */

/* ---------- 관련법령 및 지침 — 법령별 한 줄 표시(2026-08~) ---------- */
/* "법령명  제15·16·22조" 한 줄. 처음엔 조문마다 테두리 있는 칸(칩)을 두고 칸마다 링크를
   걸었지만, law.go.kr 주소가 법령 단위라 어느 조문을 눌러도 제1조부터 열려 링크가 무의미했고
   칸이 늘어서 화면만 차지했다 — 링크는 법령명에 한 번만 걸고 조문은 번호만 잇는다.
   법령 종류별 색은 왼쪽 막대에만 남긴다. */
.legal-line-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-left: 10px;
  border-left: 4px solid var(--border-strong);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.legal-line-name {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

a.legal-line-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

a.legal-line-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 도메인 홈 "관련법령 및 지침"만 2열로 흐른다(2026-08~, renderAggregatedLegalSection).
   집계 목록이라 계약관리는 45줄이 넘는데, 한 줄이 컨테이너 폭을 다 쓸 만큼 길지 않아
   오른쪽이 통째로 비어 있었다. column-count와 column-width를 함께 주면 폭이 모자랄 때
   브라우저가 알아서 1열로 떨어뜨리므로 미디어쿼리를 따로 두지 않는다(본문 폭 약 1100px
   에서 2열, 700px 이하에서 1열). 항목·세부업무 안 "근거법령"에는 붙이지 않는다 —
   거기는 목록이 짧고 본문 흐름 안에 있어 2열이면 오히려 읽는 순서가 끊긴다.
   .legal-line은 display:flex라 열 경계에서 반토막 나지 않게 break-inside로 막고,
   부모의 flex gap 대신 각 줄의 margin으로 간격을 준다(다단 안에서는 gap이 안 먹는다). */
.legal-line-list-columns {
  display: block;
  columns: 2 340px;
  column-gap: 28px;
}

.legal-line-list-columns > .legal-line {
  break-inside: avoid;
  margin-bottom: 6px;
}

/* legalGroupLabels가 있는 도메인의 "(주제 요약)". */
.legal-line-topic {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.legal-line-topic::before { content: '('; }
.legal-line-topic::after { content: ')'; }

/* 조문 번호 줄 — 폭이 모자라면 낱말 단위로 다음 줄로 넘어간다(잘리지 않는다). */
.legal-line-articles {
  min-width: 0;
  color: var(--text-muted);
  word-break: keep-all;
}

/* 조문 번호 하나 + 조문 제목 툴팁(2026-08~).
   네이티브 title은 브라우저가 1초쯤 기다렸다 띄우는데, 한 줄에 번호가 16개씩 15px 폭으로
   붙어 있으면 그 사이 포인터가 옆 번호로 미끄러져 타이머가 초기화된다 — 실제로는 아무것도
   안 떴다. data-title(js/detailView.js)을 ::after로 즉시 띄운다. JS는 쓰지 않는다.
   description이 없는 번호에는 data-title 자체가 없어 커서도 툴팁도 붙지 않는다. */
.legal-art[data-title] {
  position: relative;
  cursor: help;
  /* 번호 아래 점선을 깔아 올려볼 것이 있다는 걸 커서 말고도 알린다. */
  border-bottom: 1px dotted currentColor;
}

.legal-art[data-title]:hover,
.legal-art[data-title]:focus-visible {
  /* 툴팁이 뒤따르는 법령 줄에 가리지 않도록 이 번호만 위로 올린다. */
  z-index: 20;
}

.legal-art[data-title]:hover::after,
.legal-art[data-title]:focus-visible::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: min(260px, 70vw);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--text);
  color: var(--panel-bg);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  word-break: keep-all;
  text-align: left;
  box-shadow: 0 4px 12px rgba(31, 36, 48, 0.22);
  pointer-events: none;
}

/* 줄 맨 앞·맨 끝 번호는 가운데 정렬하면 툴팁이 화면 밖으로 나간다 — 그 두 개만 번호의
   왼쪽/오른쪽 끝에 맞춰 붙인다(.legal-art는 이 줄 안의 유일한 span이라 of-type이 통한다). */
.legal-art[data-title]:first-of-type:hover::after,
.legal-art[data-title]:first-of-type:focus-visible::after {
  left: 0;
  transform: none;
}

.legal-art[data-title]:last-of-type:hover::after,
.legal-art[data-title]:last-of-type:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}

/* 좁은 화면에서는 번호에 붙여 띄우면 폭이 모자라 툴팁이 화면 밖으로 나간다(420px에서 7건).
   번호 기준(position:relative)을 풀어 툴팁이 법령 줄(.legal-line) 왼쪽 끝에 맞춰 줄 아래로
   깔리게 한다 — 가리키는 정밀도는 줄지만 어느 폭에서도 잘리지 않는다. 데스크톱 폭에서는
   위 번호 기준 배치가 그대로 쓰인다(1440·900px 측정에서 넘침 0건). */
@media (max-width: 700px) {
  .legal-art[data-title] {
    position: static;
  }

  .legal-art[data-title]:hover::after,
  .legal-art[data-title]:focus-visible::after,
  .legal-art[data-title]:first-of-type:hover::after,
  .legal-art[data-title]:first-of-type:focus-visible::after,
  .legal-art[data-title]:last-of-type:hover::after,
  .legal-art[data-title]:last-of-type:focus-visible::after {
    left: 0;
    right: auto;
    transform: none;
    max-width: 100%;
  }
}

.legal-line.law-type-act { border-left-color: var(--law-act); }
.legal-line.law-type-decree { border-left-color: var(--law-decree); }
.legal-line.law-type-ordinance { border-left-color: var(--law-ordinance); }
.legal-line.law-type-school { border-left-color: var(--law-school); }

/* 근거법령이 많으면(LEGAL_BASIS_COLLAPSE_THRESHOLD 초과) <details>로 감싸 기본 접힘 상태로
   보여준다. .section-heading을 그대로 쓰는 <summary>에 여닫기 표시(+/−)만 덧붙인다.
   .flowchart-image-summary(item.flowchartImage 토글, 위 "flowchart-image" 주석 참고)와
   .ref-table-summary(block.toggle — 20행 이상 참조표 토글, renderBlockTableSection)도
   똑같은 +/− 토글이라 선택자를 묶어서 같이 정의한다 — 접힌 흐름도 이미지·참조표를 감싸는
   .flowchart-image-collapsible/.ref-table-collapsible에도 이 표시가 그대로 적용된다. */
.legal-section-summary,
.flowchart-image-summary,
.ref-table-summary {
  cursor: pointer;
  list-style: none;
}

.legal-section-summary::-webkit-details-marker,
.flowchart-image-summary::-webkit-details-marker,
.ref-table-summary::-webkit-details-marker {
  display: none;
}

.legal-section-summary:focus-visible,
.flowchart-image-summary:focus-visible,
.ref-table-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.legal-section-summary::after,
.flowchart-image-summary::after,
.ref-table-summary::after {
  content: '+';
  margin-left: auto;
  flex-shrink: 0;
  width: 20px;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}

.legal-section-collapsible[open] > .legal-section-summary::after,
.flowchart-image-collapsible[open] > .flowchart-image-summary::after,
.ref-table-collapsible[open] > .ref-table-summary::after {
  content: '\2212';
}

/* .ref-table-summary 라벨 옆 요약 문구(예: "1.0% ~ 5.0%") — 펼치지 않아도 대략을 알 수
   있게 한다. ::after의 +/− 배지보다 앞, 라벨 텍스트보다 옅은 색으로 구분한다. */
.ref-table-summary-note {
  margin-left: 8px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
}

/* item.blocks의 'body'/notes 소제목 그룹 중 toggle: true로 표시된 것만 감싸는 접힘(2026-08~,
   buildNotesListNode/js/detailView.js). 위 두 토글과 같은 +/− 관례를 따르지만, 이 summary는
   .notes-subheading(작은 소제목 스타일, block 레이아웃)에 얹히므로 flex 기반인 위 규칙과는
   따로 둔다 — margin-left:auto로 +/−를 오른쪽 끝에 붙이는 대신 인라인으로 뒤에 붙인다. */
.notes-toggle-summary {
  cursor: pointer;
  list-style: none;
}

.notes-toggle-summary::-webkit-details-marker {
  display: none;
}

.notes-toggle-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.notes-toggle-summary::after {
  content: ' +';
  color: var(--accent);
  font-weight: 700;
}

.notes-toggle-details[open] > .notes-toggle-summary::after {
  content: ' \2212';
}

.notes-toggle-details .notes-sublist {
  margin-top: 2px;
}

/* ---------- 업무절차 ---------- */

.procedure-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.procedure-card {
  display: flex;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}

.procedure-step-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sec-procedure);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
}

.procedure-body {
  flex: 1;
  min-width: 0;
}

.procedure-title {
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: 5px;
}

.procedure-content {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.7;
}

.procedure-meta {
  margin-top: 10px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.tag {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 3px 8px;
}

.tag-system {
  font-weight: 600;
  border-width: 1px;
}

/* 시스템(K-에듀파인/온나라/나이스 등)마다 다른 색으로 구분되는 팔레트. 이름 해시로 자동 배정된다.
   색상값은 :root의 --sys-1~6 변수 참고(예전엔 여기 하드코딩돼 있었다). */
.tag-system.sys-1 { color: var(--sys-1); background: var(--sys-1-bg); border-color: var(--sys-1-border); }
.tag-system.sys-2 { color: var(--sys-2); background: var(--sys-2-bg); border-color: var(--sys-2-border); }
.tag-system.sys-3 { color: var(--sys-3); background: var(--sys-3-bg); border-color: var(--sys-3-border); }
.tag-system.sys-4 { color: var(--sys-4); background: var(--sys-4-bg); border-color: var(--sys-4-border); }
.tag-system.sys-5 { color: var(--sys-5); background: var(--sys-5-bg); border-color: var(--sys-5-border); }
.tag-system.sys-6 { color: var(--sys-6); background: var(--sys-6-bg); border-color: var(--sys-6-border); }

/* 별지서식 배지: "별지 N"은 미리보기(새 탭 PDF). 파일이 없으면 회색 비활성. */
.form-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 도구 콜아웃(관련 서식·관련 시스템) 안의 단추 줄. 업무절차 표의 별지서식 알약(4px)보다
   단추가 커서 간격을 넓게 준다. */
.tool-callout-forms {
  gap: 8px;
}

.form-badge {
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.form-badge:hover:not(.is-disabled) {
  background: var(--accent);
  color: #fff;
}

.form-badge.is-disabled {
  color: var(--text-faint);
  border-color: var(--border-strong);
  cursor: default;
  pointer-events: none;
}

/* "통합 서식" 배지: 개별 별지 배지 그룹과 무관하게 편람 전체가 담긴 통합 한글파일을 다운로드한다. */
.form-badge-combined {
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

.form-badge-combined:hover {
  background: var(--accent);
  color: #fff;
}

/* 절차 표 「서식」 열 배지의 두 갈래(2026-09-22~, renderFormBadgeGroup의 kind).
   학교가 채워 보내는 문서는 초록, 교육지원청에서 받아 오는 공문은 회색 + 「받음」 딱지다 —
   관련서식 목록을 「서식ㆍ참고자료」로 가른 기준(.form-step-*)을 표에서도 그대로 지킨다.
   kind가 없는 배지는 위 기본(파랑) 모양 그대로다. */
.form-badge-kind-form {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.form-badge-kind-form:hover {
  background: var(--accent-teal);
  color: #fff;
}

.form-badge-kind-received {
  border-color: var(--border-strong);
  color: var(--text-muted);
  font-weight: 600;
}

.form-badge-kind-received:hover {
  background: var(--text-muted);
  color: #fff;
}

.form-badge-tag {
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid currentColor;
  font-size: var(--fs-xs);
  font-weight: 700;
  opacity: 0.85;
}

.procedure-notes {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  border-left: 3px solid var(--border-strong);
  padding-left: 10px;
}

/* ---------- 업무절차 흐름도(가로 흐름) ---------- */
/* 넓은 화면에서는 화살표로 이어지는 한 줄 흐름(내용이 많으면 가로 스크롤),
   좁은 화면(≤640px)에서는 세로로 쌓이고 화살표도 아래쪽을 가리키도록 회전한다. */

.flowchart-list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

/* 배지를 텍스트 옆에 두는 가로 배치로 카드 하나의 폭을 아끼되, 설명은 잘라내지 않고
   줄바꿈으로 전부 보여준다. 그래서 같은 줄의 카드끼리 높이가 서로 달라질 수 있는데,
   .flowchart-list의 align-items: stretch가 그 줄에서 가장 긴 카드에 맞춰 높이를 맞춘다.
   가로 폭을 최대한 활용하도록 넓지 않은 고정폭을 쓰고 넘치면 리스트 자체가 가로 스크롤된다. */
.flowchart-step {
  flex: 0 0 240px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  padding: 6px 10px;
  min-width: 0;
}

.flowchart-step-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sec-procedure);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.flowchart-step-body {
  min-width: 0;
  flex: 1;
}

.flowchart-step-title {
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flowchart-step-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.flowchart-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 16px;
  height: 16px;
  color: var(--sec-procedure);
}

.flowchart-arrow svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .flowchart-list {
    flex-direction: column;
    overflow-x: visible;
  }

  .flowchart-step {
    flex: 1 1 auto;
    width: 100%;
  }

  .flowchart-arrow {
    transform: rotate(90deg);
  }
}

/* ---------- 단계 흐름도(item.stepFlow, 2026-08~) ---------- */
/* 분기 없는 단순 일렬 흐름(예: "매각처리 흐름도")을 표 대신 화살표로 이어지는 상자로
   보여주는 범용 컴포넌트(renderItemStepFlowSection, js/detailView.js). wrapAt으로 줄바꿈
   개수를 지정하면 그 지점에서 아래로 내려갔다가 왼쪽으로 꺾이는 L자 연결선
   (.step-flow-wrap-connector)으로 다음 줄과 이어, 다음 줄도 왼쪽부터 순서대로 읽힌다는 걸
   보여준다. 좁은 화면(≤640px, 위 .flowchart-list와 같은 기준)에서는 전체가 세로 1열로
   바뀌고 화살표도 아래를 가리키도록 회전한다. */

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

.step-flow-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-2);
}

/* 상자 폭은 그 줄 자신의 항목 수가 아니라 --sf-cols(wrapAt, .step-flow에서 지정)로 고정한다.
   그래야 항목이 적어 끝나는 줄(예: 7단계를 4+3으로 접었을 때 아랫줄 3개)이 남는 폭만큼 늘어나
   앞줄보다 굵어지는 대신, 앞줄과 같은 폭을 유지한 채 .step-flow-row의 justify-content: center로
   가운데 정렬된다(2026-08~, 이전엔 flex: 1 1 0이라 짧은 줄도 항상 폭 전체로 늘어났다).
   flex-basis 계산에 화살표(.step-flow-arrow, 18px)와 그 양옆 여백(gap ×2)까지 뺀 몫을 쓴다 —
   단순히 100%/cols만 쓰면 화살표·여백이 없는 계산이라, 화살표가 실제로 있는 줄(대개 wrapAt을
   다 채우는 첫 줄)만 flex-shrink로 눈에 띄게 좁아져 다른 줄과 상자 폭이 달라 보였다. */
.step-flow-box {
  flex: 0 1 calc((100% - (var(--sf-cols, 1) - 1) * (18px + var(--space-2) * 2)) / var(--sf-cols, 1));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
}

/* K-에듀파인 단계 전용 색(2026-08~) — .tool-callout-kedufine과 같은 변수를 재사용한다. */
.step-flow-box-kedufine {
  border-color: var(--kedufine-border);
  background: var(--kedufine-bg);
}

.step-flow-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--kedufine);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.step-flow-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  word-break: keep-all;
}

.step-flow-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--sec-procedure);
}

.step-flow-arrow svg {
  width: 100%;
  height: 100%;
}

/* 줄바꿈 지점의 L자 연결선 — 넓은 화면에서는 stair 모양 선(.step-flow-wrap-svg) 끝에
   화살표 아이콘(.step-flow-wrap-corner-arrow)을 얹어 다음 줄 첫 상자로 꺾여 들어간다는
   걸 보여주고, 좁은 화면에서는 다른 줄과 같은 아래쪽 화살표(.step-flow-wrap-arrow)로
   바뀐다(세 요소를 모두 마크업에 두고 미디어쿼리로 표시만 전환). 화살표 아이콘은 선의
   viewBox처럼 비균등(preserveAspectRatio: none)으로 늘리면 옆으로 눌려 찌그러지므로,
   선과 분리한 별도 요소로 두고 고정 픽셀 크기만 회전시켜 붙인다. */
.step-flow-wrap-connector {
  position: relative;
  height: 32px;
  color: var(--sec-procedure);
}

.step-flow-wrap-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.step-flow-wrap-corner-arrow {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) rotate(90deg);
}

.step-flow-wrap-corner-arrow svg {
  width: 100%;
  height: 100%;
}

.step-flow-wrap-arrow {
  display: none;
  width: 18px;
  height: 18px;
  margin: 0 auto;
}

.step-flow-wrap-arrow svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .step-flow-row {
    flex-direction: column;
  }

  /* flex-direction이 column이 되면 flex-basis는 폭이 아니라 높이에 적용된다 — 데스크톱용
     폭 계산식(calc(...))을 그대로 두면 상자 높이가 그 값으로 눌리므로 auto로 되돌린다. */
  .step-flow-box {
    flex-basis: auto;
  }

  .step-flow-arrow {
    transform: rotate(90deg);
  }

  .step-flow-wrap-connector {
    height: auto;
  }

  .step-flow-wrap-svg,
  .step-flow-wrap-corner-arrow {
    display: none;
  }

  .step-flow-wrap-arrow {
    display: flex;
    transform: rotate(90deg);
  }
}

/* ---------- 번호 스텝(item.stepFlow variant: 'numbered', 2026-09-20~) ----------
   담당ㆍ서식이 둘 다 없는 단순 순차 절차를 표 대신 「번호 원 배지 + 단계 이름 + 가는 이음줄」로
   한 줄에 잇는다(시안 「업무절차 표 대안」 안 1, 물품관리 7-3 유류구매가 첫 사례 —
   renderNumberedStepFlow, js/detailView.js). 상자형 .step-flow와 별개의 모양이라 클래스도 따로 둔다.
   배지 색은 그 화면의 도메인 색(--dom, body[data-field]에서 주입)을 따르고 이음줄은 --border.
   좁은 화면(≤640px, .step-flow와 같은 기준)에서는 세로 1열로 접히고 이음줄도 아래를 향한다. */
.step-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-line-item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.step-line-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 112px;
  flex: none;
}

.step-line-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dom, var(--sec-procedure));
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  flex: none;
}

.step-line-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.step-line-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  word-break: keep-all;
}

.step-line-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
  word-break: keep-all;
}

/* 이음줄 — 다음 칸까지 남는 폭을 채우는 2px 선, 끝에 작은 삼각 화살촉. 배지 높이(30px)의 가운데에 맞춘다. */
.step-line-arrow {
  position: relative;
  flex: 1 1 24px;
  min-width: 16px;
  height: 2px;
  margin-top: 15px;
  align-self: flex-start;
  background: var(--border);
}

.step-line-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--border);
}

@media (max-width: 640px) {
  .step-line {
    flex-direction: column;
    align-items: stretch;
  }

  .step-line-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .step-line-node {
    flex-direction: row;
    align-items: flex-start;
    width: auto;
    gap: 10px;
  }

  .step-line-text {
    align-items: flex-start;
    text-align: left;
    padding-top: 5px;
  }

  .step-line-arrow {
    width: 2px;
    height: 18px;
    flex: none;
    margin: 0 0 0 14px;
  }

  .step-line-arrow::after {
    right: auto;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* ---------- 표 모달(2026-09-20~, buildTableModal / buildTableModalTrigger, js/detailView.js) ----------
   참조표를 본문에 펼치지 않고 단추를 눌렀을 때 네이티브 <dialog>로 띄운다(시안 「별표 모달 팝업」).
   단추ㆍ머리 띠 색은 그 화면의 도메인 색(--dom-base/--dom-deep)을 color-mix로 옅게 깐다 — 도구 카드와
   같은 규칙. 표 안 글씨는 .data-table이 정하고, 모달 안에서는 가로 스크롤 상자(.table-modal-scroll)가
   넓은 표를 받는다(병합 셀이 많은 별표는 720px 아래로 줄이면 읽히지 않는다). */
.table-modal-trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
}

/* 알아두기 불릿 목록 바로 아래에 붙을 때는 불릿과 같은 들여쓰기 없이 왼쪽에 맞춘다. */
.notes-subheading-item > .table-modal-trigger {
  margin-top: 10px;
}

.table-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(105deg, var(--dom-base, var(--accent)), var(--dom-deep, var(--accent-hover)));
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--dom-base, var(--accent)) 45%, transparent);
}

.table-modal-btn:hover {
  filter: brightness(1.06);
}

.table-modal-btn:focus-visible {
  outline: 2px solid var(--dom-deep, var(--accent));
  outline-offset: 2px;
}

.table-modal-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.table-modal-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 모달 본체 — dialog 기본 테두리ㆍ여백을 걷어내고 카드처럼. 폭은 화면에서 40px 뺀 값까지, 높이는 86vh까지. */
.table-modal {
  width: min(920px, calc(100vw - 40px));
  max-height: 86vh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  overflow: auto;
}

/* 서식 내용 모달(buildContentModal) — 읽는 참고 서식을 내려받지 않고 띄운다. 배지는 단추라
   기본 단추 모양을 걷어 내고 링크 배지와 같게 보이게 하며, 앞에 창 모양 기호를 붙여 「열린다」를 알린다. */
button.form-badge-modal {
  font-family: inherit;
  background: var(--panel-bg);
}

button.form-badge-modal::before {
  content: "⧉ ";
}

button.form-badge-modal:hover {
  background: var(--accent);
  color: #fff;
}

/* 모달이 절차 표 칸(별지서식 열은 nowrap) 안에 놓이므로 줄바꿈ㆍ정렬을 칸에서 물려받지 않게 되돌린다. */
.content-modal {
  width: min(760px, calc(100vw - 40px));
  white-space: normal;
  text-align: left;
  font-weight: 400;
}

.content-modal-scroll {
  padding: 4px 4px 8px;
}

.table-modal::backdrop {
  background: rgba(20, 23, 28, .5);
}

.table-modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--dom-base, var(--accent)) 10%, var(--panel-bg));
  z-index: 1;
}

.table-modal-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--dom-deep, var(--text));
  word-break: keep-all;
}

.table-modal-sub {
  margin: 3px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.table-modal-close {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  cursor: pointer;
}

/* 닫기 ✕는 장식이라 글자로 넣지 않고 선 두 개로 그린다. */
.table-modal-close::before,
.table-modal-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.table-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.table-modal-close:focus-visible {
  outline: 2px solid var(--dom-deep, var(--accent));
  outline-offset: 2px;
}

/* 서식·참고자료 미리보기 창(js/filePreview.js, 2026-10~) — hwpx·PDF 링크를 누르면 바로 받지 않고 이 창을
   먼저 띄운다. 틀(머리·닫기 단추·바깥 어둡게)은 표 모달(.table-modal)을 그대로 쓰고 크기만 키운다.
   hwpx 본문(.hx-*)은 js/hwpxRender.js가 문서마다 만든 클래스(fpv…)로 글자 크기·표 크기를 정하므로
   여기서는 쪽 모양만 잡는다 — 문서 안 글씨 크기는 원본 값(pt)이라 글자 크기 사다리 대상이 아니다. */
.file-preview {
  width: min(1040px, calc(100vw - 24px));
  height: 92vh;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.file-preview:not([open]) {
  display: none;
}

.file-preview-head {
  position: static;
  align-items: center;
}

.file-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.file-preview-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.file-preview-btn:hover {
  background: var(--bg);
}

.file-preview-btn:focus-visible {
  outline: 2px solid var(--dom-deep, var(--accent));
  outline-offset: 2px;
}

.file-preview-download {
  border-color: transparent;
  background: linear-gradient(105deg, var(--dom-base, var(--accent)), var(--dom-deep, var(--accent-hover)));
  color: #fff;
}

.file-preview-download:hover {
  background: var(--dom-deep, var(--accent-hover));
}

.file-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--accent-bg);
  padding: 16px 12px;
}

.file-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.file-preview-body:has(.file-preview-frame) {
  padding: 0;
}

.file-preview-msg {
  margin: 60px auto;
  max-width: 520px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* 가운데 정렬은 너비를 내용에 맞춘 묶음을 margin:auto로 놓아서 한다(flex 가운데 정렬은 창보다 넓은 쪽의
   왼쪽 끝을 스크롤로 못 닿게 한다 — apps/forms/와 같은 이유) */
.file-preview-pages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: max-content;
  margin: 0 auto;
}

.hx-page {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  overflow: hidden;
  flex: none;
}

/* 바탕쪽(2026-10-13~, js/hwpxRender.js): 쪽 위에 겹쳐 그리는 「행정」 탭ㆍ쪽 번호 같은 글상자 */
.hx-page-master {
  position: relative;
}

.hx-master-obj {
  position: absolute;
  overflow: hidden;
}

/* 그림 글머리표(↘ 등) — 글자 한 칸 크기로 줄 안에 둔다 */
.hx-bullet {
  height: 0.9em;
  width: auto;
  margin-right: 0.3em;
  vertical-align: -0.05em;
}

.hx-p {
  min-height: 1em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: break-spaces;
}

.hx-tbl {
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
  max-width: none;
}

.hx-tbl-inline {
  display: inline-table;
  vertical-align: top;
}

.hx-tbl td {
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hx-tab {
  display: inline-block;
  width: 2em;
}

.hx-img {
  max-width: 100%;
  vertical-align: middle;
}

.hx-box {
  display: inline-block;
  vertical-align: top;
  padding: 2px 4px;
}

@media (max-width: 640px) {
  .file-preview-head {
    flex-wrap: wrap;
  }

  .file-preview-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.table-modal-body {
  padding: 18px 22px 20px;
}

.table-modal-scroll {
  overflow-x: auto;
}

.table-modal-scroll .data-table {
  min-width: 720px;
}

.table-modal-src {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 표 모달 안의 서식 내려받기 단추 줄(2026-09-21~, 채권압류 세 모달의 워드판ㆍ엑셀판).
   표를 화면에서 보는 것과 받아서 쓰는 것을 한자리에 둔다 — 좁은 화면에서는 세로로 쌓인다. */
.table-modal-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.table-modal-download {
  flex: 1 1 220px;
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted, var(--bg));
  text-decoration: none;
  color: inherit;
}

.table-modal-download:hover {
  border-color: var(--dom-base, var(--accent));
  background: var(--accent-bg);
}

.table-modal-download b {
  display: block;
  font-size: var(--fs-md);
  color: var(--dom-deep, var(--accent));
}

.table-modal-download span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .table-modal {
    width: calc(100vw - 20px);
    max-height: 90vh;
  }

  .table-modal-head {
    padding: 12px 14px;
  }

  .table-modal-body {
    padding: 12px 14px 16px;
  }
}

/* 인쇄: 모달은 열려 있어도 찍지 않는다(단추만 남는다). */
@media print {
  .table-modal {
    display: none;
  }
}

/* ---------- 갈래 흐름도(item.blocks type 'laneFlow', 2026-09-20~, renderLaneFlowBlock) ----------
   물품관리 3-2 「불용품 처분 흐름도」가 첫 사례 — 시안(불용품 처분 흐름도 클릭 이동 시안 .flow-box)의 구조ㆍ
   색을 그대로 옮겼다. 세로 줄기 → 두 갈래 → 색 갈래 레인 다섯 → 합류 줄 → 최종 상자. 상자는 to가 있으면
   <a>(손가락ㆍ올리면 떠오름), 없으면 <span>. 갈래 색 다섯(관리전환 네이비ㆍ양여 초록ㆍ매각 주황(도메인
   기본색)ㆍ해체 청록ㆍ폐기 적색)은 지시로 정한 값이라 .lane-tone-* 변수에만 둔다. 좁은 폭(≤640px)에서는
   두 갈래ㆍ레인이 세로로 쌓인다. */
.lane-flow-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lane-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-bg);
}

.lane-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-self: flex-start;
  margin-bottom: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.lane-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lane-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--lane-c);
}

/* 상자 — 링크(<a>)와 정적(<span>) 공통 */
.lane-step {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--panel-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .12s, box-shadow .12s;
}

a.lane-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

a.lane-step:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.lane-step-static {
  color: var(--text-muted);
  cursor: default;
}

.lane-step-narrow {
  min-width: 110px;
}

/* 세로 이음줄 */
.lane-node,
.lane-split-leg,
.lane,
.lane-final {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lane-connector {
  display: block;
  width: 2px;
  height: 20px;
  background: var(--border);
}

.lane-connector-short {
  height: 10px;
}

.lane-leg-drop {
  display: block;
  width: 2px;
  height: 16px;
  background: var(--border);
}

/* 두 갈래 */
.lane-split-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

.lane-split-row-inner {
  gap: 12px;
}

/* 색 갈래 레인 띠ㆍ합류 띠 */
.lane-band {
  width: 100%;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 2px dashed var(--border);
}

.lane-band-label {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

.lane-lanes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.lane {
  flex: 1 1 150px;
  min-width: 150px;
}

.lane .lane-step {
  width: 100%;
}

.lane-tone-transfer { --lane-c: #3a5f9a; --lane-c2: #2c4a7c; --lane-b: #c3d3e8; }
.lane-tone-grant { --lane-c: #1f8a70; --lane-c2: #166b57; --lane-b: #bfe0d6; }
.lane-tone-sale { --lane-c: #d9822b; --lane-c2: #b8681a; --lane-b: #f0d3ac; }
.lane-tone-dismantle { --lane-c: #0d7d94; --lane-c2: #0a6273; --lane-b: #b9dee5; }
.lane-tone-discard { --lane-c: #c0392b; --lane-c2: #9c2e22; --lane-b: #eec3bd; }

.lane .lane-head {
  border-color: transparent;
  background: linear-gradient(105deg, var(--lane-c), var(--lane-c2));
  color: #fff;
}

.lane .lane-step:not(.lane-head) {
  border-color: var(--lane-b);
}

.lane-inner-fork {
  display: flex;
  gap: 8px;
  width: 100%;
}

.lane-inner-fork .lane-step {
  min-width: 0;
  padding: 7px 8px;
  font-size: var(--fs-xs);
}

/* 합류 줄 — 도메인 색을 옅게 깐 상자 */
.lane-merge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lane-step-merge {
  background: color-mix(in srgb, var(--dom-base, var(--accent)) 10%, var(--panel-bg));
  border-color: color-mix(in srgb, var(--dom-base, var(--accent)) 40%, var(--panel-bg));
}

/* 최종 상자 — 먹색 바탕 */
.lane-final {
  margin-top: 20px;
}

.lane-step-final {
  min-width: 220px;
  border-color: transparent;
  background: var(--text);
  color: var(--panel-bg);
}

@media (max-width: 640px) {
  .lane-split-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .lane-split-row-inner {
    flex-direction: row;
    gap: 10px;
  }

  .lane-lanes {
    flex-direction: column;
    align-items: stretch;
  }

  .lane {
    min-width: 0;
  }
}

@media print {
  .lane-step {
    box-shadow: none;
  }
}

/* item.branchFlow: 주 흐름(직선, 3~5박스)에 조건부 분기가 점선으로 합류하는 개관 다이어그램
   (2026-08~, 학교회계예산결산 "본예산부터 결산까지 운영 과정"이 첫 사례 — js/detailView.js의
   renderItemBranchFlowSection 참고). 주 흐름은 파란(--accent 계열), 분기는 주황(--warn-border
   계열) — 새 색상값 하드코딩 없이 기존 변수를 그대로 재사용한다. .step-flow와 같은 640px
   기준으로 좁은 화면에서 세로 1열로 바뀐다. */

.branch-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.branch-flow-banner {
  display: inline-flex;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-bg);
  color: var(--accent-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.branch-flow-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-2);
}

.branch-flow-box {
  flex: 1 1 0;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  border: 1.25px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-bg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
}

.branch-flow-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-hover);
  line-height: 1.35;
  word-break: keep-all;
}

.branch-flow-box .branch-flow-sub,
.branch-flow-segment-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.3;
  word-break: keep-all;
}

.branch-flow-connector {
  flex: 0 1 140px;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.branch-flow-branch-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.branch-flow-branch-box {
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  background: var(--warn-bg);
  padding: 5px 10px;
  text-align: center;
}

.branch-flow-branch-box .branch-flow-label {
  font-size: var(--fs-xs);
  color: var(--warn-border);
}

.branch-flow-branch-box .branch-flow-sub {
  font-size: var(--fs-xs);
  color: var(--warn-border);
  opacity: 0.85;
}

/* 분기 상자에서 본류로 내려오는 점선 합류선 — 화살표 아이콘(FLOWCHART_ARROW_ICON) 위에
   ::before로 세로 점선을 그어 별도 장식용 DOM 없이 하나의 요소로 처리한다. 점선(::before)은
   회전시키지 않는 바깥 wrapper(.branch-flow-branch-connector)에 붙이고, 화살표를 아래로
   돌리는 rotate(90deg)는 안쪽 아이콘(.branch-flow-branch-arrow-icon)에만 건다 — wrapper
   전체를 돌리면 세로 점선(border-left)까지 함께 90도 돌아가 가로 점선으로 보인다. */
.branch-flow-branch-connector {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 14px;
  color: var(--warn-border);
}

.branch-flow-branch-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 14px;
  border-left: 2px dashed var(--warn-border);
  transform: translateX(-50%);
}

.branch-flow-branch-arrow-icon {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.branch-flow-branch-arrow-icon svg {
  width: 100%;
  height: 100%;
}

.branch-flow-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.branch-flow-arrow svg {
  width: 100%;
  height: 100%;
}

.branch-flow-segment {
  text-align: center;
}

.branch-flow-segment-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.branch-flow-footnote {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .branch-flow-row {
    flex-direction: column;
  }

  .branch-flow-box,
  .branch-flow-connector {
    flex-basis: auto;
  }

  .branch-flow-arrow {
    transform: rotate(90deg);
  }
}

/* ---------- 관련서식 ---------- */

.form-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

.form-item:last-child {
  border-bottom: none;
}

/* 서식 묶음 제목(forms[].group, renderFormsList — 2026-09-13~): 목록 안에서 묶음이 바뀌는 자리에
   끼우는 제목 줄. 알아두기 소제목(.notes-subheading)과 같은 왼쪽 세로선 표식을 쓴다. */
.form-group-heading {
  padding: 10px 16px 4px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--pill-bg);
}

.form-group-heading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-right: 8px;
  vertical-align: -0.1em;
  background: var(--accent);
}

.form-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* ---------- 서식ㆍ참고자료 묶음 소제목(2026-09-22~, renderFormKindGroups, js/detailView.js) ----------
   forms[].kind가 있는 목록에만 쓴다. 카드 목록(.form-list/.form-item)은 도메인 공통 모양 그대로
   두고 그 위에 소제목 한 줄만 얹는다 — 2026-09-22에 이 자리를 2단 글자 목록으로 바꿨다가
   다른 도메인과 어긋나 되돌린 자리다. 절 제목(.section-heading)과 구분되도록 앞에 도메인 색
   세로선 3px을 붙이고, 건수와 설명은 같은 줄에 작게 붙인다. */
/* 묶음 소제목은 여닫는 단추다(2026-09-22~, buildFormFold). 카드 모양ㆍ도메인 색 띠는 그대로
   두고 소제목 줄만 <button>으로 바꿨다. 접기는 hidden 속성이라 인쇄와 브라우저 찾기(Ctrl+F)에서
   접힌 내용이 걸리지 않는다 — 이 점은 손대지 않고 그대로 두었다. */
.form-kind-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.form-kind-head:focus-visible {
  outline: 2px solid var(--dom-base);
  outline-offset: 2px;
}

.form-fold + .form-fold {
  margin-top: 18px;
}

/* 접힘ㆍ펼침 표시는 장식 기호라 CSS로만 넣는다(+ / −). */
.form-kind-head::after {
  content: '−';
  margin-left: auto;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-faint);
}

.form-kind-head[aria-expanded="false"]::after {
  content: '+';
}

.form-kind-head:hover .form-kind-title {
  color: var(--dom-base);
}

/* 5건 이하 묶음(2026-10-13~): 단추가 아닌 소제목 줄 — 손가락 모양ㆍ+/− 표시를 뺀다. */
.form-kind-head-static {
  cursor: default;
}

.form-kind-head-static::after {
  content: none;
}

.form-kind-head-static:hover .form-kind-title {
  color: inherit;
}

/* 묶음 구분이 없는 절은 절 제목 줄 자체가 단추다(renderFoldableFormsSection). */
.form-fold-heading-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.form-fold-heading-btn::after {
  content: '−';
  margin-left: auto;
  font-weight: 700;
  color: var(--text-faint);
}

.form-fold-heading-btn[aria-expanded="false"]::after {
  content: '+';
}

.form-fold-section > .section-heading {
  margin-bottom: 0;
}

.form-fold-section > .form-fold-body:not([hidden]) {
  margin-top: 10px;
}

/* 묶음 소제목(2026-09-22~): 본문과 크기가 비슷해 묶음 머리줄로 안 보이던 것을 한 단계 키웠다.
   색ㆍ왼쪽 막대는 그대로 두고, 옆에 붙는 설명(.form-kind-desc)은 --fs-xs 그대로 두어 소제목과
   크기 차이가 나게 한다. 처음에는 1.02rem을 썼으나 여섯 칸 사다리(--fs-md 0.93 / --fs-lg 1.07)
   사이 값이라 사다리 검사(tools/check-font-size-ladder.js)에 걸렸다 — 본문(--fs-md)보다 커야
   한다는 원래 뜻을 지키면서 1.02rem에 가장 가까운 칸인 --fs-lg로 올렸다(2026-09-23). */
.form-kind-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dom-deep);
}

.form-kind-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-right: 7px;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: var(--dom-base);
}

.form-kind-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 카드 이름 뒤 단계 배지(forms[].step): 업무절차 표 「별지서식」 열 배지와 짝이 되는 표시다.
   제출 서식은 초록, 교육지원청에서 받는 문서는 회색 — 표 배지(.form-badge-kind-*)와 같은 기준. */
.form-step {
  font-size: var(--fs-xs);
  line-height: 1.4;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 6px;
  white-space: nowrap;
}

.form-step-form {
  color: var(--accent-teal);
  background: color-mix(in srgb, var(--accent-teal) 12%, transparent);
}

.form-step-reference {
  color: var(--text-muted);
  background: var(--pill-bg);
}

.form-type-badge {
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 700;
  color: var(--sec-form);
  border: 1px solid var(--sec-form);
  border-radius: 3px;
  padding: 2px 6px;
  flex-shrink: 0;
}

/* 계약 정보를 넣으면 작성 대상 서식이 자동 판정되는 서식(예: 산업안전 도급·용역·위탁
   안전보건 확보 서식)임을 일반 서식과 구분해 보여준다. 파일형식 배지(.form-type-badge)
   바로 옆에 나란히 붙는 두 번째 배지라 모양은 그대로 재사용하고 색만 K-에듀파인 안내와
   같은 --kedufine 초록으로 바꿔 "시스템/자동" 계열임을 나타낸다. */
.form-type-badge-automated {
  color: var(--kedufine);
  border-color: var(--kedufine);
}

/* blocks의 'appCards' 블록(2026-09~) — 같은 일을 하는 웹 도구가 둘 이상이라 "어느 것을
   쓸지 고르는" 자리에 쓴다. 넓은 화면에서는 카드가 나란히 서고(auto-fit), 좁은 화면에서는
   한 칸이 최소 폭(240px)을 못 채우는 순간 자동으로 위아래로 접힌다 — 별도 미디어쿼리 없이
   grid의 auto-fit/minmax만으로 처리한다. 색·여백·모서리는 기존 토큰을 그대로 쓴다. */
.app-card-intro {
  margin: 0 0 10px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
}

.app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.app-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.app-card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.4;
}

/* 도구를 고르는 기준(예: "주 15시간 이상 · 월급제")을 제목 바로 아래 한 줄로 붙인다.
   서식 배지(.form-type-badge)와 같은 테두리 배지 모양이되, 파일형식이 아니라 적용 조건을
   담으므로 --accent를 써서 구분한다. */
.app-card-badge {
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 2px 6px;
}

.app-card-desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  flex-grow: 1;
}

/* 단추는 카드 높이가 서로 달라도 아래쪽에 가지런히 놓이도록 위 설명(.app-card-desc)이
   남는 공간을 밀어낸 뒤 마지막에 온다. */
.app-card > .btn-download {
  margin-top: 2px;
}

.form-name {
  font-size: var(--fs-md);
  font-weight: 700;
}

.form-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 서식모음(집계)에서 이 서식이 어느 세부업무 것인지 나타낸다. 공통 항목은 "공통"으로 표시 */
.form-source {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.btn-download {
  flex-shrink: 0;
  font-size: var(--fs-md);
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.12s ease;
}

.btn-download:hover {
  background: var(--accent-hover);
}

.btn-disabled {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

/* ---------- 서식 모아보기(도메인 홈 맨 아래, 2026-09~) ---------- */
/* 도메인 안에 흩어져 있는 서식 배지를 훑어 모아 보여주는 구역(js/formsDigest.js +
   js/detailView.js의 renderFormsDigestSection). 섹션 껍데기는 근거법령 5개 초과 토글과 같은
   .legal-section-collapsible / .legal-section-summary(+/− 표시)를 그대로 재사용하므로 여기서는
   안쪽 목록만 정의한다. 줄 하나가 "형식 배지 + 서식 이름 + 출처 항목"이라 .form-item(이름과
   다운로드 버튼을 양끝으로 미는 배치)과는 흐름이 달라 별도 클래스를 쓴다. */

.forms-digest-body {
  padding-top: 4px;
}

.forms-digest-desc {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.forms-digest-group + .forms-digest-group {
  margin-top: 18px;
}

/* 묶음(세부업무) 제목 + 건수. 왼쪽 세로선은 .faq-category-heading과 같은 방식이되 색은 서식
   계열(--sec-form)을 써서 이 구역이 서식 목록임을 유지한다. */
.forms-digest-group-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--sec-form);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.forms-digest-group-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
}

.forms-digest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
}

/* 좁은 화면에서는 wrap으로 줄이 접히게 둔다 — 서식명이 길어도 잘리거나 가로 스크롤이
   생기지 않고 출처 링크가 다음 줄로 내려간다. */
.forms-digest-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

.forms-digest-item:last-child {
  border-bottom: none;
}

.forms-digest-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}

.forms-digest-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* 출처 항목 링크 — 서식만 떼어 보면 작성 대상·시기를 놓치므로 원래 자리로 돌아갈 통로를
   같은 줄에 둔다. 다운로드(서식 이름)와 성격이 다르므로 옅은 색 + 화살표로 구분한다. */
.forms-digest-source {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-decoration: none;
}

.forms-digest-source::before {
  content: '↗ ';
}

.forms-digest-source:hover {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 700px) {
  /* 좁은 화면에서는 출처 링크를 오른쪽 끝으로 밀지 않는다 — 서식명이 접혀 두 줄이 되면
     오른쪽 끝에 혼자 떨어져 어느 줄의 출처인지 알기 어려워진다. */
  .forms-digest-source {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- 감사 지적사례 ---------- */
/* 섹션 자체(제목+구분선)는 항상 펼쳐진 상태고, 사례마다는 <details>/<summary> 아코디언 —
   제목 행(번호 배지+제목+연도·기관)만 보이다가 클릭하면 내용·개선방향·출처가 펼쳐진다.
   기본은 접힘. 사이트 전체의 파랑·회색 톤에 맞춰 경고색(주황)은 왼쪽 바에만 포인트로 쓴다. */

.audit-source-note {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 질의응답(faq)의 분류 소제목(2026-08~, renderFAQSection의 qa.category) — 문항이 많은 세부업무에서
   같은 분류끼리 묶어 보여준다. .audit-list의 flex 자식으로 들어가므로 목록 간격(gap:8px)을 그대로
   쓰고, 분류가 바뀌는 자리만 위쪽 여백을 더 줘서 덩어리가 나뉘어 보이게 한다(첫 소제목은 제외 —
   섹션 제목 바로 아래에 불필요한 여백이 생긴다). 크기·굵기는 섹션 제목(19px) 아래 티어인
   .overview-block-heading과 같은 값을 쓰되, 왼쪽 세로선으로 목록 항목과 구분한다. */
.faq-category-heading {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--sec-casebook);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--heading);
}

.faq-category-heading:first-child {
  margin-top: 0;
}

/* 항목 본문 안 질의응답 블록(2026-09-30~, js/detailView.js renderFaqBlock). 장(parent)은 위
   .faq-category-heading, 그 아래 절(category)은 한 단계 작은 .faq-subcategory-heading으로 찍는다.
   소제목이 .audit-list 밖(블록 바로 아래)에 놓이므로 위아래 여백을 여기서 준다. */
.faq-block .faq-category-heading {
  margin: 22px 0 8px;
}

.faq-block .tbl-acc-bar + .faq-category-heading {
  margin-top: 4px;
}

.faq-subcategory-heading {
  margin: 14px 0 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-muted);
}

.faq-block .tbl-acc-bar {
  margin-top: -6px;
}

/* 질문에 딸린 예시ㆍ보충 줄(원문에서 ☞ 답변 앞에 놓인 줄) — 답변과 섞이지 않게 옅은 상자로 뗀다. */
.faq-question-note {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 4px;
  padding: 8px 12px;
}

.faq-table-caption {
  margin: 6px 0 -4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
}

/* ---------- 질의응답 전용 페이지 진입점(2026-08~) ---------- */
/* 세부업무 카드 그리드의 마지막 칸에 그리드 아이템으로 들어간다. 칸 크기·모서리·그림자는
   .overview-card를 그대로 물려받아 그리드가 어긋나지 않고, 열 수가 줄어드는 좁은 화면에서도
   그냥 맨 끝 칸으로 따라간다. 세부업무 카드와의 구분은 세 가지로 준다 —
   (1) 파스텔 순환색(.home-tab-color-N) 대신 흰 패널, (2) 점선 테두리 + 왼쪽 색 강조선,
   (3) 번호 배지 대신 물음표 아이콘. */
.overview-card.faq-card {
  /* gap은 6px — 제목 한 줄 + 메타 한 줄 높이가 카드 min-height(92px) 안에 들어가야 같은
     줄의 세부업무 카드와 높이가 어긋나지 않는다. */
  gap: 6px;
  background: var(--panel-bg);
  /* 세부업무 카드가 흰 카드가 되면서(2026-08~) 면만으로는 구분이 약해졌다. 네 변 모두
     점선으로 두르고 왼쪽 색 막대는 주지 않는다 — 실선 막대는 세부업무 카드의 표시다. */
  border: 2px dashed var(--sec-casebook);
}

.overview-card.faq-card:hover {
  background: var(--sec-casebook-bg);
  border-color: var(--sec-casebook);
}

/* 번호 배지(.overview-card-badge, 반투명 흰 원) 자리를 대신하는 아이콘 배지. 파스텔 배경이
   아니라 흰 패널 위에 놓이므로 반투명 흰색 대신 casebook 색을 그대로 쓴다. */
.faq-card-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sec-casebook-bg);
  color: var(--sec-casebook);
}

.faq-card-badge svg {
  width: 15px;
  height: 15px;
}

/* "26문항 · 2022. 10. 기준" — 세부업무 카드의 기준일자 태그 자리에 해당한다. 본문
   (세부업무 기준일)과 다른 시점 자료라 카드 단계에서 반드시 보여야 하는 줄이다. */
.faq-card-meta {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sec-casebook);
}

.audit-item {
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn-border);
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
}

.audit-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
}

.audit-summary::-webkit-details-marker {
  display: none;
}

.audit-summary::before {
  content: '▸';
  color: var(--text-faint);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}

.audit-item[open] .audit-summary::before {
  content: '▾';
}

/* 감사 지적사례 번호 배지 — 회색이라 눈에 안 띄던 것을 포인트 노랑으로 강조(2026-08) */
.audit-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--point-bg);
  color: var(--point);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.audit-title {
  flex: 1;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
}

.audit-meta {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* 내용 영역은 카드 배경(연한 회색, --bg)을 그대로 이어받고, 개선 방향만 그보다
   더 연한 배경(--panel-bg, 흰색)으로 눈에 띄게 한다. */
.audit-body {
  padding: 0 16px 12px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-content {
  font-size: var(--fs-md);
  line-height: 1.7;
}

.audit-improvement {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--panel-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
}

.audit-improvement-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--sec-audit);
  margin-bottom: 3px;
}

.audit-item-source {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- 오류 화면 ---------- */

.fatal-error {
  max-width: 640px;
  margin: 40px auto;
  padding: 24px 28px;
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  border-radius: 6px;
}

.fatal-error h2 {
  margin-top: 0;
  font-size: var(--fs-xl);
  color: var(--danger);
}

.fatal-error pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 5px;
}

.fatal-error-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- 홈 화면 ---------- */

/* 폭은 바깥 .page-container가 정한다(예전에는 여기서 1040px로 한 번 더 좁혔고, 그래서
   업무분야 밑줄이 푸터보다 안쪽에 서 있었다). 섹션 사이 간격은 --section-gap 하나로 통일. */
.home-screen {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.home-hero {
  text-align: center;
  padding: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.home-hero-tagline {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.home-search-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
}

/* ---------- 검색 UI 공용 컴포넌트(2026-08~, 검색 개선 2단계) ----------
   js/searchUI.js의 mountSearch()가 홈 화면(.home-search-wrap 안, data-variant="inline")과
   헤더(#header-search-root, data-variant="header") 양쪽에 이 구조로 DOM을 만든다 — 입력창 하나,
   결과 패널 하나, 헤더 쪽만 좁은 화면에서 돋보기 토글 버튼이 하나 더 붙는다. */
.site-search-field {
  position: relative;
  width: 100%;
}

/* 입력창 왼쪽에 항상 떠 있는 돋보기 아이콘. 기본색·포커스색은 테마 변수가 아니라
   지정된 값을 그대로 쓴다(2026-08) — 사이트 전반의 --accent(#2f74c2)보다 옅은 회청색으로
   두다가, 포커스 시에만 진한 파랑으로 바뀌는 별도 배색이 요청됨. */
.site-search-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--text-muted);
  pointer-events: none;
}

.site-search-field:focus-within .site-search-field-icon {
  color: var(--accent);
}

.site-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  background: var(--panel-bg);
  color: var(--text);
}

.site-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* 홈 화면 검색창은 기존 .home-search-input과 같은 크기감(더 큼직하게)을 유지한다. 글자는 2026-10-13 한 칸 올림(--fs-lg). */
.site-search[data-variant="inline"] .site-search-input {
  padding: 14px 18px 14px 42px;
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-card);
}

.site-search[data-variant="inline"] .site-search-field-icon {
  left: 17px;
}

.site-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 440px;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  z-index: 30;
  text-align: left;
}

.site-search-group + .site-search-group {
  border-top: 1px solid var(--border);
}

.site-search-group-heading {
  margin: 0;
  padding: 8px 14px 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
}

.site-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.site-search-result:hover,
.site-search-result.is-active {
  background: var(--accent-bg);
}

.site-search-result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.site-search-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text);
}

.site-search-result-kind {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.site-search-result-title {
  display: block;
  font-size: var(--fs-md);
  color: var(--text);
}

.site-search-result-path {
  color: var(--text-muted);
  font-weight: 400;
}

.site-search-result-sep {
  color: var(--text-faint);
}

.site-search-result-label {
  font-weight: 600;
}

.site-search-result-snippet {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.site-search-result mark {
  background: var(--point-bg);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}

/* 결과 카드 맨 아랫줄 — 그 문구가 화면의 어느 절 안에 있는지("절 이름 › 절 이름").
   스니펫보다 한 단계 더 옅게 둬서 본문 미리보기와 섞이지 않게 한다. */
.site-search-result-section {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 한 항목에서 3곳까지만 결과로 내보내고 나머지를 묶는 줄(js/search.js의 PER_ITEM_MAX).
   결과 행이 아니라 그 아래 딸린 안내라 왼쪽으로 들여쓰고 글자를 옅게 둔다. */
.site-search-more {
  display: block;
  width: 100%;
  padding: 5px 14px 8px 32px;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
}

.site-search-more:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-search-empty,
.site-search-remainder {
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* ---------- 헤더 검색창(data-variant="header") ---------- */
.header-search-wrap {
  display: flex;
  align-items: center;
}

/* display:flex를 클래스로 걸어두면 UA 기본 [hidden]{display:none}보다 author 규칙이 우선돼
   hidden 속성이 무시된다 — 표지 화면에서 이 요소를 숨기는 데(main.js) hidden 속성을 쓰므로
   반드시 되살려야 한다. 아래 .site-search[data-variant="header"]도 같은 요소에 display:flex를
   걸므로(동률 specificity), id 선택자로 우선순위를 확실히 높인다. */
#header-search-root[hidden] {
  display: none;
}

.site-search[data-variant="header"] {
  position: relative;
  display: flex;
  align-items: center;
}

.site-search[data-variant="header"] .site-search-field {
  width: 240px;
}

.site-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.site-search-toggle svg {
  width: 20px;
  height: 20px;
}

.site-search-toggle:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

/* 좁은 화면에서는 입력창 대신 돋보기 아이콘만 두고, 누르면 입력창이 펼쳐진다(요청사항). */
@media (max-width: 640px) {
  .site-search[data-variant="header"] .site-search-toggle {
    display: inline-flex;
  }

  .site-search[data-variant="header"] .site-search-field {
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .site-search[data-variant="header"].is-expanded .site-search-field {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(80vw, 280px);
    opacity: 1;
    pointer-events: auto;
    z-index: 40;
  }
}

/* 검색 결과를 눌러 들어왔을 때 그 문구 자리(js/searchHighlight.js가 텍스트 노드만 감싼
   <mark class="search-hit">)를 표시한다. 여백(padding/margin)을 절대 주지 않는다 — 폭이
   조금이라도 늘면 강조 때문에 줄바꿈 위치가 바뀌어 본문이 흔들린다. 테두리도 쓰지 않고
   배경만 깐다(글자색은 그대로 물려받는다). */
mark.search-hit {
  background: var(--search-hit-bg);
  color: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 2px;
}

/* 딥링크·검색 결과·목차 클릭으로 특정 블록에 막 도착했을 때 2초간 배경을 살짝 켰다가
   페이드아웃한다(어디로 왔는지 눈에 띄게, js/main.js의 flashBlockHighlight). */
@keyframes block-arrival-flash {
  0% { background-color: var(--accent-bg); }
  65% { background-color: var(--accent-bg); }
  100% { background-color: transparent; }
}

.block-arrival-highlight {
  animation: block-arrival-flash 2s ease-out;
  border-radius: 8px;
}

.home-section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--accent);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--heading);
}

.home-section-heading-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.home-section-heading-icon svg {
  width: 100%;
  height: 100%;
}

/* 업무분야를 격자 카드로 배치(경기도교육청 홈페이지 안내 카드 스타일 참고).
   카드가 전체적으로 커 보인다는 피드백으로 높이·여백·폰트·아이콘·간격을 한 단계씩
   줄였다(2026-08). 분야가 열 개가 되면서 잠깐 5열로 바꿨다가(2026-09-17), 마지막 한 칸을
   감사사례 띠와 나란히 놓는 아래 .home-tabs-bottom 줄이 생기면서 3×3으로 되돌렸다. */
.home-tabs {
  display: grid;
  /* minmax(0, 1fr): 칸 내용(감사사례 설명처럼 줄바꿈 없는 글)이 길어도 세 칸 폭이 똑같게(2026-10-13 — 1fr만 쓰면
     내용 최소폭만큼 칸이 늘어나 마지막 줄이 위 격자와 어긋났음) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2); /* 12px → 8px */
}

/* 격자 마지막 줄(2026-09-17): 왼쪽 1/3에 분야 카드 하나(categories.json의 homeBottomRow),
   오른쪽 2/3에 감사사례 띠. 위 3×3 격자와 같은 간격을 써서 한 덩어리로 보이게 한다. */
.home-tabs-bottom {
  display: grid;
  align-items: stretch;
  /* 2026-09-17: 업무QUIZ 카드가 세 번째 칸으로 들어오며 1:2 → 1:1:1. 칸 높이는 격자 stretch로 같다. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* 이 줄 안에서는 감사사례 띠가 격자 칸이라 자기 윗여백을 쓰지 않는다. */
.home-tabs-bottom .home-audit-row {
  margin-top: 0;
}

/* ---------- 업무QUIZ 카드(홈 마지막 줄 세 번째 칸, js/homeView.js buildQuizCard — 2026-09-17~) ----------
   분야 카드와 같은 흰 카드(.home-tab, 왼쪽 띠는 사이트 강조색)인데 안은 세로 배치: 과녁 아이콘이 위에 크게,
   그 아래 제목(부제 없음, 아이콘은 svg 과녁). 카드에 마우스를 올리면 아이콘이 통통 튀고
   (bounce), 오른쪽 위 「30Q」 배지는 늘 살짝 커졌다 작아진다(pulse) — 둘 다 CSS만, 움직임 줄이기 설정이면 끔. */
.home-tab-link {
  text-decoration: none;
}

/* 업무퀴즈 카드(2026-10-13~) — 분야 카드와 같은 배치(왼쪽 제목 + 오른쪽 아래 3D 아이콘). 강조색만 accent.
   이전의 세로 배치ㆍQUIZ! 배지 그림(.quiz-card-img)은 3D 아이콘으로 바꾸면서 지웠다. hover 바운스는 아이콘에 옮김. */
.home-tab.home-tab-quiz {
  --card-base: var(--accent);
}

.home-tab-quiz:hover .icon-3d {
  animation: quiz-bounce 0.4s ease infinite;
}

.home-tab-quiz-badge {
  position: absolute;
  top: 10px;
  right: 64px; /* 오른쪽 아래 3D 아이콘(48px)과 겹치지 않게 그 왼쪽에 */
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  animation: quiz-pulse 1.5s ease infinite;
}

@keyframes quiz-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes quiz-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-tab-quiz:hover .icon-3d,
  .home-tab-quiz-badge {
    animation: none;
  }
}

.home-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 80px; /* 124px → 80px */
  padding: var(--space-3); /* 20px → 12px */
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.home-tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(31, 36, 48, 0.14);
}

.home-tab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 모든 카드가 같은 크기를 쓴다 — 제목 길이로 폰트를 줄이지 않는다. 길면(예: "산업안전 및
   중대재해 예방") word-break: keep-all로 낱말 단위로만 두 줄로 넘기고, 그리드의 기본
   align-items: stretch가 같은 줄의 카드 높이를 자동으로 맞춰준다(.home-tabs 참고). */
.home-tab-title {
  /* 20px → 16px(2026-08) → --fs-md(2026-09~). 값 자체는 16px에서 17px로 한 단계 올라가는
     것뿐이지만, 하드코딩을 토큰으로 바꿔야 글자 크기 단추(fs-l/fs-xl)에 홈 카드도 따라온다. */
  font-size: var(--fs-lg); /* 2026-10-13 --fs-md → --fs-lg(16px): 3D 아이콘에 비해 카드 이름이 약해 보여 한 칸 올림 */
  font-weight: 700;
  color: var(--text);
  word-break: keep-all;
}

/* 지금은 화면에서 숨겨둔 상태 — 데이터·마크업은 그대로 두고 CSS로만 감췄다.
   다시 보여주려면 이 display:none만 지우면 된다. */
.home-tab-subtitle {
  display: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 배경이 파스텔에서 한 단계 진해지면서(2026-08~) --text-muted 아이콘이 최저 3.21:1까지
   내려가 묻혔다. 같은 hue의 진한 톤을 쓰면 4.55:1 이상이 되고 카드 색과도 한 계열로 읽힌다. */
.home-tab-icon {
  flex-shrink: 0;
  align-self: flex-end;
  width: 24px; /* 30px → 24px */
  height: 24px;
  color: var(--card-base, var(--field-base-1));
}

.home-tab-icon svg {
  width: 100%;
  height: 100%;
}

/* 3D 아이콘 그림(2026-10-13~, js/utils.js icon3d) — 선 아이콘보다 한 단계 크게 두되 카드 높이는 그대로
   (아래쪽 여백을 음수로 당겨 카드 오른쪽 아래 모서리에 걸쳐 앉힘). */
.home-tab-icon:has(.icon-3d) {
  width: 48px;
  height: 48px;
  margin: -18px -6px -8px 0;
}
.icon-3d {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-section-heading-icon:has(.icon-3d) {
  width: 30px;
  height: 30px;
}
.home-audit-aside-icon:has(.icon-3d) {
  width: 36px;
  height: 36px;
}

/* 색 클래스는 hue만 정한다(2026-08~). 배경을 직접 칠하지 않으므로 같은 클래스를 홈 카드와
   세부업무 카드가 함께 써도 층마다 다른 톤이 나온다 — 홈은 --card-deep 색면, 세부업무는
   흰 카드 + 기준색 왼쪽 막대. 값은 :root의 --field-base-1~9 참고. */
.home-tab-color-1 { --card-base: var(--field-base-1); }
.home-tab-color-2 { --card-base: var(--field-base-2); }
.home-tab-color-3 { --card-base: var(--field-base-3); }
.home-tab-color-4 { --card-base: var(--field-base-4); }
.home-tab-color-5 { --card-base: var(--field-base-5); }
.home-tab-color-6 { --card-base: var(--field-base-6); }
.home-tab-color-7 { --card-base: var(--field-base-7); }
.home-tab-color-8 { --card-base: var(--field-base-8); }
.home-tab-color-9 { --card-base: var(--field-base-9); }
.home-tab-color-10 { --card-base: var(--field-base-10); }
.home-tab-color-11 { --card-base: var(--field-base-11); }
.home-tab-color-12 { --card-base: var(--field-base-12); }

/* 홈 업무분야 카드(2026-09~) — 바탕은 기준색 18%, 테두리는 30%를 흰색에 섞은 값.
   예전에는 파스텔(soft)에서 진한 톤(deep) 쪽으로 --card-home-mix만큼 간 색면이었는데,
   색상각만 공유하는 방식이라 색마다 진하기가 달라 나란히 놓으면 들쭉날쭉했다. */
/* 2026-09-13(첫화면-실무형 시안): 색면 대신 흰 바탕 + 왼쪽 기준색 띠 4px. */
.home-tab {
  --card-base-color: var(--card-base, var(--field-base-1));
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--card-base-color);
}

.home-tab:hover {
  border-color: var(--card-base-color);
  border-left-width: 4px;
}

/* 카드는 더 이상 탭이 아니라 바로 이동하는 링크라 선택 상태 표시는 없다. */

/* "이달의 업무 일정" 자리만 잡아둔 상태 — 기능은 아직 없다. */
/* ---------- 홈 화면 레이아웃 개편(2026-10-13~) ----------
   업무분야 10개를 한 격자(넓은 화면 5열 × 2줄, 좁으면 자동으로 줄어듦)에, 카드 안은 아이콘(왼쪽 위) → 제목 → 한 줄 설명.
   감사사례ㆍ업무퀴즈는 격자 아래 별도 줄(.home-extras). 위쪽 규칙(.home-tab 가로 배치ㆍ3열 격자)을 여기서 덮는다. */
.home-tabs {
  /* 2026-10-13~: 분야가 12개(학교회계 지출ㆍ지방공무원 인사 추가)가 되어 넓은 화면 6열 × 2줄로 고정.
     좁아지면 4열 × 3줄 → 3열 × 4줄 → 2열(아래 480px)로 — 12의 약수라 어느 폭에서도 마지막 줄이 비지 않는다. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .home-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 아주 좁은 화면(휴대전화, 약 390px)은 190px 기준이면 1열이 되어 카드 10장이 길게 늘어선다 — 2열로 */
@media (max-width: 480px) {
  .home-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.home-tabs .home-tab {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.home-tabs .home-tab-icon,
.home-tabs .home-tab-icon:has(.icon-3d) {
  align-self: flex-start;
  width: 44px;
  height: 44px;
  margin: 0;
}

.home-tab-desc {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.4;
  word-break: keep-all;
}

/* 감사사례(넓게) + 업무퀴즈(좁게) 한 줄 — 높이는 stretch로 같다 */
.home-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin-top: 14px;
}

.home-extras > .home-audit-aside {
  flex: 2 1 380px;
  margin-top: 0;
}

.home-extras > .home-tab-quiz {
  flex: 1 1 200px;
  min-height: 0;
}

/* 검색창 아래 키워드 칩ㆍ통계 줄 */
.home-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.home-keywords-label {
  margin-right: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.home-keyword-chip {
  padding: 3px 12px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.home-keyword-chip:hover {
  background: var(--accent-bg);
}

.home-keyword-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-stats {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 세로 간격을 기존의 약 65%로(히어로 16 → 10px, 홈 절 사이 40 → 26px) */
.home-hero {
  gap: 10px;
}

.home-screen {
  gap: 26px;
}

/* 흩날리는 낙엽(계절 배경 파티클, js/seasonBackground.js)은 홈에서 보이지 않게 — 업무목록에서만 깔리므로 사실상 전부 꺼짐 */
body[data-screen="list"] .season-layer {
  display: none;
}

/* 법령 조회: 자료 종류 단추ㆍ입력칸ㆍ찾기를 한 줄로(좁으면 줄바꿈). 상태ㆍ결과는 그 아래 한 줄 전체. */
.home-law-section .law-viewer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.home-law-section .law-viewer > * {
  flex-basis: 100%;
}

.home-law-section .law-viewer > .law-target-bar {
  flex-basis: auto;
  margin-bottom: 0;
}

.home-law-section .law-viewer > .law-search {
  flex: 1 1 360px;
}

.law-status:empty {
  display: none;
}

.home-schedule-placeholder {
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-md);
}

.home-schedule-placeholder p {
  margin: 0;
}

/* "자주 찾는 사이트" — 화살표로만 넘기는 가로 캐러셀(자동 슬라이드 없음). 화면 폭에 따라
   한 번에 보이는 카드 수가 자연히 달라지므로 별도 계산 없이 CSS만으로 처리된다.
   화살표는 트랙과 충분히 떨어뜨려 카드와 겹쳐 보이지 않게 한다. */
.home-links-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 카드를 트랙 폭에 균등 분배한다(grid-auto-columns: 1fr). 최소 폭(140px)은 가장 긴 이름
   ("공직자통합메일"·"행정정보공동이용")이 한 줄로 들어가는 값이라, 카드 수가 많아 다 못
   들어가는 폭에서는 최소 폭을 유지한 채 예전처럼 가로 스크롤(화살표)로 넘어간다. */
.home-links-track {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: var(--space-3);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

/* "동작 줄이기"를 켜 사람은 자동 넘김 자체를 멈추고(js/homeView.js의 startAutoplay가
   matchMedia로 같은 설정을 읽어 타이머를 아예 안 건다), 화살표로 직접 넘길 때도 미끄럼
   애니메이션 없이 바로 넘어가게 한다. 넘기는 기능 자체는 그대로 살아 있다. */
@media (prefers-reduced-motion: reduce) {
  .home-links-track {
    scroll-behavior: auto;
  }
}

.home-links-track::-webkit-scrollbar {
  display: none;
}

/* 사각 카드 대신 원형 아이콘 + 아래 이름. 카드 폭은 가장 긴 이름("교육시설통합시스템",
   13.5px 기준 약 122px)이 한 줄로 들어가도록 여유 있게 잡았다. */
.home-link-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  color: var(--text);
  text-align: center;
}

.home-link-card.is-disabled {
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

.home-link-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.home-link-card:hover .home-link-icon {
  background: var(--accent);
  color: #fff;
}

.home-link-card.is-disabled .home-link-icon {
  background: var(--bg);
  color: var(--text-faint);
}

.home-link-icon svg {
  width: 26px;
  height: 26px;
}

/* 파비콘 <img>도 기존 SVG 아이콘과 같은 크기로 맞춰서, 파비콘이든 폴백 SVG든
   카드 정렬·원 크기가 달라지지 않게 한다. */
.home-link-favicon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* 로고 파일도 파비콘도 없는 사이트의 글자 로고(data/home-quick-links.json의 textLogo 필드,
   2026-09~ — eVPN이 첫 사례). 이미지가 아니라 글자라 깨진 그림이 뜰 수 없다. 원 배경은
   다른 선 아이콘 카드와 똑같이 .home-link-icon의 옅은 파랑(--accent-bg)을 그대로 쓰고,
   hover에서 원이 진한 파랑으로 바뀔 때 글자도 같이 흰색이 된다(color: inherit).
   56px 원 안에서 네 글자가 넘치지 않도록 자간을 좁히고 줄바꿈을 막는다. */
.home-link-text-logo {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

/* 저장소에 직접 넣어 둔 사이트 로고(assets/logos/, data/home-quick-links.json의 logo 필드,
   2026-08~). 파비콘(26px)보다 크게 40px로 그린다 — 로고 안에 글자가 들어 있는 경우
   (KEIIS 워드마크, 경찰청 엠블럼의 영문 링) 26px에서는 글자가 뭉개진다. 56px 원 안에
   40px이면 위아래로 8px씩 남아 원 밖으로 삐져나오지 않는다. object-fit: contain이라
   가로로 긴 워드마크는 폭 40px에 맞춰 세로가 줄어든다(찌그러지지 않음). */
.home-link-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* 로고는 투명 배경 원본이라 다른 카드처럼 파란 배경(--accent-bg)을 깔면 로고 색이 배경과
   섞여 탁해지고, hover에서 배경이 진한 파랑(--accent)으로 바뀌면 로고가 아예 묻힌다.
   그래서 로고 카드만 흰 바탕 + 옅은 테두리로 두고, hover에서는 배경 대신 테두리 색만
   바꾼다(다른 카드의 hover와 같은 "반응한다"는 신호는 유지). */
.home-link-icon.has-logo {
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.home-link-card:hover .home-link-icon.has-logo {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

/* 카드 폭을 이름 길이에 맞춰 넉넉히 잡아서 전부 한 줄로 나오게 하고, 혹시 모를
   경우를 대비해 말줄임만 안전장치로 남겨둔다. */
.home-link-name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

/* 카드 이름 아래 한 줄 안내(data/home-quick-links.json의 note 필드, 2026-09~).
   이름(.home-link-name)과 달리 말줄임 대신 두 줄까지 접히게 두고 낱말 단위로만 끊는다
   (word-break: keep-all) — 카드 폭이 좁아도 "사무실 밖에서는 / eVPN 먼저"로 갈릴 뿐
   글자가 잘리지 않는다. 같은 줄의 카드는 그리드가 높이를 맞춰 주므로 이 한 줄 때문에
   카드 모양이 어긋나지 않는다. */
.home-link-note {
  width: 100%;
  margin-top: -2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-muted);
  word-break: keep-all;
  /* 두 줄로 갈릴 때 "사무실 밖에서는 eVPN / 먼저"처럼 마지막 줄에 한 낱말만 남지 않도록
     줄 길이를 고르게 나눈다. 지원하지 않는 브라우저는 이 선언을 무시하고 평범하게 접는다. */
  text-wrap: balance;
}

/* 캐러셀 아래 접속 순서 안내(2026-09~). 카드가 아니라 목록 전체에 딸린 설명이라 화살표
   자리만큼 들여쓰지 않고 왼쪽 끝에 맞춘다. 좁은 화면에서 넘치지 않도록 낱말 단위로만
   줄을 바꾼다. */
.home-links-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  word-break: keep-all;
}

.home-links-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}

.home-links-arrow svg {
  width: 16px;
  height: 16px;
}

.home-links-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.home-links-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 900px) {

  /* 2열로 좁아지면 1:2 비율이 어색해져 마지막 줄도 위 격자와 같은 2열로 맞춘다. */
  .home-tabs-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-hero {
    padding: var(--space-4) 0 var(--space-2);
  }

  .home-tabs-bottom {
    grid-template-columns: 1fr;
  }
}

/* ---------- C안 롤아웃(2026-08): 우측 보조 목차 + 본문 폭 제한 ----------
   파일 맨 뒤에 두는 이유: .overview-toggle-summary/.data-table 등 앞쪽에 이미 정의된 규칙과
   같은 선택자(동일 우선순위)를 다시 쓰는 곳이 많아서, 뒤에 와야 그 규칙들을 덮어쓴다.
   #content-slot은 render*() 함수들이 실제로 채우는 대상, #toc-rail(우측)은 그 형제로
   #detail 안에 항상 떠 있다가 내용이 있을 때만 보인다(상단 pill 목차는 세부업무 섹션과
   중복이라 2026-08에 제거했다). #layout[data-mode="detail"]는 표지·업무목록·분야/세부업무/
   항목 화면이 전부 공유하는 유일한 레이아웃 모드다(2026-08~ 표지+업무목록 개편 전에는
   홈 화면 전용 data-mode="home"이 따로 있었지만, 그 전용 장식 패널(#home-cover)을 없애면서
   레이아웃 모드도 하나로 합쳤다). 되돌리려면: #sidebar{display:none} 규칙과 이 섹션 전체를
   지우면 이전 사이드바 레이아웃으로 복귀한다(HTML/JS의 사이드바 관련 코드는 그대로 남아 있다). */

/* 기존 --accent-bg/--border를 흰색과 섞어 "한 단계 밝게" 만든 파생 토큰. 원본 값은
   그대로 두고 새 이름으로 파생해 자기 자신을 참조하는 순환 없이 재사용한다.
   --accent-bg #e8f2fc → 약 #f2f8fd, --border #dde7f3 → 약 #ecf2f8
   (바탕색은 파생을 그만두고 :root의 --page-bg 한 곳에서 정한다, 2026-08~) */
#layout[data-mode="detail"] {
  --c-accent-bg-light: color-mix(in srgb, var(--accent-bg) 55%, #fff 45%);
  --c-border-light: color-mix(in srgb, var(--border) 55%, #fff 45%);
}

#layout[data-mode="detail"] #detail {
  background: var(--paper);
}

/* 폭·가운데 정렬은 .content-columns에 함께 붙은 .page-container가 담당한다(2026-08~).
   예전에는 여기서 1190px, #content-slot에서 960px을 따로 잡아 본문이 푸터보다 214px 좁았다. */
.content-columns {
  display: flex;
  align-items: flex-start;
  gap: var(--rail-gap);
}

/* 본문은 컨테이너 폭을 그대로 쓰고, 목차 레일이 실제로 붙는 화면에서만 그만큼 줄어든다 —
   레일이 hidden이면(업무목록·목차가 없는 화면, 그리고 [hidden]{display:none!important})
   flex 자리 자체가 사라지므로 예약도 함께 사라진다. 어느 경우든 본문 왼쪽 끝은 컨테이너
   왼쪽 기준선에 그대로 선다. 목차는 항목 화면뿐 아니라 도메인 개요·세부업무 화면에서도
   내용이 길면 뜨므로(js/main.js의 updateTocRail), 화면 종류가 아니라 "레일이 실제로
   보이는가"를 기준으로 삼는다. */
#content-slot {
  flex: 1;
  min-width: 0;
}

/* 목차가 길면 레일 안에서만 스크롤한다(2026-08~) — 예전에는 레일이 화면보다 길어져
   목차를 보려고 본문을 같이 내려야 했다. 강조된 줄이 레일 밖으로 나가면 js/main.js의
   updateActiveTocLink가 레일 안에서만 따라 움직인다. */
.toc-rail {
  width: var(--rail-w);
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 전체 화면 공통 하단 푸터(2026-08~) — #detail은 render*() 함수가 건드리지 않는 정적 영역이라
   route가 바뀌어도 지워지지 않는다. #detail 자체가 스크롤 컨테이너라 본문을 끝까지 내려야
   보이는 일반적인 페이지 푸터로 동작한다. */
/* 3단 푸터(2026-08~): 표지 화면을 없애면서 표지 하단에 있던 "기준 자료"·"최근 업데이트"를
   여기로 옮겼다(1단은 연구회 소개). 본문(.content-columns)과 같은 최대 폭으로 가운데 정렬해
   본문 왼쪽 끝과 줄을 맞춘다. 글자 크기·색은 기존 푸터 톤(11~13px, --text-muted/--text-faint)을
   그대로 유지해 본문보다 뒤로 물러나 보이게 한다. */
/* 폭·가운데 정렬은 함께 붙은 .page-container가 담당한다. */
/* 좌우 padding은 .page-container 몫이므로 위아래만 지정한다(padding 단축 속성을 쓰면
   같은 우선순위인 .page-container의 좌우 값을 덮어써서 푸터만 기준선이 어긋난다).
   구분선은 .site-footer가 아니라 안쪽 그리드에 그린다 — 바깥에 그리면 컨테이너 좌우
   padding(24px)까지 선이 뻗어 나가 헤더 로고·본문 제목의 기준선보다 넓어 보인다. */
.site-footer {
  margin-top: var(--section-gap);
}

/* 각 단은 내용 폭(auto)만 차지하고 남는 공간을 사이에 고르게 나눈다(space-between) —
   1단은 컨테이너 왼쪽 기준선, 3단은 오른쪽 기준선에 닿는다. 균등 3분할(1fr)로 두면 내용이
   짧은 2·3단 뒤로 빈 자리가 크게 남아 오른쪽이 비어 보였다. */
.site-footer-grid {
  padding: 30px 0 34px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}

/* 자료가 없어 js/footerView.js가 통째로 숨긴 칸(hidden)이 그리드 자리를 차지하지 않게 한다. */
.site-footer-col[hidden] {
  display: none;
}

.site-footer-org {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
}

.site-footer-desc {
  margin: 6px 0 0;
  max-width: 24em;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-faint);
}

.site-footer-heading {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
}

.site-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-footer-item {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-faint);
}

/* 최근 업데이트는 이름/날짜 두 열 그리드로 세운다. 열 폭 전체로 양끝 정렬(space-between)을
   하면 도메인명과 날짜 사이가 휑하게 벌어지므로, 가장 긴 이름(max-content) 바로 뒤에서
   날짜 열이 시작하게 해 세 줄의 날짜 시작점만 세로로 맞춘다. <li>는 display:contents로
   두 칸을 그리드에 직접 넘긴다. 줄 간격(row-gap)은 기준 자료 목록(gap:5px)과 같은 값이라
   2단·3단의 줄이 나란히 보인다. */
.site-footer-list-updates {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 38px;
  row-gap: 5px;
}

.site-footer-recent {
  display: contents;
}

.site-footer-link,
.site-footer-date {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-faint);
}

/* 날짜 숫자 폭을 고정해 세 줄이 정확히 겹쳐 보이게 한다. */
.site-footer-date {
  font-variant-numeric: tabular-nums;
}

.site-footer-link {
  text-decoration: none;
}

.site-footer-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* 좁은 화면에서는 3단을 세로로 쌓는다. 최근 업데이트는 max-content 두 열이라 폭이
   좁아져도 이름과 날짜가 붙어 있는 모양 그대로 유지된다. */
@media (max-width: 720px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: var(--space-5);
  }
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid var(--border);
}

/* 큰 섹션 아래 소제목 묶음 — 기본 접힘, 지금 읽는 섹션만 .is-open으로 펼친다.
   높이 애니메이션 대신 display 전환을 쓴다: 목차 줄이 스르륵 늘었다 줄었다 하면
   눈이 더 피로하고, 레일이 sticky라 본문 레이아웃은 어차피 흔들리지 않는다. */
.toc-group-children {
  display: none;
  flex-direction: column;
  gap: 0;
}

.toc-group-children.is-open {
  display: flex;
}

/* 글자 크기(--fs-sm, 13.5px)·색은 그대로 두고 간격만 조정한다(2026-09~). 항목 사이 여백은
   .toc-list/.toc-group-children의 flex gap이 아니라 이 padding 하나로만 낸다(둘 다 쓰면
   간격이 이중으로 벌어짐) — 위아래 5px씩, 두 줄 이상인 항목은 line-height 1.45가 줄 사이를
   낸다(이전엔 3px/1.3으로 더 좁았으나 두 줄짜리 항목에서 줄 사이와 항목 사이 간격이 비슷해
   경계가 잘 안 보여서 넓혔다). */
.toc-link {
  padding: 5px 0 5px 14px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--toc-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.toc-link:hover {
  color: var(--toc-text-active);
}

/* 지금 보고 있는 줄. 색만 바뀌면 섹션 줄(.toc-link-section)도 이미 굵어서 어느 줄인지
   구분이 안 됐다 — 섹션 줄을 600으로 내리고 현재 줄만 700으로 두어 본문(400)→섹션(600)
   →현재(700) 세 단계로 나누었다. 왼쪽 세로선은 그대로 둔다. */
.toc-link.active {
  color: var(--toc-text-active);
  border-left-color: var(--toc-text-active);
  font-weight: 700;
}

/* 항목 상세 목차 전용 수식자(2026-08~) — section(2단, h2) 제목은 굵게, section 안쪽
   (.block-section-body 하위) 제목은 한 단계 들여쓴다. js/main.js의 updateTocRail이 DOM
   구조(태그명·closest)로만 판정해서 붙인다. */
.toc-link-section {
  font-weight: 600;
  color: var(--toc-text);
}

.toc-link-section.active {
  color: var(--toc-text-active);
}

.toc-link-nested {
  padding-left: 26px;
}

/* 좁은 화면(≤1200px, 아래 미디어쿼리)에서 .toc-rail 대신 보여주는 접힘 목차(2026-08~) —
   항목 제목(.detail-header) 바로 아래 삽입된다(js/main.js). 네이티브 <details>라 별도
   토글 스크립트가 없다 — 다른 접힘 요소와 같은 관례(CLAUDE.md "토글 사용 기준"). 데스크톱
   폭에서는 기본적으로 숨겨두고, 미디어쿼리에서 .toc-rail과 반대로 뒤집는다. */
.toc-mobile {
  display: none;
  margin: 12px 0 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 14px;
  background: var(--panel-bg);
}

.toc-mobile-summary {
  padding: 8px 0;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.toc-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 10px;
  border-top: 1px solid var(--border);
}

.toc-mobile-list .toc-link {
  border-left: none;
  margin-left: 0;
}

/* 일반 표(procedureTable/item.tables/blocks 표 — .data-table-wrap으로 감싼 것만) 카드형
   리디자인(2026-08~). 세로 구분선을 없애고 얇은 테두리 + 그림자로 감싼 카드 형태로 바꾼다.
   .procedure-table(아코디언형 업무절차 표, renderProceduresTable)은 .data-table-wrap 밖에
   그려지므로(js/detailView.js) 이 선택자에 걸리지 않는다 — 그 표의 기존 모양(전체 격자 +
   --border-strong 헤더)은 아래 .procedure-table 전용 규칙으로 그대로 보존한다. */
.data-table-wrap {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* 세로 구분선 복원(2026-09~) — 2026-08 카드형 리디자인에서 세로선을 전부 없앴더니
   "구분ㆍ값"이 두 쌍 들어간 4열 표에서 어느 값이 어느 구분에 붙는지 읽을 수 없었다.
   가로·세로 모두 같은 굵기·색으로 격자를 되살린다. 오른쪽 끝 열은 아래에서 따로 지운다
   (카드 바깥 테두리와 두 겹으로 겹치지 않게). */
.data-table-wrap .data-table th,
.data-table-wrap .data-table td {
  border: none;
  border-bottom: 1px solid var(--table-border);
  border-right: 1px solid var(--table-border);
  /* 11px 14px → 8px 12px(2026-09~) — 본문 표 여백을 통일한다. 본문 표는 전부
     이 래퍼 안에 들어 있어 여기가 실제로 적용되는 자리다 — 기본 규칙(.data-table)의
     4px 10px만 고쳐서는 화면이 바뀌지 않는다. 위 border 세 줄은 세로 구분선 규칙이므로
     건드리지 않는다. */
  padding: 8px 12px;
}

/* 마지막 열의 오른쪽 선은 .data-table-wrap의 바깥 테두리가 대신한다 — 두 겹 방지.
   colspan으로 마지막 칸이 여러 열을 덮는 행에서도 그 칸이 :last-child라 함께 걸린다. */
.data-table-wrap .data-table th:last-child,
.data-table-wrap .data-table td:last-child {
  border-right: none;
}

.data-table-wrap .data-table th {
  background: var(--accent-bg);
  color: var(--accent-hover);
  font-weight: 600;
  border-bottom-color: var(--table-border-header);
  /* 본문 셀은 vertical-align:top이지만 머리글은 한 줄짜리가 대부분이라
     두 줄짜리 머리글 옆칸과 높이가 맞게 가운데 정렬한다(2026-09~). */
  vertical-align: middle;
}

.data-table-wrap .data-table td:first-child {
  font-weight: 600;
}

/* 표 셀 링크(renderDataTable의 cell.href, 2026-09~) — 셀 글자(기관명 등)를 새 탭으로 여는
   링크. 원문 URL이 그대로 셀에 박혀 linkifyCellText가 만드는 링크와 같은 색·밑줄 규칙을
   쓰되, 링크임을 알 수 있게 밑줄은 항상 둔다. */
.data-table td a.cell-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-table td a.cell-link:hover,
.data-table td a.cell-link:focus-visible {
  color: var(--accent-hover);
}

/* 링크 아래 한 줄로 붙는 주소 글자(cell.showHref, 2026-09~) — 링크가 아니라 읽고 직접 칠 수
   있게 두는 값이라 옅은 회색·작은 글씨로만 두고 밑줄·색을 주지 않는다. */
.data-table td .cell-link-url {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-faint);
  word-break: break-all;
}

/* 표 셀 꼬리표(renderDataTable의 cell.badge, 2026-09~) — 행 이름 아래에 줄을 바꿔 붙는 작은
   구분 표시. 계약 "기준금액 유형별 적용업무"의 총공사금액 두 행(부가세 제외/포함)처럼 행
   이름은 원문 그대로 두어야 하지만 둘을 구별해줘야 할 때만 쓴다. 색은 tone별 클래스로만
   지정하고, 첫 열의 굵은 글씨(td:first-child)를 물려받지 않도록 font-weight를 되돌린다. */
.cell-badge-line {
  display: block;
  margin-top: 4px;
}

.cell-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.cell-badge-vat-excluded {
  background: var(--accent-bg);
  color: var(--text-muted);
}

.cell-badge-vat-included {
  background: #fdeadb;
  color: #a2621f;
}

/* 무료 교육기관 표시(산업안전 4 교육기관 표, 2026-09~). */
.cell-badge-free {
  background: var(--accent-bg);
  color: var(--accent-hover);
}

/* badge.inline — 줄바꿈 없이 셀 글자 옆에 붙는 꼬리표(renderDataTable, 2026-09~). */
.cell-badge-inline {
  margin-left: 6px;
  vertical-align: 1px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* hideHeader:true인 정의 표(라벨/내용, renderDataTable — 2026-09~) — 머리글 행이 없으니
   첫 열(라벨)을 표 머리글과 같은 배경·글자색으로 보여줘 라벨 열임을 드러낸다. 좁은 화면에서
   라벨이 줄바꿈되면 위 아래 정렬이 어색해지므로 세로 정렬을 위쪽으로 고정한다. */
.data-table-wrap .data-table-def td:first-child {
  background: var(--accent-bg);
  color: var(--accent-hover);
  font-weight: 600;
  vertical-align: top;
}

/* narrowColumns를 안 쓴 정의 표의 라벨 열 폭 고정(2026-09~) — 라벨이 4자를 넘어 narrowColumns를
   못 쓰는 경우(예: 일상감사 사례의 "관련 법규 및 참고 사항", 11자), col-narrow의 nowrap 대신
   폭을 고정해 두 줄 안에서 접히게 한다. narrowColumns를 쓴 표(.col-narrow, 짧은 라벨이 한
   줄로 붙는 게 목적)는 그대로 두도록 :not(.col-narrow)로 범위를 좁혔다. */
.data-table-wrap .data-table-def td:first-child:not(.col-narrow) {
  width: 112px;
  min-width: 112px;
}

/* 정의 표 "내용" 칸의 목록(renderCellDefinitionList) — item.notes의 4단 색상 체계와는
   별개인, 표 셀 전용의 얕은(2단) 목록이다. */
.table-cell-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.table-cell-list > li {
  position: relative;
  padding-left: 14px;
}

.table-cell-list > li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--text-muted);
}

.table-cell-list-group {
  padding-left: 0 !important;
}

.table-cell-list-group::before {
  content: none !important;
}

.table-cell-list-label {
  font-weight: 600;
  color: var(--text);
}

.table-cell-sublist {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.table-cell-sublist li {
  position: relative;
  padding-left: 14px;
  color: var(--text-muted);
}

.table-cell-sublist li::before {
  content: '-';
  position: absolute;
  left: 2px;
}

/* 좁은 화면(모바일)에서는 표가 가로 스크롤(.table-scroll)되더라도 라벨 열이 좁게 고정돼
   있으면 내용 칸과 함께 눌려 보일 수 있다 — 정의 표만 라벨을 셀 위쪽에 작은 캡션처럼 두고
   내용은 그 아래 한 줄로 흐르게 해서 가로 폭 압박을 없앤다(2026-09~). */
@media (max-width: 640px) {
  .data-table-wrap .data-table-def {
    display: block;
  }

  .data-table-wrap .data-table-def tbody {
    display: block;
  }

  .data-table-wrap .data-table-def tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .data-table-wrap .data-table-def tr:last-child {
    border-bottom: none;
  }

  .data-table-wrap .data-table-def td {
    display: block;
    border: none !important;
    padding: 2px 14px !important;
  }

  .data-table-wrap .data-table-def td:first-child {
    background: none;
    font-size: var(--fs-sm);
    color: var(--accent-hover);
  }
}

/* 2026-08에는 세로선을 전부 없앤 뒤 첫 열에만 되살리는 규칙을 여기 뒀었다. 2026-09~
   모든 열에 세로선을 넣으면서(위 .data-table-wrap .data-table th/td) 첫 열도 그 규칙에
   포함되어 이 예외가 필요 없어졌다 — 같은 색을 두 번 선언하면 나중에 색을 바꿀 때 한쪽만
   고치는 사고가 나므로 규칙 자체를 지웠다. */

.data-table-wrap .data-table tbody tr:last-child td {
  border-bottom: none;
}

/* .procedure-table은 위 카드 리디자인 대상이 아니므로, 지금까지 bare .data-table 선택자로
   받던 헤더 배경·테두리 색을 여기로 그대로 옮겨 시각적으로 변화가 없게 한다(2026-08~). */
.procedure-table th {
  background: var(--border-strong);
}

/* 업무절차 표는 .data-table-wrap 밖에 그려져 위 카드 규칙에 안 걸리므로, 기본 .data-table
   격자를 그대로 쓴다. 2026-08에는 여기서 --c-border-light(--border를 흰색과 섞어 한 단계
   밝힌 값, 약 #ecf2f8)로 선을 더 옅게 낮췄었는데 그만큼 열 경계가 잘 안 보였다 —
   2026-09~ 다른 표와 같은 --table-border로 통일한다. 머리글 아래는 .data-table thead th
   규칙이 --table-border-header로 처리한다. */
.procedure-table th,
.procedure-table td {
  border-color: var(--table-border);
}

/* 업무개요 아코디언 헤더 재색상 — 채도 높은 회청색(--border-strong) 대신 옅은 파랑 계열로.
   접힌 상태는 가장 옅게, 펼쳐진 상태는 조금 진하게, hover는 각 상태에서 한 단계씩만 더 진하게. */
/* 2026-08~ 접힌 상태는 아예 흰 면으로 둔다. 화면 층이 내려갈수록 조용해져야 하는데
   (홈 색면 → 세부업무 흰 카드 + 색 막대 → 항목 토글) 세부업무 카드가 흰 카드가 되면서
   그 아래 층인 이 토글만 옅은 파랑으로 칠해져 있어 톤 순서가 뒤집혀 보였다. 펼친 상태와
   hover는 그대로 파랑을 써서 열림/닫힘 구분은 유지한다. */
.overview-toggle-summary {
  background: var(--panel-bg);
  color: var(--accent-hover);
}

.overview-toggle-item[open] .overview-toggle-summary {
  background: color-mix(in srgb, var(--accent) 18%, var(--c-accent-bg-light, var(--accent-bg)) 82%);
}

.overview-toggle-summary:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--c-accent-bg-light, var(--accent-bg)) 88%);
}

.overview-toggle-item[open] .overview-toggle-summary:hover {
  background: color-mix(in srgb, var(--accent) 24%, var(--c-accent-bg-light, var(--accent-bg)) 76%);
}

/* 관련법령 및 지침의 법령명 그룹 헤더 — 업무개요 아코디언과 같은 카드 모양을 재사용하지만
   <details>가 아닌 일반 <div>라 항상 펼쳐진 상태다. 클릭 가능한 것처럼 보이지 않도록
   +/− 아이콘과 hover 시 진해지는 효과를 없앤다. */
.overview-toggle-summary-static {
  cursor: default;
}

.overview-toggle-summary-static::after {
  content: none;
}

.overview-toggle-summary-static:hover {
  background: var(--c-accent-bg-light, var(--accent-bg));
}

/* 업무개요 소개 문단을 콜아웃 박스로 — 옅은 파랑 배경 + 왼쪽 진한 파랑 강조선 + 아이콘.
   아이콘은 장식용이라 ::before로만 넣고 실제 텍스트로는 넣지 않는다. */
.overview-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-accent-bg-light, var(--accent-bg));
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px; /* 14px → 12px, 더 컴팩트하게 */
}

.overview-summary::before {
  content: '\1F4A1';
  flex-shrink: 0;
  line-height: 1.3;
}

/* 업무절차 표 안 본문·비고·서식 설명 — 예전엔 calc(토큰 + 1~1.5px)로 본문보다 살짝 키웠지만
   (17.5px 등 사다리 사이 값), 2026-09-15 여섯 칸 통일 때 본문은 --fs-md, 비고·서식 설명은
   보조 칸 --fs-sm으로 맞췄다. 한 칸 위(--fs-lg)는 절 제목(.section-heading)과 같아져 쓰지 않는다. */
.procedure-content {
  font-size: var(--fs-md);
}

.procedure-notes,
.form-desc {
  font-size: var(--fs-sm);
}

.casebook-field {
  font-size: var(--fs-md);
}

/* 감사사례 본문 — 제목(.audit-title)을 본문 수준으로 낮춘 것과 같은 티어로 맞춘다
   (2026-08, 기존 +2px는 제목보다도 커서 위계가 뒤집혀 보였다). */
.audit-content,
.audit-improvement {
  font-size: var(--fs-md);
}

/* 표 안 글씨는 어느 화면에서나 --fs-sm(12.5px) 한 칸(2026-09-15 사다리 통일) — 본문(--fs-md)보다
   한 칸 아래라 "제목 > 본문 > 표" 위계가 항목 화면·아코디언 안 어디서나 같다. */
.data-table {
  font-size: var(--fs-sm);
}

/* 위계 3단계 — 절 제목(.section-heading, --fs-lg) 바로 아래 "소제목·하위 항목 제목" 티어.
   업무개요 아코디언 제목·소제목(.overview-block-heading)·세부업무 카드 제목을 모두 여기서
   통일한다. 2026-09-15 사다리 통일: 소제목은 본문과 같은 칸 --fs-md(14px)에 두고 굵기(700)로
   구분한다 — 한 칸 위 --fs-lg는 절 제목 자리라 소제목이 절 제목과 같아져 버린다. */
.overview-toggle-summary,
.overview-block-heading,
.overview-card-title {
  font-size: var(--fs-md);
}

/* 감사사례·업무사례집 개별 항목 제목 — 소제목이 아니라 목록 항목이라 본문 수준으로 낮춘다
   (2026-08, 기존엔 위 소제목들과 같은 규칙을 써서 17px/700으로 과하게 커 보였다). */
.casebook-title,
.audit-title {
  font-size: var(--fs-md);
  font-weight: 600;
}

/* 헤더 업무분야 드롭다운 */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---------- 글자 크기 단추(가 · 가⁺ · 가⁺⁺, 2026-09~) ----------
   상단바 검색창과 업무분야 드롭다운 사이에 붙는 세 칸짜리 선택 단추. 누르면 <html>에
   fs-m / fs-l / fs-xl 중 하나가 붙고(js/fontSize.js) 루트 글씨가 15 → 16 / 17px로 바뀌어
   rem 토큰 여섯 칸이 함께 움직인다.

   단추 글씨는 예전엔 px로 고정했지만(단계를 올려도 비교 기준이 안 움직이게) 2026-09-15 사다리
   통일 때 --fs-md로 옮겼다 — 사다리 밖 px를 남기지 않기 위함이고, 가⁺⁺에서 2px 커지는 정도라
   헤더 높이에는 영향이 없다. 검색창(hidden으로 숨는 화면이 있다)과 달리 항상 보인다. */
.font-size-switch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-bg);
}

/* 세 칸이 같은 폭이라 단계를 바꿔도 묶음 전체 폭이 변하지 않는다. 글자는 "가" 하나뿐이고
   ⁺ 표시는 아래 ::after로만 넣는다(장식 기호는 텍스트로 넣지 않는다는 관례) — 스크린리더에는
   각 단추의 aria-label("글자 크기 보통/크게/아주 크게")로만 읽힌다. */
.font-size-btn {
  position: relative;
  width: 38px;
  padding: 7px 0;
  border: none;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.font-size-btn:first-child {
  border-left: none;
}

.font-size-btn:hover {
  background: var(--accent-bg);
  color: var(--text);
}

.font-size-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 지금 고른 단계. 색만 바꾸면 hover와 구분이 안 돼서 배경까지 함께 바꾼다. */
.font-size-btn[aria-pressed='true'] {
  background: var(--accent);
  color: #fff;
}

/* ⁺ 표시 — 위첨자 자리에 작게 올린다. 장식이므로 ::after content로만 넣는다. */
.font-size-btn-l::after,
.font-size-btn-xl::after {
  font-size: var(--fs-xs);
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
}

.font-size-btn-l::after {
  content: '+';
}

.font-size-btn-xl::after {
  content: '++';
}

/* 좁은 화면에서는 로고·검색·드롭다운과 한 줄에 다 들어가지 않는다. 단계 선택은 본문을
   읽기 시작한 뒤에도 언제든 바꿀 수 있어야 하므로 숨기지 않고 칸 폭만 줄인다. */
@media (max-width: 720px) {
  .font-size-btn {
    width: 32px;
  }
}

.field-dropdown {
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
}

/* 좁은 화면(2026-09-28~): 오른쪽 묶음(.topbar-right)이 flex-shrink:0이라 390px에서 머리띠가
   96px 넘쳐 문서 폭이 486px로 밀렸다(검색 34 + 감사사례 73 + 글자 크기 98 + 분야 목록 197).
   한 줄에서 줄이기만 하면 분야 목록이 화살표 폭(30px)까지 눌려 글자가 하나도 안 보여서,
   이 폭에서는 묶음을 줄어들게 하면서 분야 목록을 아랫줄로 내려 묶음 폭을 다 쓰게 한다.
   그래도 길면 말줄임. 로고는 책 아이콘 이미지만 남은 상태(560px 이하 <picture>가 바꿔 끼움)라 더
   줄지 않게 고정한다. 로고–묶음 간격을 묶음 안 간격(12px)과 맞춰야 윗줄(검색·감사사례·글자
   크기)이 390px에서 한 줄에 들어간다 — 24px 그대로면 1~2px 모자라 세 줄로 접혔다. */
@media (max-width: 640px) {
  .topbar-inner {
    gap: 12px;
  }

  .brand-group {
    flex-shrink: 0;
  }

  .topbar-right {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
    min-width: 0;
  }

  .field-dropdown {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
  }
}

/* 화면 폭 1200px 이하에서는 우측 목차를 숨기고 본문이 전체 폭을 쓴다. 대신 항목 제목
   아래 접힘 목차(.toc-mobile, 2026-08~)를 보여준다 — 둘 다 같은 tocAnchors를 공유하는
   데스크톱/모바일 표현이라 기준 폭을 나눠서 관리하지 않고 이 미디어쿼리 하나에서 반대로
   뒤집는다. */
@media (max-width: 1200px) {
  .toc-rail {
    display: none;
  }

  .toc-mobile {
    display: block;
  }
}

/* ---------- 연구회 피드백 "의견 보내기" 버튼(2026-08~) ----------
   js/feedback.js가 document.body에 직접 붙이는 고정 버튼. 화면 우측 하단에 떠 있고
   스크롤해도 따라온다. z-index는 헤더 검색 결과 패널(.site-search-results, 30 /
   좁은 화면의 헤더 검색창 40)보다 낮게 둬서 검색 결과를 절대 가리지 않는다. */
.feedback-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 36, 48, 0.18);
}

/* hidden 속성(표지 화면)이 inline-flex에 덮이지 않게 한다. */
.feedback-fab[hidden] {
  display: none;
}

.feedback-fab:hover {
  background: var(--accent-hover);
}

.feedback-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.feedback-fab-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 버튼 오른쪽 끝을 공통 컨테이너의 오른쪽 기준선에 맞춘다(2026-08~ 정렬 통일).
   컨테이너 안쪽 오른쪽 끝은 화면 오른쪽에서 max(--page-pad, 50vw - (--page-max/2 - --page-pad))
   = max(24px, 50vw - 616px) 떨어져 있다.
   우측 목차가 떠 있는 화면(js/main.js가 body[data-toc="on"]으로 표시)에서는 목차가 sticky라
   세로로 화면 끝까지 내려와 그 자리와 겹치므로, 레일 폭(190) + 간격(40) = 230px만큼 더
   왼쪽으로 물려 본문 컬럼 오른쪽 끝에 세운다. 1200px 이하에서는 목차 자체가 안 뜨므로
   기본값(24px, 화면 오른쪽 아래 코너)을 그대로 쓴다. */
@media (min-width: 1201px) {
  .feedback-fab {
    right: var(--page-edge);
  }

  body[data-toc="on"] .feedback-fab {
    right: calc(var(--page-edge) + var(--rail-w) + var(--rail-gap));
  }
}

/* 좁은 화면에서는 라벨을 빼고 원형 아이콘 버튼으로 줄인다(본문 폭을 가리지 않도록).
   접근성 이름은 js/feedback.js가 aria-label로 따로 준다. */
@media (max-width: 720px) {
  .feedback-fab {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .feedback-fab-label {
    display: none;
  }
}

/* ---------- 맨 위로 버튼(2026-08~) ---------- */
/* "의견 보내기"(.feedback-fab)와 같은 오른쪽 아래 자리를 쓰되 그 위에 쌓는다 — 두 버튼이
   겹치지 않도록 아래 여백을 FAB 높이(43px)+간격(12px)만큼 더 준다. 아이콘만 있는 작은
   원형 버튼이고, 한 화면 넘게 내려갔을 때만 js/main.js가 hidden을 풀어 나타낸다. */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: calc(24px + 43px + 12px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 36, 48, 0.14);
}

.scroll-top-btn svg {
  width: 18px;
  height: 18px;
}

.scroll-top-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.scroll-top-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* hidden 속성이 inline-flex에 덮이지 않게 한다(.feedback-fab과 같은 이유). */
.scroll-top-btn[hidden] {
  display: none;
}

/* 오른쪽 끝 기준선도 "의견 보내기"와 똑같이 맞춘다 — 두 버튼이 세로로 정확히 겹쳐 쌓인다. */
@media (min-width: 1201px) {
  .scroll-top-btn {
    right: var(--page-edge);
  }

  body[data-toc="on"] .scroll-top-btn {
    right: calc(var(--page-edge) + var(--rail-w) + var(--rail-gap));
  }
}

/* 좁은 화면에서는 FAB이 48px 원형에 bottom:16px이라 그만큼 다시 계산한다. */
@media (max-width: 720px) {
  .scroll-top-btn {
    right: 16px;
    bottom: calc(16px + 48px + 12px);
  }
}

/* ---------- 세부 항목 아코디언(.subtask-item-accordion) 안 제목 위계 (2026-08~) ----------
   항목을 별도 화면으로 여는 대신 그 자리에서 펼치는 아코디언(usesItemsAccordion —
   school-fund 전 도메인 + industrial-safety "중대재해처벌법 법적 이행사항")은 안쪽 내용을
   renderItemBodySections로 항목 화면과 똑같이 그린다. 그런데 그 렌더러들의 제목 크기는
   "화면 제목(.detail-header h2, --fs-2xl) 아래"를 기준으로 잡힌 값이라, 토글 안에 그대로
   들어오면 위계가 뒤집힌다 — 토글 제목 < 근거법령 제목 < 원문 2단 제목.

   그래서 토글 안에서만 제목 칸을 내린다. 아래 규칙은 전부 .subtask-item-accordion 하위로
   범위를 좁혔으므로 항목 화면(renderSubTaskItemDetail)·다른 도메인은 전혀 영향받지 않는다.
   절대 규칙: 토글 제목이 그 안의 어떤 제목보다 커야 한다.

   2026-09-15 여섯 칸 rem 사다리로 통일하면서 단계를 다시 잡았다. 예전에는 --fs-base ± 1~2px
   calc()로 15·14px 같은 사다리 사이 값을 만들어 다섯 단계를 1px씩 내려왔는데, 이제 사다리
   밖 값을 쓰지 않으므로 제목 두 단계는 같은 칸(--fs-md)에 두고 굵기(700/600)로만 구분한다.

     1단계 토글 제목                          --fs-lg  16px / 700  (바깥 "세부 항목" .section-heading과 같은 칸)
     2단계 근거법령·개념정의·원문 2단 섹션 제목  --fs-md  14px / 700
     3단계 그 아래 body·table 제목             --fs-md  14px / 600
     4단계 본문·목록                            --fs-md  14px / 400  (전역 본문 칸 그대로 — 별도 규칙 없음)
     5단계 표 안·출처·각주 등 보조 텍스트         --fs-sm  12.5px      (전역 값 그대로 — 별도 규칙 없음)

   4·5단계는 항목 화면과 같은 전역 칸을 그대로 쓰므로(본문 md · 표·보조 sm) 아코디언 안에서
   다시 적지 않는다 — "본문·표 크기는 어느 화면에서나 같다"가 사다리 통일의 목적이다. */

/* --- 1단계: 토글 제목 --- */
/* 일반 토글(.overview-toggle-summary, --fs-md)보다 한 칸 큰 --fs-lg — 아코디언에서는 이
   줄이 항목 제목 노릇을 하므로 그 안의 2·3단계 제목(--fs-md)보다 커야 한다. */
.subtask-item-accordion > .overview-toggle-summary {
  font-size: var(--fs-lg);
}

/* .subtask-item-nav-title은 목록형(.subtask-item-nav-row)과 공유하는 클래스라
   아코디언 안에서만 summary를 그대로 물려받게 한다. */
.subtask-item-accordion .subtask-item-nav-title {
  font-size: inherit;
  font-weight: 700;
}

/* 번호 배지·+/− 표시가 제목보다 커 보이지 않게 함께 줄인다. */
.subtask-item-accordion .subtask-item-nav-badge {
  width: 20px;
  height: 20px;
  font-size: var(--fs-xs);
}

.subtask-item-accordion > .overview-toggle-summary::after {
  font-size: var(--fs-md);
}

.subtask-item-accordion .overview-toggle-body {
  padding: var(--space-3) var(--space-4) var(--space-3);
}

/* --- 2단계: 토글 바로 아래 섹션 제목 --- */
/* .overview-toggle-body의 직계 자식만 고른다 — 원문 2단(.block-section) 안에 들어간
   body·table 섹션은 아래 3단계 규칙이 받는다. <details>로 접히는 근거법령
   (.legal-section-summary)도 같은 .detail-section > .section-heading 구조라 함께 걸린다. */
.subtask-item-accordion .overview-toggle-body > .detail-section > .section-heading,
.subtask-item-accordion .overview-toggle-body .block-section-heading {
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* --- 3단계: 원문 2단 섹션 안의 body·table 제목, 개념정의 블록 제목, 항목 감사사례 제목 --- */
.subtask-item-accordion .overview-toggle-body .block-section-body .section-heading,
.subtask-item-accordion .overview-toggle-body .overview-block-heading,
.subtask-item-accordion .overview-toggle-body .audit-title {
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 600;
}

/* --- 제목 옆 아이콘 --- */
/* 30px 색배지 + 17px svg는 14px 제목 옆에서 제목보다 커 보인다. 각 단계 글씨 크기에
   맞춰 배지와 svg를 함께 줄인다(2단계 20/12px, 3단계 18/11px). */
.subtask-item-accordion .overview-toggle-body .section-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.subtask-item-accordion .overview-toggle-body .section-icon svg {
  width: 12px;
  height: 12px;
}

.subtask-item-accordion .overview-toggle-body .block-section-body .section-icon {
  width: 18px;
  height: 18px;
}

.subtask-item-accordion .overview-toggle-body .block-section-body .section-icon svg {
  width: 11px;
  height: 11px;
}

.subtask-item-accordion .overview-toggle-body .section-icon.section-icon-3d {
  width: 22px;
  height: 22px;
  border-radius: 0;
}

.subtask-item-accordion .overview-toggle-body .table-caption-icon {
  width: 12px;
  height: 12px;
}

.subtask-item-accordion .overview-toggle-body .concept-block-badge {
  width: 20px;
  height: 20px;
  font-size: var(--fs-xs);
}

/* 접힘 토글(근거법령 5개 초과·흐름도 이미지·참조표)의 +/− 표시도 2단계 제목에 맞춘다. */
.subtask-item-accordion .overview-toggle-body .legal-section-summary::after,
.subtask-item-accordion .overview-toggle-body .flowchart-image-summary::after,
.subtask-item-accordion .overview-toggle-body .ref-table-summary::after {
  font-size: var(--fs-md);
}

/* --- 표 밀도 --- */
/* 카드형 표 규칙(.data-table-wrap .data-table th/td, 패딩 11px 14px)은 항목 화면 기준이라
   토글 안에서는 한 줄짜리 행도 44px을 차지했다. 글자를 본문 티어(14px)로 줄인 만큼 패딩·줄간격도
   함께 좁혀 표가 본문 흐름을 끊지 않게 한다(행 높이 약 44px → 28px). 선택자에
   .data-table-wrap을 넣어 원래 규칙과 같은 자리를 덮어쓴다. */
/* word-break(2026-08~): 토글 안 표는 열 폭이 좁아 기본값(break 허용)이면 "7년 이하"가
   "7년 이 / 하"처럼 낱말 중간에서 잘린다. 목록 항목(.notes-list li)이 이미 쓰고 있는
   keep-all을 표 셀에도 적용해 낱말 단위로만 접히게 한다. 항목 화면의 표는 폭이 넓어
   이 문제가 없으므로 그대로 둔다. */
.subtask-item-accordion .overview-toggle-body .data-table th,
.subtask-item-accordion .overview-toggle-body .data-table td {
  word-break: keep-all;
}

.subtask-item-accordion .overview-toggle-body .data-table th,
.subtask-item-accordion .overview-toggle-body .data-table td,
.subtask-item-accordion .overview-toggle-body .data-table-wrap .data-table th,
.subtask-item-accordion .overview-toggle-body .data-table-wrap .data-table td {
  padding: 6px 10px;
  line-height: 1.5;
  min-width: 72px;
}

/* 위 6px 10px 여백이 업무절차 표 단계 칸(.procedure-row td:first-child, 왼쪽 22px)까지 덮어써서
   펼침 삼각형이 단계 번호 원에 겹쳤다(2026-10-06, 학교발전기금 세부항목 아코디언). 단계 칸 왼쪽 여백을
   되돌리고, 삼각형 높이도 이 표의 위 여백(6px) + 번호 원 반지름(9px)에 맞춘다. */
.subtask-item-accordion .overview-toggle-body .procedure-row td:first-child {
  padding-left: 22px;
}

.subtask-item-accordion .overview-toggle-body .procedure-row td:first-child::before {
  top: 15px;
}

/* --- 세로 간격 --- */
/* 제목이 작아진 만큼 여백도 함께 줄인다. "섹션 사이는 넓게, 제목과 그 아래 내용 사이는
   좁게"라는 기존 관계는 유지하고(20px vs 8px), 절대값만 항목 화면(36px vs 16px)보다
   촘촘하게 잡아 토글 하나가 화면을 덜 차지하게 한다. */
.subtask-item-accordion .overview-toggle-body .detail-section {
  margin-bottom: var(--space-5);
}

.subtask-item-accordion .overview-toggle-body .detail-section:last-child {
  margin-bottom: 0;
}

.subtask-item-accordion .overview-toggle-body .block-section {
  margin-bottom: var(--space-6);
}

.subtask-item-accordion .overview-toggle-body .block-section:last-child {
  margin-bottom: 0;
}

.subtask-item-accordion .overview-toggle-body .section-heading {
  margin-bottom: var(--space-2);
  padding-bottom: 5px;
}

.subtask-item-accordion .overview-toggle-body .block-section-heading {
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.subtask-item-accordion .overview-toggle-body .block-section-body {
  padding-left: var(--space-4);
}

.subtask-item-accordion .overview-toggle-body .overview-blocks {
  gap: 10px;
}

/* 알아두기 박스(.overview-callout-notes)는 이미 자체적으로 더 좁은 여백(8px 16px/1.5)을
   쓰므로 제외한다 — 여기서 덮어쓰면 오히려 헐렁해진다. */
.subtask-item-accordion .overview-toggle-body .overview-callout:not(.overview-callout-notes) {
  padding: 10px 14px;
  line-height: 1.6;
}

/* ---------- 홈(업무목록) 계절 배경 (2026-08~) ----------
   js/seasonBackground.js가 <div id="season-layer">를 body 맨 앞에 붙였다 뗀다. 홈을 벗어나면
   DOM 자체가 사라지므로 다른 화면에서는 이 규칙들이 아무 대상도 갖지 않는다.

   층은 position:fixed + z-index:-1 — 음수라 body의 바탕색 위, 본문(#app) 아래에 깔린다.
   #app에 z-index를 주는 방법도 있지만 그러면 #app이 새 쌓임 맥락이 되어 그 안의 헤더 검색
   결과 패널(z-index 30)이 body에 직접 붙는 "의견 보내기" 버튼(z-index 20)보다 아래로
   내려간다 — 기존 z-index 관계를 하나도 건드리지 않으려고 음수 층을 쓴다.
   pointer-events:none이라 클릭을 가로채지 않고, overflow:hidden이라 좌우로 흔들리다 화면 밖으로
   나가도 가로 스크롤이 생기지 않는다. */
.season-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

/* 홈에서만 본문 스크롤 영역의 불투명 바탕을 걷어 body의 계절 배경색과 파티클이 비치게 한다.
   색 자체는 같은 --page-bg 계열이라 눈에 띄는 변화는 없다(다른 화면은 그대로 불투명). */
body[data-screen="list"] #layout[data-mode="detail"] #detail {
  background: transparent;
}

.season-particle {
  position: absolute;
  top: -12vh;
  left: 0;
  width: var(--p-size);
  height: var(--p-size);
  background: var(--p-color);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: season-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 계절별 모양. 눈만 원이고 나머지는 잎사귀 모양(마주 보는 두 모서리만 둥글게). */
.season-layer[data-season="spring"] .season-particle { border-radius: 50% 0 50% 0; }
.season-layer[data-season="summer"] .season-particle { border-radius: 0 60% 0 60%; }
.season-layer[data-season="autumn"] .season-particle { border-radius: 0 70% 0 70%; }
.season-layer[data-season="winter"] .season-particle { border-radius: 50%; }

/* 탭이 비활성일 때(document.visibilitychange) 정지. 브라우저가 알아서 늦추기도 하지만
   명시적으로 멈춰 저사양 PC에서 백그라운드 연산이 남지 않게 한다. */
.season-layer[data-paused="true"] .season-particle {
  animation-play-state: paused;
}

/* 레이아웃을 다시 계산시키는 top·left 대신 transform·opacity만 바꾼다.
   가로 위치(--p-left)에 좌우 흔들림(--p-drift)을 더했다 뺐다 하며 떨어지고, 회전량
   (--p-spin)은 계절별로 다르다(눈은 0deg라 돌지 않는다). */
@keyframes season-fall {
  0% {
    transform: translate3d(var(--p-left), 0, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: var(--p-opacity); }
  25% {
    transform: translate3d(calc(var(--p-left) + var(--p-drift)), 30vh, 0) rotate(calc(var(--p-spin) * 0.25));
  }
  50% {
    transform: translate3d(var(--p-left), 60vh, 0) rotate(calc(var(--p-spin) * 0.5));
  }
  75% {
    transform: translate3d(calc(var(--p-left) - var(--p-drift)), 90vh, 0) rotate(calc(var(--p-spin) * 0.75));
  }
  90% { opacity: var(--p-opacity); }
  100% {
    transform: translate3d(var(--p-left), 124vh, 0) rotate(var(--p-spin));
    opacity: 0;
  }
}

/* 계절별 바탕색 — 2026-10-13 하늘빛 톤으로 바꾸며 네 계절 모두 바탕(--paper)과 같게 맞췄다
   (계절 기운은 파티클만으로). 예전엔 #f2f3f5에서 색조만 아주 미세하게 옮겼다.
   body[data-season]은 홈에서만 붙으므로 다른 화면은 --page-bg 그대로다. */
body {
  transition: background-color .6s ease;
}

body[data-season="spring"] { background-color: var(--paper); }
body[data-season="summer"] { background-color: var(--paper); }
body[data-season="autumn"] { background-color: var(--paper); }
body[data-season="winter"] { background-color: var(--paper); }

/* 「동작 줄이기」는 취향이 아니라 어지럼증 때문에 쓰는 설정이다 — 파티클을 표시하지 않는다
   (js/seasonBackground.js도 아예 만들지 않지만, 설정을 도중에 켠 경우를 위한 안전장치).
   배경색은 위 규칙 그대로 계절을 따른다. */
@media (prefers-reduced-motion: reduce) {
  .season-layer { display: none; }
}

/* ---------- 계약 절차 한눈에 보기에서 돌아가기 · 낱말 표시 (2026-09~) ---------- */
/* apps/contract/flow/에서 ?from=flow-*&hl=… 로 넘어온 항목 화면에만 나타난다
   (js/main.js의 applyFlowReturn). 항목 제목 위에 붙되 스크롤해도 계속 보이도록
   #detail 위쪽에 붙여 둔다 — 본문을 한참 내려간 뒤에도 되돌아갈 수 있어야 한다. */
.flow-return-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  margin: 0 0 14px;
  padding: 9px 14px;
  /* 옅은 주황(2026-09~) — 본문의 파랑 계열(근거법령·링크)과 섞이지 않게 따로 둔다.
     사이트 공용 토큰이 아니라 이 띠에만 쓰는 값이라 여기에 직접 적는다. */
  background: #fff4e5;
  border: 1px solid #f3c98b;
  border-left: 4px solid #e8722a;
  border-radius: 4px;
  color: #8a4b12;
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
}

.flow-return-bar::before {
  content: "↩";
  margin-right: 8px;
}

.flow-return-bar:hover {
  background: #ffe9cc;
  border-color: #e8722a;
}

/* 낱말이 있는 요소를 잠깐 노랗게 — 검색 결과 표시(mark.search-hit)와 같은 노랑을 쓴다.
   3초 뒤 js가 -fade를 붙이면 이 transition으로 서서히 사라진다. */
.flow-hl {
  background: var(--search-hit-bg);
  border-radius: 3px;
  transition: background-color 1.2s ease;
}

.flow-hl-fade {
  background: transparent;
}

/* ---------- 분야 개요 맨 위 띠 카드 (toolCards의 featured: true, 2026-09~) ---------- */
/* 도메인에 들어오자마자 보이는 진입점이라, 흰 패널이 이어지는 화면에서 눈에 띄도록
   파랑 그러데이션 띠로 둔다. 같은 도구가 세부업무 격자에도 카드로 있었으나 중복이라
   격자 쪽을 뺐다(js/detailView.js의 renderSubtasksSection). */
.featured-tool-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 4px;
}

.featured-tool {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 14px;
  color: #fff;
}

/* 띠 색은 도메인 JSON의 featured.theme으로 고른다(2026-09~). 색값을 데이터에 흩뿌리지 않고
   여기 팔레트에서만 고치려는 것 — theme을 안 적으면 navy가 기본이다. */
.featured-tool-navy {
  background: linear-gradient(105deg, var(--tool-navy), var(--tool-navy-soft));
}

/* theme: 'green'을 쓰는 도메인은 없다. 클래스는 데이터에 green이 남아 있어도 띠가
   깨지지 않도록 navy와 같은 색으로 둔다. */
.featured-tool-green {
  background: linear-gradient(105deg, var(--tool-navy), var(--tool-navy-soft));
}

/* 아이콘 상자 — 그러데이션 위에 얹는 반투명 흰색이라 도메인 색이 바뀌어도 그대로 쓴다. */
.featured-tool-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--fs-2xl);
  line-height: 1;
}

.featured-tool-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 글꼴은 위 --font-display 규칙(.featured-tool-title)에서 도현으로 지정한다. */
.featured-tool-title {
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: #fff;
}

.featured-tool-desc {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* 꼬리표 — 이 도구 안에 무엇이 들어 있는지 열기 전에 알린다. */
.featured-tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.featured-tool-pill {
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.featured-tool-btn {
  flex-shrink: 0;
  padding: 13px 28px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(15, 40, 80, 0.28);
  color: var(--accent-hover);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* 화살표는 장식이라 글자로 넣지 않는다. */
.featured-tool-btn::after {
  content: " →";
}

.featured-tool-btn:hover {
  background: var(--accent-bg);
}

@media (max-width: 600px) {
  .featured-tool {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  /* 제목은 넓은 화면과 같은 --fs-2xl(23px)이라 여기서 다시 줄이지 않는다(2026-09-15 사다리 통일 전엔 27 → 23px). */
  /* 좁은 화면에서는 단추를 맨 아래 전체 폭으로 둔다 — 오른쪽에 두면 글자가 눌린다. */
  .featured-tool-btn {
    width: 100%;
    text-align: center;
  }
}

/* ---------- 도현(--font-display)을 쓰는 세 자리 (2026-09~) ---------- */
/* 큰 글자에만 쓴다 — 사이트 제목(홈 커버), 도메인 개요의 제목, 도메인 맨 위 띠 카드 제목.
   본문 h2/h3ㆍ표ㆍ카드는 계속 프리텐다드를 쓴다(도현은 획이 굵고 자간이 넓어 긴 문장에
   쓰면 읽기 힘들다). 도현은 굵기가 400 하나뿐이라 font-weight도 400으로 맞춘다 —
   700을 주면 브라우저가 억지로 굵혀(가짜 볼드) 획이 뭉갠다. */
.overview-header h2,
.featured-tool-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- 감사사례 (item.blocks의 auditCaseList, 2026-09~) ---------- */
.audit-case-meta {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 사례 번호 바로가기 — 한 세부분야에 사례가 20건 넘는 곳이 있어 위에서 골라 뛴다. */
.audit-case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.audit-case-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.audit-case-chip:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.audit-case-chip-no {
  font-weight: 700;
  color: var(--accent);
}

.audit-case-chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22em;
}

/* 반복 지적 배지 — 사례집이 붉게 표시한 것을 그대로 옮긴다. */
.audit-case-repeat {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.audit-case {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  scroll-margin-top: 16px;
}

.audit-case-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.audit-case-no {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.audit-case-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.audit-case-page {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.audit-case-facts {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: var(--fs-md);
  line-height: 1.7;
}

.audit-case-facts li {
  margin-bottom: 5px;
}

/* 처분 — 사례집이 붉게 강조한 줄. */
.audit-case-disposition {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  color: var(--danger);
}

.audit-case-label {
  font-weight: 700;
  margin-right: 6px;
}

.audit-case-box {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 4px solid var(--warn-border);
  background: var(--warn-bg);
}

/* 관련 근거는 확인사항과 성격이 달라(참고 자료) 파랑 계열로 구분한다. */
.audit-case-box-refs {
  border-left-color: var(--accent);
  background: var(--accent-bg);
}

.audit-case-box-title {
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.audit-case-box-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-md); /* 2026-09-15: 상자 안 불릿은 본문 크기 */
  line-height: 1.7;
}

.audit-case-box-list li {
  margin-bottom: 4px;
}

.audit-case-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.audit-case-link {
  padding: 4px 11px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
}

.audit-case-link:hover {
  background: var(--accent);
  color: #fff;
}

.audit-case-alsoin-label {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.audit-case-alsoin .audit-case-link {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .audit-case-chip-title { max-width: 12em; }
}

/* 감사사례를 옮긴 도메인 홈에 남긴 한 줄 링크 (2026-09~) */
.audit-cases-link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-hover);
  text-decoration: none;
}

/* 화살표는 장식이라 글자로 넣지 않는다. */
.audit-cases-link::after {
  content: " →";
}

.audit-cases-link:hover {
  text-decoration: underline;
}

/* 도메인 퀴즈 진입(2026-09~) — QUIZ! 배지 그림 단추. 한 줄 텍스트 링크였다가 그림으로 바꿨다.
   그림 자체가 단추라 도메인 홈(renderFieldOverview)·세부업무 머리글(renderHeader) 두 곳에서
   같은 마크업을 쓴다. 그림 파일은 apps/quiz/quiz-badge.png 하나를 함께 쓴다. */
/* 도메인 홈 머리글 오른쪽 위에 절대배치한다(2026-09-19~) — 가운데 큰 배지였다가 옮겼다.
   이 프로젝트의 도메인 홈 머리글 클래스는 .domain-header가 아니라 .overview-header다. */
.overview-header {
  position: relative;
}

.quiz-entry-wrap {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  margin: 0;
  text-align: right;
}

.quiz-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .18s ease;
}

.quiz-entry:hover {
  transform: scale(1.06);
}

.quiz-entry:active {
  transform: scale(.97);
}

.quiz-entry:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.quiz-entry-img {
  display: block;
  width: 96px;
  max-width: 40vw;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(26, 58, 107, .20));
  animation: quizBob 2.6s ease-in-out infinite;
}

.quiz-entry-cap {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent-hover);
}

@keyframes quizBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-entry-img { animation: none; }
  .quiz-entry:hover { transform: none; }
}

/* 세부업무 머리글(.detail-header)에 놓일 때 — 여긴 이미 flex에 justify-content: space-between이라
   절대배치 없이 flex 자식으로 두면 오른쪽에 붙는다(도메인 홈이 없는 채권관리에만 나온다). */
.detail-header .quiz-entry-wrap {
  position: static;
  margin: 0;
}

/* 좁은 화면에서는 제목ㆍAI업무가이드 단추와 겹치므로 흐름 안으로 되돌린다. */
@media (max-width: 820px) {
  .quiz-entry-wrap {
    position: static;
    margin: 0 0 16px;
    text-align: right;
  }

  .quiz-entry-img {
    width: 82px;
  }
}

/* 옮겨 온 사례에 붙는 출처 표시 */
.audit-case-origin {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- 홈 격자 아래 가로 띠 (categories.json의 homeBanner, 2026-09~) ---------- */
/* 계약관리 상단 띠(.featured-tool)와 같은 부품을 쓰고 색과 글자 크기만 다르게 한다.
   특정 업무분야가 아니라 전 분야에 걸치는 자료라 9칸 격자에 끼우지 않고 아래에 둔다. */
.featured-tool-home {
  margin-top: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(105deg, var(--tool-navy), var(--tool-navy-soft));
  gap: 14px;
}

/* 홈 띠는 도메인 상단 띠(27px)보다 작게 — 격자 카드와 나란히 놓이므로 그보다 커지면
   시선을 먼저 가져간다. 글꼴도 도현이 아니라 본문 글꼴을 쓴다 — 도현은 굵기가 400
   하나뿐이라 이 크기에서 굵게 지정하면 가짜 볼드로 획이 뭉갠다. */
.featured-tool-title-sm {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
}

.featured-tool-home .featured-tool-desc {
  font-size: var(--fs-md);
}

.featured-tool-home .featured-tool-btn {
  padding: 9px 20px;
  font-size: var(--fs-md);
}

@media (max-width: 600px) {
  .featured-tool-home {
    flex-direction: column;
    align-items: stretch;
  }
  .featured-tool-home .featured-tool-btn {
    width: 100%;
  }
}

/* ---------- 세부업무 화면 맨 위 띠 (subTask.featured, 2026-09~) ---------- */
/* 도메인 홈 띠(.featured-tool-home)와 같은 크기로 두되, 알약이 도구 링크라 누를 수 있다. */
.featured-tool-sub {
  margin: 0 0 18px;
  padding: 16px 20px;
  border-radius: 12px;
  gap: 16px;
}

/* 띠 안의 알약이 링크일 때 — 누를 수 있음을 hover로 알린다. */
.featured-tool-pill-link {
  text-decoration: none;
  cursor: pointer;
}

.featured-tool-pill-link:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 600px) {
  .featured-tool-sub {
    flex-direction: column;
    align-items: stretch;
  }
  .featured-tool-sub .featured-tool-btn {
    width: 100%;
  }
}

/* ---------- 세부업무 띠의 격자형 (subTask.featured.cards, B안, 2026-09-16~) ---------- */
/* 알약 줄 대신 도구·서식 하나가 카드 한 장. 위(.featured-grid-top)는 배지·제목·부제와
   「모두 열기」 단추, 아래(.featured-grid-cards)는 자동 채움 격자. 글씨 크기는 시안의
   px(20·12.5·12·10)를 사다리의 이웃 칸(xl·sm·sm·xs)으로 맞췄다.
   바탕색(2026-09-21~, 시안 「자동화 서식 구역 바탕색」 A′ 30%로 확정): 진한 남색 그러데이션
   (--tool-navy-deep→-mid) 위에 반투명 흰 카드를 얹던 것을 뒤집었다 — 바깥이 카드보다 진해
   카드가 배경에 묻혔다. 새 색을 들이지 않고 이 구역이 쓰던 남색(--tool-navy)의 농도만 낮춘다.
   도메인 색(교육공무직원의 붉은 계열)은 쓰지 않는다 — 화면의 다른 파란 포인트와 겉돈다.
   농도는 --featured-grid-mix 한 값에서 전부 갈라져 나온다(바깥 바탕 = mix, 바깥 테두리 =
   mix+12, 꼬리표 바탕 = mix+10, 카드 테두리 = mix+14) — 여기만 고치면 같이 움직인다.
   글자: 흰 글씨를 걷어내고 제목은 짙은 남색(--tool-navy-deep), 설명·꼬리표는 --text-muted,
   「모두 열기」 단추만 남색 바탕에 흰 글씨로 남긴다. */
.featured-grid {
  --featured-grid-mix: 30%;
  margin: 0 0 18px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tool-navy) var(--featured-grid-mix), var(--panel-bg));
  border: 1px solid color-mix(in srgb, var(--tool-navy) calc(var(--featured-grid-mix) + 12%), var(--border));
  color: var(--text);
}

.featured-grid-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 0;
}

.featured-grid-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.featured-grid-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tool-navy) calc(var(--featured-grid-mix) + 10%), var(--panel-bg));
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--tool-navy-deep);
}

.featured-grid-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tool-navy-deep);
}

.featured-grid-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* 「모두 열기」 — 옅어진 띠 위에서 유일하게 남색 바탕 + 흰 글씨로 남는 단추. */
.featured-grid-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--tool-navy);
  color: var(--tool-navy-on);
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.featured-grid-btn:hover {
  background: var(--tool-navy-deep);
}

.featured-grid-cards {
  display: grid;
  /* 5열 고정(2026-09-18~) — 예전에는 auto-fill minmax(155px)라 창 폭에 따라 4~6열로
     들쭉날쭉했고, 카드 수가 10개일 때 마지막 줄에 한두 개만 남아 허전했다.
     좁은 화면은 아래 미디어쿼리에서 3열·2열로 내린다. */
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 16px 24px 22px;
}

.featured-grid-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--tool-navy) calc(var(--featured-grid-mix) + 14%), var(--border));
  border-radius: 10px;
  background: var(--panel-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.featured-grid-card:hover {
  border-color: var(--tool-navy);
  transform: translateY(-1px);
}

.featured-grid-card-icon {
  font-size: var(--fs-xl);
  line-height: 1;
}

.featured-grid-card-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.featured-grid-card-tag {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 5열이 좁아지는 폭에서는 단계적으로 내린다 */
@media (max-width: 1100px) {
  .featured-grid-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .featured-grid-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .featured-grid-top {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px 0;
  }
  .featured-grid-btn {
    width: 100%;
    text-align: center;
  }
  .featured-grid-cards {
    grid-template-columns: repeat(2, 1fr);
    padding: 14px 16px 18px;
  }
}

/* 항목 목록에서 "도구" 성격의 줄 — 옅은 바탕 + 왼쪽 색 막대 + 배지.
   절차·설명을 읽는 항목들 사이에서 "여기는 눌러서 쓰는 것"임을 한눈에 구분한다.
   색은 그 화면의 도메인 색을 따른다(2026-09-20~, 그전엔 남색 한 벌이었다). */
.subtask-item-tool {
  background: color-mix(in srgb, var(--dom-base) 12%, var(--panel-bg));
  border-left: 4px solid var(--dom-base);
}

.subtask-item-tool-badge {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--dom-base) 20%, var(--panel-bg));
  color: var(--dom-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 띠 전체를 누를 수 있는 상태(2026-09~) — 안의 알약ㆍ단추는 자기 동작을 그대로 갖는다. */
.featured-tool-clickable {
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.featured-tool-clickable:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(15, 40, 80, 0.22);
}

/* 감사사례 알약을 눌렀을 때 해당 카드를 잠깐 비춘다 — 검색 결과 표시와 같은 노랑.
   2초 뒤 js가 -fade를 붙이면 이 transition으로 서서히 사라진다. */
/* 강조는 즉시 켜지고(누른 순간 바로 보여야 한다), 2초 뒤 js가 -fade를 붙이면 그때
   transition으로 서서히 꺼진다 — transition을 켜는 쪽에 두면 노랑이 천천히 나타나서
   어디로 갔는지 놓친다. */
.audit-case.audit-case-flash {
  background: var(--search-hit-bg);
}

.audit-case.audit-case-flash-fade {
  background: var(--panel-bg);
  transition: background-color 1.2s ease;
}

/* ---------- 도메인 홈 도구 카드 (toolCards의 featured, 2026-09~) ---------- */
/* 도메인 홈에는 큰 띠(.featured-tool)를 두지 않는다 — 도메인마다 하나씩 붙으니 세부업무
   카드보다 눈에 먼저 들어왔다. 큰 띠는 홈 화면의 「감사사례」 하나만 쓴다.
   2열로 나란히 두되, 카드가 하나면 전체 폭을 쓴다(.tool-strip-single).
   align-items: stretch로 두 카드 높이를 항상 같게 맞춘다 — 설명이 한 줄인 카드와 두 줄인
   카드가 나란히 놓여도 아래 선이 어긋나지 않는다. */
.tool-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin: 14px 0 4px;
}

.tool-strip-single {
  grid-template-columns: 1fr;
}

/* 카드가 3장·5장처럼 홀수면 마지막 카드가 오른쪽 칸을 비워 둔 채 남는다(2026-10-11, 학교회계 홈에 서식 열람실
   카드를 더하며 생긴 빈자리 — 「허전함」). 마지막 한 장은 한 줄 전체 폭으로 늘린다. */
.tool-strip > .tool-strip-card:last-child:nth-child(odd):not(:first-child) {
  grid-column: 1 / -1;
}

/* 도구 카드 색(2026-09-20~) — 그 화면이 속한 도메인 색을 쓴다(--dom-base/--dom-deep,
   body[data-field]에서 주입). 색값을 도메인 JSON이나 accent 이름으로 흩어 두지 않는다.
   면 전체를 옅은 색으로 깔고 왼쪽 색 막대는 두지 않는다 — 세부업무 카드(흰 바탕 + 왼쪽
   4px 막대)와 모양으로 갈라, 같은 색을 써도 도구가 먼저 읽히고 세부업무가 한 단 뒤로
   물러나게 하려는 것이다. 예전에는 도구마다 기준색이 달랐고(blue/orange/green/purple),
   2026-09-19에 잠시 남색 한 벌로 묶었다가 이 방식으로 바꿨다.
   --tsc-bg  : 면 (기준색 20% — 2026-10-16 10%에서 한 단계 올림)
   --tsc-bd  : 테두리 (기준색 55% — 같은 날 32%에서)
   --tsc-chip: 아이콘 원 (기준색 34% — 같은 날 20%에서)
   --tsc-ink : 제목ㆍ「열기」 글자 (파스텔 위 5.85:1 이상) */
.tool-strip-card {
  --tsc-bg: color-mix(in srgb, var(--dom-base) 20%, var(--panel-bg));
  --tsc-bd: color-mix(in srgb, var(--dom-base) 55%, transparent);
  --tsc-chip: color-mix(in srgb, var(--dom-base) 34%, var(--panel-bg));
  --tsc-ink: var(--dom-deep);
}

/* 학교회계예산결산 도구 카드는 다른 도메인보다 한 단계 진한 파랑(2026-09-30~, 요청 / 2026-10-16 전체를 올리며 28ㆍ70ㆍ44%로) — 새 색값 없이
   같은 도메인 기준색(--field-base-1)의 섞는 비율만 올린다. 글자색(--dom-deep)은 그대로라 대비는 유지됨. */
body[data-field="accounting"] .tool-strip-card {
  --tsc-bg: color-mix(in srgb, var(--dom-base) 28%, var(--panel-bg));
  --tsc-bd: color-mix(in srgb, var(--dom-base) 70%, transparent);
  --tsc-chip: color-mix(in srgb, var(--dom-base) 44%, var(--panel-bg));
}

/* 도구 카드가 여러 줄(group)로 나뉠 때의 묶음(2026-09~). 첫 줄 아래 작은 제목 한 줄을
   두고 다음 줄을 잇는다 — 제목은 절 제목보다 한 단계 작고 옅게, 카드보다 눈에 덜 띄게. */
.tool-strip-stack {
  margin: 14px 0 4px;
}

.tool-strip-stack .tool-strip {
  margin: 0;
}

.tool-strip-stack .tool-strip + .tool-strip {
  margin-top: 12px;
}

.tool-strip-group-title {
  margin: 14px 0 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* 카드 전체가 눌리는 링크다. 카드 자체는 <div>이고, 제목 링크의 ::after를 카드 전체로
   늘려서(.tool-strip-title-link::after) 어디를 눌러도 도구가 열린다 — 카드를 <a>로 두면
   안쪽의 내려받기 링크(.tool-strip-sublink)를 넣을 수 없어서(<a> 중첩 금지) 이렇게 한다. */
.tool-strip-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: var(--tsc-bg);
  border: 1px solid var(--tsc-bd);
  border-radius: 11px;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.tool-strip-card:hover {
  box-shadow: 0 3px 10px rgba(31, 51, 84, 0.14);
  transform: translateY(-1px);
}

/* 옅은 색 사각 안에 도메인 색 그림(2026-09-20~, 그전엔 기준색을 채운 원 + 흰 그림).
   SVG는 fill="currentColor"라 아래 color를 따라간다. 이모지를 쓰지 않는 이유는
   js/detailView.js의 TOOL_STRIP_ICONS 주석 참고. */
.tool-strip-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--tsc-chip);
  color: var(--tsc-ink);
}

.tool-strip-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}

.tool-strip-icon:has(.icon-3d),
.app-link-icon:has(.icon-3d) {
  width: 44px;
  height: 44px;
  background: transparent;
  border-radius: 0;
}

/* 글 묶음만 남는 폭을 차지한다. min-width: 0이 없으면 긴 설명이 flex 칸을 밀어내
   「열기」 단추가 카드 밖으로 나간다. */
.tool-strip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 제목은 한 줄로 둔다. white-space: nowrap을 쓰면 좁은 화면에서 글자가 잘리므로,
   대신 글자 크기를 15.5px로 고정하고 설명 문구를 짧게 유지해 한 줄에 들어가게 한다. */
.tool-strip-title-link {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--tsc-ink);
  text-decoration: none;
}

/* 카드 전체를 누를 수 있게 제목 링크의 클릭 범위를 카드까지 늘린다. */
.tool-strip-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
}

/* 카드 바탕이 한 단계 진해져(2026-10-16) 회색 설명 글씨가 흐려 보여 본문색으로 올림 */
.tool-strip-desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
}

/* 카드에 딸린 파일 하나를 내려받는 한 줄. 글 묶음 아래(제목·설명 사이 gap 2px + 4px =
   6px)에 놓이고, 제목 링크가 카드 전체에 덮어 둔 클릭 범위보다 위에 있어야 이 링크가
   먼저 눌린다(z-index). 카드보다 눈에 덜 띄어야 하므로 기준색을 글자색으로만 쓴다. */
.tool-strip-sublink {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--tsc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

/* 아래 화살표는 장식이라 글자로 넣지 않는다. */
.tool-strip-sublink::before {
  content: "↓ ";
}

.tool-strip-sublink:hover {
  border-bottom-color: var(--tsc-ink);
}

/* 단추 모양이지만 카드 전체가 링크라 실제 요소는 <span>이다. */
.tool-strip-btn {
  flex: none;
  padding: 6px 13px;
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--dom-base) 40%, transparent);
  border-radius: 7px;
  color: var(--tsc-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* 화살표는 장식이라 글자로 넣지 않는다. */
.tool-strip-btn::after {
  content: " →";
}

@media (max-width: 600px) {
  .tool-strip {
    grid-template-columns: 1fr;
  }
  .tool-strip-card {
    flex-wrap: wrap;
  }
  .tool-strip-btn {
    width: 100%;
    text-align: center;
  }
}

/* ---------- 절 파스텔 상자 (sectionTint, 2026-09~) ---------- */
/* 절이 3개 이상이고 그 안에 도구 카드가 있는 항목에서만 켜진다(js/detailView.js의
   useSectionTint). 절마다 홈 카드 기준색을 순서대로 돌려 써서 "여기까지가 한 묶음"이
   눈에 들어오게 한다 — 도구가 여러 절에 흩어져 있을 때를 위한 것이다.
   안의 도구 카드·서식 줄은 흰 바탕 그대로 두고, 상자 색은 배경에만 쓴다. */
/* 2026-09-13 위계 규칙: 항목 화면에서는 색을 거의 쓰지 않는다 — 절마다 다른 파스텔 채움을 없애고 흰 상자 +
   왼쪽 도메인 색(--dom) 띠 4px로 통일한다. --tint(절 색)는 「열기」 단추 색에만 남는다. */
.block-section-tint {
  --tint: var(--dom);
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--dom);
  border-radius: 12px;
  background: var(--panel-bg);
}

.block-section-tint > .block-section-heading,
.block-section-tint > .block-section-heading .section-icon {
  color: var(--text);
}

/* 기준일 배지는 그 절 색 테두리로 맞춘다(기본 배지 모양은 그대로). */
.block-section-tint .block-section-asof {
  border-color: color-mix(in srgb, var(--tint) 45%, #fff);
  color: color-mix(in srgb, var(--tint) 70%, #333);
}

/* 절 안의 「열기」 단추만 그 절 색으로 — 카드 자체는 흰 바탕을 유지한다. */
.block-section-tint .app-card .btn-download {
  background: var(--tint);
  border-color: var(--tint);
}

.block-section-tint .app-card .btn-download:hover {
  background: color-mix(in srgb, var(--tint) 80%, #000);
  border-color: color-mix(in srgb, var(--tint) 80%, #000);
}

/* 절 순번 색은 더 쓰지 않는다(2026-09-13, 위계 규칙) — 클래스는 남겨 두되 전부 도메인 색을 따른다. */
.block-section-tint-1,
.block-section-tint-2,
.block-section-tint-3,
.block-section-tint-4,
.block-section-tint-5,
.block-section-tint-6 { --tint: var(--dom); }

/* ---------- 용어집 단추와 뜻 펼침(js/glossary.js, 2026-09~) ----------
   항목 본문에 나온 용어(data/glossary/<도메인>.json의 t·also)를 첫 번째 자리 한 번만 <button>으로
   감싼다. 본문 글자와 똑같이 보이되 점선 밑줄로만 "누를 수 있음"을 알리고, 누르면 그 줄 아래에
   뜻(.gloss-def)이 파란 왼쪽 막대 상자로 펼쳐진다. 알아두기(주황 --warn-bg)·K-에듀파인(초록)과
   겹치지 않도록 구조용 파랑(--accent/--accent-bg)을 쓴다. 감싸기 전후 줄바꿈 자리가 바뀌지 않게
   단추에는 여백·테두리(밑줄 제외)를 주지 않는다. */
.gloss-term {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}

.gloss-term:hover,
.gloss-term[aria-expanded="true"] {
  color: var(--accent);
  border-bottom-style: solid;
}

.gloss-term:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}

.gloss-def {
  display: block;
  margin: 4px 0 6px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-bg);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.gloss-def[hidden] {
  display: none;
}

.gloss-def-term {
  font-weight: 700;
  margin-right: 6px;
}

.gloss-def-src {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 「이 항목에 나온 용어 N개」 접기 — 근거 접기(.legal-section-collapsible/.legal-section-summary)의
   +/− 표시를 그대로 쓰고, 안쪽은 용어(dt)·뜻(dd) 목록이다. */
.gloss-index-list {
  margin: 0;
  display: grid;
  gap: 10px;
}

.gloss-index-term {
  font-weight: 700;
  color: var(--text);
}

.gloss-index-alias {
  margin-left: 6px;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.gloss-index-def {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* 인쇄: 용어 목록은 접혀 있어도 펼쳐진 채 나온다(::details-content — Chrome 131+; 그 밖의
   브라우저는 js/glossary.js의 beforeprint 보조가 연다). +/− 표시와 점선 밑줄은 종이에서 뜻이 없어
   뺀다. */
@media print {
  .gloss-index {
    break-inside: avoid;
  }

  .gloss-index::details-content {
    content-visibility: visible;
    display: block;
  }

  .gloss-index > .legal-section-summary::after {
    content: none;
  }

  .gloss-term {
    border-bottom: 0;
  }
}

/* ---------- 첫 화면 개편(2026-09-13) — 미색 바탕ㆍ감사사례 단추ㆍ참고자료 곁칸 ----------
   청록(--teal*)은 감사사례 전용 색이다(시안 지정값 #2f6f66). */
:root {
  --teal: #2f6f66;
  --teal-bg: #e7f2f0;
  --teal-border: #bcdad4;
  --home-bg: var(--paper); /* 2026-10-13 하늘빛 바탕으로 통일 */
}

/* 구분선 아래 본문 전체 미색 바탕 — 홈에서만(js/main.js가 body.is-home을 켠다). 홈에서는 #detail이 투명이라
   body 바탕이 그대로 비치고, 낙엽 무늬(.season-layer)는 그 위에 떠 있다. 계절 바탕색(body[data-season])보다
   뒤에 선언해 홈에서는 이 색이 이긴다. */
body.is-home {
  background-color: var(--home-bg);
}

/* 머리띠 감사사례 상시 단추 — 글씨 크기 단추 왼쪽, 알약 모양 */
.topbar-audit-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--teal-border);
  border-radius: 999px;
  background: var(--teal-bg);
  color: var(--teal);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-audit-btn:hover {
  border-color: var(--teal);
}

.topbar-audit-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* 최상위 홈에서는 숨긴다(2026-09-30~) — 홈 업무분야 카드 줄에 감사사례 곁칸이 이미 있어 겹친다.
   body.is-home은 업무목록(#/list) 화면에서만 켜지므로(js/main.js showSidebarLayout) 도메인ㆍ세부업무ㆍ
   항목 화면에서는 그대로 보인다. */
body.is-home .topbar-audit-btn {
  display: none;
}

/* 「참고자료」 줄: 사이트 캐러셀 + 오른쪽 감사사례 곁칸. 좁은 폭에서는 곁칸이 아래로 내려간다. */
.home-ref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-3);
  align-items: stretch;
}

.home-ref-row > .home-links-carousel {
  min-width: 0;
}

.home-audit-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--teal-border);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  background: var(--teal-bg);
  cursor: pointer;
}

.home-audit-aside-icon {
  width: 26px;
  height: 26px;
  color: var(--teal);
}

.home-audit-aside-icon svg {
  width: 100%;
  height: 100%;
}

.home-audit-aside-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 칸 전체가 단추(2026-10-13~, js/homeView.js renderAuditAside) — 단추 기본 모양을 지우고 카드처럼 */
button.home-audit-aside {
  width: 100%;
  min-width: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

button.home-audit-aside:hover {
  border-color: var(--teal);
}

button.home-audit-aside:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.home-audit-aside-title {
  font-size: var(--fs-lg); /* 업무분야 카드 이름과 같은 칸(2026-10-13) */
  font-weight: 700;
  color: var(--teal);
}

.home-audit-aside-desc {
  font-size: var(--fs-sm); /* 2026-10-13 --fs-xs → --fs-sm */
  color: var(--text-muted);
  line-height: 1.5;
}

.home-audit-aside-btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 16px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.home-audit-aside-btn:hover {
  background: #265a52;
}

.home-audit-aside-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .home-ref-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- 꼬리말(.foot, 2026-09-13~) — 시안 사이트-꼬리말-시안.html ㉯ 구조 그대로 ----------
   자주 찾는 사이트 글씨 링크 한 줄(왼쪽 라벨), 아래 eVPN 안내, 맨 아랫줄 펴낸 곳ㆍ기준일ㆍ최종수정.
   색은 사이트 토큰. 모든 화면에 따라다니며, 홈이 아닌 화면에서는 위 3단(.site-footer-grid)만 감춘다. */
.site-footer-compact .site-footer-grid {
  display: none;
}

.foot {
  background: var(--page-bg);
  border-top: 1px solid var(--border);
  padding: 15px 22px 17px;
  margin-top: var(--space-3);
}

.site-footer-compact .foot {
  margin-top: var(--section-gap);
}

.footrow {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* eVPN 안내 줄. 2026-09-22에 사이 「스스로 점검」 줄을 빼면서, 바로 위 「자주 찾는 사이트」 줄에
   딸린 설명임이 드러나도록 줄 사이를 8px에서 4px로 좁혔다(빈 .lb는 그대로 둬 링크 칸과 왼쪽을
   맞춘다). 아래 .footmeta와는 원래 간격이라 두 덩어리가 그대로 갈린다. */
.footrow-note {
  margin-top: 4px;
}

.footrow .lb {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-muted);
  flex: 0 0 auto;
  padding-top: 1px;
  /* 글씨를 --fs-xs에서 --fs-md로 키우면서(2026-09-17) "자주 찾는 사이트" 일곱 글자가 88px
     안에서 두 줄로 접혀 함께 넓혔다. 아래 안내 줄의 빈 .lb도 같은 너비라 두 줄이 계속 맞는다.
     108px에서는 글자 크기 단추를 「가⁺⁺」로 올렸을 때 글자 폭과 칸 폭이 딱 같아 여유가 0이었다 —
     기기ㆍ브라우저에 따라 두 줄로 접힐 수 있어 116px로 넓히고 nowrap으로 못을 박았다. */
  width: 116px;
  white-space: nowrap;
}

.links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.links a {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}

.links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.links s {
  text-decoration: none;
  color: var(--border-strong);
  font-size: var(--fs-md);
}

.links-disabled {
  font-size: var(--fs-md);
  color: var(--text-faint);
}

.links-note {
  display: block;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.footmeta {
  margin-top: 12px;
  padding-top: 11px;
  /* 안내 줄과 펴낸 곳 사이 구분선. --border(#dde7f3)는 이 자리에서 거의 안 보여
     한 단계 진한 --border-strong(#c3d3e8)으로 바꿨다(2026-09-17). */
  border-top: 1px solid var(--border-strong);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footmeta b {
  /* 줄 전체가 --text-muted로 진해진 만큼 라벨은 한 단계 더 진하게 둬서 값과 구분한다. */
  color: var(--text);
  font-weight: 700;
}

/* 펴낸 곳 줄 아래 「공식 매뉴얼이 아님」 안내(2026-10-12~, data/site-notice.json). 꼬리말 안내 줄(.links-note)과
   같은 크기ㆍ색으로 두되, 배포 전 검증판임을 놓치지 않게 왼쪽에 알아두기 박스와 같은 주황 세로선을 붙인다. */
.foot-notice {
  margin: 10px 0 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--warn-border);
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.foot-notice[hidden] {
  display: none;
}

.foot-notice li::before {
  content: '※ ';
  color: var(--text-faint);
}

/* 업무분야 아래 감사사례 한 줄 카드(시안 ㉯ sidecard 가로형) — .home-audit-aside를 가로로 눕힌 것 */
.home-audit-row {
  flex-direction: row;
  align-items: center;
  gap: 11px;
  margin-top: var(--space-3);
  padding: 11px 14px;
}

.home-audit-row .home-audit-aside-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 마지막 줄이 1/3 칸이 되면서 설명이 두 줄로 접혀 카드가 위 3×3 격자(80px)보다 높아졌다 — 한 줄로 자르고
   말줄임표를 붙인다(전체 문장은 title 속성으로, js/homeView.js renderAuditAside). 2026-09-17. */
.home-tabs-bottom .home-audit-row .home-audit-aside-desc {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-audit-row .home-audit-aside-btn {
  margin: 0 0 0 auto;
  align-self: center;
  /* 마지막 줄이 1:1:1이 되면서(2026-09-17, 업무QUIZ 카드) 칸이 좁아져 「보기」가 두 줄로 접히던 것을 막는다. */
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .footrow .lb {
    width: 100%;
  }
}

/* ---------- 화면 깊이별 색 규칙(2026-09-13, 시안 위계규칙-시안.html) ----------
   바탕은 메인ㆍ중분류ㆍ항목 모두 미색(--paper), 카드는 흰색. 색이 쓰이는 넓이로 깊이를 나타낸다 —
   메인은 아홉 색 모두, 중분류(도메인 홈ㆍ세부업무)는 그 도메인 색 하나(--dom: 머리띠 구분선ㆍ제목 왼쪽 막대ㆍ
   세부업무 카드 띠ㆍ소제목 밑줄), 항목은 빵부스러기와 제목 밑줄에만 가늘게.
   도메인 색(--field-dom-N)은 메인 카드 띠 색(--field-base-N)보다 한 단계 진한 값 — 흰 바탕 글씨 대비 4.5:1 이상. */
:root {
  --paper: var(--bg);
  --field-dom-1: #285fa5; /* 학교회계예산결산 — 띠 #2f6fc0 → 6.42:1 */
  --field-dom-2: #1b7760; /* 계약관리 — 띠 #1f8a70 → 5.45:1 */
  --field-dom-3: #a96522; /* 물품관리 — 띠 #d9822b → 4.59:1 */
  --field-dom-4: #5c4eb5; /* 국공유재산관리 — 띠 #6b5bd2 → 6.54:1 */
  --field-dom-5: #8d711b; /* 학교발전기금 — 띠 #c9a227 → 4.66:1 */
  --field-dom-6: #a74578; /* 학교운영위원회 — 띠 #c2508c → 5.58:1 */
  --field-dom-7: #c14a5c; /* 교육공무직원 — 띠 #e0566b → 4.77:1 */
  --field-dom-8: #318442; /* 교직원 급여·복지 — 띠 #3a9d4f → 4.66:1 */
  --field-dom-9: #a53125; /* 산업안전 및 중대재해 예방 — 띠 #c0392b → 6.85:1 */
  --field-dom-10: #116b7e; /* 채권관리 — 띠 #0d7d94 → 6.13:1 */
  --field-dom-11: #227f94; /* 학교회계 지출 — 띠 #2a9bb5 → 4.63:1 */
  --field-dom-12: #36458c; /* 지방공무원 인사 — 띠 #3f4fa0 → 8.80:1 */

  /* 파스텔 면 위에 얹는 글자색(2026-09-20~, 도구 카드ㆍ앱 배너). --field-dom-N보다 한 단계
     더 어둡다 — 도구 카드 바탕이 기준색 10% 틴트라 --field-dom-N으로는 물품관리(4.18)ㆍ
     교직원 급여ㆍ복지(4.17)ㆍ교육공무직원(4.23)ㆍ학교발전기금(4.31)이 AA(4.5:1)에 미달했다.
     아래 값은 모두 그 틴트 위에서 5.85:1 이상이다. */
  --field-deep-1: #1b406f; /* 학교회계예산결산 — 9.18:1 */
  --field-deep-2: #114b3d; /* 계약관리 — 8.85:1 */
  --field-deep-3: #8a5115; /* 물품관리 — 5.85:1 */
  --field-deep-4: #3e357a; /* 국공유재산관리 — 9.24:1 */
  --field-deep-5: #6f590f; /* 학교발전기금 — 6.24:1 */
  --field-deep-6: #7a2f58; /* 학교운영위원회 — 7.82:1 */
  --field-deep-7: #8c2b3b; /* 교육공무직원 — 7.38:1 */
  --field-deep-8: #1c5b2b; /* 교직원 급여·복지 — 7.29:1 */
  --field-deep-9: #7a241a; /* 산업안전 및 중대재해 예방 — 8.64:1 */
  --field-deep-10: #074551; /* 채권관리 — 9.30:1. 시안은 감사사례 청록을 빌렸으나
                               기준색 #0d7d94가 따로 있으므로 그 색을 어둡게 썼다. */
  --field-deep-11: #185867; /* 학교회계 지출 — 7.18:1 */
  --field-deep-12: #283470; /* 지방공무원 인사 — 9.92:1 */

  --dom: var(--accent); /* 홈: 도메인 없음 → 기본 파랑 */
  --dom-base: var(--accent); /* 기준색(파스텔 면ㆍ테두리ㆍ아이콘 원의 재료) */
  --dom-deep: var(--accent-hover); /* 파스텔 면 위 글자색 */
}

/* 화면이 속한 도메인(body[data-field], js/main.js showSidebarLayout)마다 --dom 값만 바뀐다. */
body[data-field="accounting"] { --dom: var(--field-dom-1); --dom-base: var(--field-base-1); --dom-deep: var(--field-deep-1); }
body[data-field="contract"] { --dom: var(--field-dom-2); --dom-base: var(--field-base-2); --dom-deep: var(--field-deep-2); }
body[data-field="goods"] { --dom: var(--field-dom-3); --dom-base: var(--field-base-3); --dom-deep: var(--field-deep-3); }
body[data-field="property"] { --dom: var(--field-dom-4); --dom-base: var(--field-base-4); --dom-deep: var(--field-deep-4); }
body[data-field="school-fund"] { --dom: var(--field-dom-5); --dom-base: var(--field-base-5); --dom-deep: var(--field-deep-5); }
body[data-field="school-committee"] { --dom: var(--field-dom-6); --dom-base: var(--field-base-6); --dom-deep: var(--field-deep-6); }
body[data-field="hr-service"] { --dom: var(--field-dom-7); --dom-base: var(--field-base-7); --dom-deep: var(--field-deep-7); }
body[data-field="payroll"] { --dom: var(--field-dom-8); --dom-base: var(--field-base-8); --dom-deep: var(--field-deep-8); }
body[data-field="industrial-safety"] { --dom: var(--field-dom-9); --dom-base: var(--field-base-9); --dom-deep: var(--field-deep-9); }
body[data-field="debt-management"] { --dom: var(--field-dom-10); --dom-base: var(--field-base-10); --dom-deep: var(--field-deep-10); }
body[data-field="school-expenditure"] { --dom: var(--field-dom-11); --dom-base: var(--field-base-11); --dom-deep: var(--field-deep-11); }
body[data-field="local-hr"] { --dom: var(--field-dom-12); --dom-base: var(--field-base-12); --dom-deep: var(--field-deep-12); }
body[data-field="audit-cases"] { --dom: var(--teal); --dom-base: var(--teal); --dom-deep: #1b403b; }

/* 머리띠 구분선 — 도메인 안에서는 도메인 색 */
body[data-field] #topbar {
  border-bottom-color: var(--dom);
}

/* 빵부스러기의 도메인 칸 */
body[data-field] .breadcrumb-field {
  color: var(--dom);
  font-weight: 700;
}

/* 중분류(도메인 홈ㆍ세부업무): 제목 왼쪽 색 막대 + 소제목 밑줄 */
body[data-screen="field"] .overview-header h2,
body[data-screen="subtask"] .detail-header h2 {
  padding-left: 12px;
  border-left: 4px solid var(--dom);
  border-radius: 2px;
}

body[data-screen="field"] .overview-header,
body[data-screen="subtask"] .detail-header {
  border-bottom-color: var(--dom);
}

body[data-screen="field"] .section-heading,
body[data-screen="subtask"] .section-heading {
  border-bottom-color: var(--dom);
}

/* 세부업무 카드ㆍ배지 — 여러 색 돌려 쓰지 않고 도메인 색 하나.
   왼쪽 4px 막대는 기준색(--dom-base)을 써서 홈 카드와 같은 색으로 보이게 하고,
   번호 원 글자만 파스텔 위에서 읽히도록 진한 값(--dom-deep)을 쓴다(2026-09-20~). */
.overview-card-dom {
  --card-base: var(--dom-base);
}

.overview-card-dom .overview-card-badge {
  color: var(--dom-deep);
}

/* 항목(본문): 색은 빵부스러기와 제목 밑줄에만 가늘게 */
body[data-screen="item"] .detail-header {
  border-bottom: 1px solid var(--dom);
}
/* 어두운 화면(:root[data-theme="dark"] — 지금 사이트는 밝은 화면 하나이지만, 그 속성이 켜지면 같은 규칙이 그대로 선다):
   바탕은 어두운 미색, 도메인 색은 어두운 바탕에서 글씨로 읽히도록 한 단계 밝힌 값. --dom 매핑ㆍ적용 규칙은 위와 같다. */
:root[data-theme="dark"] {
  --paper: #15181e;
  --field-dom-1: #8fb4e8;
  --field-dom-2: #6fc3a9;
  --field-dom-3: #e2a866;
  --field-dom-4: #b3a6ec;
  --field-dom-5: #d9bb5a;
  --field-dom-6: #e08fc0;
  --field-dom-7: #ef9aa6;
  --field-dom-8: #8fd39f;
  --field-dom-9: #ef9a8f;
  --field-dom-10: #6fbcd3;
  --field-dom-11: #61b5c8;
  --field-dom-12: #a3abd6;

  /* 에듀파인 화면 안내 — 어두운 바탕에서 글씨로 읽히도록 한 단계 밝힌 값. */
  --edu: #2fb18c;
  --edu-deep: #7fe0c2;
  --edu-pale: #132923;
  --edu-line: #2e5348;
  --edu-num: #e2595e;

  /* 큰갈래 색 다섯 칸 — 어두운 바탕용. 진한 값은 밝게, 옅은 바탕은 어둡게 뒤집는다. */
  --edu-c1: #2fb18c; --edu-c1-pale: #132923; --edu-c1-line: #2e5348;
  --edu-c2: #6fa3e6; --edu-c2-pale: #161f2c; --edu-c2-line: #31465f;
  --edu-c3: #d9a760; --edu-c3-pale: #2a2116; --edu-c3-line: #5a4629;
  --edu-c4: #b3a6ec; --edu-c4-pale: #1d1a2e; --edu-c4-line: #3b3566;
  --edu-c5: #e08fc0; --edu-c5-pale: #2b1a24; --edu-c5-line: #5a3349;
}

/* ---------- 진행 점검표 scheduleView(renderProceduresTable + proceduresTiming, 2026-09-13~) ----------
   시안 「선출일정-점검표-시안」 ㉰의 .setup(기준일 칸ㆍ진행률)ㆍ.ci(체크ㆍD-day + 날짜ㆍ업무명ㆍ서식) 짜임을
   기존 절차 표(.procedure-table) 위에 얹은 것. 표를 그대로 둔 까닭은 행을 펼쳤을 때의 상세 패널
   (.procedure-row-detail)을 그대로 쓰기 위해서다. 색은 도메인 색(--dom)ㆍ주말 붉음(--danger)ㆍ
   이레 안 연노랑(--point-bg)만 쓴다. 입력값ㆍ체크는 화면 안에서만 계산되고 저장하지 않는다. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.schedule-setup {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
  padding: 12px 13px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.schedule-field {
  display: block;
}

.schedule-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.schedule-input {
  padding: 7px 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
}

.schedule-input:focus-visible {
  outline: 2px solid var(--dom);
  outline-offset: 2px;
}

.schedule-input-year {
  width: 9em;
}

.schedule-progress {
  margin-left: auto;
  text-align: right;
}

.schedule-progress b {
  font-size: var(--fs-lg);
  color: var(--dom);
}

.schedule-progress small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 막대 — 인라인 style 없이 값을 바꾸기 위해 네이티브 <progress>를 쓴다. */
.schedule-bar {
  display: block;
  width: 150px;
  max-width: 100%;
  height: 6px;
  margin-top: 5px;
  margin-left: auto;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--border);
  accent-color: var(--dom);
}

.schedule-bar::-webkit-progress-bar {
  background: var(--border);
  border-radius: 99px;
}

.schedule-bar::-webkit-progress-value {
  background: var(--dom);
  border-radius: 99px;
  transition: width 0.2s;
}

.schedule-bar::-moz-progress-bar {
  background: var(--dom);
  border-radius: 99px;
}

/* 체크 칸(count 모드의 첫 열) — 펼침 삼각형은 둘째 열(단계)로 옮긴다. */
.schedule-table .schedule-check-cell {
  width: 1%;
  min-width: 0;
  padding-right: 4px;
  text-align: center;
  white-space: nowrap;
}

.schedule-check {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--dom);
  cursor: pointer;
}

.schedule-check:focus-visible {
  outline: 2px solid var(--dom);
  outline-offset: 2px;
}

.schedule-table.is-count .procedure-row td:first-child {
  padding-left: 10px;
}

.schedule-table.is-count .procedure-row td:first-child::before {
  content: none;
}

.schedule-table.is-count td:nth-child(2),
.schedule-table.is-count th:nth-child(2) {
  width: 1%;
  min-width: 0;
  white-space: nowrap;
}

.schedule-table.is-count .procedure-row td:nth-child(2) {
  position: relative;
  padding-left: 22px;
}

.schedule-table.is-count .procedure-row td:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent var(--sec-procedure);
}

.schedule-table.is-count .procedure-row.is-open td:nth-child(2)::before {
  border-width: 5px 4px 0 4px;
  border-color: var(--sec-procedure) transparent transparent transparent;
}

/* 열이 하나 밀렸으므로 업무명(3열)은 줄바꿈 허용, 시기ㆍ별지서식(4ㆍ5열)은 한 줄. */
.schedule-table.is-count td:nth-child(3),
.schedule-table.is-count th:nth-child(3) {
  white-space: normal;
}

.schedule-table.is-count td:nth-child(5),
.schedule-table.is-count th:nth-child(5) {
  white-space: nowrap;
}

/* 시기 칸 — 원문 시기(D-20) 아래 계산한 날짜ㆍ요일 */
.schedule-period {
  display: block;
  font-weight: 700;
  color: var(--dom);
}

.schedule-date {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-faint);
}

.schedule-wd.is-weekend {
  color: var(--danger);
  font-weight: 700;
}

/* 이레 안에 닥친 단계는 연노랑, 마친 단계는 옅게 + 취소선 */
.schedule-table .procedure-row.is-soon {
  background: var(--point-bg);
}

.schedule-table .procedure-row.is-done {
  background: var(--bg);
}

.schedule-table .procedure-row.is-done td:nth-child(3) {
  color: var(--text-faint);
  text-decoration: line-through;
}

.schedule-table .procedure-row.is-open {
  background: var(--accent-bg);
}

.schedule-privacy {
  margin: 9px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .schedule-progress {
    margin-left: 0;
    text-align: left;
  }

  .schedule-bar {
    margin-left: 0;
  }
}

/* 인쇄 — 모든 행을 펼친다. 입력 칸ㆍ체크는 그대로 찍힌다(값이 보이도록). */
@media print {
  .schedule-view .procedure-row-detail {
    display: table-row;
  }

  .schedule-view .procedure-row td:first-child::before,
  .schedule-view .schedule-table.is-count .procedure-row td:nth-child(2)::before {
    content: none;
  }

  .schedule-bar::-webkit-progress-value {
    transition: none;
  }
}

/* ---------- 홈 한가위 한시 배너 (2026-09-14 ~ 09-26, js/chuseokBackground.js) ----------
   기간 판정은 저 파일 맨 위 상수 한 줄이 맡고, 기간 밖이면 아래 규칙들은 아무 대상도 갖지 않는다.
   2026-09-20부터 가을 들판 그림(assets/img/banner-autumn-field.webp, 2400×527 — 풀밭과 오른쪽 나무)
   한 장을 본문 스크롤 영역 맨 위에 가로로 길게 깐다 — 그림만 보이고 문구는 없다. 그 전의 오른쪽 위
   「모서리 야경」(어둠ㆍ보름달ㆍ별ㆍ구름ㆍ인사 문구, 2026-09-13~19)은 그림으로 바꾸면서 전부 뺐다.
   (같은 날 기와 담장 그림 banner-roof-fence.webp를 잠깐 썼다가 원래 정한 가을 들판으로 되돌림.) */

/* 홈에서는 #detail의 가로 넘침을 감춘다(세로 스크롤은 그대로) — 1px 오차로 가로 스크롤이 생기지 않게. */
body.is-home #detail {
  position: relative;
  overflow-x: hidden;
}

/* 배너 — #detail 첫 자식으로 흐름 안에 놓인다. 폭은 본문(업무분야 카드 등)과 같은 정렬 컨테이너
   (.page-container: max-width --page-max, 좌우 --page-pad)의 안쪽 폭에 맞추고 가운데 정렬한다 —
   화면이 아무리 넓어도 본문 폭(1280 − 24×2)을 넘지 않는다. 높이는 px로 고정하지 않고 그림 파일의
   가로:세로(2400×527) 그대로 aspect-ratio로 잡으므로 어느 폭에서도 풀(아래)과 나무(오른쪽 위)가
   잘리지 않는다(2026-09-20 — 높이 고정 → max-height 220px 순으로 써 봤지만 둘 다 cover가 위아래를
   잘라내서 폭 제한으로 바꿈). 그림을 바꾸면 aspect-ratio 숫자도 그 파일의 실제 픽셀 크기로 함께 바꾼다. */
.chuseok-banner {
  width: calc(100% - 2 * var(--page-pad));
  max-width: calc(var(--page-max) - 2 * var(--page-pad));
  margin: 0 auto 28px;
  height: auto;
  aspect-ratio: 2400 / 527;
  background: var(--accent-bg) url("../assets/img/banner-autumn-field.webp") center / cover no-repeat;
  /* 바람결 겹ㆍ낙엽(아래)의 기준 상자. overflow:hidden으로 기울어진 겹과 낙엽이 그림 밖으로
     새지 않게 하고, isolation으로 겹치기 문맥을 배너 안에 가둔다. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ---- 바람결(2026-09-21~, js/chuseokBackground.js) ----
   그림 파일은 그대로 두고, 같은 그림을 배경으로 깐 겹 4개를 배너 위에 절대배치로 얹는다.
   background: inherit라 배너와 같은 파일ㆍ같은 cover 계산이라 겹이 밑그림과 정확히 포개진다.
   clip-path로 뒷풀(66%↓)ㆍ중간풀(74%↓)ㆍ앞풀(82%↓)ㆍ나무(오른쪽 82.5%→)만 남기고, 뿌리(아래
   가운데 / 나무는 줄기 밑동 95%)를 축으로 skewX만 흔든다 — width·top을 건드리면 매 프레임
   다시 계산하느라 버벅인다. 잘라내는 높이는 실제 그림(2400×527)에서 풀 끝이 시작되는 자리
   (약 68%)에 맞춰 눈으로 잡은 값이다. 주기를 서로 엇갈리게(8 / 6.4 / 5.2 / 11초) 둔 것이
   핵심이며, 겹은 전부 pointer-events:none이라 아무것도 가리지 않는다. */
.chuseok-banner-layer {
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 50% 100%;
  will-change: transform;
  pointer-events: none;
}

.chuseok-banner-grass-back {
  clip-path: inset(66% 0 0 0);
  animation: chuseok-sway-back 8s ease-in-out infinite;
}

.chuseok-banner-grass-mid {
  clip-path: inset(74% 0 0 0);
  animation: chuseok-sway-mid 6.4s ease-in-out -1.4s infinite;
}

.chuseok-banner-grass-front {
  clip-path: inset(82% 0 0 0);
  animation: chuseok-sway-front 5.2s ease-in-out -0.7s infinite;
}

.chuseok-banner-tree {
  clip-path: inset(0 0 0 82.5%);
  transform-origin: 95% 100%;
  animation: chuseok-sway-tree 11s ease-in-out -2s infinite;
}

@keyframes chuseok-sway-back {
  0%, 100% { transform: skewX(-0.55deg); }
  50% { transform: skewX(0.55deg); }
}

@keyframes chuseok-sway-mid {
  0%, 100% { transform: skewX(0.85deg); }
  50% { transform: skewX(-0.85deg); }
}

@keyframes chuseok-sway-front {
  0%, 100% { transform: skewX(-1.25deg); }
  50% { transform: skewX(1.25deg); }
}

@keyframes chuseok-sway-tree {
  0%, 100% { transform: skewX(-0.3deg) rotate(-0.12deg); }
  50% { transform: skewX(0.3deg) rotate(0.12deg); }
}

/* ---- 낙엽 ----
   .chuseok-leaf는 배너 높이만큼의 세로 띠(폭 9px)이고, 낙엽 조각은 그 띠 맨 위의 ::before다.
   띠를 translateY(%)로 내리면 %가 띠 자신의 높이 = 배너 높이 기준이 되어, 낙하 거리를 px로
   박지 않아도 화면 폭이 어떻든 그림 위에서 시작해 그림 아래까지 떨어진다(JS로 높이를 읽어
   변수에 넣는 방법은 인라인 style 금지 규칙과 창 크기 변경 대응이 걸려 쓰지 않았다).
   회전(420°)과 가로 흐름(−90px)은 조각(::before)이 맡는다 — 띠를 돌리면 큰 호를 그린다.
   낙엽마다 다른 가로 위치ㆍ색ㆍ크기ㆍ주기ㆍ시작시각은 js가 만든 <style>의 .chuseok-leaf-N이 준다. */
.chuseok-leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.chuseok-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  will-change: transform;
  animation: chuseok-leaf-fall linear infinite;
}

.chuseok-leaf::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 7px;
  border-radius: 9px 2px 9px 2px;
  opacity: 0.82;
  animation: chuseok-leaf-drift linear infinite;
}

@keyframes chuseok-leaf-fall {
  0% { transform: translate3d(0, -6%, 0); }
  100% { transform: translate3d(0, 104%, 0); }
}

@keyframes chuseok-leaf-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-90px, 0, 0) rotate(420deg); }
}

/* 인사 띠 — 안내 문구ㆍ검색 아래, 업무분야 카드 위. 오른쪽 알약은 js가 남은 날을 세어 채운다. */
.chuseok-greet {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(100deg, #fdf7e8, #fbf1dc);
  border: 1px solid #eedfbb;
}

.chuseok-greet-moon {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, #fffefa 0%, #fcf6e2 40%, #ecdfb8 100%);
  box-shadow: inset -3px -4px 7px rgba(150, 128, 80, .3), 0 0 0 4px rgba(253, 243, 212, .5);
}

.chuseok-greet-text {
  min-width: 0;
}

.chuseok-greet b {
  font-size: var(--fs-sm);
  color: #7a5b1e;
  font-family: "Nanum Myeongjo", "나눔명조", "Batang", "바탕", serif;
}

.chuseok-greet small {
  display: block;
  font-size: var(--fs-xs);
  color: #96793f;
  font-weight: 400;
}

.chuseok-greet-dday {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #7a5b1e;
  background: #fff;
  border: 1px solid #eedfbb;
  border-radius: 999px;
  padding: 2px 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 좁은 화면(≤640px): 높이는 비율이 정하므로 아래 여백만 줄인다. */
@media (max-width: 640px) {
  .chuseok-banner {
    margin-bottom: 20px;
  }
}

/* 「움직임 줄이기」: 바람결 겹은 멈추고 낙엽은 숨긴다(js도 이 조건이면 겹ㆍ낙엽을 아예 만들지
   않는다 — 여기는 설정을 나중에 바꾼 경우의 안전장치). */
@media (prefers-reduced-motion: reduce) {
  .chuseok-banner-layer,
  .chuseok-leaf,
  .chuseok-leaf::before {
    animation: none;
  }

  .chuseok-leaves {
    display: none;
  }
}

/* 인쇄 시 배너는 숨긴다. */
@media print {
  .chuseok-banner {
    display: none;
  }
}

/* ---------- 항목 화면 글씨ㆍ색 계층(시안 항목화면-글씨색-규격.html 맨 아래 규격표, 2026-09-14~) ----------
   항목(item) 화면은 위계 규칙(2026-09-13)에서 "색이 거의 없는 층"이다. 그런데 실제 화면은
   절 제목이 컴포넌트마다 크기ㆍ아이콘ㆍ색이 제각각이고(19px 색 배지 아이콘 / 14.5px 파랑 글씨 /
   12.5px 먹색), 도식 칸 글씨도 칸마다 색이 달랐다. 아래 한 곳에서 항목 화면 전체의 글씨 크기와
   색을 한 줄로 세운다 — 도메인을 가리지 않는 공용 층이라 body[data-screen="item"]에만 걸고,
   컴포넌트별 규칙(.rf-*, .sf-*, .notes-* 등)은 그대로 두고 이 층이 덮어쓴다.

   규격(시안 표 → 2026-09-15 여섯 칸 사다리로 흡수)
     절 제목      --fs-lg  16px / 700  먹색(--text) · 아이콘 14px 회색(--text-faint) · 아래 1px 선
     소제목       --fs-md  14px / 700  --text-muted
     본문ㆍ목록    --fs-md  14px / 400  --text-muted (강조는 색이 아니라 굵게 ＋ 먹색)
     도식 칸 머리  --fs-sm  12.5px / 700  --text · 바탕 회색
     도식 칸 내용  --fs-sm  12.5px / 400  --text-muted (칸마다 다른 색을 쓰지 않음)
     서식 알약     --fs-xs  11.3px / 700  도메인 색(--dom)
     근거 줄      --fs-xs  11.3px / 400  --text-faint
     알아두기     제목 --fs-md / 700 먹색 · 본문 --fs-md(2026-09-15 통일) · 흰 바탕 ＋ 왼쪽 도메인 색 띠

   도메인 색(--dom)은 도식 화살표ㆍ서식 알약ㆍ알아두기 왼쪽 띠 세 곳에만, 파랑(--accent)은
   링크에만 쓴다.

   시안 원안(2026-09-14)은 14.5ㆍ12.6ㆍ12.9ㆍ11.8ㆍ12.2ㆍ10.8ㆍ11.2ㆍ12.5px처럼 사다리 사이 값이라
   --it-* 아홉 개를 따로 두고 글자 크기 단추마다 +1/+2px씩 다시 적었는데, 눈으로 구별되지 않는
   값이 열 가지 넘게 흩어져 화면마다 비율이 어긋나는 원인이 됐다. 2026-09-15에 --it-*를 없애고
   각 줄을 가장 가까운 칸(역할이 정해진 것은 그 칸)으로 옮겼다 — 소제목ㆍ본문은 같은 칸(--fs-md)에
   두고 굵기ㆍ색으로만 구분한다. */
/* ① 절 제목 — 크기ㆍ아이콘ㆍ밑줄을 셋 다 같게. 아이콘은 색 배지를 벗기고 회색 선 그림만 남긴다
   (섹션 종류별 색 배지 .section-overview/.section-legal/… 은 중분류 화면에서 계속 쓴다). */
body[data-screen="item"] .section-heading {
  gap: 7px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--heading);
  border-bottom: 1px solid var(--border);
}

body[data-screen="item"] .section-icon {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: none;
  color: var(--text-faint);
}

body[data-screen="item"] .section-icon svg {
  width: 14px;
  height: 14px;
}

/* 3D 그림 아이콘(2026-10-13~)은 14px로 줄이면 알아볼 수 없어 제목 글자보다 조금 크게 둔다 */
body[data-screen="item"] .section-icon.section-icon-3d {
  width: 24px;
  height: 24px;
}

/* ② 소제목 — 컴포넌트마다 달랐던 크기ㆍ색을 하나로. .flow-list-heading은 파랑이었다.
   .notes-subheading의 왼쪽 세로선은 규격표가 다루지 않아 그대로 둔다(깊이 표시 장치). */
body[data-screen="item"] .overview-block-heading,
body[data-screen="item"] .flow-list-heading,
body[data-screen="item"] .callout-heading,
body[data-screen="item"] .body-block-heading {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-muted);
}

/* .notes-subheading은 2026-09-22 본문 소제목 A안에서 빠졌다 — 굵기 800ㆍ도메인 진한 색ㆍ
   왼쪽 도메인 색 막대 세 가지로 본문과 가른다(위 .notes-subheading 규칙). 크기는 규격표와
   같은 --fs-md 그대로라 사다리는 건드리지 않는다. */
body[data-screen="item"] .notes-subheading {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--dom-deep);
}

/* ③ 본문ㆍ목록 — 강조는 색이 아니라 굵게 ＋ 먹색. */
body[data-screen="item"] .notes-list li,
body[data-screen="item"] .flow-list-items li,
body[data-screen="item"] .callout-list li,
body[data-screen="item"] .concept-block-body,
body[data-screen="item"] .body-block-intro,
/* :not(.notes-source) — 출처 줄(.notes-source)도 .overview-blocks 바로 아래 <p>라 이 규칙이 아래 ⑥ 근거 줄
   (--fs-xs) 규칙을 우선순위로 덮어 본문 크기로 보였다(2026-09-15 발견). 참조표 주의 줄(.ref-table-warn)도
   같은 자리의 <p>라 경고색이 --text-muted로 덮이므로 함께 뺀다. */
body[data-screen="item"] .overview-blocks > p:not(.notes-source):not(.ref-table-warn) {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

body[data-screen="item"] .notes-list li b,
body[data-screen="item"] .notes-list li strong,
body[data-screen="item"] .flow-list-items li b,
body[data-screen="item"] .callout-list li b,
body[data-screen="item"] .concept-block-body b,
body[data-screen="item"] .callout-strong {
  color: var(--text);
  font-weight: 700;
}

/* ④ 도식ㆍ표의 칸 머리와 칸 내용 — 칸마다 다른 색을 쓰지 않는다. */
body[data-screen="item"] .rf-who,
body[data-screen="item"] .sf-box .sf-h,
body[data-screen="item"] .label-table th,
body[data-screen="item"] .data-table th {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

body[data-screen="item"] .rf-act,
body[data-screen="item"] .sf-box .sf-b,
body[data-screen="item"] .sf-br .sf-b,
body[data-screen="item"] .label-table td,
body[data-screen="item"] .data-table td {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
}

body[data-screen="item"] .label-table td b,
body[data-screen="item"] .data-table td b {
  color: var(--text);
}

/* ⑤ 서식 알약 — 딸린 서식이 있는 칸에만, 도메인 색으로. 파일형식 배지(.form-type-badge)도
   같은 규격에 맞춘다(보라색 --sec-form을 항목 화면에서만 도메인 색으로 바꾼다). */
body[data-screen="item"] .rf-tag,
body[data-screen="item"] .form-type-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom);
}

body[data-screen="item"] .form-type-badge {
  border-color: var(--dom);
}

/* ⑥ 근거 줄 */
body[data-screen="item"] .notes-source {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ⑦ 알아두기 — 노란 채움을 없애고 흰 바탕 ＋ 왼쪽 도메인 색 띠로. 안쪽 소제목은 왼쪽 세로선
   없이 먹색 굵은 글씨만 쓴다(박스 자체가 이미 왼쪽 띠를 갖고 있어 선이 두 겹이 된다). */
body[data-screen="item"] .overview-callout-notes {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--dom);
  border-radius: 0 9px 9px 0;
}

/* 알아두기 박스 안에서도 막대를 둔다(2026-09-22 A안) — 막대가 「어디부터 어디까지가 한 묶음인지」를
   드러내는 장치라 박스 안에서도 필요하다. 그 전에는 박스 안에서만 막대를 지웠다. */
body[data-screen="item"] .overview-callout-notes .notes-subheading {
  padding-left: 12px;
  border-left: 3px solid var(--dom-base);
  font-size: var(--fs-md);
  color: var(--dom-deep);
}

/* 알아두기 본문은 본문 칸(--fs-md) — 2026-09-14 규격의 12.5px(→sm)를 그대로 옮겼다가 전 도메인에서
   알아두기 불릿만 본문보다 작게 보여 2026-09-15에 본문과 통일했다. */
body[data-screen="item"] .overview-callout-notes .notes-list li {
  font-size: var(--fs-md);
}

/* ⑧ 파랑은 링크에만 — 개념 정의 블록의 순번 배지는 링크가 아니라서 파랑(--accent)을 벗기고
   회색으로 둔다. 도메인 색을 쓸 자리(도식 화살표ㆍ알약ㆍ알아두기 띠) 셋에도 들지 않는다. */
body[data-screen="item"] .concept-block-badge {
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--text) 12%);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ---------- 법령 조회(js/lawViewer.js, 2026-09-16~) ------------------------
   법제처 Open API로 법령을 찾아 조문을 보여 주는 상자. 왼쪽 조문 목록 + 오른쪽
   본문의 두 칸이며, 좁은 화면에서는 위아래로 쌓인다. 조문이 많은 법령(근로기준법
   145개)이 있어 목록 칸은 따로 스크롤한다. 색ㆍ글씨 크기는 기존 토큰만 쓴다. */
.law-viewer {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.law-viewer-title {
  margin: 0 0 12px;
  font-size: var(--fs-lg);
  color: var(--accent);
}
/* 자료 종류 단추(2026-09-23~) — 법령 / 자치법규 / 행정규칙. 고른 값이 법제처 오픈API의
   target이 된다. 모양은 갈래 단추(.branch-tabs-btn)와 같은 알약이되, 법령 조회 안에서만
   쓰므로 .law-* 이름을 따로 둔다. 누름 상태는 aria-pressed로 가린다. */
.law-target-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.law-target-btn {
  padding: 5px 16px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.law-target-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.law-target-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.law-target-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.law-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.law-search-label {
  font-size: var(--fs-sm); /* 2026-10-13 --fs-xs → --fs-sm */
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.law-search-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--panel-bg);
}
.law-search-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
}
.law-search-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.law-status {
  margin: 10px 0 0;
  font-size: var(--fs-md); /* 2026-10-13 --fs-sm → --fs-md(안내 문구) */
  color: var(--text-muted);
}
.law-devnote {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.law-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  border-radius: 0 6px 6px 0;
  background: var(--danger-bg);
  font-size: var(--fs-sm);
  color: var(--danger);
  line-height: 1.6;
}

/* 찾은 법령 목록 */
.law-list { list-style: none; margin: 10px 0 0; padding: 0; }
.law-list-item { margin-bottom: 6px; }
.law-pick {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--pill-bg);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: inherit;
  cursor: pointer;
}
.law-pick:hover { border-color: var(--border-strong); }
.law-pick.on { border-color: var(--accent); background: var(--accent-bg); }
.law-pick-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.law-pick-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 고른 법령의 머리 줄 */
.law-detail:empty { display: none; }
.law-head {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.law-head-link {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.law-head-link:hover { text-decoration: underline; }
.law-head-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 조문 목록 + 본문 */
.law-body {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  align-items: start;
}
.law-filter {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--panel-bg);
}
.law-nav-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.law-nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  padding: 7px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  word-break: keep-all;
}
.law-nav-btn:hover { background: var(--pill-bg); }
.law-nav-btn.on {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
}
.law-article {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.law-article-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.law-article-date {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.law-article-lines { margin-top: 10px; }
.law-line {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text);
  word-break: keep-all;
  white-space: pre-wrap;
}
.law-line:last-child { margin-bottom: 0; }

/* 부칙ㆍ별표(2026-09-23~) — 조문 본문 아래 두 구역과 결과 맨 위 이동 단추.
   여닫기는 <details>만 쓰고, 여닫이 기호(+/−)는 ::after로 넣는다. */
.law-jump-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.law-jump-btn {
  padding: 3px 12px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.law-jump-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.law-jump-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.law-extra {
  margin-top: 18px;
  scroll-margin-top: 80px;
}
.law-body { scroll-margin-top: 80px; }
.law-extra-title {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.law-extra-item,
.law-appendix {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--panel-bg);
}
.law-extra-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}
.law-extra-summary::-webkit-details-marker { display: none; }
.law-extra-summary::after { content: "+"; color: var(--text-faint); font-weight: 400; }
details[open] > .law-extra-summary::after { content: "\2212"; }
.law-extra-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.law-extra-lines { padding: 0 12px 10px; }
.law-appendix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 12px;
}
.law-appendix-name {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
  word-break: keep-all;
}
.law-appendix-label { font-weight: 700; color: var(--accent); }
.law-appendix-files { display: inline-flex; gap: 6px; flex-shrink: 0; }
.law-file-link {
  padding: 1px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}
.law-file-link:hover { border-color: var(--accent); color: var(--accent); }
.law-appendix-more { border-top: 1px solid var(--border); }
.law-appendix-summary { padding: 6px 12px; font-size: var(--fs-xs); font-weight: 600; }
/* 별표 글은 공백으로 줄을 맞춘 표라 줄바꿈하지 않고 가로로 스크롤한다.
   법제처 원문은 괘선(─│)을 한글과 같은 두 칸 폭으로 치는 굴림체 기준이라, Consolas(--mono)로는
   가로선이 반 토막 난다 — 굴림체를 먼저 두고 없는 기기에서만 --mono로 내려간다. */
.law-appendix-pre {
  margin: 0;
  padding: 10px 12px 12px;
  overflow-x: auto;
  font-family: GulimChe, "굴림체", var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text);
  white-space: pre;
  background: var(--page-bg);
  border-radius: 0 0 6px 6px;
}

/* 조회 결과 덮개 창(2026-09-23~) — 고른 법령의 조문ㆍ부칙ㆍ별표를 띄운다(js/lawViewer.js의
   ensureLawModal). 머리 줄(제목 + ×)은 창 위에 고정하고 그 아래만 스크롤한다. 배경ㆍ그림자ㆍz-index는
   법령 원문 PDF 창(.refpdf-modal)과 같은 값을 쓴다. 열려 있는 동안 뒤 페이지(#detail)의 스크롤을 잠근다. */
body.law-modal-open #detail { overflow: hidden; }
.law-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(15, 28, 45, .5);
}
.law-modal-box {
  display: flex; flex-direction: column;
  width: min(960px, 100%); height: 88vh; max-height: 88vh;
  background: var(--panel-bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 28, 45, .3);
}
.law-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.law-modal-title { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--accent); line-height: 1.5; }
.law-modal-x {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 6px; background: none;
  font-family: inherit; font-size: var(--fs-lg); line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.law-modal-x::before { content: "\2715"; }
.law-modal-x:hover { background: var(--pill-bg); color: var(--text); }
.law-modal-x:focus-visible,
.law-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.law-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.law-modal-slot .law-head { margin-top: 0; padding-top: 0; border-top: 0; }
.law-modal-slot .law-body,
.law-modal-slot .law-extra { scroll-margin-top: 8px; }
.law-modal-close {
  display: block; margin: 18px auto 0; padding: 8px 28px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel-bg);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  cursor: pointer;
}
.law-modal-close:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .law-body { grid-template-columns: 1fr; }
  .law-nav-list { max-height: 240px; }
  .law-appendix-head { flex-direction: column; }
  /* 휴대폰에서는 화면 전체를 쓴다. */
  .law-modal { padding: 0; }
  .law-modal-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .law-modal-body { padding: 12px 14px 16px; }
}

/* 홈 화면 「법령 조회」 구역(2026-09-16~) — 업무분야 카드 바로 아래. 안쪽 .law-viewer가
   이미 흰 패널이라 구역 자체에는 배경을 주지 않고 제목과의 간격만 맞춘다. */
.home-law-section .law-viewer { margin-top: 10px; }

/* ── 홈 「연간 업무 캘린더」(2026-09-30~, js/homeCalendarView.js) ──
   업무분야 구역 바로 아래. 항목 색은 새로 정하지 않고 도메인 토큰(--field-dom-N)을 .cal-dom-<id>가 --cal-c로
   받아 왼쪽 막대ㆍ체크 색에 쓴다(범례 줄은 2026-09-30에 뺌). 월간ㆍ주간 두 보기(.cal-grid-week). 내가 추가한 일정은 점선 회색. 휴대폰 폭에서는 달력 격자를
   풀어 날마다 한 줄씩 목록으로 보인다(맨 아래 @media). */
.cal-dom-accounting { --cal-c: var(--field-dom-1); }
.cal-dom-contract { --cal-c: var(--field-dom-2); }
.cal-dom-goods { --cal-c: var(--field-dom-3); }
.cal-dom-property { --cal-c: var(--field-dom-4); }
.cal-dom-school-fund { --cal-c: var(--field-dom-5); }
.cal-dom-school-committee { --cal-c: var(--field-dom-6); }
.cal-dom-hr-service { --cal-c: var(--field-dom-7); }
.cal-dom-payroll { --cal-c: var(--field-dom-8); }
.cal-dom-industrial-safety { --cal-c: var(--field-dom-9); }
.cal-dom-school-expenditure { --cal-c: var(--field-dom-11); }
.cal-dom-local-hr { --cal-c: var(--field-dom-12); }
.cal-dom-debt-management { --cal-c: var(--field-dom-10); }
.cal-dom-common { --cal-c: var(--border-strong); }
.cal-item-custom { --cal-c: var(--danger); }

.cal-status {
  margin: 0;
  padding: var(--space-4);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

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

.cal-nav,
.cal-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cal-tools { flex-wrap: wrap; justify-content: flex-end; }

.cal-month-label {
  margin: 0;
  min-width: 7.5em;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--heading);
}

.cal-nav-btn,
.cal-today-btn,
.cal-restore-btn,
.cal-hide-all-btn {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.cal-nav-btn:hover:not(:disabled),
.cal-today-btn:hover,
.cal-restore-btn:hover,
.cal-hide-all-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cal-nav-btn:disabled { visibility: hidden; }
.cal-nav-prev::before { content: "‹ "; }
.cal-nav-next::after { content: " ›"; }

.cal-nav-btn:focus-visible,
.cal-today-btn:focus-visible,
.cal-hide-all-btn:focus-visible,
.cal-view-btn:focus-visible,
.cal-restore-btn:focus-visible,
.cal-add-btn:focus-visible,
.cal-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 월간ㆍ주간 전환 — 붙은 두 단추, 눌린 쪽(aria-pressed)만 파랑으로 채운다. */
.cal-view-switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}

.cal-view-btn {
  min-height: 32px;
  padding: 4px 14px;
  border: none;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.cal-view-btn + .cal-view-btn { border-left: 1px solid var(--border-strong); }
.cal-view-btn:hover { color: var(--accent); }

.cal-view-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--panel-bg);
}

.cal-source {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 사용설명(2026-10-01~) — 「조작 이름 딱지 + 설명」 칸을 3열(좁으면 2열, 휴대폰은 1열) 격자로 나눠 한눈에 구분되게 한다. */
.cal-help {
  /* 2026-10-13~ 달력 아래로 내리고 상자 테두리를 점선ㆍ바탕 없음으로 낮춰 일정보다 덜 튀게 */
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.cal-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px var(--space-4);
}

@media (max-width: 960px) { .cal-help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cal-help-list { grid-template-columns: minmax(0, 1fr); } }

.cal-help-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.cal-help-key {
  flex: none;
  min-width: 2.2em;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-faint) 10%, var(--panel-bg));
  text-align: center;
  font-weight: 700;
  color: var(--text);
}

.cal-help-key-remove::before { content: "×"; }
.cal-help-key-add::before { content: "+ "; }

.cal-help-note {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 사용 설명서ㆍ내 일정 추가 창(2026-10-16~) — 틀(머리ㆍ닫기ㆍ바깥 어둡게)은 표 모달(.table-modal)을 그대로 쓰고 폭만 줄인다.
   사용설명 칸(.cal-help-*)은 달력 아래에서 이 창 안으로 옮겼으므로 창 안에서는 한 줄에 하나씩, 글씨를 한 칸 키운다. */
.cal-guide-btn {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--panel-bg);
  cursor: pointer;
}
.cal-guide-btn:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.cal-guide-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cal-modal { width: min(600px, calc(100vw - 32px)); }
.cal-modal-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.cal-modal .cal-help-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.cal-modal .cal-help-item { font-size: var(--fs-sm); color: var(--text); }
.cal-modal .cal-help-key { min-width: 7.5em; }
.cal-modal .cal-help-note {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-top: none;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
  font-size: var(--fs-sm);
  color: var(--text);
}

.cal-add-form { display: flex; flex-direction: column; gap: var(--space-3); }
.cal-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-form-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.cal-form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--text);
}
.cal-form-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-form-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
.cal-form-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 480px) { .cal-form-dates { grid-template-columns: minmax(0, 1fr); } }

/* 구분 고르기 — 일정 항목과 같은 모양(왼쪽 색 막대 + 14% 바탕)의 딱지로 보여 고른 색을 바로 알 수 있게 한다. */
.cal-kind { margin: 0; padding: 0; border: none; min-width: 0; }
.cal-kind legend { padding: 0; margin-bottom: 6px; }
.cal-kind-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-kind-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border: 1px solid transparent;
  border-left: 4px solid var(--cal-c);
  border-radius: 6px;
  background: color-mix(in srgb, var(--cal-c) 14%, var(--panel-bg));
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.cal-kind-opt:has(.cal-kind-radio:checked) { border-color: var(--cal-c); font-weight: 700; }
.cal-kind-radio { margin: 0; accent-color: var(--cal-c); }
.cal-kind-opt:has(.cal-kind-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.cal-form-msg { margin: 0; min-height: 1.2em; font-size: var(--fs-sm); color: var(--danger); }
.cal-form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.cal-form-btn {
  min-height: 34px;
  padding: 4px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.cal-form-btn.is-primary { border-color: var(--accent); background: var(--accent); color: var(--panel-bg); font-weight: 700; }
.cal-form-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cal-monthly {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cal-monthly[hidden] { display: none; }

.cal-monthly-label {
  flex: none;
  padding: 3px 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.cal-monthly-items {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--table-border-header);
  border: 1px solid var(--table-border-header);
  border-radius: 10px;
  overflow: hidden;
}

/* 색을 한 단계 진하게(2026-09-30 요청 — 파스텔 톤이 흐리다는 의견): 요일 머리줄은 넓은 색면용 남색 토큰,
   빈 칸ㆍ오늘 칸ㆍ항목 바탕은 기존 색을 섞는 비율만 올린다(새 색값 없음). */
.cal-weekday {
  padding: 7px 0;
  /* 2026-10-13~ 진한 남색 띠가 일정(도메인 색)보다 강해 옅은 바탕 + 진한 글자로 낮춤 */
  background: color-mix(in srgb, var(--tool-navy) 10%, var(--panel-bg));
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--tool-navy);
}

/* 토ㆍ일요일 구분(2026-10-01 시안) — 머리줄 바탕과 날짜 숫자를 일요일 붉은색(--danger), 토요일 초록(--sys-5)으로.
   시안 색(#a73b2e/#2f7d53)과 거의 같은 기존 토큰을 쓴다. 평일 머리줄은 남색 그대로, 「오늘」 파란 배지는 아래 is-today가 덮는다. */
.cal-weekday.is-sun { background: color-mix(in srgb, var(--danger) 10%, var(--panel-bg)); color: var(--danger); }
.cal-weekday.is-sat { background: color-mix(in srgb, var(--sys-5) 10%, var(--panel-bg)); color: var(--sys-5); }
.cal-cell.is-sun .cal-date { color: var(--danger); }
.cal-cell.is-sat .cal-date { color: var(--sys-5); }

.cal-cell {
  min-height: 118px;
  min-width: 0;
  padding: 5px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-bg);
}

.cal-cell-empty { background: color-mix(in srgb, var(--text-faint) 16%, var(--panel-bg)); }

/* 주간 보기 — 한 줄뿐이라 칸을 높인다(칸 폭은 월간과 같아 글씨는 키우지 않음). */
.cal-grid-week .cal-cell { min-height: 280px; }
.cal-cell.is-today { background: color-mix(in srgb, var(--accent) 16%, var(--panel-bg)); }

.cal-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.cal-date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.cal-cell.is-today .cal-date {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--panel-bg);
}

.cal-dow-inline { display: none; }

/* 「+ 일정」은 칸에 마우스를 올리거나 키보드로 들어왔을 때만 진하게 — 평소엔 옅게 두어 항목 글씨를 가리지 않는다. */
.cal-add-btn {
  padding: 0 5px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0.55;
}

.cal-cell:hover .cal-add-btn,
.cal-add-btn:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

.cal-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-item {
  min-width: 0;
  padding: 2px 3px 2px 4px;
  border-left: 4px solid var(--cal-c);
  border-radius: 4px;
  background: color-mix(in srgb, var(--cal-c) 14%, var(--panel-bg));
}

/* 개인이 직접 쓴 글(내 일정ㆍ메모)은 붉은 글씨로 공식 일정과 구분한다(2026-10-01 요청). 완료 체크한 내 일정은 아래 is-done 규칙대로 흐리게. */
.cal-item-custom .cal-item-text { color: var(--danger); }
/* 업무분야 색을 고른 내 일정(2026-10-16~)은 그 분야 색을 쓰되, 왼쪽 막대를 두 줄(double)로 그려 공식 일정과 구분한다. */
.cal-item-custom-dom { border-left-style: double; }
/* 「출장」 구분(2026-10-16~) — 업무분야 색과 겹치지 않는 기존 회청색 토큰(--sys-6)을 쓴다. */
.cal-item-custom-trip { --cal-c: var(--sys-6); }
/* 「기타업무」 구분(2026-10-16~) — 남은 기존 색 중 가장 구분되는 먹색(--text)을 쓴다. */
.cal-item-custom-etc { --cal-c: var(--text); }
/* 기간 일정은 날마다 같은 항목이 보이므로 기간(9. 1.~9. 5.)을 옅은 작은 글씨로 붙인다. */
.cal-item-range { display: block; font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }

/* 끌어서 옮기기(2026-09-30~) — 잡을 수 있는 항목은 손 모양, 끄는 동안 옅게, 놓을 칸은 파란 점선 테두리. */
.cal-item[draggable="true"] { cursor: grab; }
.cal-item.is-dragging { opacity: 0.45; cursor: grabbing; }
.cal-cell.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
}

.cal-item-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.cal-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
}

.cal-check {
  flex: none;
  width: 12px;
  height: 12px;
  margin: 3px 0 0;
  accent-color: var(--cal-c);
  cursor: pointer;
}

.cal-item-text {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text);
}

.cal-item.is-done .cal-item-text {
  text-decoration: line-through;
  color: var(--text-faint);
}

.cal-icon-btn {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}

.cal-icon-btn svg { width: 11px; height: 11px; }
.cal-icon-btn:hover { color: var(--accent); }
.cal-memo-btn.has-memo { color: var(--accent); }
.cal-remove-btn::before { content: "×"; font-size: var(--fs-sm); line-height: 1; }
.cal-remove-btn:hover { color: var(--danger); }

.cal-memo-input,
.cal-add-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  padding: 3px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--text);
}

.cal-memo-text {
  margin: 2px 0 0 16px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--danger);
  overflow-wrap: anywhere;
}

.cal-monthly .cal-item { max-width: 100%; }

/* 휴대폰 폭: 7칸 격자는 글씨가 들어가지 않으므로 풀어서 날마다 한 줄씩 목록으로 보인다(일정 없는 날도 「+ 일정」을 누를 수 있게 모두 보임). */
@media (max-width: 720px) {
  .cal-grid {
    display: block;
    background: none;
    border: none;
    border-radius: 0;
  }
  .cal-weekday,
  .cal-cell-empty { display: none; }
  .cal-cell {
    min-height: 0;
    margin-bottom: 6px;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .cal-dow-inline { display: inline; margin-left: 2px; font-weight: 400; }
  .cal-add-btn { opacity: 1; }
  .cal-item-text,
  .cal-memo-text { font-size: var(--fs-sm); }
  .cal-icon-btn { width: 28px; height: 28px; }
}

@media print {
  .cal-add-btn,
  .cal-icon-btn,
  .cal-tools,
  .cal-nav-btn { display: none; }
}

/* ── 홈 「내 메모장」(js/homeMemo.js, 2026-10-16~) ──
   C안: 일정관리 오른쪽 폭 250px 상시 칸(.home-memo-aside). 메모 칸은 줄 높이를 늘리지 않도록 칸 안에 절대 위치로
   깔아 달력 구역 높이에 맞추고, 메모 목록만 안에서 스크롤한다. 820px 이하에서는 달력 아래로 내려가고 목록 높이만 제한한다.
   색 동그라미 5개는 새 색값 없이 기존 토큰을 --cal-c로 받는다(메모 칸은 「왼쪽 색 막대 + 12% 바탕」). */
.memo-color-blue { --cal-c: var(--field-dom-1); }
.memo-color-green { --cal-c: var(--field-dom-8); }
.memo-color-orange { --cal-c: var(--field-dom-3); }
.memo-color-pink { --cal-c: var(--field-dom-6); }
.memo-color-gray { --cal-c: var(--sys-6); }

.home-cal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: var(--space-4);
  align-items: stretch;
}
.home-cal-row > .home-calendar-section { min-width: 0; }
.home-memo-aside { position: relative; min-width: 0; min-height: 360px; }
.home-memo-aside > .memo-panel { position: absolute; inset: 0; overflow: hidden; }
.home-memo-aside .memo-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

@media (max-width: 820px) {
  .home-cal-row { grid-template-columns: minmax(0, 1fr); }
  .home-memo-aside { min-height: 0; }
  .home-memo-aside > .memo-panel { position: static; }
  .home-memo-aside .memo-list { max-height: 360px; }
}

/* 메모 칸 내용(컴포넌트) */
.memo-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-bg);
  color: var(--text);
}
.memo-panel-head { display: flex; align-items: center; gap: var(--space-2); }
.memo-panel-title { flex: 1; margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--heading); }
.memo-tools { display: flex; flex-direction: column; gap: 6px; }
.memo-filters { display: flex; gap: 4px; }
.memo-chip {
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.memo-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--panel-bg); font-weight: 700; }
.memo-search,
.memo-input,
.memo-edit,
.memo-io-text,
.notion-key-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
}
.memo-input,
.memo-edit,
.memo-io-text { resize: vertical; }
.memo-io-text { font-size: var(--fs-xs); font-family: var(--mono); }

.memo-add { display: flex; flex-direction: column; gap: 6px; }
.memo-add-row { display: flex; align-items: center; gap: var(--space-2); }
.memo-dots { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.memo-dot {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid var(--panel-bg);
  border-radius: 50%;
  background: var(--cal-c);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
}
.memo-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.memo-dot.is-small { width: 12px; height: 12px; border-width: 1px; box-shadow: none; }

.memo-btn {
  min-height: 28px;
  padding: 2px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel-bg);
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--accent);
  cursor: pointer;
}
.memo-btn.is-primary { background: var(--accent); color: var(--panel-bg); font-weight: 700; }

.memo-list { display: flex; flex-direction: column; gap: 4px; }
.memo-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 5px 6px 4px 8px;
  border-left: 3px solid var(--cal-c);
  border-radius: 6px;
  background: color-mix(in srgb, var(--cal-c) 12%, var(--panel-bg));
}
.memo-item.is-pinned { box-shadow: inset 0 0 0 1px var(--cal-c); }
.memo-text {
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.memo-item.is-done .memo-text { text-decoration: line-through; color: var(--text-faint); }
.memo-item-foot { display: flex; align-items: center; gap: 2px 4px; }
.memo-time { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.memo-act {
  flex: none;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.memo-act:hover { color: var(--accent); }
.memo-act[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.memo-del:hover,
.memo-del.is-armed { color: var(--danger); font-weight: 700; }
.memo-empty {
  margin: 0;
  padding: var(--space-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.memo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding-top: 6px; border-top: 1px solid var(--border); }
/* 안내 한 줄은 늘 자기 줄을 차지하고 내보내기ㆍ가져오기는 그 아래 오른쪽 — 250px 칸에서 글이 세 줄로 꺾이지 않게. */
.memo-note { flex: 1 1 100%; margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
.memo-io-btns { margin-left: auto; }
.memo-io-btns { display: flex; gap: 2px; flex: none; }
.memo-link {
  padding: 0 4px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.memo-io { display: flex; flex-direction: column; gap: 6px; }
.memo-io[hidden] { display: none; }
.memo-io-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.memo-io-msg { font-size: var(--fs-xs); color: var(--text-muted); }

.memo-chip:focus-visible,
.memo-dot:focus-visible,
.memo-btn:focus-visible,
.memo-act:focus-visible,
.memo-link:focus-visible,
.memo-text:focus-visible,
.memo-search:focus-visible,
.memo-input:focus-visible,
.memo-edit:focus-visible,
.memo-io-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 노션 연결(2026-10-17~, 개인 전용 — js/notionLink.js). 열쇠값 칸은 메모장 아래 「노션 연결」과 달력 사용 설명서 창에 같은 모양으로
   붙는다. 노션에서 온 할 일ㆍ일정은 읽기 전용이라 왼쪽 막대를 점선(dotted)으로 그려 직접 쓴 메모ㆍ내 일정과 구분한다. 색값은 새로 정하지 않음. */
.notion-key { display: flex; flex-direction: column; gap: 4px; }
.notion-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.notion-key-input { flex: 1 1 140px; width: auto; }
.notion-key-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notion-key-msg { font-size: var(--fs-xs); color: var(--text-muted); }
.memo-notion-box { padding-top: 6px; }
.memo-notion-box[hidden] { display: none; }
.memo-notion-head { display: flex; align-items: center; gap: 6px; }
.memo-notion-status { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.memo-item-notion { --cal-c: var(--text-muted); border-left-style: dotted; }
.memo-item-notion .memo-text { margin: 0; cursor: default; }
.cal-item-notion { border-left-style: dotted; }
.cal-item-notion .cal-item-main { cursor: default; }
.cal-item-time { font-weight: 700; }
.cal-notion-link { text-decoration: none; }
.cal-guide-subhead { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

@media print {
  .home-memo-aside { display: none; }
  .home-cal-row { display: block; }
}

/* ── 법령 원문 PDF 보기(item.referencePdf, 2026-09-18~) ──
   산업안전 4-1 「교육의 종류와 교육시간」의 시행규칙 별표 4가 첫 사례. 표를 읽다가 원문을
   나란히 대조해야 하는 자료만 대상으로 하며, 내려받아 쓰는 서식은 관련서식(forms)에 둔다.
   글자 크기는 :root의 여섯 칸 사다리만 쓴다. */
.refpdf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.refpdf-btn:hover { background: var(--accent-hover); }
.refpdf-btn-image { background: var(--accent-teal); }
.refpdf-btn-image:hover { background: var(--accent-teal-hover); }
/* 단추가 둘 이상이면 한 줄에 나란히, 좁은 화면에서는 줄바꿈.
   단추와 그 출처 한 줄을 .refpdf-item으로 묶어 세로로 붙인다(2026-09-18~). */
.refpdf-wrap { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
.refpdf-item { display: inline-flex; flex-direction: column; gap: 3px; }
.refpdf-source { padding-left: 2px; font-size: var(--fs-xs); color: var(--text-faint); }
.refpdf-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 28, 45, .5); padding: 16px;
  align-items: center; justify-content: center;
}
.refpdf-modal.open { display: flex; }
.refpdf-box {
  display: flex; flex-direction: column;
  width: min(880px, 100%); height: 85vh; max-height: 85vh;
  background: var(--panel-bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 28, 45, .3);
}
.refpdf-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.refpdf-title { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--accent); line-height: 1.5; }
.refpdf-close {
  flex-shrink: 0; padding: 0 2px; border: 0; background: none;
  font-family: inherit; font-size: var(--fs-lg); line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.refpdf-close:hover { color: var(--text); }
.refpdf-frame-wrap { flex: 1; min-height: 0; overflow: hidden; }
.refpdf-frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }
.refpdf-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 18px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.refpdf-foot a { font-weight: 600; }
.refpdf-note { color: var(--text-muted); }
/* 그림은 PDF와 달리 세로로 길어 창 안에서 스크롤해 본다. 가로 폭에 맞춰 줄이되 확대는 안 한다. */
.refpdf-img-wrap { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 16px; background: var(--page-bg); }
.refpdf-img-wrap img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.refpdf-box-image { width: min(620px, 100%); }
/* 글·표(item.referenceContent, 2026-09-23~)는 내용만큼만 높이를 잡고, 넘치면 창 안에서 스크롤한다.
   아래 좁은 화면 규칙(.refpdf-box height 88vh)보다 앞서도록 클래스 둘로 잡는다. */
.refpdf-box.refpdf-box-content { height: auto; }
.refpdf-box-content .refpdf-frame-wrap { overflow-y: auto; }
.refpdf-content-wrap { padding: 4px 18px 18px; }
@media (max-width: 720px) {
  .refpdf-box { height: 88vh; max-height: 88vh; }
  .refpdf-content-wrap { padding: 4px 12px 14px; }
}

/* ---------- 에듀파인 화면 안내(.edufine-guide, 2026-09-22~) ----------
   item.blocks type 'edufineGuide' — 업무 하나를 K-에듀파인 화면 캡처로 한 장씩 따라가는 덩어리다
   (js/detailView.js의 renderEdufineGuideBlock). 첫 사례는 학교회계예산결산 「예산의 이용 및 전용」의
   네 갈래(이전용ㆍ목간 전용ㆍ이월 반환금ㆍ반환금)이고, 예비비ㆍ명시이월ㆍ계속비 등 나머지 업무는
   도메인 JSON에 jobs를 더 넣기만 하면 같은 모양으로 그려진다.

   색은 도메인 색(--dom)을 쓰지 않고 에듀파인 전용 --edu* 한 벌만 쓴다 — 위 토큰 주석 참고.
   갈래는 <button aria-selected> + 패널 hidden으로 한 번에 하나만 보이며, 접힌 갈래의 <img>는
   display:none이라 loading="lazy"가 실제로 내려받지 않는다(이 덩어리가 그림 29장 4MB라 중요하다).
   인쇄할 때는 갈래를 모두 펼친다(맨 아래 @media print). */
.edufine-guide {
  margin: var(--space-3) 0;
  border: 1px solid var(--edu-line);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 머리줄 = 아코디언 단추(2026-09-22~). 접혀 있을 때 이 한 줄만 보이므로 줄바꿈 없이(flex-wrap:
   nowrap) 한 줄로 끝나야 한다 — 갈래 이름이 길면 그 칸만 줄임표로 잘리고 딱지ㆍ제목ㆍ장수ㆍ
   화살표는 항상 보인다. 단추라서 기본 테두리ㆍ바탕을 지우고 글자 색만 물려준다. */
.edufine-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 11px;
  width: 100%;
  padding: 11px 15px;
  border: 0;
  border-radius: 0;
  background: var(--edu);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.edufine-head:hover {
  background: var(--edu-deep);
}

.edufine-head:focus-visible {
  outline: 2px solid var(--edu-deep);
  outline-offset: -3px;
}

/* 갈래 이름 — 남는 자리를 차지하다가 모자라면 줄임표로 자른다. */
.edufine-head-branches {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edufine-head-count {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(255, 255, 255, .22);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* 펼침 화살표는 장식이라 글자로 넣지 않고 여기서 붙인다(접근성 규칙). */
.edufine-head::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.edufine-head[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

/* 딱지ㆍ제목은 줄지 않는다. 갈래 이름이 스물여덟 개까지 길어지면 flex가 줄일 수 있는 것을 모두
   줄이려 들어, flex-shrink를 막아두지 않으면 딱지 글자가 세로로 접혀 머리줄이 세 줄이 된다
   (2026-09-22, 결산 28갈래에서 실제로 그랬다). 줄어도 되는 것은 갈래 이름 칸 하나뿐이다. */
.edufine-head-badge {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(255, 255, 255, .22);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}

.edufine-head-title {
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.edufine-body {
  padding: 13px 15px 16px;
}

/* 고르개 두 단(2026-09-22~) — 위가 묶음(.edufine-groups), 아래가 갈래(.edufine-pick).
   갈래가 22개ㆍ28개까지 늘면서 한 줄로는 고를 수 없어 한 단을 더 뒀다. 묶음 단추는 꽉 찬 초록으로
   고른 것을 드러내고, 갈래 단추는 한 급 작고 옅게 두어 위아래 위계가 보이게 한다. */
.edufine-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.edufine-group-btn {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 9px;
  border: 1px solid var(--edu-line);
  background: var(--pill-bg);
  color: var(--text-muted);
}

.edufine-group-btn:hover {
  border-color: var(--edu);
  color: var(--edu-deep);
}

.edufine-group-btn[aria-selected="true"] {
  background: var(--edu);
  border-color: var(--edu);
  color: #fff;
}

.edufine-group-btn:focus-visible,
.edufine-pick-btn:focus-visible {
  outline: 2px solid var(--edu);
  outline-offset: 2px;
}

/* ── 큰갈래 줄(2026-09-23~) ────────────────────────────────────────────────────
   묶음 단추를 한 줄에 몰아넣으면(예산의 편성은 묶음 여덟ㆍ갈래 예순하나) 아래 갈래 줄과
   같은 초록ㆍ비슷한 크기라 어느 줄이 무엇인지 구분되지 않았다. 큰갈래마다 줄을 나누고 줄
   앞에 이름표를 붙이며, 줄마다 --edu-c1~c5 중 한 색을 쓴다(data-color).
   색만으로 가르지 않는다 — 줄 이름표와 「갈래」 딱지가 글자로도 성격을 알려 주므로, 색을
   구분하지 못해도 위가 큰갈래ㆍ아래가 갈래임을 읽을 수 있다. */
.edufine-tracks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
}

.edufine-track-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  --edu-tc: var(--edu-c1);
  --edu-tc-pale: var(--edu-c1-pale);
  --edu-tc-line: var(--edu-c1-line);
}

.edufine-track-row[data-color="c2"], .edufine-pick-wrap[data-color="c2"] {
  --edu-tc: var(--edu-c2); --edu-tc-pale: var(--edu-c2-pale); --edu-tc-line: var(--edu-c2-line);
}
.edufine-track-row[data-color="c3"], .edufine-pick-wrap[data-color="c3"] {
  --edu-tc: var(--edu-c3); --edu-tc-pale: var(--edu-c3-pale); --edu-tc-line: var(--edu-c3-line);
}
.edufine-track-row[data-color="c4"], .edufine-pick-wrap[data-color="c4"] {
  --edu-tc: var(--edu-c4); --edu-tc-pale: var(--edu-c4-pale); --edu-tc-line: var(--edu-c4-line);
}
.edufine-track-row[data-color="c5"], .edufine-pick-wrap[data-color="c5"] {
  --edu-tc: var(--edu-c5); --edu-tc-pale: var(--edu-c5-pale); --edu-tc-line: var(--edu-c5-line);
}

/* 줄 이름표 — 세 단일 때만 나온다(두 단이면 이름표 자리에 .edufine-track-btn 단추가 온다). */
.edufine-track-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  background: var(--edu-tc);
  color: #fff;
}

/* 줄 안의 묶음 단추는 그 줄의 색을 쓴다 — 안 고른 것은 흰 바탕에 색 테두리ㆍ색 글자,
   고른 것은 그 색으로 꽉 채운다. */
.edufine-track-row .edufine-group-btn {
  border-color: var(--edu-tc-line);
  background: var(--panel-bg);
  color: var(--edu-tc);
}

.edufine-track-row .edufine-group-btn:hover {
  border-color: var(--edu-tc);
  color: var(--edu-tc);
}

.edufine-track-row .edufine-group-btn[aria-selected="true"] {
  background: var(--edu-tc);
  border-color: var(--edu-tc);
  color: #fff;
}

.edufine-track-row .edufine-group-btn:focus-visible {
  outline-color: var(--edu-tc);
}

/* 두 단일 때의 줄 단추 — 이름표와 단추를 겸하므로 이름표처럼 둥글게 두되 글자는 한 급 키운다. */
.edufine-track-btn {
  border-radius: 20px;
  letter-spacing: .04em;
}

/* 갈래 줄 상자 — 고른 줄의 색을 옅게 깐다. 위의 어느 단추에 딸린 줄인지 색으로 이어진다. */
.edufine-pick-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-bottom: 12px;
  padding: 9px 11px 10px;
  border-radius: 9px;
  --edu-tc: var(--edu-c1);
  --edu-tc-pale: var(--edu-c1-pale);
  --edu-tc-line: var(--edu-c1-line);
  background: var(--edu-tc-pale);
  border: 1px solid var(--edu-tc-line);
}

.edufine-pick-wrap .edufine-pick {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  flex: 1 1 auto;
}

.edufine-pick-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--edu-tc);
}

.edufine-pick-wrap .edufine-pick-btn[aria-selected="true"] {
  border-color: var(--edu-tc);
  color: var(--edu-tc);
  box-shadow: inset 0 0 0 1px var(--edu-tc);
}

.edufine-pick-wrap .edufine-pick-btn:focus-visible {
  outline-color: var(--edu-tc);
}

/* 갈래 줄 — 고른 묶음에 속한 단추만 보인다(나머지는 hidden). 아래 실선으로 화면 목록과 나눈다. */
.edufine-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edu-line);
}

.edufine-pick-btn {
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text-muted);
}

.edufine-pick-btn:hover {
  border-color: var(--edu);
  color: var(--edu-deep);
}

.edufine-pick-btn[aria-selected="true"] {
  background: var(--edu-pale);
  border-color: var(--edu);
  color: var(--edu-deep);
}

/* 갈래 맨 위 메뉴 경로 한 줄. */
.edufine-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 9px;
  align-items: baseline;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--edu-deep);
  background: var(--edu-pale);
  border: 1px solid var(--edu-line);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 13px;
  word-break: keep-all;
}

.edufine-menu-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--edu);
  letter-spacing: .05em;
}

/* 「자주 묻는 질문」 갈래의 질문ㆍ답변 띠(2026-09-23~, 물품관리가 첫 사례) — 메뉴 줄 바로 아래.
   두 칸짜리 띠로, 왼쪽이 「질문」ㆍ「답변」 딱지고 오른쪽이 글이다. 질문 칸은 옅은 에듀파인
   바탕(--edu-pale)을 깔고 답변 칸은 덩어리 바탕 그대로 두어 두 글을 눈으로 나눈다. 도메인 색을
   쓰지 않는다는 이 부품의 규칙대로 색은 --edu*와 공통 토큰만 쓴다. */
.edufine-qa {
  margin-bottom: 13px;
  border: 1px solid var(--edu-line);
  border-radius: 8px;
  overflow: hidden;
}

.edufine-qa-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 12px;
}

.edufine-qa-q {
  background: var(--edu-pale);
}

/* 답변 칸은 바탕을 따로 주지 않고 덩어리(.edufine-guide)의 바탕을 그대로 물려받는다 — 질문
   칸만 옅게 깔아도 두 글이 갈리고, 부품 안에 바탕 토큰을 하나 더 들이지 않아도 된다. */
.edufine-qa-a {
  border-top: 1px solid var(--edu-line);
}

.edufine-qa-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--edu-deep);
  letter-spacing: .05em;
}

.edufine-qa-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text);
  word-break: keep-all;
}

/* 질문 칸 글자는 --edu-deep으로 둔다(.edufine-menu와 같은 짝). 바탕으로 쓴 --edu-pale은 어두운
   화면에서 거의 검정으로 뒤집히는데 --text는 그대로라, 둘을 짝지으면 글자가 바탕에 묻힌다 —
   이 부품 안에서 바탕과 함께 뒤집히는 색은 --edu* 계열뿐이다. 답변 칸은 덩어리 바탕을 그대로
   쓰므로 --text를 그대로 둔다. */
.edufine-qa-q .edufine-qa-text {
  color: var(--edu-deep);
}

/* 좁은 화면에서는 딱지를 글 위로 올린다 — 딱지와 글이 한 줄에 같이 있으면 글 칸이 너무 좁다. */
@media (max-width: 560px) {
  .edufine-qa-row {
    display: block;
  }
  .edufine-qa-label {
    display: block;
    margin-bottom: 3px;
  }
}
/* 화면 한 장 — 딱지 + 제목 → 그림 → 설명 → 작업순서 → 유의사항. */
.edufine-shot {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--edu-line);
}

.edufine-shot:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.edufine-shot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  margin-bottom: 7px;
}

.edufine-shot-pill {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  background: var(--edu);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
  letter-spacing: .02em;
}

.edufine-shot-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.02em;
  word-break: keep-all;
}

/* 메뉴가 다른 화면(사업관리카드)만 제목 옆에 그 경로를 함께 단다. */
.edufine-shot-alt {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--edu-deep);
  background: var(--edu-pale);
  border: 1px solid var(--edu-line);
  border-radius: 6px;
  padding: 1px 8px;
  word-break: keep-all;
}

.edufine-figure {
  margin: 0 0 9px;
}

/* 그림은 통째로 단추다(2026-09-23~) — 눌러서 원래 크기로 크게 본다. 단추 기본 모양을 지우고
   그림이 그대로 보이게 한다. 오른쪽 아래 「눌러서 크게」 딱지는 평소 옅게 있다가 가리키면 진해진다. */
.edufine-figure-btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

/* 원본 비율 그대로 폭만 맞춘다(줄이거나 다시 압축하지 않은 1400ㆍ1930px 원본). 어두운 화면에서
   흰 바탕이 떠 보이지 않도록 테두리를 준다. */
.edufine-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--edu-line);
  border-radius: 9px;
  background: #fff;
}

.edufine-zoom-tag {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(20, 30, 28, .62);
  color: #fff;
  opacity: .72;
  transition: opacity .15s;
  pointer-events: none;
}

.edufine-figure-btn:hover .edufine-zoom-tag,
.edufine-figure-btn:focus-visible .edufine-zoom-tag {
  opacity: 1;
}

.edufine-figure-btn:focus-visible {
  outline: 2px solid var(--edu);
  outline-offset: 3px;
  border-radius: 9px;
}

/* 크게 보기 막 — 화면 전체를 덮고 그림을 원래 크기로 둔다. 넘치면 막 안에서 스크롤한다.
   막이 떠 있는 동안에는 뒤 본문이 따라 스크롤되지 않도록 body를 묶어 둔다. */
.edufine-zoom {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(12, 18, 17, .88);
}

.edufine-zoom-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}

.edufine-zoom-scroll img {
  display: inline-block;
  max-width: none;
  background: #fff;
  cursor: default;
}

.edufine-zoom-close {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(20, 30, 28, .8);
  color: #fff;
  cursor: pointer;
}

.edufine-zoom-close:hover {
  background: rgba(20, 30, 28, .95);
}

.edufine-zoom-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.edufine-zoom-open {
  overflow: hidden;
}

.edufine-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* 작업순서 — 번호 동그라미(.edufine-num)는 캡처 속 붉은 번호와 같은 색ㆍ같은 번호다.
   JSON의 no를 그대로 쓰므로 화면마다 1부터 다시 세지 않는다. */
.edufine-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}

.edufine-steps li {
  position: relative;
  padding: 3px 0 3px 29px;
  word-break: keep-all;
}

.edufine-num {
  position: absolute;
  left: 0;
  top: 4px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--edu-num);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* 단추 이름은 원문대로 대괄호째 두고 바탕색만 달리한다([저장]ㆍ[결재요청]). */
.edufine-key {
  font-weight: 700;
  color: var(--edu-deep);
  background: var(--edu-pale);
  border: 1px solid var(--edu-line);
  border-radius: 5px;
  padding: 0 5px;
  white-space: nowrap;
}

.edufine-tip {
  display: flex;
  gap: 7px;
  margin-top: 7px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: var(--fs-sm);
  line-height: 1.6;
  word-break: keep-all;
}

/* ☞는 장식이 아니라 「유의사항」임을 가리키는 표시라 글자로 두지 않고 여기서 붙인다. */
.edufine-tip::before {
  content: "☞";
  flex: 0 0 auto;
  font-weight: 700;
}

.edufine-tip ul {
  margin: 0;
  padding-left: 14px;
}

.edufine-tip li {
  margin: 1px 0;
}

/* ref — 갈래 끝에 접어 두는 참고표(당해연도 집행잔액을 반환하는 세 가지 방법). */
.edufine-know {
  margin-top: 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.edufine-know > summary {
  cursor: pointer;
  padding: 9px 13px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--edu-deep);
  background: var(--pill-bg);
}

.edufine-know-body {
  padding: 12px 13px;
}

.edufine-know-body img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.edufine-source {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: keep-all;
}

@media (max-width: 620px) {
  .edufine-body {
    padding: 11px 11px 13px;
  }

  .edufine-head {
    padding: 10px 11px;
    gap: 7px;
  }

  /* 좁은 화면에서는 갈래 이름을 감추고 장수만 남긴다 — 한 줄을 지키는 쪽이 먼저다. */
  .edufine-head-branches {
    display: none;
  }
}

/* 인쇄는 갈래를 모두 펼친다(갈래 단추 줄은 종이에서 누를 수 없으므로 뺀다) — 갈래 단추
   (.branch-tabs)와 같은 방침이다. */
@media print {
  .edufine-pick {
    display: none;
  }

  .edufine-pane[hidden] {
    display: block !important;
  }
}

/* ── 표 아코디언(item.blocks 'table'의 toggle: true, 2026-09-24~ 시안 budget-acc.html) ──
   여는 줄: 아이콘 · 제목 · 부제(「장 › 관 › 항 › 목 · 16행」) · 오른쪽 「펼치기 ∨ / 접기 ∧」. 왼쪽 색 막대는
   block.side — 세입(in) 파랑 --accent / 세출(out) 물품관리 기준색(--field-base-3)에서 섞은 주황 / 그 밖(참고) 회색.
   알아두기(--warn-bg)와 헷갈리지 않게 경고색 토큰은 쓰지 않는다. 네이티브 <details>라 브라우저 찾기(Ctrl+F)가
   접힌 표 안 글자도 찾아 펼친다. 검색 주소 ?tbl=로 도착하면 .tbl-hit가 잠깐 붙어 테두리가 빛난다(js/main.js). */
.tbl-acc {
  --tbl-c: var(--accent);
  --tbl-c-deep: var(--accent-hover);
  --tbl-c-bg: var(--accent-bg);
  margin: 0 0 8px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tbl-c);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.tbl-acc.tbl-side-out {
  --tbl-c: var(--field-base-3);
  --tbl-c-deep: var(--sec-audit);
  --tbl-c-bg: color-mix(in srgb, var(--field-base-3) 12%, #fff);
}
.tbl-acc.tbl-side-ref {
  --tbl-c: var(--text-faint);
  --tbl-c-deep: var(--text-muted);
  --tbl-c-bg: var(--pill-bg);
}
.tbl-acc[open] { border-color: var(--tbl-c); box-shadow: 0 4px 14px rgba(15, 28, 45, .08); }
.tbl-acc.tbl-side-ref[open] { border-color: var(--border-strong); border-left-color: var(--tbl-c); }
.tbl-acc.tbl-hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.tbl-acc-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; list-style: none;
}
.tbl-acc-summary::-webkit-details-marker { display: none; }
.tbl-acc-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.tbl-acc-summary:hover .tbl-acc-title { color: var(--tbl-c-deep); }
.tbl-acc-icon {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  background: var(--tbl-c-bg); color: var(--tbl-c);
}
.tbl-acc-icon svg { width: 14px; height: 14px; }
.tbl-acc-mid { flex: 1; min-width: 0; }
.tbl-acc-title { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--text); }
/* 부제 — .ref-table-summary-note를 함께 달아 목차에서 빠지게 한다(그 클래스의 옛 여백ㆍ글자는 여기서 덮는다). */
.tbl-acc-sub.ref-table-summary-note { display: block; margin: 1px 0 0; font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.tbl-acc-step + .tbl-acc-step::before { content: " \203A "; }
.tbl-acc-go {
  flex: none; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--tbl-c-deep); white-space: nowrap;
}
.tbl-acc-go-label::after { content: "펼치기"; }
.tbl-acc[open] .tbl-acc-go-label::after { content: "접기"; }
.tbl-acc-go::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.tbl-acc[open] .tbl-acc-go::after { transform: translateY(2px) rotate(-135deg); }
.tbl-acc-body { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
/* 표 칸 규칙 — 낱말 중간에서 잘리지 않게(「학부모/부담수/입」 방지). 묶인 칸은 한 줄, 첫 열은 낱말째로. */
.tbl-acc-body .data-table th,
.tbl-acc-body .data-table td { word-break: keep-all; overflow-wrap: break-word; }
.tbl-acc-body .data-table td:first-child { overflow-wrap: normal; }
.tbl-acc-body .data-table td[rowspan] { white-space: nowrap; overflow-wrap: normal; font-weight: 600; }

/* 「모두 펼치기 / 모두 접기」 — 한 항목에 표 아코디언이 셋 이상일 때 첫 표 위에 한 줄. */
.tbl-acc-bar { display: flex; justify-content: flex-end; margin: 12px 0 8px; }
.tbl-acc-all {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--panel-bg);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.tbl-acc-all:hover { border-color: var(--accent); color: var(--accent); }
.tbl-acc-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  /* 휴대폰에서는 표를 가로로 밀어 본다 — 좁은 칸에 욱여넣으면 낱말이 세로로 쪼개진다. */
  .tbl-acc-body .data-table { min-width: 560px; }
  .tbl-acc-go-label { display: none; }
}
@media print {
  /* 인쇄할 때는 접힌 표도 전부 펼친다(js/detailView.js의 beforeprint가 open도 켠다). */
  .tbl-acc::details-content { content-visibility: visible; display: block; }
  .tbl-acc-body { display: block !important; }
  .tbl-acc { box-shadow: none; }
  .tbl-acc-go, .tbl-acc-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tbl-acc, .tbl-acc-go::after { transition: none; }
}

/* ---------- 도메인 홈 목차형 행(2026-10-13~, entry.subtasksLayout === 'rows', js/detailView.js renderSubtaskRows) ----------
   카드 격자 대신 세부업무마다 가로로 긴 행: 왼쪽 라벨(220px, 카드 머리줄과 같은 연한 도메인색), 오른쪽 항목 알약.
   좁은 화면에서는 라벨이 위, 알약이 아래로 쌓인다. 색은 도메인 기준색(--dom-base) 섞기만 쓴다. */
.subtask-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subtask-row {
  display: flex;
  flex-wrap: wrap;
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--dom-base) 28%, var(--panel-bg));
  border-radius: 12px;
  overflow: hidden;
}

.subtask-row-label {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--dom-base) 10%, var(--panel-bg));
}

.subtask-row-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  word-break: keep-all;
}

a.subtask-row-title:hover {
  color: var(--dom-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subtask-row-count {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.subtask-row-list {
  /* 3열 목록(폭에 따라 1~3열 — 지시안 minmax 200px은 본문 폭에서 4열이 되어 250px로). 구분선은 항목 위쪽에 긋고
     목록을 1px 위로 당겨 첫 줄 위 선만 행 상자(overflow: hidden) 밖으로 잘라 낸다 — 마지막 줄 아래에 선이 떠 있지
     않고, 항목 수가 열 수로 나눠떨어지지 않아도(5개 등) 선이 겹치거나 끊겨 보이지 않는다.
     구분선 색ㆍ줄 여백은 일상감사 「세부 항목」 목록(.subtask-item-nav-row)과 같다. */
  flex: 1 1 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  column-gap: 8px;
  align-content: start;
  margin: -1px 0 0;
  padding: 0 12px 4px;
  list-style: none;
}

.subtask-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 11px 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  word-break: keep-all;
}

/* 오른쪽 끝 작은 화살표(›) — 장식이라 CSS로만 */
.subtask-row-link::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-top: 2px solid var(--dom-base);
  border-right: 2px solid var(--dom-base);
  transform: rotate(45deg);
}

.subtask-row-link:hover {
  background: color-mix(in srgb, var(--dom-base) 10%, var(--panel-bg));
}

/* 행 상자가 overflow: hidden이라 초점 테두리를 안쪽으로 그린다 */
.subtask-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

a.subtask-row-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 라벨 칸이 220px 고정이면 좁은 화면에서 알약 칸이 너무 좁아진다 — 라벨을 한 줄 전체로 */
@media (max-width: 640px) {
  .subtask-row-label {
    flex: 1 1 100%;
  }
}

/* 목차형 도메인 상단: AI업무가이드와 도구 띠를 한 줄에 같은 높이로 */
.overview-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin: 4px 0 16px;
}

.overview-top-row > .ai-assistant-box-overview {
  flex: 1 1 260px;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ai-accent) 30%, var(--panel-bg));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ai-accent) 6%, var(--panel-bg));
}

.overview-top-row .ai-assistant-caption {
  margin: 0;
  font-size: var(--fs-md);
}

.overview-top-row > .tool-strip-stack {
  flex: 2 1 420px;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.overview-top-row > .tool-strip-stack > .tool-strip {
  flex: 1 1 auto;
  margin: 0;
}

.overview-top-row .tool-strip-desc {
  font-size: var(--fs-md);
}


/* ---------- 앱 진입 카드 강조형(2026-10-13~, subTask.appLink.variant === 'callout') ----------
   세부업무 맨 위에서 한눈에 들어오도록 왼쪽 굵은 띠ㆍ큰 제목ㆍ요점 알약ㆍ채운 「열기」 단추. 색은 도메인 기준색 섞기만. */
.app-link-banner.app-link-callout {
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--dom-base) 45%, transparent);
  border-left: 6px solid var(--dom-base);
  background: color-mix(in srgb, var(--dom-base) 13%, var(--panel-bg));
}

.app-link-callout .app-link-icon:has(.icon-3d) {
  width: 56px;
  height: 56px;
}

.app-link-callout .app-link-title {
  font-size: var(--fs-xl);
}

.app-link-callout .app-link-desc {
  font-size: var(--fs-md);
  color: var(--text);
}

.app-link-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.app-link-point {
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--dom-base) 35%, transparent);
  border-radius: 999px;
  background: var(--panel-bg);
  font-size: var(--fs-sm);
  color: var(--dom-deep);
}

.app-link-callout .app-link-open {
  padding: var(--space-2) var(--space-5);
  border-color: var(--dom-deep);
  background: var(--dom-deep);
  color: #fff;
  font-size: var(--fs-md);
}

.app-link-banner.app-link-callout:hover .app-link-open {
  background: var(--dom-deep);
  filter: brightness(1.15);
}

/* 콜아웃 상자 안 블록(2026-10-13~, callout.blocks) — 상자 안 간격만 맞춘다 */
.callout-blocks {
  margin-top: var(--space-3);
}

.callout-blocks > .detail-section:first-child,
.callout-blocks > * {
  margin-top: 0;
}

/* 블록을 담은 콜아웃(판정기 등)은 제목을 절 제목 크기로 — 상자가 무엇인지 먼저 보이게 */
.callout:has(.callout-blocks) > .callout-heading {
  font-size: var(--fs-lg);
}

/* ---------- 본문 속 참고자료 팝업 단추(block.popupDocs, 2026-10-13~) ----------
   한 장짜리 참고자료를 그 내용 바로 밑에서 미리보기 창으로 연다(js/filePreview.js가 링크를 가로챔).
   본문을 가리지 않게 작은 알약 모양, 색은 그 화면의 도메인 색(--dom-base)에서 섞어 쓴다. */
.popup-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.popup-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--dom-base) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dom-base) 8%, var(--panel-bg));
  color: var(--dom-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.popup-doc-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dom-base);
}

.popup-doc-btn:hover {
  background: color-mix(in srgb, var(--dom-base) 16%, var(--panel-bg));
}

.popup-doc-btn:focus-visible {
  outline: 2px solid var(--dom-base);
  outline-offset: 2px;
}