/*
 * inc/portal_theme.css — 업무시스템 디자인 시스템 (2차 시안)
 *
 *   출처: `업무시스템 2차 시안/design_handoff_daewon_workportal_v2/tokens.css` + README §1·§6.
 *   값은 시안 그대로 옮겼다. 눈대중으로 바꾸지 말 것.
 *
 *   ⚠️ 시안은 oklch() · color-mix() 를 쓰지만, 구형 휴대폰 브라우저에서는 이 함수를 모르면
 *      **색이 통째로 사라진다.** 그래서 같은 결과를 미리 계산한 고정 색값으로 옮겼다.
 *      브랜드 색을 바꾸면 파생색(hover·press·tint·chart)은 inc/brand.php 가 PHP 로 다시 계산해 넣는다.
 *
 *   규칙 (README §1-2)
 *   · 단색 채움(주 색상 바탕)은 **화면당 주 동작 버튼 1개**에만.
 *   · 상태색 4종은 배지·KPI 숫자·칸반 열 표시점에만 — 버튼·링크·선택 상태에 쓰지 않는다.
 *   · 강조색(주황)은 '오늘' 한 의미, **점·막대로만**. 글자색 금지(종이 대비 2.74:1).
 *   · 선택 상태는 tint 바탕 + 주 색상 글자 + 600.
 *   · 포커스는 2px 주 색상 외곽선.
 *
 *   ⚠️ 기존 업무화면(work/list/…)은 각자 스타일을 갖고 있다. 이 파일은 전역 태그 선택자를 쓰지 않고
 *      `.dwp-` 접두사 밖으로 새어나가지 않게 짠다. 옛 변수(--dwp-*)는 이름을 남기고 값만 새 토큰을 가리킨다.
 *
 * 2026-09-17 신설 · 2026-10-14 2차 시안 반영
 */

/* ── 1. 브랜드 토큰 — 테넌트가 바꾸는 값 (inc/brand.php 가 덮어쓴다) ── */
:root{
  --brand-primary:#16325C;          /* 버튼 채움·선택·포커스·상단 머리띠 */
  --brand-accent:#E8722A;           /* '오늘' 표시점·막대 전용. 글자색 금지 */
  /* 자동 파생 (시안: color-mix in oklch — 아래는 계산 결과) */
  --brand-primary-hover:#0E2445;    /* 82% + 검정 */
  --brand-primary-press:#071730;    /* 65% + 검정 */
  --brand-primary-tint:rgba(22,50,92,.12);   /* 선택된 메뉴·칩 바탕 */
  --brand-primary-tint-solid:#D8DBE0;         /* 같은 색을 종이 위에 합성한 값 (대비 계산 기준) */
  --brand-primary-soft:rgba(22,50,92,.08);   /* 메뉴 올림 */
  --chart-1:#16325C; --chart-2:#73849E; --chart-3:#B7BFCC; --chart-4:#7d7979; --chart-5:#bab6b6;
}

/* ── 2. 시스템 토큰 — 고정 ── */
:root{
  --font:"Pretendard Variable",Pretendard,-apple-system,system-ui,"Malgun Gothic",sans-serif;

  --color-bg:#f3f2f2;          /* 종이 바탕 */
  --color-surface:#eae9e9;     /* 카드·패널 바탕 */
  --color-text:#201e1d;        /* 잉크 */
  --color-divider:rgba(32,30,29,.16);
  --row-rule:rgba(32,30,29,.08);
  --ink-hover:rgba(32,30,29,.07);
  --ink-press:rgba(32,30,29,.14);
  /* 3차 시안 신규 (2026-10-15, README 「고정 hex」) */
  --cal-outside-bg:#EDECEC;   /* 다른 달 날짜 칸 */
  --line-dashed:#9B9797;      /* 건너뜀·옮겨감 칩 점선 */
  --scrim:rgba(32,30,29,.4);  /* 시트·대화상자 뒤 가림막 */

  --neutral-100:#f8f4f4; --neutral-200:#eae7e7; --neutral-300:#d7d3d3; --neutral-400:#bab6b6;
  --neutral-500:#9b9797; --neutral-600:#7d7979; --neutral-700:#605d5d; --neutral-800:#444141; --neutral-900:#2d2b2b;

  /* 상태 4색 — 테넌트와 무관하게 고정. 옅은 바탕 + 짙은 글자 + 아이콘으로만 */
  --st-wait-bg:#eae7e7;  --st-wait-fg:#444141;  --st-wait-dot:#7d7979;
  --st-prog-bg:#e9f8ff;  --st-prog-fg:#004961;  --st-prog-dot:#38a6cf;
  --st-done-bg:#D5F5DE;  --st-done-fg:#0F4F2E;  --st-done-dot:#318F5A;   /* oklch(.94 .045 155) / (.38 .085 155) / (.58 .12 155) */
  --st-risk-bg:#FFDDD7;  --st-risk-fg:#9B1F1B;  --st-risk-dot:#D33C33;   /* oklch(.93 .045 28) / (.45 .16 28) / (.58 .19 28) */

  --space-1:5px; --space-2:10px; --space-3:15px; --space-4:20px; --space-6:30px; --space-8:40px;
  --radius-sm:1px; --radius-md:2px; --radius-lg:4px;
  --shadow-sm:0 1px 2px rgba(45,43,43,.14);
  --shadow-md:0 3px 10px rgba(45,43,43,.16);
  --shadow-lg:0 12px 32px rgba(45,43,43,.22);

  --topbar-h:61px;   /* 머리띠 3px 포함 */
  --sidebar-w:240px;
  --rail-w:72px;     /* 768–1199 */
  --appbar-h:56px;   /* <768 */
  --tabbar-h:68px;   /* <768 하단 탭 */
  --content-pad:24px;
}

/* ── 3. 1차 토큰(--dwp-*) → 2차 토큰 이관 (README §6) ──
   이름은 그대로 두고 값만 바꾼다. home·login·ERP·작업관리·접수목록이 이 이름을 쓰고 있다. */
:root{
  --dwp-navy:var(--brand-primary);
  --dwp-navy-deep:var(--brand-primary-press);
  --dwp-navy-hover:var(--brand-primary-hover);
  --dwp-link:var(--brand-primary);          /* 글자 버튼·링크 = 주 색상 (시안 btn-ghost) */
  --dwp-accent:var(--brand-accent);         /* ⚠️ 점·막대 전용 */
  --dwp-accent-hover:#D4641F;
  --dwp-bg:var(--color-bg);
  --dwp-ink:var(--color-text);
  --dwp-ink-2:var(--neutral-800);
  --dwp-sub:var(--neutral-700);
  --dwp-mute:var(--neutral-700);            /* 시안의 보조·메타는 700 — 1차의 #A8B0BB(2.19:1)는 대비 미달이라 폐기 */
  --dwp-line:var(--color-divider);
  --dwp-line-md:var(--color-divider);
  --dwp-line-soft:var(--row-rule);
  --dwp-surface:var(--color-surface);
  --dwp-surface-2:var(--neutral-200);

  /* 상태 — 1차의 대기(주황계)·진행(남색계)은 시안의 대기(회색)·진행(청록)으로 */
  --dwp-wait-bg:var(--st-wait-bg);  --dwp-wait-fg:var(--st-wait-fg);  --dwp-wait-bd:var(--neutral-300);
  --dwp-go-bg:var(--st-prog-bg);    --dwp-go-fg:var(--st-prog-fg);    --dwp-go-bd:#cbeeff;
  --dwp-done-bg:var(--st-done-bg);  --dwp-done-fg:var(--st-done-fg);  --dwp-done-bd:#A9E3BA;
  --dwp-risk-bg:var(--st-risk-bg);  --dwp-risk-fg:var(--st-risk-fg);  --dwp-risk-bd:#F5B7AD;
  --dwp-off-bg:var(--neutral-200);  --dwp-off-fg:var(--neutral-800);  --dwp-off-bd:var(--neutral-300);

  /* 간격 — 1차 이름 유지 (값은 그대로) */
  --dwp-s1:4px; --dwp-s2:8px; --dwp-s3:10px; --dwp-s4:14px;
  --dwp-s5:16px; --dwp-s6:20px; --dwp-s7:24px; --dwp-s8:32px;

  /* 모서리 — 시안은 2px 하나 (카드·버튼·입력 공통), 큰 패널 4px */
  --dwp-r-ctl:var(--radius-md);
  --dwp-r-card:var(--radius-md);

  /* 레이아웃 셸 */
  --dwp-wrap-site:1200px;
  --dwp-wrap-app:1440px;
  --dwp-navw:var(--sidebar-w);
  --dwp-navw-mini:var(--rail-w);
  --dwp-topw:var(--topbar-h);
  --dwp-topw-m:var(--appbar-h);
  --dwp-tabh:var(--tabbar-h);
  --dwp-pad:var(--content-pad);
  --dwp-pad-t:20px;
  --dwp-pad-m:14px;
  --dwp-sec:56px; --dwp-sec-m:36px;
  --dwp-gap:14px;
  --dwp-shadow:var(--shadow-sm);
}

@media (max-width:1199px){ :root{ --dwp-pad:var(--dwp-pad-t) } }
@media (max-width:767px){
  :root{ --dwp-pad:var(--dwp-pad-m); --dwp-topw:var(--appbar-h); --dwp-sec:var(--dwp-sec-m) }
}

/* ── 기본 ────────────────────────────────────────────────── */
.dwp{
  background:var(--color-bg); color:var(--color-text);
  font-family:var(--font); font-size:14px; line-height:1.5;
}
.dwp *,.dwp *::before,.dwp *::after{box-sizing:border-box}
.dwp a{color:var(--brand-primary);text-decoration:none}
.dwp a:hover{text-decoration:underline;text-underline-offset:3px}
.dwp button{font:inherit}
.dwp :focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

.dwp-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* Phosphor Duotone 아이콘 — 크기만 정한다(아이콘만 있는 버튼은 aria-label 필수) */
.dwp-ic{font-size:18px;line-height:1;flex:none;display:inline-block}
.dwp-ic.sm{font-size:16px} .dwp-ic.lg{font-size:22px}

/* ── 타이포 (README §1-5) ────────────────────────────────── */
.dwp-kicker{font-size:12px;font-weight:400;color:var(--neutral-700);margin-bottom:2px}
.dwp-h1{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.dwp-h2{font-size:18px;font-weight:600;letter-spacing:-.015em}
.dwp-h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dwp-body{font-size:14px;font-weight:400;line-height:1.5}
.dwp-sub{font-size:13px;font-weight:400;color:var(--neutral-700)}
.dwp-meta{font-size:12px;font-weight:400;color:var(--neutral-700)}
.dwp-kpi{font-size:34px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:1199px){ .dwp-h1{font-size:28px} .dwp-kpi{font-size:26px} }
@media (max-width:767px){ .dwp-h1{font-size:24px} .dwp-kpi{font-size:24px} }

/* ── 화면 머리 — 좌 [그룹명 / h1], 우 버튼(보조 → 주 → ⋯) ── */
.dwp-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.dwp-head .t{flex:1;min-width:0}
.dwp-head .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── 카드 ────────────────────────────────────────────────── */
.dwp-card{
  background:var(--color-surface); border:0;
  border-radius:var(--radius-md); overflow:hidden;
}
.dwp-card-h{
  display:flex; align-items:center; gap:var(--dwp-s2);
  padding:var(--dwp-s4) var(--dwp-s5) var(--dwp-s3);
}
.dwp-card-h .sp{flex:1}
.dwp-card-b{padding:0 var(--dwp-s5) var(--dwp-s5)}
.dwp-card-b.tight{padding:0 var(--dwp-s3) var(--dwp-s4)}
.dwp-card-kicker{font-size:11px;letter-spacing:.06em;color:var(--brand-primary);font-weight:600}

/* ── 상태 배지 (README §1-3) — 아이콘 + 라벨, 색만으로 구분하지 않는다 ── */
.dwp-badge,.dwp-st{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:500; line-height:1.3;
  border-radius:var(--radius-md); padding:2px 7px; white-space:nowrap; border:1px solid transparent;
}
.dwp-badge i,.dwp-st i{font-size:14px}
.dwp-badge .n{font-variant-numeric:tabular-nums;font-weight:700}
.dwp-badge.wait,.dwp-st.wait{background:var(--st-wait-bg);color:var(--st-wait-fg)}
.dwp-badge.go,.dwp-badge.prog,.dwp-st.prog{background:var(--st-prog-bg);color:var(--st-prog-fg)}
.dwp-badge.done,.dwp-st.done{background:var(--st-done-bg);color:var(--st-done-fg)}
.dwp-badge.risk,.dwp-st.risk{background:var(--st-risk-bg);color:var(--st-risk-fg)}
.dwp-badge.off{background:var(--dwp-off-bg);color:var(--dwp-off-fg)}
/* 최종완료 — 바탕 투명 + 완료색 테두리 */
.dwp-badge.final,.dwp-st.final{background:transparent;color:var(--st-done-fg);border-color:var(--st-done-fg)}

/* 상태 표시점 (칸반 열 머리 등) */
.dwp-sdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--st-wait-dot)}
.dwp-sdot.prog{background:var(--st-prog-dot)} .dwp-sdot.done{background:var(--st-done-dot)}
.dwp-sdot.risk{background:var(--st-risk-dot)} .dwp-sdot.today{background:var(--brand-accent)}

/* 건수 뱃지 — 잉크 바탕 + 종이 글자 (시안 상단바 메신저). 강조색을 쓰지 않는다 */
.dwp-alert{
  display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--color-text); color:var(--color-bg);
  font-size:10px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
}
/* hidden 속성을 단 뱃지는 반드시 숨긴다 — 위 display 지정이 브라우저 기본 [hidden] 규칙을 이겨 「0」이 보이던 문제 */
.dwp-alert[hidden],.dwp-count[hidden]{display:none !important}
/* 사이드바·탭 건수 — 회색 */
.dwp-count{font-size:11px;font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:var(--radius-md);
  background:var(--neutral-200);color:var(--neutral-800);line-height:1.5}

/* ── 버튼 (README §1-2, 시안 .btn) ────────────────────────
   .dwp-btn          보조 — 투명 + 구분선 테두리 + 잉크 글자
   .dwp-btn.primary  주 동작 — 화면당 1개
   .dwp-btn.ghost    글자 버튼 — 주 색상 글자
   .dwp-btn.accent   1차 이름 호환 — 주 동작과 같다(주황 채움 금지)               */
.dwp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:8px 14px; border-radius:var(--radius-md);
  font-family:var(--font); font-size:14px; font-weight:600; line-height:1.2; cursor:pointer;
  border:1px solid var(--color-divider); background:transparent; color:var(--color-text);
  text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.dwp-btn i{font-size:18px}
.dwp-btn:hover{background:var(--ink-hover);text-decoration:none;color:var(--color-text)}
.dwp-btn:active{background:var(--ink-press)}
.dwp-btn.primary,.dwp-btn.accent{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-bg)}
.dwp-btn.primary:hover,.dwp-btn.accent:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:var(--color-bg)}
.dwp-btn.primary:active,.dwp-btn.accent:active{background:var(--brand-primary-press)}
.dwp-btn.ghost{border-color:transparent;color:var(--brand-primary);padding-inline:6px}
.dwp-btn.ghost:hover{background:var(--brand-primary-tint)}
.dwp-btn.icon{width:36px;height:36px;min-height:36px;padding:0;border-color:transparent}
.dwp-btn.icon i{font-size:20px}
.dwp-btn.sm{min-height:30px;padding:5px 10px;font-size:13px}
.dwp-btn.danger{color:var(--st-risk-fg)}
.dwp-btn[disabled],.dwp-btn.off{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){ .dwp-btn{min-height:44px} .dwp-btn.icon{width:44px;height:44px} .dwp-btn.sm{min-height:40px} }
.dwp-btn:focus-visible,.dwp-tbtn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

/* 화면 툴바 버튼 — 1차 이름 (work·list). 2차 규칙: 보조 모양, .accent 는 주 동작 채움 */
.dwp-tbtn{
  display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px 11px;
  border-radius:var(--radius-md); border:1px solid var(--color-divider); background:transparent;
  color:var(--color-text); font-family:inherit; font-size:13px; font-weight:600; line-height:1.3;
  text-decoration:none; cursor:pointer; white-space:nowrap;
}
.dwp-tbtn i{font-size:17px}
.dwp-tbtn:hover{background:var(--ink-hover);color:var(--color-text);text-decoration:none}
.dwp-tbtn.accent,.dwp-tbtn.primary{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-bg)}
.dwp-tbtn.accent:hover,.dwp-tbtn.primary:hover{background:var(--brand-primary-hover);color:var(--color-bg)}
.dwp-tbtn.lock{color:var(--neutral-700)}
.dwp-tbtn .dwp-alert{margin-left:2px}
@media (pointer:coarse){ .dwp-tbtn{min-height:40px} }

/* 칩 (현장 필터 등) — 선택: tint + 주 색상 테두리·글자 */
.dwp-chip{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;min-height:32px;padding:0 11px;
  font-size:13px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:transparent;
  color:var(--color-text);cursor:pointer;font-family:inherit}
.dwp-chip .c{font-size:11px;color:var(--neutral-700);font-variant-numeric:tabular-nums}
.dwp-chip:hover{background:var(--ink-hover)}
.dwp-chip[aria-pressed="true"],.dwp-chip.on{background:var(--brand-primary-tint);border-color:var(--brand-primary);color:var(--brand-primary);font-weight:600}

/* 세그먼트 */
.dwp-seg{display:inline-flex;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.dwp-seg > *{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;cursor:pointer;
  background:transparent;border:0;color:var(--color-text);font-family:inherit;text-decoration:none}
.dwp-seg > * + *{border-left:1px solid var(--color-divider)}
.dwp-seg > .on,.dwp-seg > [aria-pressed="true"],.dwp-seg > [aria-selected="true"]{background:var(--brand-primary);color:var(--color-bg)}
.dwp-seg > *:hover:not(.on):not([aria-pressed="true"]):not([aria-selected="true"]){background:var(--ink-hover)}
.dwp-seg .c,.dwp-seg b{font-weight:600;font-variant-numeric:tabular-nums}
/* 탭은 따로 만들지 않는다 — 시안의 탭(견적|수주, 대기|전환됨|반려·중복, 단계 탭)은 모두 이 세그먼트다.
   탭으로 쓸 때: <div class="dwp-seg" role="tablist"><button role="tab" aria-selected="true">…  (aria-selected 가 선택 표시) */

/* ── 입력 ────────────────────────────────────────────────── */
.dwp-in{
  width:100%; min-height:36px; padding:6px 10px;
  border:1px solid var(--color-divider); border-radius:var(--radius-md);
  background:var(--color-surface); color:var(--color-text); font:inherit; font-size:14px; outline:none;
  caret-color:var(--brand-primary); transition:border-color .15s;
}
.dwp-in::placeholder{color:rgba(32,30,29,.65);opacity:1}
.dwp-in:hover{border-color:rgba(32,30,29,.45)}
.dwp-in:focus,.dwp-in:focus-visible{border-color:var(--brand-primary);outline:2px solid var(--brand-primary);outline-offset:0}
.dwp-in:disabled{background:var(--neutral-200);color:var(--neutral-700)}
.dwp-label{display:block;font-size:12px;font-weight:400;color:rgba(32,30,29,.7);margin-bottom:5px}
.dwp-req{color:var(--st-risk-fg);margin-left:2px}
.dwp-help{font-size:12px;color:var(--neutral-700);margin-top:6px;line-height:1.5}

/* 오류·안내 — 색·문구·해결 방법을 함께 */
.dwp-err{
  background:var(--st-risk-bg); color:var(--st-risk-fg); border:0;
  border-radius:var(--radius-md); padding:11px 14px; font-size:13px; line-height:1.6;
}
.dwp-note{
  background:var(--st-wait-bg); color:var(--st-wait-fg); border:0;
  border-radius:var(--radius-md); padding:11px 14px; font-size:13px; line-height:1.65;
}
.dwp-note b,.dwp-err b{color:inherit;font-weight:700}

/* ── 목록 줄 ─────────────────────────────────────────────── */
.dwp-row{
  display:flex; align-items:center; gap:var(--dwp-s2);
  padding:8px 6px; border-radius:var(--radius-md); font-size:13.5px; color:var(--color-text);
}
.dwp-row:hover{background:var(--ink-hover);text-decoration:none}
.dwp-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwp-row .s{font-size:12px;color:var(--neutral-700);white-space:nowrap;font-variant-numeric:tabular-nums}
.dwp-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--neutral-400)}
.dwp-dot.now{background:var(--brand-accent)}      /* '오늘' — 강조색은 점으로만 */
.dwp-dot.mine{background:var(--brand-primary)}

.dwp-empty{color:var(--neutral-700);font-size:13px;text-align:center;padding:24px 8px;
  border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-divider)}
.dwp-loading{color:var(--neutral-700);font-size:13px;padding:18px 6px}
.dwp-mute{color:var(--neutral-700)}
.dwp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ── 표 (README 04 접수 목록 · 05 견적 목록) ─────────────────
   <div class="dwp-table-wrap"><table class="dwp-table">…</table></div>
   · 머리행 neutral-200 바탕 12/600 · 행 44(촘촘 .dense 36, 태블릿 52) · 구분선 row-rule · 호버 잉크
   · 선택 행: <tr class="sel"> 또는 aria-selected="true" → tint 바탕
   · 숫자·금액 칸: class="num" (오른쪽 정렬 + 고정폭 숫자). 「원」은 머리글에만
   · 정렬 머리글: <th aria-sort="none|ascending|descending"><a|button class="dwp-sort">접수일</a></th>
     — a/button 이라 Enter 로도 정렬된다. 아이콘은 화면이 넣는다(caret-up-down / caret-down).
   · 휴대폰에서 가로 스크롤 대신 카드로: <table class="dwp-table m-cards">, 각 td 에 data-label="담당"
     — .m-title(제목 줄, 굵게) · .m-hide(휴대폰에서 숨김) · .m-act(버튼 줄) */
.dwp-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dwp-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.45;color:var(--color-text)}
.dwp-table th{background:var(--neutral-200);color:var(--neutral-800);font-size:12px;font-weight:600;text-align:left;
  padding:0 10px;height:36px;white-space:nowrap;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.dwp-table td{padding:6px 10px;height:44px;border-bottom:1px solid var(--row-rule);vertical-align:middle}
.dwp-table tbody tr:hover{background:var(--ink-hover)}
.dwp-table tbody tr.sel,.dwp-table tbody tr[aria-selected="true"]{background:var(--brand-primary-tint)}
.dwp-table tfoot td{font-weight:600;border-top:1px solid var(--color-divider);border-bottom:0}
.dwp-table .num,.dwp-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dwp-table .ctr{text-align:center}
.dwp-table .sub{display:block;font-size:12px;color:var(--neutral-700);line-height:1.3}
.dwp-table .b{font-weight:600}
.dwp-table a{color:var(--brand-primary)}
.dwp-table.dense td{height:36px;padding-top:3px;padding-bottom:3px}
.dwp-table th[aria-sort]{cursor:pointer;user-select:none}
.dwp-table .dwp-sort{display:inline-flex;align-items:center;gap:4px;color:inherit;font:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:none}
.dwp-table .dwp-sort i{font-size:14px;color:var(--neutral-600)}
.dwp-table th[aria-sort="ascending"],.dwp-table th[aria-sort="descending"]{color:var(--color-text)}
.dwp-table th[aria-sort="ascending"] .dwp-sort i,.dwp-table th[aria-sort="descending"] .dwp-sort i{color:var(--color-text)}
.dwp-table .dwp-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-md);border:0;
  background:transparent;color:var(--color-text);font-size:18px;cursor:pointer;text-decoration:none;vertical-align:middle}
.dwp-table .dwp-ic:hover{background:var(--ink-hover)}
@media (min-width:768px) and (max-width:1199px){
  .dwp-table td{height:52px}
  .dwp-table.dense td{height:44px}
}
@media (max-width:767px){
  .dwp-table.m-cards,.dwp-table.m-cards tbody,.dwp-table.m-cards tfoot,.dwp-table.m-cards tr,.dwp-table.m-cards td{display:block;width:auto}
  .dwp-table.m-cards thead{display:none}
  .dwp-table.m-cards tr{padding:10px 2px;border-bottom:1px solid var(--row-rule)}
  .dwp-table.m-cards tbody tr:hover{background:transparent}
  .dwp-table.m-cards td{height:auto;border:0;padding:2px 0;display:flex;gap:10px;align-items:baseline;text-align:left}
  .dwp-table.m-cards td[data-label]::before{content:attr(data-label);flex:0 0 72px;font-size:12px;color:var(--neutral-700)}
  .dwp-table.m-cards td.num{justify-content:flex-start}
  .dwp-table.m-cards td.m-title{font-size:15px;font-weight:600}
  .dwp-table.m-cards td.m-title::before{display:none}
  .dwp-table.m-cards td.m-hide{display:none}
  .dwp-table.m-cards td.m-act{flex-wrap:wrap;padding-top:6px}
  .dwp-table.m-cards td.m-act::before{display:none}
  .dwp-table.m-cards td:empty{display:none}
  .dwp-table.m-cards .dwp-ic{width:44px;height:44px}
}

/* ── 옛 화면 본문을 2차 모양으로 — <body class="dwp-b2"> 를 단 화면에만 ────────────
   수정지시서 2026-10-15 §2. 옛 업무화면 19개가 복사해 쓰던 공통 규칙(.bar · .btn · .tab · .toast · .modal ·
   .note · .empty · .fg · 표)의 **색·테두리·모서리·제목 크기만** 2차 시안으로 바꾼다. 여백·배치는 각 화면 것을 둔다.
   body.dwp-b2 를 앞에 붙여 화면의 같은 이름 규칙보다 우선한다(.btn.go 처럼 두 단계인 규칙보다도 높다).
   ⚠ 화면에 새 변형(.btn.xxx)을 만들면 여기 기본값(투명 바탕)에 덮이므로 그 화면에서 body.dwp-b2 를 붙여 쓴다. */
body.dwp-b2{background:var(--color-bg);color:var(--color-text);font-family:var(--font)}
body.dwp-b2 input,body.dwp-b2 select,body.dwp-b2 textarea,body.dwp-b2 button{font-family:inherit}
/* 화면 머리 — 투명 바탕 · 제목 32/600 (태블릿 28 · 휴대폰 24) · 고정하지 않음 */
body.dwp-b2 .bar{background:transparent;border-bottom:0;box-shadow:none;position:static;padding-top:22px;padding-bottom:10px}
body.dwp-b2 .bar .t{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--color-text)}
/* 버튼 — 기본은 보조(투명 + 테두리), 주 동작 .go 만 채움 */
body.dwp-b2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;line-height:1.2;
  border:1px solid var(--color-divider);background:transparent;color:var(--color-text);border-radius:var(--radius-md);font-weight:600}
body.dwp-b2 .btn:hover{background:var(--ink-hover);border-color:var(--color-divider);color:var(--color-text)}
body.dwp-b2 .btn.go{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-bg)}
body.dwp-b2 .btn.go:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:var(--color-bg)}
/* 위험·주의 버튼도 상태색을 쓰지 않는다(README §1-2) — 확인 창이 안전장치 */
body.dwp-b2 .btn.danger,body.dwp-b2 .btn.warn,body.dwp-b2 .btn.del,body.dwp-b2 .btn-del{background:transparent;border-color:var(--color-divider);color:var(--color-text)}
body.dwp-b2 .btn.danger:hover,body.dwp-b2 .btn.warn:hover,body.dwp-b2 .btn.del:hover,body.dwp-b2 .btn-del:hover{background:var(--ink-hover)}
body.dwp-b2 .btn:disabled,body.dwp-b2 .btn[disabled]{opacity:.5;cursor:not-allowed}
body.dwp-b2 .btn i[class*="ph-"]{font-size:17px}
/* 이모지를 바꾼 아이콘과 글자 사이 — gap 이 없는 옛 버튼·제목에서도 붙지 않게. gap 이 있는 .btn 은 0 */
body.dwp-b2 i.ph-duotone{margin-right:.3em;vertical-align:-.12em}
body.dwp-b2 .btn i.ph-duotone,body.dwp-b2 .dwp-btn i.ph-duotone,body.dwp-b2 .dwp-st i.ph-duotone,body.dwp-b2 .dwp-chip i.ph-duotone,
body.dwp-b2 .dwp-top i.ph-duotone,body.dwp-b2 .dwp-side i.ph-duotone,body.dwp-b2 .dwp-rail i.ph-duotone,body.dwp-b2 .dwp-fly i.ph-duotone,
body.dwp-b2 .dwp-tab i.ph-duotone,body.dwp-b2 .dwp-draw i.ph-duotone,body.dwp-b2 .dwp-dlg i.ph-duotone,body.dwp-b2 .dwp-menu i.ph-duotone{margin-right:0;vertical-align:baseline}
/* 탭·쪽번호 — 선택 = tint 바탕 + 주 색상 글자 + 600 (채움 아님) */
body.dwp-b2 .tab{border:1px solid var(--color-divider);background:transparent;color:var(--color-text);border-radius:var(--radius-md);font-weight:400}
body.dwp-b2 .tab:hover{background:var(--ink-hover)}
body.dwp-b2 .tab.on,body.dwp-b2 .tab.active{background:var(--brand-primary-tint);border-color:var(--brand-primary);color:var(--brand-primary);font-weight:600}
body.dwp-b2 .tab .n{background:var(--ink-hover);border-radius:var(--radius-md);font-variant-numeric:tabular-nums}
body.dwp-b2 .tab.on .n{background:var(--brand-primary-soft)}
body.dwp-b2 .pager button.cur,body.dwp-b2 .pagination .current{background:var(--brand-primary-tint);border-color:var(--brand-primary);color:var(--brand-primary);font-weight:600}
/* 알림 띠 · 창 */
body.dwp-b2 .toast{background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
body.dwp-b2 .mask,body.dwp-b2 .modal-overlay{background:rgba(32,30,29,.4)}
body.dwp-b2 .modal{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
body.dwp-b2 .modal h3{font-size:18px;font-weight:600;color:var(--color-text)}
/* 안내 · 경고 · 빈 상태 */
body.dwp-b2 .note{background:var(--st-wait-bg);border-color:transparent;color:var(--st-wait-fg);border-radius:var(--radius-md)}
body.dwp-b2 .note b{color:inherit}
body.dwp-b2 .warnbox{background:var(--st-risk-bg);border-color:transparent;color:var(--st-risk-fg);border-radius:var(--radius-md)}
body.dwp-b2 .empty{background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--color-divider);color:var(--neutral-700);border-radius:var(--radius-md)}
/* 입력 */
body.dwp-b2 .fg input,body.dwp-b2 .fg select,body.dwp-b2 .fg textarea,body.dwp-b2 .filters select,body.dwp-b2 .filters input{
  background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);color:var(--color-text)}
body.dwp-b2 .fg input:focus,body.dwp-b2 .fg select:focus,body.dwp-b2 .fg textarea:focus,body.dwp-b2 .filters select:focus,body.dwp-b2 .filters input:focus{
  border-color:var(--brand-primary);outline:2px solid var(--brand-primary);outline-offset:0}
body.dwp-b2 .fg label{color:var(--neutral-700);font-weight:400}
/* 표 — .dwp-table 과 같은 모양 (머리행 neutral-200 · 12/600 · 행 구분선) */
body.dwp-b2 .dwp-main table th{background:var(--neutral-200);color:var(--neutral-800);font-size:12px;font-weight:600;border-color:var(--color-divider)}
body.dwp-b2 .dwp-main table td{border-color:var(--row-rule)}
body.dwp-b2 .dwp-main table tbody tr:hover{background:var(--ink-hover)}
@media (max-width:1199px){
  body.dwp-b2 .bar .t{font-size:28px}
  body.dwp-b2 .btn{min-height:44px}          /* 터치 44 (README §5) */
}
@media (max-width:767px){
  body.dwp-b2 .bar{padding-top:14px}
  body.dwp-b2 .bar .t{font-size:24px;flex-basis:100%}
}

/* ── 반응형 그리드 ── 홈 포틀릿은 빈자리 없이 재배치 (README §2 모듈 on/off) ── */
.dwp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--dwp-s4)}
.dwp-grid > .span2{grid-column:span 2}
@media (max-width:767px){
  .dwp-grid{grid-template-columns:1fr}
  .dwp-grid > .span2{grid-column:auto}
  .dwp-body,.dwp-row{font-size:15px}
}

/* ── 공통 셸 ────────────────────────────────────────────── */
.dwp-wrap{width:100%;margin:0 auto;padding-left:var(--dwp-pad);padding-right:var(--dwp-pad)}
.dwp-wrap.site{max-width:var(--dwp-wrap-site)}
.dwp-wrap.app {max-width:var(--dwp-wrap-app)}

/* 업무면 본문 — 시안 padding 26 24 0 */
.dwp-body{padding-top:26px;padding-bottom:70px;min-height:calc(100vh - var(--dwp-topw))}
@media (max-width:767px){ .dwp-body{padding-top:16px;padding-bottom:calc(var(--dwp-tabh) + 16px)} }

/* 업무면 공통 푸터 — 낮고 조용하게 */
.dwp-foot{border-top:1px solid var(--row-rule);background:transparent;margin-top:28px}
.dwp-foot .in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:14px;padding-bottom:14px;font-size:12px;color:var(--neutral-700)}
.dwp-foot .in .sp{flex:1}
.dwp-foot a{color:var(--neutral-700)}
@media (max-width:767px){ .dwp-foot{margin-bottom:var(--dwp-tabh)} }

/* 모션 감소 설정 존중 */
@media (prefers-reduced-motion:reduce){
  .dwp *,.dwp-shell *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

@media print{ .dwp-noprint{display:none !important} }