/* 출장부 — 미색 바탕에 순백 카드. 테두리 없이 아주 연한 그림자로만 면을 나눈다.
근거는 `specs/design-ref.md` — 참조 이미지 1~5 를 여덟 요소로 뜯어본 결과다.
가장 중요한 규칙 하나: **진하게 칠하는 자리는 화면당 한둘을 넘지 않는다.**
참조가 편해 보이는 이유가 그것이고, 칩까지 칠했다가 화면이 얼룩졌던 이유이기도 하다. */
:root{
/* 바탕이 흰색이면 흰 카드가 안 떠 보인다. 참조도 흰색이 아니라 옅은 라벤더 회색이다 */
--ground:#F4F4F9; --surface:#FFF; --surface-2:#F0EFF7; --surface-3:#E4E2F0;
/* 세 단계 다 **흰 카드·얼룩줄·칠한 바탕** 셋에서 4.5:1 을 넘긴다.
종전 --ink-3 은 #767688 이었는데 흰 4.45 · 얼룩줄 4.27 · 칠한 바탕 3.90 으로 셋 다
미달이었다(주석은 넘긴다고 적혀 있었다). 이 값이 안내글·「미확인」·표 머리글처럼
11~13px 작은 글자에 전부 쓰여서 제일 먼저 안 읽히던 자리다. test/contrast.test.js 가 센다 */
--ink:#1B1B27; --ink-2:#5B5B6E; --ink-3:#6A6A7C;
--line:rgba(27,27,39,.08); --line-2:rgba(27,27,39,.04);
/* 선명한 보라 — 참조의 토글·주 버튼·고른 탭 색. 진하게 칠하는 자리는
주 버튼·고른 탭·고른 세그먼트뿐이다. accent-weak 는 거의 흰색이라
칩이 수십 개 깔려도 화면이 얼룩지지 않는다 */
--accent:#6C4DF6; --accent-2:#8E76FF; --accent-weak:#EEEAFE; --accent-ink:#5334D9;
--on-accent:#FFF;
/* 참조의 파스텔은 늘 「아주 옅은 바탕 + 그 색의 진한 글자」 쌍이다 */
/* 종전 #A2620B 는 옅은 쪽 4.38 · **진한 쪽 3.71** 로 미달이었다. 오전·오후를 칠한
방향으로 나타내느라 한 칩 안에 바탕이 둘인데, 옅은 쪽만 재면 진한 쪽이 새 나간다 */
--oxide:#8C5309; --oxide-weak:#FDF1DC;
--ok:#1D8A5C; --ok-weak:#E2F5EC; --ok-ink:#17714A;
/* **여태 이 앱에 위험을 나타내는 색이 없었다**(2026-08-30). 준공 지연 「주의」와 지우기
단추가 처음 필요로 했다. 다른 색들과 같은 규칙으로 골랐다 — 옅은 바탕 하나와 그 위에
얹는 진한 글자 하나. 흰 카드 9.28 · 얼룩줄 9.09 · 미입력 노란 줄 8.76 으로 셋 다
4.5:1 을 넘는다(test/contrast.test.js 가 센다). */
--bad:#8A1C1C; --bad-weak:#FBE9E9;
/* 월간 현황판에서 **아직 아무도 안 적은 줄**의 바탕. 종전에는 `status.css` 에 색을
직접 적어 두어서 명암비 시험이 그 위에 얹히는 글자를 못 쟀다. 토큰으로 옮기면
시험이 자동으로 센다 — 화면 파일에 색을 직접 적지 않는 이유가 그것이다. */
--blank-row:#FFF8E7;
/* 오전/오후를 칩의 **칠한 방향**으로 나타낸다. 그러려면 종류마다 옅은 색 하나로는
모자라고 **두 단계**가 있어야 한다 — 안 그러면 반만 칠해도 티가 안 난다.
-weak 가 옅은 쪽, -mid 가 진한 쪽이다. */
--accent-mid:#D5CBFB; --oxide-mid:#F7DDB0;
/* 사무실 칩은 --surface-2 를 쓰면 안 된다. 「사무실 근무」 줄 바탕이 바로 그 색이라
칩이 바탕에 묻혀 사라진다. 흰 카드 위에서도, 칠한 줄 위에서도 보이는 값으로 따로 둔다 */
사무실은 글자(--ink-2)를 못 건드리니 **바탕을 밝힌다** — 종전 #D3D1E4 는 4.42 였다. */
--office-weak:#E7E6F0; --office-mid:#E0DEEC;
/* 표 줄 구분 — 현장이 여러 줄일 때 눈이 줄을 놓치지 않을 만큼만 */
--zebra:#FAFAFD;
/* 「중복 의심」 줄 채우기. **배지와 같은 색이면 안 된다** — 종전에는 줄과 배지가 둘 다
--oxide-weak 이라 배지가 줄에 묻혀 「무엇이 의심인지」가 안 보였다(2026-08-21).
줄은 훨씬 옅게, 배지는 --oxide-mid 로 진하게 갈랐다 */
--dup-row:#FFFBF3;
/* 그림자는 거의 안 보여야 한다. 보이면 그건 테두리지 그림자가 아니다 */
--sh-1:0 1px 2px rgba(27,27,39,.04),0 2px 10px rgba(27,27,39,.05);
--sh-2:0 6px 16px rgba(27,27,39,.09),0 24px 52px rgba(27,27,39,.14);
--r:14px; --r-lg:20px; --r-sm:10px; --r-pill:999px;
--s1:2px; --s2:4px; --s3:8px; --s4:12px; --s5:16px; --s6:24px;
--t1:11px; --t2:12px; --t3:13px; --t4:15px; --t5:18px; --t6:24px;
--tap:44px; --field:16px;
--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
/* 글꼴이 절반이다. Pretendard 를 설치한 사람만 예쁘게 보고 나머지는 맑은 고딕으로
떨어지던 것을, index 의 ` 로 만든 단추.** 밑줄을 없애고 높이를 단추와 맞춘다 — `min-height` 만으로는 안 맞는다:
inline 요소는 위아래 padding 이 높이를 만드는 방식이 달라 세로가 부풀고 글자가 위로 붙는다.
휴대폰에서 「확정」이 옆의 「＋ 출장 등록」보다 크고 밑줄까지 달려 있던 이유다(2026-08-21). */
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.pri{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn.pri:hover{background:var(--accent);filter:brightness(1.14)}
.btn.danger{color:var(--oxide);background:var(--oxide-weak);box-shadow:none}
/* 「확정」 — 한 주를 닫는 단추. 주 버튼(보라)과 **다른 색**이어야 한다: 등록은 늘 하는 일이고
확정은 한 주에 한 번이라, 같은 색이면 손이 습관대로 간다 */
.btn.ok{color:var(--ok-ink);background:var(--ok-weak);font-weight:600;box-shadow:none}
.btn.ok:hover{background:var(--ok-weak);filter:brightness(.97)}
/* **누른 뒤**. 「눌렀나 안 눌렀나」가 한눈에 갈려야 하므로 여기서는 색을 채운다 —
`--ok` 는 흰 글자와 4.0:1 이라 모자란다. 진한 쪽(`--ok-ink`)을 쓴다(test/contrast.test.js) */
.btn.okon{color:var(--on-accent);background:var(--ok-ink);font-weight:700;box-shadow:none}
.btn.okon:hover{background:var(--ok-ink);filter:brightness(1.1)}
/* 확정 묶음 — 왼쪽은 내 도장, 오른쪽은 팀 진행률(누르면 누가 눌렀는지 보인다) */
.cfm{display:inline-flex;align-items:center;gap:var(--s2)}
.cfm .cnt{display:inline-flex;align-items:center;min-height:var(--tap);padding:var(--s2) var(--s4);
border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--sh-1);
color:var(--ink-2);font-size:var(--t2);font-weight:600;text-decoration:none;
font-variant-numeric:tabular-nums}
.cfm .cnt:hover{background:var(--surface-2)}
.cfm .cnt.full{color:var(--ok-ink);background:var(--ok-weak);box-shadow:none}
.btn.wide{width:100%}
/* 표 줄 안에 끼는 작은 버튼. 44px 를 주면 줄이 두 배로 높아진다 */
.btn.mini{min-height:30px;padding:var(--s1) var(--s4);font-size:var(--t2);box-shadow:none;background:var(--surface-2)}
/* 머리말의 「나가기」. mini 와 같이 붙이면 안 된다 — 굵기가 같아 뒤에 오는 쪽이 이기고,
휴대폰에서 44px 로 키우는 규칙이 mini 에 막힌다 */
.btn.out{min-height:34px;padding:var(--s1) var(--s4);font-size:var(--t2);box-shadow:none;background:var(--surface-2)}
/* 아이콘 하나짜리 동그란 버튼. 글자가 없으니 정사각형이어야 원이 된다 */
.btn.icon{width:30px;min-width:30px;height:30px;min-height:30px;padding:0;box-shadow:none;
background:var(--surface-2);color:var(--ink-3);font-size:var(--t2);line-height:1;
display:inline-flex;align-items:center;justify-content:center}
.btn.icon:hover{background:var(--oxide-weak);color:var(--oxide)}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
/* 참조의 큰 숫자 — 굵게가 아니라 크고 자간을 좁게 */
.wk{font-size:var(--t6);font-weight:600;letter-spacing:-.035em;padding:0 var(--s3);font-variant-numeric:tabular-nums}
/* 칩 — 칠한 방향이 오전/오후다. 이 앱의 발명이라 모양만 바꾸고 규칙은 그대로 둔다.
화면에서 제일 많은 요소라 바탕은 거의 흰색이고 글자만 파랗다 */
/* 종류(출장·휴가·사무실)는 **색으로**, 시간대(전일·오전·오후)는 **칠한 방향으로**
나타낸다. 두 축이 겹치지 않아야 한 알약에 둘 다 담긴다.
각 종류가 --c-lo(옅은 쪽) / --c-hi(진한 쪽) 한 쌍을 정하고,
.am/.pm 규칙은 그 쌍을 쓰기만 한다 — 종류가 늘어도 규칙은 그대로다. */
.chip{--c-lo:var(--accent-weak); --c-hi:var(--accent-mid);
display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s4);border-radius:var(--r-pill);
border:0;color:var(--accent-ink);font-size:var(--t2);line-height:1.5;font-weight:600;letter-spacing:-.005em;
white-space:nowrap;background:var(--c-lo);cursor:pointer;min-height:26px}
/* 전일은 한 색으로 꽉 참 · 오전은 왼쪽만 진함 · 오후는 오른쪽만 진함 */
.chip.am{background:linear-gradient(90deg,var(--c-hi) 0 50%,var(--c-lo) 50% 100%)}
.chip.pm{background:linear-gradient(90deg,var(--c-lo) 0 50%,var(--c-hi) 50% 100%)}
/* 글자로도 한 번 더 말해 준다 — 색만으로는 색을 못 가리는 사람이 놓친다 */
.chip .h{font-size:var(--t1);letter-spacing:0;opacity:.85;font-weight:700}
.chip.leave{--c-lo:var(--oxide-weak); --c-hi:var(--oxide-mid); color:var(--oxide)}
.chip.office{--c-lo:var(--office-weak); --c-hi:var(--office-mid); color:var(--ink-2);cursor:default;font-weight:500}
/* 표 — 흰 카드 안에 넣는다. 테두리가 아니라 그림자가 가장자리를 만든다 */
.scroller{overflow-x:auto;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
table.grid{border-collapse:collapse;width:100%;min-width:980px}
/* 참조 달력(이미지 5)은 7열짜리 표인데 **격자선이 한 줄도 없다** — 줄은 여백과
세로 정렬로만 나뉜다. 여기서도 세로선은 전부 없앴다.
가로선만 아주 흐리게(불투명도 4.5%) 남겼다: 참조는 한 칸에 숫자 하나지만
여기는 한 칸에 이름 칩이 여러 개 쌓여서, 선이 아예 없으면 눈이 줄을 놓친다.
한눈에는 「선이 없다」로 보이고 따라 읽을 때만 잡히는 세기다. */
table.grid th,table.grid td{border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;
padding:var(--s5)}
table.grid tbody tr:last-child td{border-bottom:0}
/* 현장이 여러 줄일 때 어느 이름이 어느 현장 줄인지 놓친다. 한 줄 걸러 아주 연하게
칠해서 눈이 가로로 따라가게 한다 — 선을 다시 넣지 않고 해결하는 방법이다.
아래 「오늘」과 사무실·휴가 줄은 이것보다 굵어야 이긴다(그래서 선택자가 길다) */
table.grid tbody tr:nth-of-type(even) td{background:var(--zebra)}
/* 요일 머리글 — 참조처럼 작고 흐린 글씨에 밑줄 없음 */
table.grid thead th{position:sticky;top:0;background:var(--surface);border-bottom:0;
font-size:var(--t2);font-weight:600;color:var(--ink-2);z-index:2;letter-spacing:-.005em;
padding-bottom:var(--s3)}
table.grid thead th .dow{font-size:var(--t1);letter-spacing:.06em;color:var(--ink-3);display:block;font-weight:500}
table.grid th.site,table.grid td.site{width:300px;min-width:300px}
.sitename{font-size:var(--t3);font-weight:600;line-height:1.45;letter-spacing:-.01em}
.sitemeta{font-size:var(--t1);color:var(--ink-3);margin-top:var(--s1);font-variant-numeric:tabular-nums;letter-spacing:0}
/* 구분 표시 — 참조는 종류마다 다른 파스텔을 준다(이미지 10 의 카드 머리띠,
이미지 11 의 아이콘 사각형). 규칙은 늘 「아주 옅은 바탕 + 그 색의 진한 글자」다.
색 자체에 뜻은 없다 — **같은 구분이 늘 같은 색으로 보이는 것**이 목적이다.
그래야 「특별안전점검이 이번 주에 몇 건인가」를 글자를 안 읽고 색으로 훑는다.
배정은 week.js 가 KINDS 순서대로 k0~k7 을 돌려 붙인다. */
.kind{display:inline-block;font-size:var(--t1);letter-spacing:.02em;color:var(--ink-2);font-weight:700;
border:0;border-radius:var(--r-pill);padding:var(--s1) var(--s3);margin-bottom:var(--s2);background:var(--surface-2)}
.kind.k0{background:#EEEAFE;color:#5334D9} /* 보라 */
.kind.k1{background:#E2F5EC;color:#17714A} /* 민트 */
.kind.k2{background:#FDF1DC;color:#8C5309} /* 호박 — 여덟 중 이것만 4.38 로 미달이었다 */
.kind.k3{background:#FCE7F1;color:#B03A72} /* 분홍 */
.kind.k4{background:#E4EFFD;color:#1F5FA8} /* 파랑 */
.kind.k5{background:#FDE9E6;color:#B0453A} /* 산호 */
.kind.k6{background:#F4F1DC;color:#7A6B12} /* 올리브 */
.kind.k7{background:#E7F1F4;color:#1C6373} /* 청록 */
td.day{min-width:130px}
td.day .stack,tr.band td .stack{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
/* 사무실·휴가 두 줄 — 선이 아니라 칠한 면으로 본문과 가른다.
선택자가 긴 것은 위 한 줄 걸러 칠하기(zebra)를 이겨야 하기 때문이다 */
table.grid tbody tr.band td{background:var(--surface-2);border-top:0;border-bottom:0}
tr.band td.site{font-size:var(--t3);font-weight:600;color:var(--ink-2)}
tr.band:first-of-type td{padding-top:var(--s6)}
/* 오늘 — 참조는 고른 날짜를 꽉 찬 원으로 표시한다. 표에서는 칸을 옅게 칠했다.
이것도 zebra 와 band 를 둘 다 이겨야 해서 선택자를 길게 뒀다 */
table.grid tbody tr td.today,table.grid tbody tr.band td.today,
table.grid thead th.today{background:var(--accent-weak)}
/* 날짜 머리글로 휴일을 넣고 뺀다 — 지정된 담당자에게만 이 class 가 붙는다 */
.holidaybtn{cursor:pointer;user-select:none;border-radius:var(--r-sm)}
.holidaybtn:hover{background:var(--surface-2)}
.holidaybtn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* 마스터 표.
`min-width` 는 **고정 칸 합(758px) + 이름 칸이 쓸 자리**다. 900 이던 때는 이름 칸에
142px 만 남아서, 휴대폰에서 현장명이 「(서 / 울) 서울강동농 / 협 …」로 글자마다 끊겼다.
칸 자체는 가로 스크롤(`.scroller`) 안에 있으므로 넓혀도 화면을 밀지 않는다. */
table.master{border-collapse:collapse;width:100%;min-width:1080px;font-size:var(--t3)}
/* 열 폭. 종전에는 ` ` 로 표에 직접 적혀 있었는데, CSP 를 켜면
브라우저가 style 속성을 막으므로 폭이 통째로 사라진다. 그래서 여기로 옮겼다.
차례는 표의 머리글 차례 그대로다 — 고른칸 · 이름 · 분류 · 사무소 · 규모 · 별칭 ·
출장 · 최근 · 상태. 이름 칸(2번)만 폭을 안 주고 남는 자리를 다 쓴다. */
table.master thead th:nth-child(1){width:34px}
table.master thead th:nth-child(3){width:116px}
table.master thead th:nth-child(4){width:100px}
table.master thead th:nth-child(5){width:150px}
table.master thead th:nth-child(6){width:170px}
table.master thead th:nth-child(7){width:56px}
table.master thead th:nth-child(8){width:78px}
table.master thead th:nth-child(9){width:78px}
/* **한글은 기본값이 글자 사이에서도 줄바꿈이다.** 이름을 낱말째로 끊는다 —
종이 인쇄에서 「신재필」이 세로로 쪼개졌던 것과 같은 자리다(R100).
`keep-all` 은 띄어쓰기 없는 긴 이름을 칸 밖으로 밀 수 있으므로 `anywhere` 를 뒤에 둔다. */
table.master td{word-break:keep-all;overflow-wrap:anywhere}
table.master th{background:transparent;text-align:left;font-weight:600;color:var(--ink-3);
border-bottom:0;padding:var(--s4) var(--s5) var(--s3);font-size:var(--t1);letter-spacing:.05em}
table.master td{border-bottom:1px solid var(--line-2);padding:var(--s5);vertical-align:top}
table.master tr:last-child td{border-bottom:0}
/* 숫자 칸 — 자리를 맞춰야 세로로 읽힌다 */
table.master td.n{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:var(--t2)}
table.master tr.dup td{background:var(--dup-row)}
table.master tr.arch td{color:var(--ink-3)}
.alias{display:inline-block;font-size:var(--t1);color:var(--ink-2);font-weight:500;
border:0;border-radius:var(--r-pill);padding:var(--s1) var(--s3);margin:var(--s1) var(--s1) 0 0;background:var(--surface-2)}
/* 지역 표식. **「수정」 단추와 같은 회색이면 안 된다** — 나란히 있으면 어느 것이 눌리는
것인지 헷갈린다(2026-08-21). 누르는 것은 회색, 읽는 것은 연보라로 가른다 */
.prov{display:inline-block;font-size:var(--t1);color:var(--accent-ink);font-weight:600;
border:0;border-radius:var(--r-pill);padding:var(--s1) var(--s3);margin:0 var(--s3) 0 0;
background:var(--accent-weak);letter-spacing:.01em}
.badge{display:inline-block;font-size:var(--t1);letter-spacing:.01em;padding:var(--s1) var(--s3);
border-radius:var(--r-pill);border:0;font-weight:600}
.badge.dup{color:var(--oxide);background:var(--oxide-mid)}
.badge.off{color:var(--ink-3);background:var(--surface-2)}
.badge.on{color:var(--ok-ink);background:var(--ok-weak)}
/* 여백은 마스터 표 안에서만. 전역에 걸면 현황판 머리줄의 「미등록」 알약까지 밀린다 */
table.master .badge.dup{margin-left:var(--s3)}
.arch-btn{margin-left:var(--s3)}
/* 현황판 머리줄의 알약 — 표 안 배지보다 크다 */
.badge.pill{padding:var(--s2) var(--s4);font-size:var(--t2)}
.searchbox{border:0;border-radius:var(--r-pill);padding:var(--s3) var(--s5);min-height:var(--tap);
font-size:var(--field);flex:1;max-width:340px;background:var(--surface);box-shadow:var(--sh-1)}
.checkline{display:flex;align-items:center;gap:var(--s3);font-size:var(--t3);color:var(--ink-2)}
/* 막대 안의 고르는 칸 — 옆이 알약 검색창이라 같은 결로 맞춘다 */
/* 고르는 칸. **브라우저 기본 화살표를 걷어낸다** — 그 회색 삼각형 하나가 화면 전체를
낡아 보이게 한다. 화살표는 직접 그린 것(아래 배경 그림)을 쓴다. `appearance:none` 만
하면 화살표가 아예 없어져 고를 수 있는 칸인지 모르므로 **짝으로** 넣는다. */
.pillsel{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--r-pill);
background-color:var(--surface-2);color:var(--ink);font-size:var(--t3);font-weight:500;
padding:var(--s2) calc(var(--s5) + 10px) var(--s2) var(--s4);cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B5B6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right var(--s4) center}
.pillsel:hover{background-color:var(--surface-3)}
.pillsel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bar select.pillsel{min-height:var(--tap);background-color:var(--surface);box-shadow:var(--sh-1)}
/* 분류 칸. **「기술지원」이 「기술」로 잘리면 안 된다** — 잘리면 무슨 분류인지 모른다.
네 글자 + 화살표가 들어갈 폭을 표 머리(116px)와 짝으로 잡았다 */
table.master select.pillsel{width:100%;font-size:var(--t2);
padding-right:calc(var(--s4) + 12px);background-position:right var(--s3) center}
.note{color:var(--ink-3);font-size:var(--t2);margin-top:var(--s5);line-height:1.6}
/* 휴대폰 세로 보기 — 하루가 카드 하나 */
.days{display:none}
/* 참조는 한 줄이 카드 하나고, 줄 사이를 **여백으로** 나눈다(선이 없다).
휴대폰에서는 하루가 카드 하나라 그 모양이 그대로 맞는다 */
.daygrp{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:var(--s4);overflow:hidden}
.daygrp .dh{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s5) var(--s5) var(--s4);
border-bottom:1px solid var(--line-2)}
.daygrp .dh .d{font-size:var(--t5);font-weight:700;letter-spacing:-.025em}
.daygrp .dh .c{font-size:var(--t2);color:var(--ink-3);margin-left:auto}
.row{display:flex;gap:var(--s4);padding:var(--s4) var(--s5);border-top:1px solid var(--line-2)}
.row:first-of-type{border-top:0}
/* 구분 알약 — .kind 가 색을 주므로 여기서는 자리와 폭만 잡는다.
width 를 고정하지 않는다: 「특별안전점검」이 56px 에 안 들어가 세로로 쪼개진다 */
.row .rk{font-size:var(--t1);flex:none;align-self:flex-start;margin-bottom:0;white-space:nowrap}
.row .rk:not(.kind){color:var(--ink-3);padding-top:var(--s2);font-weight:500}
.row .rn{font-size:var(--t3);line-height:1.45;font-weight:600;letter-spacing:-.01em}
.row .rm{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s2)}
/* 폼 · 모달 */
dialog{border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);
padding:0;width:min(520px,94vw);max-height:88vh;box-shadow:var(--sh-2)}
dialog::backdrop{background:rgba(20,27,38,.34);backdrop-filter:blur(4px)}
/* 머리·본문·바닥 세 층. **본문이 남는 높이를 다 쓴다** — 종전에는 본문에 64vh 를 못
박아 두었는데, 새 현장 창의 칸이 다섯(도·시군·이름·분류·규모)으로 늘자 **규모 세 칸이
아래로 잘렸다**(R107). 창 전체가 88vh 인데 본문만 64vh 로 묶여 나머지가 놀았다.
`dialog[open]` 이어야 한다 — 그냥 `dialog` 에 flex 를 주면 닫혀 있을 때도 보인다. */
dialog[open]{display:flex;flex-direction:column}
dialog .dh{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);border-bottom:1px solid var(--line-2);flex:none}
dialog .dh b{font-size:var(--t5);letter-spacing:-.02em;font-weight:700}
dialog .db{padding:var(--s6);overflow:auto;flex:1 1 auto;min-height:0}
dialog .df{display:flex;gap:var(--s3);padding:var(--s5) var(--s6);border-top:1px solid var(--line-2);flex:none}
dialog .df>*{flex:1}
.fld{margin-bottom:var(--s6)}
/* `.lb` 는 버튼 여럿이 한 칸을 이루는 자리의 이름표다(common.js fieldGroup). 가리킬 칸이
하나가 아니라 `` 을 쓸 수 없다 — 생김새만 같은 줄에 묶는다 */
.fld label,.fld .lb{display:block;font-size:var(--t2);font-weight:600;color:var(--ink-2);margin-bottom:var(--s3)}
/* 입력칸은 테두리 대신 칠한 바탕 */
.fld input,.fld select,.fld textarea{width:100%;border:0;border-radius:var(--r);
padding:var(--s4) var(--s5);font-size:var(--field);background:var(--surface-2);min-height:var(--tap)}
.fld .hint{font-size:var(--t2);color:var(--ink-3);margin-top:var(--s3);line-height:1.55}
/* 규모 세 칸 — 연면적·지하·지상을 한 줄에(R106). 연면적이 넓고 층수 둘은 좁다.
휴대폰에서도 세 칸을 유지한다: 층수는 두 자리라 좁아도 들어가고, 세로로 쌓으면
창이 스크롤 없이 안 들어간다 */
.trio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s3)}
.trio>label{display:block;margin:0}
.trio>label>span{display:block;font-size:var(--t1);color:var(--ink-3);font-weight:500;
margin-bottom:var(--s2);letter-spacing:.02em}
/* 세그먼트 — 칠한 홈 안에서 고른 것만 떠오른다 */
.seg{display:flex;border:0;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2);padding:var(--s1)}
.seg button{flex:1;border:0;background:transparent;border-radius:var(--r-pill);
padding:var(--s3) var(--s2);font-size:var(--t3);font-weight:500;color:var(--ink-2);min-height:40px;
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
/* 등록할 때도 전일·오전·오후가 **칩과 같은 모양**으로 보이게 작은 표식을 붙인다.
꽉 찬 네모 = 전일, 왼쪽만 = 오전, 오른쪽만 = 오후.
currentColor 라서 고른 상태(흰 글자)에서도 저절로 맞는다 — 색을 두 벌 안 짜도 된다 */
.seg button.sg-FULL::before,.seg button.sg-AM::before,.seg button.sg-PM::before{
content:'';width:11px;height:11px;border-radius:3px;flex:none;
box-shadow:inset 0 0 0 1.5px currentColor}
.seg button.sg-FULL::before{background:currentColor}
.seg button.sg-AM::before{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
.seg button.sg-PM::before{background:linear-gradient(90deg,transparent 0 50%,currentColor 50% 100%)}
.seg.compact button.sg-FULL::before,.seg.compact button.sg-AM::before,
.seg.compact button.sg-PM::before{width:9px;height:9px;border-radius:2px}
.pick{display:flex;flex-wrap:wrap;gap:var(--s3)}
.pick button{border:0;border-radius:var(--r-pill);padding:var(--s3) var(--s5);font-size:var(--t3);font-weight:500;
color:var(--ink-2);background:var(--surface-2);min-height:40px}
.pick button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
.results{border:0;border-radius:var(--r);max-height:240px;overflow:auto;background:var(--surface-2)}
.results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-2);
background:transparent;padding:var(--s4) var(--s5);min-height:var(--tap)}
.results button:hover{background:var(--surface)}
.results button:last-child{border-bottom:0}
.results .rt{font-size:var(--t3);font-weight:600;letter-spacing:-.01em}
.results .rs{font-size:var(--t1);color:var(--ink-3);margin-top:var(--s1)}
mark{background:var(--accent-weak);color:var(--accent-ink);border-radius:var(--s2);padding:0 var(--s1)}
.warn{border:0;border-radius:var(--r);background:var(--oxide-weak);
padding:var(--s5);font-size:var(--t3);line-height:1.6;margin-top:var(--s4)}
.warn b{color:var(--oxide)}
.conflict{border:0;border-left:3px solid var(--oxide);border-radius:var(--r-sm);
padding:var(--s4) var(--s5);margin-bottom:var(--s3);background:var(--surface-2)}
.conflict .w{font-size:var(--t1);letter-spacing:.04em;color:var(--oxide);font-weight:700}
.conflict .t{font-size:var(--t3);font-weight:600;margin-top:var(--s1)}
.conflict .s{font-size:var(--t2);color:var(--ink-3);margin-top:var(--s1)}
.toast{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);background:var(--ink);color:var(--surface);
padding:var(--s4) var(--s6);border-radius:var(--r-pill);font-size:var(--t3);font-weight:500;z-index:99;box-shadow:var(--sh-2)}
.empty{padding:var(--s6);text-align:center;color:var(--ink-3);font-size:var(--t3)}
/* 자료가 오기 전에 자리를 잡아 두는 회색 줄 (R114). 흰 종이보다 「곧 온다」가 낫다.
움직임을 끄고 쓰는 사람에게는 흐르지 않게 한다 — 뜻은 「자리」이지 「흐름」이 아니다 */
.sk{height:13px;margin-bottom:10px;border-radius:6px;background:var(--surface-2)}
.sk:last-child{margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,#E6E5F0 50%,var(--surface-2) 75%);
background-size:400% 100%;animation:skwave 1.6s linear infinite}
@keyframes skwave{0%{background-position:100% 0}100%{background-position:-100% 0}}
}
/* 주별 작성 완료 카드 — 2026-08-21부터 **자기 탭**(/done)에 혼자 있다.
종전에는 현황판 표 옆 250px 칸이었다(그 배치 규칙 `.withside`/`.mainside` 는 같이 지웠다).
폭을 다 쓰게 두지 않는다 — 한 줄이 「이름 · 상태 · 버튼」뿐이라 넓히면 셋이 흩어진다. */
.side{max-width:520px;background:var(--surface);border-radius:var(--r-lg);
box-shadow:var(--sh-1);padding:var(--s5)}
.side .sh{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.side .sh b{font-size:var(--t4);letter-spacing:-.02em}
.side .sh .badge{margin-left:auto}
.side .sl{margin-top:var(--s4)}
.side .hint{font-size:var(--t1);color:var(--ink-3);margin-top:var(--s4);line-height:1.55}
/* 한 줄이 한 사람. 완료한 사람은 이름이 진해지고 「완료」가 초록이다 —
색만으로 말하지 않는다(색을 못 가리는 사람이 놓친다). */
.doneline{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;font-size:var(--t3);
color:var(--ink-3);border-top:1px solid var(--line-2)}
.doneline:first-child{border-top:0}
.doneline .nm{font-weight:500}
.doneline .st{margin-left:auto;font-size:var(--t1);letter-spacing:.04em}
.doneline.on{color:var(--ink)}
.doneline.on .nm{font-weight:600}
.doneline.on .st{color:var(--ok-ink);font-weight:700}
/* 관리자의 팀원 PIN 창 — 한 줄이 한 사람 */
.pinrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
padding:var(--s3) 0;border-top:1px solid var(--line-2);font-size:var(--t3)}
.pinrow:first-of-type{border-top:0}
.pinrow .nm{font-weight:600}
.pinrow .sp{margin-left:auto}
/* 담당자별 시간대 고르기 — 좁은 자리에 들어가는 작은 세그먼트(R43).
미디어 쿼리보다 **위**에 있어야 한다. 아래에 두면 뒤에 오는 같은 굵기의 규칙이
이겨서 휴대폰용 크기가 먹지 않는다. */
.seg.compact{flex:none}
.seg.compact button{min-height:28px;padding:var(--s1) var(--s4);font-size:var(--t2)}
@media (max-width:860px){
main{padding:var(--s4)}
header.top{padding:var(--s4);gap:var(--s3)}
header.top h1{font-size:var(--t4)}
nav.tabs a{padding:var(--s3) var(--s4)}
/* 주간 매트릭스만 세로 카드로 바꾼다. 예전에는 .scroller 를 통째로 숨겨서
현장 마스터 표까지 사라졌고, 휴대폰에서 조회·보관·합치기가 전부 막혔다(R17) */
.scroller.week-grid{display:none}
.days{display:block}
/* 휴대폰이 주 사용처다 — 손가락으로 누르는 것은 44px 로 올린다.
칩·작은 세그먼트·표 안 버튼은 한 줄에 여럿이 붙어 44 를 주면 화면이 무너진다.
WCAG AA 최소(24px)는 넘기되 눌리는 만큼만 키운다. */
nav.tabs a,.pick button,.btn.out{min-height:var(--tap)}
/* R114 에서 완료 현황을 하루 카드 **위**로 올렸었다(`order:-1`). 2026-08-21에 그 칸이
탭으로 나가면서 자리 다툼 자체가 없어졌다 — 휴대폰에서는 카드가 폭을 다 쓴다. */
.side{max-width:none}
.chip{min-height:32px;padding:var(--s2) var(--s4)}
/* 칩 사이를 4px → 8px 로 벌린다. **칩을 누르는 것이 이 앱의 주 조작**인데(누르면 그
사람의 출장 수정창), 32px 짜리가 4px 간격으로 서너 개 쌓이면 빗나가서 **엉뚱한
사람의 수정창**이 열린다. 칩을 키우면 표가 무너지므로 크기는 그대로 두고 사이만 벌린다 */
td.day .stack,tr.band td .stack,.row .rm{gap:var(--s3)}
.seg.compact button{min-height:32px}
.btn.mini{min-height:36px}
.btn.icon{width:36px;min-width:36px;height:36px;min-height:36px}
}
/* 인쇄는 지금 쓰던 종이 그대로다 — 그림자·둥근 모서리·연한 색을 전부 되돌린다.
화면용 색을 그대로 태우면 사무실 흑백 프린터에서 연한 칸이 사라진다. */
@media print{
/* 완료 현황은 종이에 안 찍는다 — 종이용은 인쇄 탭이 따로 한 줄로 적는다(print.js) */
header.top,.bar,.days,.side{display:none!important}
body{background:#fff;color:#000;letter-spacing:0}
*{box-shadow:none!important;border-radius:0!important}
.scroller{border:0;overflow:visible;background:#fff}
table.grid{min-width:0;font-size:10px}
table.grid th,table.grid td{border:1px solid #666;background:#fff!important;color:#000}
tr.band td{background:#fff!important}
/* color 에도 !important 가 있어야 한다. .kind.k0 처럼 클래스 둘짜리 규칙이
여기보다 굵어서, 안 붙이면 구분 알약만 파스텔 글자색으로 인쇄된다 */
.kind,.badge,.alias{background:#fff!important;border:1px solid #666;color:#000!important}
.chip{border:1px solid #666;color:#000;background:#fff!important}
.chip.am::after{content:'(오전)'} .chip.pm::after{content:'(오후)'}
}