:root { --navy:#1F3864; --line:#E3E7EE; --muted:#6B7280; --bg:#F5F7FA; --red:#C0392B; --green:#2E7D32; --blue:#1F5FBF; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:#111; font:15px/1.5 -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", sans-serif; }
/* 스크롤바 자리를 항상 비워 둠 — 검색 결과 수에 따라 스크롤바가 생겼다 없어지며 화면이 좌우로 흔들리지 않게 */
html { scrollbar-gutter:stable; overflow-y:scroll; }
/* 줄바꿈 공통 (2026-10-11 사용자 '설/정' · '1/6' 끊김): 한글은 낱말(띄어쓰기) 단위로만 줄 바꿈 · 칸보다 긴 낱말만 넘칠 때 끊음
   명령 · 코드 칸(pre · code · .mono 등)은 각자 word-break 를 따로 정해 둠 → 그대로 */
body { word-break:keep-all; overflow-wrap:break-word; }
a { color:var(--blue); }
/* 맨 위 줄 (Toolkit 이름 · 내 파일 · 관리 · 로그아웃): 스크롤해도 항상 위에 고정 (모든 화면) */
.top { position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(16,24,40,.04);
       display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border-bottom:1px solid var(--line);
       padding:calc(10px + env(safe-area-inset-top)) 14px 10px; }
.brand { font-weight:800; color:var(--navy); text-decoration:none; font-size:18px; display:inline-flex; align-items:center; gap:10px; min-width:0; }
/* 회사 로고 (LEADINGPOINT) | Toolkit 이름 — 로고 원본 비율 1355×184 */
.brand .lp { height:16px; width:auto; flex:none; }
.brand .lp + span { border-left:1px solid #D5DBE5; padding-left:10px; white-space:nowrap; }
@media (min-width: 641px) and (max-width: 900px) {        /* Z 폴드 펼침 · 태블릿 세로: 로고 조금 작게 */
  .brand { font-size:16px; gap:8px; } .brand .lp { height:13px; } .brand .lp + span { padding-left:8px; }
}
.who { margin-left:auto; font-size:13px; color:var(--muted); }
.inline { display:inline; }
button.link { background:none; border:0; color:var(--blue); padding:0; font:inherit; cursor:pointer; text-decoration:underline; }
.wrap { margin:0 auto; padding:16px 24px; }               /* 화면 폭 전체 사용 (큰 모니터 · 고해상도) */
.wrap.narrow, .box { max-width:420px; }
/* 화면 머리 · 안내 목록 · 빈 상태 */
/* 페이지 머리: 메인 분류 카드 머리글과 같은 모양 (옅은 분류색 띠 · 색 아이콘 배지) */
/* 페이지 머리 (2026-10-04 사용자: 부품 조회처럼 낮은 카드로 모든 페이지 통일) — 분류 이름 위 · 제목 옆에 한 줄 설명 */
.phead { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:8px 14px; border-radius:14px;
         background:linear-gradient(180deg, color-mix(in srgb, var(--c, var(--navy)) 11%, #fff) 0%, color-mix(in srgb, var(--c, var(--navy)) 4%, #fff) 100%);
         border:1px solid color-mix(in srgb, var(--c, var(--navy)) 18%, #fff);
         box-shadow:0 6px 18px -12px color-mix(in srgb, var(--c, var(--navy)) 40%, transparent); }
.phead .back { flex:none; text-decoration:none; font-size:13px; font-weight:600; border:1px solid color-mix(in srgb, var(--c, var(--navy)) 25%, #fff); background:#fff;
               border-radius:10px; padding:4px 10px; color:color-mix(in srgb, var(--c, var(--navy)) 75%, #111); }
.phead .back:hover { border-color:var(--c, var(--blue)); }
.phead .pi { flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff;
             background:linear-gradient(140deg, color-mix(in srgb, var(--c, var(--navy)) 82%, #fff), var(--c, var(--navy)));
             box-shadow:0 3px 8px color-mix(in srgb, var(--c, var(--navy)) 30%, transparent); }
.phead .pi svg { width:19px; height:19px; }
.phead > div { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; }
.phead .back { display:none; }   /* 넓은 화면: 메인은 길잡이 줄에 (2026-10-05) */
.phead .pmain { color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; } .phead .pmain:hover { color:var(--c, var(--blue)); }
.phead small { flex-basis:100%; display:block; font-size:11.5px; line-height:1.2; color:color-mix(in srgb, var(--c, var(--navy)) 65%, #555); font-weight:700; letter-spacing:.2px; }
.phead h1 { margin:0; font-size:18px; line-height:1.25; color:color-mix(in srgb, var(--c, var(--navy)) 55%, #111); letter-spacing:-.3px; font-weight:800; }
.phead p { margin:0; font-size:13px; color:var(--muted); min-width:0; }
@media (max-width: 600px) {          /* 휴대폰 (2026-10-04 사용자: 납작하게 · 내용이 가려지지 않게): '‹ 메인 · 아이콘 · 제목' 한 줄만 */
  .phead { padding:6px 10px; gap:8px; margin-bottom:10px; border-radius:12px; }
  .phead .back { display:inline-block; margin-left:auto; padding:3px 8px; font-size:12px; }   /* 휴대폰: 길잡이 줄이 숨겨지므로 오른쪽 끝에 메인 */
  .phead .pi { width:26px; height:26px; border-radius:8px; } .phead .pi svg { width:15px; height:15px; }
  .phead h1 { font-size:15.5px; } .phead small, .phead p { display:none; }
}
.card h2 .no { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
               background:var(--navy); color:#fff; font-size:12px; margin-right:8px; vertical-align:1px; }
ul.notes { margin:8px 0 0; padding:0 0 0 18px; font-size:13px; color:var(--muted); line-height:1.7; }
ul.notes b { color:#333; font-weight:600; }
.drop ul.notes { display:inline-block; text-align:left; margin-top:10px; }
.empty { text-align:center; padding:34px 12px 26px; }
.empty b { display:block; font-size:16px; color:#333; }
.empty p { margin:6px 0 14px; font-size:13px; color:var(--muted); }
.empty .btn + .btn { margin-left:6px; }
/* 넓은 화면: 입력(왼쪽) · 옵션과 진행 상황(오른쪽) 나란히, 결과는 아래 전체 폭 */
.cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 14px; align-items:stretch; }
.cols > .card { display:flex; flex-direction:column; }          /* 나란한 두 카드 높이 맞춤 · 생성 버튼은 카드 맨 아래 */
.cols > .card .runrow { margin-top:auto; }
.cols > .card .form + .notes, .cols > .card .form { margin-bottom:14px; }
.cols > .card .files { flex:1 1 auto; max-height:160px; }
.cols + .card .logbox { height:170px; }                         /* 진행 상황: 전체 폭 · 낮게 (손잡이로 조절) */
/* 크기 조절 손잡이 (common/resize.js) */
.rs-grip { height:10px; margin:2px 0 -4px; cursor:ns-resize; display:flex; align-items:center; justify-content:center; touch-action:none; }
.rs-grip::before { content:""; width:44px; height:4px; border-radius:2px; background:#C9D1DC; transition:background .12s, width .12s; }
.rs-grip:hover::before { background:var(--blue); width:70px; }
.cols { position:relative; }
.rs-vgrip { position:absolute; top:0; bottom:12px; width:10px; cursor:ew-resize; z-index:3; touch-action:none; display:flex; align-items:center; justify-content:center; }
.rs-vgrip[hidden] { display:none; }                  /* 한 칸으로 쌓인 화면(휴대폰)에서는 좌우 경계 손잡이 없음 */
.rs-vgrip::before { content:""; width:4px; height:44px; border-radius:2px; background:#C9D1DC; transition:background .12s, height .12s; }
.rs-vgrip:hover::before { background:var(--blue); height:70px; }
body.rs-dragging { user-select:none; cursor:grabbing; }
.files.rs-set, .pv-xl.rs-set { max-height:none; }
.pv-stage.rs-set { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pv-stage.rs-set svg { max-height:100%; }
.cols.wide2 { grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .cols, .cols.wide2 { grid-template-columns:1fr; } }
.form { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px 14px; align-items:center; }
.form > label { margin:0; font-size:13px; color:#555; }
.form > h3, .form > .btn.full, .form > p { grid-column:1 / -1; }
.form input.ro { background:#F3F4F6; color:#6B7280; }                  /* 바꿀 수 없는 칸 (아이디) */      /* 소제목 · 저장 단추는 한 줄 전체 (칸이 밀리지 않게) */
.form input[type=text].sm, .form select { width:100%; max-width:360px; }
.checks { display:flex; flex-wrap:wrap; gap:4px 16px; }
.checks label { display:inline-flex; align-items:center; gap:5px; margin:0; font-size:14px; color:#222; }
.runrow { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
@media (max-width: 520px) { .form { grid-template-columns:1fr; gap:4px; } .form > label { margin-top:6px; } }
/* 계열 · 모델 고르기 (전력 계산): 넓으면 한 줄, 휴대폰은 '제목 | 선택' 두 줄 */
.pick2 { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; }
.pick2 > label { margin:0; font-size:14px; color:#333; }
.pick2 > #meta { margin-left:auto; }
@media (max-width: 640px) {
  .pick2 { display:grid; grid-template-columns:auto minmax(0, 1fr); }
  .pick2 select { width:100%; }
  .pick2 > #meta { grid-column:1 / -1; margin:0; }
}
/* 원문 보기 (docview.php) */
.dv-head { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin:2px 0 12px; }
.dv-head > div:first-child { flex:1; min-width:0; }
.dv-head small { font-size:12px; color:var(--muted); font-weight:600; }
.dv-head h1 { margin:0; font-size:19px; color:#111; overflow-wrap:anywhere; }
.dv-head p { margin:2px 0 0; }
.dv-pdf { width:100%; height:calc(100vh - 220px); min-height:420px; border:0; border-radius:8px; background:#525659; }
.dv-xl { max-height:calc(100vh - 290px); min-height:320px; }
/* PDF 근거: pdf.js 로 그 쪽을 그림 + 파트넘버 노란 표시 (휴대폰 포함) */
.dv-pdfw { max-height:calc(100vh - 250px); min-height:360px; overflow:auto; background:#525659; border-radius:8px; padding:8px; }
.dv-pg { position:relative; margin:0 auto; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.dv-pg canvas { display:block; }
.dv-hl { position:absolute; background:rgba(255,221,0,.42); mix-blend-mode:multiply; box-shadow:inset 0 -2px 0 rgba(224,168,0,.75); border-radius:2px; pointer-events:none; }   /* 2026-10-08: 테두리(outline) 없앰 · 곱하기 색 — 겹쳐도 글자가 보임 */
html[data-theme="dark"] .dv-pg canvas { filter:invert(1) hue-rotate(180deg); }   /* 어둡게 보기에서도 원문 색 그대로 */
.pv-xl tr.xmark td, .pv-xl tr.xmark th { background:#FFF59D !important; box-shadow:inset 0 2px 0 #F2C200, inset 0 -2px 0 #F2C200; }
.pv-xl tr.xgap td, .pv-xl tr.xgap th { height:12px; background:#F3F3F3; color:#999; font-size:11px; text-align:center; }
/* 선택 단추 — 부품 조회 분류 칩(전체 · SAN 스위치 · 스토리지)과 같은 모양 */
.seg { display:inline-flex; flex-wrap:wrap; gap:6px; }
.seg button { border:1px solid #C9D1DC; background:#fff; border-radius:16px; padding:4px 12px; font:inherit; font-size:13px; cursor:pointer;
              color:#111; white-space:nowrap; }
.seg button:hover { border-color:#9FB3D1; }
.seg button.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.cmdt code { font:13px Consolas, "D2Coding", monospace; color:#1F3864; white-space:nowrap; }
.placeholder-note { font-size:13px; color:var(--muted); padding:18px 4px; }
.crumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; margin:0 0 12px; color:var(--muted); }
.crumb a { text-decoration:none; font-weight:600; border:1px solid #C9D1DC; background:#fff; border-radius:8px; padding:3px 10px; }
.crumb a:hover { border-color:var(--blue); }
.crumb span::after { content:"›"; margin-left:8px; color:#B0B7C3; }
.crumb b { color:#111; }
.who a { text-decoration:none; }
/* 오른쪽 위 계정 버튼 (아이콘 + 글자 · 휴대폰은 아이콘만) */
.acct { margin-left:auto; display:flex; align-items:center; gap:6px; }
.acct .ic { width:16px; height:16px; flex:none; }
/* 아이콘 단추 — 부품 조회 맨 위 단추(메인 · 내 파일 · 로그아웃)와 같은 크기 */
.pill { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:15px; border:1px solid #D5DBE5;
        background:#fff; color:#1F3864; font-family:inherit; font-size:13px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; transition:background .12s, border-color .12s; }
.pill:hover { background:#F1F5FB; border-color:#9FB3D1; }
.pill.on { background:#1F3864; border-color:#1F3864; color:#fff; }
.pill.ghost { color:#6B7280; }
.pill.ghost:hover { color:#C0392B; border-color:#E8B4AE; background:#FDF3F2; }
/* 내 정보 단추 (동그란 단추 하나) → 누르면 아래로 '내 정보 수정 · 로그아웃' */
.umenu { position:relative; }
.umenu > summary { list-style:none; }
.umenu > summary::-webkit-details-marker { display:none; }
.umenu[open] > summary { background:#F1F5FB; border-color:#9FB3D1; }
.umenu[open] > summary.on { background:#1F3864; border-color:#1F3864; }
.upop { position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:190px; background:#fff; border:1px solid #D5DBE5;
        border-radius:10px; box-shadow:0 6px 20px rgba(16,24,40,.12); padding:6px; }
.upop .uwho { padding:6px 10px 8px; border-bottom:1px solid #EEF1F5; margin-bottom:4px; font-size:13px; color:#111; }
.upop .uwho small { display:block; margin-top:2px; color:#6B7280; font-size:12px; }
.upop a, .upop button { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:0; border-radius:7px; background:none;
                        font:inherit; font-size:14px; color:#1F3864; text-decoration:none; cursor:pointer; text-align:left; }
.upop .ic { color:#6B7280; }
.upop a:hover { background:#F1F5FB; }
.upop button.out:hover { background:#FDF3F2; color:#C0392B; }
.upop button.out:hover .ic { color:#C0392B; }
/* 알림 (저장됨 등) — 화면 아래에 잠깐 떴다 사라짐 · 위에 끼어들지 않아 표가 밀리지 않음 (부품 조회 알림과 같은 모양) */
.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:80;
         background:#222; color:#fff; padding:9px 16px; border-radius:18px; font-size:13px; opacity:0; transition:opacity .25s;
         pointer-events:none; max-width:90vw; text-align:center; }
.toast.show { opacity:.94; }
.toast.err { background:#C0392B; }
/* 화면 안 탭 (관리: 계정 · 승인 / 이용 통계) */
.vtabs { margin:0 0 12px; }
.seg a { display:inline-flex; align-items:center; gap:6px; border:1px solid #C9D1DC; background:#fff; border-radius:16px; padding:4px 12px;
         font-size:13px; color:#111; text-decoration:none; white-space:nowrap; }
.seg a:hover { border-color:#9FB3D1; }
.seg a.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.seg a .cnt { background:#C0392B; color:#fff; border-radius:9px; padding:0 6px; font-size:11px; font-weight:700; line-height:16px; }
@media (max-width: 640px) {
  .acct .pill span { display:none; }
  .pill { width:32px; padding:0; justify-content:center; }
  /* 휴대폰: 한 줄 '로고 | 기술지원 Toolkit' — 첫 낱말 '인프라' 만 숨겨 로고 · 이름 · 단추가 한 줄에 (높이 그대로)
     · 관리자처럼 단추가 많아 자리가 모자라면 이름 끝을 '…' 로 줄임 (단추는 항상 다 보이게) */
  .top { flex-wrap:nowrap; }
  .brand { font-size:15px; gap:8px; flex:0 1 auto; }
  .brand .lp { height:12px; }
  .brand .lp + span { padding-left:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .brand .b1 { display:none; }
  .acct { flex:none; }
}
.brand i { font-style:normal; }
@media (max-width: 380px) {                               /* 아주 좁은 화면 (Z 폴드 접힘 · 작은 폰) */
  .brand { font-size:14px; gap:6px; } .brand .lp { height:11px; } .brand .lp + span { padding-left:6px; }
  .top { padding-left:12px; padding-right:10px; }
  .acct { gap:4px; }                                      /* 단추 크기는 부품 조회와 같게 (내 정보 하나로 합쳐 자리 충분) */
}
.menu { display:flex; gap:4px; overflow-x:auto; background:#fff; border-bottom:1px solid var(--line); padding:0 12px; }
.menu a { padding:9px 12px; white-space:nowrap; text-decoration:none; color:#333; font-size:14px; border-bottom:2px solid transparent; }
.menu a.on { color:var(--navy); font-weight:700; border-bottom-color:var(--navy); }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.card h2 { margin:0 0 8px; font-size:16px; color:var(--navy); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* 선택 상자 · 작은 입력칸 — 부품 조회 필터와 같은 크기 */
select, input[type=text].sm, input[type=number].sm { font-size:14px; padding:6px 8px; border:1px solid #C9D1DC; border-radius:8px; background:#fff; }
select:focus, input[type=text]:focus, input[type=password]:focus { outline:none; border-color:var(--blue); }
.drop { border:2px dashed #C9D1DC; border-radius:12px; padding:18px; text-align:center; color:var(--muted); background:#FAFBFD; }
.drop.over { border-color:var(--blue); background:#EEF4FC; color:var(--blue); }
.files { list-style:none; margin:10px 0 0; padding:0; max-height:220px; overflow:auto; }
.files li { display:flex; justify-content:space-between; gap:8px; padding:5px 8px; border-bottom:1px solid #F0F2F5; font-size:13px; }
.files li button { border:0; background:none; color:var(--red); cursor:pointer; font-size:14px; }
.logbox { background:#1E1E1E; color:#D4D4D4; font:12.5px/1.5 Consolas, "D2Coding", monospace; border-radius:10px; padding:10px 12px;
          height:260px; overflow:auto; white-space:pre-wrap; }
.logbox .ok { color:#7EC97E; } .logbox .warn { color:#E5C07B; } .logbox .err { color:#F28B82; }
.status { font-size:13px; color:var(--muted); }
.outs a { display:inline-block; margin:4px 6px 4px 0; }
/* 확인 창 */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:50; padding:12px; }
.modal .dlg { background:#fff; border-radius:14px; max-width:760px; width:100%; max-height:90vh; display:flex; flex-direction:column; }
.modal .dlg h3 { margin:0; padding:14px 16px 6px; color:var(--navy); }
.modal .dlg .body { padding:4px 16px 10px; overflow:auto; }
.modal .dlg .foot { padding:10px 16px 14px; display:flex; flex-direction:row; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--line); text-align:right; font-size:inherit; color:inherit; }   /* 바닥글(.foot)의 세로 배치가 창 단추에 섞이던 것 막음 (2026-10-07) */
.modal .dlg .foot .btn { width:auto; }
.amb { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; }
.amb b { color:#222; } .amb pre { white-space:pre-wrap; font-size:12px; color:#444; margin:6px 0; font-family:inherit; }
.amb label { display:inline-flex; gap:6px; align-items:center; margin:2px 16px 2px 0; font-size:14px; }
table.grp { width:100%; border-collapse:collapse; font-size:14px; }
table.grp td, table.grp th { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:22px 10px calc(30px + env(safe-area-inset-bottom));
        display:flex; flex-direction:column; align-items:center; gap:4px; }
/* 회사 로고는 한 화면에 하나만: PC · 태블릿 = 맨 윗줄 · 휴대폰(맨 윗줄에 로고 자리 없음) = 맨 아래 */
.foot .lp { display:none; }                               /* 로고는 맨 윗줄에만 (휴대폰도 맨 윗줄 두 줄 안에) */
.foot span { font-size:12px; color:#6B7280; letter-spacing:.2px; }
.foot small { font-size:11px; color:#9AA3AF; }
.box { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; max-width:420px; margin:20px auto; }
.box h1 { font-size:20px; margin:0 0 12px; color:var(--navy); }
label { display:block; font-size:13px; color:#333; margin:10px 0 4px; }
input[type=text], input[type=password] { width:100%; font-size:16px; padding:10px 12px; border:1px solid #C9D1DC; border-radius:10px; }
.btn { display:inline-block; border:0; background:var(--navy); color:#fff; border-radius:10px; padding:10px 16px; font-size:15px; cursor:pointer; text-decoration:none; }
.btn.full { width:100%; margin-top:14px; }
.btn.sm { padding:5px 10px; font-size:13px; border-radius:8px; }
.btn.grey { background:#EEF1F5; color:#333; }
.btn.red { background:var(--red); }
.pwtip { margin:4px 0 0; font-size:12px; color:var(--red); font-weight:600; }
.btn.green { background:var(--green); }
.msg { padding:10px 12px; border-radius:10px; margin:10px 0; font-size:14px; }
.msg.err { background:#FDE7E3; color:var(--red); }
.msg.ok { background:#E2EFDA; color:var(--green); }
.msg.note { background:#FFF7E6; color:#6B4E16; border:1px solid #F1D9A6; font-size:13px; }
.sub { font-size:13px; color:var(--muted); }
/* 메인 */
.hero { background:linear-gradient(120deg, #1F3864 0%, #2B4F8C 100%); color:#fff; border-radius:16px; padding:22px 24px; margin:4px 0 16px; }
.hero h1 { margin:0; font-size:22px; letter-spacing:-.3px; }
/* 메인 첫 칸의 회사 로고: 남색 바탕 위 흰 명찰 (로고 원래 색 · 주황 점 그대로) */
.hero-co { display:inline-flex; align-items:center; background:#fff; border-radius:8px; padding:6px 10px; margin-bottom:10px; }
.hero-co img { height:15px; width:auto; display:block; }
.hero p { margin:6px 0 0; font-size:14px; color:#D6E0F0; }
.cats { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:16px; }
/* 분류 카드: 위쪽 색 띠 = 분류 이름(누르는 곳 아님) · 아래 흰 줄들 = 누르는 메뉴 (화살표 · 마우스 올리면 색) */
.cat { background:#fff; border:1px solid color-mix(in srgb, var(--c, var(--navy)) 16%, #E3E7EE); border-radius:16px; padding:0 0 8px;
       box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px -10px color-mix(in srgb, var(--c, var(--navy)) 35%, transparent); overflow:hidden; }
.cat.lnk { --c:#475569; }
.cat.cus { --c:#9A5B13; }   /* 고객사 정보 (2026-10-04) */
.cat.own { --c:#6B4E16; }   /* 내 업무 (본인만 · 2026-10-07 '내 도구' → 10-10 이름 바꿈 · 고객사 정보 포함) · .cat.eos = 펌웨어 · EOS 조회 (10-10 · 23시 사용자 '빨간색이라 튐' → 부품 조회 청록과 겹치지 않게 차분한 자주) */
.cat.san { --c:#1F5FBF; } .cat.sto { --c:#7B4FBF; } .cat.prt { --c:#16907A; } .cat.my { --c:#C05800; } .cat.eos { --c:#8E3B76; } .cat.kb { --c:#0E7490; }
@media (max-width: 700px) { .cat.my { order:-1; } }        /* 휴대폰: 내 파일을 맨 위로 */
/* 분류 머리글: 옅은 분류색 바탕 + 색 아이콘 배지 (누르는 곳 아님) · 메뉴: 아이콘 타일 + 이름 · 설명 + 화살표 (누르는 곳) */
.cat .ch { display:flex; align-items:center; gap:11px; margin:0 0 4px; padding:14px 16px 13px; cursor:default; user-select:none;
           background:linear-gradient(180deg, color-mix(in srgb, var(--c, var(--navy)) 11%, #fff) 0%, color-mix(in srgb, var(--c, var(--navy)) 4%, #fff) 100%);
           border-bottom:1px solid color-mix(in srgb, var(--c, var(--navy)) 18%, #fff); }
.cat .ci { flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff;
           background:linear-gradient(140deg, color-mix(in srgb, var(--c, var(--navy)) 82%, #fff), var(--c, var(--navy)));
           box-shadow:0 3px 8px color-mix(in srgb, var(--c, var(--navy)) 30%, transparent); }
.cat h2 { margin:0; font-size:16.5px; color:color-mix(in srgb, var(--c, var(--navy)) 70%, #111); letter-spacing:-.2px; font-weight:800;
          white-space:nowrap; flex:none; }   /* 분류 제목은 한 줄 (2026-10-10 사용자: '내 업무'가 '내 업 / 무'로 끊김) · 좁으면 오른쪽 설명이 줄바꿈 */
.cat .ch small { min-width:0; font-size:12px; color:color-mix(in srgb, var(--c, var(--navy)) 55%, #666); margin-left:auto; text-align:right; font-weight:600; }
.cat .fn { display:flex; align-items:center; gap:12px; padding:10px 12px; margin:2px 8px; border-radius:12px; text-decoration:none; color:#111;
           transition:background .12s, transform .12s; }
.cat .fn .fi { flex:none; width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
               color:var(--c, var(--navy)); background:color-mix(in srgb, var(--c, var(--navy)) 10%, #fff); transition:background .12s, color .12s; }
@media (hover:hover) and (pointer:fine) {     /* 마우스에서만 강조 — 휴대폰은 길게 눌러도 강조 안 됨 (2026-10-05 사용자) */
  .cat .fn:hover { background:color-mix(in srgb, var(--c, var(--navy)) 6%, #fff); }
  .cat .fn:hover .fi { background:var(--c, var(--navy)); color:#fff; }
  .cat .fn:hover i { transform:translateX(2px); }
}
.cat .fn + .fn { border-top:0; }
.cat .fn div { flex:1; min-width:0; }
.cat .fn b { display:block; font-size:15px; font-weight:650; color:#111; }
.cat .fn .fd { display:block; font-size:12.5px; color:var(--muted); margin-top:1px; word-break:keep-all; overflow-wrap:break-word; line-height:1.5; }
.cat .fn .fs { white-space:nowrap; }   /* 항목 하나는 한 줄 · 줄바꿈은 '·' 사이에서만 (2026-10-11) */
.cat .fn i { font-style:normal; color:color-mix(in srgb, var(--c, var(--navy)) 60%, #999); font-size:20px; transition:transform .12s; }
.cat .tip { margin:6px 16px 8px; }
.cat .tip { font-size:12px; color:var(--muted); margin:6px 2px 6px; }
/* 결과 미리보기 */
.pv-bar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.pv-tabs { display:flex; gap:4px; flex:1; min-width:0; overflow-x:auto; }
.pv-tab { border:1px solid var(--line); border-bottom:0; background:#F5F7FA; border-radius:10px 10px 0 0; padding:7px 12px; font-size:13px; cursor:pointer;
          white-space:nowrap; max-width:420px; overflow:hidden; text-overflow:ellipsis; color:#333; }
.pv-tab.on { background:#fff; color:#111; font-weight:600; box-shadow:0 -2px 0 var(--navy) inset; }
.pv-ext { font-size:11px; font-weight:700; padding:1px 6px; border-radius:5px; margin-right:6px; color:#fff; }
.pv-ext.pptx { background:#C43E1C; } .pv-ext.xlsx { background:#107C41; }
.pv-dl { display:flex; gap:6px; padding-bottom:6px; }
.pv-body { padding-top:10px; }
.pv-wait { padding:40px; text-align:center; color:var(--muted); }
.pv-nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.pv-nav #pv-no { font-weight:700; min-width:60px; text-align:center; }
.pv-stage { background:#E9ECF1; padding:14px; border-radius:10px; }
.pv-stage svg { box-shadow:0 2px 10px rgba(0,0,0,.18); max-height:78vh; width:auto !important; max-width:100%; margin:0 auto; }
.pv-zoom { display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.pv-zoom .btn { min-width:30px; padding:4px 8px; }
.pv-zoom input[type=range] { width:120px; accent-color:var(--navy); }
.pv-zoom .pv-zv { min-width:44px; text-align:center; font-size:13px; color:#333; }
.pv-stage.zoomed, .pv-stage.zoomed.rs-set { display:block; overflow:auto; text-align:left; }
.pv-stage.zoomed svg { margin:0; }
.pv-stage:fullscreen { display:flex; align-items:center; justify-content:center; padding:0; background:#222; border-radius:0; }
.pv-stage:fullscreen svg { max-height:100vh; max-width:100vw; box-shadow:none; }
.pv-thumbs { display:flex; gap:8px; overflow-x:auto; padding:10px 2px 4px; }
.pv-th { flex:0 0 150px; border:2px solid transparent; background:#fff; border-radius:6px; padding:0; cursor:pointer; position:relative; }
.pv-th.on { border-color:var(--navy); }
.pv-th span { position:absolute; left:4px; top:2px; font-size:11px; color:var(--muted); background:rgba(255,255,255,.85); padding:0 4px; border-radius:4px; z-index:1; }
.pv-thv { aspect-ratio:16/10; overflow:hidden; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.pv-xl { overflow:auto; max-height:72vh; border:1px solid #D0D0D0; background:#fff; }
.pv-xl table.xl td, .pv-xl table.xl th { padding:0 3px; font-size:14.67px; line-height:1.25; }
.pv-xl .xh, .pv-xl .xr, .pv-xl .xc { background:#F3F3F3; color:#444; font-weight:400; font-size:13px !important; border:1px solid #D0D0D0; text-align:center; }
.pv-xl .xf { position:absolute; right:1px; bottom:1px; font-size:10px !important; line-height:14px; width:15px; height:15px; text-align:center;
             border:1px solid #A0A0A0; background:#fff; color:#444; font-weight:400; z-index:1; }
.pv-sheets { display:flex; gap:2px; overflow-x:auto; background:#F3F3F3; border:1px solid #D0D0D0; border-top:0; padding:0 6px; }
.pv-sh { border:0; border-bottom:3px solid transparent; background:none; padding:6px 14px; font-size:13px; cursor:pointer; white-space:nowrap; color:#333; }
.pv-sh.on { background:#fff; color:#107C41; font-weight:700; border-bottom-color:#107C41; }
.pv-note { margin-top:4px; }
/* 내 파일 */
.jobs { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap:12px; }
.job.card { margin:0; }
.jm { font-size:12px; color:var(--muted); margin-top:3px; }
.jm details { display:inline; } .jm summary { display:inline; cursor:pointer; text-decoration:underline dotted; }
.jm details[open] { display:block; margin-top:4px; overflow-wrap:anywhere; }
.jh { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.jh b { font-size:14px; overflow-wrap:anywhere; }
.jh .jdel { margin-left:auto; }
.jk { font-size:11px; font-weight:700; color:#fff; padding:2px 7px; border-radius:6px; background:#1F5FBF; }
.jk.storage { background:#7B4FBF; }
.jf { margin-top:6px; }
.jfi { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid #F1F3F6; }
.jfi .jn { flex:1; min-width:0; font-size:13px; overflow-wrap:anywhere; }
.pv-ext.zip { background:#6B7280; }
h3.sec { margin:6px 0 10px; font-size:16px; color:#111; } h3.sec .sub { font-weight:400; margin-left:4px; }
h3.sec + .jobs, .jobs + h3.sec { margin-top:0; } .jobs + h3.sec { margin-top:18px; }
.jact { margin-left:auto; display:inline-flex; gap:6px; align-items:center; }
.jact .ic { width:15px; height:15px; vertical-align:-3px; }
.shl label { display:flex; align-items:center; gap:8px; margin:0; padding:7px 4px; border-bottom:1px solid #F1F3F6; font-size:14px; color:#222; }
.pickrow { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; border-bottom:1px solid #F1F3F6; background:none;
           padding:8px 4px; cursor:pointer; font:inherit; font-size:14px; }
.pickrow:hover { background:#F1F5FB; } .pickrow .sub:last-child { margin-left:auto; color:var(--blue); }
.chips2 { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip2 { border:1px solid #C9D1DC; background:#fff; border-radius:16px; padding:4px 12px; font:inherit; font-size:13px; cursor:pointer; }
.chip2:hover { border-color:var(--blue); color:var(--blue); }
/* 휴대폰: 미리보기 여백 줄이기 · 손가락으로 넘기기 쉽게 */
@media (max-width: 700px) {
  .wrap { padding:10px; }
  .pv-bar { align-items:stretch; }
  .pv-tab { max-width:70vw; }
  .pv-dl { width:100%; }
  .pv-stage { padding:4px; }
  .pv-stage svg { max-height:none; }
  .pv-nav .sub { display:none; }
  .pv-th { flex-basis:96px; }
  .pv-xl { max-height:65vh; }
  .hero { padding:16px; } .hero h1 { font-size:18px; }
}
/* 목록 '더 보기' — 부품 조회와 같은 흰 바탕 전체 폭 단추 */
button.more { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid var(--line); background:#fff; border-radius:10px;
              font:inherit; font-size:14px; color:#111; cursor:pointer; }
button.more:hover { background:#F1F5FB; border-color:#9FB3D1; }
button.more[hidden] { display:none; }
/* 근거 원문 단추 — 부품 조회 '원문 보기' 와 같은 둥근 단추 */
a.doclink { display:inline-block; font-size:12px; color:var(--blue); border:1px solid #C9D1DC; border-radius:10px; padding:1px 8px;
            text-decoration:none; white-space:nowrap; background:#fff; line-height:1.5; }
a.doclink:hover { border-color:var(--blue); background:#EEF4FC; }
a.doclink + a.doclink { margin-left:4px; }
/* 용어 말풍선 (표 머리글 · data-tip) — 마우스를 올리거나 눌러서 고르면 아래에 설명 */
th.tip { cursor:help; }
th.tip::after { content:"?"; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:5px;
                border-radius:50%; background:#DDE4EE; color:#3B4A63; font-size:10px; font-weight:700; vertical-align:1px; }
th.tip:hover::before, th.tip:focus::before {
  content:attr(data-tip); position:absolute; left:6px; top:calc(100% + 6px); z-index:30; width:max-content; max-width:300px;
  white-space:normal; background:#1F2937; color:#fff; font-size:12.5px; font-weight:400; line-height:1.55; padding:8px 10px;
  border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
th.tip:focus { outline:none; }
th.tip:nth-last-child(-n+3):hover::before, th.tip:nth-last-child(-n+3):focus::before { left:auto; right:6px; }   /* 오른쪽 끝 칸은 왼쪽으로 펼침 */
/* 목록 상세 (지원 스위치 모델) — 부품 조회 상세와 같은 모양 */
.shead { display:none; }
dl.spec { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:4px 14px; margin:8px 0 0; font-size:14px; }
dl.spec dt { color:var(--muted); font-size:13px; }
dl.spec dd { margin:0; color:#111; overflow-wrap:anywhere; }
@media (max-width: 640px) {
  /* 휴대폰: 상세를 화면 전체에 · 맨 위 '← 목록' (뒤로 가면 목록 위치 그대로) */
  #refs.sheet { position:fixed; inset:0; z-index:60; margin:0; border:0; border-radius:0; overflow-y:auto; background:var(--bg);
                padding:0 12px calc(24px + env(safe-area-inset-bottom)); }
  #refs.sheet .shead { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:2; background:#fff; margin:0 -12px 10px;
                       padding:calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom:1px solid var(--line); }
  #refs.sheet .shead b { font-size:16px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #refs.sheet > h2 { margin-top:4px; }
  body.sheet-open { overflow:hidden; }
}
/* 관리: 이용 통계 (사용자별 누적 기능 막대 · 최근 30일 날짜 막대 · 마지막 이용) */
.ustat { margin-bottom:14px; }
.ulg { display:flex; flex-wrap:wrap; gap:4px 12px; margin:10px 0 6px; font-size:12px; color:#444; }
.ulg span { display:inline-flex; align-items:center; gap:5px; }
.ulg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.urows { display:flex; flex-direction:column; }
.urow { display:grid; grid-template-columns:minmax(120px, 190px) minmax(0, 1fr) minmax(170px, 230px) minmax(150px, 210px);
        gap:14px; align-items:center; padding:8px 4px; border-bottom:1px solid #F0F2F5; font-size:13px; }
.urow:not(.uhead):hover { background:#F7F9FC; }
.urow.uhead { font-size:12px; font-weight:600; color:#6B7280; border-bottom:1px solid var(--line); padding-top:4px; }
.uname { display:flex; flex-direction:column; min-width:0; }
.uname small, .ulast small { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ubar { display:flex; align-items:center; gap:8px; min-width:0; }
.utrack { display:flex; height:14px; border-radius:7px; overflow:hidden; background:#EEF1F5; min-width:4px; }
.utrack i { display:block; height:100%; min-width:2px; }
.ubar em, .uspark em { font-style:normal; font-size:12px; color:#333; white-space:nowrap; min-width:36px; }
.uspark { display:flex; align-items:flex-end; gap:2px; height:30px; }
.uspark i { flex:1; min-width:3px; background:#4A84D8; border-radius:2px 2px 0 0; display:block; }
.uspark i.z { background:#E3E7EE; }
.uspark em { align-self:center; margin-left:6px; }
.ulast { display:flex; flex-direction:column; }
.ulast b { color:var(--navy); }
@media (max-width: 640px) {                              /* 휴대폰: 사용자마다 카드 한 장 */
  .urow { grid-template-columns:1fr; gap:6px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
  .urow.uhead { display:none; }
  .ustat { background:none; border:0; padding:0; }
}
/* 관리 표 */
table.users { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px; }
table.users th, table.users td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.users th { background:#F3F4F6; font-size:13px; }
/* 표 공통 모양 (부품 조회 표 기준) — 머리글 진한 열 경계선(끌 위치) · 본문 옅은 경계선 · 줄 번갈아 배경 · 마우스 올린 줄 강조 */
@media (min-width: 641px) {
  table.users, table.grp { font-size:13px; border-collapse:collapse; background:#fff; }
  table.users { border-radius:0; }
  table.users th, table.grp th { position:relative; background:#F3F4F6; color:#333; font-weight:600; font-size:13px; padding:6px 8px;
                                 border-bottom:1px solid var(--line); border-right:1px solid #C9D1DC; vertical-align:middle; }
  table.users td, table.grp td { padding:5px 8px; border-bottom:1px solid #F0F2F5; border-right:1px solid #E8EBEF; }
  table.users tr > :last-child, table.grp tr > :last-child { border-right:0; }
  table.users tbody tr:nth-child(even) td, table.grp tr:nth-child(odd):not(:first-child) td { background:#F7F9FC; }
  table.users tbody tr:hover td, table.grp tr:hover td { background:#EEF4FC; }
  table.users tbody tr.sel td { background:#CCE4F7 !important; }      /* 누른 줄 (부품 조회와 같은 색) */
  /* 목록 옆 상세 칸: 표를 내려도 화면에 고정 (스크롤 이동 없이 바로 보이게) */
  .cols > #refs { position:sticky; top:70px; align-self:start; max-height:calc(100vh - 86px); overflow-y:auto; }
  /* 긴 목록 표(.tscroll 안): 표 안에서 스크롤 · 머리글(분류 · 제품군 · 모델 …)은 위에 고정 (부품 조회 표와 같게) */
  .tscroll { overflow:auto; max-height:calc(100vh - 250px); max-height:calc(100dvh - 250px); min-height:240px;
             border:1px solid var(--line); border-radius:8px; scrollbar-gutter:stable; }
  .tscroll table.users { border:0; border-radius:0; overflow:visible; }     /* overflow:hidden 이면 머리글 고정이 안 됨 */
  .tscroll table.users thead th { position:sticky; top:0; z-index:3; box-shadow:0 1px 0 var(--line); }
  /* 짧은 값 목록 표(.nw): 줄바꿈 없이 한 줄 · 넘치면 가로 스크롤 (부품 조회 표와 같게) */
  table.users.nw th, table.users.nw td { white-space:nowrap; }
  /* 열 너비 조절 손잡이 (common/resize.js) */
  table.users th .rz { position:absolute; top:0; right:-4px; width:9px; height:100%; cursor:col-resize; z-index:2; }
  table.users th:last-child .rz { right:0; }
  table.users th .rz:hover, table.users th .rz.on { background:rgba(31,95,191,.25); }
}
.st { font-size:12px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.st.pending { background:#FFF2CC; color:#8A6100; }
.st.active { background:#E2EFDA; color:var(--green); }
.st.denied, .st.disabled { background:#FDE7E3; color:var(--red); }
.st.pre { background:#EEF1F5; color:#5B6475; }
.st.adm { background:#1F3864; color:#fff; display:inline-block; margin-top:4px; }
.st.subadm { background:#E8F0FE; color:#1F5FBF; border:1px solid #9FB8E8; display:inline-block; margin-top:4px; font-weight:700; }
table.pm tr.pre td { background:#F7F8FA; color:#5B6475; }
table.pm tr.pre input:disabled { opacity:.75; cursor:default; }
table.pm tr.dgrp td { background:#E9EEF6; color:#1F2A3C; text-align:left; padding:6px 10px; font-size:13px; border-top:2px solid #C9D4E6; }
.acts form { display:inline; }
form.perms label { display:inline-flex; align-items:center; gap:4px; margin:0 10px 4px 0; font-size:13px; white-space:nowrap; }
form.perms .btn { margin-top:2px; }
/* 관리 · 계정: 한 사람 한 줄 권한 표 (15명 안팎 한 화면) — 머리 줄 · 사용자 열 고정, 좁은 화면은 가로 스크롤 */
.pmtool { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.pmtool .seg { margin:0; }
.pmtool .seg a { text-decoration:none; }
.pmtool .cnt0 { font-weight:400; color:#888; font-size:11.5px; }
.pmtool .seg a.on .cnt0 { color:inherit; }
#pmq { margin-left:auto; width:200px; max-width:100%; padding:6px 10px; border:1px solid #C9D1DC; border-radius:8px; font:inherit; font-size:13px; }
.pmwrap { overflow:auto; max-height:calc(100vh - 230px); border:1px solid #DCE3EC; border-radius:10px; background:#fff; }
table.pm { border-collapse:separate; border-spacing:0; width:auto; min-width:100%; font-size:13px; }
table.pm td.pc, table.pm th.pc { width:96px; }
table.pm th.pc { white-space:normal; line-height:1.3; vertical-align:bottom; }
table.pm th, table.pm td { padding:6px 8px; border-bottom:1px solid #EEF1F5; vertical-align:middle; white-space:nowrap; background:#fff; }
table.pm thead th { position:sticky; top:0; z-index:2; background:#F4F7FB; font-size:12px; color:#333; text-align:left; border-bottom:1px solid #DCE3EC; }
table.pm thead tr.p th { top:29px; }
table.pm th.gh { text-align:center; border-left:2px solid #DCE3EC; color:#5B7083; }
table.pm .nm { position:sticky; left:0; z-index:1; min-width:150px; box-shadow:1px 0 0 #EEF1F5; }
table.pm thead .nm { z-index:3; }
table.pm td.pc, table.pm th.pc { text-align:center; padding:6px 4px; }
table.pm .g0 { border-left:2px solid #DCE3EC; }
/* 열 머리: 아이콘(메인 메뉴와 같음) 한 줄 + 이름 두 줄 고정 → 모든 열 같은 높이 · 같은 위치 (2026-10-03) */
table.pm th.pc { width:102px; min-width:102px; vertical-align:top; padding:6px 3px 8px; }
table.pm th.pc button { display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; border:0; background:none; font:inherit; color:#334155; cursor:pointer; padding:6px 2px 4px; border-radius:8px; }
table.pm th.pc button:hover { background:color-mix(in srgb, var(--c, #5B7083) 10%, #fff); }
table.pm th.pc .pi { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; color:var(--c, #5B7083); background:color-mix(in srgb, var(--c, #5B7083) 12%, #fff); }
table.pm th.pc .pi svg { width:16px; height:16px; }
table.pm th.pc .pt { display:block; font-size:11.5px; font-weight:600; line-height:1.35; min-height:2.7em; letter-spacing:-.2px; text-align:center; word-break:keep-all; }
table.pm th.gh { color:var(--c, #5B7083) !important; font-weight:700; font-size:12px; letter-spacing:.2px; box-shadow:inset 0 3px 0 var(--c, #5B7083); background:color-mix(in srgb, var(--c, #5B7083) 7%, #F4F7FB) !important; }
table.pm th.one { vertical-align:top; box-shadow:inset 0 3px 0 var(--c, #5B7083); background:color-mix(in srgb, var(--c, #5B7083) 7%, #F4F7FB) !important; }
table.pm th.one .gn { display:block; text-align:center; color:var(--c); font-weight:700; font-size:12px; padding:0 0 4px; }
table.pm th.one .pi { background:#fff; }
table.pm td.pc input { accent-color:var(--c, #1F5FBF); }
table.pm td.gl { color:var(--c, #5B7083) !important; }
table.pm td.pc input { width:16px; height:16px; cursor:pointer; }
table.pm tr.pend td { background:#FFFBEA; }
table.pm tr.dirty td { background:#FFF6DC; }
table.pm tbody tr:not(.dirty):not(.pend):hover td { background:#F7F9FC; }
table.pm td.acts { white-space:nowrap; }
table.pm .pk { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
table.pm .pl, table.pm td.gl { display:none; }
/* 휴대폰: 표 대신 사람마다 카드 — 이름 · 상태 / 분류별 권한 칩 / 최근 로그인 · 관리 단추 (가로로 잘리지 않게) */
@media (max-width: 760px) {
  .pmwrap { overflow:visible; max-height:none; border:0; background:transparent; }
  table.pm, table.pm tbody { display:block; min-width:0; width:100%; }
  table.pm thead { display:none; }
  table.pm tbody tr { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; background:#fff; border:1px solid #DCE3EC; border-radius:14px;
                      padding:12px 12px 10px; margin:0 0 10px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
  table.pm tbody tr[hidden] { display:none; }
  table.pm td { display:block; border:0; padding:0; background:transparent !important; white-space:normal; }
  table.pm td.nm { position:static; flex:1 1 60%; min-width:0; box-shadow:none; }
  table.pm td.stc { flex:none; margin-left:auto; text-align:right; }
  table.pm td.pc { width:auto; padding:0; }
  table.pm td.gl { display:block; flex-basis:100%; font-size:11.5px; font-weight:700; color:#5B7083; margin:6px 0 0; }   /* 분류마다 새 줄 */
  table.pm .pk { border:1px solid #D5DEE8; border-radius:16px; padding:4px 10px 4px 8px; gap:6px; background:#F7F9FC; font-size:13px; }
  table.pm .pk:has(input:checked) { background:#E6F0FB; border-color:#9FBDE3; }
  table.pm .pl { display:inline; }
  table.pm td.pc input { width:16px; height:16px; }
  table.pm td[colspan] { flex-basis:100%; text-align:left !important; margin-top:6px; }
  table.pm .g0 { border-left:0; }
  table.pm td.ll { flex:1 0 100%; margin-top:10px; padding-top:8px; border-top:1px dashed #E5E9EF; font-size:12px; }
  table.pm td.ll::before { content:"최근 로그인 "; color:#8A94A6; }
  table.pm td.acts { flex:1 0 100%; margin-top:2px; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
  table.pm td.acts form { display:inline; }
  table.pm tr.dirty { background:#FFF9E8; border-color:#F0D58A; }
  table.pm tr.pend { border-color:#F0D58A; }
  #pmq { width:100%; margin-left:0; }
}
table.pm td.acts .btn { margin:1px 0; }
/* 권한 칸: 메인 화면 분류처럼 한 줄에 한 분류 (분류 이름 · 체크들) */
form.perms .pg { display:flex; align-items:baseline; gap:8px; padding:3px 0; border-bottom:1px dashed #E5E9EF; }
form.perms .pg:last-of-type { border-bottom:0; }
form.perms .pgn { flex:0 0 66px; font-size:11.5px; font-weight:700; color:#5B7083; white-space:nowrap; }
form.perms .pgi { display:flex; flex-wrap:wrap; }
form.perms .pgi label { margin:0 10px 0 0; }
table.users tr.dirty td { background:#FFF6DC; }                       /* 권한 체크를 바꾸고 아직 저장 안 한 줄 */
/* 바뀐 권한 저장 띠 — 화면 아래 고정 (표 안 글자를 바꾸지 않아 표가 흔들리지 않음) */
.savebar { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:70;
           display:flex; align-items:center; gap:10px; background:#1F3864; color:#fff; padding:8px 10px 8px 16px; border-radius:22px;
           box-shadow:0 6px 20px rgba(16,24,40,.25); font-size:13px; white-space:nowrap; }
.savebar[hidden] { display:none; }
/* 저장 띠가 떠 있으면 알림은 그 위로 (겹치지 않게) */
body:has(.savebar:not([hidden])) .toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
.savebar .btn { background:#fff; color:#1F3864; border:0; }
.savebar .btn.grey { background:transparent; color:#D5DBE5; border:1px solid #4A5F86; }
@media (max-width: 640px) {
  /* 휴대폰: 줄마다 카드 한 장 (부품 조회 휴대폰 카드와 같은 모양) */
  table.users thead { display:none; }
  table.users, table.users tbody, table.users tr, table.users td { display:block; width:100%; }
  table.users { border:0; background:none; border-radius:0; overflow:visible; }
  /* 표를 감싼 흰 상자는 없앰 → 카드 사이로 바탕색이 보이게 (부품 조회 휴대폰 화면과 같게) */
  .card:has(table.users) { background:none; border:0; box-shadow:none; padding:4px 0 0; }
  table.users tr { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin-bottom:8px; }
  table.users td { border:0; padding:2px 0; font-size:13px; }
  table.users td:empty { display:none; }                  /* 해당 없는 칸(예: QSFP 없는 모델)은 카드에서 줄째 숨김 */
  /* 칸 제목을 값 앞에 (common/resize.js 가 data-label 을 붙임) */
  table.users td[data-label]:not(:empty)::before { content:attr(data-label); display:inline-block; min-width:96px; margin-right:8px;
                                                   font-size:12px; color:var(--muted); font-weight:400; }
  table.users td[data-label]:first-child::before { display:none; }
  /* 칸 제목 | 값 두 칸 — 긴 값이 줄바꿈돼도 제목 밑으로 들어가지 않게 */
  table.users td[data-label]:not(:first-child):not(:empty) { display:grid; grid-template-columns:96px minmax(0, 1fr); column-gap:8px; }
  table.users td[data-label]:not(:first-child):not(:empty)::before { min-width:0; margin-right:0; }
  input[type=text].sm { font-size:16px; }            /* 아이폰: 16px 미만 입력칸은 누르면 화면이 확대됨 (부품 조회 검색칸과 같게) */
  table.users td:first-child { font-weight:600; color:#111; font-size:15px; }
}

/* 가로로 넘치는 단추 줄: 스크롤 막대가 글자를 가리지 않게 (2026-10-04 사용자) — 얇은 막대 · 글자 아래 여백 자리에만 */
.menu, .pv-tabs, .pv-sheets { padding-bottom:6px; scrollbar-width:thin; }
.pv-thumbs { padding-bottom:8px; scrollbar-width:thin; }
.menu::-webkit-scrollbar, .pv-tabs::-webkit-scrollbar, .pv-sheets::-webkit-scrollbar, .pv-thumbs::-webkit-scrollbar { height:4px; }
.menu::-webkit-scrollbar-thumb, .pv-tabs::-webkit-scrollbar-thumb, .pv-sheets::-webkit-scrollbar-thumb, .pv-thumbs::-webkit-scrollbar-thumb { background:#C9D1DC; border-radius:4px; }

/* ===== 2026-10-05 디자인 개편 (사용자): 페이지 머리를 얇은 한 줄로 · 왼쪽 세로선 하나에 맞춤 =====
   왼쪽 세로선 = 맨 윗줄 로고 왼쪽 끝 = 페이지 아이콘 = 내용 카드 왼쪽 끝 (같은 좌우 여백 --gut)
   '‹ 메인' 단추 없앰 (로고를 누르면 메인) · 분류 작은 글씨 없앰 · 설명 문구는 넓은 화면만 */
:root { --gut:24px; }
@media (max-width: 640px) { :root { --gut:12px; } }
.top { padding-left:var(--gut); padding-right:var(--gut); }
.wrap { padding-left:var(--gut); padding-right:var(--gut); }
.phead { background:none; border:0; box-shadow:none; border-radius:0; padding:2px 0 10px; margin:0 0 12px; gap:10px;
         border-bottom:1px solid var(--line); }
.phead .back, .phead small { display:none !important; }
.phead > div { align-items:center; }
.phead .pi { width:30px; height:30px; border-radius:9px; box-shadow:none; }
.phead .pi svg { width:17px; height:17px; }
.phead h1 { font-size:18px; }
@media (max-width: 600px) {
  .phead { padding:0 0 8px; margin-bottom:10px; gap:8px; }
  .phead .pi { width:26px; height:26px; border-radius:8px; } .phead .pi svg { width:15px; height:15px; }
  .phead h1 { font-size:16px; } .phead p { display:none; }
}
/* 2026-10-05 (사용자): 부품 조회 머리 줄 기준으로 모든 페이지 통일 — 위 여백 · 아이콘 28px · 제목 17px · 아래 선 없음 */
.wrap { padding-top:10px; }
.phead { padding:0; margin:0 0 10px; border-bottom:0; gap:10px; }
.phead .pi { width:28px; height:28px; border-radius:8px; } .phead .pi svg { width:16px; height:16px; }
.phead h1 { font-size:17px; } .phead p { font-size:13px; }
@media (max-width: 600px) { .phead h1 { font-size:16px; } }
@media (max-width: 699px) { :root { --gut:12px; } }   /* 부품 조회 앱과 같은 기준(700px 미만 = 휴대폰 여백) */
/* 2026-10-05 (사용자): 페이지 머리 = 화면 폭 전체 '페이지 띠' — 윗줄 바로 아래 · 페이지 색 옅게 · 위아래 여백 같게 · 아래 선
   (카드 없는 페이지에서도 '여기는 ○○ 페이지' 가 분리돼 보이게 · 부품 조회 앱과 같은 값) */
.phead { margin:-10px calc(-1 * var(--gut)) 14px; padding:10px var(--gut); min-height:52px; box-sizing:border-box;
         background:color-mix(in srgb, var(--c, var(--navy)) 7%, #fff); border-bottom:1px solid color-mix(in srgb, var(--c, var(--navy)) 16%, var(--line)); }
.phead > div { align-items:center; }
/* 2026-10-05 (사용자): 아이콘에 입체감 · 살짝 떠 있는 느낌 — 위쪽 빛 반사 + 아래로 번지는 색 그림자 (페이지 띠 · 메인 분류 머리 아이콘 · 기능 목록 아이콘은 예전 그대로 — 사용자) */
.phead .pi, .cat .ci {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
              0 1px 2px color-mix(in srgb, var(--c, var(--navy)) 35%, transparent),
              0 6px 14px -4px color-mix(in srgb, var(--c, var(--navy)) 55%, transparent);
  transform: translateY(-1px);
}

/* 메인 분류 카드도 살짝 띄움 */
.cat { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px color-mix(in srgb, var(--c, var(--navy)) 45%, transparent); }
/* 2026-10-05 (사용자): 분류 머리 아이콘 · 페이지 띠 아이콘만 입체감 (카드 · 기능 목록 아이콘은 그대로)
   빛이 왼쪽 위 → 그림자 오른쪽 아래 · 3겹을 점점 옅고 넓게 (끝이 스며들게) · 연하게 */
.phead .pi, .cat .ci {
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.4),
              1px 2px 3px color-mix(in srgb, var(--c, var(--navy)) 18%, transparent),
              3px 4px 7px -1px color-mix(in srgb, var(--c, var(--navy)) 14%, transparent),
              5px 8px 16px -4px color-mix(in srgb, var(--c, var(--navy)) 11%, transparent);
  transform: translateY(-2px);
}
/* 휴대폰: 길게 눌렀을 때 파란 강조 · 메뉴 · 글자 선택 막음 (2026-10-05 사용자) */
a, button, .cat .fn, .cat .ch { -webkit-tap-highlight-color: transparent; }
.cat .fn, .cat .ch, .phead .pi { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* 이용 통계: 사용자 창 (2026-10-06 사용자) — 분류별 세로 막대 · 날짜별 */
.urow[data-u] { cursor:pointer; }
.uvd { max-width:820px; }
.uvd h3 small { font-weight:400; font-size:13px; margin-left:6px; }
.uvd h4 { margin:16px 0 8px; font-size:13.5px; color:var(--navy); }
.uvsum { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:#555; padding:8px 12px; background:#F7F9FC; border:1px solid var(--line); border-radius:10px; }
.uvsum b { color:#111; }
.uvbars { display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; }
.uvg { display:flex; flex-direction:column; }
.uvb { display:flex; gap:6px; height:150px; align-items:flex-end; padding:0 2px; }
.uvc { width:60px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
.uvc i { display:block; width:26px; border-radius:5px 5px 0 0; }
.uvc b { font-size:12px; color:#333; margin-bottom:2px; }
.uvc span { position:absolute; top:100%; margin-top:4px; width:64px; height:2.5em; font-size:11px; line-height:1.25; color:#555; text-align:center; word-break:keep-all;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }   /* 이름은 두 줄까지 (길면 … · 전체 이름은 마우스) — 세 줄이 되어 묶음 밑줄과 겹치던 것 (2026-10-07) */
.uvt { margin-top:40px; padding-top:4px; border-top:2px solid; font-size:12px; font-weight:700; color:#333; text-align:center; }
.udays { display:flex; gap:2px; height:120px; align-items:flex-end; padding-bottom:18px; }
.udc { flex:1; min-width:6px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
.udc i { display:block; width:100%; background:#4A84D8; border-radius:2px 2px 0 0; }
.udc i.z { background:#E3E7EE; }
.udc b { font-size:10.5px; color:#333; }
.udc span { position:absolute; top:100%; margin-top:3px; font-size:10.5px; color:#777; white-space:nowrap; }
@media (max-width: 640px) { .uvc { width:48px; } .uvc span { width:52px; } .udc b { display:none; } }
.card.tmppw { border:2px solid var(--red); background:#FFF6F4; }
.card.tmppw code { font-size:16px; font-weight:700; padding:2px 8px; background:#fff; border:1px solid var(--line); border-radius:6px; user-select:all; }

/* ---- 밝게 · 어둡게 보기 (2026-10-07 사용자 · common/theme.js) ----
   화면 전체 색을 뒤집고(흰 바탕 → 어두운 바탕) 사진 · 그림 · 로고는 다시 뒤집어 원래 색 그대로
   (페이지마다 색을 따로 고치지 않아도 기술 자료 · 부품 조회까지 한 번에 · 색 이름은 hue-rotate 로 비슷하게 유지) */
.thm { margin-left:6px; flex:none; width:32px; height:30px; display:inline-flex; align-items:center; justify-content:center;   /* 옆 '내 정보' 단추(.pill)와 같은 크기 · 모양 */
       border:1px solid #D5DBE5; border-radius:15px; background:#fff; color:var(--navy); cursor:pointer; padding:0; }
@media (max-width: 520px) { .thm { margin-left:4px; } }
.thm:hover { background:#EEF2F8; }
.top .brand + .thm { margin-left:auto; }
.thm .sun { display:none; }
html[data-theme="dark"] .thm .sun { display:block; }
html[data-theme="dark"] .thm .moon { display:none; }
html[data-theme="dark"] { filter:invert(1) hue-rotate(180deg); background:#fff; }
html[data-theme="dark"] img:not(.lp), html[data-theme="dark"] video, html[data-theme="dark"] picture, html[data-theme="dark"] iframe,
html[data-theme="dark"] [style*="background-image"] { filter:invert(1) hue-rotate(180deg); }
/* 로고(투명 바탕 · 남색 글자)는 뒤집힌 채로 → 어두운 바탕에서 밝게 보임 · 색 단추(남색 · 초록 · 빨강)는 원래 색 */
html[data-theme="dark"] .btn:not(.grey) { filter:invert(1) hue-rotate(180deg); }
/* 2026-10-10 사용자 '어둡게 보기 가시성이 떨어짐': 뒤집기 방식이라 밝은 화면의 연한 회색 → 어두운 회색이 됨
   → 어둡게 보기일 때만 뒤집기 전 색을 미리 진하게(= 뒤집힌 뒤 밝게) · 밝게 보기는 그대로 */
html[data-theme="dark"] { --muted:#3B424E; --line:#BFC6D1; }
html[data-theme="dark"] .hero { background:linear-gradient(120deg, #E6ECF6 0%, #D5DFEF 100%); color:#0B1426; }   /* 뒤집혀 어두운 남색 띠 + 밝은 글자 */
html[data-theme="dark"] .hero p { color:#273244; }
html[data-theme="dark"] .msg.note { color:#2A1D04; border-color:#C9A75F; }
html[data-theme="dark"] .cat { border-color:color-mix(in srgb, var(--c, var(--navy)) 30%, #B4BCC8); }
html[data-theme="dark"] .cat .fn i { color:color-mix(in srgb, var(--c, var(--navy)) 70%, #333); }
html[data-theme="dark"] .cat .ch small { color:color-mix(in srgb, var(--c, var(--navy)) 70%, #333); }
html[data-theme="dark"] .foot span { color:#323843; }
html[data-theme="dark"] .foot small { color:#454C58; }

/* 이용 통계 · 세부 기록 (2026-10-07) */
.uevtop { list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:3px; font-size:13px; }
.uevtop b { color:var(--muted); font-weight:600; margin-left:4px; }
.uevk { display:inline-block; border-left:3px solid #999; padding:0 6px; margin-right:6px; font-size:12px; color:var(--muted); white-space:nowrap; }
.uevs { font-style:normal; font-size:11px; background:#EEF2F7; color:#334155; border-radius:4px; padding:0 5px; margin-right:5px; }
.uevw { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:6px; }
.uevt { width:100%; border-collapse:collapse; font-size:12.5px; }
.uevt th { position:sticky; top:0; background:#fff; text-align:left; font-weight:600; padding:5px 8px; border-bottom:1px solid var(--line); }
.uevt td { padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-all; }
.uevt td:first-child { white-space:nowrap; }