/* WEB DOCTOR OS 관리자 공통 레이아웃/컴포넌트 — App Shell(Sidebar+Header+
   Main), 배지, 카드, 테이블, 버튼, empty/loading/error state.

   Design System 개편 — 이전에는 work-requests.css/blog-contents.css에
   흩어져 있던 배지(success/info)/action-bar/hint-note/timeline-visibility/
   item-done, control-center.css의 cc-layout/cc-domain-title을 전부 이
   파일로 승격했다(요구사항 13번 — 도메인 CSS 복제 금지, 공통은 base로).
   기능(API 매핑/상태기계/라우트)은 전혀 변경하지 않았다 — 시각 레이어만. */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--wd-font-sans);
  font-size: var(--wd-font-size-base);
  line-height: var(--wd-line-height-body);
  color: var(--wd-color-text-primary);
  background: var(--wd-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

h1, h2, h3, h4, dl, dd {
  margin: 0;
}

/* ── App Shell ─────────────────────────────────────────────────────── */

.wd-shell {
  display: grid;
  grid-template-columns: var(--wd-sidebar-width) 1fr;
  grid-template-rows: 100%;
  min-height: 100vh;
}

/* Sidebar — 다크 네이비(사용자 제공 레퍼런스 반영, tokens.css의
   --wd-sidebar-* 참고). Header/본문은 계속 밝은 톤 — 전체 다크모드가
   아니라 "항상 떠있는 메인 네비게이션 anchor"에만 어두운 톤을 준다. */
.wd-sidebar {
  background: var(--wd-sidebar-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* 사이드바 자체는 스크롤하지 않는다 — 스크롤은 안쪽 .wd-nav 하나만
     담당한다(브랜드 영역/계정 카드는 항상 고정). 예전엔 이 컨테이너도
     overflow-y:auto라서 .wd-nav와 이중으로 스크롤바가 겹쳐 보기 흉했다
     (사용자가 "패널 안쪽으로 파고든다"고 지적한 원인). */
  overflow: hidden;
}

.wd-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--wd-space-3);
  /* CONTROL CENTER VISUAL REDESIGN V2 — 상단 로고 영역 높이 축소. */
  padding: var(--wd-space-5) var(--wd-space-5) var(--wd-space-4);
  border-bottom: 1px solid var(--wd-sidebar-border);
  /* 대시보드로 가는 링크가 됨 — <a>의 기본 밑줄/색상 상속을 지운다. */
  text-decoration: none;
  transition: background-color 0.14s ease;
}

.wd-sidebar__brand:hover {
  background: var(--wd-sidebar-bg-hover);
}

.wd-sidebar__brand-mark {
  width: 44px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--wd-radius-md);
  background: transparent;
  color: var(--wd-color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--wd-font-weight-bold);
  letter-spacing: -0.02em;
}

/* 실사용자 지시(2026-08-29): "좌측사이드바를 지금보다 50% 더키워 텍스트
   조금더 키워" — 사이드바 폭은 이미 232→348px로 키웠고, 사이드바 전용
   텍스트도 이 아래에서 같이 키운다(다른 화면 typography 토큰은 그대로
   둔다 — 사이드바만 커지길 원한 것이므로 공용 --wd-font-size-sm 등은
   건드리지 않는다). */

.wd-sidebar__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wd-sidebar__brand-text {
  min-width: 0;
}

.wd-sidebar__brand-name {
  font-size: 18px;
  font-weight: var(--wd-font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--wd-sidebar-text-active);
  line-height: 1.2;
}

.wd-sidebar__brand-tagline {
  margin-top: 2px;
  font-size: var(--wd-font-size-xs);
  color: var(--wd-sidebar-text);
}

.wd-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--wd-space-4) var(--wd-space-3) var(--wd-space-6);
  /* 요즘 스타일 얇은 스크롤바 — 기본 브라우저 회색 막대(패널 안쪽을 파고드는
     넓은 스크롤바) 대신, 채팅 스레드(portal.css .wdp-chat-thread)와 같은
     패턴을 사이드바에도 적용한다(사용자 요청 — 전 페이지 공통 처리). */
  scrollbar-width: thin;
  scrollbar-color: var(--wd-sidebar-border) transparent;
}

.wd-nav::-webkit-scrollbar {
  width: 6px;
}

.wd-nav::-webkit-scrollbar-track {
  background: transparent;
}

.wd-nav::-webkit-scrollbar-thumb {
  background: var(--wd-sidebar-border);
  border-radius: 4px;
}

.wd-nav:hover::-webkit-scrollbar-thumb {
  background: var(--wd-sidebar-text);
}

.wd-nav__group-title {
  padding: var(--wd-space-5) var(--wd-space-3) var(--wd-space-2);
  font-size: 14px;
  font-weight: var(--wd-font-weight-semibold);
  color: var(--wd-sidebar-group-title);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wd-nav__group-title:first-child {
  padding-top: var(--wd-space-2);
}

/* 사이드바 그룹 헤더 접기/펼치기 — 관제센터 "전체 업무 현황" 접기
   패턴(control-center.css의 .wd-cc-domain-toggle)을 사이드바 전체
   그룹으로 일반화했다(shell.js initNavGroupCollapse). data-nav-group이
   있는 헤더만 클릭 가능한 토글이 된다 — "마케팅" 최상위 타이틀처럼
   순수 구분용 텍스트로 남는 헤더는 이 속성을 갖지 않는다(base.html). */
.wd-nav__group-title[data-nav-group] {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.wd-nav__group-title[data-nav-group]:hover {
  color: var(--wd-sidebar-text-hover);
}

.wd-nav__group-chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.wd-nav__group-chevron::before {
  content: "\25BE"; /* ▾ */
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.wd-nav__group-title[aria-expanded="true"] .wd-nav__group-chevron::before {
  transform: rotate(0deg);
}

/* "마케팅" 상위 그룹 아래에 딸린 서브그룹 헤더(마케팅매출/영업매출) —
   완전히 새 디자인 언어를 만들지 않고 기존 .wd-nav__group-title을 살짝
   변형(폰트 소폭 축소 + 좌측 들여쓰기)해서 "마케팅" 밑에 속한다는 위계만
   드러낸다. */
.wd-nav__group-title.wd-nav__group-title--sub {
  padding-left: calc(var(--wd-space-3) + 12px);
  font-size: 11.5px;
}

/* 서브그룹(마케팅매출/영업매출) 소속 상품명 항목 — 목록 화면
   (marketing_products_list.html)을 카테고리로 필터링해서 여는 링크일
   뿐이라 개별 아이콘을 새로 만들지 않는다(과설계 금지). 아이콘이 있는
   형제 항목들과 텍스트 시작 위치가 맞도록 아이콘+gap 너비만큼
   들여쓴다. */
.wd-nav__item.wd-nav__item--sub {
  padding-left: 40px;
}

.wd-nav__item {
  display: flex;
  align-items: center;
  gap: var(--wd-space-3);
  padding: 10px var(--wd-space-3);
  margin-bottom: 2px;
  border-radius: var(--wd-radius-md);
  font-size: 16px;
  font-weight: var(--wd-font-weight-medium);
  color: var(--wd-sidebar-text);
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.wd-nav__icon {
  flex-shrink: 0;
  /* 사이드바가 커진 만큼(2026-08-29) 아이콘도 비례해서 키웠다 — 원래
     16px(Linear류 optical size) 기준. */
  width: 19px;
  height: 19px;
  color: var(--wd-sidebar-icon);
  transition: color 0.12s ease;
}

a.wd-nav__item:hover {
  background: var(--wd-sidebar-bg-hover);
  color: var(--wd-sidebar-text-hover);
}

a.wd-nav__item:hover .wd-nav__icon {
  color: var(--wd-sidebar-text-hover);
}

.wd-nav__item.is-active {
  background: var(--wd-sidebar-bg-active);
  color: var(--wd-sidebar-text-active);
  font-weight: var(--wd-font-weight-semibold);
}

.wd-nav__item.is-active .wd-nav__icon {
  color: var(--wd-sidebar-accent);
}

.wd-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-sidebar-accent);
}

.wd-nav__item.is-disabled {
  color: #575d6c;
  cursor: default;
}

.wd-nav__item.is-disabled .wd-nav__icon {
  color: #575d6c;
  opacity: 0.7;
}

/* 접힌 사이드바 그룹에 속한 항목 숨김(shell.js initNavGroupCollapse) —
   .wd-nav__item이 display:flex를 지정하므로 동일 specificity로 덮어써야
   한다. */
.wd-nav__item.is-hidden {
  display: none;
}

.wd-nav__badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: var(--wd-font-weight-medium);
  color: var(--wd-sidebar-text);
  background: var(--wd-sidebar-bg-hover);
  padding: 2px 7px;
  border-radius: var(--wd-radius-pill);
  white-space: nowrap;
}

/* Sidebar 최하단 계정 카드 — 기존 wdGetAdminInfo() 데이터만 재사용하고
   새 API는 만들지 않는다(shell.js가 채운다). 클릭 동작/드롭다운은 없다
   (없는 메뉴를 있는 것처럼 보이게 만들지 않는다). */
.wd-sidebar__account {
  display: flex;
  align-items: center;
  gap: var(--wd-space-3);
  padding: var(--wd-space-4) var(--wd-space-5);
  border-top: 1px solid var(--wd-sidebar-border);
  flex-shrink: 0;
}

.wd-sidebar__account-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--wd-sidebar-accent-bg);
  color: var(--wd-sidebar-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--wd-font-weight-bold);
}

.wd-sidebar__account-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wd-sidebar__account-name {
  font-size: 16px;
  font-weight: var(--wd-font-weight-semibold);
  color: var(--wd-sidebar-text-active);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-sidebar__account-role {
  font-size: 13px;
  color: var(--wd-sidebar-text);
}

.wd-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wd-header {
  height: var(--wd-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wd-space-4);
  padding: 0 var(--wd-space-8);
  /* CONTROL CENTER VISUAL REDESIGN V2 — 반투명 blur(glassmorphism)를
     제거하고 불투명 surface로 바꿨다("Glassmorphism 금지" 원칙 재적용). */
  background: var(--wd-color-surface);
  border-bottom: 1px solid var(--wd-color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wd-header__left {
  min-width: 0;
}

.wd-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--wd-space-4);
}

.wd-header__title {
  /* 고객 포털 헤더(.wdp-header__title)와 같은 크기로 맞춘다(사용자 요청
     — "헤더는 고객 기준이 맞다"). 이전엔 --wd-font-size-title(28px)로
     본문 페이지 제목처럼 컸다. */
  font-size: 15px;
  font-weight: var(--wd-font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--wd-color-text-primary);
  line-height: var(--wd-line-height-tight);
}

.wd-header__actions {
  flex-shrink: 0;
}

.wd-header__subtitle {
  margin-top: 4px;
  font-size: var(--wd-font-size-base);
  font-weight: var(--wd-font-weight-regular);
  color: var(--wd-color-text-tertiary);
}

/* 심전도(ECG, .wd-ecg는 static/css/ecg.css) 자리 — wd-header가
   justify-content:space-between이라 이 slot이 wd-header__left(제목)와
   wd-header__right(상태/시계/버튼) 사이 빈 공간에 자연스럽게 놓인다.
   폭이 고정된 .wd-ecg만 담아 헤더 높이/다른 요소 배치에 영향을 주지
   않는다. */
/* 실사용자 지적(2026-08-31): "심박수 나오는 영역 우측으로 영역좀 크게좀
   확대하고 이게 뭐야 껌딱지야?" — flex-shrink:0만 있고 grow가 없어서
   자리는 넓게 남는데 실제 심전도(.wd-ecg, 160px)만 왼쪽 끝에 조그맣게
   붙어 있어 스티커처럼 보였다. 이 슬롯이 남는 공간을 다 차지하게 하고
   (flex-grow:1), 그 안에서 심전도 자체를 오른쪽으로 붙이고 폭도 키운다. */
.wd-header__ecg-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  padding-right: var(--wd-space-4);
}

.wd-header__right {
  display: flex;
  align-items: center;
  gap: var(--wd-space-4);
  font-size: var(--wd-font-size-sm);
  color: var(--wd-color-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 접속중 표시 + 인사말 + 실시간 시계 — 고객 포털 헤더(.wdp-header__right)와
   동일한 스타일/구성으로 맞춘다(사용자 요청). */
.wd-header__status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wd-color-text-secondary);
}

/* 실사용자 지시(2026-08-29): "접속중입니다 녹색색깔을 좀더 잘보이게" —
   토큰(--wd-color-success, 어두운 진초록)을 이 점에서만 더 선명한
   초록(#22c55e)으로 바꾼다(다른 곳의 success 색상에는 영향 없음). */
.wd-header__status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28);
  flex-shrink: 0;
  animation: wd-status-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes wd-status-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.wd-header__greeting {
  color: var(--wd-color-text-primary);
  font-weight: var(--wd-font-weight-medium);
}

.wd-header__clock {
  color: var(--wd-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 환경 badge(Phase ENVIRONMENT-SEPARATION1) — STAGING/DEV 화면을 Production과
   혼동하지 않도록 header 우측에 항상 표시한다. production에서는 렌더되지
   않는다(base.html의 {% if %}). */
.wd-env-badge {
  font-size: 10.5px;
  font-weight: var(--wd-font-weight-bold);
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--wd-radius-pill);
  white-space: nowrap;
}

.wd-env-badge--staging {
  color: #92400e;
  background: #fef3c7;
}

.wd-env-badge--development {
  color: #1e40af;
  background: #dbeafe;
}

.wd-header__admin-name {
  font-weight: var(--wd-font-weight-semibold);
  color: var(--wd-color-text-primary);
}

.wd-logout-btn {
  border: 1px solid var(--wd-color-border-strong);
  background: var(--wd-color-surface);
  color: var(--wd-color-text-secondary);
  padding: 7px 14px;
  border-radius: var(--wd-radius-md);
  font-size: var(--wd-font-size-sm);
  font-weight: var(--wd-font-weight-medium);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.wd-logout-btn:hover {
  background: var(--wd-color-surface-sunken);
  border-color: var(--wd-color-text-tertiary);
}

/* 실사용자 지시(2026-08-29): "최상단 나만의 메모장은 색상을 넣어주세요"
   — 로그아웃 버튼과 같은 무채색 outline이었던 걸 브랜드 primary 색으로
   바꿔 눈에 띄게 한다. */
.wd-header__memo-btn {
  border: 1px solid var(--wd-color-primary);
  background: var(--wd-color-primary-bg);
  color: var(--wd-color-primary);
  padding: 7px 14px;
  border-radius: var(--wd-radius-md);
  font-size: var(--wd-font-size-sm);
  font-weight: var(--wd-font-weight-semibold);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.wd-header__memo-btn:hover {
  background: var(--wd-color-primary-hover);
  color: var(--wd-color-text-inverse);
  border-color: var(--wd-color-primary-hover);
}

/* 관리자 개인 메모장 모달 — 실사용자 지시(2026-08-29): "모달이 너무
   작아요 지금보다 2배 키우세요 가로세로 전체적으로" — 다른 wd-modal보다
   훨씬 넓고 길게 잡고, 목록/글쓰기 폼을 게시판처럼 분리했다.
   추가 지시(2026-08-30): "지금보다 3배 키워주세요" — max-width를
   리터럴 3배(3540px)로 하면 실제 모니터 해상도보다 커서 의미가 없으므로,
   width: 95vw로 뷰포트에 안전하게 꽉 차도록 하고 max-width만 넉넉하게
   올려(2200px) 큰 모니터에서도 계속 커 보이게 했다.
   근본 버그 수정(2026-08-30): 실제로는 한 번도 반영된 적이 없었다 —
   base.html이 base.css를 forms.css보다 먼저 로드하는데, forms.css의
   공용 `.wd-modal { max-width: 560px; }`가 이 선택자(`.wd-modal--memo`,
   클래스 1개, 명시도 동일)와 로드 순서로만 승부가 갈려서 항상 나중 것이
   이겼다 — 위 2배/3배 값이 전부 조용히 무시되고 있었다. `.wd-modal.
   wd-modal--memo`(클래스 2개 요구, 명시도 0,0,2,0)로 바꿔 forms.css의
   `.wd-modal`(0,0,1,0)보다 확실히 이기도록 고정한다 — 로드 순서와
   무관하게 항상 이 값이 적용된다. */
.wd-modal.wd-modal--memo {
  max-width: 2200px;
  width: 95vw;
}

.wd-memo-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--wd-space-3);
}

.wd-memo-form {
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-2);
  padding: var(--wd-space-4);
  border: 1px solid var(--wd-color-border);
  border-radius: var(--wd-radius-md);
  background: var(--wd-color-surface-sunken);
  margin-bottom: var(--wd-space-4);
}

.wd-memo-form #wd-memo-content {
  resize: vertical;
  /* 실사용자 지시(2026-08-30) "3배 키워주세요" — 세로 높이는 뷰포트
     제약이 없어 리터럴 3배(120px→360px) 그대로 적용. */
  min-height: 360px;
}

.wd-memo-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wd-space-2);
}

.wd-memo-list {
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-3);
  /* 실사용자 지시(2026-08-30) "3배 키워주세요" — 이미 76vh라 리터럴
     3배(228vh)는 화면을 벗어난다. 뷰포트 안에서 갈 수 있는 최대치인
     90vh로 올려 체감상 훨씬 커지게 했다. */
  max-height: 90vh;
  overflow-y: auto;
}

.wd-memo-item {
  border: 1px solid var(--wd-color-border);
  border-radius: var(--wd-radius-md);
  padding: var(--wd-space-4);
  background: var(--wd-color-surface-sunken);
}

.wd-memo-item__meta {
  display: flex;
  align-items: center;
  margin-bottom: var(--wd-space-2);
}

.wd-memo-item__title {
  flex: 1;
  min-width: 0;
  font-size: var(--wd-font-size-base);
  font-weight: var(--wd-font-weight-semibold);
  color: var(--wd-color-text-primary);
  overflow-wrap: break-word;
  /* 게시판처럼 제목을 눌러야 본문이 펼쳐진다 — 버튼 기본 스타일 리셋. */
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.wd-memo-item__title:hover {
  text-decoration: underline;
}

.wd-memo-item__date {
  font-size: var(--wd-font-size-xs);
  color: var(--wd-color-text-tertiary);
  white-space: nowrap;
  margin-left: var(--wd-space-3);
}

.wd-memo-item__delete {
  color: var(--wd-color-danger);
  font-size: var(--wd-font-size-xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: var(--wd-space-3);
}

.wd-memo-item__delete:hover {
  text-decoration: underline;
}

.wd-memo-item__content {
  color: var(--wd-color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: var(--wd-space-2);
  padding-top: var(--wd-space-2);
  border-top: 1px solid var(--wd-color-border);
}

.wd-content {
  flex: 1;
  padding: var(--wd-page-padding);
  min-width: 0;
}

.wd-content__inner {
  /* 화면 폭을 그대로 채운다 — 1600px 상한을 두면 넓은 모니터에서 좌우
     여백이 크게 남아 페이지가 비어 보인다는 실사용 피드백에 따라 제거함. */
  max-width: none;
  margin: 0;
}

@media (max-width: 1366px) {
  :root {
    --wd-sidebar-width: 216px;
  }
  .wd-header {
    padding: 0 var(--wd-space-5);
  }
  .wd-content {
    padding: var(--wd-space-5);
  }
}

/* ── 공통 컴포넌트 ─────────────────────────────────────────────────── */

.wd-section {
  margin-bottom: var(--wd-section-gap);
}

.wd-section__title {
  font-size: var(--wd-font-size-lg);
  font-weight: var(--wd-font-weight-semibold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--wd-space-4);
  color: var(--wd-color-text-primary);
}

/* Card — 모든 surface(카드/패널)가 공유하는 기본 스타일(요구사항 5번).
   과도한 그림자 대신 옅은 border + 최소 shadow만 사용한다. */
.wd-panel {
  background: var(--wd-color-surface);
  border: 1px solid var(--wd-color-border);
  border-radius: var(--wd-radius-lg);
  box-shadow: var(--wd-shadow-xs);
  padding: var(--wd-card-padding);
  /* 좁은 화면에서 넓은 테이블이 페이지 전체를 깨뜨리지 않고 카드 내부
     에서만 가로 스크롤되도록 한다(요구사항 15번 — table 붕괴 없음). */
  max-width: 100%;
  overflow-x: auto;
}

.wd-panel--hover {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.wd-panel--hover:hover {
  box-shadow: var(--wd-shadow-sm);
  border-color: var(--wd-color-border-strong);
}

.wd-grid {
  display: grid;
  gap: var(--wd-space-5);
}

.wd-grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.wd-grid--2col {
  grid-template-columns: 1fr 1fr;
}

.wd-grid--sections {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 1366px) {
  .wd-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* KPI 카드 — 카드 남발 금지 원칙에 따라 최소 개수만 사용. label+icon
   (상단) / value(중앙, 크게) / secondary(하단)의 3단 위계로 구성한다
   (사용자 확정 시안 5절 — 카드 전체를 칠하지 않고 아이콘 배경에만 옅은
   pastel tint를 사용, 텍스트 라벨을 항상 병행). */
.wd-kpi {
  position: relative;
  background: var(--wd-color-surface);
  border: 1px solid var(--wd-color-border);
  border-radius: var(--wd-radius-lg);
  box-shadow: var(--wd-shadow-xs);
  padding: var(--wd-space-5);
}

.wd-kpi__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wd-space-3);
  margin-bottom: var(--wd-space-3);
}

.wd-kpi__label {
  font-size: var(--wd-font-size-sm);
  font-weight: var(--wd-font-weight-medium);
  color: var(--wd-color-text-secondary);
  /* .wd-kpi__top 없이 label/value만 직접 쓰는 다른 화면(작업요청/콘텐츠
     목록의 Dashboard Summary)에서도 라벨과 값 사이 여백이 유지되도록
     기본 margin을 둔다 — 관제센터에서는 .wd-kpi__top이 대신 여백을
     담당해도 이 margin은 label 자체 하단에 남아 있어 서로 상충하지
     않는다. */
  margin-bottom: var(--wd-space-2);
}

/* 아이콘 container — 옅은 pastel 배경 + accent 색 line icon만(카드
   전체 착색 금지). tone 클래스는 control-center.js가 렌더링 시 부여한다. */
.wd-kpi__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wd-radius-md);
  background: var(--wd-color-surface-sunken);
  color: var(--wd-color-text-tertiary);
}

.wd-kpi--blue .wd-kpi__icon { background: var(--wd-color-accent-blue-bg); color: var(--wd-color-accent-blue); }
.wd-kpi--amber .wd-kpi__icon { background: var(--wd-color-accent-amber-bg); color: var(--wd-color-accent-amber); }
.wd-kpi--red .wd-kpi__icon { background: var(--wd-color-accent-red-bg); color: var(--wd-color-accent-red); }
.wd-kpi--orange .wd-kpi__icon { background: var(--wd-color-accent-orange-bg); color: var(--wd-color-accent-orange); }
.wd-kpi--violet .wd-kpi__icon { background: var(--wd-color-accent-violet-bg); color: var(--wd-color-accent-violet); }
.wd-kpi--green .wd-kpi__icon { background: var(--wd-color-accent-green-bg); color: var(--wd-color-accent-green); }

.wd-kpi__value {
  font-size: var(--wd-font-size-2xl);
  font-weight: var(--wd-font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--wd-color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: var(--wd-line-height-tight);
}

.wd-kpi__value.is-danger {
  color: var(--wd-color-danger);
}

.wd-kpi__sub {
  margin-top: var(--wd-space-2);
  font-size: var(--wd-font-size-xs);
  color: var(--wd-color-text-tertiary);
}

/* Compact summary row(도메인 카드 — Work/Content/Ads/Contracts/Materials) */
.wd-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--wd-color-border);
  font-size: var(--wd-font-size-sm);
}

.wd-stat-row:last-child {
  border-bottom: none;
}

.wd-stat-row__label {
  color: var(--wd-color-text-secondary);
}

.wd-stat-row__value {
  font-weight: var(--wd-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--wd-color-text-primary);
}

.wd-stat-row__value.is-danger {
  color: var(--wd-color-danger);
}

.wd-stat-row__value.is-warning {
  color: var(--wd-color-warning);
}

/* 도메인 카드(관제센터 + 상세화면 공통, Design System 개편으로 승격 —
   기존 control-center.css의 cc-layout/cc-domain-title) */
.wd-cc-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--wd-space-5);
  align-items: start;
}

@media (max-width: 1366px) {
  .wd-cc-layout {
    grid-template-columns: 1fr;
  }
}

.wd-cc-domain-title {
  display: flex;
  align-items: center;
  gap: var(--wd-space-2);
  justify-content: space-between;
  font-size: var(--wd-font-size-md);
  font-weight: var(--wd-font-weight-bold);
  color: var(--wd-color-text-primary);
  margin-bottom: var(--wd-space-4);
}

.wd-cc-domain-title__hint {
  font-size: var(--wd-font-size-xs);
  font-weight: var(--wd-font-weight-regular);
  color: var(--wd-color-text-tertiary);
}

/* 배지(우선순위/상태) — success/info는 work-requests/blog-contents
   Phase에서 추가된 뒤 여러 도메인에서 재사용되어 base로 승격했다. */
.wd-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--wd-radius-pill);
  font-size: var(--wd-font-size-xs);
  font-weight: var(--wd-font-weight-semibold);
  white-space: nowrap;
}

.wd-badge--critical {
  color: var(--wd-priority-critical-fg);
  background: var(--wd-priority-critical-bg);
}

/* 카카오톡 스타일 안읽음 뱃지 — 진한 빨강 원형 + 흰 숫자. 목록 행/스위처
   pill/포털 진행현황 항목 등 "안읽은 메시지가 있다"는 신호에만 쓴다. */
.wd-unread-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-color-danger);
  color: var(--wd-color-text-inverse);
  font-size: 11px;
  font-weight: var(--wd-font-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wd-unread-dot.is-hidden {
  display: none;
}

.wd-unread-dot--nav {
  margin-left: auto;
  flex-shrink: 0;
}

/* 실사용자 지시(2026-08-27): 사이드바 배지에 "지금 확인이 필요한 새 항목"
   임을 텍스트로도 표시할 것 — 고객 화면/관리자 화면 모두. 숫자 배지
   (wd-unread-dot--nav)는 그대로 두고, 그 옆에 작은 강조 라벨만 하나
   더한다(색상만으로 의미 전달 금지 원칙에 맞춰 텍스트 라벨 사용). */
.wd-new-flag {
  margin-left: 4px;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: var(--wd-font-weight-bold);
  letter-spacing: 0.03em;
  color: var(--wd-color-danger);
}

.wd-new-flag.is-hidden {
  display: none;
}

.wd-badge--high {
  color: var(--wd-priority-high-fg);
  background: var(--wd-priority-high-bg);
}

.wd-badge--normal {
  color: var(--wd-priority-normal-fg);
  background: var(--wd-priority-normal-bg);
}

.wd-badge--low {
  color: var(--wd-priority-low-fg);
  background: var(--wd-priority-low-bg);
}

.wd-badge--success {
  color: var(--wd-color-success);
  background: var(--wd-color-success-bg);
}

.wd-badge--info {
  color: var(--wd-color-primary);
  background: var(--wd-color-primary-bg);
}

/* 경고/중립 톤(2026-08-25 추가) — 작업요청 상세 상태 배지를 고객 포털의
   .wdp-status--{status} 팔레트와 통일하기 위해 추가했다. 우선순위 배지
   (critical/high/normal/low)와는 별개의 색상 계열이며, 다른 도메인에서도
   경고/중립 상태를 표시할 일이 있으면 재사용할 수 있다. */
.wd-badge--warning {
  color: var(--wd-color-warning);
  background: var(--wd-color-warning-bg);
}

.wd-badge--neutral {
  color: var(--wd-color-neutral);
  background: var(--wd-color-neutral-bg);
}

.wd-badge--muted {
  color: var(--wd-color-text-tertiary);
  background: var(--wd-color-neutral-bg);
}

/* 연체 등 보조 태그 — 별도 상태처럼 보이지 않도록 상태 배지 옆에 덧붙는
   보조 표시로만 사용한다. */
.wd-overdue-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--wd-radius-pill);
  font-size: var(--wd-font-size-xs);
  font-weight: var(--wd-font-weight-bold);
  color: var(--wd-color-danger);
  background: var(--wd-color-danger-bg);
  margin-left: var(--wd-space-2);
  white-space: nowrap;
}

/* 상태 Action 버튼 바 */
.wd-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-space-2);
  margin-top: var(--wd-space-3);
}

/* 참고정보 disclaimer("자동 판정"처럼 보이지 않게) */
.wd-hint-note {
  font-size: var(--wd-font-size-xs);
  color: var(--wd-color-text-tertiary);
  margin-top: var(--wd-space-1);
  line-height: var(--wd-line-height-body);
}

/* 타임라인 항목의 visibility 표시 */
.wd-timeline-visibility {
  font-size: var(--wd-font-size-xs);
  padding: 1px 7px;
  border-radius: var(--wd-radius-pill);
  margin-left: var(--wd-space-2);
  color: var(--wd-color-text-tertiary);
  background: var(--wd-color-neutral-bg);
  white-space: nowrap;
}

.wd-timeline-visibility--customer {
  color: var(--wd-color-primary);
  background: var(--wd-color-primary-bg);
}

/* 작업항목 완료 여부 체크 표시 */
.wd-item-done {
  color: var(--wd-color-success);
  font-weight: var(--wd-font-weight-bold);
}

/* 테이블 — 목록 화면 전 도메인 공통(요구사항 10번) */
.wd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wd-font-size-sm);
}

.wd-table th {
  text-align: left;
  font-weight: var(--wd-font-weight-semibold);
  font-size: var(--wd-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wd-color-text-tertiary);
  padding: var(--wd-space-3) var(--wd-space-4);
  background: var(--wd-color-surface-muted);
  border-bottom: 1px solid var(--wd-color-border);
  white-space: nowrap;
}

.wd-table th:first-child {
  border-top-left-radius: var(--wd-radius-md);
}

.wd-table th:last-child {
  border-top-right-radius: var(--wd-radius-md);
}

.wd-table td {
  padding: var(--wd-space-4);
  border-bottom: 1px solid var(--wd-color-border);
  vertical-align: middle;
  color: var(--wd-color-text-primary);
}

.wd-table tbody tr {
  transition: background-color 0.1s ease;
}

.wd-table tbody tr:hover {
  background: var(--wd-color-surface-muted);
}

.wd-table tr:last-child td {
  border-bottom: none;
}

.wd-table__title {
  font-weight: var(--wd-font-weight-semibold);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-table__meta {
  color: var(--wd-color-text-tertiary);
  font-size: var(--wd-font-size-xs);
  margin-top: 2px;
}

/* 목록에서 거래처명을 1차 식별자로, 부속 항목(사이트명 등)을 그 아래
   보조 텍스트로 쌓는 셀 — 홈페이지·인프라 목록 등에서 재사용.
   display:flex를 td에 주면 table-cell이 깨져 행 높이를 못 따라가고
   border-bottom이 내용 높이에만 붙어, 옆 칸 하단줄과 어긋난다
   (실사용자 2026-08-30 /admin/websites 만료현황 표). */
.wd-table__primary-cell .wd-table__primary-link {
  display: block;
  font-weight: var(--wd-font-weight-semibold);
  color: var(--wd-color-text-primary);
}

.wd-table__primary-cell a.wd-table__primary-link:hover {
  color: var(--wd-color-primary);
}

.wd-table__primary-cell .wd-table__meta {
  display: block;
  margin-top: 2px;
}

/* 견적관리 목록의 발송(카톡/메일) 버튼 칸(static/js/quotes.js) — 위
   주석의 td+flex 함정을 그대로 피해서 버튼은 inline-block 그대로 두고
   결과 문구만 아래 줄에 block으로 쌓는다. */
.wd-quote-list-send-cell .wd-btn + .wd-btn {
  margin-left: 4px;
}
.wd-quote-list-send-cell .wd-table__meta {
  display: block;
  margin-top: 4px;
}

.wd-table__due.is-overdue {
  color: var(--wd-color-danger);
  font-weight: var(--wd-font-weight-semibold);
}

/* 고객 attention 리스트 */
.wd-attention-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wd-space-3);
  padding: var(--wd-space-3) 0;
  border-bottom: 1px solid var(--wd-color-border);
}

.wd-attention-item:last-child {
  border-bottom: none;
}

.wd-attention-item__name {
  font-weight: var(--wd-font-weight-semibold);
}

.wd-attention-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-space-3);
  font-size: var(--wd-font-size-xs);
  color: var(--wd-color-text-tertiary);
  margin-top: 2px;
}

.wd-attention-item__amount {
  font-variant-numeric: tabular-nums;
  font-weight: var(--wd-font-weight-bold);
  flex-shrink: 0;
}

/* Recent activity */
/* 이력(Timeline) 컨테이너 공통 — 실사용자 지시(2026-08-26): "타임라인은
   보통 5~6개 정도 나오게하고 그이상 늘어지면 스크롤로 변경시켜 이건
   전구역 공통이야". .wd-activity-item을 직접 담은 컨테이너(견적/작업
   요청/고객/계약 등 상세 페이지마다 id는 다르지만 전부 이 자식 클래스를
   씀)는 어디든 딱 한 번만 고치면 전체 반영되도록 :has()로 공통 적용한다
   — 약 6줄 높이(각 항목 ~64px)를 넘으면 그 안에서만 스크롤된다.
   .wd-activity-item 자체가 이력 전용 클래스라 다른 용도로 오염될 걱정은
   없다. */
div:has(> .wd-activity-item) {
  max-height: 380px;
  overflow-y: auto;
}

.wd-activity-item {
  display: flex;
  gap: var(--wd-space-3);
  padding: var(--wd-space-3) 0;
  border-bottom: 1px solid var(--wd-color-border);
}

.wd-activity-item:last-child {
  border-bottom: none;
}

.wd-activity-item__time {
  flex-shrink: 0;
  width: 110px;
  color: var(--wd-color-text-tertiary);
  font-size: var(--wd-font-size-xs);
  padding-top: 2px;
}

.wd-activity-item__body {
  min-width: 0;
}

.wd-activity-item__title {
  font-size: var(--wd-font-size-sm);
  color: var(--wd-color-text-primary);
}

.wd-activity-item__desc {
  margin-top: 2px;
  font-size: var(--wd-font-size-xs);
  color: var(--wd-color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty / Loading / Error state — 큰 흰 박스 대신 작은 아이콘 + 짧은
   문구로 구성한다(요구사항 8번). 아이콘은 JS의 textContent 대입만으로
   그려지는 순수 CSS 도형이라 XSS 방지 원칙(innerHTML 미사용)에 영향이
   없다. */
.wd-state {
  padding: var(--wd-space-10) var(--wd-space-4);
  text-align: center;
  color: var(--wd-color-text-tertiary);
  font-size: var(--wd-font-size-sm);
}

.wd-state::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto var(--wd-space-3);
  border-radius: 50%;
  border: 1.5px dashed var(--wd-color-border-strong);
}

.wd-state--error {
  color: var(--wd-color-danger);
}

.wd-state--error::before {
  border: none;
  background: var(--wd-color-danger-bg);
}

.wd-state__retry {
  margin-top: var(--wd-space-3);
  border: 1px solid var(--wd-color-border-strong);
  background: var(--wd-color-surface);
  padding: 7px 16px;
  border-radius: var(--wd-radius-md);
  font-size: var(--wd-font-size-sm);
  font-weight: var(--wd-font-weight-medium);
  color: var(--wd-color-text-primary);
}

.wd-state__retry:hover {
  background: var(--wd-color-surface-sunken);
}

.wd-skeleton {
  background: linear-gradient(90deg, var(--wd-color-border) 25%, var(--wd-color-surface-muted) 37%, var(--wd-color-border) 63%);
  background-size: 400% 100%;
  animation: wd-skeleton-loading 1.4s ease infinite;
  border-radius: var(--wd-radius-sm);
  height: 14px;
}

@keyframes wd-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* 접근성 — 키보드 focus 표시 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wd-color-primary);
  outline-offset: 2px;
}

/* 공용 탭 컴포넌트 — 원래 finance.css에만 있었으나(수납관리 청구목록/
   미수금 탭) websites-list.js(만료임박/만료 탭)도 동일한 패턴이 필요해
   모든 페이지가 로드하는 base.css로 옮겼다. */
.wd-tabs {
  display: flex;
  gap: var(--wd-space-2);
  margin-bottom: var(--wd-space-4);
}

.wd-tab {
  padding: var(--wd-space-2) var(--wd-space-4);
  border: 1px solid var(--wd-color-border);
  border-radius: var(--wd-radius-md);
  background: var(--wd-color-surface);
  color: var(--wd-color-text-secondary);
  font-size: var(--wd-font-size-base);
  font-weight: 600;
  cursor: pointer;
}

.wd-tab.is-active {
  background: var(--wd-color-primary);
  border-color: var(--wd-color-primary);
  color: var(--wd-color-text-inverse);
}

.wd-tab-panel {
  display: none;
}

.wd-tab-panel.is-active {
  display: block;
}

.wd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}