/* 글꼴은 프로젝트 안에 둔다 — 화면이 바깥 주소를 부르지 않는다(설계 3-1).
   Pretendard Variable 한 벌이 굵기 45~920 을 다 덮는다(CI지침 3장) */
@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;
  font-weight:45 920;src:url(assets/PretendardVariable.woff2) format('woff2')}

/* CLK_FS 공용 스타일 — 26.09.01 신설
   글자 7단(본문 14px) · 굵기 3단 · 여백 7단은 CLKCRM 과 같다(26.08.30 사용자 승인).
   ★ 브랜드색은 26.09.10 부터 CLKGB 관리자 화면(본사 계열)을 따른다 — 아래 브랜드 칸.
   ★ 화면 파일에 색·크기 값을 직접 쓰지 않는다 — 화면지침 5장.
   ★ 폭 1560px · 비고/문장 열 폭 규칙은 화면지침 8장. */

:root{
  /* ── 브랜드 — 본사 계열이다 (CLKGB 관리자 화면과 같은 값 · 26.09.10 사용자) ──
     CLKGB 는 현장 화면을 네이비+골드로, 본사 화면(총괄·관리자·보고서)을 차콜+실버로 가른다.
     ★ 골드는 현장 브랜드색이라 본사 화면에서 안 쓴다(위파크-방명록/theme.css).
     이 프로그램은 우리 직원만 쓰는 내부 화면이라 본사 계열을 따른다. */
  --hq:#1b1d21;          /* 머리띠 · 채운 단추 — theme.css --brand-hq */
  --hq-dk:#2a2d33;       /* 그 위에 마우스를 올린 자리 */
  --accent-line:#8e9bb0; /* 본사 액센트 — 선 */

  /* ── 차트 계열 색 (26.09.22) ─────────────────────────────────────
     값은 보고서 정본 `CLK_Report_Guide/템플릿/report.css` 를 그대로 가져왔다 —
     계열 1은 네이비, 2는 옅은 남색이고 레드는 계열 3이다.
     ★ 기둥을 레드로 칠하지 않는다 — 브랜드 레드는 넓은 면에 안 쓴다(위 10단 주석). */
  --ser1:#002060;  /* 계열 1 — 기둥 · 첫 선 */
  --ser1-hv:#0b2f7a; /* 계열 1 위 마우스 — AI 단추 */
  --ser2:#7f93b6;  /* 계열 2 — 둘째 기둥 · 둘째 선 */

  /* ── 브랜드 레드 10단 (26.09.15 사용자 승인) ──────────────────────
     값 하나로는 면 · 선 · 글자 · 틴트를 다 못 해서 결국 선에만 썼다.
     Ant Design 방식으로 10단을 펴고 6단을 CI 정본 #ae0e16 으로 박는다(CI 2.1).
     옆의 수는 흰 바탕 대비다. 넓은 면은 안 칠한다 — 1~2단 틴트로 색조만 깐다. */
  --red1:#fcf3f3;   /* 1.09:1  줄 위 마우스 — 가장 옅은 틴트 */
  --red2:#f8e2e3;   /* 1.24:1  고른 줄 바탕 */
  --red3:#f3c4c6;   /* 1.55:1  틴트 테두리 */
  --red4:#ec8d92;   /* 2.39:1  옅은 선 */
  --red5:#e9353e;   /* 4.16:1  잠긴 면 */
  --red:#ae0e16;    /* 7.31:1  ★ 기준 — 면 · 기둥 · 밑줄 (= 6단) */
  --red7:#930b12;   /* 9.14:1  면 위 마우스 */
  --red8:#77090e;   /* 11.48:1 누른 자리 */
  --red9:#59080c;   /* 14.34:1 흰 바탕 위 글자 */

  /* ── 면 6 ── */
  --bg:#eef1f6;    /* 바탕 */
  --card:#fff;     /* 카드 */
  --sink:#f6f8fb;  /* 눌러앉은 면 — 입력칸 · 발자취 */
  --head:#f4f6f9;  /* 표 머리 — CLKGB .lthead */
  /* 상태 레이어 — 넓은 면을 안 칠하고 브랜드 색조를 화면에 깐다 (26.09.15).
     옛 값은 푸른 회색 #fafbfc 였다 — 브랜드와 거의 보색이라 색조가 안 돌았다. */
  --hover:var(--red1); /* 표 줄에 마우스를 올린 곳 */
  --pick:var(--red2);  /* 고른 줄 */
  --line:#e2e6ee;  /* 카드 테두리 — CLKGB 관리자와 같다 */
  --line2:#cfd8e4; /* 강조 테두리 — 고른 것 · 입력칸 */
  --hair:#f0f3f8;  /* 안쪽 실선 */

  /* ── 글자색 4 ── */
  --ink:#141c26;    /* 값 — 흰 바탕 14.9:1 */
  --ink2:#4d5766;   /* 보조 — 7.4:1 */
  --ink3:#5a6472;   /* 라벨 — CLKGB --slate · 흰 바탕 6.4:1 */
  --ink-on:#a8b4c6; /* 남색 위 */

  /* ── 등급 색 넷 (26.09.15 사용자 승인) ────────────────────────────
     지적 등급 넷(`app.js` CHECK_GRADE_ORDER)이 지금 같은 검정 글자로 뜬다.
     ★ 색만으로 안 가른다 — 적록 색각이상에서 자주와 청록이 눈거리 0.5 로 무너진다.
     꼬리표 모양(채움 · 외곽선 · 없음 · 옅은 면)이 먼저 가르고 색은 보조다.
     색상은 150~330° 에서만 골랐다 — 0~135° 는 브랜드 레드와 색각이상에서 안 갈린다. */
  --g-say:#a4176d;    --g-say-bg:#fdf0f7;   --g-say-ln:#efc8e0;  /* 단정      6.50:1 */
  --g-ask:#1157b8;    --g-ask-bg:#f0f5fd;   --g-ask-ln:#c8d8ef;  /* 확인 요망  6.23:1 */
  --g-ref:#5a6472;    --g-ref-bg:#f5f6f7;   --g-ref-ln:#d7dbe0;  /* 참고      5.54:1 */
  --g-note:#0e6e6b;   --g-note-bg:#f0fdfc;  --g-note-ln:#c8efee; /* 알림      5.82:1 */

  /* ── 뜻 색 2 (좋은 것에는 색을 쓰지 않는다) ──
     ★ 갈색은 「입력이 잘못됐다」 자리에만 남긴다. 브랜드 레드와 녹색약에서
     눈거리 6.0 이라 빨강 면 옆에 세우지 않는다 — 등급은 위 넷이 맡는다. */
  --warn:#a05d12;      /* 손이 가야 하는 것 */
  --warn-line:#e2b4ac; /* 손이 가야 하는 것 — 옅은 테두리 */
  --note-bg:#fbf4ec;   /* 짚어 주는 상자 — 면. CLKGB .hocaution 과 같다 */
  --note-line:#eadcc6; /* 짚어 주는 상자 — 테두리 */
  /* 사진 위에 까는 남색 장막 — 문 앞 두 화면(CI 2.2 · 사진을 어둡게 깔고 흰색판) */
  --veil:linear-gradient(180deg,rgba(27,29,33,.76),rgba(27,29,33,.52));
  --calm:#69737f;  /* 지난 것 · 갈래 */

  /* ── 글자 7단 (짝수) ── */
  --fs1:11px;  /* 배지 · 꼬리표 — 굵기 600 이상 · 8자 이하 · 문장 금지 */
  --fs2:13px;  /* 라벨 · 표 머리 · 주석 — 문장은 여기부터 */
  --fs3:15px;  /* ★ 본문 · 값 · 입력 · 단추 — 기준. 여기서 위아래로 뻗는다 */
  --fs4:17px;  /* 구역 제목 */
  --fs5:19px;  /* 요약 값 */
  --fs6:25px;  /* 화면 제목 */
  --fs7:33px;  /* 대시보드 큰 숫자 — ★ 이 프로그램에서는 안 쓴다(26.09.10 실측 0곳) */

  /* ── 굵기 3단 ── */
  --w1:400; --w2:600; --w3:700;

  /* ── 여백 7단 (4 배수) ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ── 구역 제목 기둥 폭 ── */
  /* 구역 제목을 왼쪽으로 눕힐 때 쓰는 한 값이다. 「생활환경」 넉 자가 한 줄에 든다 (26.09.14) */
  --w-grptitle:84px;

  /* ── 반지름 3단 ── */
  --r1:8px;    /* 배지 · 단추 · 입력 — CLKGB .cardbtn */
  --r2:12px;   /* 카드 — CLKGB .hq · .hopanel */
  --r3:999px;  /* 알약 · 점 */

  /* ── 그림자 2단 ── */
  --lift:0 8px 26px rgba(20,28,38,.14);
  --ring:0 0 0 3px rgba(174,14,22,.22);   /* 포커스 테두리 — 브랜드 레드 (26.09.15) */

  /* ── 행간 4단 · 자간 3단 ── */
  --lh1:1;    /* 아이콘 상자 */
  --lh2:1.2;  /* 화면 제목 · 요약 값 */
  --lh3:1.5;  /* 본문 — 기본 */
  --lh4:1.8;  /* 10px 배지 */
  --ls1:-.6px; /* 24px 제목 */
  --ls2:-.2px; /* 굵은 값 */
  --ls3:.2px;  /* 10px 배지 */

  --dur:120ms;
  --w-page:1560px;
}

/* ── 바탕 ── */
*{box-sizing:border-box}
b,strong{font-weight:var(--w3)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,'맑은 고딕',sans-serif;
  font-size:var(--fs3);line-height:var(--lh3);
  font-feature-settings:'tnum';-webkit-font-smoothing:antialiased}
.page{width:var(--w-page);margin:0 auto;padding:var(--s5) var(--s5) var(--s7)}

/* ── 머리띠 ── */
/* 머리띠 — 본사 차콜 한 면(CLKGB 관리자와 같다).
   ★ 26.09.10 왼쪽 CLK 레드 기둥을 되살렸다(사용자) — 브랜드 표시라 걸음 밑줄과 층이 다르다. */
.top{display:flex;align-items:center;gap:var(--s4);background:var(--hq);color:var(--card);
  border-left:4px solid var(--red);
  border-radius:var(--r2);padding:var(--s4) var(--s5)}
/* 마크만 쓴다. 어두운 배경이라 흰색 — CI 정책 2.2(단색은 100% 흰색) */
.top .mark{height:26px;filter:brightness(0) invert(1)}
.top h1{margin:0;font-size:var(--fs6);font-weight:var(--w3);letter-spacing:var(--ls1);
  line-height:var(--lh2)}
.top .sp{flex:1}
.top .meta{font-size:var(--fs2);color:var(--ink-on);text-align:right;line-height:var(--lh3)}

/* 단추는 갈래마다 하나로 묶는다 — 낱개로 흩어 놓으면 일곱이 한 줄에 빽빽하다 */
.pick{display:flex;align-items:center;gap:var(--s3)}
.pick i{font-style:normal;font-size:var(--fs2);color:var(--ink-on);margin-right:2px}
.pick .seg{display:flex;border:1px solid var(--ink-on);border-radius:var(--r1);overflow:hidden}
.pick .seg button{font-size:var(--fs2);font-weight:var(--w2);color:var(--ink-on);
  background:transparent;border:0;border-radius:0;padding:4px 11px;cursor:pointer;
  white-space:nowrap}
.pick .seg button+button{border-left:1px solid var(--ink-on)}
.pick .seg button:hover{background:var(--hq-dk)}
.pick .seg button.on{background:var(--card);color:var(--hq);font-weight:var(--w3)}

/* ── 현장 개요 — 머리띠 안 ──
   머리띠 가운데가 974px 비어 있었고 현장 줄이 따로 50px 을 쓰고 있었다.
   그 줄을 여기로 들여 껍데기가 세 줄에서 두 줄이 됐다(화면지침 1장 · 26.09.08). */
.ctx{display:flex;align-items:baseline;gap:var(--s4);min-width:0;overflow:hidden}
.ctx span{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--fs3);
  font-weight:var(--w2);letter-spacing:var(--ls2);white-space:nowrap;min-width:0}
/* 현장명이 이 화면의 주인공이다 — 한 단만 올린다(화면지침 4-1) */
/* ★ 26.09.10 16px → 14px. 화면 이름(18px/700)과 2px 차에 굵기가 같아
   글자 수가 많은 현장명이 더 커 보였다 — 제목이 안 섰다 */
.ctx span b{font-weight:var(--w3);font-size:var(--fs3);overflow:hidden;text-overflow:ellipsis}
.ctx span+span{padding-left:var(--s4);border-left:1px solid var(--hq-dk)}
.ctx i{font-style:normal;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink-on)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  margin-top:var(--s3);padding:var(--s4)}

/* 목업 설명 — 화면이 아니다 */
.mk-note{margin-top:var(--s4);background:var(--note-bg);border:1px solid var(--note-line);
  border-radius:var(--r2);padding:var(--s4)}
.mk-note h3{margin:0 0 var(--s2);font-size:var(--fs3);color:var(--hq)}
.mk-note ul{margin:0;padding-left:var(--s4)}
.mk-note li{margin:var(--s1) 0;font-size:var(--fs3)}

/* ── 앱형 짜임 — 페이지는 안 구르고 표 상자만 구른다 (26.09.01) ──
   세로 휠이 하나가 된다. 가로 스크롤바도 표 끝이 아니라 상자 바닥, 곧 화면 안에 온다. */
/* 창이 화면 폭(1560px)보다 좁으면 가로 스크롤바를 낸다(26.09.30 사용자) — overflow:hidden 이라
   오른쪽이 스크롤바도 없이 잘렸다. 세로는 틀 안 표가 굴린다 */
body.app{height:100vh;overflow-x:auto;overflow-y:hidden}
body.app .page{height:100vh;display:flex;flex-direction:column;padding-bottom:var(--s4)}
body.app .card{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:var(--s3)}
/* 세로 막대가 서면 안쪽 폭이 막대 폭만큼 좁아져 열 폭 합이 넘치고 가로 막대까지 생긴다.
   가로를 잠근다 — 잘리는 17px 은 맨 오른쪽 비고 열이고 이미 말줄임으로 자른다(26.09.08). */
body.app .scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}

/* 목업 설명은 접어 둔다 — 실물 화면에 없는 것이라 자리를 뺏으면 안 된다 */
body.app .mk-note{flex:none;margin-top:0}
.mk-note h3{cursor:pointer;user-select:none;margin:0}
body.app .mk-note ul{max-height:200px;overflow:auto;margin-top:var(--s2)}

/* ── 인쇄 · PDF (26.09.01) ────────────────────────────────
   보이는 대로 뽑는다 — 펼친 내역은 나가고 접힌 것은 안 나간다.
   표가 391.6mm 라 A3 가로는 100%, A4 가로는 72% 로 줄여 넣는다.
   집 관행대로 판형을 `@page` 에 박는다 — 보고서-작성지침 13장. */
@page a3{size:A3 portrait;margin:8mm}
@page a4{size:A4 portrait;margin:8mm}

@media print{
  /* 상자를 푼다 — 안 풀면 화면에 보이는 만큼만 인쇄된다 */
  body.app{height:auto;overflow:visible}
  body.app .page{height:auto;display:block}
  body.app .card{display:block;margin-bottom:0}
  body.app .scroll{overflow:visible;max-height:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:var(--card)}
  .page{width:auto;padding:0}
  .mk-note{display:none}
  .card{border:0;padding:0;margin-top:var(--s3)}
  .ctx{color:var(--ink)}
  thead{display:table-header-group}          /* 장마다 표 머리를 되풀이한다 */
  tr{break-inside:avoid}
  tr.grp{break-after:avoid}                  /* 대분류 띠만 앞장 끝에 남지 않게 */
  tr.has.on{break-after:avoid}               /* 펼친 세목과 내역을 붙여 둔다 */
  .tx{white-space:normal;overflow:visible}   /* 종이에서는 말줄임 대신 줄바꿈 */
}

/* ── CLK 레드는 뜻이 있는 자리에만 쓴다 (26.09.01) ──
   ㉮ 음수 — 나가는 돈 · 환입 · 상환   ㉯ ★ — 사람이 봐야 하는 곳
   좋은 것에는 색을 쓰지 않는다(토큰 머리글). 장식으로 뿌리지 않는다. */
.star{color:var(--red);font-weight:var(--w2)}

/* 움직임을 줄이라고 설정한 사람에게는 전환을 끈다.
   지금 이 프로그램에 전환·애니메이션은 없다 — 나중에 넣어도 자동으로 걸리게 미리 둔다 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}