* { box-sizing: border-box; }
:root {
    /* 공통 디자인 토큰 */
    --radius-lg: 12px;     /* 대형 컨테이너·배경 카드 */
    --radius-md: 8px;      /* 중간 박스(알림·KPI·모달 내부 등) */
    --radius-sm: 6px;      /* 인풋·버튼 등 컨트롤 */
    --ctl-h: 36px;         /* 입력/버튼 공통 높이 */
    --shadow-card: 0 2px 10px rgba(20, 40, 80, .07);   /* 공통 소프트 그림자 */
    /* 상태 고유색(요청·처리완료·확인) — 뱃지·차트·KPI·띠 전부 동일하게 사용 */
    --st-requested: #D9614D;
    --st-resolved: #4488C9;
    --st-confirmed: #46785F;        /* 뮤트 세이지 그린(흰 글씨 4.5:1 확보) */
    --st-confirmed-soft: #6E7A71;   /* 확인(종료) 차분한 회색 — 흰 글씨 4.5:1(WCAG AA) */
    /* 5단계 진행상태 고유색 — 접수/처리중/완료/확인/재접수 (배지·KPI·띠·통계 일원화) */
    /* 2026 모던 팔레트 — 채도를 낮춘 소프트 톤(쨍한 원색 → 뮤트). 목록 칩·행 스트라이프·통계·KPI 공통 변수 */
    --st-received: #B15546;       /* 접수 = 소프트 테라코타(딥) — 흰 글씨 4.5:1 */
    --st-inprogress: #A6762A;     /* 처리중 = 뮤트 앰버(딥) — 흰 글씨 4.5:1 */
    --st-done: #43719C;           /* 완료 = 데님 블루(딥) — 흰 글씨 4.5:1 */
    --st-reopened: #7E58A8;       /* 재접수 = 뮤트 라벤더(딥) — 흰 글씨 4.5:1 */
    /* 공통 색상 토큰(반복 색 중앙화 — 값은 기존과 동일) */
    --c-brand: #4a90d9;        /* 주 액션 블루 */
    --c-brand-mid: #2b6cb0;    /* 배너·중간 블루 */
    --c-brand-deep: #2f5d96;   /* 네비·진한 브랜드 블루 */
    --c-danger: #c0392b;       /* 위험·삭제 레드 */
    --c-ink: #2b3a55;          /* 본문 진한 텍스트 */
    --c-line: #eef1f5;         /* 옅은 구분선·경계 */
    --c-muted: #8a93a3;        /* 보조 텍스트 회색 */
}
/* 페이지 이동 시 흰 화면 깜박임 방지 — 루트 배경을 앱 배경색과 맞춰 언로드~로드 사이에도 흰색이 안 보이게 */
html { background: #bcd2ec; scrollbar-width: thin; scrollbar-color: #8fb0d8 rgba(255,255,255,.35); }
/* 전체 페이지(위아래) 스크롤바 — 곱게 */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 13px; height: 13px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgba(255,255,255,.28); }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#9bbbe0,#7ba3d2); border-radius: 10px; border: 3px solid #bcd2ec; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#83a9d6,#5f88c0); }
/* 크로미움(126+): 문서 간 내비게이션을 부드러운 크로스페이드로 — 미지원 브라우저는 무시(점진적 향상) */
@view-transition { navigation: auto; }
body { margin: 0; font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 15px; color: #222; background: linear-gradient(160deg, #d0e0f3 0%, #aec6e7 100%) fixed; min-height: 100vh; }
header { background: linear-gradient(100deg, #182a48 0%, #294870 58%, #356099 100%); color: #fff; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(15,25,50,.18); position: sticky; top: 0; z-index: 200; }
header h1 { font-size: 19px; margin: 0; }
header h1.brand { display: flex; align-items: center; gap: 11px; }
.user-box { display: flex; align-items: center; gap: 10px; }
.user-box .who { color: #cdd7ea; }
.user-box .who b { color: #fff; }
.navlink { color: #cdd7ea; text-decoration: none; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.navlink:hover { background: rgba(255,255,255,.2); color: #fff; }
/* 최초 진입 안내 — 오른쪽 위 '사용자 가이드' 버튼을 눌러 보도록 유도(닫기 가능) */
.navlink.nav-attn { background: rgba(130,195,255,.5); color: #fff; animation: navAttn 1.1s ease-in-out infinite; }
@keyframes navAttn {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 12px 3px rgba(150,210,255,.85), 0 0 24px 7px rgba(150,210,255,.4); }
  50% { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 22px 7px rgba(170,220,255,1), 0 0 44px 15px rgba(150,210,255,.75); }
}
/* 등록 유도: '신규 등록' · '새 결함 등록' 버튼 발광 펄스 */
.btn.reg-attn { animation: regAttn 1.05s ease-in-out infinite; }
@keyframes regAttn {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,144,217,.6), 0 0 12px 3px rgba(74,144,217,.5); }
  50% { box-shadow: 0 0 0 8px rgba(74,144,217,0), 0 0 22px 8px rgba(74,144,217,.9); }
}
    background: #1f2d44; color: #eaf1fb; border-radius: 12px; padding: 12px 38px 13px 14px;
    box-shadow: 0 10px 32px rgba(15,30,60,.32); font-size: 13px; line-height: 1.55; animation: ghPop .28s ease both; }
    background: #1f2d44; transform: rotate(45deg); border-radius: 3px; }
    color: #aab8cc; font-size: 19px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
@keyframes ghPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* 최초 로그인 환영 모달 — 4단계 가이드 요약 */
.welcome-modal { max-width: 580px; }
.welcome-modal > h3 { display: flex; align-items: center; gap: 8px; }
.welcome-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 8px; }
.wm-step { display: flex; flex-direction: column; gap: 3px; border: 1px solid #eceff4; border-radius: 14px; padding: 14px 15px; background: #fff; box-shadow: 0 2px 10px rgba(20,40,80,.05); transition: box-shadow .16s ease, transform .16s ease; }
.wm-step:hover { box-shadow: 0 8px 22px rgba(20,40,80,.1); transform: translateY(-2px); }
.wm-step .gs-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-brand); color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 5px; box-shadow: 0 2px 6px rgba(20,40,80,.18); }
.wm-step b { color: #1f2d44; font-size: 14.5px; }
.wm-step > span:last-child { color: #6b7a8d; font-size: 12px; line-height: 1.45; }
.wm-step.gs-1 .gs-no { background: var(--st-requested); }
.wm-step.gs-2 .gs-no { background: #6c5ce7; }
.wm-step.gs-3 .gs-no { background: var(--st-resolved); }
.wm-step.gs-4 .gs-no { background: var(--st-confirmed); }
@media (max-width: 560px) { .welcome-steps { grid-template-columns: 1fr; } }
.wm-point { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; padding: 8px 11px; background: #eef5fc; border: 1px solid #cfe0f3; border-radius: var(--radius-md); color: var(--c-ink); font-size: 12.5px; line-height: 1.45; }
.wm-point b { color: #1f6fc2; }
/* 환영 모달이 열린 동안 헤더(가이드 버튼)를 백드롭 위로 띄워 강조 */
@keyframes guideGlow {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 12px 3px rgba(130,200,255,.85), 0 0 26px 8px rgba(130,200,255,.45); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 22px 7px rgba(160,215,255,1), 0 0 46px 16px rgba(130,200,255,.8); }
}
/* 가이드 버튼을 가리키는 통통 튀는 발광 화살표 포인터(환영 모달 동안) */
.guide-pointer { position: fixed; z-index: 1200; width: 88px; text-align: center; pointer-events: none; animation: gpBounce 1s ease-in-out infinite; }
.guide-pointer .gp-arrow { display: block; color: #ffd24a; font-size: 16px; line-height: 1; text-shadow: 0 0 9px rgba(255,210,74,.95); }
.guide-pointer .gp-label { display: inline-block; margin-top: 2px; background: #1f2d44; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 12px rgba(15,30,60,.45); }
@keyframes gpBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 개발 전용 빠른 계정 전환 바 */
.devbar { background: #fffbe6; border-bottom: 1px solid #f0e0a0; padding: 6px 16px; font-size: 12px; color: #7a6a00;
          display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.devbar a { padding: 4px 10px; background: #fff; border: 1px solid #e0cf6a; border-radius: 4px; text-decoration: none; color: #5a4d00; white-space: nowrap; line-height: 1.2; }
.devbar a:hover { background: #fff3bf; }
.devbar select { padding: 4px 8px; border: 1px solid #e0cf6a; border-radius: 4px; background: #fff; color: #5a4d00; font-size: 12px; line-height: 1.2; max-width: 280px; }
.devbar a.admin { background: var(--c-brand); color: #fff; border-color: var(--c-brand); font-weight: 600; }
.devbar a.admin:hover { background: #3a7bc0; }

/* 빠른 로그인 신뢰 기기 등록 안내 배너(관리자·미등록 브라우저 전용) — 작고 은은하게. */
.ql-trust-banner { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px;
                   background: #eef5ff; border-bottom: 1px solid #cfe0f7; color: #2f5d96; }
.ql-trust-banner .ico { color: #2f5d96; flex: none; }
.ql-trust-banner .ql-trust-msg { line-height: 1.3; }
.ql-trust-banner form { display: inline; }
.ql-trust-btn { padding: 3px 10px; background: var(--c-brand); color: #fff; border: 1px solid var(--c-brand);
                border-radius: 4px; font-size: 12px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.ql-trust-btn:hover { background: #3a7bc0; }
.ql-trust-close { margin-left: auto; background: none; border: none; color: #7a97bd; cursor: pointer;
                  font-size: 13px; line-height: 1; padding: 2px 4px; }
.ql-trust-close:hover { color: #2f5d96; }

.flash { padding: 12px 16px; margin: 8px 16px 0; border-radius: var(--radius-md); }
.flash.ok { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7e1c1; }
.flash.err { background: #fdecea; color: var(--c-danger); border: 1px solid #f5c6cb; }

.toolbar { display: flex; gap: 10px 13px; align-items: flex-end; padding: 9px 18px 13px; background: linear-gradient(180deg, #eef4fc 0%, #dfe9f7 100%); border-bottom: 1px solid #cbdcef; flex-wrap: nowrap; box-shadow: 0 1px 4px rgba(20,40,80,.05); }   /* 컨트롤을 아래(목록 쪽)로 붙임 */
/* 필터는 내부에서만 줄바꿈 → 옆의 '＋신규 등록' 버튼이 아랫줄로 밀리지 않고 우상단 고정 */
.toolbar > .filters { display: flex; flex-wrap: wrap; gap: 10px 13px; align-items: center; flex: 1 1 auto; min-width: 0; }
.toolbar > .btn.new { flex: 0 0 auto; align-self: flex-start; margin-left: 18px; }
.toolbar .field { display: flex; flex-direction: row; align-items: center; gap: 7px; }
.toolbar .field > label { font-size: 12.5px; color: #314a66; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.toolbar .field .range { display: flex; align-items: center; gap: 5px; color: #5a6b7b; }
/* 기간 필터: 날짜 텍스트 숨기고 달력 아이콘만 — 선택 시 채워진(파란) 아이콘, 미선택 시 회색 */
.date-pick { position: relative; display: inline-flex; }
.date-pick input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; }
.date-ico { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h); height: var(--ctl-h); padding: 0; border: 1px solid #c3d2e4; border-radius: var(--radius-sm); background: #fff; color: #9aa7b8; cursor: pointer; box-shadow: 0 1px 2px rgba(20,40,80,.05); }
.date-ico:hover { border-color: #9cb6d6; color: #5a6b7b; }
.date-pick.set .date-ico { color: #fff; background: var(--st-resolved); border-color: var(--st-resolved); }
.toolbar .field .range .date-tilde { color: #8aa0b8; margin: 0 1px; }

/* 결함 목록 필터의 기간 선택 — 아이콘+선택값을 옆 드롭다운과 같은 하나의 테두리 박스로(따로 놀지 않게) */
.flt-range .date-pick { height: 30px; border: 1px solid #d7dee7; border-radius: 8px; background: #fff; align-items: center; overflow: hidden; box-sizing: border-box; }
.flt-range .date-pick .date-ico { width: 28px; height: 100%; border: none; border-radius: 0; background: transparent; box-shadow: none; }
.flt-range .date-pick .date-ico:hover { background: #f1f5fb; }
.flt-range .date-pick .date-val { padding: 0 9px 0 2px; }
.flt-range .date-pick.set { border-color: var(--st-resolved); box-shadow: 0 0 0 2px rgba(110,145,131,.16); }
.flt-range .date-pick.set .date-ico { background: transparent; color: var(--st-resolved); border: none; }
.toolbar select, .toolbar input { height: var(--ctl-h); padding: 0 11px; border: 1px solid #c3d2e4; border-radius: var(--radius-sm); font-size: 13.5px; background: #fff; color: #25303c; box-shadow: 0 1px 2px rgba(20,40,80,.05); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
/* 툴바 컨트롤·버튼 높이 동기화(수평 베이스라인 일치) */
.toolbar .btn, .toolbar button { height: var(--ctl-h); box-sizing: border-box; display: inline-flex; align-items: center; }
.toolbar select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 30px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a90d9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.toolbar select:hover, .toolbar input:hover { border-color: #9cb6d6; }
.toolbar select:focus, .toolbar input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,144,217,.18); }

/* 결함 목록 필터 — 한 줄 우선 컴팩트(라벨 제거·통합검색·타이트, 정 모자랄 때만 줄바꿈) */
.filters.compact { gap: 6px; }
/* 시스템 다중선택 드롭다운(체크박스) */
.flt-sysdrop { position: relative; }
.flt-sysdrop > summary { list-style: none; cursor: pointer; height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #d7dee7; border-radius: 8px; background: #fff; font-size: 12.5px; color: #3a4756; white-space: nowrap; }
.flt-sysdrop > summary::-webkit-details-marker { display: none; }
.flt-sysdrop > summary::after { content: '▾'; margin-left: 6px; color: #9aa6b4; font-size: 10px; }
.flt-sysdrop[open] > summary { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,144,217,.16); }
/* 드롭다운 메뉴: 약 10개까지는 스크롤 없이(그 이상이면 스크롤). 스크롤바는 곱게. */
.flt-sysmenu { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 196px; max-height: 372px; overflow-y: auto;
  background: #fff; border: 1px solid #dbe3ee; border-radius: 10px; box-shadow: 0 8px 22px rgba(15,25,50,.16); padding: 6px;
  scrollbar-width: thin; scrollbar-color: #c2d0e2 transparent; }
.flt-sysmenu::-webkit-scrollbar { width: 9px; }
.flt-sysmenu::-webkit-scrollbar-track { background: transparent; }
.flt-sysmenu::-webkit-scrollbar-thumb { background: #cdd9e8; border-radius: 8px; border: 2px solid #fff; }
.flt-sysmenu::-webkit-scrollbar-thumb:hover { background: #a9bdd6; }
/* 행: 좌우 패딩 넉넉히 + 호버 하이라이트 */
.flt-syschk { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 7px; font-size: 12.5px; color: #2b3a55; cursor: pointer; white-space: nowrap; transition: background .12s; }
.flt-syschk:hover { background: #eef5fc; }
.flt-syschk input { accent-color: var(--c-brand); margin: 0; width: 14px; height: 14px; }
/* 최상단 '전체' 마스터 체크박스 행 */
.flt-masterrow { font-weight: 700; color: #34435a; border-bottom: 1px solid #eef1f6; border-radius: 7px 7px 0 0; margin-bottom: 2px; position: sticky; top: -6px; background: #fff; z-index: 1; }
.flt-masterrow:hover { background: #eaf2fc; }
/* 필터 라벨(검색기간 설정 등) */
.filters.compact .flt-label { font-size: 12px; font-weight: 700; color: #51637c; white-space: nowrap; flex: 0 0 auto; }
/* 담당자 드롭다운: 회사 그룹 헤더(선택지와 확실히 구분) + 역할 색상 태그 */
.flt-grouphdr { font-size: 10.5px; font-weight: 800; color: #51627a; background: #eef2f8; padding: 5px 14px; margin: 6px -6px 3px; letter-spacing: .4px; text-transform: none; white-space: nowrap; border-top: 1px solid #e6ecf4; border-bottom: 1px solid #e6ecf4; position: sticky; }
/* 필터 상단 고정(내 담당 시스템·나) — 전체 바로 아래 우선 노출 */
.flt-pinned { background: #f3f9ff; }
.flt-pinned:hover { background: #e8f2fd; }
.flt-pinned .flt-mine { margin-left: auto; font-size: 9.5px; font-weight: 800; color: #1f5fa8; background: #d9ecfd; border-radius: 4px; padding: 1px 6px; letter-spacing: .2px; }
.flt-asg .flt-sysmenu { min-width: 220px; }
.flt-asgname { flex: 1; }
.flt-roletag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.flt-asgchk.rl-CUSTOMER .flt-roletag { background: #efe6fb; color: #7b4fc0; }
.flt-asgchk.rl-CHIEF .flt-roletag { background: #def3ee; color: #15806a; }
.flt-asgchk.rl-PM .flt-roletag { background: #ede6fb; color: #6b46c1; }
.flt-asgchk.rl-PL .flt-roletag { background: #def0ec; color: #0f9b86; }
.flt-asgchk.rl-CUSTOMER .flt-asgname { color: #7b4fc0; font-weight: 700; }
.flt-asgchk.rl-CHIEF .flt-asgname { color: #15806a; font-weight: 700; }
.flt-asgchk.rl-PM .flt-asgname { color: #6b46c1; font-weight: 700; }
.flt-asgchk.rl-PL .flt-asgname { color: #0f9b86; font-weight: 700; }
.filters.compact select, .filters.compact input { height: 30px; font-size: 12.5px; padding: 0 8px; box-shadow: none; }
.filters.compact select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-position: right 7px center;
    max-width: 132px; text-overflow: ellipsis; }
/* 검색창: 여유 있으면 현재 폭(~210)까지 채우고, 좁아지면 함께 줄어듦(줄바꿈 대신 축소).
   줄나눔 계산엔 작은 기준폭(130)을 써 아이패드 프로 가로에서도 한 줄에 들어가게 한다. */
.filters.compact .flt-search { flex: 1 1 130px; width: auto; min-width: 86px; max-width: 220px; }
.filters.compact .view-toggle { flex: 0 0 auto; }
.filters.compact .vt-chip { padding: 5px 9px; font-size: 11.5px; }
.filters.compact .flt-range { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.filters.compact .flt-range .date-tilde { color: #8aa0b8; }
.filters.compact .date-ico { width: 30px; height: 30px; box-shadow: none; }
.filters.compact .filter-reset { height: 30px; padding: 0 9px; box-shadow: none; }
.filters.compact .flt-go { height: 30px; padding: 0 14px; font-size: 12.5px; box-shadow: none; flex: 0 0 auto; font-weight: 600; }

/* 버튼 — 브랜드 톤 통일(기본=블루 그라데이션, 경고=앰버, 보조=연한, 신규=블루 강조) */
.btn { padding: 7px 15px; border: none; border-radius: var(--radius-sm); cursor: pointer; background: linear-gradient(135deg, var(--c-brand), #3a78bf); color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(58,120,191,.28); transition: filter .15s ease, transform .04s ease; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn.ok { background: linear-gradient(135deg, var(--c-brand), #3a78bf); box-shadow: 0 2px 6px rgba(58,120,191,.28); }
.btn.sec { background: #eef1f6; color: #46545f; border: 1px solid #d9e0e8; box-shadow: none; }
.btn.sec:hover { background: #e3e8ef; filter: none; }
/* 필터 초기화: 아이콘(↻)만 — 공간 절약(정사각 컴팩트). 툴바 컨트롤 높이에 맞춤 */
.toolbar .filter-reset { width: var(--ctl-h); padding: 0; justify-content: center; font-size: 17px; line-height: 1; }
.btn.warn { background: linear-gradient(135deg, #f3a330, #e07d1a); box-shadow: 0 2px 6px rgba(224,125,26,.3); }
/* 신규 등록 강조 버튼(툴바 우측, 눈에 띄게) */
.btn.new { margin-left: auto; background: linear-gradient(135deg, var(--c-brand), #2f6fd0); font-weight: 700; font-size: 14px; padding: 9px 20px; border-radius: var(--radius-sm); box-shadow: 0 3px 10px rgba(47,111,208,.42); }
.btn.new:hover { filter: brightness(1.07); }

.layout { display: grid; grid-template-columns: var(--list-col, minmax(0, 1fr)) 12px minmax(700px, 1fr); padding: 12px 16px; }   /* 기본 50:50 · 우측(상세/등록)은 최소 700px 보장 */
/* 아이패드 프로 가로(약 1080~1440px): 목록을 좁히고 결함 상세에 더 넓게 — 반반 분할 최소화.
   수동으로 칸 너비를 드래그하면 인라인 --list-col 값이 우선 적용된다. */
@media (min-width: 1080px) and (max-width: 1440px) {
    .layout { grid-template-columns: var(--list-col, minmax(0, 0.6fr)) 12px minmax(700px, 1fr); }
}
/* 최초 진입 등 내용이 짧아도 화면 높이를 꽉 채운다(헤더·툴바 아래 남은 영역을 레이아웃이 차지) */
body.has-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }   /* 전체(body) 스크롤 차단 — 스크롤바가 헤더 옆을 침범하지 않음 */
body.has-layout .layout { flex: 1 1 auto; min-height: 0;
    grid-template-rows: minmax(0, 1fr);   /* 행 높이를 화면에 고정 — 카드 내부 스크롤 성립(무한 스크롤 전제) */
    overflow-x: auto; overflow-y: hidden; }   /* 가로만 레이아웃 스크롤 — 세로는 좌/우 카드가 각자 스크롤(아래 규칙) */
body.has-layout .layout > .panel { min-height: 0; overflow-y: auto; }   /* 목록·상세 카드가 독립적으로 위아래 스크롤 */
/* 그리드 칸이 내용(넓힌 표)에 끌려 늘어나지 않도록 — 목록은 내부에서 가로 스크롤 */
.layout > .panel { min-width: 0; }
.splitter { cursor: col-resize; position: relative; touch-action: none; }
.splitter::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: #d6dbe2; border-radius: 1px; }
.splitter:hover::before, .splitter.dragging::before { background: var(--c-brand); width: 4px; }
/* 이미지 드래그앤드롭 대상 편집기 강조 */
.editor.drag-over, .cmt-editor.drag-over { outline: 2px dashed var(--c-brand); outline-offset: -2px; background: #f0f7ff; }
/* 저장·상태전이 처리 중 표시(전체 페이지 새로고침 동안 '처리 중…') */
.busy-overlay { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.55); cursor: progress; }
.busy-overlay.on { display: flex; }
.busy-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 26px; background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.busy-spinner { width: 34px; height: 34px; border: 4px solid #dbe3ec; border-top-color: var(--c-brand); border-radius: 50%; animation: busy-spin .8s linear infinite; }
.busy-text { font-size: 13px; color: #44515f; font-weight: 600; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
/* 결함 상세 부분 로드(SPA) — 변경되는 상세 패널에만 로딩 표시(목록·헤더는 그대로).
   오버레이는 JS가 보이는 영역 높이로 만들어 정중앙에 카드+점 3개 웨이브를 띄운다. */
#detailPanel.detail-loading { position: relative; }
.detail-loading-ov { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
    background: rgba(250, 251, 253, .55); backdrop-filter: blur(1.5px); cursor: progress; }
.detail-loading-ov .dl-box { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 26px;
    background: #fff; border: 1px solid #e3e9f2; border-radius: 12px; box-shadow: 0 8px 28px rgba(28, 79, 143, .16); }
.detail-loading-ov .dl-dots { display: flex; gap: 6px; }
.detail-loading-ov .dl-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); animation: dlBounce 1s ease-in-out infinite; }
.detail-loading-ov .dl-dots i:nth-child(2) { animation-delay: .15s; }
.detail-loading-ov .dl-dots i:nth-child(3) { animation-delay: .3s; }
.detail-loading-ov .dl-text { font-size: 12px; color: #5a6675; font-weight: 600; }
@keyframes dlBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-6px); opacity: 1; } }
/* 편집기 인라인 이미지 크기조절 모서리 핸들 */
.img-edit-handle { position: absolute; z-index: 2500; display: none; width: 14px; height: 14px; background: var(--c-brand); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.45); cursor: nwse-resize; }
/* 편집기 이미지 삭제 버튼(호버 시 우상단 X) */
.img-del-btn { position: absolute; z-index: 2600; display: none; box-sizing: border-box; width: 22px; height: 22px; background: #1c1c1c; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; }
/* 흰 X를 두 막대로 그려 글리프 metrics와 무관하게 정중앙 정렬 */
.img-del-btn::before, .img-del-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: #fff; border-radius: 1px; }
.img-del-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.img-del-btn::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.img-del-btn:hover { background: #000; }
/* 이미지 표시(빨간펜) 색상 팔레트 */
.img-color-palette { display: inline-flex; align-items: center; gap: 4px; }
.color-sw { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #b9c2cd; cursor: pointer; }
.color-sw.active { box-shadow: 0 0 0 2px #1c1c1c; }
.img-hint { margin: 5px 0 2px; font-size: 11px; color: #8a96a3; }
.img-hint b { color: var(--c-brand); font-weight: 600; }
.dlist .no-col { text-align: center; color: #97a2ae; font-size: 11px; font-weight: 500; }
.panel { background: #fff; border: 1px solid #e6ebf1; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.panel h2 { font-size: 14px; margin: 0; padding: 10px 14px; background: linear-gradient(180deg, #f7f9fc, #edf1f7); color: var(--c-ink); border-bottom: 1px solid #e6ebf1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: 700; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 8px; border-bottom: 1px solid #eee; text-align: left; font-size: 12px; }
th { background: #fafbfc; color: #555; }
th.sorted { background: #eef5ff; }
/* 정렬 가능한 컬럼 헤더 */
.sort-th { display: inline-flex; align-items: center; gap: 3px; color: #555; text-decoration: none; white-space: nowrap; }
.sort-th:hover { color: #1c4f8f; }
th.sorted .sort-th { color: #1c4f8f; font-weight: 700; }
.sort-ind { flex: 0 0 auto; font-size: 10px; color: #aab2bd; }   /* 좁은 칸에서도 화살표가 잘리지 않게 고정폭 */
th.sorted .sort-ind { color: var(--c-brand); }
/* 비활성(정렬 안 된) 컬럼의 ↕ 힌트 — 정렬 가능함을 항상 은은하게 표시, 호버 시 진하게 */
.sort-ind.idle { color: #c5cdd8; }
.sort-th:hover .sort-ind.idle { color: #1c4f8f; }
/* 내 등록·내 확인 탭 — 조건 고정: 보기 전환 칩만 활성, 나머지 필터(기간·검색·조회·프리셋·초기화)는 비활성 표시 */
.toolbar.flt-locked .filters > *:not(.view-toggle) { pointer-events: none; opacity: .4; }
/* 확인 모달(공통 DefectConfirm) — 제목·정보 행·주의 문구를 또렷하게 */
.acm-modal { min-width: 400px; max-width: 480px; }
.acm-modal .acm-title { margin: 0 0 10px; font-size: 16.5px; }
.acm-modal .acm-msg { margin: 0 0 8px; font-size: 13.5px; color: #2b3442; }
.acm-modal .acm-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; padding: 10px 12px;
    background: #f6f9fd; border: 1px solid #e2eaf4; border-radius: 10px; }
.acm-modal .acm-row { display: flex; gap: 10px; align-items: baseline; }
.acm-modal .acm-l { flex: 0 0 64px; font-size: 11.5px; color: #7c8798; font-weight: 700; }
.acm-modal .acm-v { font-size: 14px; font-weight: 700; color: #1c2733; word-break: break-all; }
.acm-modal .acm-note { font-size: 12px; color: #8a6d1f; background: #fdf7e7; border: 1px solid #f1e4bd;
    border-radius: 8px; padding: 7px 10px; margin: 0 0 4px; }

/* 신규 등록 화면에서는 '신규 등록' 버튼 비활성(이미 등록 중) */
.btn.new.reg-disabled { pointer-events: none; opacity: .45; }
tr.row { cursor: pointer; }
tr.row:nth-child(even) { background: #fafbfc; }
tr.row:hover { background: #f0f7ff; }
tr.row.sel { background: #dceeff; }
/* 비활성(관리자 숨김) 결함 — 관리자에게만 흐리게 표시 */
tr.row.inactive { opacity: .5; }
.inactive-tag { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: var(--c-muted); border-radius: 3px; padding: 0 5px; margin-right: 4px; vertical-align: middle; }
/* 상태별 좌측 색상 띠 */
tr.row.st-RECEIVED td:first-child { box-shadow: inset 3px 0 0 var(--st-received); }
tr.row.st-IN_PROGRESS td:first-child { box-shadow: inset 3px 0 0 var(--st-inprogress); }
tr.row.st-DONE td:first-child { box-shadow: inset 3px 0 0 var(--st-done); }
tr.row.st-CONFIRMED td:first-child { box-shadow: inset 3px 0 0 var(--st-confirmed-soft); }   /* 칩(.b-CONFIRMED)과 동일한 회색 */
tr.row.st-REOPENED td:first-child { box-shadow: inset 3px 0 0 var(--st-reopened); }
/* 결함제목 강조 */
/* 결함제목·시스템 값은 좌측정렬(가독성). `.dlist td{text-align:center}`(특이도 0,1,1)를 이기도록 td.클래스(0,2,1)로 지정 */
.dlist td.title-cell { font-weight: 600; color: #1f2d3d; text-align: left; padding-left: 14px; }
.dlist thead th[data-col="title"] { padding-left: 14px; }   /* 분류(가운데)와 결함제목(좌측) 사이 간격 */
.dlist td.sys-cell { text-align: left; }
.dlist td.assignee-cell { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3a4756; }
/* 결함 목록 컬럼 간격 축소 — 셀 좌우 패딩 축소(세로 패딩=밀도설정 유지) */
.dlist th, .dlist td { padding-left: 4px; padding-right: 4px; }
/* No·진행상태·중요도·담당자 — 좌우 패딩 타이트(셀·배지) */
.dlist th[data-col="no"], .dlist td[data-col="no"],
.dlist th[data-col="status"], .dlist td[data-col="status"],
.dlist th[data-col="priority"], .dlist td[data-col="priority"],
.dlist th[data-col="assignee"], .dlist td[data-col="assignee"] { padding-left: 2px; padding-right: 2px; }
.dlist td[data-col="status"] .badge, .dlist td[data-col="priority"] .prio-badge { padding-left: 6px; padding-right: 6px; }
.dlist th[data-col="status"], .dlist td[data-col="status"] { padding-left: 2px; padding-right: 14px; }   /* 진행상태 왼쪽 줄이고 오른쪽 넉넉히 */
.dlist th[data-col="code"], .dlist td[data-col="code"] { padding-left: 2px; padding-right: 2px; }   /* 결함ID 양쪽 여백 좁게(폭은 유지) */
/* 분류·인물 태그 */
.cat-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 19px; box-sizing: border-box; text-align: center; padding: 0 7px; line-height: 1; border-radius: 4px; background: #eef0f3; color: #555; font-size: 11px; font-weight: 600; border: 1px solid rgba(0,0,0,.16); vertical-align: middle; }
/* 결함분류 색 구분 */
.cat-tag.cat-DEFECT  { background: #fdecea; color: var(--c-danger); border-color: #f3c0bb; }
.cat-tag.cat-IMPROVE { background: #eaf3fb; color: #2471a3; border-color: #bcd9f0; }
.cat-tag.cat-ADD     { background: #eafaf1; color: #1e8449; border-color: #bce8cf; }
.cat-tag.cat-DATA    { background: #f5eef8; color: #8e44ad; border-color: #ddc8ea; }
.cat-tag.cat-INQUIRY { background: #fdf0e1; color: #b96d12; border-color: #f4d8b0; }
.cat-tag.cat-ETC     { background: #f2f3f4; color: #566573; border-color: #d6dade; }
.person-tag { font-size: 12px; color: #333; }
.person-tag.reporter { color: #333; }
.person-tag.assignee { color: #333; font-weight: 600; }

.badge { padding: 2px 9px; border-radius: 10px; color: #fff; font-size: 11px; white-space: nowrap; font-weight: 700; border: 1px solid rgba(0,0,0,.18); }
.b-RECEIVED { background: var(--st-received); color: #fff; border-color: transparent; }
.b-IN_PROGRESS { background: var(--st-inprogress); color: #fff; border-color: transparent; }
.b-DONE { background: var(--st-done); color: #fff; border-color: transparent; }
.b-CONFIRMED { background: var(--st-confirmed-soft); color: #fff; border-color: transparent; }   /* 확인 칩: 차분한 회색(통계·KPI와 통일) */
.b-REOPENED { background: var(--st-reopened); color: #fff; border-color: transparent; }

/* 중요도 배지 */
/* 중요도: 분류(채워진 틴트)와 다른 느낌 — 아웃라인(흰 배경 + 긴급도 색 테두리·글자) */
.prio-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 19px; padding: 0 8px; line-height: 1; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid #aeb8c4; background: #fff; white-space: nowrap; vertical-align: middle; }   /* 목록 배지 외곽선 1px(라디오 칩은 1.5px 별도 유지) */
.prio-URGENT { color: var(--c-danger); border-color: #df8e87; }
.prio-HIGH   { color: #cf6a13; border-color: #efb481; }
.prio-NORMAL { color: #69737f; border-color: #c4ccd4; }
.prio-LOW    { color: #3f7cb0; border-color: #a9cae9; }
.prio-ISSUE  { color: #c0392b; border-color: #e08a84; }

.detail { padding: 12px; }
/* 상세 헤더 우측: 테스트명만 작게 표기(결함 상세 · ID 뒤, 오른쪽 정렬) */
/* 결함 상세 헤더 — 테스트명 왼쪽, 액션 버튼 오른쪽 위 */
.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 신규 등록 헤더 우측의 취소·저장 버튼 */
.detail-head .head-actions { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.detail-testname { font-size: 13px; font-weight: 700; color: var(--c-brand-deep); background: #eef5ff; border: 1px solid #cfe0f7; border-radius: 6px; padding: 2px 9px; }
.detail-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.detail-actions .btn { font-size: 12.5px; padding: 5px 12px; }
.fields { display: grid; grid-template-columns: auto minmax(0, 3.5fr) auto minmax(0, 6.5fr); gap: 9px 10px; align-items: center; margin-bottom: 10px; }   /* 좌 쌍:우 쌍 = 3.5:6.5 */
.fields label { color: #777; font-size: 12px; }
.fields .v { font-weight: 600; }
/* 상세 필드 내 인라인 변경 컨트롤(시스템 드롭다운 / 분류 라디오) */
.inline-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.inline-select { padding: 2px 8px; border: 1px solid #c3d2e4; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 600; color: var(--c-ink); cursor: pointer; }
.inline-select:hover { border-color: var(--c-brand); }
/* 결함분류 라디오 → 색 태그 전체를 누르는 토글 버튼(클릭 편하게) */
.cat-radio { display: inline-flex; cursor: pointer; font-weight: 400; }
.cat-radio input { position: absolute; opacity: 0; width: 0; height: 0; }   /* 라디오 동그라미 숨김(접근성 유지) */
.cat-radio .cat-tag { cursor: pointer; padding: 2px 9px; font-size: 11.5px; line-height: 1.4;
    border: 1px solid #6b7684; opacity: .78; transition: opacity .12s, box-shadow .12s, transform .05s; }   /* 미선택 라인 진하게·덜 흐리게 */
.cat-radio:hover .cat-tag { opacity: .85; }
.cat-radio:active .cat-tag { transform: scale(.96); }
.cat-radio input:checked + .cat-tag { opacity: 1; font-weight: 700; box-shadow: 0 0 0 2px rgba(43,108,176,.22); }
.cat-radio input:focus-visible + .cat-tag { box-shadow: 0 0 0 2px rgba(43,108,176,.45); }
.cat-radios { gap: 6px 8px; }
/* 분류 칩: 가장 긴 3글자(데이터) 기준으로 폭 통일 + 가운데 정렬 */
.reg-cat .cat-radio { flex: 0 0 auto; position: relative; }
.reg-cat .cat-tag { min-width: auto; }   /* 등록/수정 폼 분류 칩은 글자에 맞춰 핏하게(목록 배지만 고정폭) */
/* 분류 칩 hover 설명 — 칩 위에 떠오르는 커스텀 툴팁(설명이 있을 때만) */
.reg-cat .cat-radio[data-desc]:hover::after {
    content: attr(data-desc);
    position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
    background: #1f2d3d; color: #fff; padding: 7px 11px; border-radius: 7px;
    font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left;
    white-space: normal; width: max-content; max-width: 240px;
    box-shadow: 0 6px 18px rgba(15,25,40,.28); z-index: 60; pointer-events: none;
}
.reg-cat .cat-radio[data-desc]:hover::before {
    content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #1f2d3d; z-index: 60; pointer-events: none;
}
/* 신규 등록 폼 — 상단 3열(시스템·조치자·중요도) 한 줄, 분류 라디오, 큰 세부내용 */
.reg-toprow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 8px; }
/* 중요도 라디오(결함분류와 동일 라인) */
.reg-catrow-sep { margin-left: 14px; white-space: nowrap; }
.cat-radio .prio-badge { cursor: pointer; padding: 2px 10px; font-size: 11.5px; line-height: 1.4; border-width: 1.5px; border-color: #6b7684; }   /* 미선택 라인 진하게 */
/* 선택된 중요도 — 연한 틴트 채움 + 진한 테두리(부드럽게, 너무 튀지 않게) */
.cat-radio input:checked + .prio-badge { font-weight: 800; transform: translateY(-1px); border-width: 1.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.cat-radio input:checked + .prio-badge.prio-URGENT { background: #fdecea; color: var(--c-danger); border-color: var(--c-danger); }
.cat-radio input:checked + .prio-badge.prio-HIGH   { background: #fdf2e7; color: #b85e10; border-color: #cf6a13; }
.cat-radio input:checked + .prio-badge.prio-ISSUE  { background: #ea4d4d; color: #ffffff; border-color: #b33636; }
.cat-radio input:checked + .prio-badge.prio-NORMAL { background: #eef1f4; color: #5a6470; border-color: #8a94a0; }
.cat-radio input:checked + .prio-badge.prio-LOW    { background: #eaf2fb; color: #3f7cb0; border-color: #3f7cb0; }
/* 수정 폼 grid2 라벨도 볼드 */
.reg.detail .grid2 > div > label { font-weight: 700; }
.reg-toprow > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reg-toprow select { width: 100%; }

.reg-cat { margin: 2px 0 10px; }
/* 등록 폼 — 결함분류 한 줄(라벨+분류), 화면 이름 + 결함제목 한 줄(2단). 상단 압축 → 세부내용 넓게. */
/* 결함분류·중요도 — 각각 한 묶음(label+라디오), 폭에 따라 1줄/2줄로 함께 정렬 */
.reg-catrow { display: flex; gap: 8px 28px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.reg-catgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.reg-catgroup > label { white-space: nowrap; margin: 0; font-weight: 800; }
.reg-catrow .reg-cat { margin: 0; }
.reg-titlerow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 8px; }
.reg-titlerow > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reg-titlerow input { width: 100%; box-sizing: border-box; }
.reg-note { margin: 0 0 8px; font-size: 11.5px; }
/* 폭이 좁아지면 보조 안내(요청자/조치자 자동설정) 숨김 */
@media (max-width: 760px) { .reg-note { display: none; } }
/* 목록 보기 토글 — 기본 ↔ 내가 요청 */
.view-toggle .vt-chips { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 8px; overflow: hidden; }
.vt-chip { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: #5a6b7b; text-decoration: none; background: #fff; }
.vt-chip + .vt-chip { border-left: 1px solid #cfd8e3; }
.vt-chip:hover { background: #eef3f9; }
.vt-chip.on { background: var(--c-brand-deep); color: #fff; }
/* 등록 폼 — 필드 이름 볼드(보조 muted 문구는 보통) */
.reg-catrow > label, .reg-toprow > div > label, .reg-titlerow > div > label, .reg-fields4 > div > label, .reg.detail > label { font-weight: 700; }
/* 시스템명·조치자·제목·화면이름 — 폭에 따라 4 → 2 → 1 가변 */
.reg-fields4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.reg-fields4 > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reg-fields4 select, .reg-fields4 input { width: 100%; box-sizing: border-box; }
/* 결함제목 — 항상 한 줄 전체 폭(시스템명·조치자·화면이름 아래에 단독 행) */
.reg-fieldfull { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-bottom: 8px; }
.reg-fieldfull > label { font-weight: 700; }
.reg-fieldfull input { width: 100%; box-sizing: border-box; }
.reg.detail label .muted { font-weight: 400; }
/* 서식 툴바의 취소·저장 사이 간격 */
.rte-toolbar a.btn.rte-save-cancel { margin-right: 7px; }
.reg-testphase { margin-left: auto; font-size: 13px; font-weight: 400; color: #5a6b7b; }
.reg-testphase b { color: var(--c-brand-mid); }
.editor.reg-big { min-height: 240px; }   /* 높이는 화면 핏 JS가 계산 — CSS는 안전 하한만(첫 화면 스크롤 방지) */
/* 신규 등록 폼은 하단 '파일 첨부' 영역이 추가돼, 본문 에디터를 그만큼 줄여 전체 높이를 종전과 맞춤 */
#regNewForm .editor.reg-big { min-height: 220px; }
#regNewForm .reg-files { margin-top: 6px; }
#regNewForm .reg-filedrop { padding: 16px; }
.section { border: 1px solid #eee; border-radius: 5px; margin-top: 10px; }
.section > .st { padding: 6px 10px; background: #f7f8fa; font-weight: bold; border-bottom: 1px solid #eee; }
.section > .sb { padding: 10px; }
/* 접기/펴기 — .st 헤더 클릭으로 토글(캐럿 표시) */
.section > .st.st-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; }
.section > .st.st-toggle:hover { background: #eef2f7; }
.st-caret { font-size: 10px; color: #97a3b2; transition: transform .15s; flex: 0 0 auto; }
.section.collapsed > .st.st-toggle { border-bottom-color: transparent; }
.section.collapsed > .st .st-caret { transform: rotate(-90deg); }
.section.collapsed > .sb { display: none; }
.assignee-line { margin-bottom: 8px; padding: 6px 10px; background: #eaf7ef; border: 1px solid #b7e1c1; border-radius: 5px; color: #1e7e34; font-size: 13px; }
.desc { background: #fcfcfc; border: 1px solid #e5e7eb; padding: 8px; border-radius: var(--radius-sm); min-height: 40px; }
/* 결함세부내용 본문 글씨 크기를 결함제목(본문 15px)과 동일하게 */
/* 세부내용 본문을 제목값과 동일한 15px로 강제 — 붙여넣기/리치텍스트의 인라인 폰트 크기까지 무시(통일) */
.section .sb > .desc, .section .sb > .desc * { font-size: 15px !important; }
.section .sb > .desc > :first-child { margin-top: 0; }   /* 문단 첫/끝 여백 정리 — 제목값과 동일 정렬 */
.section .sb > .desc > :last-child { margin-bottom: 0; }
.desc img { max-width: 100%; height: auto; }
/* 결함 본문/댓글에 입력한 사진: 작게 저장된 이미지도 영역 폭에 맞춰 보기 좋게 확대(과대 이미지는 720px로 상한).
   사용자가 모서리 드래그로 폭을 지정한 이미지(width 속성)와 이모지/아이콘(/emoji/*)은 건드리지 않는다. */
.desc img:not([width]):not([src*="/emoji/"]) { width: 100%; height: auto; max-width: 720px; }

/* 결함세부내용 리치 에디터 */
.editor { min-height: 130px; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; padding: 8px; background: #fff; overflow: auto; }
.editor:focus { outline: 2px solid #bcd6f5; }
.editor:empty:before { content: attr(data-placeholder); color: #a8b0bb; white-space: pre-line; line-height: 1.75; }
.editor img { max-width: 100%; height: auto; }
/* 본문 목록 서식이 에디터/상세보기 모두에서 보이도록 */
.editor ul, .desc ul { padding-left: 22px; list-style: disc; }
.editor ol, .desc ol { padding-left: 22px; list-style: decimal; }
.editor li, .desc li { margin: 2px 0; }

/* 서식 툴바 */
.rte-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px 4px 0 0; background: #f4f6f9; }
/* 폭이 좁아져도 버튼이 줄지 않고 글자도 깨지지 않게(• 목록·1. 순번·서식지우기가 두 줄로 내려가지 않도록) */
.rte-toolbar button { flex: 0 0 auto; white-space: nowrap; min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; font-size: 13px; color: #333; }
.rte-toolbar .sep, .rte-toolbar .rte-save-cancel { flex: 0 0 auto; }
.rte-toolbar button:hover { background: #e3e8ef; border-color: #cdd5e0; }
.rte-toolbar .sep { width: 1px; height: 18px; background: #d0d6de; margin: 0 4px; }
.rte-toolbar .rte-spacer { flex: 1 1 auto; }
.rte-toolbar button.btn.rte-save-cancel { min-width: 0; height: 28px; padding: 0 16px; font-size: 13px; font-weight: 600; border-radius: 5px; background: var(--c-brand-deep); border: 1px solid var(--c-brand-deep); color: #fff; }
.rte-toolbar button.btn.rte-save-cancel:hover { background: #274d7e; border-color: #274d7e; }
.rte-toolbar a.btn.rte-save-cancel { height: 28px; padding: 0 14px; font-size: 13px; border-radius: 5px; display: inline-flex; align-items: center; }
.timeline li { margin-bottom: 6px; }
.muted { color: #767f8c; }

/* 첨부 삭제 (텍스트 버튼) */
.attach-list li { margin: 2px 0; }
.link-del { border: none; background: none; color: var(--c-danger); cursor: pointer; font-size: 11px; padding: 0 2px; text-decoration: underline; }
.link-del:hover { color: #922b21; }

/* 댓글 */
.cmt-list { margin-bottom: 10px; }
.cmt-thread { padding: 8px 0; border-bottom: 1px solid #eef0f3; }
.cmt-thread:last-child { border-bottom: none; }
.cmt { padding: 8px 0; }
.cmt-replies { margin: 6px 0 2px 22px; border-left: 2px solid #e6eaef; padding-left: 12px; }
.cmt.reply { padding: 6px 0; }
.cmt-reply-box { margin: 6px 0 2px 22px; }
.cmt-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cmt-head b { color: #111827; font-weight: 700; }
.cmt-head .muted { font-size: 12px; color: #6b7280; }
.cmt-actions { margin-left: auto; display: flex; gap: 4px; }
.cmt-body { margin-top: 5px; }
.cmt-editor { min-height: 34px; border: 1px solid #ccc; border-radius: 4px; padding: 6px 8px; background: #fff; overflow: auto; }
.cmt-editor:focus { outline: 2px solid #bcd6f5; }
.cmt-editor:empty:before { content: attr(data-placeholder); color: #aaa; }
.cmt-editor img { max-width: 100%; height: auto; }
.cmt-edit-box { margin-top: 6px; }
.cmt-edit-actions { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.cmt-edit-actions .btn { font-size: 12px; padding: 4px 10px; }
.cmt-hist { margin-top: 6px; background: #f7f8fa; border: 1px solid #eef0f3; border-radius: 5px; padding: 8px; }
.cmt-hist-item { padding: 4px 0; border-bottom: 1px dashed #e0e4ea; }
.cmt-hist-item:last-child { border-bottom: none; }
.cmt-new { margin-top: 8px; border-top: 1px solid #eef0f3; padding-top: 10px; }

/* 참여자(요청자 → 담당자) 강조 */
.people { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.person { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 8px; min-width: 120px; border: 1px solid; text-align: left; }
.person .role { font-size: 11px; opacity: .85; }
.person .pname { font-size: 15px; font-weight: 700; line-height: 1.3; }
.person .pname-time { font-size: 11px; font-weight: 500; opacity: .7; margin-top: 1px; }
.person.reporter { background: #eef5ff; border-color: #b8d4f5; color: #1c4f8f; }
.person.assignee { background: #eaf7ef; border-color: #b7e1c1; color: #1e7e34; }
.person.assignee.past { background: #f1f3f5; border-color: #d6dade; color: #7a828c; }
.person.assignee.current { box-shadow: 0 0 0 2px #b7e1c1; }
.person.assignee.done { background: #e8efe9; border-color: #bcd0c2; color: #5a7062; }   /* 조치 완료(처리완료·확인) — 머티드 그린(완료 표시) */
.person.confirmer { background: #f3eefe; border-color: #d4c2f0; color: #6c3fb5; }
.person.confirmer.past { background: #f1f3f5; border-color: #d6dade; color: #7a828c; }   /* 확인 전: 아직 미확인 → 회색 */
.person.confirmer.current { box-shadow: 0 0 0 2px #d4c2f0; }                              /* 확인 완료: 강조 링 */
/* 진행 단계 강조: 각 역할은 고유색 유지(요청자·조치자·확인자), 현재 단계만 링(box-shadow)으로 강조.
   미도달·교체 단계만 회색(past)으로 구분(투명도 dim은 조치자 색이 죽어 제거). */
.people .person { transition: box-shadow .15s ease; }
.tl-flow.assignee-flow { color: #6c5ce7; font-weight: 600; }
.people .arrow { color: #9aa7b8; font-size: 18px; }
.reject-flag { display: inline-block; margin-left: 8px; font-size: 11px; color: #fff; background: #e67e22; border-radius: 10px; padding: 1px 8px; }
.reopen-flag { display: inline-block; margin-left: 8px; font-size: 11px; color: #fff; background: var(--st-reopened); border-radius: 10px; padding: 1px 8px; }

/* 세로 타임라인(진행 이력) */
.vtimeline { list-style: none; margin: 0; padding: 0; position: relative; }
.vtimeline:before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #e3e7ee; }
.vtimeline li { position: relative; padding: 0 0 14px 26px; }
.vtimeline li:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #bbb; border: 3px solid #fff; box-shadow: 0 0 0 1px #e3e7ee; }
.tl-SAVE .tl-dot { background: var(--c-muted); }
.tl-EDIT .tl-dot { background: #b08968; }
.tl-ASSIGN .tl-dot { background: #6c5ce7; }
.tl-RESOLVE .tl-dot { background: #2980b9; }
.tl-CONFIRM .tl-dot { background: #27ae60; }
.tl-REJECT .tl-dot { background: #e67e22; }
.tl-RECLASSIFY .tl-dot { background: #16a085; }
.tl-DEACTIVATE .tl-dot { background: #7a828c; }
.tl-ACTIVATE .tl-dot { background: #138d75; }
.tl-OVERRIDE .tl-dot { background: var(--c-danger); }
.tl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-action { font-size: 11px; font-weight: 700; color: #fff; padding: 1px 9px; border-radius: 10px; background: var(--c-muted); }
.a-SAVE { background: var(--c-muted); }
.a-EDIT { background: #b08968; }
.a-ASSIGN { background: #6c5ce7; }
.a-RESOLVE { background: #2980b9; }
.a-CONFIRM { background: #27ae60; }
.a-REJECT { background: #e67e22; }
.a-REOPEN { background: #9b51e0; }
.a-RECLASSIFY { background: #16a085; }
.a-DEACTIVATE { background: #7a828c; }
.a-ACTIVATE { background: #138d75; }
.a-OVERRIDE { background: var(--c-danger); }

/* 작은 인라인 버튼(분류 변경 등) */
.mini-btn { margin-left: 6px; padding: 1px 8px; font-size: 11px; border: 1px solid #cdd5e0; border-radius: 4px; background: #f4f6f9; color: #44515f; cursor: pointer; }
/* 결함 분류 수정하기: 뱃지/버튼 혼동 방지 — 텍스트 링크 스타일 */
.mini-btn.cat-edit-btn { margin-left: 8px; padding: 0; border: none; background: none; box-shadow: none; color: #3b82f6; text-decoration: underline; font-weight: 600; font-size: 12px; }
.mini-btn.cat-edit-btn:hover { color: #2563eb; }
.mini-btn:hover { background: #e3e8ef; border-color: #b6c1cf; }
/* 결함분류 수정: 분류 태그와 헷갈리지 않게 '액션 버튼'으로 구분(파란 톤·연필 아이콘) */
.cat-edit-btn { background: #eaf2fb; color: #1f6fb2; border-color: #a9cdee; font-weight: 600; padding: 2px 10px; }
.cat-edit-btn:hover { background: #d6e7f8; border-color: #7fb4e6; }
/* 배포 버전·빌드/기동 시각 우하단 표시 */
.build-stamp { position: fixed; left: 4px; bottom: 3px; z-index: 50; font-size: 10px; color: #aab4bf; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.build-stamp b { color: #5a6b7b; font-weight: 700; }
/* 목록 총건수 + 페이지네이션 */
.list-count { font-size: 12px; font-weight: 600; color: #6b7a89; }
/* 페이지네이션 — 상단 타이틀 라인 우측. 테두리 없는 미니멀 링크 + 원형 호버, 활성=블루+언더라인 */
.pager { display: inline-flex; align-items: center; gap: 1px; padding: 0; flex-wrap: wrap; }
.pager .pg { font-size: 12.5px; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border: none; border-radius: 999px; color: #5a6b7b; text-decoration: none; background: transparent; font-weight: 600; }
.pager .pg:hover { background: #e8f0fb; color: var(--c-brand-mid); }
.pager .pg.cur { color: var(--c-brand-mid); font-weight: 800; background: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.pager .pg.disabled { color: #cdd5de; pointer-events: none; background: transparent; }
/* 목록 헤더: 타이틀(좌) + 페이저·새로고침(우) */
.panel h2.list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; box-sizing: border-box; }   /* 다중선택 토글 양쪽 상태의 실측 최대(48px)로 고정 — 전환 시 높이 출렁임 방지 */
.list-head-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.list-refresh { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 999px; color: var(--c-brand-mid); background: #eef4fc; border: 1px solid #cfe0f5; text-decoration: none; font-size: 15px; line-height: 1; }
.list-refresh:hover { background: #dceafb; }
/* 결함목록 컬럼 표시/숨김 버튼 — 새로고침 버튼과 어울리는 깔끔한 알약형 아이콘 버튼 */
.col-pick { position: relative; }
.col-pick > summary { list-style: none; cursor: pointer; height: 27px; display: inline-flex; align-items: center; gap: 5px;
    padding: 0 11px 0 9px; border: 1px solid #cfe0f5; border-radius: 999px; background: #eef4fc; color: var(--c-brand-mid);
    font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .14s, border-color .14s, color .14s; }
.col-pick > summary::-webkit-details-marker { display: none; }
.col-pick > summary::after { content: '▾'; font-size: 9px; color: #9bb4d4; margin-left: 1px; }
.col-pick > summary svg { width: 14px; height: 14px; opacity: .8; }
.col-pick > summary:hover { background: #dceafb; border-color: #b6d0ee; color: var(--c-brand-deep); }
.col-pick[open] > summary { background: #fff; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,144,217,.16); color: var(--c-brand-deep); }
.col-pick .flt-sysmenu { right: 0; left: auto; min-width: 184px; padding-top: 4px; }
.col-pick-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 10.5px; font-weight: 800; color: #8090a6; letter-spacing: .3px; padding: 4px 12px 6px; }
.col-reset { font-size: 10.5px; font-weight: 700; color: #2c6cb5; background: #eef5fc; border: 1px solid #d7e6f7;
    border-radius: 6px; padding: 2px 8px; cursor: pointer; letter-spacing: 0; }
.col-reset:hover { background: #e0eefb; border-color: #b6d0ee; }
.tl-flow { font-size: 12px; color: #555; }
.tl-time { font-size: 11px; color: #999; margin-left: auto; }
.tl-meta { font-size: 12px; color: #444; margin-top: 3px; }
.tl-comment { font-size: 12px; color: #333; background: #f7f8fa; border: 1px solid #eef0f3; border-radius: 5px; padding: 6px 9px; margin-top: 5px; white-space: pre-wrap; }

form.reg label, form.act label { display: block; margin: 8px 0 3px; font-size: 12px; color: #555; }
form.reg input, form.reg select, form.reg textarea,
form.act textarea, form.act select { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: var(--radius-sm); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actbox { border: 1px solid #e1e4e8; border-radius: 5px; padding: 10px; margin-top: 8px; background: #fbfdff; }
.placeholder { padding: 40px; text-align: center; color: #aaa; }
/* 결함 미선택 시 빈 상세 영역 — 빈 화면 대신 안내형 빈 상태(세로 중앙 정렬로 아래 여백 채움) */
.empty-state { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; color: #6b7785; }
.empty-state .es-logo { height: 60px; margin: 0 auto 14px; display: flex; justify-content: center; align-items: center; opacity: .92; filter: drop-shadow(0 6px 14px rgba(47,111,208,.25)); }
.empty-state .es-title { font-size: 18px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.empty-state .es-sub { font-size: 13.5px; color: var(--c-muted); margin: 0 0 20px; line-height: 1.6; }
.empty-state .es-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.empty-state .es-tips { list-style: none; padding: 0; margin: 4px auto 0; max-width: 460px; text-align: left; display: grid; gap: 10px; }
.empty-state .es-tips li { display: flex; align-items: flex-start; gap: 11px;
    background: linear-gradient(180deg, #fbfdff, #f4f8fd); border: 1px solid #e4ecf6; border-radius: 12px;
    padding: 13px 15px; font-size: 13px; color: #46546a; line-height: 1.55; box-shadow: 0 1px 2px rgba(30,60,110,.04); }
.empty-state .es-tips li svg { flex: 0 0 auto; margin-top: 1px; color: #2f6fd0;
    background: #e6f0fd; border-radius: 8px; padding: 5px; width: 26px; height: 26px; box-sizing: border-box; }
.empty-state .es-tips li b { color: var(--c-ink); }

/* 모달 (확인/반려) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: 20px; width: 460px; max-width: 92vw; box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.modal h3 { margin: 0 0 12px; font-size: 16px; }
.modal label { display: block; margin: 10px 0 4px; color: #555; font-size: 12px; }
.modal textarea, .modal select { width: 100%; padding: 7px 9px; border: 1px solid #ccc; border-radius: var(--radius-sm); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-note { margin: 10px 0 0; font-size: 12px; color: #8a6d3b; background: #fcf8e3; border: 1px solid #faebcc; border-radius: 4px; padding: 6px 9px; }

/* 결함분류 안내 */
.cat-guide { margin: 6px 0 4px; border: 1px solid #e1e4e8; border-radius: 5px; background: #fbfdff; padding: 6px 10px; }
.cat-guide summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--c-ink); }
.cat-guide ul { margin: 8px 0 2px; padding-left: 18px; }
.cat-guide li { font-size: 12px; color: #555; margin: 3px 0; }

/* 결함분류 안내 아래 '처리 흐름' 링크 */
.proc-link { margin: 6px 0 2px; font-size: 12px; }
.proc-link a { color: #1c4f8f; font-weight: 600; text-decoration: none; }
.proc-link a:hover { text-decoration: underline; }

/* 칸 너비를 키워 표가 패널보다 넓어지면 목록 영역만 가로 스크롤(상세/스플리터로 넘치지 않게) */
/* 사용자 관리 화면 — 필터 바·회사 요약 칩·테이블 */
.umgr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 6px; }
.umgr-filters input[type="search"] { width: 220px; padding: 6px 10px; border: 1px solid #c3d2e4; border-radius: var(--radius-sm); }
.umgr-filters select { padding: 6px 8px; border: 1px solid #c3d2e4; border-radius: var(--radius-sm); background: #fff; }
.umgr-summary { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.co-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border: 1px solid #d7dee7; border-radius: 999px; background: #f7f9fc; color: #44515f; font-size: 12px; cursor: pointer; }
.co-chip b { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: #e6edf6; color: var(--c-brand-mid); font-size: 11px; }
.co-chip:hover { border-color: var(--c-brand); }
.co-chip.active { background: var(--c-brand-mid); color: #fff; border-color: var(--c-brand-mid); }
.co-chip.active b { background: rgba(255,255,255,.25); color: #fff; }
/* 정렬 가능한 표 헤더 + 가운데 정렬 컬럼 */
.col-center { text-align: center; }
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--c-brand-mid); }
.th-sort.sorted-asc::after { content: ' ▲'; font-size: 10px; color: var(--c-brand); }
.th-sort.sorted-desc::after { content: ' ▼'; font-size: 10px; color: var(--c-brand); }
.co-sec { margin-bottom: 12px; }
.co-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.co-sec-count { white-space: nowrap; }
.co-sec-none { border: 1px solid #f3c0bb; }
.umgr-table { width: 100%; }
.umgr-table th, .umgr-table td { padding: 9px 8px; vertical-align: middle; }
.umgr-table .u-id b { font-size: 13.5px; color: #1f2d3d; }
.umgr-table select { padding: 5px 7px; border: 1px solid #c3d2e4; border-radius: var(--radius-sm); background: #fff; max-width: 100%; }
.umgr-table select.unset { color: var(--c-danger); border-color: #e8b0aa; border-style: dashed; background: #fdf3f2; }
.umgr-table .u-roleform { margin: 0; }
/* 저장 + 비활성화 액션 묶음 — 같은 크기·구분선·의미 색으로 정돈 */
.u-actions { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }   /* 한 줄 고정 */
.u-actions .u-prof { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; margin: 0; }
.u-actions .btn { font-size: 11px; padding: 3px 8px; white-space: nowrap; }
.u-actions input[type="text"] { padding: 3px 6px; font-size: 12px; }
.u-actions form { margin: 0; }
.u-div { width: 1px; align-self: stretch; min-height: 22px; background: #e3e8ef; }
.u-deact { color: var(--c-danger); border-color: #e8b0aa; }          /* 비활성화 = 빨강계열 */
.u-deact:hover { background: #fdecea; border-color: #d98b80; }
.u-deact.on { color: #1e8449; border-color: #bce8cf; }        /* 활성화 = 초록계열 */
.u-deact.on:hover { background: #eafaf1; border-color: #93d3ab; }
.reset-req { display: inline-block; font-size: 10px; font-weight: 700; color: #b96d12; background: #fdf0e1; border: 1px solid #f4d8b0; border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
/* 인증 구분 태그(사용자 관리) */
.auth-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.auth-tag.local { background: #eef2f7; color: #5a6b7b; }
.auth-tag.ldap { background: #e8f1fb; color: #2471a3; }
/* 사용자 관리 — 최초 로그인 / 초기비밀번호 표시 */
.login-at { font-size: 11.5px; color: #41526a; white-space: nowrap; }
.never-login { display: inline-block; font-size: 10px; font-weight: 700; color: #8a93a0; background: #f0f2f5; border: 1px solid #dfe4ea; border-radius: 4px; padding: 1px 6px; }
.initpw { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.initpw.on { color: #b03636; background: #fdeced; border: 1px solid #f3c6c8; }   /* 초기비번 사용중 — 주의 */
.initpw.off { color: #2f7a4d; background: #e9f6ee; border: 1px solid #c2e6ce; }  /* 변경됨 — 정상 */
.initpw.na { color: #8a93a0; background: #f0f2f5; border: 1px solid #dfe4ea; }   /* LDAP — 해당없음 */
/* 사용자 관리 액션 — 옆 셀(드롭다운)과 크기 맞춤 */
.u-actions .btn { font-size: 12px; padding: 0 11px; height: 32px; box-sizing: border-box; }
.u-prof input { height: 32px; box-sizing: border-box; font-size: 12.5px; padding: 0 8px; }
/* 액션 셀이 넓은 표 폭을 채우도록 — 프로필 폼·이메일 입력이 남는 공간을 사용 */
.umgr-table .u-actions { width: 100%; }
.umgr-table .u-actions .u-prof { flex: 1 1 auto; }
.umgr-table .u-prof input[name="email"] { flex: 1 1 auto; min-width: 150px; }
/* 비밀번호 초기화 요청이 들어온 사용자 — 회색 대신 눈에 띄는 주황 채움 */
.u-reset.req { color: #fff; border-color: #e08a1e; background: #f59425; font-weight: 700; box-shadow: 0 1px 3px rgba(224,138,30,.4); }
.u-reset.req:hover { background: #e0821a; border-color: #c9760f; }
/* 관리자 전용 탭 내비 — 헤더 아래 별도 바(결함관리와 분리) */
.navlink.back { font-weight: 600; }
.admin-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 16px; margin: 0 0 14px; background: #f3f5f9; border-bottom: 1px solid #e1e6ee; }
.admin-tabs a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #4a5564; text-decoration: none; }
.admin-tabs a svg { opacity: .85; }
.admin-tabs a:hover { background: #e6ebf3; color: var(--c-brand-deep); }
.admin-tabs a.on { background: var(--c-brand-deep); color: #fff; box-shadow: 0 1px 3px rgba(47,93,150,.35); }
.admin-tabs .admin-tabs-home { font-weight: 800; color: var(--c-brand-deep); }
.admin-tabs .admin-tabs-home.on { color: #fff; }
.admin-tabs-div { width: 1px; align-self: stretch; margin: 4px 6px; background: #d4dae3; }
/* 우상단 사용자 메뉴(이름 클릭 → 정보 + 비밀번호 변경) */
.usermenu { position: relative; }
/* 헤더(짙은 남색) 위에서 잘 보이도록 밝은 글씨 + 알약형 배경 */
.usermenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; font-size: 13px; color: #eaf1fb; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: rgba(255,255,255,.24); color: #fff; }
.usermenu[open] > summary { background: rgba(255,255,255,.24); color: #fff; }
.usermenu > summary b { font-weight: 700; color: #fff; }
.um-caret { font-size: 10px; color: #dbe6f5; }
.um-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; background: #fff; color: var(--c-ink); border: 1px solid #e1e6ee; border-radius: 14px; box-shadow: 0 14px 34px rgba(15,25,50,.18); padding: 16px; z-index: 60; }
.um-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.um-id { flex: 1 1 auto; min-width: 0; }
.um-id-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.um-name { font-size: 15px; font-weight: 800; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-affil { margin-top: 3px; font-size: 12px; color: #7a8aa0; }
.um-affil-co { font-weight: 600; color: #5a6b86; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-affil-sys { display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 로그인 방식 — 폼 상단 라벨 */
.um-loginway { font-size: 11px; color: #8a93a0; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.um-loginway b { color: #5a6b86; font-weight: 700; letter-spacing: .2px; }
.um-info { font-size: 11.5px; color: var(--c-muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.um-edit { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.um-edit-row { display: flex; gap: 8px; align-items: center; }
.um-edit-row input { flex: 1 1 auto; min-width: 0; height: 34px; border: 1px solid #dbe2ec; border-radius: 8px; padding: 0 11px; font-size: 12.5px; box-sizing: border-box; }
.um-edit-row input:focus { outline: none; border-color: #9fc0e6; box-shadow: 0 0 0 3px rgba(127,169,216,.16); }
.um-edit-row input:disabled { background: #f4f6f9; color: var(--c-muted); }
/* 우측 액션 버튼 — 입력창과 동일 높이(34px), 두 줄(성명·이메일) 끝선 수직 일치(고정폭) */
.um-edit-row .btn { flex: 0 0 auto; height: 34px; line-height: 32px; padding: 0 10px; font-size: 12px; white-space: nowrap; width: 82px; min-width: 82px; text-align: center; box-sizing: border-box; border-radius: 8px; box-shadow: none; }
/* 주 버튼(이메일 — 즉시 반영): 채움 */
.um-edit-row .btn.um-btn-primary { background: var(--c-brand); border: 1px solid var(--c-brand); color: #fff; }
.um-edit-row .btn.um-btn-primary:hover { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: #fff; }
/* 부 버튼(성명 — 승인 필요): 테두리만 */
.um-edit-row .btn.um-btn-ghost { background: #fff; border: 1px solid #cdd6e2; color: #51607a; }
.um-edit-row .btn.um-btn-ghost:hover { background: #f3f7fc; border-color: #aebfd4; color: #2c5a8f; }
/* 성·이름을 붙여 하나의 ‘성명’ 그룹처럼 */
.um-name-group { flex: 1 1 auto; display: flex; min-width: 0; gap: 6px; }
.um-name-group input { height: 34px; border: 1px solid #dbe2ec; border-radius: 8px; padding: 0 10px; font-size: 12.5px; box-sizing: border-box; min-width: 0; background: #fff; }
.um-name-group input:focus { outline: none; border-color: #9fc0e6; box-shadow: 0 0 0 3px rgba(127,169,216,.16); }
.um-fn-fam { flex: 0 0 34px; width: 34px; padding: 0 4px; text-align: center; }   /* 성 = 정사각형 */
.um-fn-given { flex: 1 1 auto; }
.um-edit-hint { margin-top: -6px; font-size: 11.5px; color: #9aa4b2; line-height: 1.5; word-break: keep-all; padding: 0 2px; }
.um-edit-hint b { color: #8a93a0; font-weight: 700; }
.um-hint-ic { color: #b3bcc8; vertical-align: -2px; margin-right: 1px; }
.um-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--c-brand-deep); text-decoration: none; }
.um-item:hover { background: #eef5ff; }
.um-item svg { flex: 0 0 auto; }

/* 사용자 메뉴 안의 로그아웃(맨 아래, 구분선) — 다른 항목과 동일 레이아웃 + 레드 톤 */
.um-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--c-line); display: flex; justify-content: center; }
.um-logout-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: #5b6673; padding: 3px 5px; border-radius: 7px; }
.um-logout-link:hover { color: var(--c-danger); background: #fdecec; }
.um-logout { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--c-line); }
/* 로그아웃: 가운데 정렬 + 아주 얇은 테두리 버튼 */
.um-item-btn { width: 100%; box-sizing: border-box; background: none; border: 1px solid #ecccca; cursor: pointer; font: inherit; justify-content: center; color: var(--c-danger); }
.um-item-btn:hover { background: #fdecec; border-color: #e2b3b1; }

/* ── 알림(벨 + 드롭다운 + 토스트) ── */
.header-tools { display: flex; align-items: center; gap: 9px; }
.header-tools .notifmenu { order: 2; }   /* 벨을 사용자 메뉴 오른쪽으로 */
.header-tools .usermenu { order: 1; }
.notifmenu { position: relative; }
.notifmenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border-radius: 8px; color: #eaf1fb; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); position: relative; }
.notifmenu > summary::-webkit-details-marker { display: none; }
.notifmenu > summary:hover, .notifmenu[open] > summary { background: rgba(255,255,255,.24); color: #fff; }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #25406a; }
.notif-panel { right: 0; min-width: 420px; max-width: 480px; padding: 8px; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; }
.notif-head b { font-size: 14px; }
.notif-readall { background: none; border: none; color: var(--c-brand); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: 440px; overflow-y: auto; display: flex; flex-direction: column; }
.notif-empty { padding: 20px; text-align: center; color: var(--c-muted); font-size: 12.5px; }
/* 알림 항목 — 박스 없이 구분선 기반 평평한 리스트(상단 배지·시간 / 본문 / 하단 결함ID·시스템 칩) */
.notif-item { position: relative; display: block; padding: 12px 14px 12px 16px; text-decoration: none;
    border-bottom: 1px solid #eef1f5; border-left: 3px solid transparent; transition: background .12s ease; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f5f8fc; }
/* 전체 알림 페이지 — 번호 칸 */
.notif-page-list .notif-item { padding-left: 46px; }
.notif-no { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; display: flex; align-items: center; justify-content: center;
    color: #9aa5b2; font-size: 11px; font-weight: 700; }
/* 상단 행 — 타입 배지 + 시간 */
.notif-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.notif-type { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; background: #5a90c8; letter-spacing: .3px; }
.notif-item.nt-TO_CONFIRM .notif-type { background: #E8973A; }
.notif-item.nt-REJECTED .notif-type { background: #D9614D; }
.notif-item.nt-CLOSED .notif-type { background: #8A94A4; }
.notif-item.nt-REOPENED .notif-type { background: #C77DB0; }
.notif-item.nt-COMMENT .notif-type { background: #2B9D8F; }
.notif-item.nt-REPLY .notif-type { background: #8A6FD0; }
.notif-item.nt-MENTION .notif-type { background: #4C9BC4; }
.notif-item.nt-CHAT_REACTION .notif-type,
.notif-item.nt-CHAT_INVITE .notif-type { background: #5AA0D0; }
.notif-item.nt-CONFIRMER_CHANGED .notif-type { background: #3AA0C9; }
.notif-item.nt-ANNOUNCEMENT .notif-type { background: #D99A2B; }
.notif-item.nt-PASSWORD_RESET .notif-type { background: var(--c-danger); }
.notif-time { font-size: 11px; color: #aeb6c1; white-space: nowrap; }
.notif-msg { display: block; font-size: 12.5px; font-weight: 400; color: #47525f; line-height: 1.55; word-break: keep-all; }
/* 하단 행 — 결함ID·시스템 칩 */
.notif-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.notif-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: #5b6b7d;
    background: #f1f5fa; border: 1px solid #e2e9f2; border-radius: 3px; padding: 2px 7px; }
.notif-chip.code { color: #2f6fd0; background: #eaf2fd; border-color: #d3e4fb; font-weight: 700; }
/* 미읽음 강조(좌측 컬러 바 + 옅은 배경) / 읽음 약화 */
.notif-item:not(.read) { border-left-color: #4488C9; background: #f8fbff; }
.notif-item:not(.read) .notif-msg { font-weight: 500; color: var(--c-ink); }
.notif-item.read { opacity: .72; }
.notif-item.read .notif-type { background: #c2cad4; }
.notif-viewall { display: block; text-align: center; padding: 9px 8px 4px; margin-top: 4px; border-top: 1px solid var(--c-line); font-size: 12px; font-weight: 600; color: var(--c-brand); text-decoration: none; }
.notif-viewall:hover { text-decoration: underline; }
/* 전체 알림 페이지 — 가운데 컬럼, 내부 스크롤 제거(페이지가 자연 스크롤), 높이 채움 */
#notifPage { max-width: 880px; margin-left: auto; margin-right: auto; width: 100%; }
#notifPage .toolbar { justify-content: center; }
.notif-page-list { max-width: 100%; margin: 0; max-height: none; overflow: visible; min-height: 220px; }
body.notif-page-body { display: flex; flex-direction: column; }
body.notif-page-body > .page { flex: 1 1 auto; }
/* 토스트(우하단) — 드롭다운과 동일한 색점 스타일로 통일 */
.notif-toasts { position: fixed; right: 20px; bottom: 96px; display: flex; flex-direction: column; gap: 10px; z-index: 2000; }   /* 채팅 플로팅 버튼과 겹치지 않게 */
/* 알림 토스트 — 다크 글래스 카드(왼쪽 색 띠 없이, 유형은 색점+라벨로) */
.notif-toast { --nt: #4488C9; position: relative; display: block; width: 340px; max-width: 88vw;
    background: rgba(24, 30, 42, .96); backdrop-filter: blur(6px); border-radius: 14px;
    box-shadow: 0 10px 32px rgba(10, 16, 30, .35); padding: 12px 16px 13px; text-decoration: none;
    transform: translateX(118%); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.notif-toast.show { transform: translateX(0); opacity: 1; }
.notif-toast:hover { background: rgba(30, 38, 54, .97); }
/* 유형 — 색점 + 밝은 소문자 라벨 한 줄 */
.notif-toast b { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    color: #aeb9c9; letter-spacing: .3px; margin-bottom: 5px; }
.notif-toast b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--nt);
    box-shadow: 0 0 6px var(--nt); }
.notif-toast span { display: block; font-size: 13.5px; color: #f2f5f9; font-weight: 500; line-height: 1.55; word-break: break-word; }
.notif-toast.nt-TO_CONFIRM { --nt: #E8973A; }
.notif-toast.nt-REJECTED { --nt: #D9614D; }
.notif-toast.nt-CLOSED { --nt: #8A94A4; }
.notif-toast.nt-ASSIGNED { --nt: #4488C9; }
.notif-toast.nt-REOPENED { --nt: #B5651D; }
.notif-toast.nt-COMMENT { --nt: #2B9D8F; }
.notif-toast.nt-CONFIRMER_CHANGED { --nt: #3AA0C9; }
.notif-toast.nt-MENTION { --nt: #4C9BC4; }
.notif-toast.nt-REPLY { --nt: #8A6FD0; }
.notif-toast.nt-PASSWORD_RESET { --nt: #C0392B; }
/* 로그인 화면 — 비밀번호 초기화 요청 */
.login-reset { margin-top: 16px; border-top: 1px solid var(--c-line); padding-top: 14px; }
.login-reset > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-brand); list-style: none; }
.login-reset > summary::-webkit-details-marker { display: none; }
.login-reset > summary::marker { content: ''; }
.login-reset-body { margin-top: 12px; }
.login-reset-body .muted { font-size: 11.5px; line-height: 1.6; margin: 0 0 12px; }
.login-reset-body input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-size: 14px; }
.login-reset-body .btn { width: 100%; margin-top: 10px; }
/* 알림(플래시) → 하단에서 떠오르는 토스트 */
.toast-host { position: fixed; left: 0; right: 0; bottom: 26px; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none; }
.toast { margin: 0 !important; width: auto; min-width: 260px; max-width: min(92vw, 540px); box-shadow: 0 10px 30px rgba(0,0,0,.2); border-radius: 10px; opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s ease; pointer-events: auto; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.hide { opacity: 0; transform: translateY(24px); }
/* 토스트로 전환될 인라인 플래시(별도 style 없는 것)는 변환(.toast) 전까지 숨겨 상단 깜빡임 방지.
   로그인/비번/비활성 안내처럼 인라인 유지가 필요한 플래시는 style 속성이 있어 제외된다. */
.flash.ok:not([style]):not(.toast),
.flash.err:not([style]):not(.toast) { display: none; }
/* 시스템 관리 화면 */
.sys-row.inactive { opacity: .6; background: #f7f8fa; }
.sys-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sys-del-btn { color: var(--c-danger); border-color: #e8b9b3; }
.sys-del-btn:hover { background: #fdecea; border-color: #e0897f; }
.sys-code { font-family: ui-monospace, monospace; font-size: 11px; color: #6b7280; background: #f0f2f6; border: 1px solid #e0e4ea; border-radius: 5px; padding: 3px 8px; }
.sys-name { min-width: 200px; font-weight: 600; }
.sys-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
/* 시스템 설정 줄 — 입력/드롭다운/버튼 높이 통일(버튼만 튀지 않게) */
.sys-set input[type=text], .sys-set input[type=number], .sys-set select, .sys-set .btn { height: 34px; box-sizing: border-box; }
.sys-set .btn { padding: 0 14px; font-size: 13px; }
/* 사용자 관리 — 데이터 가운데 정렬(관리 셀은 왼쪽) */
.umgr-table th, .umgr-table td { text-align: center; vertical-align: middle; }
.umgr-table .u-id { justify-content: center; }
.umgr-table .u-actions { justify-content: flex-start; }
.sys-assign { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.sys-assign-bar { display: flex; align-items: center; gap: 12px; }
.sys-assign-label { font-size: 13px; font-weight: 600; }
.sys-assign-label b { color: var(--c-brand-deep); }
.sys-edit { margin-left: auto; }
.sys-edit > summary { cursor: pointer; font-size: 12.5px; color: var(--c-brand-deep); font-weight: 600; list-style: none; padding: 4px 10px; border: 1px solid #cfe0f7; border-radius: 7px; background: #f4f8fe; }
.sys-edit > summary::-webkit-details-marker { display: none; }
.sys-edit[open] > summary { background: #e8f1fc; }
.sys-edit-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.sys-assign-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 회사 관리 화면 */
/* 시스템 담당 현황 — 요약 바 + 카드 그리드 */
.cov-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cov-stats { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.cov-stat { font-size: 12px; color: #5a6b7b; background: #f1f4f8; border: 1px solid #e3e8ef; border-radius: 999px; padding: 4px 11px; }
.cov-stat b { font-size: 13.5px; color: var(--c-ink); margin-right: 2px; }
.cov-stat.ok { background: #eafaf1; border-color: #bce8cf; color: #1e8449; }
.cov-stat.ok b { color: #1e8449; }
.cov-stat.warn { background: #fdecea; border-color: #f5c6c0; color: var(--c-danger); }
.cov-stat.warn b { color: var(--c-danger); }
.cov-stat.warn.zero { background: #eafaf1; border-color: #bce8cf; color: #1e8449; }
.cov-stat.warn.zero b { color: #1e8449; }
.cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cov-item { border: 1px solid #e6ebf1; border-radius: 10px; padding: 11px 12px; background: #fff; box-shadow: 0 1px 2px rgba(20,40,80,.04); }
.cov-item.cov-none { border-color: #f3c0bb; background: #fdf5f4; }
.cov-sys { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13px; color: var(--c-ink); margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--c-line); }
.cov-count { font-size: 11px; font-weight: 700; color: var(--c-brand-mid); background: #e9f1fb; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.cov-item.cov-none .cov-count { color: var(--c-danger); background: #fbe2de; }
.cov-cos { display: flex; gap: 5px; flex-wrap: wrap; }
.cov-warn { font-size: 11.5px; color: var(--c-danger); font-weight: 600; }
.cov-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid #d7dee7; background: #f7f9fc; color: #44515f; }
.cov-chip.k-client { background: #eafaf1; border-color: #bfe6cf; color: #1e8449; }
.cov-chip.k-conso { background: #e8f1fb; border-color: #c5ddf3; color: #2471a3; }
.cov-chip.k-sub { background: #fdf3e7; border-color: #f0d6ad; color: #b96d12; }
.co-card { margin-bottom: 12px; }
/* 계층(발주처→컨소사→하도급사) — 들여쓰기 + 가는 중립선으로 차분하게(과한 색 강조선 지양) */
.co-card.co-sub { margin-top: -6px; border-left: 1px solid #e5ebf3; background: #fcfdff; }
.co-card.co-d1 { margin-left: 34px; }
.co-card.co-d2 { margin-left: 68px; border-left-color: #e5ebf3; }
.co-sub-mark { color: #aeb9c7; font-weight: 700; font-size: 15px; margin-right: 2px; }
/* 회사 추가 폼 — 입력/드롭다운/버튼 높이 통일 */
.co-add-form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.co-add-form input, .co-add-form select, .co-add-form .btn { height: 38px; box-sizing: border-box; font-size: 14px; }
.co-add-form input, .co-add-form select { padding: 0 10px; border: 1px solid #ccc; border-radius: 6px; }
.co-add-form .btn { padding: 0 18px; }
.co-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.co-name { font-size: 16px; font-weight: 800; color: #1f2d3d; }
.co-name-input { font-size: 15px; font-weight: 800; color: #1f2d3d; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; width: 200px; }
.co-name-input:hover { border-color: #dde3ea; }
.co-name-input:focus { border-color: var(--c-brand); background: #fff; outline: none; }
/* 회사 구분 태그 — 채워진 알약 대신 가는 테두리의 정갈한 태그(차분한 톤) */
.co-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 2px 9px; border-radius: 6px;
  background: #fff; color: #5d6b7e; border: 1px solid #dce3ec; }
.co-kind.sub { color: #9a6418; border-color: #ecd9b8; background: #fffaf2; }
.co-kind.client { color: #1c7a4a; border-color: #c7e6d3; background: #f5fbf7; }
.co-section-label { font-size: 13px; font-weight: 700; color: #44515f; margin: 4px 0 6px; }
.sys-toggle-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 시스템 저장 버튼을 칩들과 구분: 왼쪽 구분선 + 오른쪽 끝으로 분리 + 기본(파랑) 버튼 강조 */
.sys-save-sep { margin-left: auto; align-self: stretch; width: 1px; min-height: 26px; background: #d7dee7; }
.sys-save-btn { align-self: center; white-space: nowrap; font-weight: 700; box-shadow: 0 1px 3px rgba(20,50,90,.2); }
.sys-toggle { cursor: pointer; }
.sys-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sys-toggle span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12.5px; border: 1.5px solid #cdd6e0;
    border-radius: 999px; background: #eef2f7; color: #56657a; transition: all .12s; }   /* 미선택: 옅은 회색 — 대비 강화 */
.sys-toggle:hover span { border-color: #9bb6d6; background: #e4ecf5; }
.sys-toggle:active span { transform: scale(.96); }
.sys-toggle input:checked + span { background: #1f5fa8; border-color: #1a548f; color: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(20,50,90,.25); }   /* 선택: 진한 파랑 */
.sys-toggle input:focus-visible + span { box-shadow: 0 0 0 2px rgba(43,108,176,.4); }
/* PL·PM 좌측 뱃지([PL]/[PM]) — 한눈에 구분 */
.sys-lead { font-size: 9.5px; font-weight: 800; letter-spacing: .02em; padding: 1px 5px; border-radius: 5px; line-height: 1.5; }
.sys-toggle.lead-pl .sys-lead { background: #1d6fe0; color: #fff; }
.sys-toggle.lead-pm .sys-lead { background: #7c3aed; color: #fff; }
.sys-toggle input:checked + span .sys-lead { background: rgba(255,255,255,.85); color: #1a548f; }
/* 카드 단일 저장 */
.sys-card-actions { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); }
.sys-del-form { margin-top: 6px; }
.sys-required { cursor: default; }
.sys-required input:checked + span { background: #1f5a96; border-color: #1f5a96; opacity: .92; }
.sys-must { color: #ffd9d9; }
.sys-toggle input:disabled + span { cursor: default; }
.sa-tools { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.sa-tools .btn { font-size: 12px; padding: 5px 11px; }
.sys-picker .sys-assign-bar { margin-bottom: 10px; }
.sa-count { color: var(--c-brand-mid); }
/* 로그 통계 카드 + 필터 칩 */
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-card { flex: 1 1 120px; min-width: 108px; background: #fff; border: 1px solid #e6ebf1; border-radius: 10px; padding: 11px 14px; box-shadow: 0 1px 2px rgba(20,40,80,.04); display: flex; flex-direction: column; gap: 2px; }
.stat-card.wide { flex: 1 1 180px; }
.stat-card.ok { border-color: #bce8cf; background: #f4fcf7; }
.stat-card.bad { border-color: #f5c6c0; background: #fdf6f5; }
.stat-k { font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
.stat-v { font-size: 22px; font-weight: 800; color: var(--c-ink); line-height: 1.15; }
.stat-card.ok .stat-v { color: #1e8449; }
.stat-card.bad .stat-v { color: var(--c-danger); }
.stat-sub { font-size: 11px; color: #98a2af; }
.audit-filter { display: inline-flex; gap: 4px; margin-left: 8px; }
.audit-filter .chip { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid #d7dee7; color: #5a6b7b; text-decoration: none; background: #fff; }
.audit-filter .chip.on { background: var(--c-brand-deep); color: #fff; border-color: var(--c-brand-deep); }
.audit-filter .chip.ok.on { background: #1e8449; border-color: #1e8449; }
.audit-filter .chip.bad.on { background: var(--c-danger); border-color: var(--c-danger); }
/* 로그 내역 카드 — 건수가 적어도 화면 아래까지 채움 */
.log-card { min-height: calc(100vh - 260px); }
/* 이벤트 로그 */
.badge.lv-ERROR { background: var(--c-danger); color: #fff; }
.badge.lv-WARN { background: #b96d12; color: #fff; }
.badge.lv-INFO { background: #6b7a8d; color: #fff; }
.badge.lv-AUDIT { background: #2f5d96; color: #fff; }
.ev-msg { font-size: 12px; color: var(--c-ink); max-width: 460px; }
.ev-more > summary { cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 440px; }
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary::after { content: ' ▾'; color: var(--c-brand-deep); font-size: 11px; font-weight: 700; }
.ev-more[open] > summary { white-space: normal; color: var(--c-brand-deep); font-weight: 600; }
.ev-full { margin-top: 6px; font-size: 12px; color: var(--c-ink); background: #f6f8fb; border: 1px solid #e6ebf1; border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.ev-detail { position: relative; }
.ev-detail > summary { cursor: pointer; color: var(--c-brand-deep); font-size: 12px; font-weight: 600; }
/* 상세는 좁은 칸을 벗어나 넓은 패널로 떠서 보이게 */
.ev-detail[open] > summary { color: var(--c-danger); }
.ev-detail pre { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: min(84vw, 880px);
    max-height: 340px; overflow: auto; background: #0f1720; color: #d7e0ea; padding: 12px 14px; border-radius: 8px;
    font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; margin: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.32); text-align: left; }
.co-members { display: flex; gap: 7px; flex-wrap: wrap; }
/* 소속자 칩 — 흰 알약 + 이름(진하게) + 작은 솔리드 역할 배지(PM·PL만 색으로 도드라짐) */
.mem-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border: 1px solid #e3e8ef; border-radius: 999px; background: #fff; font-size: 12.5px; box-shadow: 0 1px 2px rgba(20,40,80,.05); }
.mem-chip b { color: #1f2d3d; font-weight: 700; }
.role-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; padding: 2px 8px; border-radius: 999px; line-height: 1.4; }
.role-badge.rb-CHIEF { background: #b7791f; color: #fff; }
.role-badge.rb-PM { background: #6b46c1; color: #fff; }
.role-badge.rb-PL { background: #0f9b86; color: #fff; }
.role-badge.rb-REPORTER { background: #eef2f7; color: #5a6b7b; }
.role-badge.rb-CUSTOMER { background: #e6f0fb; color: #2471a3; }
.role-badge.rb-ADMIN { background: var(--c-danger); color: #fff; }
.role-badge.rb-PENDING { background: #eceff3; color: #97a2ae; }
.member-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid #dde3ea; background: #f7f9fc; }
.member-chip b { color: var(--c-ink); }
/* PM·PL은 채운 색 + 그림자로 '있어 보이게' 강조 */
.member-chip.r-PM { border-color: transparent; background: linear-gradient(135deg,#7b4fc0,#9b6fd6); color: #fff; font-weight: 800; box-shadow: 0 1px 4px rgba(108,63,160,.35); letter-spacing: .3px; }
.member-chip.r-PL { border-color: transparent; background: linear-gradient(135deg,#0f8e7a,#22b39a); color: #fff; font-weight: 800; box-shadow: 0 1px 4px rgba(19,122,106,.35); letter-spacing: .3px; }
.member-chip.r-ADMIN { border-color: #f3c0bb; background: #fdecea; color: var(--c-danger); font-weight: 700; }
.member-chip.r-CUSTOMER { border-color: #bcd9f0; background: #eaf3fb; }
.lead-chip { font-size: 10.5px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
/* PM·PL 행 강조 — 좌측 컬러 바 + 옅은 배경 */
/* PM 행 = 보라, PL 행 = 청록 (제일 위·구분되게) */
.umgr-table tr.row-chief td { background: #fbf5e9; }
.umgr-table tr.row-chief td:first-child { box-shadow: inset 4px 0 0 #b7791f; }
.umgr-table tr.row-pm td { background: #f6f1fc; }
.umgr-table tr.row-pm td:first-child { box-shadow: inset 4px 0 0 #6b46c1; }
.umgr-table tr.row-pl td { background: #f0faf8; }
.umgr-table tr.row-pl td:first-child { box-shadow: inset 4px 0 0 #0f9b86; }
/* 비활성 사용자 — 흐리게(작성물은 추후 '비활성 사용자'로 표기) */
.umgr-table tr.inactive-user td { opacity: .5; background: #fafbfc; }
.umgr-table tr.inactive-user td:first-child { box-shadow: inset 3px 0 0 #b0b8c1; }
.co-move { display: inline-flex; gap: 3px; }
.co-move .mv { font-size: 10px; padding: 2px 7px; line-height: 1; }
.dlist-wrap { overflow-x: auto; max-width: 100%; }
/* 결함 목록 — 폭 고정·말줄임. 기본 중앙 정렬, 장문 컬럼(시스템·테스트명·결함제목)만 좌측 정렬+좌측 패딩 */
.dlist { table-layout: fixed; width: 100%; }   /* min-width 없이 패널 폭에 맞춤 → 기본 가로 스크롤 없음. 컬럼 폭 합을 줄여 제목 열이 접히지 않게 */
.dlist th, .dlist td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 12px 6px; }
/* 뱃지 칸(2=진행상태·4=분류·7=중요도)은 잘리지 않게 — 최소 크기 유지·항상 전체 표시(… 생략표 없음) */
.dlist td:nth-child(2), .dlist td:nth-child(4), .dlist td:nth-child(7) { overflow: visible; text-overflow: clip; }
/* 정렬 헤더: 정렬 아이콘(⇅)을 라벨 '앞'에 두고 셀 가운데 정렬(데이터와 동일 정렬) */
.dlist thead th .sort-th { display: flex; align-items: center; justify-content: center; gap: 5px; }
/* 컬럼 이름(헤더)은 기본 가운데 정렬, 단 시스템 헤더는 아래 값과 같게 좌측정렬 */
.dlist thead th[data-field='system'] .sort-th { justify-content: flex-start; }
.dlist thead th .sort-ind { flex: none; }
/* (모든 컬럼 가운데 정렬 — 장문 컬럼 좌측정렬 규칙 제거) */
/* 헤더: 셀 간 세로 구분선 없음, 헤더↔바디 하단 실선만 */
.dlist thead th { position: relative; border-right: none; border-bottom: 2px solid #e2e8f0; }
.code-cell { font-family: ui-monospace, "Consolas", monospace; font-size: 11px; color: #5a6b7b; white-space: nowrap; }
/* 칸별 너비 조절 핸들 — 평소엔 숨김(헤더 깔끔하게), 경계 호버 시에만 표시 */
/* 열 경계 그립 — 경계 양쪽에서 잡히게: 각 칸 오른쪽(10px) + 다음 칸 왼쪽(6px, .gl)이 같은 경계를 조절 */
.col-grip { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.col-grip:hover { box-shadow: inset -2px 0 0 rgba(43, 108, 176, .55); background: rgba(43, 108, 176, .12); }
.col-grip.gl { right: auto; left: 0; width: 6px; }
.col-grip.gl:hover { box-shadow: inset 2px 0 0 rgba(43, 108, 176, .55); }

/* 프로세스 안내 흐름도 */
.flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.flow-node { flex: 1; min-width: 130px; border: 2px solid; border-radius: 8px; padding: 12px; text-align: center; background: #fff; }
.flow-node .fn-badge { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.flow-node .fn-desc { font-size: 11px; color: #555; }
.flow-node.n-req { border-color: var(--st-requested); } .flow-node.n-req .fn-badge { color: var(--st-requested); }
.flow-node.n-res { border-color: var(--st-resolved); } .flow-node.n-res .fn-badge { color: var(--st-resolved); }
.flow-node.n-conf { border-color: var(--st-confirmed); } .flow-node.n-conf .fn-badge { color: var(--st-confirmed); }
.flow-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 100px; font-size: 11px; color: #777; text-align: center; }
.flow-arrow .fa-label { font-weight: 700; color: var(--c-ink); font-size: 13px; }
.flow-reject { margin-top: 10px; padding: 8px 12px; background: #fff5ec; border: 1px dashed #e6a564; border-radius: 6px; color: #b9651a; font-size: 12px; }
/* 사용자 가이드: 4단계 한눈에 */
.ico { vertical-align: -.18em; }   /* 텍스트 옆 인라인 라인 아이콘 정렬 */
.guide-step .gs-ic svg { display: block; margin: 0 auto; }
.card.guide-hero { background: linear-gradient(180deg, #f3f9ff 0%, #ffffff 72%); border: 1px solid #d8e6f7; }
.card.guide-hero > h2 { font-size: 21px; }
.guide-steps { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.guide-step { position: relative; flex: 1; min-width: 186px; border: 1px solid #e3e9f1; border-top: 4px solid var(--c-brand); border-radius: var(--radius-lg); padding: 20px 16px 18px; background: #fff; text-align: center; box-shadow: 0 4px 16px rgba(20,40,80,.09); transition: transform .15s ease, box-shadow .15s ease; }
.guide-step:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,40,80,.15); }
.guide-step .gs-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-brand); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 2px 6px rgba(20,40,80,.2); }
.guide-step .gs-ic { font-size: 38px; line-height: 1; margin: 10px 0 8px; }
.guide-step .gs-t { font-size: 16.5px; font-weight: 800; color: var(--c-ink); margin-bottom: 7px; }
.guide-step .gs-d { font-size: 12.5px; color: #5a6b7b; line-height: 1.55; }
.guide-arrow { display: flex; align-items: center; color: #b6c0cf; font-size: 26px; font-weight: 700; }
/* 단계별 색 — 진행상태 흐름과 일치(요청·배정·처리완료·확인) */
.guide-step.gs-1 { border-top-color: var(--st-requested); } .guide-step.gs-1 .gs-no { background: var(--st-requested); } .guide-step.gs-1 .gs-ic { color: var(--st-requested); }
.guide-step.gs-2 { border-top-color: var(--st-inprogress); } .guide-step.gs-2 .gs-no { background: var(--st-inprogress); } .guide-step.gs-2 .gs-ic { color: var(--st-inprogress); }
.guide-step.gs-3 { border-top-color: var(--st-resolved); } .guide-step.gs-3 .gs-no { background: var(--st-resolved); } .guide-step.gs-3 .gs-ic { color: var(--st-resolved); }
.guide-step.gs-4 { border-top-color: var(--st-confirmed); } .guide-step.gs-4 .gs-no { background: var(--st-confirmed); } .guide-step.gs-4 .gs-ic { color: var(--st-confirmed); }
@media (max-width: 860px) { .guide-arrow { transform: rotate(90deg); justify-content: center; width: 100%; } .guide-step { min-width: 0; } }

/* 프로세스 상태머신 SVG (요청→처리완료→확인 + 반려 루프 + 요청 자기루프) */
.flow-diagram { overflow-x: auto; padding: 8px 0 2px; }
.flow-diagram svg { display: block; min-width: 880px; max-width: 1060px; margin: 0 auto; height: auto; }
.sm-node rect { fill: #fff; stroke-width: 2.5; }
.sm-node.req rect { stroke: var(--st-requested); }
.sm-node.res rect { stroke: var(--st-resolved); }
.sm-node.conf rect { stroke: var(--st-confirmed); stroke-width: 3.5; }
/* 5단계 상태 박스 색 — 목록/KPI와 통일(접수=코랄·처리중=앰버·완료=블루·확인=그린) */
.sm-node.st-recv rect { stroke: var(--st-received); }
.sm-node.st-prog rect { stroke: var(--st-inprogress); }
.sm-node.st-done rect { stroke: var(--st-done); }
.sm-node.st-conf rect { stroke: var(--st-confirmed); stroke-width: 3.5; }
.sm-node > text { text-anchor: middle; font-weight: 800; fill: var(--c-ink); font-size: 16px; }
.sm-node text.sub { font-weight: 600; fill: #98a2b0; font-size: 11px; }
.svg-lbl { text-anchor: middle; font-size: 13px; font-weight: 700; }
.svg-sub { text-anchor: middle; font-size: 11px; fill: #98a2b0; }

/* 프로세스 표 */
.proc-table { width: 100%; border-collapse: collapse; }
.proc-table th, .proc-table td { border: 1px solid #e6e9ee; padding: 7px 10px; text-align: left; font-size: 12px; vertical-align: top; }
.proc-table th { background: #f3f5f8; color: #444; }
.proc-rules { margin: 4px 0; padding-left: 18px; }
.proc-rules li { margin: 6px 0; font-size: 13px; }

/* 로그인 */
body.login-page { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #243b55 0%, #3a5a82 45%, var(--c-brand) 100%); padding: 20px; }
.login-wrap { width: fit-content; min-width: 416px; max-width: min(92vw, 640px); margin: 0; background: #fff; border: none; border-radius: var(--radius-lg);
    padding: 36px 34px 30px; box-shadow: 0 24px 60px rgba(15,25,50,.42); transform: scale(1.3); transform-origin: center; }
/* 로그인 폼 본문: 고정 폭으로 가운데 정렬 → 박스 폭은 (줄바꿈 안 하는) 제목 길이에 맞춰 늘어난다. */
.login-body { width: 352px; max-width: 100%; margin: 0 auto; }
.login-brand { text-align: center; margin-bottom: 20px; }
.login-logo { height: 54px; margin: 0 auto 14px; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 8px 16px rgba(47,111,208,.42)); }
.login-wrap h1 { font-size: 19px; text-align: center; margin: 0; color: #1b2c49; letter-spacing: -.3px; font-weight: 800; white-space: nowrap; }
.login-brand p.sub { max-width: 352px; margin-left: auto; margin-right: auto; }
.login-wrap h1 .accent { color: var(--c-brand); }
.login-wrap p.sub { text-align: center; color: #6b7787; margin: 9px 0 0; font-size: 15px; font-weight: 600; }
.login-wrap label { display: block; margin: 14px 0 5px; color: #5a6b7b; font-size: 12px; font-weight: 600; }
.login-wrap input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #d7dee7; border-radius: var(--radius-sm);
    font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.login-wrap input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,144,217,.18); }
.login-wrap button { width: 100%; margin-top: 20px; padding: 12px; font-size: 15px; font-weight: 700; color: #fff;
    border: none; border-radius: var(--radius-sm); cursor: pointer; background: linear-gradient(135deg, var(--c-brand), #3a78bf);
    box-shadow: 0 6px 16px rgba(74,144,217,.4); transition: filter .15s ease, transform .05s ease; }
.login-wrap button:hover { filter: brightness(1.06); }
.login-wrap button:active { transform: translateY(1px); }

/* 로그인 옵션 — 아이디 저장 / 로그인 유지 체크박스 (전역 login label·input 스타일 덮어쓰기) */
.login-wrap .login-opts { display: flex; flex-wrap: nowrap; gap: 14px; align-items: center; justify-content: space-between; margin: 16px 0 2px; }
.login-wrap .login-chk { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 500; color: #5a6b7b; cursor: pointer; white-space: nowrap; }
.login-wrap .login-chk input { width: auto; margin: 0; padding: 0; accent-color: var(--c-brand); box-shadow: none; cursor: pointer; }

/* 비밀번호 표시/숨김 토글 (눈 아이콘) */
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; box-sizing: border-box; padding-right: 44px; }
/* .login-wrap button 등 상위 버튼 스타일을 확실히 덮도록 특이도를 높이고 박스 속성 초기화 */
.pw-field .pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    margin: 0; padding: 0; border: none; background: none; box-shadow: none; cursor: pointer;
    color: #9aa7b4; border-radius: 6px; filter: none; }
.pw-field .pw-toggle:hover { color: var(--c-brand); background: rgba(74,144,217,.08); filter: none; }
.pw-field .pw-toggle:active { transform: translateY(-50%); }
.pw-field .pw-toggle svg { display: block; }
/* 숨김(기본)=슬래시 눈, 표시(on)=뜬 눈 */
.pw-field .pw-toggle .ic-eye { display: none; }
.pw-field .pw-toggle.on .ic-eye-off { display: none; }
.pw-field .pw-toggle.on .ic-eye { display: block; }

/* 관리자/통계 폼 */
.page { max-width: 980px; margin: 16px auto; padding: 0 16px; }
.page.wide { max-width: min(96vw, 1720px); }
.card { background: #fff; border: 1px solid #e8ecf1; border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 13px; box-shadow: var(--shadow-card); }
.card h2 { margin-top: 0; font-size: 15px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); }
.form-grid { display: grid; grid-template-columns: 160px 1fr; gap: 10px 12px; align-items: center; }
.form-grid input[type=text], .form-grid input[type=password], .form-grid select { width: 100%; padding: 7px 9px; border: 1px solid #ccc; border-radius: var(--radius-sm); }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.chart-wrap { position: relative; height: 248px; }
.chart-wrap.sm { height: 226px; }
.chart-toggle { float: right; font-size: 11.5px; font-weight: 600; color: var(--c-brand); background: #eef4fc; border: 1px solid #cfe0f5; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
/* 그래프 바로 위 토글 행(우측 정렬) */
.chart-toggle-row { display: flex; justify-content: flex-end; margin: 2px 0 4px; }
.chart-toggle-row .chart-toggle { float: none; }
.card.collapsed .chart-toggle-row { display: none !important; }
/* 카드 접기/펼치기 토글(제목 클릭) */
.card-fold { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; font-weight: 700; }
.card-fold .cc-caret { display: inline-block; width: 15px; color: var(--c-brand); }
.chart-toggle:hover { background: #dceaf9; }
/* 접힌 카드: 본문(차트·표·범례 토글) 숨김 — 제목만 남긴다 */
.card.collapsed .chart-wrap,
.card.collapsed .stat-table,
.card.collapsed .chart-toggle { display: none !important; }
/* 차트 아래 수치 표 — 요청·처리완료·확인·전체 (전 컬럼 가운데 정렬) */
.stat-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
/* 표가 위, 그래프가 아래 — 사이 간격 */
.stat-table + .chart-wrap { margin-top: 14px; }
.stat-table th, .stat-table td { padding: 6px 10px; border-bottom: 1px solid var(--c-line); text-align: center; }
.stat-table th { color: #5a6b7b; font-weight: 700; font-size: 12px; background: #f6f9fd; border-bottom: 1px solid #dbe5f0; white-space: nowrap; }
/* 제목 클릭 정렬 */
.stat-table th.sortable { cursor: pointer; user-select: none; }
.stat-table th.sortable:hover { background: #ecf3fc; color: var(--c-brand-deep); }
.stat-table th.sort-asc::after { content: ' ▲'; font-size: 9px; color: var(--c-brand); }
.stat-table th.sort-desc::after { content: ' ▼'; font-size: 9px; color: var(--c-brand); }
.stat-table td.rank { color: var(--c-muted); width: 38px; }
.stat-table td.tot { font-weight: 700; color: var(--c-ink); }
.stat-table tbody tr:hover td { background: #f7fafe; }
.stat-table tr.sum td { border-top: 2px solid #cdd8e6; font-weight: 700; background: #fafcfe; }
.stat-table tr.sum:hover td { background: #fafcfe; }
.stat-table .placeholder { text-align: center; color: var(--c-muted); padding: 14px; }
/* 상위 일부만 표시 → 전체 보기 토글 */
.stat-table .tbl-more-row td { padding: 4px; background: #fafcfe; }
.stat-table .tbl-more { width: 100%; background: none; border: none; cursor: pointer; color: var(--c-brand); font-size: 12px; font-weight: 600; padding: 5px; }
.stat-table .tbl-more:hover { text-decoration: underline; }
/* 통계 KPI 요약 — 여백·그림자로 시인성 강화 */
.kpi { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.kpi .box { flex: 1; min-width: 84px; background: #fff; border: 1px solid #e8ecf1; border-radius: 8px; padding: 8px 8px 7px; text-align: center; box-shadow: 0 1px 3px rgba(20,40,80,.05); transition: box-shadow .15s ease, transform .15s ease; }
.kpi .box:hover { box-shadow: 0 6px 18px rgba(20,40,80,.1); transform: translateY(-2px); }
.kpi .box .n { font-size: 30px; font-weight: 800; color: var(--c-ink); line-height: 1.05; letter-spacing: -.5px; margin-bottom: 6px; }
.kpi .box .l { color: var(--c-muted); font-size: 11.5px; margin-top: 0; font-weight: 700; }
/* 사용자별 진행 현황 표 */
.ustat th, .ustat td { text-align: center; padding: 6px 8px; }
.ustat th:first-child, .ustat td.uname { text-align: left; }
.ustat td.uname { font-weight: 600; color: #1f2d3d; }
.ubar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #eef0f3; }
.ubar span { display: block; height: 100%; }

/* 상태 KPI 강조 */
.kpi .box.st-received { border-top: 3px solid var(--st-received); }
.kpi .box.st-received .n { color: var(--st-received); }
.kpi .box.st-inprogress { border-top: 3px solid var(--st-inprogress); }
.kpi .box.st-inprogress .n { color: var(--st-inprogress); }
.kpi .box.st-done { border-top: 3px solid var(--st-done); }
.kpi .box.st-done .n { color: var(--st-done); }
.kpi .box.st-confirmed { border-top: 3px solid var(--st-confirmed-soft); }
.kpi .box.st-confirmed .n { color: var(--st-confirmed-soft); }
.kpi .box.st-reopened { border-top: 3px solid var(--st-reopened); }
.kpi .box.st-reopened .n { color: var(--st-reopened); }

/* 이미지 보기(확대) / 빨간펜 표시 모달 */
.desc img { cursor: zoom-in; }
.editor img, .cmt-editor img { cursor: default; }
.editor img:hover, .cmt-editor img:hover, .desc img:hover { outline: 2px solid rgba(74,144,217,.6); outline-offset: 1px; }
.img-modal { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 2000; display: none; flex-direction: column; }
.img-modal.open { display: flex; }
.img-modal-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #1f2d3d; color: #fff; flex-wrap: wrap; }
.img-modal-title { font-weight: 600; font-size: 14px; margin-right: auto; }
.img-modal-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.img-modal-bar .btn { font-size: 12px; padding: 5px 12px; }
.img-modal-hint { color: #cfe3f7; font-size: 12px; margin-right: 4px; }
.tool-btn { font-size: 12px; padding: 5px 10px; border: 1px solid #5a6b7b; background: #2c3e50; color: #fff; border-radius: 4px; cursor: pointer; }
.tool-btn.active { background: var(--c-danger); border-color: var(--c-danger); font-weight: 700; }
.img-modal-notice { background: #33404d; color: #ffe9b0; font-size: 12px; padding: 5px 12px; border-top: 1px solid #2c3742; }
.img-modal-open { color: #cfe3f7; font-size: 12px; text-decoration: underline; cursor: pointer; }
.img-modal-close { background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; }
.img-modal-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 14px; position: relative; }
.img-modal-stage img, .img-modal-stage canvas { max-width: 94vw; max-height: 82vh; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.img-modal-stage canvas { touch-action: none; cursor: crosshair; }
/* 편집기 즉시 열림 → 원본 다운로드 대기 동안 캔버스 위에 스피너 안내(빈 화면 방지) */
.img-modal-loading { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; font-size: 13px; background: rgba(0,0,0,.35); }
.img-modal-loading.on { display: flex; }
.img-modal-loading .busy-spinner { width: 34px; height: 34px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* 이미지 갱신 오버레이 — 표시 편집 저장 후 큰 이미지가 반영되는 동안 그 이미지 위에 얹는 '갱신 중…' 표시.
   body에 절대배치되어 대상 이미지의 화면 위치에 맞춰진다(편집기 본문 DOM은 건드리지 않음). 클릭은 통과. */
.img-updating-ov { position: absolute; z-index: 2400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.55); color: #44515f; font-size: 12px; font-weight: 600; border-radius: 4px; pointer-events: none; }
.img-updating-ov .busy-spinner { width: 26px; height: 26px; border-width: 3px; }
.img-updating-tx { text-shadow: 0 1px 2px rgba(255,255,255,.85); }

/* 로그인 이력 표 — User-Agent는 길어서 말줄임(+title 전체 표시) */
.audit-table td, .audit-table th { font-size: 11.5px; white-space: nowrap; }
.audit-table .ua-cell { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }

/* 관리자 대시보드 타일 */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.admin-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; background: #fff;
    border: 1px solid #e3e9f1; border-radius: 12px; text-decoration: none; color: inherit;
    box-shadow: 0 1px 4px rgba(20, 40, 80, .05); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.admin-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 40, 80, .12); border-color: #9cc0ea; }
.admin-ico { font-size: 30px; line-height: 1; }
.admin-tt { font-size: 16px; font-weight: 700; color: #1b2c49; }
.admin-desc { font-size: 12.5px; color: var(--c-muted); line-height: 1.4; }
/* 헤더 '관리자' 진입 버튼 강조 */
.navlink.admin-link { background: rgba(255, 255, 255, .2); font-weight: 700; }
.navlink.admin-link:hover { background: rgba(255, 255, 255, .34); color: #fff; }

/* ===== 모바일 / 좁은 화면: 마스터-디테일을 세로로 적층(목록 위 · 상세 아래) ===== */
/* (구 모바일 적층 레이아웃 @media 0px 블록 삭제 — /m 전용 화면으로 대체) */


/* 비밀번호 확인 일치/불일치 표시 */
.pw-field input.pw-bad { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.16) !important; }
.pw-field input.pw-ok { border-color: #2b9d6e !important; box-shadow: 0 0 0 3px rgba(43,157,110,.15) !important; }
.pw-match { font-size: 12px; margin: 6px 0 0; }
.pw-match.bad { color: var(--c-danger); }
.pw-match.ok { color: #2b9d6e; }

/* ── 채팅(이슈 인테이크) ── */
/* (구 독립 채팅 페이지 CSS 삭제 — 채팅 도크로 대체, 템플릿 부재 확인) */

/* 선택 모드(결함 전환) */
.chat-msg.sel .chat-body { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.chat-msg .chat-pick { margin-right: 6px; vertical-align: middle; }
.chat-actions { display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--c-line); background: #fbfdff; }

/* ── 채팅 도킹 패널(메인 화면) ── */
.chat-fab { position: fixed; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; z-index: 1500; touch-action: none;
    background: linear-gradient(135deg, #5aa0e6, #3a78bf); color: #fff; box-shadow: 0 8px 22px rgba(74,144,217,.45); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .12s, box-shadow .15s; }
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(74,144,217,.55); }
.chat-fab:active { cursor: grabbing; transform: scale(.96); }
.chat-fab.open { background: #5c6b7e; color: #fff; border: 1px solid #4c5a6c; box-shadow: 0 6px 18px rgba(20,40,70,.3); }
.chat-fab.open svg { transform: rotate(8deg); transition: transform .15s; }
.fab-dot { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; border-radius: 50%; background: #e5202e; border: 2px solid #fff; display: none; }
.chat-fab.has-unread .fab-dot { display: block; }

.chat-dock { position: fixed; right: 22px; bottom: 84px; width: 680px; max-width: 96vw; height: 620px; max-height: 88vh; min-width: 400px; min-height: 380px; z-index: 1501;
    background: #fff; border: 1px solid #dbe3ee; border-radius: 16px; box-shadow: 0 20px 55px rgba(15,25,50,.32); display: flex; flex-direction: column; overflow: hidden; resize: both;
    transform-origin: bottom right; }
/* 도크 크기 조절 핸들 — 네 변·네 모서리(JS가 생성) */
.cd-rz { position: absolute; z-index: 40; }
.cd-rz-n  { top: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.cd-rz-s  { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.cd-rz-e  { right: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.cd-rz-w  { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.cd-rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.cd-rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.cd-rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.cd-rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.chat-dock.cd-pop { animation: cdPop .18s cubic-bezier(.2,.9,.3,1.1); }   /* 열 때만 1회(드래그 종료 시 재생 방지) */
.chat-dock.dragging { transition: none; will-change: transform; box-shadow: 0 24px 64px rgba(15,25,50,.4); animation: none; }
.cd-msgs.drag-over { position: relative; outline: 2px dashed var(--c-brand); outline-offset: -8px; }
.cd-msgs.drag-over:after { content: "이미지를 놓으면 전송"; position: sticky; top: 40%; display: block; text-align: center; color: #2c6cb5; font-weight: 700; font-size: 14px; pointer-events: none; }
@keyframes cdPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cdMsgIn { 0% { opacity: 0; transform: translateY(7px) scale(.96); } 60% { opacity: 1; transform: translateY(0) scale(1.015); } 100% { transform: scale(1); } }
/* [hidden] 토글이 display 지정 클래스를 이겨야 함 */
.chat-dock[hidden], .cd-selbar[hidden], .cd-pinned[hidden], .cd-imgmodal[hidden], .cd-imgtools[hidden], .cd-aimodal[hidden], .cd-annbtn[hidden] { display: none !important; }

.cd-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #e9edf3; background: linear-gradient(120deg,#eef4fb,#f6f8fc); cursor: move; user-select: none; flex: 0 0 auto; }
.cd-title { font-size: 14px; font-weight: 700; color: #1f2d3d; display: inline-flex; align-items: center; gap: 7px; }
.cd-title:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #28c76f; box-shadow: 0 0 0 0 rgba(40,199,111,.5); animation: cdPulse 2s infinite; }
@keyframes cdPulse { 0% { box-shadow: 0 0 0 0 rgba(40,199,111,.5); } 70% { box-shadow: 0 0 0 6px rgba(40,199,111,0); } 100% { box-shadow: 0 0 0 0 rgba(40,199,111,0); } }
.cd-roomlabel { display: none; }   /* 헤더는 '채팅'만 간결하게 — 현재 방은 좌측 레일에서 강조 */
.cd-x { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 16px; color: var(--c-muted); padding: 2px 6px; }
.cd-x:hover { color: var(--c-ink); }
.cd-headaction { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid #cfe0f5; background: #eaf2fc; color: #2c6cb5; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cd-headaction:hover { background: #ddebfb; }
.cd-headaction.on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.cd-headbtn { margin-left: 4px; background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 4px; line-height: 1; opacity: .85; }
.cd-rcount { font-size: 11px; font-weight: 700; color: #4a5a72; margin-left: 1px; }
.cd-headbtn:hover { opacity: 1; }
.cd-head .cd-x { margin-left: 2px; }   /* 결함 등록 버튼이 오른쪽으로 밀고, 참여자·닫기는 그 옆 */
.cd-roster { position: absolute; top: 80px; right: 10px; width: 230px; max-height: 60%; overflow-y: auto; background: #fff; border: 1px solid #dbe3ee; border-radius: 11px; box-shadow: 0 12px 30px rgba(15,25,50,.22); z-index: 1600; padding: 5px; }
.cd-roomset.cd-roster-btn { width: auto; min-width: 28px; gap: 2px; padding: 0 6px; }   /* 아이콘+인원수라 자동 폭 */
.cd-roster[hidden] { display: none !important; }
/* 공용 패널 머리말(검색·자료실) */
.cd-panel-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #eef1f6; background: #fbfcfe; }
.cd-panel-t { font-size: 12.5px; font-weight: 800; color: #1f2d3d; letter-spacing: -.2px; }
.cd-panel-sub { font-size: 11px; color: #8a93a0; }
/* 채팅 이름 행 자료실 버튼 — 오른쪽 끝 */
.cd-roomset.cd-archive { margin-left: auto; }
/* 대화 검색 패널 */
.cd-srch { position: absolute; top: 80px; right: 10px; width: 326px; max-height: 64%; display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,25,50,.24); z-index: 1600; overflow: hidden; }
.cd-srch[hidden] { display: none !important; }
.cd-srch .cd-srch-all { margin-left: auto; }
.cd-srch-bar { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid #eef1f6; }
.cd-srch-ic { color: #9aa6b4; flex: none; }
.cd-srch-in { flex: 1; min-width: 0; border: none; padding: 2px 0; font-size: 13px; background: none; }
.cd-srch-in:focus { outline: none; }
.cd-srch-all { font-size: 11.5px; color: #5a6b7b; white-space: nowrap; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.cd-srch-list { overflow-y: auto; padding: 4px; }
.cd-srch-empty { color: #8a93a0; font-size: 12.5px; text-align: center; padding: 16px 8px; }
.cd-srch-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.cd-srch-item:hover { background: #f3f7fc; }
.cd-srch-meta { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: #8a93a0; margin-bottom: 2px; }
.cd-srch-room { font-weight: 700; color: #2b6cb0; }
.cd-srch-by { color: #5a6b7b; }
.cd-srch-at { margin-left: auto; }
.cd-srch-snip { font-size: 12.5px; color: #2b3a4f; line-height: 1.45; }
/* 자료실(방별 사진·파일) 패널 */
.cd-media { position: absolute; top: 80px; right: 10px; width: 326px; max-height: 64%; display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,25,50,.24); z-index: 1600; overflow: hidden; }
.cd-media[hidden] { display: none !important; }
.cd-media-tabs { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #eef1f6; }
.cd-media-tab { flex: 1; border: 1px solid #dbe3ee; background: #f6f8fb; color: #5a6b7b; border-radius: 8px; padding: 5px 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.cd-media-tab.on { background: #2b6cb0; color: #fff; border-color: #2b6cb0; }
.cd-media-body { overflow-y: auto; padding: 8px; }
.cd-media-empty { color: #8a93a0; font-size: 12.5px; text-align: center; padding: 20px 8px; }
.cd-media-body.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cd-media-img { padding: 0; border: 1px solid #e6ecf4; border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; background: #f3f7fc; cursor: pointer; }
.cd-media-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-media-img:hover { border-color: #bcd6f5; }
.cd-media-file { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; text-decoration: none; color: #2b3a4f; }
.cd-media-file:hover { background: #f3f7fc; }
.cd-media-fic { font-size: 18px; }
.cd-media-fmeta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cd-media-fn { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-media-fby { font-size: 11px; color: #8a93a0; }
.cd-media-fsize { flex: 0 0 auto; margin-left: auto; padding-left: 10px; min-width: 62px; text-align: right; font-size: 11px; color: #8a93a0; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 검색·멘션으로 점프한 메시지 잠깐 강조 — 노란 배경 대신 브랜드색 링+옅은 배경이 부드럽게 잦아드는 형태 */
.cd-msg.cd-hl > .cd-bubble, .cd-msg.cd-hl { animation: cdHl 2.2s ease-out; border-radius: 10px; }
@keyframes cdHl {
    0%   { background: color-mix(in srgb, var(--c-brand) 14%, transparent);
           box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand) 55%, transparent),
                       0 4px 16px color-mix(in srgb, var(--c-brand) 22%, transparent); }
    55%  { background: color-mix(in srgb, var(--c-brand) 8%, transparent);
           box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand) 30%, transparent),
                       0 2px 8px color-mix(in srgb, var(--c-brand) 12%, transparent); }
    100% { background: transparent; box-shadow: none; }
}
.cd-ru-head { font-size: 11px; color: var(--c-muted); padding: 6px 9px 4px; }
.cd-ru { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; }
.cd-ru:hover { background: #f3f6fa; }
.cd-ru-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cd-ru-dot.active { background: #28c76f; box-shadow: 0 0 0 2px rgba(40,199,111,.2); }
.cd-ru-dot.away { background: #f0ad4e; }
.cd-ru-dot.offline { background: #ccd4df; }
.cd-ru-st { color: #9aa4b2; }
.cd-ru-name { flex: 1 1 auto; min-width: 0; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ru-st { font-size: 10.5px; color: #9aa4b2; flex: 0 0 auto; }
.cd-ru-empty { padding: 14px; text-align: center; color: #9aa4b2; font-size: 12px; }

.cd-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
.cd-rail { flex: 0 0 auto; width: fit-content; min-width: 84px; max-width: 192px; overflow-y: auto; border-right: 1px solid #dbe2ec; background: #f6f8fb; padding: 8px 6px; display: flex; flex-direction: column; gap: 3px; }
/* 방 목록 접기 토글(세로 스트립) + 접힘 상태 */
.cd-rail-toggle { flex: 0 0 13px; border: none; border-right: 1px solid #dbe2ec; background: #eef2f8; color: #8693a4; cursor: pointer; padding: 0; font-size: 11px; line-height: 1; }
.cd-rail-toggle:hover { background: #e2e9f3; color: #2c6cb5; }
.chat-dock.rail-collapsed .cd-rail { display: none; }
.cd-roomitem { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 9px 11px; border-radius: 9px; font-size: 12.5px; color: #5a6678; transition: background .12s, color .12s; }
.cd-rname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-roomitem:hover { background: #eef3f9; }
.cd-roomitem.active { background: #eaf2fc; color: #235f9e; font-weight: 600; }
/* 전체 방: 진한 글씨 + 구분선으로 구별 */
.cd-roomitem:first-child { color: #2c3e55; font-weight: 600; border-bottom: 1px solid #e6ecf3; margin-bottom: 4px; padding-bottom: 11px; }
.cd-roomitem:first-child.active { background: #eaf2fc; color: #235f9e; }
.cd-rdot { width: 7px; height: 7px; border-radius: 50%; background: #e5202e; flex: 0 0 auto; visibility: hidden; }
.cd-roomitem.has-unread .cd-rdot { visibility: visible; }

.cd-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }

.cd-pinned { flex: 0 0 auto; max-height: 38%; overflow-y: auto; padding: 8px 10px; background: #fff8ec; border-bottom: 1px solid #f3e6c9; display: flex; flex-direction: column; gap: 6px; }
.cd-ann { display: flex; gap: 8px; align-items: flex-start; background: #fffdf7; border: 1px solid #f0e2c0; border-radius: 9px; padding: 7px 9px; }
.cd-ann-ic { flex: 0 0 auto; }
.cd-ann-body { flex: 1 1 auto; min-width: 0; }
.cd-ann-text { font-size: 12.5px; color: #5b4a1f; word-break: break-word; }
.cd-ann-text img { max-width: 180px; max-height: 120px; border-radius: 5px; display: block; margin: 3px 0; }
.cd-ann-meta { font-size: 11px; color: #b09a63; margin-top: 2px; }
.cd-ann-unpin { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: #c2a456; font-size: 13px; padding: 0 2px; }
.cd-ann-unpin:hover { color: #9a7e2f; }

/* 본문 배경은 반 톤 낮춰 말풍선이 떠 보이게 — 시스템 방은 살짝 따뜻하게, 전체 방은 살짝 시원하게 구분 */
.cd-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 15px; background: #f2f4f7; }
.cd-msgs > :first-child { margin-top: auto; }   /* 메시지가 적어도 아래부터 쌓여 위로 — 카카오톡식 */
.cd-msgs:not(.x) { background: #f1f3ef; }                /* 시스템 방(기본): 살짝 따뜻한 톤 */
.room-all .cd-msgs { background: #eef2f8; }              /* 전체 방: 살짝 시원한 톤 */
.cd-empty { margin: auto; color: var(--c-muted); font-size: 12.5px; text-align: center; }
/* 세련된 스크롤바 */
/* 채팅 안의 모든 스크롤 영역 — 얇고 깔끔한 스크롤바 기본 적용 */
.cd-msgs, .cd-rail, .cd-input, .cd-aitext, .cd-pinned, .cd-roster, .cd-detail-panel, .cd-emoji-panel, .cd-react-panel { scrollbar-width: thin; scrollbar-color: #cfd8e3 transparent; }
.cd-msgs::-webkit-scrollbar, .cd-rail::-webkit-scrollbar, .cd-input::-webkit-scrollbar, .cd-aitext::-webkit-scrollbar, .cd-pinned::-webkit-scrollbar, .cd-roster::-webkit-scrollbar, .cd-detail-panel::-webkit-scrollbar, .cd-emoji-panel::-webkit-scrollbar { width: 8px; height: 8px; }
.cd-msgs::-webkit-scrollbar-track, .cd-rail::-webkit-scrollbar-track, .cd-input::-webkit-scrollbar-track, .cd-aitext::-webkit-scrollbar-track, .cd-pinned::-webkit-scrollbar-track, .cd-roster::-webkit-scrollbar-track, .cd-detail-panel::-webkit-scrollbar-track, .cd-emoji-panel::-webkit-scrollbar-track { background: transparent; }
.cd-msgs::-webkit-scrollbar-thumb, .cd-rail::-webkit-scrollbar-thumb, .cd-input::-webkit-scrollbar-thumb, .cd-aitext::-webkit-scrollbar-thumb, .cd-pinned::-webkit-scrollbar-thumb, .cd-roster::-webkit-scrollbar-thumb, .cd-detail-panel::-webkit-scrollbar-thumb, .cd-emoji-panel::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.cd-msgs:hover::-webkit-scrollbar-thumb, .cd-rail:hover::-webkit-scrollbar-thumb, .cd-roster:hover::-webkit-scrollbar-thumb { background: #aebccd; background-clip: padding-box; }
/* 멘션 후보·공감 팔레트 스크롤도 동일하게 슬림 */
.cd-mention, .cd-react-panel, .cd-rm-people { scrollbar-width: thin; scrollbar-color: #cfd8e3 transparent; }
.cd-mention::-webkit-scrollbar, .cd-react-panel::-webkit-scrollbar, .cd-rm-people::-webkit-scrollbar { width: 8px; height: 8px; }
.cd-mention::-webkit-scrollbar-track, .cd-react-panel::-webkit-scrollbar-track, .cd-rm-people::-webkit-scrollbar-track { background: transparent; }
.cd-mention::-webkit-scrollbar-thumb, .cd-react-panel::-webkit-scrollbar-thumb, .cd-rm-people::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.cd-mention:hover::-webkit-scrollbar-thumb, .cd-rm-people:hover::-webkit-scrollbar-thumb { background: #aebccd; background-clip: padding-box; }
/* @멘션 자동완성 */
.cd-mention { position: absolute; z-index: 1600; background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 10px 28px rgba(15,25,50,.22); padding: 4px; max-height: 260px; overflow-y: auto; }
.cd-mention-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 5px; font-size: 11px; font-weight: 700; color: #5a6678; border-bottom: 1px solid var(--c-line); margin-bottom: 3px; }
.cd-mention-hd span { font-weight: 500; color: #9aa7b6; font-size: 10px; }
.cd-mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; color: #344256; cursor: pointer; white-space: nowrap; }
.cd-mention-item.on, .cd-mention-item:hover { background: #eaf2fc; color: #235f9e; }
.cd-mention-av { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }
.cd-mention-nm { flex: 1 1 auto; }
.cd-mention-item.on .cd-mention-nm { font-weight: 700; }
/* 카카오톡식 레이아웃: [프로필] [이름/말풍선+시간] */
.cd-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; align-self: flex-start; position: relative; animation: cdMsgIn .24s cubic-bezier(.2,.8,.3,1.2);
    content-visibility: auto; contain-intrinsic-size: auto 60px; }   /* 화면 밖 메시지는 레이아웃/페인트 건너뜀(스크롤 성능↑) — 실제 렌더 크기 기억(auto) */
.cd-msg.na { animation: none; }
.cd-msg.grp { margin-top: -10px; }            /* 묶음(연속): 위 메시지와 가깝게 */
.cd-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.cd-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #9aa6b8; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; user-select: none; }
.cd-avatar.ph { visibility: hidden; }        /* 묶음: 자리만 차지(정렬 유지) */
.cd-stack { display: flex; flex-direction: column; min-width: 0; }
.cd-name { font-size: 12px; font-weight: 600; color: #4a5a72; margin: 0 0 3px 3px; }
.cd-line { display: flex; align-items: flex-end; gap: 5px; }
.cd-msg.mine .cd-line { flex-direction: row-reverse; }   /* 내 메시지: 시간이 말풍선 좌측 아래 */
.cd-side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 auto; cursor: pointer; }
.cd-msg.mine .cd-side { align-items: flex-end; }
.cd-unread { font-size: 10px; font-weight: 800; color: #8a6d00; background: #ffe39a; border-radius: 999px; padding: 0 6px; line-height: 16px; min-width: 16px; text-align: center; }   /* 안 읽은 인원 수 뱃지 */
/* 메시지 상세(누가 읽음/공감) */
.cd-detail-panel { position: absolute; z-index: 1650; width: 230px; max-height: 60%; overflow-y: auto; background: #fff; border: 1px solid #dbe3ee; border-radius: 11px; box-shadow: 0 12px 30px rgba(15,25,50,.24); padding: 8px 10px; }
.cd-detail-panel[hidden] { display: none !important; }
.cd-dt-sec { padding: 4px 0; border-top: 1px solid #f0f2f6; }
.cd-dt-sec:first-child { border-top: none; }
.cd-dt-h { font-size: 11px; font-weight: 700; color: #5a6678; margin-bottom: 2px; }
.cd-dt-names { font-size: 12px; color: #344256; line-height: 1.5; }
.cd-dt-row { font-size: 12px; color: #344256; }
.cd-dt-em { font-size: 14px; }
.cd-dt-empty { font-size: 12px; color: #9aa4b2; padding: 6px; text-align: center; }
.cd-time { font-size: 11px; color: #8c96a0; white-space: nowrap; }
/* 공감(반응) */
.cd-react-add { flex: 0 0 auto; align-self: flex-end; border: none; background: none; cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .12s; padding: 0 2px; }
.cd-msg:hover .cd-react-add { opacity: .5; }
.cd-react-add:hover { opacity: 1; }
.cd-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 2px; width: max-content; max-width: 240px; }
.cd-msg.mine .cd-reacts { justify-content: flex-end; margin: 4px 2px 0 0; margin-left: auto; }
.cd-react { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid #e1e4e8; background: #fff; font-size: 12.5px; cursor: pointer; animation: cdReactPop .22s ease-out; }
@keyframes cdReactPop { 0% { transform: scale(.55); opacity: .3; } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* 파일 공유 칩 */
.cd-body a[href*="/files/"] { display: inline-flex; align-items: center; gap: 7px; max-width: 250px; padding: 8px 11px; background: #f1f4f8; border: 1px solid #e1e4e8; border-radius: 10px; color: #2c6cb5; text-decoration: none; font-size: 12.5px; word-break: break-all; font-weight: 600; }
.cd-body a[href*="/files/"]:before { content: "📎"; font-size: 14px; flex: 0 0 auto; }
.cd-body a[href*="/files/"]:after { content: "⬇"; font-size: 13px; color: #8aa0b8; flex: 0 0 auto; margin-left: auto; padding-left: 6px; }
.cd-body a[href*="/files/"] b { font-weight: 500; color: #8693a4; font-size: 11px; flex: 0 0 auto; }
.cd-body a[href*="/files/"]:hover { background: #e7eef7; }
.cd-body a[href*="/files/"]:hover:after { color: #2c6cb5; }
.cd-react b { font-weight: 700; color: #5a6678; font-size: 11px; }
.cd-react.on { background: #eaf2fc; border-color: #b8d4f5; }
.cd-react.on b { color: #2c6cb5; }
.cd-react-panel { position: absolute; z-index: 1600; width: auto; background: #fff; border: 1px solid #dbe3ee; border-radius: 14px; box-shadow: 0 6px 18px rgba(15,25,50,.2); padding: 6px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cd-react-panel[hidden] { display: none !important; }
.cd-react-pick { border: none; background: none; cursor: pointer; font-size: 19px; padding: 4px; border-radius: 50%; }
.cd-react-pick:hover { background: #eef2f8; }
.cd-linkedwrap { margin: 3px 0 0 2px; }
.cd-msg.mine .cd-linkedwrap { text-align: right; margin: 3px 2px 0 0; }
.cd-linked { font-size: 11px; color: #2b9d6e; text-decoration: none; font-weight: 600; }
.cd-linked:hover { text-decoration: underline; }
.cd-del { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #fff; background: var(--c-muted); color: #fff; font-size: 10px; line-height: 1; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.28); z-index: 4; }
.cd-msg:hover .cd-del { display: inline-flex; }
.cd-del:hover { background: #6b7280; }
.cd-body { position: relative; background: #ffffff; border: 1px solid #e1e4e8; border-radius: 2px 13px 13px 13px; padding: 10px 14px; font-size: 13px; line-height: 1.55; color: #222a35; text-align: left; word-break: break-word; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cd-msg.mine .cd-body { background: #d2e3fc; border-color: #bcd6f5; border-radius: 13px 2px 13px 13px; color: #1c3354; }   /* 내 메시지: 밀도 있는 블루 */
.cd-msg.grp .cd-body { border-radius: 13px; }   /* 묶음 내부는 양쪽 둥글게 */
.cd-msg.deleted { align-self: center; max-width: 100%; justify-content: center; }
.cd-tomb { font-size: 11.5px; color: #9aa4b2; font-style: italic; padding: 2px 10px; background: #eef1f6; border-radius: 999px; }
.cd-body img { max-width: 250px; max-height: 230px; width: auto; height: auto; object-fit: contain; border-radius: 11px; margin: 3px 0; display: block; cursor: zoom-in; }
/* 이미지 전용 메시지: 여백 없이 풍선을 꽉 채움 */
.cd-body.emoji-big, .cd-body.emoji-xl { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 2px; line-height: 1.15; }
.cd-body.emoji-big { font-size: 46px; }   /* 이모지 여러 개 */
.cd-body.emoji-xl { font-size: 80px; }    /* 이모지 1개 — 아주 크게 */
/* 내 메시지여도 이모지/이미지 전용이면 말풍선 배경 제거(보내는 쪽도 동일하게) */
.cd-msg.mine .cd-body.emoji-big, .cd-msg.mine .cd-body.emoji-xl, .cd-msg.mine .cd-body.img-only { background: transparent; border-color: transparent; box-shadow: none; }
.cd-body.img-only { padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
/* 파일만 있는 메시지 — 이미지처럼 말풍선 여백 없이 파일 칩만 */
.cd-body.file-only { padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
.cd-body.file-only a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 12px;
    background: #eef3fa; border: 1px solid #dbe4f0; color: #1d5fae; font-weight: 600; text-decoration: none; }
.cd-body.file-only a::before { content: '📎'; }
.cd-body.file-only a:hover { background: #e2ebf7; }
.cd-msg.mine .cd-body.file-only a { background: #e7f0fd; border-color: #cfdff5; }   /* overflow visible — 삭제 버튼이 모서리에 걸쳐도 안 잘리게 */
.cd-body.img-only img { max-width: 280px; max-height: 340px; margin: 0; border-radius: 12px; }
/* viewBox만 있고 width/height 없는 업로드 SVG는 <img>에서 크기가 0이 되어 안 보임 →
   명시적 너비를 줘서 viewBox 비율로 렌더. 글래스 이모지(/emoji/*)는 제외하려고 /images/ 로 한정. */
.cd-body img[src^="/images/"][src$=".svg"], .cd-ann-text img[src^="/images/"][src$=".svg"],
.chat-body img[src^="/images/"][src$=".svg"],
.desc img[src^="/images/"][src$=".svg"], .editor img[src^="/images/"][src$=".svg"], .cmt-editor img[src^="/images/"][src$=".svg"] {
    width: 280px; height: auto; max-width: 100%; max-height: none; object-fit: contain;
}
.cd-body.img-only img[src^="/images/"][src$=".svg"] { width: 300px; height: auto; max-height: none; }
/* 라이트박스(전체 보기): SVG는 벡터라 키워도 선명 — 화면 높이에 맞춰 크게(viewBox 비율 유지), 너비는 비율로 */
/* 라이트박스 SVG: light.src 는 절대 URL이라 [src^="/images/"]로는 안 잡힌다 → 확장자만으로 매칭(라이트박스엔 이모지 안 옴). viewBox만 있는 SVG도 화면 높이에 맞춰 크게. */
.cd-lightimg[src$=".svg"], .img-modal-stage img[src$=".svg"],
.cd-lightimg.cd-light-svg { width: auto; height: 82vh; max-width: 90vw; max-height: 82vh; background: #fff; }
.cd-check { display: none; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-brand); color: #fff; font-size: 12px; line-height: 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); z-index: 3; }
.chat-dock.selecting .cd-msgs { cursor: pointer; }
.chat-dock.selecting .cd-body { transition: box-shadow .1s; }
.chat-dock.selecting .cd-msg:hover .cd-body { box-shadow: 0 0 0 2px #c4dcf5; }
.cd-msg.sel .cd-body { box-shadow: 0 0 0 2px var(--c-brand) !important; }
.cd-msg.sel .cd-check { display: block; }

.cd-selbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--c-line); background: #f3f8ff; }
.cd-selcount { font-size: 12px; color: #4a5a70; margin-right: auto; font-weight: 600; }
.cd-selacts { display: flex; gap: 6px; }
.cd-pill { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; cursor: pointer; font-weight: 600; }
.cd-pill.primary { background: var(--c-brand); color: #fff; }
.cd-pill.primary:hover { background: #3a7ec3; }
.cd-pill.primary:disabled { background: #b9cfe6; cursor: default; }
.cd-pill.ai { background: #efeafe; color: #5b42c9; border-color: #ddd2f7; }
.cd-pill.ai:hover { background: #e6dffb; }
.cd-pill.ai:disabled { opacity: .55; cursor: default; }
.cd-pill.ghost { background: #fff; color: #6b7686; border-color: #d7dee7; }
.cd-pill.ghost:hover { background: #f1f4f8; }

.cd-compose { flex: 0 0 auto; display: flex; gap: 6px; align-items: flex-end; padding: 10px 12px 5px; border-top: 1px solid #e6ebf2; background: #f7f9fb; }
.cd-annbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e2d6b3; border-radius: 10px; background: #fffaf0; cursor: pointer; font-size: 15px; }
.cd-annbtn svg { display: block; }   /* 스피커 아이콘이 위로 붙어 보이던 것 — 버튼 정중앙 정렬 */
.cd-emojibtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; cursor: pointer; font-size: 17px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; padding: 0; }   /* SVG 아이콘 정중앙 */
.cd-emojibtn:hover { background: #f1f4f8; }
/* 파일(📎)·결함링크(🔗) 버튼은 이모지(😊)와 서로 구별되게 색을 다르게 — 둥근 사각 톤 구분 */
.cd-cbtn-file { background: #eef4fc; border-color: #cfe0f4; }
.cd-cbtn-file:hover { background: #dfeaf9; border-color: #a9c8ec; }
.cd-cbtn-link { background: #eafaf1; border-color: #c2e7d3; }
.cd-cbtn-link:hover { background: #d8f3e5; border-color: #9cd9bb; }
/* 개인·그룹 채팅 비활성 시 숨김(DOM에는 남겨 채팅 스크립트가 참조 가능하게) */
.pc-off { display: none !important; }
.cd-emoji-panel { flex: 0 0 auto; margin: 0 12px; padding: 8px; background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 -4px 16px rgba(15,25,50,.12); display: flex; flex-wrap: wrap; gap: 2px; max-height: 168px; overflow-y: auto; }
.cd-emoji-panel[hidden] { display: none !important; }
.cd-emoji { width: 32px; height: 32px; border: none; background: none; cursor: pointer; font-size: 19px; border-radius: 8px; padding: 0; }
.cd-emoji:hover { background: #eef2f8; }
.cd-annbtn.on { background: #ffe8b8; border-color: #e8c878; box-shadow: 0 0 0 2px rgba(232,200,120,.35); }
.cd-selbtn { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid #dde3ec; border-radius: 10px; background: #f4f7fb; color: #6b7686; font-size: 17px; line-height: 1; cursor: pointer; }
.cd-selbtn:hover { background: #e9eff7; }
.cd-selbtn.on { background: #e7f0fb; border-color: #9fc1e8; color: #2c6cb5; }
.cd-input { flex: 1 1 auto; min-height: 38px; max-height: 150px; overflow-y: auto; border: 1px solid #e8edf3; border-radius: 12px; padding: 9px 14px; font-size: 13px; line-height: 1.5; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); white-space: pre-wrap; word-break: break-word; }
.cd-input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(74,144,217,.16); }
.cd-input:empty:before { content: attr(data-placeholder); color: #a8b0bb; }
.announcing .cd-input { border-color: #e8c878; }
.cd-sendbtn { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: var(--c-brand); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cd-sendbtn:hover { background: #3a7ec3; }
.cd-sendbtn svg { margin-left: -1px; }
.cd-hint { flex: 0 0 auto; padding: 6px 14px 11px; font-size: 11px; color: var(--c-muted); background: #f7f9fb; white-space: nowrap; overflow: hidden; }
/* 하단 안내 두 줄(더 작게·기본 굵기) — @멘션·#결함 링크까지 담기 위해 */
.cd-hint.cd-hint-2 { font-size: 9.5px; line-height: 1.6; padding: 4px 14px 8px; }
.cd-hint.cd-hint-2 span { display: block; }
.cd-hint.cd-hint-2 b { font-weight: inherit; }
/* #·@ 자동완성 활성 중 트리거 문자 강조(CSS Custom Highlight — 미지원 브라우저는 무시) */
/* 입력창 @·# 활성 강조 — 배경 칠 없이 '굵은 글씨' 느낌(Highlight API는 font-weight를 지원하지 않아 text-shadow로 두껍게) */
::highlight(cd-tag) { color: #1c4f8f; text-shadow: 0.5px 0 0 #1c4f8f, -0.3px 0 0 #1c4f8f; }

.cd-aimodal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 2300; padding: 24px; }
.cd-aibox { background: #fff; border-radius: 13px; width: 600px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.cd-aihead { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--c-line); background: #faf8ff; }
.cd-aihead b { font-size: 14px; color: #4b3aa0; }
.cd-aihead .cd-x { margin-left: auto; }
.cd-aitext { flex: 1 1 auto; min-height: 200px; max-height: 56vh; overflow-y: auto; margin: 0; padding: 16px 18px; font-size: 13.5px; line-height: 1.65; color: #25303c; white-space: pre-wrap; word-break: break-word; font-family: inherit; }
.cd-aifoot { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-top: 1px solid var(--c-line); background: #fafbfd; }
.cd-aifoot .muted { font-size: 12px; color: var(--c-muted); margin-right: auto; }

.cd-imgmodal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 3200; padding: 24px; }
.cd-imgbox { background: #fff; border-radius: 12px; padding: 12px; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.cd-imgtools { display: flex; align-items: center; gap: 8px; }
#cdCanvas { max-width: 86vw; max-height: 78vh; cursor: crosshair; border: 1px solid #e6ebf1; border-radius: 6px; }
.cd-lightimg { max-width: 88vw; max-height: 84vh; border-radius: 6px; }

/* 개인·그룹 방 레일 */
.cd-raildiv { display: flex; align-items: center; gap: 6px; margin: 8px 4px 3px; color: #9aa7b6; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.cd-raildiv::before, .cd-raildiv::after { content: ""; flex: 1 1 auto; height: 1px; background: #e1e7ee; }
.cd-roomitem-c { color: #54627a; }
.cd-roomitem-c .cd-rname::before { content: "# "; color: #aab6c4; }
.cd-newroom { margin-top: 4px; border: 1px dashed #c4d0de; background: none; color: #5b86b8; cursor: pointer; padding: 8px 10px; border-radius: 9px; font-size: 12px; font-weight: 600; transition: background .12s, border-color .12s; }
.cd-newroom:hover { background: #eef4fb; border-color: #9fc0e6; }

/* 개인/그룹 방 만들기·관리 모달 */
.cd-roommodal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 2400; padding: 24px; }
.cd-roommodal[hidden] { display: none !important; }
.cd-roombox { background: #fff; border-radius: 13px; width: 420px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.cd-roombox .cd-aihead { padding: 13px 16px; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; }
.cd-roombox .cd-aihead b { font-size: 14.5px; }
.cd-roombox .cd-aihead .cd-x { margin-left: auto; }
.cd-rm-row { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.cd-rm-row[hidden] { display: none !important; }
.cd-rm-lbl { font-size: 12px; color: #6b7787; font-weight: 600; }
.cd-rm-name, .cd-rm-search { width: 100%; box-sizing: border-box; border: 1px solid #d3dbe5; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.cd-rm-name:focus, .cd-rm-search:focus { outline: none; border-color: #7fa9d8; box-shadow: 0 0 0 3px rgba(127,169,216,.18); }
.cd-rm-people { margin-top: 2px; max-height: 230px; overflow-y: auto; border: 1px solid var(--c-line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.cd-rm-p { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: #38465a; cursor: pointer; }
.cd-rm-p:hover { background: #f2f6fb; }
.cd-rm-p input { width: 15px; height: 15px; accent-color: var(--c-brand); cursor: pointer; }
.cd-rm-none { padding: 14px; text-align: center; color: #9aa7b6; font-size: 12.5px; }
.cd-roombox .cd-aifoot { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--c-line); margin-top: 12px; }
.cd-rm-left { display: inline-flex; gap: 8px; margin-right: auto; }
/* 결함 등록 파일 첨부 — 드롭존 + 통합 카드 리스트 */
.reg-files { margin-top: 8px; }
.reg-files > label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #2c3e55; }
/* 드롭존: 영역 넓게 · 연한 슬레이트 배경 · 드래그오버 하이라이트 */
.reg-filedrop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 1px dashed #c4d0de; border-radius: 12px; padding: 22px 16px; background: #f7f9fc; color: #5b6878;
    cursor: pointer; text-align: center; transition: border-color .14s, background .14s, box-shadow .14s; }
.reg-filedrop:hover { border-color: #9bbbe0; background: #f1f7fd; }
.reg-filedrop.over { border-color: #4f8fd6; border-style: solid; background: #e8f2fd; box-shadow: 0 0 0 4px rgba(79,143,214,.14); }
.reg-filedrop-ic { font-size: 26px; line-height: 1; opacity: .85; }
.reg-filedrop-txt { font-size: 13.5px; font-weight: 700; color: #3a4a5e; }
.reg-filedrop-hint { font-size: 11.5px; color: #8a96a6; font-weight: 500; }
.reg-filedrop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* 카드형 파일 리스트 — 기존/임시/업로드중 동일 컴포넌트 */
.reg-filelist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reg-fileitem { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e6ecf3; border-radius: 10px;
    padding: 8px 10px; font-size: 13px; box-shadow: 0 1px 2px rgba(20,40,70,.04); }
.reg-fileitem.uploading { border-color: #cfe0f3; }
.reg-fileitem.failed { border-color: #f1c6c6; background: #fdf5f5; }
.reg-fileic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; background: #f0f4f9; overflow: hidden; }
.reg-fileic img { width: 100%; height: 100%; object-fit: cover; }
.reg-fileinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reg-filename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2f4156; font-weight: 600; text-decoration: none; }
a.reg-filename:hover { text-decoration: underline; color: #1f5fa8; }
.reg-filesub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #93a0b0; min-width: 0; }
.reg-filesize { flex: 0 0 auto; }
.reg-filemeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-filebadge { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.reg-filebadge.wait { background: #fff4e2; color: #b5730e; border: 1px solid #f3dcb4; }
.reg-filebadge.up   { background: #e7f0fb; color: #1f5fa8; border: 1px solid #caddf3; }
.reg-filebadge.chat { background: #eef4fb; color: #3f72b0; border: 1px solid #d6e3f2; }
.reg-filebadge.err  { background: #fdeaea; color: #c23b3b; border: 1px solid #f1c6c6; }
.reg-fileprog { flex: 0 0 84px; height: 5px; background: #e6ecf3; border-radius: 999px; overflow: hidden; }
.reg-fileprog > i { display: block; height: 100%; width: 0; background: #3b82d6; border-radius: 999px; transition: width .15s; }
.reg-fileform { display: inline-flex; margin: 0; }
.reg-filex { flex: 0 0 auto; border: none; background: none; color: #9aa7b6; cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; line-height: 1; }
.reg-filex:hover { background: #e6356115; color: #e53561; }
.reg-fileempty { list-style: none; color: #9aa7b6; font-size: 12.5px; padding: 6px 2px; }
.reg-fileitem.reg-filechat { background: #f6faff; }

/* 멤버 선택(채팅 로스터 스타일) — 아바타 원 + 회사·이름 */
.cd-rm-filters { display: flex; gap: 6px; margin-bottom: 6px; }
.cd-rm-filters select { flex: 1 1 0; min-width: 0; border: 1px solid #d3dbe5; border-radius: 8px; padding: 7px 8px; font-size: 12.5px; background: #fff; color: #38465a; }
.cd-rm-p { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13px; color: #38465a; cursor: pointer; user-select: none; }
.cd-rm-p.on { background: #eaf2fc; }
.cd-rm-p .cd-rm-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11.5px; font-weight: 700; }
.cd-rm-p .cd-rm-co { color: #8693a4; font-size: 11.5px; }
.cd-rm-p .cd-rm-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-rm-p .cd-rm-chk { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c4d0de; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.cd-rm-p.on .cd-rm-chk { background: var(--c-brand); border-color: var(--c-brand); }
.cd-rm-danger { color: #e53561 !important; }
.cd-rm-scroll { overflow-y: auto; max-height: calc(86vh - 120px); }
.cd-rm-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #38465a; cursor: pointer; }
.cd-rm-toggle input { width: 15px; height: 15px; accent-color: var(--c-brand); }
.cd-rm-mx { margin-left: auto; flex: 0 0 auto; border: none; background: none; color: #b6c0cd; cursor: pointer; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.cd-rm-mx:hover { background: #e6356115; color: #e53561; }

/* 채팅창 안 방 이름(상단) + 가운데 희미한 워터마크 */
.cd-col { position: relative; }
.cd-roomtitle { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 13px; font-size: 13px; font-weight: 700; color: #27384e; border-bottom: 1px solid #e4ebf4; background: linear-gradient(180deg,#f7faff 0%,#eef3fb 100%); box-shadow: 0 1px 2px rgba(20,40,80,.04); z-index: 2; }
.cd-roomtitle::before { content: ""; flex: 0 0 auto; width: 4px; height: 15px; border-radius: 3px; background: var(--c-brand); opacity: .75; }
/* ＋ 인원 추가 팝오버 — 버튼 근처에 뜸(별도 모달 X) */
.cd-addpop { position: absolute; top: calc(100% + 4px); right: 8px; width: 320px; max-height: 400px; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #dbe3ee; border-radius: 11px; box-shadow: 0 12px 30px rgba(15,25,50,.22); z-index: 1600; padding: 8px; }
.cd-addpop[hidden] { display: none !important; }
.cd-addpop-h { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #6b7785; padding: 2px 4px 6px; display: flex; align-items: baseline; gap: 6px; }
.cd-addpop-sub { font-size: 10px; font-weight: 500; color: #9aa4b2; }
.cd-addpop-s { width: 100%; box-sizing: border-box; height: 30px; flex: 0 0 auto; min-height: 30px;   /* 결과 목록이 커져도 입력창이 눌리지 않게 */ border: 1px solid #d7dee7; border-radius: 8px; padding: 0 9px; font-size: 12.5px; margin-bottom: 6px; font-weight: 500; }
.cd-addpop-s:focus { outline: none; border-color: #9fc0e6; box-shadow: 0 0 0 3px rgba(127,169,216,.16); }
.cd-addpop-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-addpop-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 500; }
.cd-addpop-row:hover { background: #f3f6fa; }
.cd-addpop-row .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink); }
.cd-addpop-row .co { font-size: 10.5px; color: #9aa4b2; flex: 0 0 auto; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-addpop-row.added { opacity: .6; cursor: default; }
.cd-addpop-row.added:hover { background: transparent; }
.cd-addpop-row.added .co { color: #1f7a44; font-weight: 700; }
.cd-addpop-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.cd-addpop-empty { padding: 14px; text-align: center; color: #9aa4b2; font-size: 12px; }
.cd-roomtitle-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-roomtitle-t.editable { cursor: text; }
.cd-roomtitle-t.editable:hover { text-decoration: underline dotted #aab6c4; }
.cd-roomtitle-t.editing { background: #fff; color: #1c2a3a; outline: 2px solid #7fa9d8; border-radius: 6px; padding: 1px 6px; overflow: visible; text-overflow: clip; text-decoration: none; }
.cd-roomset { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; color: #8693a4; cursor: pointer; border-radius: 8px; padding: 0; transition: background .12s, color .12s; }
.cd-roomset:hover { background: #eef3f9; color: #2c6cb5; }
.cd-roomset[hidden] { display: none !important; }
.cd-watermark { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: 800; color: #2c3e55; opacity: .055; pointer-events: none; user-select: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; z-index: 1; }

/* 레일 고정 핀(항상 표시·클릭 토글) + 드래그 */
.cd-roomitem-c { position: relative; }
.cd-roomitem-c .cd-rpin { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; margin-left: -2px; border-radius: 6px; color: #b3bdca; cursor: pointer; transition: color .12s, background .12s; }
.cd-roomitem-c .cd-rpin:hover { background: #e7edf4; color: #6b86a8; }
.cd-roomitem-c .cd-pinic { display: block; }
.cd-roomitem-c[data-pinned="true"] .cd-rpin { color: var(--c-brand-mid); }           /* 고정 시 반전(채워짐) */
.cd-roomitem-c[data-pinned="true"] .cd-pinic { fill: var(--c-brand-mid); stroke: var(--c-brand-mid); }
.cd-roomitem-c.dragging { opacity: .5; background: #e3edf8; }
.cd-roomitem-c[draggable="true"] { cursor: grab; }

/* 커스텀(글래스) 이모지 */
.cd-body img[src^="/emoji/"] { width: 1.75em; height: 1.75em; vertical-align: -0.45em; margin: 0 1px; }
.cd-body.gem-only { background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 0 !important; }
.cd-body.gem-only img[src^="/emoji/"] { width: 88px; height: 88px; vertical-align: bottom; }
.cd-msg.mine .cd-body.gem-only { background: transparent !important; border: none !important; box-shadow: none !important; }
/* 선택 시: 배경 없는 이모지/이미지 메시지(글래스·유니코드·이미지)에도 선택 박스 표시 — 위 transparent 규칙(!important)을 이기도록 높은 명시도. 평소엔 숨김 */
.cd-msg.sel .cd-body.gem-only,
.cd-msg.sel.mine .cd-body.gem-only,
.cd-msg.sel .cd-body.img-only,
.cd-msg.sel.mine .cd-body.img-only,
.cd-msg.sel .cd-body.emoji-big,
.cd-msg.sel.mine .cd-body.emoji-big,
.cd-msg.sel .cd-body.emoji-xl,
.cd-msg.sel.mine .cd-body.emoji-xl { box-shadow: 0 0 0 2px var(--c-brand) !important; border-radius: 8px; }
.cd-react-em, .cd-react .cd-gem { width: 18px; height: 18px; vertical-align: -4px; }
/* 글래스 이모지 기본 크기 — 메시지 본문은 살짝 크게, 입력창은 글자에 맞춰 작게 */
.cd-gem { width: 24px; height: 24px; vertical-align: -6px; }
.cd-input .cd-gem, .cd-editor .cd-gem { width: 20px; height: 20px; vertical-align: -5px; }
.cd-react-pick img { width: 26px; height: 26px; display: block; }
.cd-react-panel .cd-react-pick { display: flex; align-items: center; justify-content: center; }
.cd-emoji.cd-emoji-g { display: inline-flex; align-items: center; justify-content: center; }
.cd-emoji img { width: 30px; height: 30px; }
.cd-emoji-sec { width: 100%; font-size: 10.5px; font-weight: 700; color: #9aa7b6; padding: 6px 4px 3px; }
.cd-dt-em img { width: 16px; height: 16px; vertical-align: -3px; }

/* @멘션 강조 칩 */
.cd-ment { color: #1f6fc4; font-weight: 800; }   /* 배경 칠 없이 굵은 글씨만(사용자 확정) */
.cd-msg.mine .cd-ment { color: #fff; }

/* 결함 링크: 입력창 칩 + 메시지 내 링크 */
.cd-deflink-chip { display: inline-flex; align-items: center; gap: 2px; vertical-align: baseline; margin: 0 1px;
  padding: 1px 7px; border-radius: 999px; background: #e7f0fb; color: #1f5fa8; font-weight: 700; font-size: 12px;
  white-space: nowrap; user-select: none; }
.cd-deflink { font-weight: 800; color: #1f6fc4; text-decoration: none; }
.cd-deflink:hover { text-decoration: underline; }
.cd-msg.mine .cd-deflink { color: #fff !important; }
/* 결함 검색 팝오버 */
/* 결함 검색 패널 — 둥근 카드 대신 입력영역 위에 꽉 차게 붙는 인셋 패널(배경과 자연스럽게 이어짐) */
.cd-defect-pop { flex: 0 0 auto; margin: 0; border: none; border-top: 1px solid #e6ecf4; border-bottom: 1px solid #e6ecf4;
  border-radius: 0; background: #f5f8fc; box-shadow: none; overflow: hidden; }
.cd-defect-q { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid #e6ecf4; padding: 10px 14px; font-size: 13px; outline: none; background: transparent; }
.cd-defect-results { max-height: 190px; overflow-y: auto; padding: 4px; }
.cd-defect-hint { padding: 12px; text-align: center; color: var(--c-muted); font-size: 12px; }
.cd-defect-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: #2b3a55; line-height: 1.4; white-space: normal; }
.cd-defect-item:hover { background: #eef5fc; }
.cd-defect-item b { color: #1f5fa8; margin-right: 4px; }
.cd-defect-item span { color: #4a5666; }

/* 시스템 안내 메시지 — 중앙 무채색 칩(버블 아님) */
.cd-msg.sys { display: flex; justify-content: center; align-self: stretch; max-width: 100%; margin: 8px 0; }
.cd-sysnote { background: #eceff3; color: #6b7785; font-size: 11.5px; line-height: 1.5; padding: 5px 12px; border-radius: 12px; max-width: 94%; text-align: center; }

/* 상단 중앙 테스트 단계 배너(관리자가 기간별로 켬·색 지정) */
.test-banner { position: fixed; top: 7px; left: 50%; transform: translateX(-50%); z-index: 1450;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 18px; border-radius: 999px;
  background: var(--c-brand-mid); color: #fff; font-size: 14px; line-height: 1; min-height: 32px;
  box-shadow: 0 4px 14px rgba(20,40,70,.28); max-width: 92vw; white-space: nowrap; }
.test-banner b { font-weight: 800; }
.test-banner .tb-ic { display: inline-flex; align-items: center; }
.test-banner .tb-now { white-space: nowrap; }   /* 일반 인라인 텍스트 — 단어 사이 띄어쓰기 유지 */
.test-banner .tb-range { display: inline-flex; align-items: center; opacity: .92; font-size: 12.5px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.45); }
.test-banner .tb-ic { font-size: 15px; }
.test-banner .tb-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin: -2px -8px -2px 2px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.22);
  color: inherit; font-size: 10px; line-height: 1; cursor: pointer; flex: none; }
.test-banner .tb-close:hover { background: rgba(255,255,255,.4); }

/* 채팅 메시지 로딩 스피너 / 오류 상태 */
.cd-loading { display: flex; align-items: center; justify-content: center; gap: 9px; height: 100%; min-height: 120px; color: var(--c-muted); font-size: 12.5px; }
.cd-spin { width: 18px; height: 18px; border: 2.5px solid #d7e0ea; border-top-color: var(--c-brand); border-radius: 50%; display: inline-block; animation: cdSpin .7s linear infinite; }
@keyframes cdSpin { to { transform: rotate(360deg); } }
.cd-loaderr .cd-retry { margin-top: 8px; border: 1px solid #cfd8e3; background: #fff; color: #2c6cb5; border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.cd-loaderr .cd-retry:hover { background: #eef4fb; }

/* 브랜드 옆 관리자 바로가기 — 좌측(브랜드) 묶음에 붙고, 나머지 메뉴는 오른쪽으로 */
.brand-admin { margin-left: 6px; margin-right: auto; }

/* 로스터 회사별 묶음 헤더 */
.cd-ru-co { font-size: 10.5px; font-weight: 700; color: #8693a4; padding: 7px 12px 3px; letter-spacing: .02em; }
.cd-ru-co:first-of-type { padding-top: 4px; }

/* 사용자 메뉴 아바타(클릭=색 변경) */
.um-head .um-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* 아바타 색 선택(아바타 클릭 시 토글) — 정사각 스와치 + 라벨 정렬 */
/* 아바타 색 — 테두리 박스 없이 평평하게: 라벨(좌) · 원형 색칩 + 저장(우) */
.um-color { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; background: none; border: none; box-shadow: none; }
.um-color-lbl { flex: 1 1 auto; font-size: 12.5px; color: #56627a; font-weight: 600; }
.um-color button[type="submit"] { flex: 0 0 auto; height: 34px; line-height: 32px; padding: 0 12px; font-size: 12px; background: #fff; border: 1px solid #dbe2ec; border-radius: 8px; color: #51607a; box-shadow: none; }
.um-color button[type="submit"]:hover { background: #f3f7fc; border-color: #c2d2e6; color: #2c5a8f; }
.um-swatch { width: 30px; height: 30px; padding: 2px; border: 1px solid #d7dee7; border-radius: 50%; background: #fff; cursor: pointer; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.um-swatch:hover { border-color: var(--c-brand); }
.um-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.um-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.um-swatch::-moz-color-swatch { border: none; border-radius: 50%; }

/* 전체 알림: 필터를 한 줄로(라벨 인라인) + 폭 더 넓게 */
.page.wide#notifPage { max-width: min(94vw, 1120px); }   /* 기본보다 조금만 넓게(전체 폭 X) */
.page.wide#usersPage { max-width: min(97vw, 1860px); }   /* 팀원 관리 — 관리 열이 많아 조금 더 넓게 */
#notifPage .toolbar { flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
#notifPage .toolbar .field { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
#notifPage .toolbar .field > label { margin: 0; }

/* 이름 변경 요청 — 대기 배지 + 안내 강조 */
.um-edit-row .um-pending-badge { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; font-size: 11px; font-weight: 700; background: #fff4e2; color: #b5730e; border: 1px solid #f3dcb4; border-radius: 8px; pointer-events: none; cursor: default; white-space: nowrap; box-shadow: none; }
.um-name-info { color: #4a5666; font-weight: 500; line-height: 1.55; word-break: keep-all; }
.um-name-info b { color: #2c6cb5; white-space: nowrap; }
/* 전체 저장으로 관리되는 카드: 개별 저장 버튼 숨김(화면에서는 전체 저장만) */
.bulk-managed .cm-item-save { display: none; }

/* 전체 저장 패널 — 편집 카드들을 하나의 큰 박스로 묶고, 우측 상단에 취소/전체 저장 */
.bulk-panel { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #f6f9fc; padding: 13px 14px; margin-bottom: 16px;
    max-height: calc(100vh - 210px); overflow: auto; }   /* 내용이 길면 이 박스 안에서만 스크롤 */
.bulk-panel > .card { box-shadow: 0 1px 2px rgba(20, 40, 70, .04); }
.bulk-panel > :last-child { margin-bottom: 0; }
.bulk-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px;
    position: sticky; top: -13px; z-index: 5; background: #f6f9fc; padding: 13px 0 8px; margin-top: -13px; }   /* 스크롤 중에도 취소·전체 저장 버튼 고정 */
.bulk-bar [data-bulk-msg] { font-size: 12px; }

/* ── 결함 등록/수정 폼: 필수 강조 + 선(테두리) 뚜렷하게 ── */
.req-star { color: var(--c-danger); font-weight: 800; }

/* 결함분류 미선택 강조 — 선택 전엔 빨간 실선 테두리·안내, 하나라도 고르면 사라짐 */
.reg-cat-required { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    padding: 5px 8px; border: 2px solid var(--c-danger); border-radius: 8px; background: #fff7f6; }
/* 제목줄(분류·중요도·제목) — 제목 입력칸 높이(34px)에 맞춰 칩 박스도 동일하게 축소(내용 꽉 차게) */
.reg-titlerow > div { display: flex; flex-direction: column; }
.reg-titlerow > div > label { margin: 0 0 3px; font-weight: 700; font-size: 12px; line-height: 1.3; }
/* 분류·중요도: 칩(긴급/보통 등)은 원래 크기 그대로 두고, 바깥 박스 테두리만 칩에 바짝 붙게(세로 패딩 0·min-height 해제) */
.reg-cat-required, .reg.detail .reg-prio { min-height: 40px; box-sizing: border-box; padding: 4px 8px; align-items: center; align-content: center; }
/* 결함제목 입력칸 — 분류·중요도 박스 높이에 맞춰 살짝 두껍게 */
.reg-titlerow input[type="text"] { min-height: 32px; padding-bottom: 4px; box-sizing: border-box; }
.reg-cat-required.has-checked { border-color: transparent; border-style: solid; border-width: 1px; background: transparent; }   /* 선택되면 박스 숨김(JS 클래스 — :has 폴백) */
.reg-cat-hint { color: var(--c-danger); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.reg-catgroup.has-checked .reg-cat-hint { display: none; }   /* 선택되면 힌트 숨김(JS 클래스 — :has 폴백) */
.reg-cat-hint { font-weight: 600; margin-left: 4px; }

/* 중요도도 분류와 동일하게 박스로 묶기(기본값이 있으므로 평상 테두리) */
.reg.detail .reg-prio { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; }   /* 박스 숨김 — 칩만 */

/* 등록/수정 폼 입력 요소 테두리 — 얇고 흐린 선을 진하고 또렷하게 */
.reg.detail input[type="text"],
.reg.detail input[type="number"],
.reg.detail select,
.reg.detail textarea,
.reg.detail .editor {
    border: 1px solid #5a6b7d;   /* 상세 보기와 동일 두께(필수 강조 빨간선만 2px 유지) */
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: none;
}
.reg.detail input[type="text"]:hover,
.reg.detail select:hover,
.reg.detail .editor:hover { border-color: #3a4756; }
.reg.detail input[type="text"]:focus,
.reg.detail select:focus,
.reg.detail textarea:focus,
.reg.detail .editor:focus {
    outline: none; border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(74,144,217,.22);
}
.reg.detail .reg-filedrop { border: 2px dashed #5a6b7d; }
.reg.detail .reg-filedrop:hover { border-color: var(--c-brand); }
.reg.detail .rte-toolbar { border: 1px solid #5a6b7d; border-bottom: none; }   /* 입력칸과 동일 두께 */
/* 에디터(아래 박스): 위 모서리 곡률 제거 + 위 테두리 제거 — 툴바와 한 몸처럼 이어짐 */
.reg.detail .editor { border-top: none; border-radius: 0 0 4px 4px; }
.reg-desc-label { font-weight: 800; }

/* 화면 이름·결함 제목·시스템명: 미선택/미입력이면 붉은 실선으로 선택·입력 유도, 채우면 평상 테두리 */
.reg.detail input[name="screenName"]:invalid,
.reg.detail input[name="title"]:invalid,
.reg.detail select[name="systemCode"]:invalid {
    border: 2px solid var(--c-danger);
    background: #fff7f6;
}
/* 결함세부내용(contenteditable)도 비어있으면 붉은 실선, 채우면 평상 테두리(JS로 토글) */
.reg.detail .editor.reg-big.reg-desc-empty { border: 2px solid var(--c-danger); border-top: none; background: #fff7f6; }
.reg.detail .rte-toolbar.reg-desc-empty { border: 2px solid var(--c-danger); border-bottom: none; background: #fff1f0; }   /* 툴바+에디터 바깥 전체가 빨간 둘레 */

/* 결함 상세·수정: 옅어서 잘 안 보이던 구조선(섹션·댓글·타임라인 등)을 또렷한 회색으로 상향.
   overflow:hidden으로 둥근 모서리 안쪽의 사각 헤더 배경이 삐져나와 끊겨 보이던 현상 제거. */
.section { border-color: #aab6c5; overflow: hidden; }
.section > .st { border-bottom-color: #aab6c5; }
.cmt-thread { border-bottom-color: #c4cdda; }
.cmt-replies { border-left-color: #b7c2d1; }
.cmt-editor { border-color: #8493a6; }
.cmt-hist { border-color: #c4cdda; }
.cmt-hist-item { border-bottom-color: #c0cad7; }
.cmt-new { border-top-color: #c4cdda; }
.tl-comment { border-color: #c4cdda; }
.tl-dot { box-shadow: 0 0 0 1px #aab6c5; }

/* ── 결함 목록 행 높이: 타이트 기본 + 밀도 선택(보통/넓게) ── */
/* 검색기간: 선택한 날짜를 아이콘 옆에 표시 */
.date-pick .date-val { font-size: 12px; color: #9aa7b8; padding: 0 6px 0 4px; white-space: nowrap; align-self: center; }
.date-pick.set .date-val { color: #25303c; font-weight: 600; }

/* 진행상태 칩 — 글자수와 무관하게 동일 크기 + 상하좌우 정중앙 정렬 */
.b-RECEIVED, .b-IN_PROGRESS, .b-DONE, .b-CONFIRMED, .b-REOPENED, .b-NEW {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 56px; min-height: 20px; padding: 0 9px; line-height: 1;
    box-sizing: border-box; vertical-align: middle;
}

.dlist tbody td { padding-top: 3px; padding-bottom: 3px; line-height: 1.3; }
.dlist.dense-normal tbody td { padding-top: 7px; padding-bottom: 7px; }
.dlist.dense-wide tbody td { padding-top: 12px; padding-bottom: 12px; }

/* 유휴 자동 로그아웃 경고 모달 — 관리자 30분·일반 6시간 */
.idle-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 26, 38, 0.42); backdrop-filter: blur(1.5px); }
.idle-modal[hidden] { display: none; }
.idle-box { background: #fff; border-radius: 14px; padding: 22px 24px; width: min(360px, 90vw);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); text-align: center; }
.idle-box b { display: block; font-size: 15px; margin-bottom: 8px; color: #1f2733; }
.idle-box p { margin: 0 0 16px; color: #55606f; font-size: 13.5px; line-height: 1.5; }
.idle-box #idleCount { font-weight: 800; color: #c0392b; }
.idle-actions { display: flex; gap: 8px; justify-content: center; }
.idle-actions .btn { min-width: 96px; }

/* 필터 묶음(진행상태·분류·중요도·시스템·담당자·조회·↻) — 좁은 화면에서 낱개 줄바꿈 대신 그룹째 줄바꿈 */
.flt-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* 중요도 라디오 — 코드마스터 색(--pc 배경/--pt 글씨): 미선택=같은 색을 옅게, 선택=선명 + ✓·링.
   (미선택을 흰 배경으로 그리면 글씨색이 흰색인 커스텀 색에서 보이지 않으므로, 항상 배경 위에 글씨를 얹는다) */
.cat-radio .prio-badge.has-c { background: var(--pc); color: var(--pt);
    border-color: color-mix(in srgb, var(--pc) 55%, #111); opacity: .82; }
.cat-radio input:checked + .prio-badge.has-c { background: var(--pc); color: var(--pt);
    border-color: color-mix(in srgb, var(--pc) 60%, #111); opacity: 1; }
/* 선택 가시성 강화(전 중요도 공통) — 체크마크 + 은은한 포커스 링 */
.cat-radio input:checked + .prio-badge::before { content: '✓'; font-weight: 900; margin-right: 4px; font-size: 10.5px; }
.cat-radio input:checked + .prio-badge { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 2px rgba(58,90,130,.18); }

/* 분류 라디오 — 중요도와 동일: 미선택=같은 색 옅게, 선택=선명 + ✓(흰 글씨 커스텀 색 안전) */
.cat-radio .cat-tag.has-c { background: var(--pc); color: var(--pt);
    border-color: color-mix(in srgb, var(--pc) 55%, #111); opacity: .82; }
.cat-radio input:checked + .cat-tag.has-c { background: var(--pc); color: var(--pt);
    border-color: color-mix(in srgb, var(--pc) 60%, #111); opacity: 1; }
.cat-radio input:checked + .cat-tag::before { content: '✓'; font-weight: 900; margin-right: 4px; font-size: 10.5px; }

/* 분류·중요도 행 — 두 그룹(라벨+박스)을 같은 구조·높이로: reg-cat의 여백 제거(라인 일치), 박스 높이 통일 */
.reg-catprio-row .reg-catgroup { display: flex; flex-direction: column; gap: 3px; }
.reg-catprio-row .reg-catgroup > label { margin: 0; font-weight: 700; font-size: 12px; line-height: 1.3; }
.reg-catprio-row .reg-cat { margin: 0; }                    /* 분류 박스만 있던 상하 마진 제거 → 중요도와 라인 일치 */
.reg-catprio-row .reg-cat-required,
.reg-catprio-row .reg-prio { min-height: 42px; padding-bottom: 7px; }   /* 박스 높이 동일 + 아래 여유 패딩 */

/* 가이드 화면 공통 폭(사용자 가이드·교육·채팅·정책 = 1080px) */
.guide-wrap { max-width: 1080px; margin: 0 auto; }

/* 사용자 가이드 — 결함분류 표: 분류 칩 열 가운데 정렬 */
.proc-cats th:first-child, .proc-cats td:first-child { text-align: center; }

/* 통계 표 — 현황 숫자 클릭 → 해당 조건으로 결함 목록(호버 시 안내·강조) */
.stat-link { display: block; color: inherit; text-decoration: none; margin: -5px -8px; padding: 5px 8px; }
.stat-link:hover { background: #e3eefc; color: #2b6cb0; text-decoration: underline; cursor: pointer; }

/* 사용자 관리 — 접속 상태 배지 */
.presence { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.presence.on { color: #1e8449; }
.presence.off { color: #9aa4af; font-weight: 500; }

/* 사용자 관리 — 계정 발급 모달 */
.modal-dlg { border: 1px solid #d7dee7; border-radius: 10px; padding: 18px 20px; min-width: 420px; max-width: 92vw;
             box-shadow: 0 14px 40px rgba(15,25,40,.25); }
.modal-dlg::backdrop { background: rgba(20,30,45,.45); }

/* ── 로그인 화면 모바일 최적화(≤600px) — 카드 확대(scale) 해제, 풀폭·터치 크기 ── */
@media (max-width: 600px) {
    .login-wrap { transform: none !important; width: min(400px, 92vw); min-width: 0; padding: 26px 22px; }
    .login-wrap h1 { white-space: normal; font-size: 26px; }
    .login-wrap input[type="text"], .login-wrap input[type="password"] { height: 46px; font-size: 16px; }
    .login-wrap button[type="submit"], .login-wrap .btn { min-height: 46px; font-size: 15.5px; }
    .login-wrap .login-opts { flex-wrap: wrap; gap: 8px 14px; }
}

/* 결함 등록 폼 — 세부내용 블록 위 간격 */
form.reg label.reg-desc-label { display: block; margin-top: 20px; }   /* form.reg label(8px) 기본 마진보다 우선하도록 특이성 상향 */

/* 사용자 가이드 — 액션·전이·권한 표: 액션 칼럼 가운데 정렬, 전이·수행 권한은 한 줄 고정(비고가 남은 폭) */
.proc-actions th:first-child, .proc-actions td:first-child { text-align: center; }
.proc-actions th:nth-child(2), .proc-actions td:nth-child(2),
.proc-actions th:nth-child(3), .proc-actions td:nth-child(3) { white-space: nowrap; }

/* 신뢰 기기 배너 — 등록/닫기 시 위로 접히며 사라짐 */
.ql-trust-banner { overflow: hidden; transition: height .32s cubic-bezier(.4,0,.2,1), opacity .28s, padding .32s; }
.ql-trust-banner.bye { opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }

/* devbar 우측 끝 — 이 기기 신뢰 폐기 버튼 */
.devbar .devbar-off { margin-left: auto; border: 1px solid #e3c96e; border-radius: 6px; background: #fff8e1;
    color: #8a6d1a; font-size: 11.5px; font-weight: 700; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.devbar .devbar-off:hover { background: #ffefb8; border-color: #d4b544; color: #6d5410; }

/* 등록/수정 폼 — 한 페이지 핏: 우측 패널을 세로 flex로, 남는 높이를 세부내용 에디터가 전부 채움.
   조회(상세 보기)는 flex 체인이 아니므로 기존처럼 패널 스크롤로 아래로 내려 본다. */
body.has-layout .layout > .panel#detailPanel { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
body.has-layout #detailPanel > .reg-mode-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }   /* 등록·수정 래퍼 체인(명시 클래스 — :has 의존 제거) */
body.has-layout #detailPanel > .reg-mode-wrap > h2 { flex: 0 0 auto; }
body.has-layout #detailPanel form.reg.detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body.has-layout #detailPanel form.reg.detail > * { flex: 0 0 auto; }
body.has-layout #detailPanel form.reg.detail .editor.reg-big { flex: 1 1 0; min-height: 140px; height: auto; overflow: auto; }   /* basis 0 — 남는 높이를 세부내용이 전부 차지 */
body.has-layout #detailPanel form.reg.detail .reg-files { margin-top: auto; }   /* 파일 첨부는 항상 바닥에 붙음 */

/* ── 전 화면 공통 앱 셸: 헤더가 있는 페이지(팀원관리·통계·가이드·달력·알림·관리자 전부)는
      body 스크롤을 없애고 본문(.page)만 스크롤 — 스크롤바가 헤더 옆을 침범하지 않는다. ── */
body:has(> header):has(> .page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body:has(> header) > .page { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* 콘텐츠는 원래대로 중앙(.page max-width) — 스크롤바는 카드 옆에 보이지 않게 숨김(스크롤·휠·터치는 그대로 동작) */
body:has(> header) > .page { scrollbar-width: none; }
body:has(> header) > .page::-webkit-scrollbar { display: none; }

/* 등록/수정 폼 셀렉트 공통 — 기본 ▼ 제거 후 커스텀 화살표(끝에서 10px 안쪽).
   주의: 위쪽의 background:#fff 쇼트핸드가 이미지를 지우므로 반드시 파일 뒤(우선)에서 선언한다. */
.reg.detail select {
    -webkit-appearance: none; appearance: none;
    padding: 3px 30px 5px 12px;   /* 좌 12px = 화살표 우측 여백 12px(대칭) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a6b7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; background-color: #fff; }

/* 앱 셸(body flex)에서 상단 배너·바가 눌려 쪼그라들지 않게 — 항상 내용 높이 유지 */
.ql-trust-banner, .devbar, .flash, .test-banner { flex: 0 0 auto; }

/* 신규 등록 헤더의 '신규' 칩 — 접수(레드 계열)와 구분되는 브랜드 블루 */
/* '신규' 칩 — 접수·처리중·확인과 동일한 상태 칩 규격(.badge 기본), 색만 초록(다른 상태색과 구분) */
.badge.b-NEW { background: #2f9e63; color: #fff; border-color: transparent; }

/* 사용자 관리 — '관리' 열 버튼들이 아랫줄로 내려가지 않게 */
.umgr-table td:last-child { white-space: nowrap; }
.umgr-table td:last-child form { display: inline-flex; }

/* 사용자 관리 — 접속 상태: 글씨 없이 색 원만(초록=접속중, 회색=오프라인). 자세한 건 툴팁 */
.presence-cell { text-align: center; }
.presence-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c9d2da; vertical-align: middle; }
.presence-dot.on { background: #2eaa5e; box-shadow: 0 0 0 3px rgba(46,170,94,.18); }

/* 등록/수정 폼 분류·중요도 칩 — 컴팩트(한 줄 고정, 6개가 내려가지 않게) */
.reg-catprio-row .reg-cat, .reg-catprio-row .reg-prio { flex-wrap: nowrap; gap: 4px; overflow: visible; }   /* 툴팁(분류 설명)이 밖으로 보이게 */
.reg-catprio-row .reg-cat .cat-tag { padding: 2px 6px; font-size: 10.5px; letter-spacing: -.01em; }
.reg-catprio-row .reg-prio .prio-badge { padding: 2px 7px; font-size: 10.5px; }
.reg-catprio-row .reg-cat .cat-radio, .reg-catprio-row .reg-prio .cat-radio { flex: 0 1 auto; min-width: 0; }

/* 결함 상세의 분류 변경 라디오 — 등록 폼과 동일한 컴팩트 칩, 선택해도 한 줄 유지 */
.fields .cat-radios { gap: 4px; flex-wrap: nowrap; }
.fields .cat-radios .cat-tag { padding: 2px 6px; font-size: 10.5px; letter-spacing: -.01em; white-space: nowrap;
    min-width: auto; min-height: 0; }   /* 목록 배지의 고정 최소폭(48px) 해제 — 글자에 딱 맞게(등록 폼과 동일) */
.fields .cat-radios .cat-radio { flex: 0 1 auto; min-width: 0; }

/* ── 태블릿(아이패드 프로 등): 데스크톱 화면 그대로 사용하되 가로 방향 안내 ──
   터치 기기(pointer: coarse) + 태블릿 폭 + 세로(portrait)일 때만 전체 오버레이로 회전 유도.
   가로로 돌리면 자동으로 사라지고 데스크톱 레이아웃이 표시된다. 폰(/m 화면, m-body)은 제외. */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) and (pointer: coarse) {
    body:not(.m-body)::after {
        content: '📱 → 💻  태블릿은 가로 방향으로 돌려서 사용해 주세요';
        position: fixed; inset: 0; z-index: 99999;
        display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px;
        background: rgba(13, 20, 31, .94); color: #fff; font-size: 21px; font-weight: 700; line-height: 1.6;
    }
}

/* 채팅 도크 — 🎉 폭죽(도크 내부)·메시지 점프 강조 */
.cd-join-celebrate { display: none; margin: 8px auto 4px; border: none; border-radius: 10px;
    background: #ffb52e; color: #5d3c00; font-weight: 800; font-size: 13px; padding: 8px 20px;
    box-shadow: 0 2px 8px rgba(200,130,10,.3); cursor: pointer; }
.cd-join-celebrate.on { display: block; }   /* 채팅 목록 맨 아래(입력창 위) — 30초 후 사라짐 */
.cd-join-celebrate:active { transform: scale(.97); }
.cd-msg.cd-jump .cd-bubble, .cd-msg.cd-jump { animation: cdJumpGlow 2.4s ease; }
@keyframes cdJumpGlow { 0%,60% { background: rgba(255, 224, 130, .45); border-radius: 8px; } 100% { background: transparent; } }
/* 공감 이모지 패널 — 10개 한 줄 */
.cd-react-panel { display: flex; flex-wrap: nowrap; gap: 2px; }

/* 채팅 도크 — 담당 시스템 접기(방 6개 이상 기본 접힘) */
.cd-sysfold { cursor: pointer; user-select: none; }
.cd-sysfold .fold-carr { font-style: normal; transition: transform .15s; display: inline-block; }
.cd-sysfold.folded .fold-carr { transform: rotate(-90deg); }
.cd-roomitem.sys-hidden { display: none; }

/* 파괴적 액션 공용 버튼 — 삭제·폐기류 시각 언어 통일(관리자 화면) */
.btn.danger { background: #fff; color: #c0392b; border: 1px solid #e4b6b0; }
.btn.danger:hover { background: #fdf1ef; border-color: #d98b81; }

/* 채팅 입력줄 아이콘 — 헤더와 동일한 라인 SVG로 통일(＋=파일, 사슬=결함 링크) */
.cd-emojibtn svg { display: block; color: #5a6675; }
.cd-emojibtn:hover svg { color: #2b6cb0; }

/* 채팅 도크 내부 알림 토스트 — 멘션·공감·초대·공지가 도크 위에 바로 보이게 */
.cd-chat-toast { --nt: #4C9BC4; position: absolute; top: 54px; left: 50%; transform: translateX(-50%) translateY(-8px);
    z-index: 130; max-width: 92%; text-decoration: none;
    background: rgba(24,30,42,.96); backdrop-filter: blur(6px); border-radius: 14px;
    padding: 10px 15px 11px; box-shadow: 0 10px 28px rgba(10,16,30,.4);
    opacity: 0; transition: opacity .25s, transform .25s; }
.cd-chat-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cd-chat-toast b { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
    color: #aeb9c9; letter-spacing: .3px; margin-bottom: 4px; }
.cd-chat-toast b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--nt); box-shadow: 0 0 6px var(--nt); }
.cd-chat-toast span { display: block; font-size: 12.5px; color: #f2f5f9; font-weight: 500; line-height: 1.5; word-break: keep-all; }
.cd-chat-toast.nt-MENTION { --nt: #4C9BC4; }
.cd-chat-toast.nt-CHAT_REACTION, .cd-chat-toast.nt-CHAT_INVITE { --nt: #5AA0D0; }
.cd-chat-toast.nt-ANNOUNCEMENT { --nt: #D99A2B; }

/* 결함 상세 패널 — 스크롤바 숨김(휠·터치 스크롤은 유지, 가이드·통계와 동일한 톤) */
#detailPanel { scrollbar-width: none; }
#detailPanel::-webkit-scrollbar { display: none; }

/* 결함 목록/상세 패널 — 스크롤바 숨김(스크롤 동작 유지) */
body.has-layout .layout > .panel { scrollbar-width: none; }
body.has-layout .layout > .panel::-webkit-scrollbar { display: none; }

/* 결함 목록 — 제목줄('결함 목록 N건')과 컬럼 헤더는 고정, 행 목록만 스크롤.
   패널을 flex 기둥으로: 제목줄=고정 머리, .dlist-wrap=스크롤 영역. thead는 wrap 기준 sticky(이중 안전). */
body.has-layout .layout > .panel.list-panel { display: flex; flex-direction: column; overflow: hidden; }
body.has-layout .layout > .panel.list-panel > .list-head { flex: 0 0 auto; }
.dlist-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-width: none; }   /* 스크롤바 숨김 — 컬럼 헤더 옆에 걸치지 않게(스크롤 동작은 유지) */
.dlist-wrap::-webkit-scrollbar { display: none; }
.dlist thead th { position: sticky; top: 0; z-index: 6; background: #f7f9fc; box-shadow: 0 1px 0 #e6ebf1; }

/* 이모지 버튼 — 입력창 '안' 왼쪽(카톡식) */
.cd-inputwrap { flex: 1 1 auto; position: relative; min-width: 0; }
.cd-inputwrap .cd-input { padding-left: 38px; }
.cd-emoji-inline { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 26px;
    border: none; background: none; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #8a94a2; }
.cd-emoji-inline:hover { color: #2b6cb0; }

/* 결함 목록 선택 모드 — 평소 No 번호, '선택' 진입 시 체크박스로 전환 */
.dlist th.no-col, .dlist td.no-col { text-align: center; }
/* No 번호 — 보이는 행만 1,2,3… 연속(비활성 숨김·필터로 display:none된 행은 CSS counter가 자동 스킵). */
.dlist tbody { counter-reset: dlistrow; }
.dlist tbody tr.row { counter-increment: dlistrow; }
.dlist tbody tr.row .row-no { font-size: 0; }
.dlist tbody tr.row .row-no::after { content: counter(dlistrow); font-size: 11px; font-weight: 500; color: #97a2ae; }
/* 제목줄 액션 영역 — 선택 모드에서만 표시(한 줄 정렬) */
.list-head-select { display: none; align-items: center; gap: 8px; }
.list-panel.sel-mode .list-head { display: flex; align-items: center; }
.list-panel.sel-mode .list-head-select { display: inline-flex; margin-left: auto; align-items: center; gap: 8px; }
.list-panel.sel-mode .list-head-tools { display: none; }   /* 선택 모드: 우측 도구만 숨김(다중선택 토글 버튼은 유지) */
.list-head-select b { color: #1d6fe0; }
.list-head-select .btn { padding: 4px 12px; font-size: 12.5px; }
.list-select-btn { padding: 4px 10px; font-size: 12.5px; }

/* 필터 프리셋 */
.flt-preset { position: relative; display: inline-block; }
.flt-preset-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; min-width: 220px;
    background: #fff; border: 1px solid #dbe3ee; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,25,50,.16); padding: 8px; }
.fp-item { display: flex; align-items: center; gap: 6px; }
.fp-go { flex: 1; display: block; padding: 7px 9px; border-radius: 7px; text-decoration: none; color: var(--c-ink); font-size: 13px; }
.fp-go:hover { background: #eef4ff; }
.fp-del { border: none; background: none; color: #b0b8c4; cursor: pointer; font-size: 12px; padding: 4px 6px; }
.fp-del:hover { color: #e5484d; }
.fp-save { width: 100%; margin-top: 6px; font-size: 12.5px; }
.fp-empty { color: #8a93a3; font-size: 12.5px; padding: 8px 9px; }

/* 다중 선택 — Ctrl/Shift 클릭으로 선택된 행 강조(체크박스 없음) */
/* 다중선택된 행 — 상세 하이라이트(연파랑)와 확실히 구분되게 진한 배경 + 좌측 굵은 바 + No 자리 체크 */
.dlist tbody tr.row.row-selected > td { background: #cfe2ff; }
.dlist tbody tr.row.row-selected { box-shadow: inset 4px 0 0 #2f6fd0; }
.dlist tbody tr.row.row-selected:hover > td { background: #c3daff; }
.list-panel.sel-mode .dlist tbody tr.row.row-selected .row-no::after { content: '✓'; color: #2f6fd0; font-weight: 900; font-size: 13px; }
/* 다중선택 모드에서는 상세로 본 행(.sel)의 하이라이트를 숨겨 선택 대상과 혼동되지 않게 한다. */
.list-panel.sel-mode .dlist tbody tr.row.sel:not(.row-selected) { background: transparent; }
.list-panel.sel-mode .dlist tbody tr.row.sel:not(.row-selected) > td { background: transparent; }

/* devbar 비활성 건 토글 — 관리자용 */
.devbar-toggle { font-size: 11px; padding: 2px 9px; border: 1px solid #cdd6e2; border-radius: 6px; background: #fff; color: #4a5568; cursor: pointer; }
.devbar-toggle:hover { background: #f1f4f8; }

/* 신규 등록 — 필수 항목이 모두 채워지면 저장 버튼 강조(펄스) */
.btn.ready { background: var(--c-primary, #2f6fd0); border-color: var(--c-primary, #2f6fd0); color: #fff;
    animation: saveReadyPulse 1.5s ease-in-out infinite; }
@keyframes saveReadyPulse {
    0%   { box-shadow: 0 0 0 0 rgba(47,111,208,.5); }
    70%  { box-shadow: 0 0 0 9px rgba(47,111,208,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,111,208,0); }
}
@media (prefers-reduced-motion: reduce) { .btn.ready { animation: none; box-shadow: 0 0 0 3px rgba(47,111,208,.25); } }

/* 일괄 처리 결과 강조 — 변경(초록)·실패(빨강), 펄스 2회 후 서서히 사라짐 */
@keyframes bulkDoneFlash {
    0% { background: #a6e0b8; } 12% { background: #d6f0dd; } 24% { background: #a6e0b8; }
    40% { background: #d6f0dd; } 100% { background: transparent; } }
@keyframes bulkFailFlash {
    0% { background: #f6c6c6; } 12% { background: #fbdcdc; } 24% { background: #f6c6c6; }
    40% { background: #fbdcdc; } 100% { background: transparent; } }
.dlist tbody tr.row.bulk-done-hl > td { background: #d6f0dd; transition: background .6s ease; }
.dlist tbody tr.row.bulk-fail-hl > td { background: #fbdcdc; transition: background .6s ease; }
.dlist tbody tr.row.bulk-done-hl > td:first-child { box-shadow: inset 3px 0 0 #2e9e5b; }
.dlist tbody tr.row.bulk-fail-hl > td:first-child { box-shadow: inset 3px 0 0 #d9614d; }
/* 변경/실패 행의 담당자 이름 강조 */
.dlist tbody tr.row.bulk-done-hl [data-col="assignee"] { color: #1c7a41; font-weight: 800; }
.dlist tbody tr.row.bulk-fail-hl [data-col="assignee"] { color: #b23a2a; font-weight: 800; }
/* 사라지는 모션 — fading이 붙으면 배경·강조를 부드럽게 원복 */
.dlist tbody tr.row.bulk-hl-fading > td { background: transparent !important; box-shadow: none !important; }
.dlist tbody tr.row.bulk-hl-fading [data-col="assignee"] { color: inherit; font-weight: inherit; transition: color .6s ease; }
.dlist tbody tr.row.bulk-hl-fading .bulk-hl-tag { opacity: 0; transition: opacity .6s ease; }
/* 변경/실패 뱃지 — 상태 배지 옆에 잠깐 */
/* 일괄 결과 — 담당자 이름 네모 박스(변경=초록·실패=빨강) */
.hl-name-box { display: inline-block; padding: 1px 6px; border: 2px solid; border-radius: 4px; font-weight: 700; line-height: 1.3; }
.hl-name-box.done { border-color: #2e9e5b; color: #1c7a41; background: #eafaef; }
.hl-name-box.fail { border-color: #d9614d; color: #b23a2a; background: #fdeeeb; }
.dlist tbody tr.row.bulk-hl-fading .hl-name-box { opacity: 0; transition: opacity .6s ease; }
.bulk-hl-tag.done { background: #2e9e5b; }
.bulk-hl-tag.fail { background: #d9614d; }
@keyframes bulkTagFade { 0%,70% { opacity: 1; } 100% { opacity: 0; } }

/* ── 실시간 목록 변경 강조 — SSE/자동 갱신으로 바뀐 부분을 잠깐 색으로 명시(일괄강조와 같은 색 언어) ── */
/* 새로 들어온 행: 통째로 파란-초록 배경 + 좌측 바 */
.dlist tbody tr.row.live-new-hl > td { background: #e2f4ea; transition: background .6s ease; }
.dlist tbody tr.row.live-new-hl > td:first-child { box-shadow: inset 3px 0 0 #2e9e5b; }
/* 값이 바뀐 기존 행: 은은한 배경 */
.dlist tbody tr.row.live-chg-hl > td { background: #fff5da; transition: background .6s ease; }
.dlist tbody tr.row.live-chg-hl > td:first-child { box-shadow: inset 3px 0 0 #e0a92e; }
/* 바뀐 셀만 노랑 하이라이트로 콕 집어 표시 */
.dlist tbody tr.row .live-cell-hl { background: #ffe89a !important; box-shadow: inset 0 0 0 1px #e0a92e; border-radius: 3px; font-weight: 700; transition: background .6s ease, box-shadow .6s ease; }
/* 페이드아웃 — fading이 붙으면 배경·강조를 부드럽게 원복 */
.dlist tbody tr.row.live-hl-fading > td { background: transparent !important; box-shadow: none !important; }
.dlist tbody tr.row.live-hl-fading .live-cell-hl { background: transparent !important; box-shadow: none; font-weight: inherit; }
@media (prefers-reduced-motion: reduce) {
    .dlist tbody tr.row.live-new-hl > td, .dlist tbody tr.row.live-chg-hl > td,
    .dlist tbody tr.row .live-cell-hl { transition: none; }
}
/* 상세 패널 — 다른 사용자가 바꾼 필드만 콕 집어 노랑 링으로 강조 후 페이드(목록과 같은 색 언어) */
/* 상세 실시간 변경 강조 — 박스 자체가 '변경됨'으로 읽히게: 배경+테두리+펄스 + 블록형 항목엔 코너 뱃지 */
#detailPanel [data-hl].detail-hl { position: relative; box-shadow: 0 0 0 2px #e0a92e;
    border-radius: 6px; transition: background .6s ease, box-shadow .6s ease;
    animation: hlpulse 1.1s ease-in-out 2; }
/* 배경 채움은 자체 배경색이 없는 요소에만 — 상태 뱃지 등 유색 배경+흰 글씨는 노란 배경이 덮으면 글씨가 사라진다 */
#detailPanel [data-hl].detail-hl:not(.badge):not(.prio-badge):not(.cat-tag) { background: #fff3cf; }
#detailPanel [data-hl].detail-hl.detail-hl-fading:not(.badge):not(.prio-badge):not(.cat-tag) { background: transparent; }
#detailPanel [data-hl].detail-hl.detail-hl-fading { box-shadow: 0 0 0 2px transparent; animation: none; }
#detailPanel .person[data-hl].detail-hl { background: #fff3cf; }
@keyframes hlpulse { 0%, 100% { box-shadow: 0 0 0 2px #e0a92e; } 50% { box-shadow: 0 0 0 4px #f2c14e; } }
/* 블록형 항목(값 칸·본문·이력/조치 줄)에는 우상단 '변경됨' 뱃지 — 무엇이 바뀌었는지 박스에 직접 표기 */
#detailPanel div[data-hl].detail-hl::after,
#detailPanel li[data-hl].detail-hl::after {
    content: '변경됨'; position: absolute; top: -9px; right: 6px; z-index: 2;
    background: #e0a92e; color: #4a3a06; font-size: 10px; font-weight: 800; line-height: 1;   /* 진갈색 — 노랑 배경 대비 확보 */
    padding: 3px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
#detailPanel [data-hl].detail-hl.detail-hl-fading::after { display: none; }

/* 선택 모드 — 드래그(텍스트 블록) 선택 방지(Shift+클릭 범위 선택 시 파란 블록 방지) */
.list-panel.sel-mode .dlist tbody { user-select: none; -webkit-user-select: none; }

/* 일괄 처리 결과 배너 — 목록 상단, 변경/실패 라인별. 자동 페이드아웃 */
.bulk-result { position: relative; margin: 0 0 10px; padding: 10px 34px 10px 12px; border: 1px solid #d7e0ec; border-left: 4px solid #2e9e5b;
    background: #f4fbf6; display: flex; flex-direction: column; gap: 5px; animation: bulkResultFade 9s ease-out forwards; }
.bulk-result:has(.bulk-result-line.fail) { border-left-color: #d9614d; background: #fdf6f4; }
.bulk-result-line { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; line-height: 1.4; }
.bulk-result-line .brl-ico { font-weight: 900; }
.bulk-result-line.done { color: #216e42; } .bulk-result-line.done .brl-ico { color: #2e9e5b; }
.bulk-result-line.fail { color: #a5372a; } .bulk-result-line.fail .brl-ico { color: #d9614d; }
.bulk-result-line b { flex: 0 0 auto; }
.bulk-result-line .brl-codes { color: #4a5563; font-weight: 600; }
.bulk-result-x { position: absolute; top: 6px; right: 7px; border: none; background: none; color: #9aa5b2; cursor: pointer; font-size: 12px; padding: 3px 5px; }
.bulk-result-x:hover { color: #47525f; }
@keyframes bulkResultFade { 0%,88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

/* 아이콘 전용 버튼(필터 개인화 등) — 정사각·아이콘 가운데 */
.btn.btn-ico { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 32px; height: 32px; }
.btn.btn-ico svg { display: block; }

/* 다중선택 모드 — 커서·hover 강조로 '클릭하면 선택됨'을 명확히 */
.list-panel.sel-mode .dlist tbody tr.row { cursor: pointer; }
.list-panel.sel-mode .dlist tbody tr.row:hover:not(.row-selected) > td { background: #eef4fc; }
.sel-hint { font-size: 11px; color: #8a93a3; font-weight: 400; margin: 0 4px 0 2px; }
.sel-hint kbd { font-family: inherit; font-size: 10px; background: #eef1f5; border: 1px solid #d6dce4; border-radius: 3px; padding: 0 4px; color: #5a6470; }
.list-head-select .btn:disabled { opacity: .45; cursor: not-allowed; }

/* 좁은 화면(1400px 미만): 날짜 필터 '시작일/종료일' 글씨 숨김(아이콘만) — 필터 한 줄 유지. 선택된 날짜값은 표시. */
@media (max-width: 1400px) {
    .toolbar .date-pick:not(.set) .date-val { display: none; }
}

/* ── 댓글 Jira/Confluence풍 리디자인 ─────────────────────────── */
.cmt { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f3f8; }
.cmt:last-child { border-bottom: none; }
.cmt-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #4C9BC4; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
    user-select: none; margin-top: 2px; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt-head > b { font-size: 13px; color: #22354e; }
.cmt-time { font-size: 11.5px; cursor: default; }
.cmt-edited { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #f1f4f9; border: 1px solid #e2e8f1; }
.cmt-actions { margin-left: auto; display: inline-flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.cmt:hover .cmt-actions, .cmt:focus-within .cmt-actions { opacity: 1; }
.cmt-body { margin-top: 3px; font-size: 13px; }
/* 답글: 좌측 연결선 들여쓰기(스레드 시각화) */
.cmt-replies { margin-left: 15px; padding-left: 18px; border-left: 2px solid #e6edf5; }
.cmt-replies .cmt-avatar { flex-basis: 24px; width: 24px; height: 24px; font-size: 11px; }
/* 새 댓글 입력: 아바타 + 박스 */
form.cmt-new { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
form.cmt-new .cmt-editor { flex: 1; }
form.cmt-new > div:last-child, form.cmt-new .cmt-submit-row { margin-top: 0; }
form.cmt-new { flex-wrap: wrap; }
form.cmt-new .cmt-editor { min-width: 0; }
form.cmt-new > div[style] { flex-basis: 100%; margin-left: 40px; }
/* 정렬 토글 */
.cmt-sort-btn { margin-left: auto; border: 1px solid #d8e2ee; background: #f7fafd; color: #55708e;
    border-radius: 999px; font-size: 11px; padding: 2px 10px; cursor: pointer; font-weight: 700; }
.cmt-sort-btn:hover { background: #eaf2fa; }

/* 댓글 등록 중 — 박스 안쪽 프로그레스(전체/섹션 오버레이 없이) */
.btn.cmt-busy { position: relative; min-width: 84px; pointer-events: none; }
.btn.cmt-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
    animation: cmtspin .7s linear infinite; }
@keyframes cmtspin { to { transform: rotate(360deg); } }
.cmt-editor-busy { opacity: .55; background: #f6f9fd; }

/* 변경 항목이 속한 큰 섹션 박스(결함정보·요청정보·댓글·첨부·조치정보·진행이력)도 아웃라인+반투명 배경으로 표기 */
#detailPanel .section.detail-hl-sec, #detailPanel .detail-head.detail-hl-sec {
    outline: 2px solid rgba(224, 169, 46, .75); outline-offset: 2px;
    background: rgba(255, 214, 108, .12); border-radius: 10px;
    transition: outline-color .6s ease, background .6s ease; }
#detailPanel .detail-hl-sec.detail-hl-sec-fading { outline-color: transparent; background: transparent; }

/* 답글 입력 폼 — 답글 내용 시작 위치(연결선 안쪽)만큼 들여쓰기(최상위 입력과 시각적 구분) */
#cmtSection .cmt-reply-box { margin-left: 33px; }

/* 인원 추가 — 선택 칩(담아뒀다 한 번에 추가) + 행 선택 표시 */
.cd-addpop-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 2px 7px; border-bottom: 1px dashed #e3e9f2; margin-bottom: 6px; }
.cd-addchip { display: inline-flex; align-items: center; gap: 5px; background: #eaf2fb; border: 1px solid #cfe0f5;
    color: #2c5c94; border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 2px 7px 2px 9px; }
.cd-addchip .x { cursor: pointer; font-weight: 800; font-size: 10px; color: #7d9cc0; font-style: normal; }
.cd-addchip .x:hover { color: #c0392b; }
.cd-addpop-row { display: flex; align-items: center; gap: 8px; }
.cd-addpop-row .nm { flex: 0 0 auto; font-weight: 700; }
.cd-addpop-row .co { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #93a0b0; font-size: 11px; text-align: right; }
.cd-addpop-row .ck { flex: 0 0 14px; color: #2e9e5b; font-weight: 800; font-size: 12px; text-align: center; }
.cd-addpop-row.picked { background: #f0f7ff; border-radius: 8px; }
.cd-addpop-ft { flex: 0 0 auto; padding: 7px 2px 1px; border-top: 1px solid #eef2f8; margin-top: 6px; display: flex; justify-content: flex-end; }
.cd-addpop-ft .btn { font-size: 12px; padding: 5px 14px; }

/* 채팅 도크 리사이즈 핸들 — 평소엔 변 중앙의 은은한 그립 pill, 올리면 파랗게 차오르며 살짝 자란다(심플·세련).
   완전 숨김(hover 전 0)으로 두면 어포던스가 없어 "그대로"로 보인다 — 사용자 피드백 반영. */
.cd-rz::after { content: ''; position: absolute; border-radius: 999px;
    background: rgba(125, 140, 160, .30);
    transition: opacity .16s ease, background .16s ease, width .18s ease, height .18s ease; }
.cd-rz:hover::after, .cd-rz.dragging::after { background: rgba(64, 132, 201, .9); }
.cd-rz-n::after, .cd-rz-s::after { left: 50%; transform: translateX(-50%); width: 34px; height: 3px; }
.cd-rz-n:hover::after, .cd-rz-s:hover::after { width: 56px; }
.cd-rz-n::after { top: 1.5px; }
.cd-rz-s::after { bottom: 1.5px; }
.cd-rz-e::after, .cd-rz-w::after { top: 50%; transform: translateY(-50%); height: 34px; width: 3px; }
.cd-rz-e:hover::after, .cd-rz-w:hover::after { height: 56px; }
.cd-rz-e::after { right: 1.5px; }
.cd-rz-w::after { left: 1.5px; }
/* 모서리 — 평소 숨김, 올리면 둥근 아크 */
.cd-rz-ne::after, .cd-rz-nw::after, .cd-rz-se::after, .cd-rz-sw::after {
    opacity: 0; width: 10px; height: 10px; background: transparent;
    border: 2.5px solid rgba(64, 132, 201, .9); border-radius: 0; }
.cd-rz-ne:hover::after, .cd-rz-nw:hover::after, .cd-rz-se:hover::after, .cd-rz-sw:hover::after { opacity: 1; }
.cd-rz-ne::after { top: 1px; right: 1px; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.cd-rz-nw::after { top: 1px; left: 1px; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.cd-rz-se::after { bottom: 1px; right: 1px; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
.cd-rz-sw::after { bottom: 1px; left: 1px; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }

/* 본문·댓글의 SVG 이미지 — 래스터와 달리 고유 픽셀 크기가 없어 작게(300×150 기본) 렌더되던 것을
   다른 이미지처럼 영역 폭에 맞춰 표시 */
.desc img[src$=".svg"], .cmt-body img[src$=".svg"], .cmt-editor img[src$=".svg"], .reg-desc img[src$=".svg"] {
    width: 100%; height: auto; }

/* ── 슈퍼관리자 보기 전용(super-ro) — 결함 쓰기 컨트롤 숨김. 서버 차단은 SuperReadOnlyInterceptor ── */
body.super-ro .js-reg-btn,
body.super-ro #multiSelectToggle,
body.super-ro .list-head-select,
body.super-ro .detail-actions,
body.super-ro .actbox,
body.super-ro form.cmt-new,
body.super-ro .cmt-actions,
body.super-ro .cmt-reply-box,
body.super-ro .cmt-edit-box,
body.super-ro .reg-filedrop[data-autoupload],
body.super-ro .reg-fileform,
body.super-ro .cd-inputwrap,
body.super-ro #cdSend,
body.super-ro #cdRoomAdd,
body.super-ro .cd-newroom,
body.super-ro #cdNewRoom,
body.super-ro #cdFile,
body.super-ro #cdDefect,
body.super-ro #cdSelToggle,
body.super-ro #cdRoomMenu,
body.super-ro #cdRoomSettings,
body.super-ro #cdAnnToggle,
body.super-ro .cd-join-celebrate,
body.super-ro .cd-react-add { display: none !important; }
body.super-ro .cd-react { pointer-events: none; }   /* 공감 현황은 보이되 클릭(토글)은 불가 */
/* devbar '결함 수정: 가능' — 수정 모드가 켜져 있음을 경고색으로 */
.devbar-toggle-warn { background: #b3261e !important; color: #fff !important; border-color: #b3261e !important; }

/* 비활성 사용자 작성물 뱃지 — 이름 뒤 흐린 (비활성) */
.u-inactive { font-size: 10px; font-weight: 600; color: #9aa4b2; margin-left: 3px; vertical-align: 1px; white-space: nowrap; }

/* 채팅 이미지 열기 인디케이터 — 편집기/뷰어가 원본을 준비하는 동안 도크 하단 중앙에 잠깐 */
.cd-imgload { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
    background: rgba(30, 41, 59, .88); color: #fff; font-size: 12px; font-weight: 600; z-index: 60;
    box-shadow: 0 6px 18px rgba(15,25,50,.25); }
.cd-imgload-sp { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    border-radius: 50%; animation: cmtspin .7s linear infinite; }

/* '메시지 선택' — 방 제목 바로 오른쪽 소형 버튼(명시적 선택 진입) */
.cd-roomtitle #cdSelToggle { margin-left: 8px; font-size: 11px; padding: 2px 9px; border-radius: 999px;
    border: 1px solid #cdd6e2; background: #fff; color: #4a5568; cursor: pointer; flex: 0 0 auto; }
.cd-roomtitle #cdSelToggle:hover { background: #f3f6fa; }
.cd-roomtitle #cdSelToggle.on { background: #1d5fae; border-color: #1d5fae; color: #fff; }

/* ── 이미지 낙관적 업로드(즉시 표시 → 배경 업로드) ──
   본문/댓글 편집기에 붙여넣은 이미지는 로컬 미리보기가 '즉시' 뜨고, 업로드 동안 은은한 펄스+점선 테두리로
   진행 상태를 보인다. 완료되면 서버 URL로 무깜빡임 교체되며 이 클래스는 제거된다(defects.html DefectImg). */
.editor img.img-uploading, .cmt-editor img.img-uploading {
    opacity: .72; outline: 2px dashed #9db7d8; outline-offset: -2px;
    animation: img-up-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes img-up-pulse { from { opacity: .55; } to { opacity: .85; } }

/* 채팅 이미지 전송 대기 스트립 — 입력창 위 소형 썸네일+스피너(전송 완료 시 제거, 실패는 붉게 2.5초) */
.cd-pending-imgs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 10px 0; }
.cd-pending-imgs:empty { display: none; }
.cd-pending-th { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
    border: 1px solid #cdd6e2; background: #f3f6fa; flex: 0 0 auto; }
.cd-pending-th img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.cd-pending-th .busy-spinner { position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px;
    width: 18px; height: 18px; border-width: 2px; }
.cd-pending-th.fail { border-color: var(--c-danger, #c0392b); }
.cd-pending-th.fail .busy-spinner { display: none; }
.cd-pending-th.fail::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; color: #c0392b; font-weight: 800; background: rgba(255,255,255,.6); }