/* =====================================================================
 * NOW WORK v1.7.3 UI 시안 — 테마 토큰 + 왼쪽 메뉴 + 공통 부품 상태 (KH 10-30)
 * app.css·tools.css 다음에 읽어 같은 이름을 덮어쓴다 (기존 파일은 거의 안 고침 → 합치기 쉬움).
 * 색 기준표: 현재\시안_v1.7.3_메뉴테마.md (글자 대비 WCAG AA 4.5:1 이상, 라이트·다크 모두 계산해 확인)
 * ===================================================================== */

/* ---------- 1. 색 토큰: 라이트 ---------- */
:root{
  --bg:#f3f5f7;            /* 화면 바탕 */
  --surface:#ffffff;       /* 카드·목록·입력칸 */
  --surface2:#eef2f4;      /* 한 단계 낮은 면: 마우스 올림·묶음 머리·보조 칩 */
  --line:#dbe1e6;          /* 테두리 */
  --line2:#e9edf0;         /* 목록 안 구분선 */
  --text:#121b23;          /* 본문 17.4:1 */
  --text2:#434f5a;         /* 보조 8.4:1 */
  --text3:#5f6b76;         /* 흐린 글자 5.5:1 (예전 #8a949e 3.1:1 → AA 미달 고침) */
  --pri:#15736a;           /* 강조(초록 계열 유지) 흰 바탕 5.7:1 */
  --pri-strong:#0d5c54;    /* 강조 글자·눌림 7.9:1 */
  --pri-soft:#e1f1ee;      /* 선택 바탕 */
  --on-pri:#ffffff;        /* 강조 위 글자 5.7:1 */
  --red:#c42b2b;--red-soft:#fdeceb;--on-red:#ffffff;
  --orange:#ad5208;--orange-soft:#fdf0e2;--on-orange:#ffffff;   /* 주황 글자 5.3:1 (예전 #c4610a 4.2:1) */
  --sel:rgba(21,115,106,.16);   /* 입력칸 초점 테 */
  --focus:#15736a;
  --side-bg:#ffffff;--side-hover:#eef2f4;--side-on:#e1f1ee;--side-on-fg:#0d5c54;
  --elev:0 1px 2px rgba(16,24,32,.05);
  --scrim:rgba(10,15,20,.45);--shadow:0 12px 40px rgba(20,30,40,.18);
}
/* ---------- 2. 색 토큰: 다크 (기기 설정 다크 · 직접 다크) ---------- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1316;--surface:#151d22;--surface2:#1c262c;--line:#2b373f;--line2:#212c32;
  --text:#e8eef2;--text2:#b4c0c9;--text3:#919da7;
  --pri:#52c7b8;--pri-strong:#7fdccf;--pri-soft:#143833;--on-pri:#04201c;
  --red:#ff8080;--red-soft:#3a1d1f;--on-red:#2a0b0b;
  --orange:#f3a95e;--orange-soft:#38291a;--on-orange:#2a1704;
  --sel:rgba(82,199,184,.22);--focus:#7fdccf;
  --side-bg:#11181c;--side-hover:#1c262c;--side-on:#143833;--side-on-fg:#7fdccf;
  --elev:none;
  --scrim:rgba(0,0,0,.6);--shadow:0 12px 40px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#0d1316;--surface:#151d22;--surface2:#1c262c;--line:#2b373f;--line2:#212c32;
  --text:#e8eef2;--text2:#b4c0c9;--text3:#919da7;
  --pri:#52c7b8;--pri-strong:#7fdccf;--pri-soft:#143833;--on-pri:#04201c;
  --red:#ff8080;--red-soft:#3a1d1f;--on-red:#2a0b0b;
  --orange:#f3a95e;--orange-soft:#38291a;--on-orange:#2a1704;
  --sel:rgba(82,199,184,.22);--focus:#7fdccf;
  --side-bg:#11181c;--side-hover:#1c262c;--side-on:#143833;--side-on-fg:#7fdccf;
  --elev:none;
  --scrim:rgba(0,0,0,.6);--shadow:0 12px 40px rgba(0,0,0,.6);
}

/* ---------- 3. PC 왼쪽 메뉴: [아이콘 | 이름 | 배지] 3열, 구역 제목, 아래 고정 ---------- */
.pwrap{grid-template-columns:232px minmax(0,1fr)}
.pwrap.focus{grid-template-columns:minmax(0,1fr)}
.side{background:var(--side-bg);padding:0;gap:0;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.side .brand{flex:none;display:flex;align-items:center;gap:10px;height:60px;margin:0;padding:0 20px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--text);border-bottom:1px solid var(--line2)}
.side .brand .logo{margin:0;width:30px;height:30px;border-radius:8px;flex:none}
.side .snav{flex:1;min-height:0;overflow-y:auto;padding:6px 10px 12px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.side .snav::-webkit-scrollbar{width:6px}.side .snav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.side .grp{flex:none;margin:10px 10px 4px;padding-top:12px;border-top:1px solid var(--line2);font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.06em;color:var(--text3)}
.side .grp:first-child{margin-top:6px;padding-top:0;border-top:0}
.side .snav button{position:relative;flex:none;display:flex;align-items:center;gap:12px;height:40px;min-height:40px;padding:0 10px;border-radius:8px;font-size:14.5px;line-height:1;font-weight:600;color:var(--text2);text-align:left;width:100%}
.side .snav button svg{width:20px;height:20px;flex:none;color:var(--text3)}
.side .snav button .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .snav button:hover{background:var(--side-hover);color:var(--text)}
.side .snav button:hover svg{color:var(--text2)}
.side .snav .on,.side .snav .on:hover{background:var(--side-on);color:var(--side-on-fg);font-weight:700}
.side .snav .on svg,.side .snav .on:hover svg{color:var(--side-on-fg)}
.side .snav .on:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--pri)}
/* 배지: 모두 오른쪽 끝, 같은 높이·모양 (지연·▲·● 는 빨강, 접수·대기는 주황) */
.side .cnt,.side .snav .cnt{flex:none;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:22px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap;background:var(--red-soft);color:var(--red)}
.side .cnt.o{background:var(--orange-soft);color:var(--orange)}
/* 맨 아래 고정: 사용자 · 밝기 · 로그아웃 · 버전 */
.side .sfoot{flex:none;border-top:1px solid var(--line);padding:12px 10px calc(10px + env(safe-area-inset-bottom));background:var(--side-bg)}
.side .me{display:flex;align-items:center;gap:10px;padding:0 10px 10px;margin:0;border:0;font-size:12px;color:var(--text3)}
.side .me .av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--pri-soft);color:var(--side-on-fg);font-weight:800;font-size:14px}
.side .me .mi{min-width:0;display:flex;flex-direction:column;gap:2px}
.side .me .mi b{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me .mi span{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .sact{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.side .sact button{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;min-height:36px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap}
.side .sact button svg{width:16px;height:16px;flex:none}
.side .sact button:hover{background:var(--side-hover);color:var(--text)}
.side .sact .out:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.side .ver{padding:8px 10px 0;font-size:11px;color:var(--text3)}

/* ---------- 4. 접힌 메뉴(태블릿 세로 레일): 아이콘 위·글자 아래, 같은 칸 크기 ---------- */
.twrap{grid-template-columns:84px minmax(0,1fr)}
.rail{background:var(--side-bg);gap:2px;padding:calc(10px + env(safe-area-inset-top)) 0 10px;scrollbar-width:none}
.rail .logo{margin-bottom:6px}
.rail button{width:68px;min-height:56px;border-radius:10px;gap:4px;font-size:11.5px;line-height:1.15;font-weight:600;color:var(--text2);text-align:center}
.rail button svg{width:22px;height:22px;color:var(--text3)}
.rail button:hover{background:var(--side-hover)}
.rail .on,.rail .on:hover{background:var(--side-on);color:var(--side-on-fg);font-weight:700}
.rail .on svg{color:var(--side-on-fg)}
.rail .sp{flex:1;min-height:10px;border-bottom:1px solid var(--line2);width:52px;margin:0 auto 6px}
.rail .nb{left:auto;right:8px;top:4px}

/* ---------- 5. 폰 아래 탭 + 더보기 메뉴 ---------- */
.tabs{background:var(--side-bg);border-top-color:var(--line)}
.tabs button{color:var(--text3);gap:3px}
.tabs button svg{box-sizing:content-box;padding:3px 12px;border-radius:999px;transition:background .15s}
.tabs .on{color:var(--side-on-fg)}
.tabs .on svg{background:var(--side-on)}
.tabs .nb{top:2px;left:calc(50% + 8px)}
.menu .row{min-height:56px;gap:14px}
.menu .row > svg{width:22px;height:22px;flex:none;color:var(--text3)}
.menu .row .ar{margin-left:auto;color:var(--text3)}

/* ---------- 6. 배지·칩·버튼·입력칸 상태 통일 ---------- */
.nb{color:var(--on-red);background:var(--red)}
.nb.o{background:var(--orange);color:var(--on-orange)}
.card{box-shadow:var(--elev)}
.list{box-shadow:var(--elev)}
.pill{background:var(--surface2);color:var(--text2)}
/* 버튼: 기본(테두리) · 강조(초록 채움) · 마우스 올림 · 눌림 · 사용 불가 · 키보드 초점 */
.btn{transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface2)}
.btn.pri:hover{background:var(--pri-strong);border-color:var(--pri-strong)}
.btn.line:hover{background:var(--pri-soft)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--surface)}
.btn.pri:disabled:hover{background:var(--pri);border-color:var(--pri)}
/* 칩·구간 선택: 고른 것 = 초록 채움 (예전: 검정 채움 → 메뉴·받는 사람 고르기와 같은 색으로) */
.chip:hover{background:var(--surface2);color:var(--text)}
.chip.on,.chip.on:hover{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.chip.on .c,.chip.on .red,.chip.on .orange,.chip.on .gray,.chip.on .prc{color:var(--on-pri)}
.chip.on.orange{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.chip.on.red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.chip.on.gray{background:var(--surface2);border-color:var(--line);color:var(--text2)}
.seg{background:var(--surface2);border-color:var(--line)}
.seg button{color:var(--text2)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--side-on-fg);box-shadow:0 0 0 1px var(--line),var(--elev)}
/* 입력칸: 테두리 → 마우스 올림 진하게 → 초점 초록 테 + 옅은 띠 */
.inp:hover,.filt select:hover{border-color:var(--text3)}
.inp:focus,.filt select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--sel)}
.inp::placeholder,textarea::placeholder{color:var(--text3);opacity:1}
/* 키보드로 옮겨 다닐 때 어디인지 보이게 */
#app button:focus-visible,#app a:focus-visible,#app [tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.side .snav button:focus-visible{outline-offset:-2px}

/* ---------- 7. 다크에서 밝게 남던 곳 (변수로 정리) ---------- */
/* 받는 사람·대상 반 고르기 (pick.js 는 v1.7.2 보완 19에서 테마 변수로 바뀜 — 별칭 없앰), 고른 칩 글자색 */
#app .pk-ck.on,#app .pk-row.on .bx{color:var(--on-pri)}
#app .pk-h{background:var(--surface2)}
#app .pk-row:hover{background:var(--surface2)}
/* 사진 자리(흰 바탕) */
.fph{background:var(--surface2)}
/* 공구 사진 '새' 표시 */
.tl-slot .new{color:var(--on-orange)}
/* 업데이트 창 등 --surface2 를 쓰던 곳은 1절에서 정의됨 */

/* ---------- 8. 낮은 화면(1366×768 등): 메뉴 줄 간격을 줄이고 아래 묶음을 한 줄로 ---------- */
@media (max-height:860px){
  .side .brand{height:52px}
  .side .snav button{height:36px;min-height:36px}
  .side .grp{margin:8px 10px 2px;padding-top:8px}
  .side .grp:first-child{margin-top:4px}
  .side .sfoot{padding-top:8px}
  .side .me{padding-bottom:8px}
  .side .ver{display:none}
}