/* CLKCRM 목업 공용 스타일 — 26.08.30 토큰 체계 (사용자 승인)
   글자 7단(본문 14px) · 굵기 3단 · 여백 7단 · 반지름 3단 · 행간 4단 · 자간 3단.
   ★ 화면 파일에 색·크기 값을 직접 쓰지 않는다 — 화면지침 5장.
   ★ 큰 화면 넷(키오스크 · 인포 입장수 · 안내모니터 · 관리 화면기기)은
     시청 거리가 달라 이 계단 밖이다.
   원본은 백업/원본_스타일_260830.css · 만드는 법은 tools/token-convert.py → tools/style-build.py */

:root{
  /* ── 브랜드 ──
     ★ **화면은 한 가지 색으로 간다**(26.09.10 사용자 지시 「색깔 구성이 두 가지라 헷갈린다」) —
       현장 남색·골드와 본사 차콜·실버를 갈라 두었더니 화면마다 색이 바뀌어 어수선했다.
       업무 화면은 전부 **차콜 + 실버**이고, CLK 레드는 「지금 여기 · 1위 · 오늘」 전용 선이다.
     ★ 현장 브랜드 원본은 아래에 남긴다 — 고객이 보는 자리(사업지 BI)에서 되살릴 때 쓴다. */
  --navy:#1b1d21; --navy-dk:#0f1114; --gold:#cfd6e2; --red:#ae0e16;
  --ink-on-line:#8e9bb0;
  --navy-field:#001b3f; --navy-field-dk:#0a2650; --gold-field:#b7a06a;

  /* ── 면 6 ── */
  --bg:#eef1f6;    /* 바탕 */
  --card:#fff;     /* 카드 */
  --sink:#f6f8fb;  /* 눌러앉은 면 — 입력칸 · 발자취 · 마우스 올린 곳 */
  --pick:#e7eef8;  /* 고른 줄 */
  --line:#e4e9f0;  /* 카드 테두리 */
  --line2:#cfd8e4; /* 강조 테두리 — 고른 것 · 입력칸 */
  --hair:#f0f3f8;  /* 안쪽 실선 */

  /* ── 글자색 4 ── */
  --ink:#141c26;    /* 값 — 흰 바탕 14.9:1 */
  --ink2:#4d5766;   /* 보조 — 7.4:1 */
  --ink3:#636d7a;   /* 라벨 — 5.25:1 */
  --ink-on:#8e9bb0; /* 어두운 띠 위 — 차콜 위 6.0:1 */

  /* ── 뜻 색 — CLKGB `theme.css` 와 같은 값이다 (26.09.10 사용자 확정 「CLKGB 를 따른다」).
     두 서비스가 같은 상태를 같은 색으로 보인다. 글자색과 배경색이 짝이다 — 표에서 띄려면 면이 있어야 한다.
     ★ 옛 규칙 「좋은 것에는 색을 쓰지 않는다」를 버렸다 — 상태가 글자로만 갈려 표가 흑백에 가까웠다. */
  --done:#1f7a4d; --done-bg:#e3f5ea;   /* 끝난 것 · 근무 · 작성완료 */
  --warn:#b26b18; --warn-bg:#fef2e0;   /* 손이 가야 하는 것 · 대기 · 휴무 */
  --err:#c0392b;  --err-bg:#fdecec; --err-line:#f2caca;  /* 어긋난 것 · 취소 · 퇴사 */
  --calm:#5a6472; --calm-bg:#eef1f6;   /* 지난 것 · 갈래 · 잠긴 것 */
  --revisit:#a2386d; --revisit-bg:#f7ecf2;  /* 다시 온 사람 — CLKGB 와 같다 */
  --warn-ink:#8a5313;  /* 주의 배지 글자 전용 — `--warn` 을 면 위에 얹으면 4.19:1 로 모자란다(실측) */
  --warn-line:#e2b4ac; /* 손이 가야 하는 것 — 옅은 테두리 */
  --gold-bg:#fdfaf4;   /* 짚어 주는 상자 — 면 */
  --gold-line:#e0cdb4; /* 짚어 주는 상자 — 테두리 */

  /* ── 관심도 램프 4단 (S·A·B·C) — CLKGB 와 같은 값. 골드에서 명도만 내려간다 ── */
  --lv-s:#a5883c; --lv-a:#b7a06a; --lv-b:#c9bd9c; --lv-c:#dcd6c8;

  /* ── 집계 존 (26.09.10 사용자 확정 「넷을 차콜로」) — 골드는 현장 브랜드색이라 여기서 안 쓴다.
     쓰는 화면 다섯 — 대시보드 · 현장 현황 · 지난 기록 · 보고 · 본사. 값은 CLKGB 본사 존과 같다. ── */
  --hq:#1b1d21; --hq-dk:#0f1114; --hq-line:#8e9bb0; --hq-tint:#cfd6e2;
  /* 본사 그래프 램프 — 차콜을 흰색과 섞은 명도 단계다. G1 은 `--hq`, G5 는 `--hq-tint` */
  --hq-g2:#4a4f57; --hq-g3:#7b828d; --hq-g4:#aab1bb;

  /* ── 글자 7단 (짝수) ── */
  --fs1:10px;  /* 배지 · 꼬리표 — 굵기 600 이상 · 8자 이하 · 문장 금지 */
  --fs2:12px;  /* 라벨 · 표 머리 · 주석 — 문장은 여기부터 */
  --fs3:14px;  /* ★ 본문 · 값 · 입력 · 단추 — 기준. 여기서 위아래로 뻗는다 */
  --fs4:16px;  /* 구역 제목 */
  --fs5:18px;  /* 요약 값 */
  --fs6:24px;  /* 화면 제목 */
  --fs7:32px;  /* 대시보드 큰 숫자 — 원장에는 안 쓴다 */

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

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

  /* ── 반지름 3단 ── */
  --r1:4px;    /* 배지 · 단추 · 입력 */
  --r2:10px;   /* 카드 */
  --r3:999px;  /* 알약 · 점 */

  /* ── 그림자 2단 ── */
  --lift:0 8px 26px rgba(20,28,38,.14);
  --ring:0 0 0 3px rgba(0,27,63,.22);

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

  /* ── 어두운 화면(로그인 · 상담대기 키오스크) ── */
  --dk-bg:#0a1c33; --dk-card:#0b2547; --dk-line:#2b4368; --dk-ink:#a8b4c6;
  --dk-warn-line:#7a5a22; --dk-warn-bg:#2a2113;
  /* 로그인 첫 화면(26.10.29) — 한 장짜리 흰 판 그림자 */
  --entry-shadow:0 24px 60px rgba(39,58,92,.12),0 2px 6px rgba(39,58,92,.06);

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

  /* ── 문자 미리보기 — **손님 폰을 그린 그림**이다 (26.09.08) ──
     우리 화면 색이 아니라 안드로이드 문자앱 기본값이라 위 계단과 따로 둔다.
     CLKGB 가 26.09.04~06 에 실제 폰 캡처를 보고 맞춘 값을 그대로 옮겼다. */
  --ph-line:#e6e8ec;   --ph-head:#f7f8fa;  --ph-head-ink:#1e2430;
  --ph-bubble:#ededed; --ph-ink:#111111;   --ph-dim:#7b8698;
  --ph-meta:#8b93a1;   --ph-ava:#e9ecef;   --ph-ava-ink:#adb5bd; --ph-sub:#6b7280;
}
/* ★ 폰 계단 — 손님과 상담사가 폰으로 여는 네 장(body.phone)만 한 칸씩 올린다(26.09.27 사용자 · #26)
   본문 16 은 아이폰이 입력칸을 누를 때 저절로 확대하지 않는 가장 작은 값이다 */
@media (max-width:700px){body.phone{--fs1:12px;--fs2:14px;--fs3:16px;--fs4:20px;--fs5:24px;--fs6:28px;--fs7:32px}}

*{box-sizing:border-box}
/* <b> 의 기본값은 bolder 다 — 700 안에 들어가면 900 이 된다. 못박는다 */
b,strong{font-weight:var(--w3)}
/* 폼 요소는 서체를 안 물려받는다 — 못박지 않으면 13.3px 로 떨어진다 */
button,input,select,textarea{font-family:inherit}

.phase{color:var(--gold);font-size:var(--fs3);font-weight:var(--w3)}
.lst .srch .x{position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink3);font-size:var(--fs3);font-weight:var(--w3);cursor:pointer;line-height:var(--lh1)}
.lst .srch .x:hover{background:var(--hair)}
.row .l2 .tx{overflow:hidden;text-overflow:ellipsis}
.bg.f{color:var(--card)}
.bg.warn{background:var(--warn-bg);color:var(--warn-ink);border:0}
.bg.o{background:var(--card);border:1px solid currentColor}
.bg.o.tm{color:var(--calm)} .bg.o.est{color:var(--ink2)}
.none{font-size:var(--fs3);color:var(--ink3);padding:2px 0 0;line-height:var(--lh3)}
.tr .ch i{width:6px;height:6px;border-radius:50%;flex:none}
.c-svy{background:var(--calm)} .c-tm{background:var(--calm)}

/* ── 설계 메모 ── */
/* `.agcard` 는 `.note` 와 생김새가 같되 **설계 메모가 아니다** — 손님이 읽는 동의 카드다.
   `note` 로 두면 문체검사가 목업 설명으로 알고 그 줄을 안 본다(26.09.06 감사 ②). */
.note,.agcard{margin-top:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4) var(--s4)}
.note h3{margin:0 0 var(--s2);font-size:var(--fs3)}
.note h4{margin:var(--s4) 0 var(--s1);font-size:var(--fs3);color:var(--navy)}
.note ul{margin:0;padding-left:var(--s4)}
.note li{margin:var(--s1) 0;font-size:var(--fs3)}
.note table{border-collapse:collapse;width:100%;font-size:var(--fs3);margin-top:var(--s1)}
.note th,.note td{border:1px solid var(--line);padding:var(--s1) var(--s2);text-align:left;vertical-align:top}
.note th{background:var(--sink);font-weight:var(--w3)}
.q{background:var(--sink);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s3);margin-top:var(--s3)}
.q b{color:var(--warn)}
.chk{list-style:none;margin:0;padding:0}
.chk li{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) 2px;border-bottom:1px solid var(--hair);font-size:var(--fs3)}
.chk li .mk{width:15px;height:15px;border:1.5px solid var(--line2);border-radius:var(--r1);flex:none;
  display:grid;place-items:center;font-size:var(--fs2);color:var(--card)}
.chk li.ok .mk{background:var(--calm);border-color:var(--calm)}
.chk li.no .mk{border-color:var(--warn-line)}
.chk li.no .nm{color:var(--warn);font-weight:var(--w3)}
.chk li .sub{margin-left:auto;font-size:var(--fs2);color:var(--ink3)}
.bg.win{background:var(--calm);color:var(--card)}
/* ── 뜻 배지 — 연한 면 + 진한 글자 (26.09.10 · CLKGB 방식).
   면을 진하게 채우고 흰 글자를 얹는 방식은 버렸다 — 주의(주황)가 4.19:1 로 모자랐다.
   실측 대비 — 완료 4.69 · 재방 5.49 · 주의 5.71. */
.bg.ct{background:var(--done-bg);color:var(--done);border:0}
.bg.rev{background:var(--revisit-bg);color:var(--revisit);border:0}
.bg.err{background:var(--err-bg);color:var(--err);border:0}
.bg.o.walk{color:var(--calm)} .bg.o.kio{color:var(--ink2)}
.c-vis{background:var(--calm)} .c-kio{background:var(--calm)}
.c-win{background:var(--calm)} .c-doc{background:var(--calm)}
.warnline{color:var(--warn);font-weight:var(--w3)}
.row.on .warnline,.pk li.on .warnline{color:var(--ink)}
.rec.wide{grid-template-columns:minmax(0,540px) minmax(0,180px)}

.bg.gap{visibility:hidden}
/* ── 관심도 등급 배지 — 램프 4단 (26.09.10 · CLKGB 와 같은 값).
   골드에서 명도만 내려간다. 넷 다 진한 글자다 — 흰 글자는 S 에서 3.39:1 로 모자란다.
   실측 대비 — S 5.06 · A 6.74 · B 9.19 · C 11.84 */
.bg.lv{border:0;color:var(--ink)}
.bg.lv.s{background:var(--lv-s)}
.bg.lv.a{background:var(--lv-a)}
.bg.lv.b{background:var(--lv-b)}
.bg.lv.c{background:var(--lv-c)}

/* ── 한 장짜리 화면(표 중심) ── */
.one-col{display:block}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs3)}
.tbl th{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3);text-align:left;
  padding:0 var(--s2) var(--s2);border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:var(--s2) var(--s2);border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:hover td{background:var(--sink)}
/* 고른 줄 — 표에서 하나를 골라 오른쪽에 펼 때(자동문자 · 1:1 문자) */
.tbl tr.on td{background:var(--pick)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .tm{font-variant-numeric:tabular-nums;font-weight:var(--w3);white-space:nowrap}
.tbl .off{color:var(--ink3)}
.tbl .nm{font-weight:var(--w3)}
.headline{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) var(--s4) var(--s3)}
.headline h2{margin:0;font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.4px}
.headline .sp{flex:1}
.datenav{display:flex;align-items:center;gap:var(--s1)}
.datenav .d{font-size:var(--fs3);font-weight:var(--w3);font-variant-numeric:tabular-nums}
.stat{display:flex;gap:var(--s5);padding:0 var(--s4) var(--s3);border-bottom:1px solid var(--hair)}
.stat .it{display:flex;align-items:baseline;gap:var(--s2)}
.stat .k{font-size:var(--fs2);color:var(--ink3)}
.stat .v{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.4px}
.stat .v.w{color:var(--warn)}
.bar{display:flex;align-items:center;gap:var(--s1);padding:var(--s3) var(--s4) var(--s2)}
.bar .sp{flex:1}
.tblwrap{padding:0 var(--s4) var(--s3);max-height:600px;overflow:auto}
/* 쪽을 나누는 표는 쪽 높이만큼 늘어난다 — 쪽 단추와 안쪽 스크롤을 함께 두지 않는다(26.10.25 사용자) */
.tblwrap.paged{max-height:none}
/* 한 화면에 표가 둘 이상이면 표마다 세로 휠이 생긴다 — 그 화면은 페이지 휠 하나로 둔다 */
.tblwrap.free{max-height:none;overflow:visible}
/* 열 폭을 박은 칸에서 넘치는 값을 자른다 — 전문은 펼침줄에서 본다(화면지침 8.2) */
.tbl .cut{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 열 폭을 <col> 이나 nth-child 로 박으려면 이것이 있어야 먹는다(화면지침 8.2) */
.tbl.fx{table-layout:fixed}
.tbl.fx th,.tbl.fx td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl.fx tr.grp td{white-space:normal;overflow:visible}
/* 계정 관리 · 현장 설정 — 열 폭을 박는다(화면지침 8.2).
   26.09.09 에 화면에서 잰 값이다. 안 박은 열 하나가 남는 자리를 다 갖는다 — 남는 자리가 0 이라
   브라우저가 비례 배분할 것이 없다. 폭보다 긴 값은 말줄임으로 자르고 전문은 펼침줄에서 본다. */
.tbl.dts,.tbl.cfglist,.tbl.cfgops,.tbl.cfgnav,.tbl.lgs{table-layout:fixed}
.tbl.dts th,.tbl.dts td,.tbl.cfglist th,.tbl.cfglist td,.tbl.cfgops th,.tbl.cfgops td,
  .tbl.cfgnav th,.tbl.cfgnav td,.tbl.lgs th,.tbl.lgs td{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl.dts tr.grp td,.tbl.cfglist tr.grp td,.tbl.cfgops tr.grp td{white-space:normal;overflow:visible}
.tbl.dts th:nth-child(1),.tbl.dts td:nth-child(1){width:150px}
.tbl.dts th:nth-child(3),.tbl.dts td:nth-child(3){width:200px}
/* 현장 설정 — 왼쪽 세로 탭(승인 B안, 26.09.09). 220px 은 승인 목업 그대로다 */
.two.cfg2{grid-template-columns:220px 1fr;gap:0 var(--s5)}
.tbl.cfgnav th:nth-child(1),.tbl.cfgnav td:nth-child(1){width:160px}
.tbl.cfgnav th:nth-child(2),.tbl.cfgnav td:nth-child(2){width:60px}
.tbl.cfglist th:nth-child(1),.tbl.cfglist td:nth-child(1){width:170px}
.tbl.cfglist th:nth-child(2),.tbl.cfglist td:nth-child(2){width:90px}
.tbl.cfglist th:nth-child(4),.tbl.cfglist td:nth-child(4){width:110px}
.tbl.cfgops th:nth-child(1),.tbl.cfgops td:nth-child(1){width:190px}
.tbl.cfgops th:nth-child(3),.tbl.cfgops td:nth-child(3){width:110px}
.tbl.lgs th:nth-child(1),.tbl.lgs td:nth-child(1){width:145px}
.tbl.lgs th:nth-child(2),.tbl.lgs td:nth-child(2){width:56px}
.tbl.lgs th:nth-child(4),.tbl.lgs td:nth-child(4){width:95px}
.tbl tr.grp{cursor:pointer}
.tbl tr.grp td{background:var(--sink);padding:var(--s2) var(--s2);border-bottom:1px solid var(--hair);
  font-size:var(--fs3);font-weight:var(--w3);color:var(--ink);letter-spacing:-.2px}
.tbl tr.grp td::before{content:'▸';display:inline-block;width:14px;color:var(--ink3);font-size:var(--fs2)}
.tbl tr.grp.open td::before{content:'▾'}
.tbl tr.grp .gname{display:inline-block;width:78px}
.tbl tr.grp .cnt2{font-weight:var(--w2);font-size:var(--fs2);color:var(--ink2)}
.tbl tr.grp .cnt2 .m{display:inline-block;width:86px;font-variant-numeric:tabular-nums}
.tbl tr.grp .cnt2 .m:last-child{width:auto}
.tbl tr.grp .cnt2 b{font-weight:var(--w3);color:var(--ink)}
.tbl tr.grp .cnt2 .w{color:var(--warn);font-weight:var(--w3)}
.tbl tr.grp .cnt{font-weight:var(--w2);color:var(--ink3);margin-left:var(--s2)}
.tbl tr.grp:hover td{background:var(--sink)}
.phone{width:360px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  box-shadow:0 6px 26px rgba(20,28,38,.10)}
.ph-hd{background:var(--navy);color:var(--card);padding:var(--s3) var(--s4) var(--s2)}
.ph-hd .t{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.3px}
.ph-hd .s{font-size:var(--fs2);color:var(--ink-on);margin-top:1px}
.ph-body{padding:var(--s3) var(--s4) 0;max-height:576px;overflow:auto}
.fld{margin-bottom:var(--s3)}
.fld .ql{font-size:var(--fs3);font-weight:var(--w3);margin-bottom:var(--s2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1)}
.fld .ql .req{color:var(--ink3);font-size:var(--fs3);line-height:var(--lh1)}
.fld .ql .opt{font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3);margin-left:auto;
  border:0;background:none;padding:0}  /* 아래 단추용 .opt 테두리가 꼬리표에 덮이지 않게 */
.fld .opts input[type=date],.fld .opts input[type=time]{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3);font-family:inherit;font-size:var(--fs3);background:var(--card)}
.fld input[type=text],.fld input[type=tel]{width:100%;border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3) var(--s3);font-size:var(--fs3);font-family:inherit;background:var(--card)}
.fld input:focus{outline:none;background:var(--card);border-color:var(--navy)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opt{border:1px solid var(--line);background:var(--card);border-radius:var(--r2);padding:var(--s2) var(--s3);
  font-size:var(--fs3);color:var(--ink2);cursor:pointer;min-height:42px;display:flex;align-items:center}
.opt:hover{background:var(--sink)}
.opt.on{background:var(--pick);border-color:var(--navy);color:var(--ink);font-weight:var(--w3);
  box-shadow:inset 0 0 0 1px var(--gold)}
.opt.sm{padding:var(--s2) var(--s3);font-size:var(--fs3);min-height:38px}
.agree{border-top:1px solid var(--hair);padding:var(--s3) 0 0;margin-top:var(--s1)}
.agree label{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs3);color:var(--ink2);cursor:pointer}
.agree .box{width:19px;height:19px;border:1.5px solid var(--line2);border-radius:var(--r1);flex:none;
  display:grid;place-items:center;font-size:var(--fs2);color:var(--card)}
.agree .box.on{background:var(--calm);border-color:var(--calm)}
.agree .must{color:var(--err);font-weight:var(--w3)}
.agree .optl{color:var(--ink3);font-weight:var(--w1)}
.agree a{color:var(--ink2)}
/* 설문 동의 아래 수집 항목 · 이용 목적 · 보유 기간 표(26.10.17) */
.agree table{width:100%;table-layout:fixed;border-collapse:collapse;margin:var(--s1) 0 var(--s3);font-size:var(--fs2);color:var(--ink2)}
.agree th,.agree td{border:1px solid var(--line);padding:var(--s1) var(--s2);text-align:left;vertical-align:top;line-height:var(--lh3)}
/* 설문 동의 세 장(개인정보동의지침) — 장마다 머리, 이름표와 내용 두 칸 표, 고르기 단추. 목적과 기간은 굵게(지침 4장) */
.agree.c3 .c3card{padding:var(--s2) 0;border-bottom:1px solid var(--hair)}
.agree.c3 .c3t{font-size:var(--fs3);color:var(--ink);font-weight:var(--w2);margin-bottom:var(--s1)}
.agree.c3 th:first-child{width:44px}
.agree.c3 td.b{font-weight:var(--w3);color:var(--ink)}
.agree.c3 .locked .opts{opacity:.45;pointer-events:none}
/* TM 전화 동의 칸(개인정보동의지침 4장, 목업 mockups/tm-consent.html) — 대본 한 줄마다 때, 말, 손님 답 단추 */
.tmag{border:1px solid var(--line);border-radius:var(--r2);background:var(--card);padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
.tmag h3{margin:0 0 var(--s2);font-size:var(--fs4);display:flex;align-items:baseline;gap:var(--s2)}
.tmag .sp{flex:1}
.tmag .st{font-size:var(--fs2);font-weight:var(--w2);padding:var(--s1) var(--s2);border-radius:var(--r1)}
.tmag .st.wait{background:var(--warn-bg);color:var(--warn-ink)}
.tmag .st.done{background:var(--done-bg);color:var(--done)}
.tmag .sc{display:grid;grid-template-columns:64px minmax(0,1fr) 196px;gap:var(--s2) var(--s3);align-items:start;
  padding:var(--s2) 0;border-top:1px solid var(--hair);font-size:var(--fs3)}
.tmag .sc .w{color:var(--ink3);font-size:var(--fs2);font-weight:var(--w2)}
.tmag .sc .m{color:var(--ink);line-height:var(--lh3)}
.tmag .sc .opts{justify-content:flex-end}
.tmag .sc.locked .opts{opacity:.45;pointer-events:none}
.tmag .sc .lk{grid-column:2 / span 2;margin:0;font-size:var(--fs2);color:var(--ink3)}
.tmag .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.tmag .meta .opts input{width:80px}
.tmag .foot2{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.tmag .foot2 .hint{font-size:var(--fs2);color:var(--ink2)}
.tmag .sum2{font-size:var(--fs3);color:var(--ink);line-height:var(--lh3)}
.agree th{background:var(--sink);font-weight:var(--w2)}
.agree th:first-child{width:30%}
.agree th:last-child{width:28%}
.ph-foot{padding:var(--s2) var(--s4) var(--s3);border-top:1px solid var(--hair);background:var(--card)}
.bigbtn{width:100%;background:var(--navy);color:var(--card);border:0;border-radius:var(--r2);
  padding:var(--s3);font-size:var(--fs3);font-weight:var(--w3);font-family:inherit;cursor:pointer}
.ph-note{font-size:var(--fs2);color:var(--ink3);text-align:center;margin-top:var(--s2)}
.offline{background:var(--sink);border:1px solid var(--line);line-height:var(--lh3);
  border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:var(--fs3);color:var(--warn);margin:0 0 var(--s3)}
.offline i{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--warn);margin-right:var(--s2);vertical-align:middle}
.who{background:var(--sink);border-radius:var(--r2);line-height:var(--lh3);
  padding:var(--s2) var(--s3);font-size:var(--fs3);color:var(--ink2);margin-bottom:var(--s3)}
.who b{color:var(--ink)}

/* ── 설문 : 폰·태블릿 공용 (기기 폭에 따라 스스로 바뀐다) ── */
.surface{container-type:inline-size;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden;box-shadow:0 6px 26px rgba(20,28,38,.10);display:flex;flex-direction:column}
.surface .ph-body{padding:var(--s4) var(--s4) var(--s1)}
.fields{display:grid;grid-template-columns:1fr;gap:0 var(--s5)}
.fields .wide{grid-column:1/-1}
@container (min-width:660px){
  .surface .ph-hd{padding:var(--s4) var(--s5) var(--s4)}
  .surface .ph-hd .t{font-size:var(--fs5)}
  .surface .ph-hd .s{font-size:var(--fs3)}
  .surface .ph-body{padding:var(--s4) var(--s5) var(--s1)}
  .fields{grid-template-columns:1fr 1fr}
  .fld .ql{font-size:var(--fs3)}
  .opt{font-size:var(--fs3);min-height:46px;padding:var(--s3) var(--s4)}
  .opt.sm{font-size:var(--fs3);min-height:42px;padding:var(--s2) var(--s3)}
  .fld input[type=text],.fld input[type=tel]{font-size:var(--fs5);padding:var(--s3) var(--s3)}
  .surface .ph-foot{padding:var(--s3) var(--s5) var(--s4)}
  .bigbtn{padding:var(--s4);font-size:var(--fs5)}
}
@container (min-width:980px){
  .fields{grid-template-columns:1fr 1fr 1fr}
}
.devicebar{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s2)}
/* 상담 한 줄 — 고객 원장 발자취 위 (26.09.13). 줄 셋이 세로로 쌓인다 */
.noteform{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s3)}
.noteform input[type=text]{width:100%;box-sizing:border-box}
.noteform .btn{align-self:flex-start}
.noteform .hint{margin:0}
.devicebar .n{font-size:var(--fs3);font-weight:var(--w3)}
/* 어두운 무대 위에 놓이면 글자를 밝게 — 안 그러면 1:1 이 된다 */
.authstage .devicebar,.authstage .devicebar .n,.authstage .devicebar .px{color:var(--dk-ink)}
.devicebar .px{font-size:var(--fs2);color:var(--ink2);font-variant-numeric:tabular-nums}
.devices{display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap}
.sparkx{display:flex;gap:var(--s1);padding:var(--s1) var(--s4) 0;font-size:var(--fs2);color:var(--ink3)}
.sparkx span{flex:1;text-align:center}
/* ── 짚어주는 줄 ── */
.flags{padding:var(--s2) var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.flag{position:relative;padding-right:var(--s7);font-size:var(--fs3);color:var(--ink2);line-height:var(--lh3)}
.flag .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--warn);margin-right:var(--s2);vertical-align:middle}
.flag b{color:var(--ink)}
.flag .go{position:absolute;right:0;top:0}

/* ── 고객이 보는 화면 : 사업지 BI + 조감도 ── */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.hero .cg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,12,30,.55) 0%,rgba(0,12,30,.30) 42%,rgba(0,15,36,.88) 100%)}
.hero .in2{position:relative;padding:var(--s4) var(--s4) var(--s4);color:var(--card)}
.hero .bi{display:block;margin-bottom:var(--s5)}
.hero .bi img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}
.hero .bi .wm{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:3px;color:var(--card)}
.hero .site{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.6px;line-height:var(--lh2)}
.hero .cap{font-size:var(--fs3);color:var(--line2);margin-top:var(--s1)}
.hero .ask{margin-top:var(--s3);font-size:var(--fs3);color:var(--pick);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r3);padding:var(--s1) var(--s3);display:inline-block}
@container (min-width:660px){
  .hero .in2{padding:var(--s5) var(--s5) var(--s5)}
  .hero .bi{margin-bottom:var(--s7)}
  .hero .bi img{height:32px}
  .hero .bi .wm{font-size:var(--fs5)}
  .hero .site{font-size:var(--fs7)}
  .hero .cap{font-size:var(--fs3)}
  .hero .ask{font-size:var(--fs3);padding:var(--s2) var(--s4)}
}

/* ── 소탭 ── */
.subtabs{display:flex;align-items:center;gap:2px;padding:0 var(--s4);border-bottom:1px solid var(--hair)}
.subtabs .sp{flex:1}
.subtabs .dt2{font-size:var(--fs3);color:var(--ink3);margin:0 var(--s2) 0 var(--s2);font-variant-numeric:tabular-nums}
.subtabs a{padding:var(--s2) var(--s3);font-size:var(--fs3);font-weight:var(--w2);color:var(--ink3);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs a.on{color:var(--ink);font-weight:var(--w3);border-bottom-color:var(--red)}
/* ── 가로 분포 막대 ── */
.dist{padding:var(--s3) var(--s4) var(--s3);display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 var(--s6)}
.dist .h{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3);margin:0 0 var(--s2)}
.dbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1);font-size:var(--fs3)}
.dbar .l{width:74px;flex:none;color:var(--ink2)}
.dbar.wl .l{width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* '1본부 1팀' 처럼 긴 이름(현장 현황 ③ 팀 단위) */
.dbar .t{flex:1;height:8px;background:var(--bg);border-radius:var(--r1);overflow:hidden}
.dbar .t i{display:block;height:100%;background:var(--navy);border-radius:var(--r1)}
.dbar .t i.g{background:var(--brand-gold, var(--gold))}
/* 관심도 막대 — 등급 배지와 같은 램프다(26.09.10). 다른 막대는 그 존의 브랜드색 하나로 둔다 */
.dbar .t i.hi{background:var(--red)}   /* 1위 하나만 — CLKGB `.rankrow:first-child` 와 같은 규칙 */
.dbar .t i.lv-s{background:var(--lv-s)}
.dbar .t i.lv-a{background:var(--lv-a)}
.dbar .t i.lv-b{background:var(--lv-b)}
.dbar .t i.lv-c{background:var(--lv-c)}
/* 숫자와 몫을 함께 담는다 — 52px 로 잠가 두었더니 「6,986 63.7%」가 여덟 줄 다 넘쳤다(26.09.10 실측) */
.dbar .n{min-width:52px;flex:none;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-weight:var(--w3)}
.dbar .n span{font-weight:var(--w1);color:var(--ink3);font-size:var(--fs2);margin-left:var(--s1)}

/* ── 대시보드 : CLKGB 관례 계승 ── */
.dwrap{padding:var(--s3) var(--s4) var(--s4)}
.drow{display:grid;gap:var(--s3);margin-bottom:var(--s3);align-items:start}
.drow.s2{grid-template-columns:1fr 1fr}
.drow.s3{grid-template-columns:repeat(3,1fr)}
.drow.s4{grid-template-columns:repeat(4,1fr)}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.dcard.today{border-left:4px solid var(--red);padding-left:var(--s3)}
.dcard .dt{font-size:var(--fs3);color:var(--ink2);font-weight:var(--w3);margin-bottom:var(--s2)}
.dcard .dt .dr{font-size:var(--fs2);color:var(--ink3);font-weight:var(--w2);font-variant-numeric:tabular-nums;margin-left:var(--s1)}
.dbig{font-size:var(--fs7);font-weight:var(--w3);letter-spacing:-1px;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:var(--s2)}
.dbig small{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink3);margin-left:2px}
.mix{display:flex;height:10px;border-radius:var(--r1);overflow:hidden;margin-top:var(--s3);background:var(--bg)}
.mix .p{background:var(--navy)} .mix .q{background:var(--gold)}
.mix .x{background:var(--ink-on)}
/* 여러 갈래를 한 줄에 쌓을 때 — 명도 다섯 단(CLKGB 본사 그래프 램프와 같다) */
.mix .g1{background:var(--hq)} .mix .g2{background:var(--hq-g2)} .mix .g3{background:var(--hq-g3)}
.mix .g4{background:var(--hq-g4)} .mix .g5{background:var(--hq-tint)}
.mix .lv-s{background:var(--lv-s)} .mix .lv-a{background:var(--lv-a)}
.mix .lv-b{background:var(--lv-b)} .mix .lv-c{background:var(--lv-c)}
.mlg{font-size:var(--fs2);color:var(--ink3);margin-top:var(--s2)} .mlg b{color:var(--ink)}
/* 날짜 고르개를 단추 뒤에 겹친다 — 글자는 단추가 우리 날짜 모양으로 적는다(26.09.10) */
.pill.datepick{position:relative}
.pill.datepick input{position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;padding:0;margin:0}

/* 업무추진계획 글 — `.mlg`(12px 주석)로 그렸더니 작았다(26.09.10 사용자).
   이 칸은 주석이 아니라 **읽으러 오는 본문**이라 14px 본문 계단에 올린다(화면지침 4-1) */
.plantxt{font-size:var(--fs3);color:var(--ink);line-height:1.5;margin-top:var(--s2)}
.plantxt b{font-weight:var(--w3)}
.cardsub{font-size:var(--fs3);font-weight:var(--w3);margin:2px 0 var(--s2);padding:0 var(--s4)}
.trendbox{padding:0 var(--s4) var(--s4)}
/* ── 추세 막대 (26.09.10 시인성 개선)
   ★ 막대가 `--line` 이라 배경과 거의 같아 어느 날이 높은지 안 보였다.
     한 단 진한 `--line2` 로 올리고, **어제는 차콜 · 오늘은 CLK 레드**로 셋을 갈랐다.
   ★ 눈금선 하나와 날짜 두 개를 붙인다 — 없으면 막대 높이가 무엇에 대한 몫인지 못 읽는다. */
.trendbar{position:relative;margin-top:var(--s3)}
.trendbar::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed var(--line2)}
.trendbar .cap{position:absolute;right:0;top:-9px;background:var(--card);padding:0 var(--s1);
  font-size:var(--fs1);font-weight:var(--w2);color:var(--ink3);font-variant-numeric:tabular-nums}
.trend{display:flex;align-items:flex-end;gap:2px;height:96px}
.trend .b{flex:1;background:var(--line2);border-radius:var(--r1) var(--r1) 0 0;min-height:2px}
.trend .b.hi{background:var(--navy)} .trend .b.low{background:var(--ink3)}
.trendfoot{display:flex;font-size:var(--fs1);font-weight:var(--w2);color:var(--ink3);margin-top:var(--s1)}
.trendfoot .sp{flex:1}
/* 오늘 막대만 CLK 레드다 — 「지금 여기」 전용이다(26.09.10 · CLKGB `.tbar.wknd` 와 같은 규칙) */
.trend .b.now{background:var(--red)}
/* 어제보다 늘었나 줄었나 — 늘어난 것이 좋은 자리에만 쓴다 */
.up{color:var(--done)} .down{color:var(--err)}

/* ── CLKGB 관례 : 기간 버튼 줄 ── */
.perbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4) var(--s3)}
.perbar .btn{white-space:nowrap}
.perbar .rg{font-size:var(--fs3);color:var(--ink3);margin-left:var(--s1);font-variant-numeric:tabular-nums}
.perbar .sp{flex:1}
.perbar .exp{background:var(--navy);border-color:var(--navy);color:var(--card)}
/* ── CLKGB 관례 : 요약 한 줄 카드 ── */
.sumbar{margin:0 var(--s4) var(--s3);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);display:flex;align-items:baseline;gap:0 var(--s5);flex-wrap:wrap}
.sumbar .it{display:flex;align-items:baseline;gap:var(--s2)}
.sumbar .k{font-size:var(--fs3);color:var(--ink3)}
.sumbar .v{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.sumbar .v small{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink3);margin-left:2px}
.sumbar .v.w{color:var(--warn)}
.sumbar .div{width:1px;height:18px;background:var(--line)}
.sumbar .sp{flex:1}   /* 채우개가 없어 오른쪽 것이 왼쪽에 붙어 있었다(26.09.10 실측) */
/* ── CLKGB 관례 : 도넛 ── */
.dogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3);padding:0 var(--s4) var(--s4)}
.docard{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.docard .t2{font-size:var(--fs3);font-weight:var(--w3);margin-bottom:var(--s2);display:flex;align-items:center;gap:var(--s2)}
.docard .t2 .mx{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);background:var(--hair);border-radius:var(--r1);padding:1px var(--s1)}
.dorow{display:flex;align-items:center;gap:var(--s4)}
.donut{width:118px;height:118px;border-radius:50%;flex:none;position:relative}
.donut::after{content:'';position:absolute;inset:30px;background:var(--card);border-radius:50%}
.donut .mid{position:absolute;inset:0;display:grid;place-items:center;z-index:1;text-align:center;line-height:var(--lh2)}
.donut .mid b{display:block;font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.5px}
.donut .mid span{font-size:var(--fs2);color:var(--ink3)}
.dolg{flex:1;min-width:0}
.dolg .r{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs3);padding:var(--s1) 0}
.dolg .r i{width:9px;height:9px;border-radius:var(--r1);flex:none}
.dolg .r .nm2{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dolg .r .vv{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink2);flex:none}
.dolg .r .vv b{color:var(--ink);font-weight:var(--w3)}
/* ── CLKGB 관례 : 세로 막대(복수응답) ── */
.vbar{display:flex;align-items:stretch;gap:var(--s2);height:170px;padding:var(--s2) 0 0}
.vbar .c{flex:1;display:flex;flex-direction:column}
.vbar .c .n2{font-size:var(--fs2);color:var(--ink2);text-align:center;line-height:var(--lh2);margin-bottom:var(--s1)}
.vbar .c .n2 b{display:block;font-size:var(--fs3);font-weight:var(--w3);color:var(--ink)}
/* 막대는 제 칸(bw) 안에서만 자란다 — 값 라벨이 높이를 갉아먹지 않게 */
.vbar .c .bw{flex:1;display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line)}
.vbar .c .bb{width:100%;background:var(--navy-dk);border-radius:var(--r1) var(--r1) 0 0;min-height:3px}
.vbar .c.top .bb{background:var(--red)}
.vbarx{display:flex;gap:var(--s2);padding:var(--s1) 0 0}
.vbarx span{flex:1;text-align:center;font-size:var(--fs2);color:var(--ink2);line-height:var(--lh2)}

/* 중개업소 목록 — 업소명은 사람 이름보다 길다 */
.lst.biz .row .nm{width:132px}

/* ── 명함 : 사진 자리 + 읽은 값 대조 ── */
.ncard{width:100%;aspect-ratio:91/55;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:0 2px 12px rgba(20,28,38,.12);padding:var(--s4) var(--s4);display:flex;flex-direction:column;position:relative}
.ncard .co{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.3px;color:var(--navy)}
.ncard .nm2{font-size:var(--fs5);font-weight:var(--w3);margin-top:auto;letter-spacing:-.5px}
.ncard .nm2 small{font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3);margin-left:var(--s2)}
.ncard .ln{font-size:var(--fs2);color:var(--ink2);margin-top:var(--s1);font-variant-numeric:tabular-nums}
.ncard .hl{position:absolute;border:1.5px solid var(--gold);background:rgba(198,160,74,.14);border-radius:var(--r1)}
.ncards{display:flex;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.ncards .th{width:78px;aspect-ratio:91/55;border:1px solid var(--line);border-radius:var(--r1);background:var(--sink);
  display:grid;place-items:center;font-size:var(--fs2);color:var(--ink3);cursor:pointer;text-align:center;line-height:var(--lh3)}
.ncards .th.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);color:var(--ink)}
.ncards .th.add{border-style:dashed}
.ocrv input{border:0;border-bottom:1px solid var(--line);padding:var(--s1) 2px;font-family:inherit;font-weight:var(--w3);
  font-size:var(--fs3);background:transparent;width:100%}
.ocrv input:focus{outline:none;border-bottom-color:var(--navy)}
.tbl tr.low td{background:var(--sink)}

/* ── 영업활동 일지 : 저절로 모인 줄 ── */
.log{list-style:none;margin:0;padding:0}
.log li{padding:var(--s2) 0;border-bottom:1px solid var(--hair)}
.log li.mine{background:var(--sink);margin:0 -6px;padding:var(--s2) var(--s1)}
.log .l1{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);font-size:var(--fs3)}
.log .tm2{width:42px;flex:none;font-size:var(--fs2);color:var(--ink3);font-variant-numeric:tabular-nums}
.log .ttl{font-weight:var(--w3);letter-spacing:-.2px}
.log .auto{margin-left:auto;font-size:var(--fs2);color:var(--ink3);flex:none}
.log .l2{font-size:var(--fs3);color:var(--ink2);margin-top:var(--s1);padding-left:var(--s7);line-height:var(--lh3)}
.log li.carry{background:var(--sink);margin:0 -6px;padding:var(--s2) var(--s1);border-left:3px solid var(--line2)}
.log .cy{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3);background:var(--bg);border-radius:var(--r1);padding:0 var(--s1);flex:none}
.tabs a.off{color:var(--ink3);cursor:default}
.tabs a.off:hover{color:var(--ink3)}

/* ── 폰 안 : 갤럭시 S25 = 360 × 780 (CSS) 기준 ── */
.phone .tbl{font-size:var(--fs2)}
.phone .tbl th{font-size:var(--fs2);padding:0 var(--s1) var(--s1);white-space:nowrap}
.phone .tbl td{padding:var(--s1) var(--s1)}
.phone .ncards{gap:var(--s2)}
.phone .ncards .th{width:70px;font-size:var(--fs2)}
.phone .log .l1{font-size:var(--fs3)}
.phone .log .l2{font-size:var(--fs2);padding-left:var(--s7)}
.phone .opt.sm{font-size:var(--fs2);padding:var(--s2) var(--s2);min-height:36px}
.phone .who,.phone .offline{font-size:var(--fs2);padding:var(--s2) var(--s2)}
.phone .fld input[type=text],.phone .fld input[type=tel]{padding:var(--s3) var(--s3)}
.log li.more{text-align:center;color:var(--ink2);font-size:var(--fs2);font-weight:var(--w3);
  padding:var(--s2) 0;cursor:pointer;border-bottom:0}
.log li.more:hover{background:var(--sink)}

/* 폰 — 대조에서 확인이 필요한 칸 (26.08.27) */
.fld.wn{background:var(--sink);border-left:3px solid var(--warn);border-radius:0 var(--r1) var(--r1) 0;
  margin:0 -7px var(--s3);padding:var(--s2) var(--s2) var(--s2)}

/* 주간 계획 격자 (26.08.27) */
.wk{width:100%;border-collapse:collapse;table-layout:fixed}
.wk th{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);padding:0 0 var(--s2);text-align:center;
  border-bottom:1px solid var(--hair)}
.wk th.sun,.wk th.sat{color:var(--ink3)}
.wk th .dd{font-size:var(--fs3);color:var(--ink);letter-spacing:-.2px}
.wk th.today .dd{color:var(--navy)}
.wk td{border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);
  vertical-align:top;padding:var(--s1);height:50px}
.wk td:last-child{border-right:0}
.wk .nmcol{width:82px;border-right:1px solid var(--line);padding:var(--s1) var(--s2) var(--s1) 2px;vertical-align:top}
.wk .nmcol .n2{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.3px;display:block}
.wk .nmcol .r2{font-size:var(--fs2);color:var(--ink3);display:block;margin-top:1px}
/* 조 이름 — 격자 칸 맨 위에 붙는 꼬리표. 그날 그 사람이 어느 조인가(26.09.10) */
.wk td .crew{display:block;font-size:var(--fs1);font-weight:var(--w3);color:var(--ink2);
  letter-spacing:-.2px;margin-bottom:2px}
.wk tr.grp2 td{background:var(--sink);height:auto;padding:var(--s1) var(--s2);font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2)}
.chip{display:block;border-left:3px solid var(--line2);background:var(--sink);border-radius:0 var(--r1) var(--r1) 0;
  padding:var(--s1) var(--s1);font-size:var(--fs2);line-height:var(--lh2);margin-bottom:2px;cursor:pointer;color:var(--ink)}
.chip b{display:block;font-weight:var(--w3);letter-spacing:-.2px}
.chip .pl{color:var(--ink2);font-size:var(--fs2)}
.chip.c1{border-left-color:var(--line2)}
.chip.c2{border-left-color:var(--line2)}
.chip.c3{border-left-color:var(--line2)}
.chip.c4{border-left-color:var(--line2)}
.chip.on{background:var(--pick);box-shadow:inset 0 0 0 1px var(--line2)}
.chip.off{background:transparent;border-left-color:transparent;color:var(--ink3);font-size:var(--fs2)}
.wk td.empty{background:var(--sink)}
.wkbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s2)}
.wkbar .d2{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.3px}
.wkbar .sp{flex:1}
.chip .rl{display:block;font-size:var(--fs2);color:var(--ink2);margin-top:1px}
.chip .rl.w{color:var(--warn);font-weight:var(--w3)}
.wk td.past{background:var(--card)}
.wk th.past{color:var(--ink3)}
.note.shut > *:not(.foldrow){display:none}
.leadnote{font-size:var(--fs2);color:var(--ink3);line-height:var(--lh3);margin:0}
.leadnote b{color:var(--ink2);font-weight:var(--w3)}
.leadnote a{color:var(--ink2)}

/* 사업지 정보 — 모든 TM에게 같은 내용이 동시에 (26.08.27) */
.telin input{font-size:var(--fs5);font-weight:var(--w3);width:172px}
.faq{list-style:none;margin:0;padding:0;max-height:318px;overflow:auto}
.faq li{padding:var(--s2) 0;border-bottom:1px solid var(--hair)}
.faq .q2{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.2px}
.faq .a2{font-size:var(--fs3);color:var(--ink2);margin-top:2px;line-height:var(--lh3)}
.faq .a2 b{color:var(--ink);font-weight:var(--w3)}
.faq li.new .q2::after{content:'새로 올림';font-size:var(--fs2);font-weight:var(--w3);color:var(--warn);
  margin-left:var(--s2);font-weight:var(--w3)}
.pin{background:var(--sink);border-radius:var(--r2);padding:var(--s2) var(--s3);line-height:var(--lh3);
  font-size:var(--fs3);margin-bottom:var(--s2)}
.pin b{font-weight:var(--w3)}
.valbar{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) 0 0}
.big textarea{min-height:172px}
.varea{border-top:1px solid var(--hair);margin-top:var(--s2);padding-top:var(--s2)}

/* 좁은 기둥 안 발자취 — 날짜를 줄이고 글에 폭을 준다 */
.trail.slim{padding:var(--s3) 0 0;background:transparent;border-top:1px solid var(--hair);
  margin-top:var(--s3);border-radius:0}
.trail.slim .dt{width:74px}
.trail.slim .ch{width:52px}
.trail.slim .tr{padding:var(--s1) 0;gap:var(--s2);align-items:flex-start}
.trail.slim .mm{white-space:normal;line-height:var(--lh3)}
.trail.slim .dt,.trail.slim .ch{padding-top:1px}
.valbar .hint{align-self:center;margin-right:2px}
.pk.val .grp3{background:var(--sink);font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);
  padding:var(--s1) var(--s2);border-left:0;position:sticky;top:0;cursor:default}
.pk.val .grp3:hover{background:var(--sink)}
.pk.val li .sub2{font-size:var(--fs2);color:var(--ink2);margin-left:var(--s1)}

/* A4 세로 한 장 — 출력하는 일지 (26.08.27) */
.paper{width:794px;min-height:1123px;background:var(--card);margin:0 auto;
  border:1px solid var(--line);border-radius:var(--r1);padding:var(--s7) var(--s7) var(--s6)}
@counter-style ganada{system:fixed;symbols:"가" "나" "다" "라" "마" "바" "사" "아" "자" "차"}
.paper{counter-reset:sec}
.paper .ttl2{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.5px;color:var(--card)}
.paper .hd2{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
  background:var(--navy);color:var(--card);padding:var(--s3) var(--s4);
  margin:-44px -46px var(--s4);border-bottom:0;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper .hd2 .sp{flex:1}
.paper .hd2 .meta{font-size:var(--fs2);color:var(--line2)}
.paper h5{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);margin:var(--s3) 0 var(--s1);
  border-bottom:1px solid var(--hair);padding-bottom:var(--s1);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
  counter-increment:sec}
.paper h5::before{content:counter(sec) ".";flex:none;
  color:var(--ink);font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.3px}
.paper h5:first-of-type{margin-top:0}
.paper h5 .sp{flex:1}
.paper h5 .hint{font-weight:var(--w1);color:var(--ink3)}
.numrow{display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.numrow .n3{display:flex;align-items:baseline;gap:var(--s2)}
.numrow .k3{font-size:var(--fs2);color:var(--ink3)}
.numrow .v3{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6)}
.paper .two{margin-top:var(--s3)}
.paper .two h5{margin-top:0}
.qbox{border-left:3px solid var(--warn);padding:var(--s1) 0 var(--s1) var(--s3);margin-bottom:var(--s1)}
.qbox .q3{font-size:var(--fs3);font-weight:var(--w3)}
.qbox .a3{font-size:var(--fs3);color:var(--ink2);margin-top:2px;line-height:var(--lh3)}
.wbox{border:1px solid var(--line);border-radius:var(--r1);padding:var(--s2) var(--s3);
  font-size:var(--fs3);line-height:var(--lh3);min-height:78px;white-space:pre-wrap}
/* 종이 위에서 그대로 고치는 칸 — 보이는 꼴은 .wbox 와 같고 적을 수만 있다 (26.09.14 TM 일지) */
textarea.wbox,input.wbox{width:100%;box-sizing:border-box;font:inherit;color:inherit;
  background:var(--card);display:block}
textarea.wbox{resize:vertical}
input.wbox{min-height:0}
/* 숫자 칸은 폭을 박는다 — 안 박으면 기본 폭으로 늘어 목업의 한 줄이 두 줄이 된다 */
input.v3{width:64px;font:inherit;font-size:var(--fs5);font-weight:var(--w3);
  border:1px solid var(--line);border-radius:var(--r1);padding:2px var(--s2);
  color:inherit;background:var(--card)}
.foot2{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--hair);
  font-size:var(--fs2);color:var(--ink3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.foot2 .sp{flex:1}
/* A4 세로 보고 — 종이 안에서는 안쪽 여백을 종이 여백에 맡긴다 (26.08.31) */
.paper .headline{padding-left:0;padding-right:0}
.paper .dist{padding:0}
.paper .sumbar{margin-left:0;margin-right:0}
.paper .dist{grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.paper .ncards{display:grid;grid-template-columns:repeat(3,1fr)}
.paper .blk,.paper .dist{break-inside:avoid}

/* ── 임원 보고(open/report.html) 구역 — 현황 카드 · 지명 순위 · 주간 추이 · 상담카드 문항 (26.10.21) ── */
.paper.rp *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper.rp .blk{padding-left:0;padding-right:0}
.paper.rp .blk.rpcard{break-inside:auto}
.paper.rp .drow .dcard{break-inside:avoid}
.paper.rp .sec{display:flex;align-items:baseline;gap:var(--s2)}
.dbig .rpm{font-size:var(--fs5);font-weight:var(--w3);color:var(--ink2)}
.rprow{margin-bottom:var(--s2)}
.rpl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-size:var(--fs3);margin-bottom:var(--s1)}
.rpl .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpl .nm small{margin-left:var(--s1);font-size:var(--fs2);color:var(--ink3)}
.rpl .vv{flex:none;font-weight:var(--w3);font-variant-numeric:tabular-nums}
.rptk{height:6px;background:var(--bg);border-radius:var(--r1);overflow:hidden}
.rptk i{display:block;height:100%;background:var(--navy);border-radius:var(--r1)}
.rptk i.hi{background:var(--red)}
.rpwk{display:flex;align-items:flex-end;gap:var(--s1);height:150px}
.rpwk .wc{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.rpwk .wc i{display:block;width:100%;max-width:24px;min-height:2px;background:var(--navy);border-radius:var(--r1) var(--r1) 0 0}
.rpwk .wc.now i{background:var(--red)}
.rpwk .wc em{font-style:normal;font-size:var(--fs2);font-weight:var(--w3);font-variant-numeric:tabular-nums;margin-bottom:var(--s1)}
.rpwk .wc.now em{color:var(--red)}
.rpwk .wc span{font-size:var(--fs1);font-weight:var(--w2);color:var(--ink3);margin-top:var(--s1);white-space:nowrap}
.rpseg{display:flex;gap:var(--s1)}
.rpseg button{font:inherit;font-size:var(--fs2);font-weight:var(--w2);color:var(--ink2);background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r3);padding:2px var(--s3);cursor:pointer}
.rpseg button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.rpgrade{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.rpgrade .k{font-size:var(--fs3);color:var(--ink3)}
.rpgrade .mix{flex:1;margin-top:0}
.rpgleg{display:flex;align-items:center;gap:var(--s1);font-size:var(--fs2);color:var(--ink3)}
.rpgleg b{color:var(--ink);margin-right:var(--s2)}
.rpgleg .sw,.rpleg .sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:var(--r1)}
.rpgrid{display:flex;gap:var(--s3);align-items:flex-start}
.rpcol{flex:1;min-width:0}
.rpq{break-inside:avoid;margin-bottom:var(--s3);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3)}
.rpqt{margin:0 0 var(--s2);font-size:var(--fs3);font-weight:var(--w3);display:flex;align-items:center;gap:var(--s2)}
.rpmulti{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);background:var(--hair);border-radius:var(--r1);padding:1px var(--s1)}
.rpq .dbar.rpw .l{width:112px;line-height:var(--lh3);word-break:keep-all}
.rpdo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.rpdn{position:relative;width:88px;height:88px;flex:none;border-radius:var(--r3)}
.rpdn::after{content:"";position:absolute;inset:24px;background:var(--card);border-radius:var(--r3)}
.rpdn b{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-size:var(--fs3);font-weight:var(--w3)}
.rpleg{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.rpleg .ro{display:grid;grid-template-columns:10px 1fr auto;gap:var(--s2);align-items:baseline;font-size:var(--fs3);word-break:keep-all}
.rpleg .ro .nv{font-size:var(--fs2);color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media print{
  /* 임원 보고는 작성지침 세로 판형 198×285 — 이름 붙은 페이지라 다른 화면의 A4 는 그대로다 */
  @page rp{size:198mm 285mm;margin:0}
  .paper.rp{padding:10mm 11mm;page:rp}
  .rpseg{display:none}
  /* 세로 3장 상한(CLAUDE.md 3장) — 종이에서만 문항 상자를 줄인다 */
  .rpq{padding:var(--s2) var(--s3);margin-bottom:var(--s2)}
}

@media print{
  /* 화면 규칙 body, .wrap 이 파일 뒤쪽에 있어 같은 무게면 그쪽이 덮는다 — 무게를 높인다(26.10.21) */
  html body{background:var(--card)}
  .hd,.tabs,.subtabs.shellsub,.wkbar,.note,.leadnote,.devicebar,.scrhd,.authstage,.skip{display:none !important}
  body .wrap{padding:0;max-width:none}
  .paper{width:auto;min-height:0;border:0;padding:0;margin:0}
  @page{size:A4 portrait;margin:13mm}
  .paper .hd2{margin:0 0 var(--s4)}
  .paper .btn{display:none !important}
  /* 카드로 짠 화면(일일업무보고)도 종이에서는 조작 자리를 걷는다 — 26.09.10 */
  .card .perbar,.card .btn,.card .opts{display:none !important}
  .paper .headline{padding-top:0;padding-bottom:var(--s2)}
}

/* 표 머리줄 — 진한 배경 + 흰 글씨 (26.08.27) */
.paper .tbl th{background:var(--navy);color:var(--card);font-weight:var(--w3);
  padding:var(--s1) var(--s2);border-bottom:0;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper .tbl th:first-child{border-radius:var(--r1) 0 0 var(--r1)}
.paper .tbl th:last-child{border-radius:0 var(--r1) var(--r1) 0}
.paper .tbl tr:first-child th:not(.ctr):not(.num){text-align:left}
.paper .tbl th.num{text-align:right}

.paper .tbl td{padding:var(--s1) var(--s2)}
.paper .wbox{min-height:70px}
.tbl .ctr{text-align:center;font-variant-numeric:tabular-nums}
.tbl th.ctr{text-align:center}
.tbl .ctr .pct{color:var(--ink3);font-weight:var(--w1);margin-left:var(--s1)}

/* ═══ 상담대기 키오스크 — 어두운 인터페이스 (26.08.27 확정)
   방명록 키오스크(현행 · 밝은 아이보리)와 멀리서도 구분되게 반대로 간다. ═══ */
/* 기기 틀 — 가로 태블릿 1280×800. 화면이 바뀌어도 높이가 안 변한다 (26.08.31) */
.kios{width:1280px;height:800px;margin-inline:auto}
.kmain2>.kbottom{margin-top:auto}
.kdark{width:100%;height:100%;font-size:17px;background:linear-gradient(165deg,#0a2650,#001229);
  color:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden}
.dots{display:flex;gap:var(--s2);align-items:center}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22);display:block}
.dots i.on{background:var(--gold);width:32px;border-radius:var(--r1)}
.dots i.done{background:rgba(183,160,106,.55)}
.dwait{font-size:17px;color:rgba(255,255,255,.62)}
.dwait b{color:#fff;font-family:Montserrat,sans-serif;font-size:22px;font-weight:700}
.dq{font-size:40px;font-weight:300;letter-spacing:-1px;margin:0 0 6px}
.dq b{font-weight:700}
.dsub{font-size:22px;color:rgba(255,255,255,.68);font-weight:300;margin:0 0 16px}
/* 흰 동의 카드 안에서는 흰 글자가 안 보인다 — 거부권 문구가 여기 있다(26.10.16) */
.agcard .dsub{color:var(--ink2)}
/* 상담대기 키오스크 동의 세 장(개인정보동의지침) — 표는 이름표와 내용 두 칸, 목적과 기간은 굵게(지침 4장). ③은 ②에 동의해야 열린다 */
.agcard.c3 th{width:64px;text-align:left}
.agcard.c3 td{text-align:left}
.agcard.c3 td.b{font-weight:var(--w3)}
.agcard.c3.locked .opts{opacity:.45;pointer-events:none}
.dfield{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);
  border-radius:16px;padding:16px 26px}
.dfield.on{border-color:var(--gold);background:rgba(183,160,106,.10)}
.kmain2 .dfield+.sp{min-height:24px;flex:none}   /* 입력칸과 키패드가 붙지 않게 (26.08.31) */
.dfield .l{font-size:17px;color:rgba(255,255,255,.55)}
.dfield .v{font-family:Montserrat,"Noto Sans KR",sans-serif;font-size:44px;font-weight:700;
  letter-spacing:1px;margin-top:2px;line-height:1.15}
.dfield .v.ph{color:rgba(255,255,255,.30);font-weight:400}
.dkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:520px}
.dkeys .k{height:84px;border-radius:14px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-family:Montserrat,sans-serif;
  font-size:28px;font-weight:600;cursor:pointer}
.dkeys .k.gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700}
.dbtn{font-family:inherit;font-size:28px;font-weight:700;border-radius:999px;
  padding:19px 46px;cursor:pointer;border:1.5px solid rgba(255,255,255,.28);
  background:transparent;color:rgba(255,255,255,.85)}
.dbtn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.dnum{font-family:Montserrat,sans-serif;font-size:170px;font-weight:700;line-height:1;
  letter-spacing:-6px}
.kcard{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);
  border-radius:20px;padding:26px 30px}
.dqr{width:240px;height:240px;background:#fff;border-radius:12px;display:grid;place-items:center;
  color:var(--navy);font-size:17px;font-weight:700;flex:none}

/* 답이 왼쪽에 쌓이는 방식 (26.08.27 확정 · 맥도날드 키오스크·병원 문진표 방식) */
.krow{display:flex;height:100%}
.kbasket{width:340px;flex:none;background:rgba(0,0,0,.22);
  border-right:1px solid rgba(255,255,255,.12);padding:30px 26px;display:flex;flex-direction:column}
.kbasket h4{font-size:17px;color:rgba(255,255,255,.55);font-weight:500;margin:0 0 14px;letter-spacing:.06em}
.kbasket .logo{max-width:170px;height:auto;filter:brightness(0) invert(1)}
.kbasket .sp{flex:1}
.bi2{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);position:relative}
.bi2 .l{font-size:17px;color:rgba(255,255,255,.5)}
.bi2 .v{font-size:22px;font-weight:700;margin-top:3px;line-height:1.35}
.bi2 .v.wait2{color:rgba(255,255,255,.28);font-weight:400}
.bi2.now{border-left:3px solid var(--gold);padding-left:12px;margin-left:-15px}
.bi2 .ed{position:absolute;right:0;top:16px;font-size:17px;color:var(--gold);cursor:pointer}
.bi2 .ok2{position:absolute;right:0;top:16px;font-size:17px;color:var(--gold)}
.kmain2{flex:1;padding:34px 44px 30px;display:flex;flex-direction:column;min-width:0}
.kmain2 .sp{flex:1}
.ktiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ktiles button{height:104px;font-size:22px;border-radius:16px;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.18);color:#fff;font-family:inherit;cursor:pointer}
.ktiles button.on{background:rgba(183,160,106,.18);border-color:var(--gold)}
.ktiles .t1{font-size:28px;font-weight:700;display:block}
.ktiles .t2{font-size:17px;color:rgba(255,255,255,.6);display:block;margin-top:3px}
.ktiles button.on .t2{color:rgba(255,255,255,.82)}
/* 번호표 화면 — 인라인 글자크기를 걷어내고 계단(17·22·28·40·44·170) 안으로 넣었다 */
.kmain2.mid{justify-content:center}
/* 연락처 화면 — 입력칸과 키패드를 본문 가운데로 (26.08.31 사용자) */
.kmain2.padstage{align-items:center}
.kmain2.padstage>.dq,.kmain2.padstage>.dsub,.kmain2.padstage>.dfield,.kmain2.padstage>.dkeys{width:504px}
.kmain2.padstage>.kbottom{align-self:stretch}

.kticket2{display:flex;gap:32px;align-items:start;width:100%;margin-top:96px}   /* 윗선을 왼쪽 「접수 내용」에 맞춘다 */
.kticket2 .numside{text-align:center;flex:none}
.kticket2 .numlab{font-size:40px;font-weight:300;letter-spacing:-1px;color:rgba(255,255,255,.6)}
.kticket2 .txtside{flex:1}
.kqrbox{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:start;margin-top:0}
.kqrbox .dqr{grid-row:1/3}
.kqrbox .t{grid-column:2}
.kqrbox .d{grid-column:2}

.kqrbox .t{font-size:22px;font-weight:700;margin-bottom:5px}
.kqrbox .d{font-size:17px;color:rgba(255,255,255,.78);line-height:1.6}
.kqrbox .d b{color:var(--gold)}
.kfree{margin:16px 0 0}
.kfree b{color:#fff}

/* ── 상담 호출 (26.08.27) ── */
.scrhd{margin:var(--s5) 0 var(--s2);font-size:var(--fs4);font-weight:var(--w3);color:var(--ink)}
.scrhd:first-child{margin-top:0}
.callhd{padding:var(--s3) var(--s3) var(--s2);display:flex;align-items:center;gap:var(--s2)}
.callhd .n{font-size:var(--fs3);color:var(--ink2)}
.callhd .n b{font-size:var(--fs5);font-weight:var(--w3);color:var(--ink);margin-left:var(--s1)}
.callhd .sp{flex:1}
.btn.big{padding:var(--s2) var(--s4);font-size:var(--fs5);font-weight:var(--w3);border-radius:var(--r2)}
.row.wq{padding-left:var(--s7);position:relative}
.row .wno{position:absolute;left:10px;top:9px;width:34px;text-align:right;
  font-size:var(--fs5);font-weight:var(--w3);color:var(--ink2);font-variant-numeric:tabular-nums;line-height:var(--lh3)}
.row.on .wno{color:var(--navy)}
.row .wno.off{font-weight:var(--w2);color:var(--ink3)}
.row.wq .nm{width:74px}
.row.wq .l1 b{font-weight:var(--w3);font-size:var(--fs3);color:var(--ink2)}
.bg.f.now{background:var(--navy)}
.seat0{padding:var(--s7) var(--s4) var(--s7);text-align:center}
.seat0 .big{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.5px}
.seat0 .nx{margin-top:var(--s2);font-size:var(--fs3);color:var(--ink2)}
.seat0 .nx b{font-weight:var(--w3);color:var(--ink)}
.seat0 .leadnote{margin-top:var(--s4)}

/* ═══ 안내 모니터 — 24인치 모니터 ~ 75인치 TV 한 벌 (26.08.27) ═══
   모든 치수를 화면 폭 기준(cqw)으로 잡는다. 상자가 커지면 전부 같은 비율로 커진다.
   1cqw = 화면 폭의 1%. 아래 값은 1920 기준 px ÷ 19.2 로 환산한 것이다. */
.mon{aspect-ratio:16/9;container-type:size;position:relative;overflow:hidden;
  border-radius:var(--r2);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--navy-dk),var(--ink));color:var(--card);
  font-family:"Noto Sans KR","Pretendard",sans-serif;
  display:flex;flex-direction:column;
  --gold:var(--gold); --fw:0%}
.mon .mhd{display:flex;align-items:center;gap:1.25cqw;padding:2.1cqw 3.1cqw 0;flex:none}
.mon .mhd .logo{width:14cqw;height:auto;filter:brightness(0) invert(1)}
.mon .mhd .sp{flex:1}
.mon .mhd .clock{font-size:2cqw;font-weight:var(--w2);color:rgba(255,255,255,.72)}

.mon .mbody{flex:1;display:flex;padding:.6cqw 3.1cqw 0;gap:2.7cqw;min-height:0}
.mon .now{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mon .now .lab{font-size:1.5cqw;color:var(--gold);letter-spacing:.22em;margin-bottom:.2cqw}
.mon .now .num{font-size:17.2cqw;font-weight:var(--w3);line-height:var(--lh1);letter-spacing:-.6cqw}
.mon .now .seat{font-size:3cqw;font-weight:var(--w3);margin-top:.8cqw}
/* 번호가 세 자리(100번 이상)면 자동으로 줄인다 — 실제 화면은 자릿수를 세어 d3 를 붙인다 */
.mon .now .num.d3{font-size:11.5cqw;letter-spacing:-.4cqw}
.mon.film .now .num.d3{font-size:8cqw}
.mon.film.wide .now .num.d3{font-size:6cqw}
.mon .now .seat b{color:var(--gold)}
.mon .next{width:31cqw;flex:none;border-left:1px solid rgba(255,255,255,.16);padding-left:2.5cqw;
  display:flex;flex-direction:column;justify-content:center}
.mon .next h4{font-size:1.5cqw;color:rgba(255,255,255,.55);font-weight:var(--w1);margin:0 0 1.1cqw;
  letter-spacing:.1em}
.mon .nx{display:flex;align-items:baseline;gap:1.25cqw;padding:1cqw 0;
  border-bottom:1px solid rgba(255,255,255,.10)}
.mon .nx .n{font-size:4cqw;font-weight:var(--w3);width:9.4cqw;flex:none}
.mon .nx .s{font-size:1.5cqw;color:rgba(255,255,255,.6)}
.mon .nx.soon .n,.mon .nx.soon .s{color:var(--gold)}

.mon .mfoot{flex:none;padding:1.2cqw 3.1cqw 1.9cqw;display:flex;align-items:center;gap:2cqw;
  border-top:1px solid rgba(255,255,255,.14);margin-top:.9cqw}
.mon .mfoot .big3{font-size:2cqw;font-weight:var(--w3)}
.mon .mfoot .sm3{font-size:1.5cqw;color:rgba(255,255,255,.66);white-space:nowrap}
.mon .mfoot .sp{flex:1}
.mon .qr3{width:6.9cqw;height:6.9cqw;background:var(--card);border-radius:.8cqw;display:grid;place-items:center;
  color:var(--navy);font-size:1.5cqw;font-weight:var(--w3);flex:none;text-align:center;line-height:var(--lh2)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.45}}
.mon .now.calling .num{animation:blip 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.mon .now.calling .num{animation:none}}

/* ── 영상·사진 자리 — 현장 설정으로 켠다 ── */
.mon.film{--fw:55%}
.mon.film.wide{--fw:66%}
.mon .film{width:var(--fw);flex:none;border-radius:1cqw;overflow:hidden;position:relative;
  background:var(--ink);align-self:stretch;margin-bottom:.6cqw}
.mon .film img{width:100%;height:100%;object-fit:cover;display:block}
.mon .film .tag{position:absolute;left:1.4cqw;bottom:1.4cqw;font-size:1.5cqw;font-weight:var(--w2);
  background:rgba(0,0,0,.5);border-radius:.5cqw;padding:.4cqw .9cqw;color:rgba(255,255,255,.9)}
.mon .film .dots{position:absolute;right:1.4cqw;bottom:1.7cqw;display:flex;gap:.6cqw}
.mon .film .dots i{width:.7cqw;height:.7cqw;border-radius:50%;background:rgba(255,255,255,.45)}
.mon .film .dots i.on{background:var(--card)}
/* 영상이 아직 없을 때 — **검은 네모로 두지 않는다.** 고장으로 보인다 (26.09.14) */
.mon .film .slot{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1cqw;text-align:center;padding:2cqw;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22);border-radius:1cqw}
.mon .film .slot .t{font-size:2cqw;font-weight:var(--w3);color:rgba(255,255,255,.82)}
.mon .film .slot .d{font-size:1.5cqw;color:rgba(255,255,255,.55);line-height:var(--lh2)}
.mon.film .side{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mon.film .now{flex:none}
.mon.film .now .num{font-size:12cqw}
.mon.film.wide .now .num{font-size:9cqw}
.mon.film .now .seat{font-size:3cqw}
.mon.film .next{width:auto;flex:none;border-left:0;padding-left:0;margin-top:1.4cqw;
  border-top:1px solid rgba(255,255,255,.16);padding-top:1cqw}
.mon.film .nx{padding:.7cqw 0}
.mon.film .nx .n{font-size:3cqw;width:6.6cqw}
.mon.film .nx .s{font-size:1.5cqw}
.mon.film.wide .next h4{display:none}

/* 목업 나열용 — 실제 화면에는 없다 */
.monwrap{margin-bottom:6px}
.monlab{font-size:13px;font-weight:700;color:var(--ink3);margin:22px 0 8px}
.monlab span{font-weight:400}

/* ── 화면·기기 관리 (26.08.27) ── */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;flex:none}
/* 설정 줄의 단추·안내는 줄어들지 않게 — 세그먼트가 넓어지면 눌려서 두 줄로 접힌다 (26.08.28) */
.setrow .btn,.setrow .hint,.setrow .v{flex:none;white-space:nowrap}
.seg button{border:0;background:var(--card);padding:var(--s1) var(--s3);font-size:var(--fs3);font-weight:var(--w2);
  min-width:88px;   /* 줄마다 둘째 단추가 같은 자리에서 시작해야 격자가 맞는다 (26.08.28) */
  color:var(--ink2);cursor:pointer;border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--sink)}
.seg button.on{background:var(--navy);color:var(--card)}
.seg button.on:hover{background:var(--navy)}
.setrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--hair)}
.setrow:last-child{border-bottom:0}
.setrow .k{width:96px;flex:none;font-size:var(--fs2);color:var(--ink3)}
.setrow .sp{flex:1}
.setrow .hint{font-size:var(--fs2);color:var(--ink3)}
.setrow .v{font-size:var(--fs3);font-weight:var(--w2)}
.body.set{grid-template-columns:1fr 480px}
.blk{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--hair)}
.clips{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.clip{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;cursor:pointer;position:relative;background:var(--card)}
.clip:hover{border-color:var(--line2)}
.clip.on{border-color:var(--navy);background:var(--pick)}
.clip .th{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--navy-dk)}
.clip .cn{padding:var(--s2) var(--s2) var(--s2)}
.clip .cn b{display:block;font-size:var(--fs3);font-weight:var(--w3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip .cn span{font-size:var(--fs2);color:var(--ink3)}
.clip .mk{position:absolute;right:7px;top:7px;width:21px;height:21px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;
  font-size:var(--fs2);font-weight:var(--w3);color:transparent;line-height:var(--lh1)}
.clip.on .mk{background:var(--navy);border-color:var(--navy);color:var(--card)}
.clip .no{position:absolute;left:7px;top:7px;width:21px;height:21px;border-radius:var(--r1);
  background:rgba(0,27,63,.72);color:var(--card);display:grid;place-items:center;font-size:var(--fs2);font-weight:var(--w3);line-height:var(--lh1)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--calm);
  margin-right:var(--s1);vertical-align:1px}
.dot.off{background:var(--warn)}

/* ── 상담 마침 팝업 (26.08.27) ── */
.popstage{background:var(--line2);border-radius:var(--r2);padding:var(--s7) var(--s4);display:grid;place-items:center}
.pop{background:var(--card);border-radius:var(--r2);width:470px;padding:var(--s5) var(--s5) var(--s4);
  box-shadow:0 18px 52px rgba(0,20,50,.3)}
.pop h3{margin:0 0 var(--s1);font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.5px}
.pop .sub{font-size:var(--fs3);color:var(--ink2)}
.pop .box{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:var(--s3) 0;margin:var(--s3) 0 var(--s3)}
.pop .box .r{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s1) 0}
.pop .box .k{width:82px;flex:none;font-size:var(--fs2);color:var(--ink3)}
.pop .box .v{font-size:var(--fs3);font-weight:var(--w2)}
.pop .warn1{font-size:var(--fs3);font-weight:var(--w2);color:var(--warn);margin:0 0 var(--s3)}
.pop .br{display:flex;align-items:center;gap:var(--s2)}
.pop .br .sp{flex:1}
.pop .br .cnt{font-size:var(--fs3);color:var(--ink2)}
.pop .br .cnt b{font-weight:var(--w3);color:var(--ink)}

/* ── 인포 입장 수 세기 (26.08.27) · PC·태블릿 겸용 · 숫자는 가린다 ── */
.pad{width:1280px;height:800px;border-radius:10px;border:1px solid var(--line);
  background:#fff;overflow:hidden;display:flex;flex-direction:column;position:relative}
.pad.tall{width:800px;height:1280px}
.pad .phd{display:flex;align-items:center;gap:14px;padding:15px 22px;flex:none;
  border-bottom:1px solid var(--hair)}
.pad .phd .t{font-size:24px;font-weight:800;letter-spacing:-.5px}
.pad .phd .sp{flex:1}
.pad .phd .nowc{font-size:18px;color:var(--ink3);font-variant-numeric:tabular-nums;
  transition:color .35s}
.pad .phd .nowc b{font-weight:800;color:var(--ink2);transition:color .35s}
/* 누른 순간 — 이 자리가 바뀌는 것이 보여야 그만 누른다 */
.pad .phd .nowc.up{color:var(--ink2)}
.pad .phd .nowc.up b{color:var(--brand-field, var(--navy-dk))}
.pad .phd .clock{font-size:24px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.pad .pbody{flex:1;display:flex;flex-direction:column;gap:16px;padding:20px 24px 22px;min-height:0}
/* 인원 단추 넷 — 누르면 팀도 함께 하나 올라간다 */
.hitgrid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:200px}
.hitgrid button{border:0;border-radius:14px;background:var(--brand-field, var(--navy-dk));color:#fff;
  cursor:pointer;font-size:88px;font-weight:800;letter-spacing:-3px;line-height:1;
  display:grid;place-content:center;position:relative;transition:background .08s}
.hitgrid button:hover{background:#052a5c}
.hitgrid button:active,.hitgrid button.on{background:#0d3f80}
.hitgrid button .s{display:block;font-size:26px;font-weight:600;opacity:.82;letter-spacing:0;margin-top:8px}
.hitgrid button .ok{position:absolute;right:24px;top:18px;font-size:44px;font-weight:800;
  letter-spacing:0;line-height:1;opacity:0;transition:opacity .08s}
.hitgrid button.on .ok{opacity:1}
.hits{display:flex;gap:12px;flex:none}
.hits button{flex:1;height:88px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:30px;font-weight:800;color:var(--ink);cursor:pointer;letter-spacing:-1px}
.hits button:hover{background:#f4f7fb}
.prow{display:flex;gap:12px;flex:none}
.prow button{height:88px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:26px;font-weight:700;color:var(--ink2);cursor:pointer;padding:0 24px}
.prow button:hover{background:#f4f7fb}
.prow .undo{flex:1}
.padnote{font-size:18px;color:var(--ink3);text-align:center;flex:none;margin:0}
.padnote b{color:var(--ink2);font-weight:700}

/* 잠깐 보기 — 8초 뒤 저절로 다시 가려진다 */
.peek{position:absolute;inset:0;background:rgba(255,255,255,.98);display:grid;place-items:center;
  border-radius:10px;text-align:center}
.peek .h{font-size:26px;color:var(--ink3);margin-bottom:12px}
.peek .v{font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.25;
  font-variant-numeric:tabular-nums}
.peek .v .g{color:var(--ink2);font-weight:600}
.peek .t{margin-top:26px;font-size:18px;color:var(--ink3)}
.peek .cl{margin-top:20px}

/* 시간대 표 — 관리자 화면에서 쓴다 */

/* ── 창구 검수 — 가점 대조 (26.08.27) ─────────────────────
   부적격 사유 1위가 가점 오류(70%)다. 신청값과 서류 확인값을 나란히 놓는다.
   차이가 나는 줄만 주황이고, 나머지는 색이 없다 */
.gcmp{width:100%;border-collapse:collapse;font-size:var(--fs3)}
.gcmp th{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);text-align:left;
  padding:0 var(--s3) var(--s2) 0;border-bottom:1px solid var(--hair)}
.gcmp td{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--hair)}
.gcmp .it{color:var(--ink2);font-weight:var(--w2)}
.gcmp select{font:inherit;font-size:var(--fs3);padding:var(--s1) var(--s2);width:212px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r1);background:var(--card)}
.gcmp select:focus{outline:2px solid var(--line2);outline-offset:-1px;border-color:var(--ink-on)}
.gcmp tr.tot td{border-bottom:0;padding-top:var(--s3);font-size:var(--fs5);font-weight:var(--w3)}
.gcmp tr.tot .it{font-size:var(--fs3)}
.gcmp tr.w td{background:var(--gold-bg)}

/* 신분증 13자리 대조 — 화면에 번호가 뜨지 않는다 */
.idchk{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.idchk input{font:inherit;font-size:var(--fs5);width:196px;padding:var(--s2) var(--s2);letter-spacing:.5px;
  border:1px solid var(--line);border-radius:var(--r2);font-variant-numeric:tabular-nums}
.idchk input:focus{outline:2px solid var(--line2);outline-offset:-1px;border-color:var(--ink-on)}

/* 목록 줄 끝 건수·쪽수 (그동안 화면마다 inline 으로 적던 것) */
.bar .cnt{color:var(--ink3);font-variant-numeric:tabular-nums}
/* 거르개 단 이름표 — 누르는 것이 아니라 그 줄이 무슨 단인지 알린다(26.09.22 · 이슈 #8).
   세 줄의 알약 시작점을 맞추려고 폭을 박는다 — 「서류접수」 네 글자가 가장 길다 */
.bar .glbl{font-size:var(--fs2);font-weight:var(--w2);color:var(--ink3);
  white-space:nowrap;min-width:56px}
.bar.pgbar{padding-top:var(--s1)}
.subtabs a.off{color:var(--ink3);cursor:default}
.subtabs a.off:hover{color:var(--ink3);border-bottom-color:transparent}
.sec.sec2{margin-top:var(--s4)}
.kv .v.w{color:var(--warn)}
.idres{margin-top:var(--s2)}
/* 창구 검수 — 서류 목록이 왼쪽으로 가서 왼단이 넓다 */
.body.wide2{grid-template-columns:340px 1fr}
.body.wide2 .chk li .sub{font-size:var(--fs2)}
.leadnote.docnote{margin:var(--s2) 0 0}
/* 창구 검수는 한 화면에 다 들어가야 한다 — 줄 간격을 좁힌다 */
.body.wide2 .gcmp td{padding-top:var(--s1);padding-bottom:var(--s1)}
.body.wide2 .memo textarea{min-height:58px}

/* ── 당첨 내역 패널 (26.08.27) ─────────────────────────────
   프로그램은 판정하지 않는다. 청약할 때 낸 값을 보기 좋게 보일 뿐이다.
   그래서 색도 「점수 차」도 없다 — 값과 합계만 있다.
   당첨 구분(일반 가점제·추첨제 / 특별공급 6종)마다 줄이 바뀐다 */
.wincard{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.wincard .wh{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--sink);
  border-bottom:1px solid var(--line);font-size:var(--fs3)}
.wincard .wh b{font-weight:var(--w3)}
.wincard .wh .sp{flex:1}
.wincard .wb{display:grid;grid-template-columns:1fr 300px}
.wincard .wl{padding:var(--s1) var(--s3) var(--s2);border-right:1px solid var(--hair)}
.wincard .wr{padding:var(--s1) var(--s3) var(--s2)}
.wincard table{width:100%;border-collapse:collapse;font-size:var(--fs3)}
.wincard td{padding:var(--s1) 0;border-bottom:1px solid var(--hair)}
.wincard td.k{color:var(--ink3);font-size:var(--fs2);width:112px;padding-right:var(--s2)}
.wincard td.n{text-align:right;font-weight:var(--w3);font-variant-numeric:tabular-nums;width:52px}
.wincard tr:last-child td{border-bottom:0}
.wincard tr.total td{border-top:1px solid var(--line);border-bottom:0;padding-top:var(--s2);font-weight:var(--w3)}
.wincard tr.total td.n{font-size:var(--fs5)}
.wincard tr.base td{color:var(--ink3);font-weight:var(--w1)}
.wincard tr.base td.n{font-weight:var(--w3);color:var(--ink)}

/* 방문 이력 — 회차마다 한 줄, 만난 상담사가 다르다 */
.visit .tr .rd{display:inline-block;width:44px;font-weight:var(--w3);color:var(--ink2)}
.visit .tr .wh{color:var(--ink2);font-weight:var(--w3)}
.twowin{padding:var(--s3);display:grid;gap:var(--s3)}
.memo .one.nx{margin:var(--s2) 0 0;align-items:flex-start}
.body.wide2 .memo .one .k{width:104px}

/* ═══ 상담대기 키오스크 · 환영 화면 (화면 파일 안 <style> 에서 옮겨 옴 — 26.08.27) ═══ */
/* 환영 화면 — 26.08.27 확정한 사선 반반 배치 */
.kios .cgphoto{background:var(--site-cg, var(--sink)) center 42%/cover no-repeat;
  animation:kenburns 32s ease-in-out infinite}
@keyframes kenburns{
  0%{transform:scale(1.05) translate(0,0)}
  50%{transform:scale(1.14) translate(-2.2%,-1.6%)}
  100%{transform:scale(1.05) translate(0,0)}}
@media (prefers-reduced-motion:reduce){.kios .cgphoto{animation:none}}
.wC{position:relative;width:100%;height:100%;background:#001229}
.wC .photo{position:absolute;inset:0;overflow:hidden}
.wC .card2{position:absolute;left:0;top:0;bottom:0;width:68%;
  background:linear-gradient(165deg,#0a2650,#001229);color:#fff;
  padding:52px 48px 46px;display:flex;flex-direction:column;
  clip-path:polygon(0 0,47% 0,100% 100%,0 100%);padding-right:170px}
.wC .edge{position:absolute;left:0;top:0;bottom:0;width:68%;pointer-events:none;
  clip-path:polygon(0 0,47% 0,100% 100%,0 100%);
  background:linear-gradient(to right,transparent 97%,rgba(183,160,106,.5) 100%)}
.wC .sp{flex:1}
.wC .wh1{max-width:522px}
.wC .wtag{width:fit-content;max-width:460px}
.wC .wsub{max-width:596px}
.wC .waitc{position:absolute;right:44px;top:44px;background:#fff;border-radius:18px;
  padding:20px 30px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.wC .waitc .l{font-size:17px;color:var(--slate, var(--ink2));font-weight:500}
.wC .waitc .n{font-family:Montserrat,sans-serif;font-size:44px;font-weight:700;color:var(--navy);line-height:1.05}
.wC .waitc .n small{font-size:22px;font-weight:600}
.wC .waitc .m{font-size:17px;color:var(--taupe, var(--ink3));margin-top:2px}
.wlogo{max-width:238px;height:auto;filter:brightness(0) invert(1)}
.wtag{font-family:"Noto Serif KR",serif;font-weight:300;font-size:22px;color:var(--gold);
  letter-spacing:.2em;margin:0 0 16px}
.wh1{color:#fff;font-weight:300;font-size:40px;line-height:1.3;margin:0}
.wh1 b{font-weight:700}
.wsub{color:rgba(255,255,255,.84);font-weight:300;font-size:17px;margin-top:20px;line-height:1.7}
.wbtn{display:inline-flex;justify-content:center;align-items:center;color:var(--navy);
  font-size:28px;font-weight:700;font-family:inherit;padding:20px 44px;background:var(--gold);
  border:0;border-radius:999px;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.wfoot{color:rgba(255,255,255,.5);font-size:17px}
.wfoot b{color:rgba(255,255,255,.72);font-weight:500}
/* 소탭만 있는 줄 (창구 상담 — 명단으로 돌아가는 길) */

/* ── 가점 짚어주기 (26.08.28) ─────────────────────────────
   ★ 판정하지 않는다. 「부적격」·「오류」라고 쓰지 않고 숫자와 날짜만 놓는다.
   따로 경고 상자를 두지 않고 **그 값 바로 아래 한 줄**로만 붙인다 (C안 「화면 안에 설명문을 두지 않는다」).
   근거는 실물 1,091명 검증 — docs/reference/score-check.md */
/* ★ `.flag` 는 발자취 패널용이라 `padding-right:76px`(오른쪽 [보기] 단추 자리)를 갖고 있다.
   당첨 내역 패널이 그 이름을 그대로 쓰면서 206px 칸에서 76px를 빼앗기고 있었다 —
   짚어주기가 「값 아래 **한 줄**」이라는 규칙이 그래서 깨져 있었다. 26.08.28 */
.wincard .flag{display:block;font-size:var(--fs2);font-weight:var(--w1);color:var(--warn);
  margin-top:1px;line-height:var(--lh3);padding-right:0}
.wincard .flag.seen{color:var(--ink3)}
.wincard tr.chk td{background:var(--gold-bg)}
.wincard td.base2{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}

/* ── 다음에 가져오실 것 — 서류 이름은 적는 값이 아니라 고르는 값이다 (26.08.28)
   근거: 부평 실측에서 같은 뜻이 「가족관계증명서」/「가족관계증명서(상세)」로 갈렸다 */
.memo .one.nx .k{padding-top:var(--s1)}
.pickdoc{display:flex;flex-wrap:wrap;gap:var(--s1);flex:1}
.pickdoc .pd{font-size:var(--fs2);color:var(--ink2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s1) var(--s2);cursor:pointer;white-space:nowrap}
.pickdoc .pd.on{background:var(--pick);border-color:var(--navy);
  color:var(--navy);font-weight:var(--w3)}
.pickdoc .pd.add{color:var(--ink3);border-style:dashed}
.chk li.etc .nm{color:var(--ink3)}
.chk li.etc input{flex:1;border:0;border-bottom:1px solid var(--line);
  padding:1px 2px;font:inherit;font-size:var(--fs2);color:var(--ink);background:none}
.chk li.etc input:focus{outline:none;border-bottom-color:var(--navy)}

/* ── 왜 이 서류가 붙었나 — 대원칙 넷째 줄 (26.08.28)
   「어떤 서류가 필요한지 오픈상담사가 고객에게 안내를 잘 할 수 있게 한다」 */
.chk li .why{font-size:var(--fs2);color:var(--ink3);white-space:nowrap}
.chk li.cond .nm{font-weight:var(--w1)}
.seclite{font-size:var(--fs2);color:var(--ink3);margin:var(--s3) 0 2px}

/* ── 최종 판정(관리자) — 26.08.28
   판정은 사람이 한다. 프로그램은 값을 정확히 보이고 비켜선다 */
.jd{display:flex;flex-wrap:wrap;gap:var(--s1)}
.jd button{font:inherit;font-size:var(--fs3);padding:var(--s2) var(--s3);border:1px solid var(--line);
  background:var(--card);border-radius:var(--r1);cursor:pointer;color:var(--ink2)}
.jd button.on{background:var(--navy);border-color:var(--navy);color:var(--card);font-weight:var(--w3)}
.jd button.wn.on{background:var(--warn);border-color:var(--warn)}
.rsn{margin-top:var(--s3)}
.rsn .lb{font-size:var(--fs2);color:var(--ink3);margin-bottom:var(--s1)}
.rsn select,.rsn input{font:inherit;font-size:var(--fs3);padding:var(--s1) var(--s2);width:100%;
  border:1px solid var(--line);border-radius:var(--r1);background:var(--card);color:var(--ink)}
.rsn select:focus,.rsn input:focus{outline:none;border-color:var(--navy)}
.gate{font-size:var(--fs2);color:var(--warn);margin-top:var(--s2)}
.fixv .r{display:flex;gap:var(--s2);padding:var(--s1) 2px;border-bottom:1px solid var(--hair);font-size:var(--fs3)}
.fixv .r .k{width:118px;color:var(--ink3);font-size:var(--fs2);flex:none}
.fixv .r .v{color:var(--ink)}
.fixv .r .v b{font-weight:var(--w3)}
/* 판정 이력은 **원래 두 줄**이다 — 좁은 칸에 한 줄로 밀어 넣으면 접혀서 지저분해진다.
   첫 줄에 날짜·결과, 둘째 줄에 사유. 26.08.28 */
.hist .r2{padding:var(--s1) 2px var(--s2);border-bottom:1px solid var(--hair);font-size:var(--fs2);color:var(--ink2)}
.hist .r2 .dt2{color:var(--ink3);margin-right:var(--s2)}
.hist .r2 .rs{font-weight:var(--w3);color:var(--ink)}
.hist .r2 .rw{display:block;margin-top:2px}
.opin{border-left:2px solid var(--line);padding:2px 0 2px var(--s2);font-size:var(--fs3);color:var(--ink2);margin-top:2px}
.opin .who2{display:block;font-size:var(--fs2);color:var(--ink3);margin-top:var(--s1)}

/* ── 최종 판정 격자 — 사실(왼쪽)이 넓어야 한다 (26.08.28)
   `.wide2` 는 창구 화면용이라 **왼쪽이 340px 고정**이다. 여기에 가점표를 넣으면 글자가 두세 줄로 접힌다 */
.body.wide4{grid-template-columns:1fr 372px}
.body.wide4 .gcmp td{padding-top:var(--s1);padding-bottom:var(--s1)}
.body.wide4 .gcmp .k{width:104px}
.body.wide4 .fixv .r .k{width:104px}

/* ── 적격 일괄 확정 — 조건이 맞는 건만 (26.08.28 사용자 확정)
   실물 부평은 1,177건 중 922건이 적격이었다. 한 건씩이면 관리자가 900번을 누른다.
   다만 무조건 일괄은 개별 검토를 형식으로 만든다 — **조건을 달아 좁힌다** */
.batch{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--hair);font-size:var(--fs2);color:var(--ink3)}
.batch b{color:var(--ink);font-weight:var(--w3)}
.batch .btn{margin-left:auto}

/* ═══ 당첨자 계약 예약 — 고객 폰 (26.08.28) ═══
   공개 페이지다. 등급 S·A·B·C · 가점 · 판정 상태 · 내부 숫자는 어느 화면에도 없다.
   글자 계단은 관리 것(13·15·18·24)을 그대로 쓴다 — 설문 수집 화면과 같은 자리다. */
.rsvstep{display:flex;gap:var(--s1);padding:var(--s3) var(--s4) 0}
.rsvstep i{flex:1;height:3px;border-radius:var(--r1);background:var(--line)}
.rsvstep i.on{background:var(--navy)}
.rsvask{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.4px;margin:var(--s3) 0 var(--s1)}
.rsvlead{font-size:var(--fs2);color:var(--ink3);margin:0 0 var(--s3);line-height:var(--lh3)}
.rsvlead b{color:var(--ink2)}

.rsvcode{display:flex;gap:var(--s2);margin-bottom:var(--s2)}
.rsvcode span{flex:1;height:52px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);
  display:grid;place-items:center;font-size:var(--fs6);font-weight:var(--w3);font-variant-numeric:tabular-nums}
.rsvcode span.on{border-color:var(--navy);background:var(--card)}
.rsvtimer{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
  font-size:var(--fs2);color:var(--ink3);margin-bottom:var(--s3)}
.rsvtimer b{color:var(--warn);font-variant-numeric:tabular-nums;font-weight:var(--w3)}
.rsvtimer .re{margin-left:auto;color:var(--ink2);text-decoration:underline}

/* 날짜 — 계약은 3일이라 한 줄에 들어간다 */
.rsvday{display:flex;gap:var(--s2);margin-bottom:var(--s3)}
.rsvday .d{flex:1;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) 0 var(--s2);
  text-align:center;cursor:pointer}
.rsvday .d .w{font-size:var(--fs2);color:var(--ink3);display:block}
.rsvday .d .n{font-size:var(--fs5);font-weight:var(--w3);font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.rsvday .d.on{background:var(--pick);border-color:var(--navy)}
.rsvday .d.full{background:var(--sink);cursor:default}
.rsvday .d.full .n{font-weight:var(--w2);color:var(--ink3)}

.rsvslots{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s1)}
.rsvslot{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s3);cursor:pointer;min-height:58px}
.rsvslot .t{font-size:var(--fs3);font-weight:var(--w3);font-variant-numeric:tabular-nums}
.rsvslot .s{font-size:var(--fs2);color:var(--ink3);margin-top:var(--s1)}
.rsvslot.on{background:var(--pick);border-color:var(--navy);border-left:3px solid var(--navy)}
.rsvslot.few .s{color:var(--warn);font-weight:var(--w3)}
.rsvslot.full{background:var(--sink);cursor:default}
.rsvslot.full .t{color:var(--ink3);font-weight:var(--w2)}
.rsvslot.full .s{color:var(--ink3)}

.rsvdone{background:var(--sink);border-radius:var(--r2);padding:var(--s3) var(--s3);margin-bottom:var(--s3)}
.rsvdone .big{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.6px;line-height:var(--lh2)}
.rsvdone .k{font-size:var(--fs2);color:var(--ink3);margin-top:var(--s2)}
.rsvdone .v{font-size:var(--fs3);color:var(--ink2)}

/* 가져오실 것 — 창구 회전을 살리는 자리다. 당일이 아니라 여기서 안내한다 */
.rsvsub{font-size:var(--fs2);font-weight:var(--w3);color:var(--navy);margin:var(--s4) 0 2px}
.rsvbring{margin:0;padding:0;list-style:none}
.rsvbring li{position:relative;padding:var(--s2) 0 var(--s2) var(--s4);font-size:var(--fs3);
  border-bottom:1px solid var(--hair);line-height:var(--lh3)}
.rsvbring li::before{content:'';position:absolute;left:3px;top:15px;
  width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.rsvbring li.w::before{background:var(--warn)}
.rsvbring li .why{display:block;font-size:var(--fs2);color:var(--ink3);margin-top:2px}
/* 대리 안내 — 대부분은 해당 없다. 필요한 사람만 편다 */
.rsvmore{margin-top:var(--s4)}
.rsvmore summary{font-size:var(--fs2);font-weight:var(--w3);color:var(--navy);
  cursor:pointer;list-style:none;padding:2px 0}
.rsvmore summary::-webkit-details-marker{display:none}
.rsvmore summary::after{content:' ▸';color:var(--ink3)}
.rsvmore[open] summary::after{content:' ▾'}

/* ═══ 계약 예약 관리 — 관리자 PC (26.08.28) ═══
   ★ 우리 화면이 아는 것은 「예약」과 「도착·끝」 둘뿐이다.
   ④~⑧이 수동이라 창구별 타임라인은 빈 화면이 된다 — 만들지 않는다. */
.rmwrap{display:grid;grid-template-columns:560px 1fr;gap:var(--s3);align-items:start}
.rmgrid{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.rmgrid th{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3);padding:0 0 2px;text-align:center;
  font-variant-numeric:tabular-nums}
.rmgrid th.tm{width:58px;text-align:right;padding-right:var(--s2);color:var(--ink2);
  font-size:var(--fs3);font-weight:var(--w3);vertical-align:middle}
.rmcell{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s1);text-align:center;
  cursor:pointer;background:var(--card);white-space:nowrap}
.rmcell:hover{background:var(--sink)}
.rmcell b{font-size:var(--fs5);font-weight:var(--w3);font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.rmcell .of{font-size:var(--fs2);color:var(--ink3);font-variant-numeric:tabular-nums}
.rmcell .st{font-size:var(--fs2);color:var(--ink3);margin-left:var(--s2)}
.rmcell.full{background:var(--bg)}
.rmcell.full b{color:var(--ink3)}
.rmcell.few .st{color:var(--warn);font-weight:var(--w3)}
.rmcell.shut{background:var(--sink);cursor:default}
.rmcell.shut b{color:var(--ink3);font-weight:var(--w2)}
.rmcell.on{background:var(--pick);border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy)}

/* 고른 칸 — 정원을 그 자리에서 늘리고 줄인다 */
.rmcap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3);
  border-bottom:1px solid var(--hair)}
.rmcap .k{font-size:var(--fs2);color:var(--ink3)}
.rmcap .n{font-size:var(--fs6);font-weight:var(--w3);font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.rmcap .sp{flex:1}
.stepbtn{width:32px;height:32px;border:1px solid var(--line);background:var(--card);border-radius:var(--r2);
  font-size:var(--fs5);font-weight:var(--w3);color:var(--ink2);cursor:pointer;font-family:inherit;line-height:var(--lh1)}
.stepbtn:hover{background:var(--sink)}

/* ── 주택형 색 (26.08.28 사용자 지시) ──────────────────────────────
   현장 홍보물(분양안내문 · 공급안내 · 홈페이지)에 일괄 적용하는 주택형 색을 화면도 그대로 쓴다.
   ★ 「색은 두 계열뿐」 규칙의 예외다. 쓰는 자리는 **주택형 배지 하나**로 묶는다.
   ★ 현장마다 다르다 — 아래는 **위파크 제주** 값이고, 실제로는 현장 설정에서 만들어 넣는다.
      새 현장을 열 때 분양안내문에서 색을 받는다(안 받으면 회색 하나로 떨어진다).
   출처 — 「0826_위파크 제주_축약간지(분양안내문) 수정14.pdf」 6쪽 타입표에서 그대로 뽑았다.
   ★ 글씨 색은 대비로 정한다 — 흰 글씨가 4.5:1 안 되는 색이 여덟 중 넷이다
      (84A 3.5 · 84B 2.3 · 108B 2.4 · 166P 2.6). 그 넷은 진한 글씨를 쓴다. */
:root{
  --ht-84a:#EA545E;  --ht-84b:#F3982D;  --ht-108a:#3D62AD; --ht-108b:#50B6B1;
  --ht-129:#006546;  --ht-166p:#DA8D97; --ht-183p:#CF0047; --ht-197p:#A03B79;
}
.bg.ht{background:var(--calm);color:var(--card)}
.bg.ht.t84a {background:var(--ht-84a); color:var(--ink)}   /* 흰 글씨 3.5:1 — 진한 글씨 4.8 */
.bg.ht.t84b {background:var(--ht-84b); color:var(--ink)}   /* 2.3 → 7.6 */
.bg.ht.t108a{background:var(--ht-108a);color:#fff}         /* 5.9 */
.bg.ht.t108b{background:var(--ht-108b);color:var(--ink)}   /* 2.4 → 7.1 */
.bg.ht.t129 {background:var(--ht-129); color:#fff}         /* 7.1 */
.bg.ht.t166p{background:var(--ht-166p);color:var(--ink)}   /* 2.6 → 6.7 */
.bg.ht.t183p{background:var(--ht-183p);color:#fff}         /* 5.6 */
.bg.ht.t197p{background:var(--ht-197p);color:#fff}         /* 6.2 */

/* ── P6 예비 동호 배정 (26.08.29) ── */
.rmwrap.left{grid-template-columns:1fr 726px}
.unitpick{display:flex;flex-wrap:wrap;gap:var(--s1);padding:0 var(--s3) var(--s3);max-height:180px;overflow:auto}
.unitpick .u{border:1px solid var(--line);border-radius:var(--r1);padding:var(--s1) var(--s2);font-size:var(--fs2);
  background:var(--card);cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.unitpick .u:hover{background:var(--sink)}
.unitpick .u.taken{background:var(--bg);color:var(--ink3);text-decoration:line-through;cursor:default}
.unitpick .u.on{background:var(--pick);border-color:var(--navy);font-weight:var(--w3)}
.unitin{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3);border-bottom:1px solid var(--hair)}
.unitin input{width:88px;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s2);
  font-family:inherit;font-size:var(--fs5);font-weight:var(--w3);text-align:center;font-variant-numeric:tabular-nums}
.unitin .sp{flex:1}
.unitin .k{font-size:var(--fs2);color:var(--ink3)}
.unitin .un{font-size:var(--fs3);color:var(--ink2)}
.tbl tr.cur td{background:var(--pick);box-shadow:inset 3px 0 0 var(--navy)}

/* ── P7 선착순 계약 입력 (26.08.29) ──────────────────────────
   실물 「계약입력폼」 시트(260822 계약현황관리)의 칸 배치를 그대로 옮긴 자리.
   읽기만 하는 칸(회색)과 적는 칸(흰색)을 색으로 가른다 — 실물도 노란셀/회색셀로 갈라 두었다. */
.form{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) var(--s4);padding:var(--s3) var(--s4) var(--s4)}
.form .fi{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.form .fi.w2{grid-column:span 2}
.form .fi > span{font-size:var(--fs2);color:var(--ink3)}
.form input,.form select{font:inherit;font-size:var(--fs3);padding:var(--s2) var(--s2);width:100%;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
.form input:focus,.form select:focus{outline:2px solid var(--line2);outline-offset:-1px;border-color:var(--ink-on)}
.form input[readonly]{background:var(--sink);color:var(--ink2);border-color:var(--hair)}

/* ★ 다섯 번째 이름 겹침을 26.08.29 에 밟았다 — `.pad` 는 **인포 입장 수 세기 태블릿 화면**(1280×800 고정)이다.
   카드 안쪽 여백인 줄 알고 썼다가 카드가 800px로 부풀었다. 카드 안쪽 여백은 `.blk` 다.
   **이름만 보고 고르지 않는다. 정의를 찾아 읽는다.** */
.card>.blk:first-child{border-top:0}
/* ★ 인포는 제주 배치를 그대로 쓴다 — `1fr 340px`.
   **배정 카드가 왼쪽 큰 자리, 대기열이 오른쪽 340px**이다.
   전 화면 공용 규칙 「목록 왼쪽·카드 오른쪽」의 예외다(26.08.30 사용자 지시).
   인포 화면의 주인공은 목록이 아니라 배정 카드다. */
.infosplit{display:grid;grid-template-columns:1fr 340px;gap:var(--s3);align-items:start}

.turnbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin-bottom:var(--s2)}
.turnbar .sp{flex:1}
.turnhq{border:1px solid var(--line);border-radius:var(--r1);padding:var(--s1) var(--s3);
  font-size:var(--fs3);color:var(--ink2);background:var(--card);white-space:nowrap}
.turnhq b{font-weight:var(--w3);color:var(--ink);margin-left:var(--s1)}
.turnhq.on{background:var(--pick);border-color:var(--ink-on);color:var(--ink);font-weight:var(--w3)}
.turnhq.done{color:var(--ink3);background:var(--sink)}

/* ── 사후영업 인포 — 제주(CLKGB) 고객배정 구성을 그대로 (26.08.30 사용자 지시) ──
   「화면 구성을 CLKGB 제주 인포 고객배정 구성을 따르세요」
   제주 `renderCurrent()` 의 조립 순서를 그대로 옮긴다 —
   ①고객 머리(구분 태그·NO·접수시각) ②한 줄(이름·번호·대조 결과) ③구분 토글
   ④본문(워크인=순번 스트립 / 지명=상담사 그리드 / 미배정=사유) ⑤하단 바(문장·특이사항·인원·확정)
   ★ 제주는 200명에서도 견딘다 — **앞 3명 · 현재 차례 · 다음 6명**만 보이기 때문이다.
     「전체 200명 펼치기」를 따로 만들 필요가 없었다(26.08.30 확인). */
.curhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.curhead .no{font-size:var(--fs3);color:var(--ink2)}
.curhead .no b{font-size:var(--fs5);font-weight:var(--w3);color:var(--ink)}
.curhead .time{font-size:var(--fs2);color:var(--ink3);margin-left:auto}
.tag{display:inline-block;border-radius:var(--r1);padding:1px var(--s2);font-size:var(--fs2);font-weight:var(--w3);color:var(--card)}
.tag.wk2{background:var(--calm)} .tag.jm2{background:var(--navy)}
.tag.mb2{background:var(--warn)} .tag.rv2{background:var(--card);border:1px solid var(--ink2);color:var(--ink2)}
.oneline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);
  background:var(--sink);border-radius:var(--r2);padding:var(--s2) var(--s3);margin-bottom:var(--s3)}
.oneline .curname{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.6px}
.oneline .curphone{font-size:var(--fs5);color:var(--ink)}
.oneline .curaddr{font-size:var(--fs3);color:var(--ink2)}
.oneline .mch{font-size:var(--fs3);color:var(--ink2);margin-left:auto}
.oneline .mch b{color:var(--ink);font-weight:var(--w3)}
.oneline .mch b.jm{color:var(--navy)}
.oneline .mch b.warn2{color:var(--warn)}
.oneline .mch .lvl{font-size:var(--fs2);color:var(--ink3);margin-left:var(--s1)}

/* 구분 토글 — 워크인·지명은 크게, 미배정은 작게 (제주 .gubun) */
.gubun{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.gubun button{border:1px solid var(--line);background:var(--card);border-radius:var(--r2);
  padding:var(--s2) var(--s4);font-family:inherit;font-size:var(--fs5);font-weight:var(--w3);color:var(--ink2);cursor:pointer}
.gubun button .gs{display:block;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);margin-top:1px}
.gubun button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.gubun button.on .gs{color:var(--ink-on)}
.gubun button.mb{font-size:var(--fs3);font-weight:var(--w2);padding:var(--s2) var(--s3);margin-left:auto}
.gubun .sp{flex:1}

/* 순번 스트립 — 앞 3 · 현재 차례 · 다음 6 (제주 .tstrip) */
.tstrip{margin-bottom:var(--s3)}
.trow3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.trow3.six{grid-template-columns:repeat(6,1fr)}
.tmini{border:1px solid var(--hair);border-radius:var(--r2);padding:var(--s1) var(--s2);background:var(--sink)}
.tmini.past{background:var(--card)}
.tmini .wt{font-size:var(--fs2);color:var(--ink3)}
.tmini .ord{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);margin-left:var(--s1)}
.tmini .tnm{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.2px;margin-top:2px}
.tmini .tpos{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
.tmini .tso{font-size:var(--fs2);color:var(--ink3)}
.tmini.past .tnm{color:var(--ink3);font-weight:var(--w1)}
.tmini .badge{display:inline-block;margin-top:var(--s1);font-size:var(--fs2);color:var(--ink3)}
.tmini .badge.hold{color:var(--warn);font-weight:var(--w3)}
.tcard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);background:var(--pick);
  border-left:3px solid var(--navy);border-radius:var(--r2);padding:var(--s2) var(--s3);margin-bottom:var(--s2)}
.tcard .wt{font-size:var(--fs2);color:var(--ink2)}
.tcard .ord{font-size:var(--fs5);font-weight:var(--w3)}
.tcard .tnm{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.6px}
.tcard .tpos,.tcard .tso{font-size:var(--fs3);color:var(--ink2);font-weight:var(--w1)}
.tcard .sp{flex:1}
.tcard .badge{font-size:var(--fs2);font-weight:var(--w3);color:var(--navy)}
.pickgrid .g6{grid-column:1/-1;flex-basis:100%;font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);
  padding:var(--s1) 0 1px;position:sticky;top:0;background:var(--card)}
.pickgrid button{border:1px solid var(--line);background:var(--card);border-radius:var(--r2);padding:var(--s1) var(--s2);
  font-family:inherit;font-size:var(--fs3);font-weight:var(--w2);color:var(--ink);cursor:pointer;text-align:left}
.pickgrid button:hover{background:var(--sink)}
.pickgrid button .p2{display:block;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
.pickgrid button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.pickgrid button.on .p2{color:var(--ink-on)}
.pickgrid button.off{color:var(--ink3);background:var(--sink);cursor:default}

/* 미배정 사유 (제주 .mbreason) */
.mbreason{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.mbreason button{border:1px solid var(--line);background:var(--card);border-radius:var(--r2);padding:var(--s2) var(--s4);
  font-family:inherit;font-size:var(--fs3);font-weight:var(--w2);color:var(--ink2);cursor:pointer}
.mbreason button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}

/* 하단 바 (제주 .assign) */
.assign{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  border-top:1px solid var(--hair);padding-top:var(--s3)}
.assign .who2{font-size:var(--fs3);color:var(--ink2)}
.assign .sp{flex:1}
.assign .who2 b{color:var(--ink);font-weight:var(--w3)}
.assign .notein{flex:1;min-width:180px;border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s2) var(--s2);font-family:inherit;font-size:var(--fs3);background:var(--card)}
.people{display:flex;align-items:center;gap:var(--s1)}
.people .pl{font-size:var(--fs2);color:var(--ink3)}
.people button{border:1px solid var(--line);background:var(--card);border-radius:var(--r1);padding:var(--s1) var(--s3);
  font-family:inherit;font-size:var(--fs3);font-weight:var(--w2);color:var(--ink2);cursor:pointer}
.people button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.people select{border:1px solid var(--line);border-radius:var(--r1);padding:var(--s1) var(--s2);
  font-family:inherit;font-size:var(--fs3);color:var(--ink2);background:var(--card)}

/* ── 지명 — 보기 전환 · 찾기 (26.08.30 사용자 지시) ─────────
   「A안과 B안을 인포 근무자가 선택할 수 있게 · 상담사 이름, 전화번호로 검색하는 칸은 있어야 합니다」
   ★ 제주에 이미 있는 장치다 — `pickSortBtns()` 3단(본부·팀·이름 / 본부·이름 / 이름)이
     **구분 토글 줄 안**에 있고 고른 값은 `localStorage` 로 **그 기기에** 남는다. 자리를 그대로 쓴다.
   ★ 제주 본부 칸(hqbox)은 30명 규모라 한 화면에 폈다. **200명에서는 무너진다**(5본부 × 40명 = 40열).
     그래서 본부별 보기는 **칩으로 한 본부만** 연다. 평면 보기는 제주 8열 그대로다. */
.psort{display:inline-flex;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  flex:none;margin-left:auto}
.psort button{border:0;border-left:1px solid var(--line);background:var(--card);padding:var(--s1) var(--s3);
  font-family:inherit;font-size:var(--fs2);font-weight:var(--w2);color:var(--ink2);cursor:pointer}
.psort button:first-child{border-left:0}
.psort button:hover{background:var(--sink)}
.psort button.on{background:var(--navy);color:var(--card)}

/* 상담사 찾기 — 이름 또는 전화번호 */
.stfsrch{position:relative;margin-bottom:var(--s2)}
.stfsrch input{width:100%;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s6) var(--s2) var(--s3);
  font-family:inherit;font-size:var(--fs3);background:var(--card)}
.stfsrch input:focus{outline:none;background:var(--card);border-color:var(--navy)}
.stfsrch input::placeholder{color:var(--ink3)}
.stfsrch .x{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;
  background:transparent;color:var(--ink3);font-size:var(--fs3);cursor:pointer;line-height:var(--lh1);padding:var(--s1) var(--s1);
  border-radius:var(--r1)}
.stfsrch .x:hover{background:var(--hair);color:var(--ink)}
.srchres{font-size:var(--fs2);color:var(--ink3);margin:0 0 var(--s2)}
.srchres b{color:var(--ink2);font-weight:var(--w3)}
.srchres .none2{color:var(--warn);font-weight:var(--w3)}

/* 본부·팀 좁히기 칩 (본부별 보기 전용) */
.chips2{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s2)}
.chips2 .pill{border:1px solid var(--line);background:var(--card)}
.chips2 .pill.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.chips2 .pill.on b{color:var(--ink-on)}
.chips2 .lb{font-size:var(--fs2);color:var(--ink3);align-self:center;margin-right:2px}

/* 그리드 버튼에 상담사 번호 뒤 4자리 — 번호로 찾았을 때만 붙는다 */
.pickgrid button .p3{display:block;font-size:var(--fs2);font-weight:var(--w2);color:var(--navy)}
.pickgrid button.on .p3{color:var(--line)}

/* 세 갈래를 나란히 놓는 자리 (찾기 세 모양 비교 등) */
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3);align-items:start}
.hh{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);margin:0 0 var(--s2)}

/* 찾기 + 본부 칩을 한 줄로 — 화면지침 1.1 「가로는 채우고 세로는 아낀다」.
   찾기 칸이 폭을 다 먹으면 오른쪽이 비고 세로만 한 줄 는다. */
.findrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.findrow .stfsrch{width:300px;flex:none;margin:0}
.findrow .pill{border:1px solid var(--line);background:var(--card)}
.findrow .pill.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.findrow .pill.on b{color:var(--ink-on)}
.findrow .lb{font-size:var(--fs2);color:var(--ink3);margin-left:var(--s1)}

/* ── 사후영업 상담사 폰 — 제주(CLKGB) 상담카드를 그대로 (26.08.30 사용자 지시) ──
   구성 순서도 제주 그대로다 — ①머리(현장·이름·역할) ②큰 탭(배정 고객·방문예정자·출근 체크)
   ③검색 한 줄 ④두 구역(관리 고객 · 내 고객) ⑤페이저.
   ★ 글자만 CLKCRM 계단(13·15·18·24)으로 맞춘다. 제주 21px 이름은 18px 로 내린다.
   ★ 누르는 것은 44px 이상 — 제주가 그렇게 잡아 두었다(폰이라 손가락으로 누른다). */
.segtab{display:flex;gap:var(--s1);padding:var(--s3) var(--s4) 0}
.segtab button{flex:1;border:1px solid var(--line);background:var(--card);border-radius:var(--r2);
  padding:var(--s3) var(--s1);font-family:inherit;font-size:var(--fs3);font-weight:var(--w3);color:var(--ink3);
  cursor:pointer;min-height:44px}
.segtab button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.segtab button.att{color:var(--navy);border-color:var(--line2)}

.subrow2{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4) 0}
.subrow2 .srch{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3) var(--s3);font-family:inherit;font-size:var(--fs3);background:var(--card);min-height:44px}
.subrow2 .srch::placeholder{color:var(--ink3)}
.subrow2 .rf{flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r2);
  padding:var(--s3) var(--s3);font-family:inherit;font-size:var(--fs3);font-weight:var(--w3);color:var(--ink2);
  cursor:pointer;min-height:44px}

.glabel{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3);margin:var(--s3) 2px var(--s2)}
.glabel .n{color:var(--ink2)}
.cust{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s3);
  margin-bottom:var(--s2);cursor:pointer}
.cust .custrow{display:flex;align-items:flex-start;gap:var(--s2)}
.cust .custbody{flex:1;min-width:0}
.cust .custside{flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.cust .custside button{border:1px solid var(--line);background:var(--card);border-radius:var(--r2);
  min-width:46px;height:38px;padding:0 var(--s1);font-size:var(--fs2);color:var(--ink3);cursor:pointer;
  font-family:inherit;white-space:nowrap}
.cust .r1{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cust .flagicon{font-size:var(--fs3);flex:none}
.cust .nm2{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.3px;color:var(--navy)}
.cust .ph2{font-size:var(--fs3);color:var(--ink);margin-top:var(--s1)}
.cust .r2{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);color:var(--ink3);font-size:var(--fs2);flex-wrap:wrap}
.cust .r2 .dot2{color:var(--ink3)}
.cust .lvl{font-size:var(--fs2);font-weight:var(--w3);border-radius:var(--r1);padding:2px var(--s2);
  background:var(--bg);color:var(--navy);flex:none}

.pagerm{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--s1);padding:2px 0 var(--s1)}
.pagerm button{min-width:38px;height:38px;font-family:inherit;font-size:var(--fs2);font-weight:var(--w3);
  border:1px solid var(--line);border-radius:var(--r2);background:var(--card);color:var(--ink2);cursor:pointer}
.pagerm button.on{background:var(--navy);border-color:var(--navy);color:var(--card)}

/* 상담카드 폼 — 제주 fhead / cinfo / savebar */
.fhead{display:flex;align-items:center;gap:var(--s2);background:var(--navy);color:var(--card);padding:var(--s3) var(--s4)}
.fhead .back{border:0;background:transparent;color:var(--card);font-size:var(--fs5);cursor:pointer;font-family:inherit;padding:0 var(--s1)}
.fhead .ft{font-size:var(--fs3);font-weight:var(--w3)}
.cinfo{background:var(--sink);border-radius:var(--r2);padding:var(--s3) var(--s3);margin-bottom:var(--s3)}
.cinfo .cn{font-size:var(--fs6);font-weight:var(--w3);letter-spacing:-.6px}
.cinfo .cp{font-size:var(--fs3);color:var(--ink);margin-top:2px}
.cinfo .cm{font-size:var(--fs2);color:var(--ink3);margin-top:var(--s1)}
.savebar{display:flex;gap:var(--s2);padding:var(--s2) var(--s4) var(--s3);border-top:1px solid var(--hair);background:var(--card)}
.savebar .back2{flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r2);
  padding:var(--s3) var(--s4);font-family:inherit;font-size:var(--fs3);font-weight:var(--w3);color:var(--ink2);cursor:pointer;min-height:44px}
.savebar .save{flex:1;border:0;background:var(--navy);color:var(--card);border-radius:var(--r2);
  padding:var(--s3);font-family:inherit;font-size:var(--fs3);font-weight:var(--w3);cursor:pointer;min-height:44px}

/* 공유 시트 */
.sheet{border:1px solid var(--line);border-radius:var(--r2) var(--r2) 0 0;background:var(--card);padding:var(--s3) var(--s4) var(--s4);
  box-shadow:0 -4px 18px rgba(20,28,38,.10)}
.sheet .sh{font-size:var(--fs3);font-weight:var(--w3);margin:0 0 var(--s2)}
.sheet .shsub{font-size:var(--fs2);color:var(--ink3);margin:0 0 var(--s3)}

/* ── 사후영업 조직도·순번 (26.08.30) — 제주(CLKGB) 관리자 화면 그대로 ──
   제주 조직도는 **본부 2열 보드**, 순번관리는 **1번부터 카드 격자**다.
   ★ 사후영업에서 더해지는 것은 **본부별 몫** 하나뿐이다 — 관리자가 숫자로 넣는다(26.08.30 사용자 확정). */
.orgboard{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
.orgbox{border:1px solid var(--line);border-radius:var(--r2);background:var(--card);overflow:hidden}
.orgbox .oh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--hair);background:var(--sink)}
.orgbox .oh .hn{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.3px}
.orgbox .oh .hc{font-size:var(--fs2);color:var(--ink3)}
.orgbox .oh .sp{flex:1}
.orgteam{padding:var(--s2) var(--s3);border-bottom:1px solid var(--hair)}
.orgteam:last-child{border-bottom:0}
.orgteam .tn{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink2);margin-bottom:var(--s1)}
.orgppl{display:flex;flex-wrap:wrap;gap:var(--s1)}
.orgppl span{border:1px solid var(--hair);border-radius:var(--r1);padding:var(--s1) var(--s2);font-size:var(--fs3);background:var(--sink)}
.orgppl span b{font-weight:var(--w3)}
.orgppl span.lead2{border-color:var(--line2);background:var(--card)}
.orgppl span.off2{color:var(--ink3)}
.orgppl span.off2 b{color:var(--ink3);font-weight:var(--w1)}

/* 본부별 몫 — 사후영업에서 새로 생긴 자리 */
.quota{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4) var(--s3);
  border-top:1px solid var(--hair)}
.quota .qcell{display:flex;align-items:center;gap:var(--s1);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s1) var(--s2);background:var(--card)}
.quota .qcell .qn{font-size:var(--fs3);font-weight:var(--w3)}
.quota .qcell input{width:46px;border:1px solid var(--line);border-radius:var(--r1);padding:var(--s1) var(--s1);
  font-family:inherit;font-size:var(--fs3);font-weight:var(--w3);text-align:center;background:var(--card)}
.quota .qcell .qs{font-size:var(--fs2);color:var(--ink3)}
.quota .qcell.zero{background:var(--sink)}
.quota .qcell.zero .qn{color:var(--ink3)}
.quota .sp{flex:1}

/* 순번 카드 격자 — 제주 .ogrid */
.ogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s2);padding:var(--s3) var(--s4) var(--s1)}
.ocard{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s2);background:var(--card);min-height:62px}
.ocard .on2{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3)}
.ocard .onm{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:-.2px;margin-top:2px}
.ocard .oso{font-size:var(--fs2);color:var(--ink3)}
.ocard.empty2{background:var(--sink);border-style:dashed}
.ocard.empty2 .onm{color:var(--ink3);font-weight:var(--w1)}
.ocard.hold2{background:var(--gold-bg);border-color:var(--gold-line)}
.ocard.hold2 .oso{color:var(--warn);font-weight:var(--w3)}
.obar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4) var(--s3);
  border-top:1px solid var(--hair)}
.obar .sp{flex:1}
.obar .cnt2{font-size:var(--fs3);color:var(--ink2)}
.obar .cnt2 b{font-weight:var(--w3);color:var(--ink)}
.hopanel .hoh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--hair);font-size:var(--fs3);font-weight:var(--w3)}
.hopanel .hoh .cnt3b{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
.hopanel .hoh .sp{flex:1}
.hobody{padding:var(--s3) var(--s3) var(--s3)}
.hobody .sel2{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s3);
  font-family:inherit;font-size:var(--fs3);background:var(--card);min-width:360px;color:var(--ink)}
.hohint{font-size:var(--fs2);color:var(--ink3);margin:var(--s2) 0 0}
.hocaution{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:var(--r2);padding:var(--s2) var(--s3);
  font-size:var(--fs3);color:var(--ink2);margin:var(--s2) 0 0}
.hocaution b{color:var(--ink);font-weight:var(--w3)}

/* ── 로그인 · 계정 신청 (26.08.30) — 제주(CLKGB) 틀 그대로 ──
   제주는 화면마다 로그인을 품고 있으나(파일 7장에 네 번 중복) CLKCRM 은 한 장으로 모은다.
   ★ 계정은 **본인 이메일 + 비밀번호**로 신청하고 관리자가 승인해 조직도와 잇는다(제주 방식 계승). */
.auth{width:360px;background:var(--navy);border-radius:var(--r2);padding:var(--s5) var(--s5) var(--s5);
  box-shadow:0 8px 30px rgba(20,28,38,.16)}
.auth.pc{width:420px}
.auth .top{text-align:center;margin-bottom:var(--s4)}
.auth .wm{display:inline-flex;align-items:center;gap:var(--s2);color:var(--card)}
.auth .wm .mk2{width:26px;height:26px;border:1.5px solid var(--gold);border-radius:var(--r1);
  display:grid;place-items:center;font-size:var(--fs2);font-weight:var(--w3)} .auth .wm .ci{height:var(--s5);width:auto;display:block}  /* CI 흰색 한 줄 로고 — 어두운 카드라 흰색판(CI지침 2.2), 높이 24 면 폭 160 으로 최소 120 을 넘는다(4.5) */
.auth .wm .b2{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:-.3px}
.auth .tag2{margin-top:var(--s2);font-size:var(--fs2);color:var(--dk-ink)}
.auth .afld{margin-bottom:var(--s3)}
.auth .afld label{display:block;font-size:var(--fs2);color:var(--dk-ink);margin-bottom:var(--s1)}
.auth .afld input{width:100%;border:1px solid var(--dk-line);border-radius:var(--r2);padding:var(--s3);
  font-family:inherit;font-size:var(--fs3);background:var(--dk-card);color:var(--card)}
.auth .afld input::placeholder{color:var(--calm)}
.auth .anote{font-size:var(--fs2);color:var(--dk-ink);line-height:var(--lh3);margin:0 0 var(--s3)}
.auth .anote b{color:var(--gold);font-weight:var(--w3)}
.auth .abtn{width:100%;border:0;border-radius:var(--r2);background:var(--card);color:var(--navy);
  padding:var(--s3);font-family:inherit;font-size:var(--fs3);font-weight:var(--w3);cursor:pointer;min-height:44px}
.auth .aghost{width:100%;border:1px solid var(--dk-line);border-radius:var(--r2);background:transparent;
  color:var(--dk-ink);padding:var(--s3);font-family:inherit;font-size:var(--fs3);cursor:pointer;margin-top:var(--s2);min-height:44px}
.auth .alink{text-align:center;font-size:var(--fs2);color:var(--dk-ink);margin-top:var(--s3)}
.auth .alink a{color:var(--gold);text-decoration:underline;cursor:pointer}
/* 2단계 인증 등록 QR — 어두운 카드 위에서도 읽히게 흰 바탕에 가운데로(설계 13-6) */
.auth .aqr{display:block;margin:var(--s3) auto;padding:var(--s2);background:var(--card);border-radius:var(--r1)}
.auth .abox{border:1px solid var(--dk-line);border-radius:var(--r2);background:var(--dk-card);
  padding:var(--s3) var(--s3);font-size:var(--fs2);color:var(--dk-ink);line-height:var(--lh3);margin-top:var(--s3)}
.auth .abox b{color:var(--card)}
.auth .abox.warn3{border-color:var(--dk-warn-line);background:var(--dk-warn-bg)}
.authstage{background:var(--dk-bg);border-radius:var(--r2);padding:var(--s5);display:flex;
  justify-content:center;align-items:flex-start;gap:var(--s4)}

/* ── 비고 열 — 화면지침 8.2 ──
   비고는 문장이라 그냥 재면 표를 혼자 차지한다(출근 관리자에서 824px · 평균의 5배였다).
   다른 열들의 평균을 넘지 않게 잡고 넘치면 말줄임으로 자른다.
   전체는 그 행을 열어서 본다. */
/* max-width 만으로는 표 자동 배치가 무시한다 — width 와 함께 줘야 먹는다 */
.rm{width:200px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm.wide{width:280px;max-width:280px}
table[data-tfix]{table-layout:fixed}
td.rm,th.rm{box-sizing:border-box}

/* ═══════════════════════════════════════════════════════════
   아래는 26.08.30 검수에서 손으로 다듬은 것 — 뒤에 두어 위를 덮는다.
   기계 변환이 못 만드는 것들이다(포커스 링 · 못 누르는 상태 · 결 · 빈 상태).
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable","Pretendard","맑은 고딕",system-ui,sans-serif;
  font-size:var(--fs3);line-height:var(--lh3);font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r1)}

/* 본문 바로가기 — 탭 키를 눌러야 나온다 */
.skip{position:absolute;left:var(--s4);top:-40px;z-index:20;
  background:var(--navy);color:var(--card);font-size:var(--fs3);font-weight:var(--w2);
  padding:var(--s2) var(--s4);border-radius:0 0 var(--r1) var(--r1);text-decoration:none;
  transition:top var(--dur)}
.skip:focus{top:0}
.wrap{max-width:var(--w-page);margin:0 auto;padding:var(--s3) var(--s4) var(--s7)}
/* 카드 하나뿐인 화면(로그인)은 페이지 한가운데에 놓는다 — 26.09.04 사용자 확정 */
/* ── 숨긴 것은 자리도 안 차지한다 — `display:flex` 를 쓰는 상자에도 걸린다 (26.09.05) ── */
[hidden]{display:none !important}
.wrap.solo{min-height:100vh;padding:var(--s4);display:flex;align-items:center;justify-content:center}
/* 로그인 첫 화면 — 밝고 화사하게(26.10.29 사용자 '랜딩페이지부터 너무 구리다', '밝고 화사하게', '애매한 그러데이션 쓰지 마').
   바탕은 단색, 흰 판 한 장을 둘로 나눠 왼쪽에 동호 배치표 그림(분양 현장 장부를 뜻함), 오른쪽에 입력 칸.
   그림의 칸 색은 업무 화면과 같은 뜻 색(계약 초록, 상담 주황, 재방문 분홍, 오늘 CI 빨강 테두리)이다.
   어두운 카드를 이 두 화면(index, reset)에서만 흰 판으로 바꾼다. 키오스크의 어두운 화면은 그대로다. 로고는 컬러판(CI지침 흰 바탕) */
.wrap.solo.entry{max-width:none;width:100%;margin:0;min-height:100dvh;background:var(--bg)}
.entry .door{display:flex;width:100%;max-width:880px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--entry-shadow);overflow:hidden}
.entry .brand{flex:0 0 400px;display:flex;flex-direction:column;gap:var(--s5);padding:var(--s6);
  background:var(--sink);border-right:1px solid var(--line)}
.entry .brand .ci{height:var(--s5);width:auto;align-self:flex-start}
.entry .brand h1{margin:0 0 var(--s2);font-size:var(--fs7);font-weight:var(--w3);line-height:var(--lh1);color:var(--ink)}
.entry .brand p{margin:0;font-size:var(--fs3);color:var(--ink2)}
.entry .units{margin-top:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.entry .units i{height:var(--s5);border-radius:var(--r1);background:var(--card);border:1px solid var(--line2)}
.entry .units .c,.entry .legend .c::before{background:var(--done-bg);border-color:var(--done)}
.entry .units .w,.entry .legend .w::before{background:var(--warn-bg);border-color:var(--warn)}
.entry .units .r,.entry .legend .r::before{background:var(--revisit-bg);border-color:var(--revisit)}
.entry .units .t,.entry .legend .t::before{background:var(--card);border:2px solid var(--red)}
.entry .legend{display:flex;gap:var(--s4);font-size:var(--fs2);color:var(--ink3)}
.entry .legend span::before{content:'';display:inline-block;width:var(--s3);height:var(--s3);margin-right:var(--s1);
  border:1px solid;border-radius:var(--r1);vertical-align:-2px}
.entry .forms{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--s5) var(--s4)}
.entry .auth{background:transparent;box-shadow:none;padding:var(--s4)}
.entry .auth .top .wm{display:none}
.entry .auth .top{text-align:left}
.entry .auth .tag2{margin:0;font-size:var(--fs4);font-weight:var(--w2);color:var(--ink)}
.entry .auth .afld label,.entry .auth .anote,.entry .auth .alink{color:var(--ink3)}
.entry .auth .anote b,.entry .auth .abox b{color:var(--ink)}
.entry .auth .alink a{color:var(--ink2)}
.entry .auth .afld input{background:var(--card);border-color:var(--line2);color:var(--ink)}
.entry .auth .afld input::placeholder{color:var(--ink-on)}
.entry .auth .afld input:focus{outline:none;border-color:var(--ink)}
.entry .auth .abtn{background:var(--navy);color:var(--card)}
.entry .auth .abtn:hover{background:var(--navy-dk)}
.entry .auth .aghost{border-color:var(--line2);color:var(--ink2)}
.entry .auth .aghost:hover{background:var(--sink)}
.entry .auth .abtn:focus-visible,.entry .auth .aghost:focus-visible,.entry .auth a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.entry .auth .abox{background:var(--sink);border-color:var(--line);color:var(--ink2)}
.entry .auth .abox.warn3{background:var(--warn-bg);border-color:var(--warn-bg);color:var(--warn)}
.entry .auth .abox.warn3 b{color:var(--warn)}
/* 폰과 좁은 창 — 그림을 빼고 입력 칸만, 로고는 칸 위에 다시 보인다 */
@media (max-width:760px){
  .entry .brand{display:none}
  .entry .door{max-width:420px}
  .entry .auth .top .wm{display:inline-flex}
  .entry .auth .top{text-align:center}
  .entry .auth .tag2{margin-top:var(--s2);font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
}

/* ── 최상단 ── */
.hd{background:var(--navy);color:#fff}
/* ★ CLKGB `Admin.html` 헤더를 그대로 옮겼다(26.09.10 사용자 지시 「가져다 따라 하라」) —
   높이 60 · 좌우 16 · 사이 12 · 이름 18/700 · 탭 14/700 에 밑줄은 `inset 0 -3px` CLK 레드 ·
   단추 12/굵게에 5·12 패딩 · 맨 끝에 시계. 값은 CLKCRM 토큰으로 바꿔 적었다. */
.hd .in{max-width:var(--w-page);margin:0 auto;padding:0 var(--s4);height:60px;
  display:flex;align-items:center;gap:var(--s3)}
/* CLK 마크 — 그림 하나다(26.09.10 · CI지침 1-1 「32px 아래면 마크만」 · 4.5 하한 22px).
   `clk-mark.svg` 는 색이 CLK 레드라 어두운 머리띠 위에서 흰색으로 뒤집는다(CI지침 2.2). */
.hd .mark{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.hd .mark img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
/* 마크는 22px 이 하한이다(CI지침 4.5) — CLKGB 는 15px 이지만 그것은 글자가 붙은 한 줄판이라
   같은 자리가 아니다. 띠를 60px 로 키워 마크가 3분의 1 을 넘지 않게 했다. */
.hd a.mark:hover img{opacity:.8}
/* ★ 현장 이름은 줄어들지 않는다(26.09.10) — `flex-shrink` 가 1 이라 「위파크 제주」가 잘렸다.
   CLKGB `header .brand{flex:0 0 auto}` 와 같은 규칙이다. 자리가 모자라면 탭이 옆으로 구른다.
   ★ **글자는 본문 크기(14px) 그대로 둔다** — CLKGB 는 18px 이지만 그쪽은 **글자**이고 여기는 **고르개**다.
     `select` 는 자기 폭을 브라우저가 계산해 **패딩을 늘려도 글자 자리가 안 늘어난다** —
     18px 로는 1px, 16px 로도 1px 모자라 「위파크 제주」가 화살표에 닿았다(26.09.10 실측 셋).
     ★ 되풀이하지 말 것 — `select` 의 잘림은 패딩·글자 크기로 못 고친다. 크기를 되돌리는 것이 답이다. */
.hd .nm{font-size:var(--fs3);font-weight:var(--w3);letter-spacing:var(--ls2);flex:none;width:auto}
.hd .sub,.hd .me{font-size:var(--fs3);color:var(--ink-on);font-weight:var(--w1)}
/* 여러 현장을 보는 사람의 현장 칸 — 하나뿐이면 .nm 그대로 글씨다 (설계 8-6) */
/* 대량 문자 — 단계 카드 (CLKGB Admin.html 의 승인 모양을 토큰으로 옮겼다) */
.bulkcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s5);margin:var(--s3) 0}
.bulkcard.lock{background:var(--sink);border-style:dashed}
.stephd{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.stephd .hdright{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.steplab{font-size:var(--fs4);font-weight:var(--w3);color:var(--navy);
  display:flex;align-items:baseline;gap:var(--s2)}
.steplab .no{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r3);background:var(--navy);color:#fff;
  font-size:var(--fs2);font-weight:var(--w3);flex:none}
.bulkcard.lock .steplab{color:var(--ink3)}
.bulkcard.lock .steplab .no{background:var(--ink3)}
.stepsub{font-size:var(--fs2);color:var(--ink3)}
.navrow{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--hair)}
.navrow .right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.navrow .hint{font-size:var(--fs2);color:var(--ink3)}
.stepnum{display:flex;gap:var(--s5);flex-wrap:wrap;margin:var(--s3) 0}
.stepnum .one{display:flex;flex-direction:column;gap:var(--s1)}
.stepnum .k{font-size:var(--fs2);color:var(--ink3)}
.stepnum .v{font-size:var(--fs5);font-weight:var(--w3);color:var(--ink);line-height:var(--lh2)}
.stepnum .one.warn .v{color:var(--warn)}
/* 끝난 단계 · 남은 단계 — 같은 얇은 띠로 깔아 위에서 아래로 한 줄기로 읽힌다 */
.stepbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);
  margin:var(--s1) 0;border:1px solid var(--line);border-radius:var(--r1);
  background:var(--sink);font-size:var(--fs2);color:var(--ink3)}
.stepbar .no{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:var(--r3);background:var(--ink3);color:var(--card);
  font-size:var(--fs1);font-weight:var(--w3);flex:none}
.stepbar.done{background:var(--card);color:var(--ink2);cursor:pointer}
.stepbar.done .no{background:var(--navy)}
.stepbar b{color:var(--ink);font-weight:var(--w3)}
.stepbar .sp{flex:1}
/* 본문에 꼭 넣을 것 — 서버가 안 붙이는 것들이다. 성격에 따라 갈린다 */
.needlist{margin:0;padding-left:var(--s4);font-size:var(--fs2);line-height:var(--lh3);color:var(--ink2)}
.needlist li{margin:2px 0}
.needlist b{color:var(--ink)}
/* 서버가 붙이는 의무 표기 — 화면에서 지울 수 없다는 뜻으로 점선을 두른다 */
.fixedbox{background:var(--gold-bg);border:1px dashed var(--gold-line);border-radius:var(--r1);
  padding:var(--s2) var(--s3);font-size:var(--fs2);line-height:var(--lh3);
  color:var(--ink2);white-space:pre-line}
/* 올린 파일 한 줄 — 이름 · 몇 행이 몇 건이 됐나 · 뺀 내역 */
.fileline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r1);
  background:var(--sink);font-size:var(--fs2);color:var(--ink2);margin:var(--s2) 0}
.fileline b{color:var(--ink)}
/* 올린 파일 목록 — 줄 하나가 파일 하나다(설계 12-3) */
.filelist{display:flex;flex-direction:column;gap:var(--s1);margin:var(--s2) 0}
.filelist .fileline{margin:0}
.filelist a{color:var(--navy);font-weight:var(--w2)}
/* 손이 가야 하는 값을 글자색으로 짚는다 — 장문 전환처럼 요금이 걸리는 자리 */
.warnfg{color:var(--warn);font-weight:var(--w2)}
.smsprev{background:var(--sink);border:1px solid var(--line);border-radius:var(--r1);
  padding:var(--s3);white-space:pre-wrap;font-size:var(--fs3);line-height:var(--lh3);
  color:var(--ink2);max-width:420px}

.hd .sitepick{height:28px;appearance:none;background:var(--navy-dk);color:#fff;border:1px solid var(--gold);
  /* 오른쪽은 화살표 자리다 — 24px 일 때 18px 글자 「위파크 제주」가 화살표에 닿았다(26.09.10 실측) */
  border-radius:var(--r1);padding:var(--s1) var(--s6) var(--s1) var(--s3);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.hd .sitepick:focus{outline:none;box-shadow:var(--ring)}

/* 다른 창이 현장을 바꾸면 이 창을 덮는다 — 옛 현장 숫자를 그대로 읽는 것을 막는다 */
.sitealert{position:fixed;inset:0;z-index:30;background:rgba(20,28,38,.72);
  display:grid;place-items:center;padding:var(--s4)}
.sitealert .box{background:var(--card);border-radius:var(--r2);box-shadow:var(--lift);
  border-top:4px solid var(--warn);padding:var(--s5);max-width:420px;text-align:center}
.sitealert .t{font-size:var(--fs5);font-weight:var(--w3);color:var(--warn);
  line-height:var(--lh2);margin:0 0 var(--s3)}
.sitealert .d{font-size:var(--fs3);color:var(--ink2);line-height:var(--lh3);margin:0}
.sitealert .pair{display:grid;grid-template-columns:auto auto;gap:var(--s2) var(--s4);
  justify-content:center;align-items:baseline;margin:0 0 var(--s4);text-align:left}
.sitealert .pair .k{font-size:var(--fs2);color:var(--ink3)}
.sitealert .pair .v{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink)}
.sitealert .btn{margin-top:var(--s3)}
/* 1:1 문자 덮개 — 상담사가 자기 화면에서 그 자리로 보낸다(26.09.08 사용자 지적).
   ★ 화면을 옮기지 않는다. 고객을 보던 자리에서 보내고 그 자리로 돌아온다. */
.smsdlg{position:fixed;inset:0;z-index:30;background:rgba(20,28,38,.72);
  display:grid;place-items:center;padding:var(--s4);overflow:auto}
.smsdlg .box{background:var(--card);border-radius:var(--r2);box-shadow:var(--lift);
  padding:var(--s5);max-width:960px;width:100%;max-height:92vh;overflow:auto}
/* 덮개 안에서는 왼쪽을 좁혀 폰이 옆에 선다 — 아래로 내려가면 글과 견주지 못한다 */
.smsdlg .svl{flex:1 1 380px}
.smsdlg .who{font-size:var(--fs5);font-weight:var(--w3);color:var(--ink);margin:0 0 var(--s1)}
.smsdlg .whosub{font-size:var(--fs2);color:var(--ink3);margin:0 0 var(--s4)}
.smsdlg .svr>*{transform:scale(.62);transform-origin:top left;width:393px}
.smsdlg .svr{flex:0 0 250px;height:470px;overflow:hidden;position:static}

.hd .sp{flex:1}
.hd .phase{color:var(--gold);font-size:var(--fs3);font-weight:var(--w3)}

.tabs{background:var(--card);border-bottom:1px solid var(--line)}
.tabs .in{max-width:var(--w-page);margin:0 auto;padding:0 var(--s4);display:flex}
.tabs a{padding:var(--s3) var(--s4);font-size:var(--fs3);font-weight:var(--w2);color:var(--ink2);
  text-decoration:none;border-bottom:2px solid transparent;transition:color var(--dur)}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);font-weight:var(--w3);border-bottom-color:var(--navy)}
.tabs a[aria-disabled]{color:var(--ink3);cursor:default}
.tabs a[aria-disabled]:hover{color:var(--ink3)}

/* 1층을 머리띠 안에 넣는다 (26.09.08 사용자 지시 · 기획 5장).
   시점이 정한 화면 목록이라 줄이 하나뿐이고, 본문 위에 띠가 안 남는다. */
.hd .tabs{background:transparent;border-bottom:0;flex:1;min-width:0}
.hd .tabs .in{max-width:none;margin:0;padding:0;height:100%;align-items:stretch;
  overflow-x:auto;scrollbar-width:none}
.hd .tabs .in::-webkit-scrollbar{display:none}
/* 세로 패딩이 글자와 밑줄 사이를 띄운다 — 0 으로 두면 빨간 선이 글자에 달라붙는다(26.09.10).
   CLKGB `header nav button{padding:9px 10px}` 과 같은 자리다. */
.hd .tabs a{display:flex;align-items:center;padding:var(--s2) var(--s3);font-size:var(--fs3);
  font-weight:var(--w3);color:var(--ink-on);border-bottom:0;border-radius:9px;white-space:nowrap}
.hd .tabs a:hover{color:#fff}
/* ★ 켜진 탭 밑줄은 CLK 레드다(26.09.10 · CLKGB 와 같은 규칙) —
   레드는 「지금 여기 · 1위 · 오늘」 전용이고 **면이 아니라 선**으로만 쓴다.
   골드는 현장 브랜드색이라 켜짐 표시로 쓰지 않는다. */
.hd .tabs a.on{color:#fff;border-radius:0;box-shadow:inset 0 -3px 0 var(--red)}
/* 여덟 장을 넘으면 나머지를 고르개 하나로 접는다 — 잘려서 못 찾는 줄이 없게 */
.hd .tabs .more{margin-left:var(--s2);align-self:center}
/* ── 오른쪽 자리 둘 — 출근 단추와 관리 톱니 (26.09.10 사용자 승인) ──
   1층에서 두 줄을 덜어 낸 자리다. 마크도 링크가 되어 대시보드를 연다. */
.hd a.mark{text-decoration:none}
.hd a.mark:hover{background:var(--navy-dk)}
/* ★ 머리띠 안의 조작 요소는 **한 높이 28px** 이다(26.09.10 실측 — 24·26·28·34·39 다섯 갈래였다).
   높이가 어긋나면 띠가 어수선해 보인다. 마크는 22px(CI지침 4.5 하한)로 한 단 낮춰 글자와 균형을 잡는다. */
/* 조작 요소는 한 높이다 — 재보니 24·26·28·34·39 다섯 갈래였다(26.09.10 실측) */
.hd .btn{height:28px;padding:var(--s1) var(--s3);display:inline-flex;align-items:center;flex:none;
  font-size:var(--fs2);font-weight:var(--w3);border-radius:var(--r2)}
.hd .clock{font-size:var(--fs3);color:var(--ink-on);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 폰 폭에서는 머리 띠가 넘쳐 글자가 한 자씩 세로로 섰다(26.09.27 실측 449/358) — 시계와 이름을 빼고 한 줄로 둔다 */
@media (max-width:700px){.hd .clock{display:none}.hd .me{font-size:0}.hd .phase,.hd .btn{white-space:nowrap}
  .hd .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* 데스크톱에서 폰 화면(body.phone 360px 틀)을 열면 위 미디어 조건이 안 걸려 같은 꺾임이 났다(26.10.17 실측 358) — 틀에도 같은 규칙 */
.phone .hd .clock{display:none}.phone .hd .me{font-size:0}.phone .hd .phase,.phone .hd .btn{white-space:nowrap}
.phone .hd .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd a.btn{text-decoration:none;background:transparent;border-color:var(--ink-on);color:var(--ink-on)}
.hd a.btn:hover{background:var(--navy-dk);color:#fff;border-color:#fff}
.hd a.btn.on{background:var(--navy-dk);color:#fff;border-color:var(--gold)}
.hd a.btn.gear{padding:var(--s2) var(--s3);line-height:1;font-size:var(--fs4)}

/* ── 2층 소탭 띠 — 틀이 그린다 (26.09.10).
   1층 묶음의 형제 화면들이다. 화면마다 따로 그리지 않는다 — 한 곳에서 그려야 어긋나지 않는다. */
.subtabs.shellsub{display:block;background:transparent;border-bottom:0;padding:var(--s3) 0 0}
.subtabs.shellsub .in{max-width:var(--w-page);margin:0 auto;padding:0 var(--s4);
  display:flex;align-items:center;gap:0;border:0;overflow-x:auto;scrollbar-width:none}
.subtabs.shellsub .in::-webkit-scrollbar{display:none}
/* ★ 붙은 사각 세그먼트다 — CLKGB `.seg` 를 그대로 옮겼다(26.09.10).
   **모양으로 구실이 갈린다** — 화면을 바꾸는 것은 붙은 사각, 걸러내는 것은 알약(`.pill`). */
.subtabs.shellsub a{padding:var(--s2) var(--s5);white-space:nowrap;font-size:var(--fs3);
  font-weight:var(--w3);color:var(--ink3);background:var(--card);border:1px solid var(--line);
  border-left-width:0;border-bottom:0}
.subtabs.shellsub a:first-of-type{border-left-width:1px;border-radius:var(--r2) 0 0 var(--r2)}
.subtabs.shellsub a:last-of-type{border-radius:0 var(--r2) var(--r2) 0}
.subtabs.shellsub a.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
/* 폰은 머리띠가 좁다 — 1층을 아래 띠로 내리고 옆으로 굴린다 */
.tabs.phone .in{overflow-x:auto;scrollbar-width:none}
.tabs.phone .in::-webkit-scrollbar{display:none}

.split{display:grid;grid-template-columns:380px 1fr;gap:var(--s3);align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}

/* ── 왼쪽 목록 ── */
.lst{overflow:hidden;display:flex;flex-direction:column;max-height:820px}
/* 알약이 줄을 넘으면 접어 내린다 — 화면·기기에서 갈래 여섯이 378px 칸을 105px 넘쳤다(26.09.10 실측) */
.lst .filt{padding:var(--s2) var(--s2) var(--s1);display:flex;gap:var(--s1);flex-wrap:wrap}
/* ★ 걸러내는 알약 — CLKGB `.periods button` 값 그대로다(26.09.10 사용자 지적 「버튼 모양이 이상하다」).
   테두리도 배경도 없이 글자만 두었더니 **단추로 안 보였다.** 꺼진 것도 테두리가 있어야 한다.
   **모양으로 구실이 갈린다** — 걸러내면 알약, 화면을 바꾸면 붙은 사각(`.subtabs.shellsub`),
   무슨 일이 나면 단추(`.btn`), 세로 목록에서 고르면 카드(`.chip`). */
.pill{border:1.5px solid var(--line);background:var(--card);border-radius:var(--r3);
  padding:var(--s2) var(--s3);font-size:var(--fs3);font-weight:var(--w3);font-family:inherit;
  color:var(--ink2);cursor:pointer;white-space:nowrap;
  transition:background var(--dur),color var(--dur),border-color var(--dur)}
.pill:hover{background:var(--sink);border-color:var(--line2)}
.pill.on{border-color:var(--navy);background:var(--navy);color:var(--card)}
.pill b{font-weight:var(--w3);margin-left:var(--s1);color:var(--ink3)}
.pill.on b{color:var(--gold)}
.foldbtn{margin-left:auto;border:0;background:transparent;color:var(--ink3);cursor:pointer;
  font-size:var(--fs3);line-height:var(--lh1);padding:var(--s1);border-radius:var(--r1);
  transition:background var(--dur),color var(--dur)}
.foldbtn:hover{background:var(--sink);color:var(--ink)}
.foldbtn::before{content:"\00AB"}

.lst .srch{padding:0 var(--s3) var(--s2);position:relative}
.lst .srch input{width:100%;border:1px solid var(--line);border-radius:var(--r1);
  padding:var(--s2) var(--s3);font-size:var(--fs3);font-family:inherit;background:var(--sink);
  transition:border-color var(--dur),background var(--dur)}
.lst .srch input:hover{border-color:var(--ink3)}
.lst .srch input:focus{outline:none;background:var(--card);border-color:var(--navy);box-shadow:var(--ring)}
.lst .srch input::placeholder{color:var(--ink3)}

.lst .rows{overflow:auto;flex:1;border-top:1px solid var(--hair)}
/* 쪽을 나누는 목록 — 상자는 내용만큼 늘어나 안쪽 스크롤이 없다. 쪽 크기는 창에 들어가는 줄 수다(list.js 들어갈줄, 26.10.25 사용자) */
.lst.paged{max-height:none}
.lst.paged .rows{overflow:visible}
.row{display:block;padding:var(--s2) var(--s3);border-bottom:1px solid var(--hair);cursor:pointer;
  text-decoration:none;color:inherit;border-left:3px solid transparent;transition:background var(--dur)}
.row:hover{background:var(--sink)}
.row.on{background:var(--pick);border-left-color:var(--navy)}
.row .l1{display:flex;align-items:baseline;gap:var(--s2)}
.row .nm{font-weight:var(--w3);font-size:var(--fs3);letter-spacing:var(--ls2);
  width:98px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .nm.anon{font-weight:var(--w1);color:var(--ink3)}
.row .tel{width:130px;flex:none;font-size:var(--fs3);color:var(--ink2)}
.row .l1 .bg{margin-left:auto}
.row .l2{margin-top:2px;font-size:var(--fs2);color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .l2 b{font-weight:var(--w2);color:var(--ink2)}
.lst .foot{padding:var(--s2) var(--s3);font-size:var(--fs2);color:var(--ink3);
  display:flex;align-items:center;gap:var(--s2);border-top:1px solid var(--hair)}
.lst .foot .r{margin-left:auto}

/* ── 배지 2종만 — 손이 가야 하는 것은 채우고, 갈래는 눌러앉힌다 ── */
.bg{display:inline-block;border-radius:var(--r1);padding:1px var(--s2);
  font-size:var(--fs1);font-weight:var(--w3);line-height:var(--lh4);letter-spacing:var(--ls3);
  min-width:40px;text-align:center;flex:none;background:var(--sink);color:var(--ink2)}
.bg.act{background:var(--warn);color:var(--card)}

/* ── 원장 머리 ── */
.ph{padding:var(--s4) var(--s5) var(--s3);position:sticky;top:0;z-index:5;
  background:var(--card);border-radius:var(--r2) var(--r2) 0 0}
.ph .top{display:flex;align-items:center;gap:var(--s2)}
.ph h2{margin:0;font-size:var(--fs6);font-weight:var(--w3);letter-spacing:var(--ls1);line-height:var(--lh2)}
.ph .tel{font-size:var(--fs3);color:var(--ink2);margin-left:var(--s1)}
.ph .sp{flex:1}

.btn{border:1px solid var(--line);background:var(--card);border-radius:var(--r1);
  padding:var(--s2) var(--s3);font-size:var(--fs3);font-weight:var(--w2);color:var(--ink2);
  font-family:inherit;cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.btn:hover{background:var(--sink);border-color:var(--ink3)}
.btn:active{background:var(--pick)}
.btn.pri{background:var(--navy);border-color:var(--navy);color:var(--card)}
.btn.pri:hover{background:var(--navy-dk);border-color:var(--navy-dk)}
.btn:disabled{background:var(--sink);border-color:var(--line);color:var(--ink3);cursor:not-allowed}
.btn:disabled:hover{background:var(--sink);border-color:var(--line)}
.btn.sm{padding:var(--s1) var(--s2);font-size:var(--fs2)}

/* 요약 — 카드가 아니라 한 줄 띠. 값만 한 계단(18px) 올려 눈이 걸리게 한다 */
.sum{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s3);align-items:baseline}
.sum .it{display:flex;align-items:baseline;gap:var(--s2)}
.sum .k{font-size:var(--fs2);color:var(--ink3)}
.sum .v{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:var(--ls2);line-height:var(--lh2)}
.sum .v.w{color:var(--warn)}

/* ── 본문 ── */
.body{display:grid;grid-template-columns:272px 1fr;border-top:1px solid var(--hair)}
.body .lf{padding:var(--s3) var(--s5) var(--s4);border-right:1px solid var(--hair)}
.body .rt{padding:var(--s3) var(--s5) var(--s4)}
.sec{font-size:var(--fs4);font-weight:var(--w3);color:var(--ink);margin:0 0 var(--s2);
  display:flex;align-items:baseline;gap:var(--s2)}
.sec.gap{margin-top:var(--s5)}
.sec .sp{flex:1}
.sec .hint{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}

.kv{display:grid;gap:var(--s2)}
.kv .r{display:flex;align-items:baseline;gap:var(--s3)}
.kv .k{width:68px;flex:none;font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
.kv .v{font-size:var(--fs3);font-weight:var(--w2)}
.kv .v.no{font-weight:var(--w1);color:var(--ink3)}

/* ── 상담 기록 ── */
.rec{display:grid;grid-template-columns:minmax(0,540px) minmax(0,180px);
  gap:0 var(--s5);justify-content:start}
.colhd{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3);
  padding:0 0 var(--s1);border-bottom:1px solid var(--hair);
  position:sticky;top:0;background:var(--card);z-index:1}
.pk{list-style:none;margin:0;padding:0}
.pk li{padding:var(--s1) var(--s2);font-size:var(--fs3);display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s2);cursor:pointer;border-bottom:1px solid var(--hair);
  border-left:3px solid transparent;transition:background var(--dur)}
.pk li:hover{background:var(--sink)}
.pk li .v{margin-left:auto;font-weight:var(--w3);letter-spacing:var(--ls2)}
.pk li .v.no{font-weight:var(--w1);color:var(--ink3)}
.pk li .mx{font-size:var(--fs1);font-weight:var(--w2);color:var(--ink3);background:var(--sink);
  border-radius:var(--r1);padding:0 var(--s1);flex:none}
.pk li.on{background:var(--pick);border-left-color:var(--navy);font-weight:var(--w3)}
.pk.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:0}
.pk.grid2 li:nth-child(odd){border-right:1px solid var(--hair)}
.pk.val li{justify-content:flex-start}
.pk.val li.sel{background:var(--pick);border-left-color:var(--navy);font-weight:var(--w3)}

.memo{margin-top:var(--s3);border-top:1px solid var(--hair);padding-top:var(--s3)}
.memo .one{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.memo .one .k{font-size:var(--fs2);color:var(--ink3);white-space:nowrap;width:68px;flex:none}
.memo .one input{flex:1;border:0;border-bottom:1px solid var(--line);padding:var(--s1) 2px;
  font-size:var(--fs3);font-family:inherit;font-weight:var(--w2);background:transparent;
  transition:border-color var(--dur)}
.memo .one input:hover{border-bottom-color:var(--ink3)}
.memo .one input:focus{outline:none;border-bottom-color:var(--navy);box-shadow:none}
.memo textarea{width:100%;min-height:84px;border:1px solid var(--line);border-radius:var(--r1);
  padding:var(--s2) var(--s3);font-family:inherit;font-size:var(--fs3);line-height:var(--lh3);
  resize:vertical;background:var(--sink);transition:border-color var(--dur),background var(--dur)}
.memo textarea:hover{border-color:var(--ink3)}
.memo textarea:focus{outline:none;background:var(--card);border-color:var(--navy);box-shadow:var(--ring)}
.memo .br{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.memo .br .ts{font-size:var(--fs2);color:var(--ink3)}
.memo .br .sp{flex:1}

/* ── 발자취 ── */
.trail{padding:var(--s3) var(--s5);border-top:1px solid var(--hair);
  background:var(--sink);border-radius:0 0 var(--r2) var(--r2)}
.tr{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s1) 0;font-size:var(--fs3)}
.tr+.tr{border-top:1px solid var(--hair)}
.tr .dt{width:104px;flex:none;color:var(--ink3);font-size:var(--fs2)}
.tr .ch{width:68px;flex:none;font-size:var(--fs2);color:var(--ink3)}
.tr .tt{width:112px;flex:none;font-weight:var(--w2)}
.tr .mm{flex:1;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr .wh{width:78px;flex:none;text-align:right;color:var(--ink3);font-size:var(--fs2)}

/* ── 빈 상태 — 「없음」이 아니라 무엇을 하면 되는지 적는다 ── */
.empty{padding:var(--s6) var(--s5);text-align:center;color:var(--ink3)}
.empty .t{font-size:var(--fs3);font-weight:var(--w2);color:var(--ink2);margin-bottom:var(--s1)}
.empty .d{font-size:var(--fs2);line-height:var(--lh3)}
.empty .btn{margin-top:var(--s4)}

/* ── 구역 접기 (_fold.js 가 .sec 를 .foldrow 로 바꾼다) ── */
.foldrow{display:flex;align-items:baseline;gap:var(--s2);cursor:pointer;user-select:none;
  font-size:var(--fs4);font-weight:var(--w3);color:var(--ink);padding:var(--s1) 0;
  border:0;background:transparent;font-family:inherit;width:100%;text-align:left;
  border-radius:var(--r1)}
.foldrow::before{content:"\25BE";font-size:var(--fs2);color:var(--ink3);width:12px;flex:none}
.foldrow.shut::before{content:"\25B8"}
.foldrow .sp{flex:1}
.foldrow .hint,.foldrow .cnt3{font-size:var(--fs2);font-weight:var(--w1);color:var(--ink3)}
.foldbody.shut{display:none}

/* ── 목록 접기 ── */
.split.fold{grid-template-columns:44px 1fr}
.split.fold .lst .pill,.split.fold .srch,.split.fold .rows,.split.fold .foot{display:none}
.split.fold .filt{padding:var(--s2) var(--s1);justify-content:center}
.split.fold .foldbtn{margin:0}
.split.fold .foldbtn::before{content:"\00BB"}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 상태 셋 — 기다리는 중 · 비었음 · 안 됐음 (26.08.31) ── */
.skel{height:14px;border-radius:var(--r1);background:var(--hair);
  background-image:linear-gradient(90deg,var(--hair),var(--sink),var(--hair));
  background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.skelrow{display:flex;align-items:center;gap:var(--s5);padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--hair)}
/* 다시 읽는 동안 — 그린 표를 지우지 않고 흐리게 두고 누르지 못하게 한다(list.js 기다리는중, 26.10.25) */
[aria-busy="true"]{opacity:.55;pointer-events:none;transition:opacity .15s}
/* 본문을 바꿔 끼우기 전 새 화면 — 앞 화면 자리에 보이지 않게 겹쳐 그려 창 높이를 잰다(`screen.js`) */
.mainprep{position:fixed;left:0;right:0;visibility:hidden;pointer-events:none}
/* 화면을 바꾼 뒤 본문으로 옮긴 초점(`screen.js`)은 화면 낭독기용이라 테두리를 그리지 않는다. 단추와 칸의 초점 테두리는 그대로다 */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
/* 머리가 오기 전 — 머리 높이만큼 자리를 잡아 본문이 밀리지 않게 한다(shell.js, 26.10.25) */
[id="틀자리"]:empty{height:60px;background:var(--navy)}
.btn.busy{color:var(--ink3);pointer-events:none}
.btn.busy::before{content:'';display:inline-block;width:10px;height:10px;margin-right:var(--s2);
  border:2px solid var(--line2);border-top-color:var(--ink3);border-radius:50%;
  vertical-align:-1px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.busy::before{animation:none}}
/* 물음 겹침 — prompt·confirm 을 대신한다(26.09.09). `.sitealert` 꼴을 그대로 따른다.
   ★ 브라우저 기본 팝업은 고르는 값을 타이핑하게 만들어 오탈자로 실패한다. */
.askwrap{position:fixed;inset:0;z-index:31;background:rgba(20,28,38,.72);
  display:grid;place-items:center;padding:var(--s4);overflow:auto}
.askbox{background:var(--card);border-radius:var(--r2);box-shadow:var(--lift);
  padding:var(--s5);max-width:460px;width:100%}
.askbox.warn{border-top:4px solid var(--warn)}
.askbox .t{font-size:var(--fs5);font-weight:var(--w3);color:var(--ink);
  line-height:var(--lh2);margin:0 0 var(--s4)}
.askbox.warn .t{color:var(--warn)}
.askbox .d{font-size:var(--fs2);color:var(--ink3);line-height:var(--lh3);margin:var(--s3) 0 0}
.askbox .one{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3)}
.askbox .one .k{flex:0 0 88px;font-size:var(--fs2);color:var(--ink3)}
.askbox .one input,.askbox .one select{flex:1}
.askbox .pair{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);
  align-items:baseline;margin:0 0 var(--s3)}
.askbox .pair .k{font-size:var(--fs2);color:var(--ink3)}
.askbox .pair .v{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink)}
.askbtn{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s4)}
.bar-warn{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--gold-bg);border:1px solid var(--warn-line);border-radius:var(--r2);
  font-size:var(--fs3);color:var(--ink2)}
.bar-warn b{color:var(--warn)}
.bar-warn .sp{flex:1}
.empty.fail .t{color:var(--warn)}

/* ═══ 현장 화면 색 — 키오스크(gb-)와 상담사 폰(body.fldskin)이 쓰는 한 벌 (26.10.21)
   기본값은 지금 화면과 같은 값이다. 현장 값은 화면이 `document.documentElement.style.setProperty` 로 덮는다.
   서체와 글자 크기 계단은 여기서 바꾸지 않는다 — 색, 면, 선, 구성만 바꾼다. ═══ */
:root{
  --fld-bg:var(--bg); --fld-card:var(--card); --fld-sink:var(--sink); --fld-pick:var(--pick);
  --fld-line:var(--line); --fld-line2:var(--line2);
  --fld-ink:var(--ink); --fld-ink2:var(--ink2); --fld-ink3:var(--ink3); --fld-title:var(--navy);
  --fld-btn:var(--navy); --fld-btn-ink:var(--card);
  --fld-accent:var(--gold); --fld-accent-ink:var(--navy); --fld-mark:var(--gold);
  --fld-side:linear-gradient(165deg,var(--navy-dk),var(--navy)); --fld-side-ink:var(--card);
  --fld-side-ink2:var(--dk-ink); --fld-side-line:var(--dk-line);
  --fld-hero:linear-gradient(165deg,var(--navy-dk),var(--navy)); --fld-hero-ink:var(--card);
  --fld-hero-ink2:var(--dk-ink); --fld-hero-mark:var(--gold); --fld-deco:none;
  --fld-start:var(--gold); --fld-start-ink:var(--navy);
  --fld-pad:#eceae3; --fld-keyfn:#dfe4ec; --fld-ring:rgba(0,27,63,.10);
  --fld-ov:rgba(10,18,35,.55); --fld-ov2:rgba(10,18,35,.35);
  --fld-phone-bg:var(--card); --fld-head:var(--navy); --fld-head-ink:#fff; --fld-edge:transparent;
}
/* ═══ 방명록 키오스크(kiosk-guestbook.html) — CLKGB Index.html 화면 그대로 (26.09.06 사용자 지시)
   원본 디자인·문구·구성을 그대로 옮기되 CG(조감도)만 뺐다. 접두어 gb- 로 다른 화면과 안 겹치게 짠다.
   원본 남색 사이드바(#0a2650→#001229)는 기존 토큰 --navy-dk·--navy 로 근사했다.
   ★ 26.09.06 원본 실측 치수로 다시 맞췄다 — 키오스크는 일반 화면 글자 계단(--fs1~7)과 다른 계단을 쓴다
   (`docs/status-archive.md` 897줄). 아래 크기값은 원본(`위파크-방명록/Index.html`)의 px 를 그대로 옮긴 것이라
   토큰에 억지로 맞추지 않는다 — 색만 토큰을 쓴다. ═══ */
.gb-frame{width:100%;height:100%;background:var(--fld-card);display:flex;flex-direction:column;overflow:hidden}
.gb-app{flex:1;display:flex;min-height:0}
.gb-side{width:330px;flex:none;background:var(--fld-side);color:var(--fld-side-ink);
  padding:44px 38px;display:flex;flex-direction:column}
.gb-side .gb-mark{font-size:var(--fs4);font-weight:var(--w3);text-transform:var(--fld-case,none);letter-spacing:var(--fld-ls,inherit)}
.gb-side .gb-tag{font-size:17px;color:var(--fld-mark);letter-spacing:.14em;margin-top:var(--s2)}
.gb-steps{margin-top:var(--s6)}
.gb-step{display:flex;align-items:center;gap:14px;padding:15px 0;color:var(--fld-side-ink2)}
.gb-step .gb-num{width:34px;height:34px;flex:none;border-radius:50%;border:1.5px solid var(--fld-side-line);
  display:grid;place-items:center;font-size:var(--fs2);font-weight:var(--w3)}
.gb-step span:last-child{font-size:17px}
.gb-step.on{color:var(--fld-side-ink)}
.gb-step.on .gb-num{background:var(--fld-accent);border-color:var(--fld-accent);color:var(--fld-accent-ink)}
.gb-step.cmpl .gb-num{border-color:var(--fld-accent);color:var(--fld-mark)}
.gb-side .gb-sidefoot{margin-top:auto;font-size:12.5px;color:var(--fld-side-ink2);line-height:1.6}
.gb-side .gb-sidefoot b{color:var(--fld-side-ink);font-weight:var(--w2)}

.gb-main{flex:1;background:var(--fld-bg);display:flex;flex-direction:column;min-width:0}
.gb-mhead{padding:12px 40px 6px}
.gb-mhead h2{margin:0;font-size:25px;color:var(--fld-title)}
.gb-mhead p{margin:3px 0 0;font-size:var(--fs3);color:var(--fld-ink2);font-weight:300}
.gb-fields{display:flex;gap:var(--s3);padding:0 40px 10px}
.gb-fc{flex:1;background:var(--fld-card);border:1.5px solid var(--fld-line);border-radius:12px;
  padding:13px 16px;cursor:pointer}
.gb-fc.on{border-color:var(--fld-title);box-shadow:0 0 0 3px var(--fld-ring)} /* rgba 는 var(--navy)=#001b3f 를 옅게 편 값 */
.gb-fc .gb-l{font-size:var(--fs2);color:var(--fld-ink3);font-weight:500}
.gb-fc .gb-v{font-size:34px;color:var(--fld-ink);margin-top:4px;min-height:44px;font-weight:500;
  display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.gb-fc .gb-v.ph{color:var(--fld-ink3);font-weight:var(--w1)}
.gb-notice{display:flex;align-items:center;gap:var(--s2);margin:0 var(--s5) var(--s2)}
.gb-notice .gb-ic{width:30px;height:30px;border-radius:50%;background:var(--fld-btn);color:var(--fld-mark);
  display:grid;place-items:center;flex:none;font-size:14px}
.gb-notice .gb-tx{font-size:20px;color:var(--fld-ink2)}
.gb-notice .gb-tx b{color:var(--fld-title);font-weight:var(--w3)}
.gb-pad{flex:1;margin:0 22px 6px;background:var(--fld-pad);border:1px solid var(--fld-line);
  border-radius:14px;padding:10px;display:flex;flex-direction:column;min-height:0} /* #eceae3 는 원본 자판판 색 — 가까운 토큰이 없다 */
.gb-kbswitch{display:flex;gap:var(--s2);justify-content:flex-end;margin-bottom:var(--s2)}
.gb-kbswitch button{font-family:inherit;font-size:14px;font-weight:var(--w3);padding:var(--s1) var(--s3);
  border-radius:var(--r3);border:1.5px solid var(--fld-line2);background:var(--fld-card);color:var(--fld-ink2);cursor:pointer}
.gb-kbswitch button.on{background:var(--fld-btn);border-color:var(--fld-title);color:var(--fld-btn-ink)}
.gb-key{flex:1;max-width:120px;height:58px;background:var(--fld-card);border:1px solid var(--fld-line2);border-radius:10px;
  display:grid;place-items:center;font-size:22px;color:var(--fld-ink)}
.gb-key.gold{background:var(--fld-accent);border-color:var(--fld-accent);color:var(--fld-accent-ink);font-weight:var(--w3)}
/* 자판 — 자음 5열 · 모음 4열 격자로 다시 그렸다(원본은 키 일곱 개 두 줄이 아니다) */
.gb-kbcols{display:flex;gap:20px;flex:1;min-height:0}
.gb-kbcol{flex:1;display:flex;flex-direction:column;min-width:0}
.gb-kbcol.c1{flex:5}.gb-kbcol.c2{flex:4} /* 원본 .kbcol c1:5 · c2:4 — 자음키와 모음키 폭을 같게 만드는 비율 */
.gb-kblabel{font-size:15px;font-weight:var(--w3);color:var(--fld-ink2);margin-bottom:var(--s2)}
.gb-vhint{font-size:15px;font-weight:400;color:var(--fld-ink3);margin-left:var(--s2)}
.gb-kbgrid{display:grid;gap:9px;flex:1}
.gb-kbgrid.cho{grid-template-columns:repeat(5,1fr)}
.gb-kbgrid.jung{grid-template-columns:repeat(4,1fr)}
.gb-kbgrid .gb-key{height:68px;font-size:26px;max-width:none}
.gb-key.ssang{background:var(--fld-sink)}
/* 숫자판은 폭 560px 를 채운다 — 세로 줄 상자 안에서 폭을 안 주면 글자 폭으로 줄어 키가 좁아졌다(제주 Index.html .numgrid 와 같다, 26.10.29 사용자 '왜 저렇게 협소해') */
.gb-numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:560px;margin:var(--s3) auto 0}
.gb-numgrid .gb-key{height:84px;font-size:26px;max-width:none}
.gb-numgrid .gb-key.fn,.gb-numgrid .gb-key.gold{font-size:17px}
.gb-key.fn{background:var(--fld-keyfn);font-size:16px;color:var(--fld-title);font-weight:var(--w2)} /* #dfe4ec 는 원본 기능키 색 — 가까운 토큰이 없다 */
.gb-key.blank{visibility:hidden}
.gb-key.sp{flex:5;max-width:none}
.gb-key.wide{flex:2;max-width:none}
.gb-namebottom{display:flex;gap:8px;margin-top:12px}
.gb-namebottom .gb-key{height:60px;max-width:none}
.gb-krow{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.gb-krow:last-child{margin-bottom:0}
/* 주소 — 대분류 카드 + 읍면동 격자 7열, 하위 없는 대분류는 맨 아래 「그 외」 한 장에 4열 */
.gb-addr{display:flex;flex-direction:column;gap:10px}
.gb-grp{background:var(--fld-card);border:1px solid var(--fld-line);border-radius:14px;display:flex;overflow:hidden}
.gb-grp .gb-gt{width:92px;flex:none;display:grid;place-items:center;font-size:17px;font-weight:var(--w3);
  color:var(--fld-title);text-align:center;padding:10px 4px;background:var(--fld-sink)}
.gb-grp .gb-row{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:7px;padding:10px}
.gb-dbtn{background:var(--fld-card);border:1.5px solid var(--fld-line2);border-radius:10px;padding:10px 4px;
  font-size:17px;text-align:center;color:var(--fld-ink)}
.gb-dbtn.sel{background:var(--fld-accent);border-color:var(--fld-accent);color:var(--fld-accent-ink);font-weight:var(--w3)}
.gb-grp.notitle .gb-gt{display:none}
.gb-grp.leafrow .gb-row{grid-template-columns:repeat(4,1fr)}
.gb-grp.leafrow .gb-dbtn{padding:10px}
.gb-padhint{text-align:center;font-size:19px;line-height:1.5;color:var(--fld-ink2);margin:4px 0 12px}
.gb-padhint b{color:var(--fld-title);font-weight:var(--w3)}
.gb-mfoot{padding:10px 40px 16px;display:flex;align-items:center;gap:var(--s3)}
.gb-btn{font-family:inherit;font-size:18px;border-radius:12px;padding:15px 30px;
  cursor:pointer;border:1.5px solid var(--fld-line);background:var(--fld-card);color:var(--fld-ink2)}
.gb-btn.primary{background:var(--fld-accent);border-color:var(--fld-accent);color:var(--fld-accent-ink);font-weight:var(--w3);margin-left:auto;padding:15px 48px}
.gb-btn.primary:disabled{opacity:.35;cursor:default}
.gb-foothint{font-size:var(--fs4);color:var(--fld-ink2)}

.gb-cards{display:flex;gap:14px;padding:12px 40px 0}
.gb-card{flex:1;background:var(--fld-card);border:1px solid var(--fld-line);border-radius:var(--r2);
  padding:14px 16px;display:flex;flex-direction:column}
.gb-card .gb-no{display:flex;align-items:center;gap:var(--s2);color:var(--fld-title);font-weight:var(--w3);
  font-size:15px;margin-bottom:var(--s2)}
.gb-card .gb-no i{width:22px;height:22px;border-radius:50%;background:var(--fld-btn);color:var(--fld-btn-ink);
  font-style:normal;font-size:12px;display:grid;place-items:center}
.gb-badge{margin-left:auto;font-size:11px;font-weight:var(--w3);padding:var(--s1) var(--s2);border-radius:var(--r3)}
.gb-badge.req{background:var(--fld-btn);color:var(--fld-btn-ink)}
.gb-badge.opt{background:var(--fld-sink);color:var(--fld-ink3);border:1px solid var(--fld-line)}
.gb-card table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.gb-card th{border:1px solid var(--fld-line);padding:var(--s1) var(--s2);text-align:center;background:var(--fld-sink);color:var(--fld-ink3);font-weight:var(--w2);font-size:11.5px}
.gb-card td{border:1px solid var(--fld-line);padding:var(--s1) var(--s2);text-align:center;color:var(--fld-ink2)}
.gb-q{font-size:13.5px;color:var(--fld-ink);margin:var(--s2) 0}
.gb-q span{color:var(--fld-ink3);font-weight:var(--w1)}
.gb-optrow{display:flex;gap:10px;margin-top:auto}
.gb-opt2{flex:1;text-align:center;padding:13px;border-radius:var(--r1);font-size:15.5px;font-weight:var(--w3);cursor:pointer}
.gb-opt2.y,.gb-opt2.n{background:var(--fld-card);border:1.5px solid var(--fld-line2);color:var(--fld-ink2)}
.gb-opt2.y.on{background:var(--fld-btn);border-color:var(--fld-btn);color:var(--fld-btn-ink)}
.gb-opt2.n.on{background:var(--fld-ink2);border-color:var(--fld-ink2);color:var(--fld-card)}
/* 동의 세 장(공용규칙/개인정보동의지침.md, 제주 공통_151 시안 C 를 옮김) — 세 장을 떨어진 흰 판으로 쌓는다.
   왼쪽 큰 번호(문구가 '②의 분양사업'처럼 번호로 가리킨다), 가운데 이름표와 내용, 오른쪽 위아래로 쌓은 단추.
   목적과 기간은 굵게(지침 4장). 1280×800 틀에서 서명 칸 180px 이 들어가게 여백을 맞췄다 */
.gb-mhead.c3{display:flex;align-items:baseline;gap:16px;padding-top:8px;padding-bottom:4px}
.gb-mhead.c3 p{margin-top:0}
.gb-cards.c3{flex-direction:column;gap:6px;padding-top:6px}
.gb-cards.c3 .gb-card{position:relative;display:grid;grid-template-columns:1fr 150px;column-gap:18px;align-items:center;padding:6px 18px 6px 64px}
.gb-cards.c3 .gb-no{grid-column:1;grid-row:1;margin:0 0 3px}
.gb-cards.c3 .gb-no .gb-badge{margin-left:0;flex:none;display:block;width:52px;height:auto;min-height:0;padding:var(--s1) 0;text-align:center;line-height:1.2}
.gb-cards.c3 .gb-no i{position:absolute;left:18px;top:6px;width:auto;height:auto;background:none;border-radius:0;
  color:var(--fld-mark);font-weight:var(--w2);font-size:34px;line-height:1}
.gb-cards.c3 .gb-ttl b{font-size:16px;color:var(--fld-title)}
.gb-cards.c3 .gb-ttl span{margin-left:var(--s2);font-size:12.5px;font-weight:var(--w1);color:var(--fld-ink3)}
.gb-cards.c3 table{grid-column:1;grid-row:2;table-layout:auto}
.gb-cards.c3 tbody{display:grid;grid-template-columns:40px 1fr;column-gap:10px}
.gb-cards.c3 tr{display:contents}
.gb-cards.c3 th{padding:2px 0;border:none;background:none;text-align:left;vertical-align:top;color:var(--fld-ink3);font-weight:var(--w2);font-size:11.5px}
.gb-cards.c3 td{padding:2px 0;border:none;background:none;text-align:left;vertical-align:top;line-height:1.4;white-space:pre-line;color:var(--fld-ink)}
.gb-cards.c3 td.b{font-weight:var(--w3)}
.gb-cards.c3 tr:last-child td{color:var(--fld-ink2)}
/* 목적, 항목, 기간, 거부 사이의 가는 줄. ③은 질문과 거부 사이 */
.gb-cards.c3 tr+tr th,.gb-cards.c3 tr+tr td,.gb-cards.c3 .gb-card.ad th,.gb-cards.c3 .gb-card.ad td{border-top:1px solid var(--fld-line)}
/* ③ 질문은 ①② 내용 시작점(이름표 40px + 간격 10px)에서 시작한다 */
.gb-cards.c3 .gb-q{grid-column:1;grid-row:2;margin:0 0 4px;padding-left:50px;white-space:pre-line}
.gb-cards.c3 .gb-card.ad table{grid-row:3}
.gb-cards.c3 .gb-optrow{grid-column:2;grid-row:1 / span 3;margin:0;align-self:center;flex-direction:column;gap:6px}
.gb-cards.c3 .gb-opt2{padding:9px 6px;word-break:keep-all}
/* 잠김 안내는 ③ 제목 줄 오른쪽 빈 곳에 둔다. 줄을 더하면 서명 칸을 밀어낸다 */
.gb-cards.c3 .gb-cnote{grid-column:1;grid-row:1;justify-self:end;align-self:center;font-size:12px;color:var(--fld-ink3)}
.gb-cards.c3 .gb-cnote[hidden]{display:none}
.gb-card.locked .gb-optrow{opacity:.45;pointer-events:none}
.gb-sig.c3{margin-top:6px;padding:8px 16px}
.gb-sig.c3 .gb-st{margin-bottom:4px}

.gb-sig{margin:14px 40px 0;background:var(--fld-card);border:1px solid var(--fld-line);border-radius:var(--r2);
  padding:12px 16px;display:flex;flex-direction:column;flex:1;min-height:0}
.gb-sig .gb-st{display:flex;align-items:center;gap:var(--s2)}
.gb-sig .gb-st b{color:var(--fld-title);font-size:15px}
.gb-sig .gb-st span{font-size:14px;color:var(--fld-ink2)}
.gb-sig .gb-clr{margin-left:auto;font-size:13px;color:var(--fld-ink2);background:var(--fld-sink);
  border:1px solid var(--fld-line);border-radius:var(--r1);padding:var(--s1) var(--s3);cursor:pointer}
.gb-sigbox{border:1.5px dashed var(--fld-line2);border-radius:var(--r1);background:var(--fld-pick);flex:1;
  min-height:180px;display:grid;place-items:center;color:var(--fld-ink3);font-size:15px;margin-top:var(--s2)}

.gb-welcome{width:100%;height:100%;background:var(--fld-deco),var(--fld-hero);
  color:var(--fld-hero-ink);display:flex;flex-direction:column;position:relative}
.gb-welcome .gb-layer{flex:1;display:flex;flex-direction:column;padding:52px 68px}
.gb-welcome .gb-mark{font-size:var(--fs5);font-weight:var(--w3);text-transform:var(--fld-case,none);letter-spacing:var(--fld-ls,inherit)}
.gb-welcome .gb-center{flex:1;display:flex;flex-direction:column;justify-content:center}
.gb-welcome .gb-tag{font-size:26px;color:var(--fld-hero-mark);letter-spacing:.14em;margin-bottom:var(--s3)}
.gb-welcome .gb-title{font-size:56px;font-weight:var(--w1);line-height:var(--lh2)}
.gb-welcome .gb-title b{font-weight:var(--w3)}
.gb-welcome .gb-sub{font-size:20px;color:var(--fld-hero-ink2);margin-top:var(--s4);line-height:var(--lh3);font-weight:var(--w1)}
.gb-startwrap{display:flex;justify-content:center}
.gb-startbtn{display:inline-flex;align-items:center;gap:16px;min-width:560px;justify-content:center;
  color:var(--fld-start-ink);font-size:22px;font-weight:var(--w3);padding:var(--s4) var(--s6);
  background:var(--fld-start);border-radius:var(--r3)}
.gb-welcome .gb-wfoot{margin-top:26px;font-size:13px;color:var(--fld-hero-ink2);text-align:center}
.gb-welcome .gb-wfoot b{color:var(--fld-hero-ink);font-weight:var(--w2)}

.gb-done{width:100%;height:100%;background:var(--fld-bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.gb-done .gb-chk{width:96px;height:96px;border-radius:50%;background:var(--fld-btn);color:var(--fld-mark);
  font-size:48px;display:grid;place-items:center}
.gb-done h2{color:var(--fld-title);font-size:38px;margin:22px 0 10px}
.gb-done p{color:var(--fld-ink2);font-size:19px;font-weight:var(--w1)}
.gb-smsline{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  background:var(--fld-card);border:2px solid var(--fld-accent);border-radius:var(--r3);padding:var(--s2) var(--s4)}
.gb-smsline .gb-ic{width:22px;height:22px;border-radius:50%;background:var(--fld-btn);color:var(--fld-mark);
  display:grid;place-items:center;font-size:var(--fs2)}
.gb-smsline .gb-tx{font-size:19px;color:var(--fld-ink2)}
.gb-smsline .gb-tx b{color:var(--fld-title);font-weight:var(--w3)}

.gb-ov{width:100%;height:100%;background:var(--fld-ov);display:flex;align-items:center;justify-content:center}
.gb-ovcard{background:var(--fld-card);border-radius:18px;padding:34px 36px 28px;text-align:center;
  width:min(520px,100%);box-shadow:var(--lift)}
.gb-ovcard.ho{width:min(980px,100%);padding:34px 40px 30px} /* 원본 #hoReg .hocard */
.gb-ovcard .gb-t{font-size:23px;font-weight:var(--w3);color:var(--fld-title)}
.gb-ovcard .gb-s{font-size:15px;color:var(--fld-ink2);line-height:var(--lh3);margin-top:var(--s2)}
.gb-ovcard input{width:100%;margin-top:var(--s4);padding:var(--s3);font-family:'Consolas',monospace;
  font-size:30px;text-align:center;letter-spacing:.16em;border:1.5px solid var(--fld-line);border-radius:var(--r1);color:var(--fld-title)}
.gb-ovbtn{width:100%;margin-top:14px;padding:16px;font-family:inherit;font-size:18px;
  font-weight:var(--w3);border:none;border-radius:var(--r1);cursor:pointer}
.gb-ovbtn.yes{background:var(--fld-btn);color:var(--fld-btn-ink)}
.gb-ovbtn.no{margin-top:var(--s2);background:none;border:1.5px solid var(--fld-line);color:var(--fld-ink2)}
.gb-ovhead{font-size:13px;color:var(--fld-ink3);margin-bottom:var(--s2)}
.gb-who{font-size:96px;font-weight:var(--w3);color:var(--fld-title);margin:34px 0 0;line-height:1.2}
.gb-ovcard.ho .gb-s b{display:block;font-size:34px;color:var(--fld-ink);margin-bottom:16px}
.gb-ovcard.ho .gb-ovbtn.yes{width:auto;min-width:460px;font-size:26px;padding:21px 56px;margin-top:34px}
/* 인포 대리입력 2단계 — 안내 문장과 칸 사이를 띄우고 라벨과 값을 가운데로 맞춘다 */
.gb-ovcard .gb-fields{margin-top:var(--s4);padding:0}
.gb-ovcard .gb-fc,.gb-ovcard .gb-fc .gb-v{text-align:center;justify-content:center}
.gb-ovcard.ho .gb-ovbtn.no{width:auto;font-size:15px;padding:12px 20px;border-radius:999px;margin-top:14px}

.gb-idlepop{width:100%;height:100%;background:var(--fld-ov2);display:flex;align-items:center;justify-content:center}
.gb-ipcard{background:var(--fld-card);border-radius:22px;padding:36px 46px;text-align:center;box-shadow:var(--lift)}
.gb-ipcard .gb-msg{font-size:24px;font-weight:var(--w3);color:var(--fld-title)}
.gb-ipcard .gb-sub{font-size:16px;color:var(--fld-ink2);margin-top:var(--s2)}
.gb-ipcard button{margin-top:24px;font-family:inherit;font-size:19px;font-weight:var(--w3);
  padding:15px 38px;border:none;border-radius:var(--r2);background:var(--fld-btn);color:var(--fld-btn-ink);cursor:pointer}

.gb-night{width:100%;height:100%;background:var(--ink);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3)}
.gb-night .gb-t1{color:var(--dk-ink);font-size:34px;font-weight:var(--w3)}
.gb-night .gb-t2{color:var(--ink3);font-size:20px;font-weight:var(--w2)}
.gb-night button{margin-top:var(--s4);font-family:inherit;background:var(--dk-card);color:var(--dk-ink);
  border:1.5px solid var(--dk-line);border-radius:14px;padding:16px 46px;font-size:19px;
  font-weight:var(--w3);cursor:pointer}

.gb-attend{width:280px;background:var(--fld-card);border-radius:16px;padding:20px 20px 18px;
  text-align:center;box-shadow:var(--lift)}
.gb-attend .gb-t{font-size:13px;font-weight:var(--w3);color:var(--fld-title);margin-bottom:var(--s2)}
/* 출근 QR — 흰 바탕이어야 폰이 읽는다(26.10.22 '제주 참조', 그림은 vendor/qrcodejs 가 150px 로 그린다) */
.gb-attend .gb-qr{width:160px;height:160px;margin:0 auto;padding:5px;border:1px solid var(--fld-line);border-radius:var(--r1);
  background:var(--card);display:grid;place-items:center}
.gb-attend .gb-code{font-family:Montserrat,sans-serif;font-size:30px;font-weight:var(--w3);color:var(--fld-title);
  letter-spacing:.08em;margin-top:var(--s3)}
.gb-attend .gb-timer{font-size:12px;color:var(--fld-ink2);margin-top:var(--s1)}
.gb-attend .gb-range{font-size:11.5px;color:var(--fld-ink3);margin-top:var(--s1);padding-top:var(--s1);
  border-top:1px solid var(--fld-line)}
.gb-atfeed{display:flex;flex-direction:column;gap:var(--s2);width:280px}
.gb-atfi{display:flex;align-items:center;gap:var(--s2);background:var(--fld-card);border-radius:var(--r1);
  padding:var(--s2) var(--s3);box-shadow:var(--lift)}
.gb-atfi .gb-ck{width:26px;height:26px;border-radius:50%;background:var(--fld-sink);color:var(--fld-title);
  font-weight:var(--w3);font-size:14px;display:grid;place-items:center;flex:none}
.gb-atfi .gb-nm{font-size:16px;font-weight:var(--w3);color:var(--fld-title);flex:1}
.gb-atfi .gb-tm{font-size:13px;color:var(--fld-ink3)}
.gb-attslot{position:absolute;right:34px;top:34px;z-index:2}   /* 출근 QR — 제주 키오스크와 같은 오른쪽 위 */

/* ── 상담사 폰(post/agent.html) 현장 화면 색 — body.fldskin 일 때만. 같은 .phone 을 쓰는 다른 폰 화면은 안 바뀐다 ── */
body.fldskin{background:var(--fld-phone-bg)}
.fldskin .hd{background:var(--fld-head);color:var(--fld-head-ink)}
.fldskin .hd .phase{color:var(--fld-mark)}.fldskin .ph-hd{background:var(--fld-head)}
.fldskin .surface{background:var(--fld-card);border-color:var(--fld-line)}
.fldskin .cust{background:var(--fld-card);border-color:var(--fld-line);box-shadow:inset 3px 0 0 var(--fld-edge)}
.fldskin .cust .nm2{color:var(--fld-title)}
.fldskin .cust .ph2{color:var(--fld-ink)}
.fldskin .glabel{color:var(--fld-ink3)}
.fldskin .glabel .n{color:var(--fld-ink2)}
.fldskin .segtab button{background:var(--fld-card);border-color:var(--fld-line);color:var(--fld-ink3)}
.fldskin .segtab button.on{background:var(--fld-btn);border-color:var(--fld-btn);color:var(--fld-btn-ink)}
.fldskin .bigbtn{background:var(--fld-btn);color:var(--fld-btn-ink)}
.fldskin .opt.on{background:var(--fld-pick);border-color:var(--fld-btn);box-shadow:inset 0 0 0 1px var(--fld-accent)}

/* ── 문자 미리보기 — 손님 폰에 뜨는 모습 (26.09.08 · CLKGB 실물 캡처 기준) ──
   ★ 실제 갤럭시 화면이다 — 393×640 · 글자 16px. 줄이면 줄바꿈이 실물과 달라진다.
   ★ 통신사가 첫 줄에 `[Web발신]` 을 붙인다. 빼고 보면 글이 짧아 보인다.
   ★ 제목은 말풍선 안에 안 뜬다 — 문자 목록과 상세보기에만 뜬다.
   ★ 긴 글을 「모두 보기」로 접지 않는다 — 여기는 손님 화면 흉내가 아니라 **글 전체를 보는 자리**다. */
.svwrap{display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap}
.svwrap>.svl{flex:1 1 480px;min-width:0}
/* 폰은 한 대뿐이라 목록을 내려도 따라온다 — `.ph` 가 위에 붙어 있으므로 그만큼 내려 붙인다 */
.svwrap>.svr{flex:0 0 393px;position:sticky;top:var(--s7);align-self:flex-start}
.svlab{margin:0 0 var(--s2);font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3)}
/* 문자 화면의 한 줄 입력(제목 · 틀 이름) — 문구 칸과 폭을 맞춘다 */
.svwrap .memo>input{width:100%;border:1px solid var(--line);border-radius:var(--r1);
  padding:var(--s2) var(--s3);font-family:inherit;font-size:var(--fs3);background:var(--sink);
  margin-bottom:var(--s2)}
.svwrap .memo>input:focus{outline:none;background:var(--card);border-color:var(--navy);box-shadow:var(--ring)}
.svlab.gap{margin-top:var(--s4)}
.svlist{width:393px;border:1px solid var(--ph-line);border-radius:14px;background:var(--card);
  padding:14px 16px;display:flex;align-items:flex-start;gap:14px}
.svlist .sv-ava{flex:0 0 46px;width:46px;height:46px;border-radius:var(--r3);background:var(--ph-ava);
  display:flex;align-items:center;justify-content:center}
.svlist .sv-ava svg{width:24px;height:24px;fill:var(--ph-ava-ink)}
.svlist .sv-col{min-width:0;flex:1 1 auto}
.svlist .sv-ln{display:flex;align-items:baseline;gap:var(--s2)}
.svlist .sv-from{font-size:var(--fs4);font-weight:var(--w3);color:var(--ph-ink);letter-spacing:var(--ls2)}
.svlist .sv-at{margin-left:auto;font-size:var(--fs2);color:var(--ph-meta);white-space:nowrap}
.svlist .sv-prev{margin-top:4px;font-size:var(--fs3);color:var(--ph-sub);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smsview{width:393px;height:640px;border:1px solid var(--ph-line);border-radius:26px;
  background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.smsview .sv-top{flex:0 0 44px;background:var(--ph-head);border-bottom:1px solid var(--ph-line);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:var(--w3);
  color:var(--ph-head-ink)}
.smsview .sv-body{flex:1 1 auto;overflow:auto;padding:16px 14px}
.smsview .sv-day{text-align:center;font-size:var(--fs2);color:var(--ph-dim);margin-bottom:14px}
.smsview .sv-bubble{width:330px;max-width:330px;white-space:pre-line;word-break:break-all;
  background:var(--ph-bubble);color:var(--ph-ink);font-size:16px;line-height:1.5;
  border-radius:18px;padding:13px 15px}
.smsview .sv-meta{margin-top:6px;font-size:12px;color:var(--ph-meta)}
/* 왼쪽이 고르는 목록일 때 — 카드 사이를 띄우고 고른 것을 짚는다 */
.svwrap>.svl>.card{cursor:pointer}
.svwrap>.svl>.card+.card{margin-top:var(--s3)}
.card.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
/* 폰 출근 — 키오스크 QR 을 비추는 카메라 칸(attend.js 찍기칸) */
.atvid{display:block;width:100%;max-width:320px;aspect-ratio:1;object-fit:cover;margin:0 0 var(--s2);border-radius:var(--r2);background:var(--ink)}

/* 상담사 폰 — 제주식 상담카드 화면(26.10.22) */
.glabel.big{font-size:var(--fs4);color:var(--ink)}
.fldskin .glabel.big{color:var(--fld-ink)}
.listtop{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:var(--s3) 0 var(--s2)}
.listtop .cnt{font-size:var(--fs2);font-weight:var(--w3);color:var(--ink3)}
.listtop .rf{flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r2);padding:var(--s2) var(--s3);
  font-size:var(--fs2);font-family:inherit;color:var(--ink);cursor:pointer}
.fldskin .listtop .cnt{color:var(--fld-ink3)}
.cust .r2.r2w{display:block;overflow:hidden}
.r2in{display:flex;flex-wrap:wrap;margin-left:calc(-1 * var(--s4))}
.r2i{position:relative;padding-left:var(--s4)}
.r2i::before{content:'·';position:absolute;left:var(--s1)}
.prevcards{margin-bottom:var(--s3)}
.prevcards summary{font-size:var(--fs2);font-weight:var(--w3);color:var(--navy);cursor:pointer;margin-bottom:var(--s2)}
.prevcards .opt{display:block;width:100%;text-align:left;margin-bottom:var(--s1)}
.fld .dpick{position:relative;display:inline-block}
.fld .dpick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fld .dpick input:disabled{cursor:default}

/* 인포 고객 배정 — 제주 Info.html 에 맞춘 조각(26.10.22). 숫자 띠, 인원 고르개, 지명 전환, 배정 뒤 창, 최근 배정 */
.stat .it.click{cursor:pointer}
.stat .it.click:hover .k{color:var(--ink)}
.people .pmore{border:1px solid var(--line);background:var(--card);border-radius:var(--r2);padding:var(--s1) var(--s2);font-size:var(--fs2);color:var(--ink)}
.people .pmore.on{background:var(--navy);border-color:var(--navy);color:var(--card)}
.psort + .psort{margin-left:var(--s3)}
.askbox .npb{display:flex;gap:var(--s3);margin-top:var(--s3)}
.askbox .npb .np{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s4) var(--s3)}
.askbox .npb .np span,.askbox .npb .np small{font-size:var(--fs2)}
.recent{padding:var(--s3)}
.recent .rt{font-size:var(--fs3);font-weight:var(--w3);color:var(--ink2);margin-bottom:var(--s2)}
.recent .rl{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--hair)}
.recent .rn{font-weight:var(--w3);color:var(--ink)}
.recent .ri{flex:1;min-width:0}
.recent .rs{font-size:var(--fs2);color:var(--ink3)}
/* 인포 지명 칸 — 꼬리표는 한 줄, 상담사 칩은 줄 바꿈으로 늘어놓음(26.10.22, 묶음 꾸밈이 빠져 꼬리표와 칩이 겹치던 것) */
.pickgrid{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-start}
.pickgrid .srchres{flex-basis:100%}

/* 출근 월 개요 표(26.10.23 ⑥) — 줄 = 본부·팀, 칸 = 그달 날짜. 이름 칸 160 + 31일 × 30 */
.ovwrap{padding:0 var(--s4) var(--s4);overflow-x:auto}
.ovmx{border-collapse:collapse;font-size:var(--fs2);font-variant-numeric:tabular-nums}
.ovmx th,.ovmx td{border:1px solid var(--hair);padding:var(--s1) 0;width:30px;text-align:center;font-weight:var(--w2)}
.ovmx th.team{width:160px;text-align:left;padding:var(--s1) var(--s2);font-weight:var(--w3);white-space:nowrap;cursor:pointer}
.ovmx .sun{color:var(--err)} .ovmx .sat{color:var(--calm)}
.ovmx td.fu{color:var(--line2)}
.ovmx tr.subt th,.ovmx tr.subt td{background:var(--sink);font-weight:var(--w3)}
.ovmx tr.mem th{font-weight:var(--w2);color:var(--ink2);padding-left:var(--s5);cursor:default}
.ovmx tr.mem td{color:var(--done)}
.ovmx tr.tot th,.ovmx tr.tot td{background:var(--pick);font-weight:var(--w3)}

/* ── TM 전화 수신 띠(tm/call.html, 26.10.28 목업 승인) ── */
.rg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s3)}
.rg[hidden]{display:none}
.rc{background:var(--card);border:1px solid var(--line);border-left:var(--s1) solid var(--red);border-radius:var(--r2);
  padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.rc .st{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--fs2);color:var(--ink3)}
.rc .st b{color:var(--ink);font-size:var(--fs3);font-weight:var(--w3)}
.rc .st .sp{flex:1}
.rc .no{font-size:var(--fs5);font-weight:var(--w3);letter-spacing:var(--ls2);font-variant-numeric:tabular-nums;line-height:var(--lh2)}
.rc .who{font-size:var(--fs3)}
.rc .who b{font-weight:var(--w3)}
.rc .who span{color:var(--ink2)}
.rc .hint{margin:0;font-size:var(--fs2);color:var(--ink3)}
.rc .act{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:auto}
.rc.done{background:var(--calm-bg);border-left-color:var(--line2)}
.rc.done .st b,.rc.done .no,.rc.done .who span{color:var(--calm)}
.relay{display:inline-flex;align-items:center;padding:var(--s1) var(--s2);border-radius:var(--r1);
  font-size:var(--fs2);font-weight:var(--w2);white-space:nowrap}
.relay.on{background:var(--done-bg);color:var(--done)}
.relay.off{background:var(--warn-bg);color:var(--warn-ink)}