/* ==================== 컬러 시스템 (Dark Charcoal Theme) ==================== */
:root {
    --dark: #1a1a1a;
    --dark-soft: #242424;
    --primary: #5A7A5A;
    --primary-hover: #6A8A6A;
    --primary-dark: #4A6A4A;
    --accent: #e09100;
    --accent-hover: #f59f00;
    --muted: rgba(255, 255, 255, 0.50);
    --muted-light: rgba(255, 255, 255, 0.25);
    --light: #2a2a2a;
    --light-border: #444444;
    --hover-bg: #2f2f2f;
    --danger: #D4956A;
    --danger-hover: #E5A87A;
    --text-primary: rgba(255, 255, 255, 0.78);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.42);
    --surface: #222222;
    /* 신규 변수 */
    --text-data: #F4E5A1;
    --text-heading: #ffffff;
    --status-success: #5A8F5A;
    --status-warning: #E5C287;
    --status-error: #D4956A;
    --status-info: #7BA3BC;
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --card-bg: #2a2a2a;
    --card-border: #444444;
    /* 호환 별칭 변수 */
    --background: #1a1a1a;
    --bg: #1a1a1a;
    --bg-hover: #333333;
    --bg-tertiary: #2a2a2a;
    --bg-white: #ffffff;
    --border: #444444;
    --border-color: #444444;
    --sidebar-bg: #242424;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

/* 네이티브 select/option 다크 테마 */
select,
select option {
    background-color: var(--surface);
    color: var(--text-primary);
}

select option:checked {
    background-color: var(--primary);
    color: var(--text-heading);
}

select option:hover {
    background-color: var(--dark-soft);
}

/* input/textarea/select/button 다크 테마 기본값 */
input, textarea, select, button {
    font-family: inherit;
    font-size: 16px;
}

/* small 태그 최소 폰트 */
small {
    font-size: 16px;
}
input, textarea {
    background-color: var(--surface);
    color: var(--text-primary);
    border-color: var(--light-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* date/time input 달력 아이콘 밝게 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* 전역 링크 색상 (다크 테마) */
a {
    color: #8399A8;
    text-decoration: none;
}

a:hover {
    color: #90caf9;
    text-decoration: underline;
}

a:visited {
    color: #8399A8;
}

html {
    overflow-x: auto;
}

body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    background: var(--dark);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    min-width: 0;
}

/* 헤딩 태그 폰트 통일 (16~20px) — .header h1, .login-logo h1 제외 */
h1, h2, h3, h4, h5, h6 {
    font-size: 20px;
}

body.login-active {
    min-width: unset;
    overflow: hidden;
    background: var(--dark);
}

/* ==================== 메인 페이지 래퍼 ==================== */
#mainPage {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==================== 헤더 ==================== */
.header {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 50%, #2a2a2a 100%);
    color: var(--text-heading);
    padding: 0 30px;
    display: flex;
    align-items: flex-end;
    height: 150px;
    justify-content: space-between;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    align-self: center;
}

.header-top-right {
    position: absolute;
    top: 12px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-top-right span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.header-top-right .btn-logout {
    font-size: 16px;
}

.header h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
}

.user-info span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.btn-logout {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ==================== 테마 전환 ==================== */
.theme-switcher {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-right: 4px;
}

.theme-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0;
}

.theme-btn:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.7);
}

.theme-btn.active {
    border-color: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

.theme-btn[data-theme="dark-charcoal"] {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}

.theme-btn[data-theme="dark-navy"] {
    background: linear-gradient(135deg, #0f1923, #16213e);
}

.theme-btn[data-theme="light"] {
    background: linear-gradient(135deg, #F5F5F5, #E0E0E0);
}

/* ==================== 메뉴바 ==================== */
.menubar {
    background: #1e1e1e;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 20px;
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
}

.menu-item {
    color: rgba(255, 255, 255, 0.75);
    padding: 18px 18px;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 20px;
    transition: all 0.2s;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-heading);
}

.menu-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-heading);
    border-bottom: 2px solid var(--primary-hover);
}

/* 문서관리 드롭다운 */
.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-arrow {
    font-size: 16px;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(26, 26, 26, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 150px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 8px 8px;
    backdrop-filter: blur(10px);
}

.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

.menu-dropdown-content .menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 20px;
}

.menu-dropdown-content .menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==================== 로그인 ==================== */
#loginPage {
    position: relative;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

.login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 40%, #2a2a2a 100%);
}

.login-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: linear-gradient(180deg, rgba(30,30,30,0.95) 0%, rgba(36,36,36,0.97) 50%, rgba(42,42,42,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.login-panel-inner {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-logo {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo h1 {
    font-size: 26px;
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.login-logo p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 4px;
    text-transform: uppercase;
}

.login-box input,
.login-box button,
.login-box a {
    pointer-events: auto;
}

.login-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 36px 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 340px;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 28px;
    color: var(--text-heading);
    font-size: 20px;
    font-weight: 600;
}

.login-box input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-heading);
    transition: border-color 0.2s, background 0.2s;
}

.login-box input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.login-box input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.12);
}

.login-box button {
    width: 100%;
    padding: 13px;
    background: var(--primary);
    color: var(--text-heading);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
    margin-top: 4px;
}

.login-box button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.login-box button:active {
    transform: translateY(0);
}

.login-box .register-link {
    text-align: center;
    margin-top: 18px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
}

.login-box .register-link a {
    color: var(--accent);
    cursor: pointer;
    font-weight: 500;
}

.login-box .register-link a:hover {
    text-decoration: underline;
}

.login-footer {
    margin-top: 40px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 16px;
    text-align: center;
}

/* ==================== 메인 컨텐츠 ==================== */
.main-content {
    padding: 20px;
    min-height: calc(100vh - 210px);
    background: var(--surface);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.content-header h2 {
    color: var(--text-primary);
}

/* ==================== 버튼 ==================== */
.btn-add {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 0.4375rem 1rem;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    transition: background-color 0.2s, color 0.2s;
}

.btn-add:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-edit {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    cursor: pointer;
    margin-right: 5px;
    font-weight: normal;
}

.btn-edit:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-delete {
    background: var(--surface);
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    cursor: pointer;
}

.btn-delete:hover {
    background: var(--danger);
    color: var(--text-heading);
}

.btn-view {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    cursor: pointer;
    margin-right: 5px;
    font-weight: normal;
}

.btn-view:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-send-email {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 5px 10px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}

.btn-send-email:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-sent-done {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--light-border);
    padding: 5px 10px;
    border-radius: 0;
    cursor: default;
    font-size: 16px;
}

.btn-copy {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 5px 10px;
    border-radius: 0;
    cursor: pointer;
    margin-right: 5px;
}

.btn-copy:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-save {
    flex: 1;
    padding: 0.4375rem 1rem;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
    transition: background-color 0.2s;
}

.btn-save:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-cancel {
    flex: 1;
    padding: 0.4375rem 1rem;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-cancel:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-done {
    opacity: 0.6;
    cursor: default;
    pointer-events: auto;
}

.att-correct-link {
    font-size: 16px;
    margin-left: 8px;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.btn-remove-row {
    background: var(--surface);
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 4px 8px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}

.btn-remove-row:hover {
    background: var(--danger);
    color: var(--text-heading);
}

.btn-add-row {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 5px 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
}

.btn-add-row:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-print {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 10px 25px;
    border-radius: 0;
    cursor: pointer;
    margin-right: 10px;
    font-weight: normal;
}

.btn-print:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 임시저장 버튼 */
.btn-draft {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 0.4375rem 1rem;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
}

.btn-draft:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 확정저장 버튼 */
.btn-confirm {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 8px 1rem;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
}

.btn-confirm:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 이메일 발송 버튼 */
.btn-email {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 10px 20px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}

.btn-email:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-email:disabled {
    background: var(--surface);
    color: var(--text-muted);
    border-color: #333;
    cursor: not-allowed;
}

/* 모달 버튼 3개 배치 */
.modal-buttons-triple {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

.modal-buttons-triple .btn-cancel {
    flex: 1;
}

.modal-buttons-triple .btn-draft {
    flex: 1;
}

.modal-buttons-triple .btn-confirm {
    flex: 1;
}

.btn-close {
    background: none;
    border: none;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.btn-close:hover {
    color: var(--danger);
}

/* ==================== 테이블 ==================== */
table {
    width: 100%;
    background: var(--surface);
    border-collapse: collapse;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    /* Tabler table shadow */
    border: 1px solid var(--light-border);
}

th,
td {
    padding: 0.75rem;
    font-size: 16px;
    text-align: left;
    border-bottom: 1px solid var(--light-border);
    border-right: 1px solid var(--light-border);
    color: var(--text-primary);
}

th:last-child,
td:last-child {
    border-right: none;
    white-space: nowrap;
}

th {
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    border-right: 1px solid var(--light-border);
    border-bottom: 2px solid var(--light-border);
}

th:last-child {
    border-right: none;
}

/* 번호 칸 가운데 정렬 */
td:first-child {
    text-align: center;
}

tr:hover {
    background: var(--light);
}

td select {
    padding: 5px 10px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
    background: var(--surface);
    color: var(--text-primary);
}

/* 목록 페이지 테이블 고정 너비 */
.main-content > table,
.main-content .tab-content table {
    min-width: 900px;
    table-layout: fixed;
}
.main-content .tab-content table.perm-settings-table {
    min-width: 0;
    table-layout: auto;
}

.data-table {
    min-width: 900px;
    table-layout: fixed;
}

/* 리뷰.md #200 — 목록 테이블 가로 스크롤 컨테이너 SSOT.
   테이블은 min-width:900px 이라 좁은 뷰포트(창 축소/브라우저 줌)에서 .table-container 를 넘침.
   기존엔 overflow 규칙이 없어(visible) 우측 컬럼(기본단가 등)이 화면 밖으로 잘려 스크롤로도 못 봄.
   overflow-x:auto 로 가로 스크롤 가능하게 (넓은 화면에선 스크롤바 미표시 — 시각 변화 없음). */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================== 모달 ==================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    z-index: 1000;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.modal-content {
    background: var(--surface);
    padding: 30px;
    border-radius: 0;
    border: 1px solid var(--light-border);
    width: 450px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    font-size: 16px;
}

.modal-content.wide {
    width: 800px;
    max-width: none;
}

.modal-content.modal-large {
    width: 900px;
    max-width: none;
    max-height: 90vh;
}

.modal-content.modal-preview {
    width: 1100px;
    max-width: none;
    /* 버퍼 120px — 액션바(65px)+padding(40px)+안전여유(15px). 뷰포트가 작아도 sticky 바 visible 보장. */
    max-height: calc(100vh - 120px);
    padding: 20px;
}

.modal-content h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-right: 36px;
    border-bottom: 2px solid var(--primary);
    position: relative;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-heading);
}

.modal-header .btn-close {
    position: absolute;
    right: 0;
    top: -5px;
    padding: 0;
    margin: 0;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: nowrap;
}

.modal-buttons > button,
.modal-buttons > .btn-cancel,
.modal-buttons > .btn-save,
.modal-buttons > .btn-confirm,
.modal-buttons > .btn-draft {
    flex: 1;
}

.modal-footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.modal-footer > button {
    flex: 1;
}

/* ==================== 폼 ==================== */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.4375rem 0.75rem;
    /* Tabler 7px 12px */
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
    line-height: 1.2;
    background-color: var(--surface);
    color: var(--text-primary);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* select/date는 브라우저가 line-height를 무시하므로 padding으로 input과 높이 통일 */
.form-group select,
.form-group input[type="date"] {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(74, 144, 217, 0.6);
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.2);
    background-color: var(--light);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.form-section {
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 0;
}

.form-section h4 {
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--light-border);
    color: var(--text-primary);
}

/* 상세보기 모달 구분선 스타일 */
.detail-view .form-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--light-border);
}
.detail-view .form-row:last-child {
    border-bottom: none;
}
.detail-view .form-group label {
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* select + 신규등록 버튼 가로 배치 */
.select-with-button {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.select-with-button select,
.select-with-button input[type="text"] {
    flex: 1;
    min-width: 0;
}

.select-with-button .btn-view,
.select-with-button .btn-new-client {
    padding: 0.4375rem 0.75rem;
    white-space: nowrap;
}

.btn-new-client {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 10px 15px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
    font-weight: normal;
}

.btn-new-client:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 결재 처리 버튼 (승인/반려/보류/회수 등 - 결재 모달 전용) */
.btn-approval-approve {
    background: var(--surface);
    color: var(--status-success);
    border: 1px solid var(--status-success);
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}
.btn-approval-approve:hover {
    background: var(--status-success);
    color: var(--text-heading);
}

.btn-approval-reject {
    background: var(--surface);
    color: #e74c3c;
    border: 1px solid #e74c3c;
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}
.btn-approval-reject:hover {
    background: #e74c3c;
    color: var(--text-heading);
}

.btn-approval-hold {
    background: var(--surface);
    color: #f39c12;
    border: 1px solid #f39c12;
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}
.btn-approval-hold:hover {
    background: #f39c12;
    color: var(--text-heading);
}

.btn-approval-close {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}
.btn-approval-close:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 결재요청 버튼 */
.btn-approval-request {
    background: var(--surface);
    color: #8e44ad;
    border: 1px solid #8e44ad;
    padding: 0.4375rem 1rem;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
}
.btn-approval-request:hover {
    background: #8e44ad;
    color: var(--text-heading);
}

/* 입고처리 버튼 */
.btn-inbound {
    background: var(--surface);
    color: var(--status-success);
    border: 1px solid var(--status-success);
    padding: 0.4375rem 1rem;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
}
.btn-inbound:hover {
    background: var(--status-success);
    color: var(--text-heading);
}

/* 출고처리 버튼 */
.btn-outbound {
    background: var(--surface);
    color: #e67e22;
    border: 1px solid #e67e22;
    padding: 0.4375rem 1rem;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
}
.btn-outbound:hover {
    background: #e67e22;
    color: var(--text-heading);
}

/* 회수 버튼 */
.btn-recall {
    background: var(--surface);
    color: #f39c12;
    border: 1px solid #f39c12;
    padding: 5px 10px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}
.btn-recall:hover {
    background: #f39c12;
    color: var(--text-heading);
}

/* ==================== 알림 ==================== */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0;
    display: none;
}

.alert-success {
    background: rgba(46, 204, 113, 0.15);
    color: #69f0ae;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.alert-error {
    background: rgba(231, 76, 60, 0.15);
    color: #ff8a80;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* ==================== 대시보드 카드 ==================== */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    min-width: 900px;
}

.card {
    background: var(--surface);
    padding: 25px;
    border-radius: 0;
    border: 1px solid var(--light-border);
    text-align: center;
}

.card h3 {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 10px;
}

.card .number {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary);
}

/* ==================== 대시보드 커맨드센터 ==================== */
.dash-container { padding: 0; }
.dash-welcome { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.dash-welcome-sub { font-size: 16px; color: var(--text-muted); margin-bottom: 18px; }

/* Zone 1 - 긴급 배너 */
.dash-urgent-zone {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 0; margin-bottom: 0;
    scrollbar-width: thin; scrollbar-color: var(--light-border) transparent;
}
.dash-urgent-card {
    flex: 0 0 auto; min-width: 120px; max-width: 200px;
    background: var(--surface); border: 1px solid var(--light-border);
    border-radius: 0;
    padding: 6px 12px; cursor: pointer; transition: background 0.15s;
    text-align: center;
}
.dash-urgent-card:hover { background: var(--hover-bg); }
.dash-urgent-card .uc-count { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.dash-urgent-card .uc-label { font-size: 13px; color: var(--text-secondary); margin-top: 1px; }

/* Zone 2 - 업무 보드 */
.dash-work-board {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
@media (max-width: 900px) { .dash-work-board { grid-template-columns: 1fr; } }

.dash-section {
    background: var(--surface); border: 1px solid var(--light-border); border-radius: 0;
    margin-bottom: 12px; overflow: hidden;
}
.dash-section-title {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--light-border);
    font-size: 16px; font-weight: 600; color: var(--text-secondary);
}
.dash-section-body { padding: 10px 14px; }

.dash-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 0; font-size: 16px; font-weight: 700;
    background: var(--accent); color: #fff;
}

/* 일정 타임라인 */
.dash-schedule-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--light-border); cursor: pointer;
}
.dash-schedule-item:last-child { border-bottom: none; }
.dash-schedule-item .time { font-size: 16px; color: var(--text-muted); min-width: 50px; text-align: right; }
.dash-schedule-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-schedule-item .title { font-size: 16px; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 작업 진행 */
.dash-task-item {
    padding: 8px 0; border-bottom: 1px solid var(--light-border); cursor: pointer;
}
.dash-task-item:last-child { border-bottom: none; }
.dash-task-item .task-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dash-task-item .task-title { font-size: 16px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dash-task-item .task-pct { font-size: 16px; color: var(--text-muted); margin-left: 8px; }
.dash-task-item .task-sub { font-size: 16px; color: var(--text-muted); margin-bottom: 4px; }
.dash-progress { height: 4px; background: var(--light-border); border-radius: 0; overflow: hidden; }
.dash-progress-bar { height: 100%; background: var(--accent); border-radius: 0; transition: width 0.3s; }
.dash-task-item .task-meta { display: flex; gap: 8px; margin-top: 3px; font-size: 16px; color: var(--text-muted); }
.dash-priority-high { color: var(--status-error) !important; font-weight: 600; }
.dash-priority-urgent { color: var(--status-error) !important; font-weight: 700; }

/* 확인 필요 항목 */
.dash-attn-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--light-border); cursor: pointer;
}
.dash-attn-item:last-child { border-bottom: none; }
.dash-attn-item .attn-icon { font-size: 16px; flex-shrink: 0; }
.dash-attn-item .attn-body { flex: 1; min-width: 0; }
.dash-attn-item .attn-title { font-size: 16px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-attn-item .attn-sub { font-size: 16px; color: var(--text-muted); }
.dash-attn-item .attn-time { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.dash-attn-item .attn-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 0; font-size: 16px; font-weight: 700;
    background: transparent; color: var(--status-error); flex-shrink: 0;
}
.dash-attn-item .attn-badge.approved { color: var(--status-success); }
.dash-attn-item .attn-badge.rejected { color: var(--status-error); }

/* 공지 목록 */
.dash-notice-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 0;
    border-bottom: 1px solid var(--light-border); cursor: pointer;
}
.dash-notice-item:last-child { border-bottom: none; }
.dash-notice-item .ntc-pin { color: var(--status-warning); font-size: 16px; }
.dash-notice-item .ntc-title { font-size: 16px; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-notice-item .ntc-new {
    font-size: 11px; font-weight: 600; color: #fff; background: var(--primary);
    padding: 2px 6px; border-radius: 10px; flex-shrink: 0;
}
.dash-notice-item .ntc-cat { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.dash-notice-item .ntc-date { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }

/* 공지사항 필터바 */
.notice-filter-bar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
}
.notice-filter-row {
    display: flex; gap: 10px; align-items: center; flex: 1;
}
.notice-filter-row select { width: 160px; }
.notice-filter-row input { flex: 1; }
.notice-filter-bar .btn-add { margin-left: auto; white-space: nowrap; }

/* 공지사항 카드 리스트 (모바일 전용, 데스크톱 숨김) */
.notice-card-list { display: none; }
.notice-card {
    padding: 14px 12px; border-bottom: 1px solid var(--light-border);
    cursor: pointer; transition: background 0.15s;
}
.notice-card:hover { background: var(--hover-bg); }
.notice-card:active { background: var(--light); }
.notice-card-top {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.notice-card-date { font-size: 13px; color: var(--text-muted); }
.notice-card-title {
    font-size: 15px; color: var(--text-primary); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notice-card-actions {
    display: flex; gap: 6px; margin-top: 8px;
}
.notice-card-actions button {
    font-size: 13px; padding: 4px 10px; min-height: 32px; min-width: auto;
}
.notice-card-empty {
    padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 15px;
}

/* 주간 문서 요약 */
.dash-week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-week-card {
    background: var(--bg); border: 1px solid var(--light-border); border-radius: 0;
    padding: 10px 12px; text-align: center;
}
.dash-week-card .wk-count { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.dash-week-card .wk-label { font-size: 16px; color: var(--text-secondary); margin-top: 2px; }
.dash-week-card .wk-detail { font-size: 16px; color: var(--text-muted); margin-top: 3px; }

/* 재고 부족 */
.dash-lowstock-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--light-border); cursor: pointer;
}
.dash-lowstock-row:last-child { border-bottom: none; }
.dash-lowstock-row .ls-name { font-size: 16px; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lowstock-row .ls-qty { font-size: 16px; color: var(--status-error); font-weight: 600; }
.dash-lowstock-row .ls-safety { font-size: 16px; color: var(--text-muted); }

/* 코팅 현황 */
.dash-coating-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--light-border); cursor: pointer;
}
.dash-coating-item:last-child { border-bottom: none; }
.dash-coating-item .coat-info { flex: 1; min-width: 0; }
.dash-coating-item .coat-name { font-size: 16px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-coating-item .coat-sub { font-size: 16px; color: var(--text-muted); }
.dash-coating-item .coat-progress { width: 60px; }
.dash-dday {
    font-size: 16px; font-weight: 700; padding: 2px 8px; border-radius: 0;
    flex-shrink: 0;
}
.dash-dday.urgent { background: transparent; color: var(--status-error); }
.dash-dday.normal { background: transparent; color: var(--text-secondary); }

/* Zone 3 */
.dash-trends { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 900px) { .dash-trends { grid-template-columns: 1fr; } }

/* 빈 상태 */
.dash-empty { padding: 16px 0; text-align: center; font-size: 16px; color: var(--text-muted); }

/* ==================== 대시보드 위젯 시스템 ==================== */
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.dash-header #btnEditDashboard { white-space: nowrap; }
.dash-container.editing .grid-stack-item { border: 1px dashed var(--light-border); }
.dash-container.editing .dash-widget-body { pointer-events: none; }

/* GridStack 오버라이드 */
.grid-stack { min-height: 200px; }
.grid-stack-item-content { overflow: hidden; border-radius: 0; }
.grid-stack-item > .ui-resizable-handle,
.grid-stack-item > .gs-resize-handle { display: none !important; }
.dash-container.editing .grid-stack-item > .ui-resizable-handle,
.dash-container.editing .grid-stack-item > .gs-resize-handle { display: block !important; }
.dash-widget { display: flex; flex-direction: column; height: 100%; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0; overflow: hidden; }
.dash-widget-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--card-border); flex-shrink: 0; }
.dash-widget-icon { font-size: 16px; flex-shrink: 0; }
.dash-widget-title { font-size: 16px; font-weight: 600; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-widget-remove { background: none; border: none; color: var(--status-error); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.dash-widget-remove:hover { opacity: 0.7; }
.dash-widget-more { font-size: 12px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; white-space: nowrap; padding: 2px 6px; border-radius: 4px; transition: color 0.15s, background 0.15s; }
.dash-widget-more:hover { color: var(--primary); background: var(--surface); }
.dash-widget-body { flex: 1; overflow-y: auto; padding: 8px 12px; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; }
.dash-widget-body::-webkit-scrollbar { display: none; }
.dash-widget-loading { display: flex; justify-content: center; align-items: center; height: 100%; }
.dash-widget-loading .spinner { width: 24px; height: 24px; border: 3px solid var(--light-border); border-top-color: var(--accent); border-radius: 50%; animation: dash-spin 0.8s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }
.dash-widget-empty { padding: 16px 0; text-align: center; font-size: 16px; color: var(--text-muted); }
.dash-widget-error { padding: 16px; text-align: center; color: var(--status-error); }
.dash-widget-badge { text-align: right; font-size: 14px; color: var(--accent); margin-bottom: 4px; }

/* 위젯 KPI 그리드 */
.dash-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; }
.dash-kpi-card { text-align: center; padding: 8px 4px; background: var(--bg-secondary); border-radius: 0; }
.dash-kpi-card .kpi-value { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.dash-kpi-card .kpi-value.kpi-warn { color: var(--status-error); }
.dash-kpi-card .kpi-label { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* 위젯 출퇴근 */
.dash-attendance-row { display: flex; gap: 12px; padding: 4px 0; }
.dash-attendance-row .att-item { flex: 1; text-align: center; padding: 8px; background: var(--bg-secondary); border-radius: 0; }
.dash-attendance-row .att-label { display: block; font-size: 14px; color: var(--text-muted); }
.dash-attendance-row .att-value { display: block; font-size: 18px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }

/* 위젯 사이드 드로어 */
.dash-widget-drawer { display: none; flex-direction: column; position: fixed; top: 0; right: 0; width: 180px; height: 100vh; background: var(--bg-primary); border-left: 1px solid var(--card-border); z-index: 1001; box-shadow: -4px 0 16px rgba(0,0,0,0.3); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--card-border); }
.drawer-header h4 { margin: 0; font-size: 14px; color: var(--text-primary); }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px; }
.drawer-footer { display: flex; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--card-border); }
.drawer-category { font-size: 14px; font-weight: 600; color: var(--text-muted); padding: 8px 0 4px; border-bottom: 1px solid var(--light-border); margin-bottom: 4px; }
.drawer-widget-item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 0; cursor: pointer; }
.drawer-widget-item:hover { background: var(--hover-bg); }
.drawer-widget-item.added { opacity: 0.5; }
.drawer-widget-icon { font-size: 16px; }
.drawer-widget-name { flex: 1; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-add-btn { font-size: 12px; padding: 2px 6px; flex-shrink: 0; }
.drawer-remove-btn { font-size: 12px; padding: 2px 6px; flex-shrink: 0; }

/* 모바일 위젯 편집 모달 */
.dash-mobile-widget-item { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-bottom: 1px solid var(--light-border); cursor: pointer; font-size: 16px; color: var(--text-primary); }
.dash-mobile-widget-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }

/* ==================== 상태 뱃지 ==================== */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
    line-height: normal;
    background: transparent;
}

.status-draft {
    border-color: #f76707;
    color: #f76707;
}

.status-confirmed {
    border-color: var(--primary);
    color: var(--primary);
}

.status-sent {
    border-color: var(--muted);
    color: var(--text-secondary);
}

/* ==================== 견적서 종류 뱃지 ==================== */
.type-equipment {
    background: transparent;
    border: 1px solid #5bc0de;
    color: #5bc0de;
}

.type-material {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.type-parts {
    background: transparent;
    border: 1px solid #9e9bab;
    color: #9e9bab;
}

.type-service {
    background: transparent;
    border: 1px solid #5cb85c;
    color: #5cb85c;
}

.type-coating {
    background: transparent;
    border: 1px solid #fd79a8;
    color: #fd79a8;
}

/* ==================== 필터 바 ==================== */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--light);
    border-radius: 0;
    align-items: center;
    flex-wrap: nowrap;
}

.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar button {
    height: 39px;
    padding: 8px 12px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
    white-space: nowrap;
}

.filter-bar select {
    min-width: 120px;
}

.filter-bar input[type="text"] {
    flex: 1;
    min-width: 180px;
}

/* ==================== 견적서 품목 테이블 (작성 폼) ==================== */
.quotation-items-table {
    width: 100%;
    margin: 15px 0;
    border: 1px solid var(--light-border);
    table-layout: fixed;
    background: transparent;
    box-shadow: none;
}

.quotation-items-table th {
    background: var(--surface);
    color: var(--text-primary);
    padding: 10px 5px;
    font-size: 16px;
    white-space: nowrap;
    text-transform: none;
    border-bottom: 1px solid var(--light-border);
    border-right: 1px solid var(--light-border);
}

.quotation-items-table td {
    padding: 5px;
    font-size: 16px;
    vertical-align: middle;
    background: transparent;
    color: var(--text-primary);
    border-bottom: 1px solid var(--light-border);
    border-right: 1px solid var(--light-border);
}

.quotation-items-table input,
.quotation-items-table select {
    width: 100%;
    padding: 6px;
    font-size: 16px;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--light-border);
    border-radius: 0;
}

/* 품목 행 select + 직접입력 */
.quotation-items-table .item-select {
    width: 100%;
    padding: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.quotation-items-table .item-name-manual {
    width: 100%;
    padding: 6px;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    background: rgba(224, 145, 0, 0.12);
    color: var(--text-primary);
}

.quotation-items-table .item-name-manual::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* 품목 테이블 컬럼 너비 고정 */
.quotation-items-table th:nth-child(1),
.quotation-items-table td:nth-child(1) {
    width: 22%;
}

/* 품목명 */

.quotation-items-table th:nth-child(2),
.quotation-items-table td:nth-child(2) {
    width: 15%;
}

/* 규격 */

.quotation-items-table th:nth-child(3),
.quotation-items-table td:nth-child(3) {
    width: 10%;
}

/* 단위 */

.quotation-items-table th:nth-child(4),
.quotation-items-table td:nth-child(4) {
    width: 10%;
}

/* 수량 */

.quotation-items-table th:nth-child(5),
.quotation-items-table td:nth-child(5) {
    width: 15%;
}

/* 단가 */

.quotation-items-table th:nth-child(6),
.quotation-items-table td:nth-child(6) {
    width: 15%;
}

/* 금액 */

.quotation-items-table th:nth-child(7),
.quotation-items-table td:nth-child(7) {
    width: 8%;
}

/* 삭제 */

.quotation-items-table .amount-cell {
    text-align: right;
    padding-right: 10px;
    font-weight: 500;
}

/* ==================== 견적서 요약 ==================== */
.quotation-summary {
    background: transparent;
    padding: 15px;
    border-radius: 0;
    margin-top: 15px;
}

.quotation-summary table {
    width: 250px;
    margin-left: auto;
    box-shadow: none;
    background: transparent;
    border: none;
}

.quotation-summary td {
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
}

.quotation-summary .total {
    font-weight: bold;
    font-size: 16px;
    color: var(--danger);
    border-top: 2px solid var(--light-border);
}

.quotation-summary .total td {
    color: var(--danger);
}

/* ==================== 상세 보기 ==================== */
.detail-view {
    background: var(--light);
    padding: 20px;
    border-radius: 0;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary);
}

.detail-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.detail-info p {
    margin: 5px 0;
}

.detail-info strong {
    color: var(--text-secondary);
}

/* ==================== 로딩 ==================== */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* ==================== 빈 상태 ==================== */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* 모바일 카드 뷰 기본 숨김 (모바일 CSS에서 오버라이드) */
.wo-detail-card-view,
.eq-detail-card-view {
    display: none;
}

/* ===== 설비 상세 모달: 가로 스크롤 차단 + 섹션 간 공백 압축 (폰트 크기 미조정) ===== */
/* overflow-y:auto 만 선언하면 CSS spec상 overflow-x가 암묵적으로 auto가 되어 가로 스크롤이 발생 — 명시적으로 x:hidden */
#eqDetailModal .modal-content {
    overflow: hidden auto;
}
#eqDetailModal .modal-body .form-section {
    margin-bottom: 10px;
    padding: 10px 15px 5px;
}
#eqDetailModal .modal-body .form-section h4 {
    margin-bottom: 10px;
}
#eqDetailModal .modal-body .form-group {
    margin-bottom: 8px;
}
#eqDetailModal .modal-body .form-group label {
    margin-bottom: 3px;
}

/* ==================== 이메일 시스템 ==================== */

/* 메뉴 읽지않은 뱃지 */
.unread-badge {
    background: var(--danger);
    color: #fff !important;
    font-size: 12px;
    font-weight: normal;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
}

/* 39L차: 신규/부족 등 알림 항목의 행/카드 배경 빨간 톤 강조 (콘텐츠 영역) — :has() 자동 */
tr:has(.new-item-dot) > td,
tr:has(.inv-status-danger) > td {
    background: rgba(231, 76, 60, 0.18) !important;
}
tr:has(.new-item-dot):hover > td,
tr:has(.inv-status-danger):hover > td {
    background: rgba(231, 76, 60, 0.26) !important;
}
.m-card:has(.new-item-dot),
.m-card:has(.inv-status-danger) {
    background: rgba(231, 76, 60, 0.18) !important;
}

/* 신규 항목 표시 dot (알림 배지 연동) */
.new-item-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 이메일 컨테이너 (3단 레이아웃) */
.email-container {
    display: flex;
    height: calc(100vh - 160px);
    gap: 0;
    background: var(--surface);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    flex-wrap: nowrap;
}

/* 이메일 사이드바 */
.email-sidebar {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    background: var(--light);
    border-right: 1px solid var(--light-border);
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* 사이드바 탭 */
.email-sidebar-tabs { display: flex; gap: 0; margin-bottom: 12px; border-bottom: 2px solid var(--light-border); }
.email-sidebar-tab { flex: 1; padding: 10px 8px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text-muted); text-align: center; }
.email-sidebar-tab:hover { color: var(--text-primary); }
.email-sidebar-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.email-sidebar-mail, .email-sidebar-contacts { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.email-compose-btns { display: flex; gap: 6px; margin-bottom: 12px; }
.btn-compose {
    flex: 1; padding: 10px 8px; background: var(--primary); color: #fff; border: none;
    border-radius: 0; font-size: 16px; font-weight: 500; cursor: pointer;
}
.btn-compose:hover { opacity: 0.9; }
.btn-compose-self {
    flex: 1; padding: 10px 8px; background: var(--surface); color: var(--text-secondary);
    border: 1px solid var(--light-border); border-radius: 0; font-size: 16px; cursor: pointer;
}
.btn-compose-self:hover { background: var(--hover-bg); color: var(--text-primary); }

.email-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.email-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-primary);
    text-align: left;
    width: 100%;
}

.email-nav-item:hover {
    background: var(--hover-bg);
}

.email-nav-item.active {
    background: var(--primary);
    color: var(--text-heading);
}

.nav-unread-count {
    background: var(--danger);
    color: var(--text-heading);
    font-size: 12px;
    font-weight: normal;
    padding: 1px 7px;
    border-radius: 10px;
}

.email-nav-item.active .nav-unread-count {
    background: var(--surface);
    color: var(--dark);
}

.email-nav-section { margin-top: 8px; }
.email-nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.email-nav-section-header .btn-sm {
    padding: 1px 8px;
    font-size: 16px;
    line-height: 1;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.email-nav-section-header .btn-sm:hover { color: var(--text-primary); }

.email-sidebar-bottom {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--light-border);
    background: var(--bg-tertiary);
}
.email-account-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.email-account-address {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    word-break: break-all;
    margin-bottom: 10px;
    line-height: 1.3;
}
.email-sidebar-bottom-actions {
    display: flex;
    gap: 6px;
}
.email-sidebar-bottom-actions .btn-sm {
    flex: 1;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}

/* 이메일 목록 패널 */
.email-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
}

.email-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--light-border);
    background: var(--light);
}

.email-list-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.email-search {
    display: flex;
    gap: 5px;
}

.email-search input {
    padding: 6px 10px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
    width: 200px;
}

.email-search button {
    padding: 6px 12px;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.email-search button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 고급 검색 */
.email-advanced-search { padding: 16px 20px; background: var(--light); border-bottom: 1px solid var(--light-border); }
.email-advanced-search .form-row:last-child { justify-content: flex-end; }
.email-advanced-search .btn-cancel,
.email-advanced-search .btn-add { flex: none; }

/* 휴지통 인라인 */
.email-trash-inline {
    display: flex; align-items: center; gap: 8px; margin-left: 10px;
    border-left: 1px solid var(--light-border); padding-left: 10px;
}
.email-trash-inline .text-muted { white-space: nowrap; }

/* 이메일 목록 */
.email-list {
    flex: 1;
    overflow-y: auto;
}

/* 이메일 페이지네이션 */
.email-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 16px;
    border-top: 1px solid var(--light-border);
    flex-shrink: 0;
}
.email-page-nav .page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--light-border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
}
.email-page-nav .page-btn:hover {
    background: var(--hover-bg);
    border-color: var(--text-secondary);
}
.email-page-nav .page-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
}
.email-page-nav .page-dots {
    padding: 0 4px;
    color: var(--text-secondary);
    font-size: 14px;
}
.email-page-nav .page-info {
    margin-left: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.email-select-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 15px;
    border-bottom: 1px solid var(--light-border);
    background: var(--light);
    font-size: 13px;
}

.email-select-bar .btn-sm,
.email-select-bar .btn-cancel {
    padding: 4px 12px;
    font-size: 15px;
    line-height: 1.4;
}

.email-select-all {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-secondary);
}

.email-select-all input[type="checkbox"],
.email-item-cb {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-primary, #4a7c59);
}

.email-row {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 42px;
    border-bottom: 1px solid var(--light-border);
    font-size: 15px;
    cursor: default;
    transition: background 0.15s;
}

.email-row:hover {
    background: var(--hover-bg);
}

.email-row.unread {
    font-weight: 600;
}

.email-row.unread .email-row-sender,
.email-row.unread .email-row-subject {
    color: var(--text-primary);
}

.email-row-star {
    width: 22px;
    text-align: center;
    cursor: pointer;
    color: var(--light-border);
    font-size: 20px;
    flex-shrink: 0;
}

.email-row-star.starred {
    color: #f0ad4e;
}

.email-row-star:hover {
    color: #f0ad4e;
}

.email-row-sender {
    width: 160px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 8px;
}

.email-row-attach {
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    opacity: 0.9;
}

.email-row-subject {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 8px;
}

.email-row-date {
    width: 140px;
    flex-shrink: 0;
    text-align: right;
    color: var(--text-secondary);
    font-size: 15px;
}

.email-item-cb {
    margin-right: 6px;
}

/* 이전 .email-item 호환 유지 */
.email-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background 0.15s;
}

.email-item:hover {
    background: var(--surface);
}

.email-item-unread {
    background: #1e3a5f;
}

.email-item-unread:hover {
    background: #243f65;
}

.email-item-unread .email-item-sender {
    font-weight: 700;
}

.email-item-unread .email-item-subject {
    font-weight: 600;
}

.email-item-star {
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    margin-right: 10px;
    margin-top: 2px;
    user-select: none;
}

.email-item-star:hover {
    color: #f1c40f;
}

.email-item-star.starred {
    color: #f1c40f;
}

.email-item-content {
    flex: 1;
    min-width: 0;
}

.email-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.email-item-sender {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 500;
}

.email-item-date {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 10px;
}

.email-item-subject {
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.email-item-preview {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-item-attachment {
    font-size: 16px;
    margin-left: 8px;
    margin-top: 2px;
}

/* 이메일 작성 패널 */
.email-compose-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.email-compose-panel .email-detail-header {
    flex-shrink: 0;
}
.email-compose-panel .email-detail-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
    flex-shrink: 1;
    min-width: 0;
}
.email-compose-panel .compose-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.compose-toolbar-btn {
    padding: 7px 18px;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--light-border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    box-sizing: border-box;
}
.compose-toolbar-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}
.compose-toolbar-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.compose-toolbar-btn-primary:hover {
    opacity: 0.9;
    color: #fff;
}
.email-compose-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.email-compose-body textarea {
    resize: none;
    min-height: 200px;
    overflow-y: hidden;
    box-sizing: border-box;
}
/* 작성 필드 수평 레이아웃 */
.compose-field-row {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    border-bottom: 1px solid var(--light-border);
    gap: 12px;
    min-height: 44px;
    box-sizing: border-box;
}
.compose-field-label {
    flex: 0 0 90px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.compose-field-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.compose-field-value > .compose-input-box {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    box-sizing: border-box;
}
.compose-field-value > input[type="text"],
.compose-field-value input[type="datetime-local"] {
    flex: 1;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text-primary);
}
.compose-field-value > input[type="text"]:focus,
.compose-field-value input[type="datetime-local"]:focus {
    border-color: var(--primary);
    outline: none;
}
.compose-field-value .btn-contact-inline,
.compose-field-value .btn-sm {
    height: 38px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    border-radius: 0;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
}
.compose-field-value .btn-contact-inline:hover,
.compose-field-value .btn-sm:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}
#composeSenderInfo {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 38px;
}
/* 본문 행: 나머지 공간 차지 */
.compose-body-row {
    flex: 1;
    align-items: stretch;
    border-bottom: none;
    min-height: 200px;
}
.compose-body-value {
    flex-direction: column;
    align-items: stretch;
}
.compose-body-value > #composeBody,
.compose-body-value > div:has(> .ql-container) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.compose-body-row .compose-field-label {
    align-self: flex-start;
    padding-top: 10px;
}

/* 작성 폼 확장 */
.compose-attachment-zone {
    border: 2px dashed var(--light-border); border-radius: 0; padding: 12px; min-height: 60px;
    transition: border-color 0.2s;
}
.compose-attachment-zone.drag-over { border-color: var(--primary); background: rgba(99,102,241,0.05); }
.compose-attachment-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.compose-attachment-hint { font-size: 16px; color: var(--text-muted); }
.compose-file-label { color: var(--primary); cursor: pointer; text-decoration: underline; }

/* 연락처 패널 */
.email-contacts-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.contacts-table-wrap { flex: 1; overflow: auto; width: 100%; }
.contacts-table { width: 100%; border-collapse: collapse; font-size: 16px; table-layout: fixed; }
.contacts-table th { background: var(--light); padding: 10px 12px; text-align: center; font-weight: 500; color: var(--text-muted); font-size: 16px; border-bottom: 2px solid var(--light-border); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.contacts-table td { padding: 10px 12px; border-bottom: 1px solid var(--light-border); color: var(--text-primary); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-table td:nth-child(5), .contacts-table td:nth-child(6) { text-align: center; }
.contacts-table tr:hover td { background: var(--hover-bg); }
.contacts-table td a { color: var(--primary); text-decoration: none; }
.contacts-table td a:hover { text-decoration: underline; }
.contacts-table td .btn-sm { padding: 2px 8px; font-size: 14px; }

/* 이메일 상세 패널 */
.email-detail-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.email-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--light-border);
    background: var(--light);
}

.btn-back {
    padding: 6px 15px;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}

.btn-back:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.email-detail-actions {
    display: flex;
    gap: 8px;
}

.btn-reply {
    padding: 6px 15px;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
}

.btn-reply:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-delete-email {
    padding: 6px 15px;
    background: var(--surface);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}

.btn-delete-email:hover {
    background: var(--danger);
    color: var(--text-heading);
}

.email-detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}

.email-detail-subject {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-border);
}

.email-detail-meta {
    margin-bottom: 20px;
    padding: 12px;
    background: var(--light);
    border-radius: 0;
}

.email-detail-from {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 16px;
}

.email-detail-from strong,
.email-detail-to strong,
.email-detail-cc strong {
    color: var(--text-secondary);
    min-width: 72px;
    display: inline-block;
}

.email-detail-email {
    font-size: 16px;
    color: var(--text-muted);
    margin-left: 5px;
}

.email-detail-to {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.email-detail-cc {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.email-detail-date {
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 16px;
}

.email-detail-attachments {
    margin-bottom: 15px;
    padding: 10px;
    background: #2a2520;
    border-radius: 0;
    font-size: 16px;
}

.attachment-chip {
    display: inline-block;
    background: var(--surface);
    padding: 3px 8px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
    margin: 2px 4px;
}

.email-detail-body {
    color: var(--text-primary);
    word-break: break-word;
}

/* 글로벌 리셋(*, table, td 등) 무효화 — 이메일 원본 HTML 스타일 보존 */
.email-detail-body * {
    font-size: inherit;
    line-height: inherit;
}

.email-detail-body table {
    width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.email-detail-body tr:hover {
    background: transparent;
}

.email-detail-body th,
.email-detail-body td {
    padding: 0;
    border: none;
    text-align: inherit;
    color: inherit;
    white-space: normal;
    background: transparent;
}

.email-detail-body img {
    max-width: 100%;
}

/* 첨부파일 디자인 */
.email-detail-attachments {
    margin-bottom: 16px;
    border: 1px solid var(--light-border);
    border-radius: 6px;
    overflow: hidden;
}

.attachment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--light);
    border-bottom: 1px solid var(--light-border);
    font-size: 14px;
}

.attachment-download-all {
    font-size: 13px;
    color: var(--color-primary, #4a7c59);
    cursor: pointer;
    margin-left: auto;
}

.attachment-download-all:hover {
    text-decoration: underline;
}

.attachment-list {
    padding: 4px 8px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.attachment-item:hover {
    background: var(--hover-bg);
}

.file-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 20px;
    padding: 0 4px;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.attachment-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-size {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.attachment-dl {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.attachment-preview {
    font-size: 13px;
    color: var(--color-primary, #4a7c59);
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
}

.attachment-preview:hover {
    text-decoration: underline;
    background: var(--hover-bg);
}

/* 메일 작성 수신자 태그 */
.compose-to-container {
    position: relative;
}

.compose-input-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    min-height: 42px;
    cursor: text;
    position: relative;
}

.compose-input-box:focus-within {
    border-color: var(--primary);
}

.compose-input-box input[type="text"] {
    flex: 1;
    min-width: 150px;
    border: none !important;
    padding: 4px 0 !important;
    outline: none !important;
    font-size: 16px;
    box-shadow: none !important;
    margin: 0 !important;
}

.compose-input-box .recipient-tag {
    margin: 2px 0;
}

.compose-to-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
    min-height: 0;
}

.recipient-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1e3a5f;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 16px;
}

.recipient-tag button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
}

.recipient-tag button:hover {
    color: var(--danger);
}

.compose-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1200;
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 1px solid var(--light-border);
}

.autocomplete-item:hover {
    background: var(--surface);
}

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

.autocomplete-item small {
    color: var(--text-muted);
}

/* 반응형 이메일 → mobile.css로 이동 */

/* ==================== A4 견적서 미리보기 ==================== */
.a4-container {
    background: #d0d0d0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.a4-page {
    width: 210mm;
    min-height: 297mm;
    background: #ffffff;
    color: #000000;
    padding: 15mm;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: 10pt;
    line-height: 1.4;
    box-sizing: border-box;
}

/* A4 페이지 내부 — 항상 인쇄 스타일 (흰 배경 + 검은 텍스트) */
.a4-page,
.a4-page * {
    color: #000000;
}

/* ==================== 설비 대장/PM/작업지시서 미리보기 (A4 eq-card-*) ==================== */
#eqPrintArea, #pmPrintArea, #woPrintArea, #qmsCertPrintArea { flex-direction: column !important; align-items: center !important; gap: 20px !important; }
#eqPreviewModal .modal-content, #pmPreviewModal .modal-content, #woPreviewModal .modal-content { overflow-y: auto !important; }
.pm-check-cell { width: 16px; height: 16px; border: 1.5px solid #333; display: inline-block; margin: 0 2px; vertical-align: middle; }
.eq-card-header { text-align: center; margin-bottom: 15px; }
.eq-card-header h1 { font-size: 24pt; font-weight: bold; letter-spacing: 10px; margin: 0; }
.eq-card-sub { font-size: 11pt; color: #666; margin-top: 4px; }
.eq-card-section { margin: 15px 0 6px 0; font-size: 13pt; font-weight: bold; border-bottom: 2px solid #333; padding-bottom: 3px; letter-spacing: 2px; }
.eq-card-info-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; table-layout: fixed; }
.eq-card-info-table th, .eq-card-info-table td { padding: 4px 10px; border: 1px solid #333; word-break: break-all; }
.a4-page .eq-card-info-table th { background: #f0f0f0; font-weight: normal; text-align: center; width: 110px; white-space: nowrap; font-size: 11pt; }
.a4-page .eq-card-info-table td { text-align: left; font-size: 11pt; }
.eq-card-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.eq-card-table th, .eq-card-table td { padding: 4px 6px; border: 1px solid #333; text-align: center; word-break: break-all; }
.a4-page .eq-card-table th { background: #f0f0f0; font-weight: 500; font-size: 11pt; }
.a4-page .eq-card-table td { font-size: 11pt; }
.eq-card-table .eq-empty { color: #999; font-size: 11pt; padding: 10px; text-align: center; }
.eq-card-notes { padding: 6px 10px; border: 1px solid #999; background: #fff; font-size: 11pt; white-space: pre-wrap; margin-top: 8px; }
.eq-card-footer { margin-top: 25px; text-align: center; font-size: 10pt; color: #777; }
/* 페이지 분리: 화면에서는 상단 여백, 인쇄/PDF에서는 새 페이지로 */
.a4-page.eq-page-break { margin-top: 24px; }
@media print {
    .a4-page.eq-page-break { page-break-before: always; break-before: page; margin-top: 0; }
    .eq-card-table, .eq-card-info-table { page-break-inside: avoid; break-inside: avoid; }
    .eq-card-section { page-break-after: avoid; break-after: avoid; }
}

.a4-page table {
    border-radius: 0 !important;
    overflow: visible;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #333;
}

.a4-page th,
.a4-page td {
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    border-color: #333;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}

.a4-page th {
    background: #f5f5f5;
    color: #000000;
    font-size: inherit;
    text-transform: none;
    border-bottom: 1px solid #333;
}

.a4-page tr:hover {
    background: inherit;
}

.a4-page input,
.a4-page textarea,
.a4-page select {
    background: #ffffff;
    color: #000000;
    border-color: #cccccc;
}

.a4-page a {
    color: #000000;
}

/* A4 가로 페이지 (택배 발송 리스트) */
.a4-page.a4-landscape {
    width: 297mm;
    min-height: 210mm;
    padding: 10mm 15mm;
}

.delivery-a4-title {
    text-align: center;
    margin: 0 0 3mm 0;
    font-size: 16pt;
    font-weight: bold;
}

.delivery-a4-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3mm;
    font-size: 9pt;
}

.a4-delivery-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8pt;
}

.a4-delivery-table th,
.a4-delivery-table td {
    border: 1.5px solid #000 !important;
    padding: 4px 3px !important;
    text-align: center;
    font-size: 8pt !important;
}

.a4-delivery-table th {
    background: #f0f0f0;
    font-weight: bold;
}

.a4-delivery-table tr {
    min-height: 28px;
}

.delivery-a4-notes {
    margin-top: 4mm;
    font-size: 9pt;
}

/* 견적서 헤더 */
.quotation-header {
    text-align: center;
    margin-bottom: 20px;
}

.quotation-header h1 {
    font-size: 28pt;
    font-weight: bold;
    letter-spacing: 15px;
    margin: 0;
    color: #000;
}

/* 공급자/공급받는자 통합 박스 (엑셀 양식 기반, 컴팩트) */
.quotation-parties {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.party-box {
    flex: 1;
    border: 1px solid #333;
    overflow: hidden;
    min-width: 0;
}

.party-box.client-box { flex: 0 0 40%; }
.party-box.supplier-box { flex: 1; }

.party-header {
    background: #e8e8e8;
    padding: 3px 8px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #333;
    font-size: 9pt;
    letter-spacing: 3px;
    color: #000;
}

.party-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: none;
    table-layout: fixed;
}

.party-table th,
.party-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 9pt;
    vertical-align: middle;
    background: none;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.party-table th {
    background: #fafafa;
    font-weight: normal;
    text-align: center;
}

.party-table td {
    text-align: left;
}

.party-table tr:last-child th,
.party-table tr:last-child td {
    border-bottom: none;
}

.party-table th:last-child,
.party-table td:last-child {
    border-right: none;
}

.supplier-table th { width: 72px; }

.stamp-cell {
    width: 56px;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid #333;
    padding: 0;
}

.stamp-cell img {
    display: block;
    margin: 0 auto;
    max-width: 48px;
    max-height: 48px;
}

.stamp-placeholder {
    color: #999;
    font-size: 11pt;
    text-align: center;
}

/* 1행에서 stamp-cell 바로 왼쪽 td는 border-right(#ccc)와 stamp-cell border-left(#333) 충돌로 시각적 끊김 발생 — 견적서·거래명세표 공통 */
.party-table tr:first-child td:nth-last-child(2) {
    border-right: none;
}

/* 금액 바 (단일 라인, "아래와 같이 견적합니다" 제거) */
.quotation-amount-bar {
    margin: 8px 0 10px 0;
}

.amount-bar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.amount-bar-table th,
.amount-bar-table td {
    padding: 7px 8px;
    border: 1px solid #333;
    font-size: 10pt;
}

.amount-bar-table th {
    background: #e8e8e8;
    font-weight: bold;
    text-align: center;
    letter-spacing: 4px;
    color: #000;
}

.amount-bar-table td.amount-number {
    font-size: 14pt;
    font-weight: bold;
    color: #c00;
    text-align: right;
    background: #ffffff;
}

.amount-bar-table td.amount-korean {
    font-size: 9.5pt;
    color: #333;
    text-align: left;
    background: #ffffff;
}

.amount-bar-table td.amount-vat {
    font-size: 9pt;
    color: #333;
    text-align: center;
    background: #fafafa;
}

.amount-meta-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: -1px;
}

.amount-meta-table th,
.amount-meta-table td {
    padding: 4px 8px;
    border: 1px solid #333;
    font-size: 9pt;
}

.amount-meta-table th {
    background: #fafafa;
    font-weight: normal;
    text-align: center;
    color: #333;
}

.amount-meta-table td {
    text-align: right;
    background: #ffffff;
    color: #333;
}

.quotation-number-display {
    margin-top: 4px;
    font-family: 'Courier New', monospace;
    font-size: 8pt;
    color: #999;
    text-align: left;
}

/* 장치 사양 섹션 (컴팩트) */
.quotation-equipment-section {
    margin: 8px 0;
    border: 1px solid #333;
}

.equipment-title {
    background: #e8e8e8;
    padding: 5px 8px;
    font-weight: bold;
    border-bottom: 1px solid #333;
    font-size: 11pt;
    color: #000;
}

.equipment-specs {
    padding: 6px 10px;
    font-size: 8.5pt;
    line-height: 1.4;
}

/* ==================== 거래명세표(TS) 호환 클래스 ==================== */
/* TS는 여전히 .quotation-amount-section / .amount-table / .amount-detail-table 사용 */
.quotation-amount-section {
    margin: 15px 0;
    text-align: center;
}

.amount-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    border-radius: 0;
    table-layout: fixed;
}

.amount-table th,
.amount-table td {
    padding: 10px;
    border: 1px solid #333;
    font-size: 14pt;
    font-weight: bold;
}

.amount-table th {
    width: 120px;
    background: #f0f0f0;
    color: #333;
}

.amount-table td {
    text-align: left;
    color: #c00;
    background: #ffffff;
    padding: 10px 15px;
}

.amount-table td .amount-number {
    font-size: 14pt;
    font-weight: bold;
    color: #c00;
}

.amount-detail-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0;
    table-layout: fixed;
}

.amount-detail-table th,
.amount-detail-table td {
    padding: 8px;
    border: 1px solid #333;
    font-size: 10pt;
    background: none;
    color: #333;
}

.amount-detail-table th {
    width: 80px;
    background: #f0f0f0;
    font-weight: normal;
}

.amount-detail-table td {
    text-align: right;
    background: #ffffff;
}

.equipment-specs img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.spec-section {
    font-weight: bold;
    margin: 6px 0 2px 0;
    color: #000;
    font-size: 9pt;
}

.spec-item {
    margin-left: 10px;
    color: #333;
}

.spec-line {
    margin-left: 4px;
}

/* 비고 블록 (조건 통합) */
.quotation-notes-block {
    margin: 10px 0 0 0;
    padding: 6px 10px;
    border: 1px solid #999;
    background: #ffffff;
}

.quotation-notes-block .notes-title {
    font-weight: bold;
    font-size: 9.5pt;
    margin-bottom: 3px;
    letter-spacing: 3px;
    color: #000;
}

.quotation-notes-block .notes-list,
.quotation-notes-block .notes-list li {
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
}

.quotation-notes-block .notes-list {
    margin: 0;
    padding-left: 16px;
    color: #333;
    list-style: decimal;
}

.quotation-notes-block .notes-list li {
    margin-bottom: 1px;
}

.quotation-notes-block .notes-list li.notes-free {
    list-style: none;
    margin-left: -18px;
    white-space: pre-wrap;
    color: #555;
    margin-top: 3px;
}

/* 품목 테이블 (미리보기용) */
.quotation-items-section {
    margin: 20px 0;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-radius: 0;
}

.items-table th,
.items-table td {
    padding: 6px 4px;
    border: 1px solid #333;
    font-size: 9pt;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: #ffffff;
}

.items-table th {
    background: #f0f0f0;
    font-weight: 500;
    color: #333;
}

.items-table td {
    color: #333;
}

/* 미리보기 테이블 컬럼 너비 고정 */
.items-table th:nth-child(1),
.items-table td:nth-child(1) {
    width: 6%;
}

/* No */

.items-table th:nth-child(2),
.items-table td:nth-child(2) {
    width: 28%;
    text-align: left;
    padding-left: 8px;
}

/* 품목명 */

.items-table th:nth-child(3),
.items-table td:nth-child(3) {
    width: 20%;
    text-align: left;
    padding-left: 8px;
}

/* 규격 */

.items-table th:nth-child(4),
.items-table td:nth-child(4) {
    width: 8%;
}

/* 단위 */

.items-table th:nth-child(5),
.items-table td:nth-child(5) {
    width: 8%;
}

/* 수량 */

.items-table th:nth-child(6),
.items-table td:nth-child(6) {
    width: 15%;
    text-align: right;
    padding-right: 8px;
}

/* 단가 */

.items-table th:nth-child(7),
.items-table td:nth-child(7) {
    width: 15%;
    text-align: right;
    padding-right: 8px;
}

/* 금액 */

/* 헤더(th)는 항상 가운데 정렬 — 위 nth-child 룰이 td/th 공통이라 th가 left/right로 끌려가는 것을 회복 */
.items-table th:nth-child(2),
.items-table th:nth-child(3),
.items-table th:nth-child(6),
.items-table th:nth-child(7) {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/* 긴 텍스트 줄바꿈 처리 */
.items-table td:nth-child(2),
.items-table td:nth-child(3) {
    word-break: break-all;
    line-height: 1.3;
}
/* 조건 테이블 */
.quotation-terms-section {
    margin: 20px 0;
}

.terms-table {
    width: 100%;
    border-collapse: collapse;
}

.terms-table th,
.terms-table td {
    padding: 6px 10px;
    border: 1px solid #333;
    font-size: 9pt;
    background: none;
    color: #333;
}

.terms-table th {
    width: 80px;
    background: #f0f0f0;
    font-weight: normal;
    text-align: center;
}

.terms-table td {
    background: #ffffff;
}

/* 비고 섹션 */
.quotation-notes-section {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fafafa;
}

.notes-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.notes-content {
    font-size: 9pt;
    color: #555;
    white-space: pre-wrap;
}

/* 푸터 */
.quotation-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 8pt;
    color: #777;
}

/* 반응형 → mobile.css로 이동 */

/* ==================== 인쇄 스타일 ==================== */

/* 인쇄용 오버레이 (화면에서는 숨김) */
#printOverlay {
    display: none;
}

@media print {

    /* 브라우저 머리글/바닥글 제거 */
    @page {
        margin: 0;
    }

    /* 화면의 모든 요소 숨김 */
    body>*:not(#printOverlay) {
        display: none !important;
    }

    /* 인쇄용 오버레이만 표시 */
    #printOverlay {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
    }

    /* A4 페이지 인쇄 설정 */
    .a4-container {
        background: #ffffff !important;
        padding: 0 !important;
    }

    .a4-page {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 15mm !important;
        width: 210mm !important;
        min-height: 297mm !important;
    }

    /* A4 가로 인쇄 - 모달과 동일한 값으로 portrait 기본값 오버라이드 */
    .a4-page.a4-landscape {
        width: 297mm !important;
        min-height: 210mm !important;
        padding: 10mm 15mm !important;
    }

    /* 인쇄 시 불필요한 요소 숨김 */
    .preview-actions {
        display: none !important;
    }

    /* 공급받는자/공급자 가로 배치 유지 */
    .quotation-parties {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
    }

    .party-box {
        flex: 1 !important;
    }
}

/* ==================== 거래처 탭 ==================== */
.client-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    background: var(--surface);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.client-tab {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid var(--light-border);
    background: var(--surface);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.client-tab:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.client-tab.active {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* ==================== 거래처 필터 바 ==================== */
.client-filter-bar {
    display: flex;
    gap: 15px;
    padding: 12px 15px;
    background: var(--surface);
    border-bottom: 1px solid var(--light-border);
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.client-filter-bar select {
    padding: 8px 12px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
}

.client-search {
    flex: 1;
}

.client-search input {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
}

/* ==================== 거래처 카테고리 그룹 ==================== */
.client-group {
    margin-bottom: 15px;
    background: var(--surface);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.client-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--dark);
    color: #bdc3c7;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.client-group-header:hover {
    background: var(--dark-soft);
}

.group-toggle {
    font-size: 16px;
    width: 15px;
    color: #bdc3c7;
}

.group-name {
    font-size: 16px;
    font-weight: 500;
    color: #bdc3c7;
}

.group-count {
    font-size: 16px;
    color: #bdc3c7;
}

.client-group-body {
    padding: 0;
}

.client-group-body table {
    border-radius: 0;
    box-shadow: none;
}

.clickable-name {
    color: #8399A8;
    cursor: pointer;
    font-weight: 500;
}

.clickable-name:hover {
    color: #90caf9;
    text-decoration: underline;
}

.contact-more {
    font-size: 16px;
    color: var(--text-muted);
    margin-left: 3px;
}

/* ==================== 담당자 카드 ==================== */
.contact-card {
    border: 1px solid var(--light-border);
    border-radius: 0;
    padding: 15px;
    margin-bottom: 10px;
    background: var(--surface);
}

.contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--light-border);
    font-weight: 500;
    color: var(--text-primary);
}

/* ==================== 라디오 그룹 ==================== */
.radio-group {
    display: flex;
    gap: 20px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 4px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-primary);
}

.radio-label input[type="radio"],
.radio-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--primary);
}

/* ==================== 토글 스위치 (모달 폼용) ==================== */
label.obt-toggle,
.form-group label.obt-toggle {
    display: flex !important; align-items: center; gap: 12px; cursor: pointer;
    padding: 5px 14px; border-radius: 8px; border: 1px solid var(--light-border);
    background: var(--surface); transition: all 0.2s; user-select: none;
    margin-bottom: 0;
}
label.obt-toggle:hover,
.form-group label.obt-toggle:hover { background: var(--hover-bg); border-color: var(--primary); }
label.obt-toggle input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
label.obt-toggle .obt-toggle-track {
    position: relative; width: 44px; min-width: 44px; height: 24px; border-radius: 12px;
    background: #888; transition: background 0.25s;
}
label.obt-toggle .obt-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
label.obt-toggle input:checked + .obt-toggle-track {
    background: var(--primary, #4a90e2);
}
label.obt-toggle input:checked + .obt-toggle-track::after {
    transform: translateX(20px);
}
label.obt-toggle .obt-toggle-label {
    font-size: 14px; font-weight: 400; color: var(--text-primary); line-height: 1.4;
    white-space: nowrap;
}
label.obt-toggle .obt-toggle-desc {
    font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 2px;
}

/* ==================== 인라인 선택 패널 ==================== */
.inline-picker {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--light-border);
    border-radius: 6px;
    background: var(--background);
}

/* ==================== 선택 모달 공통 ==================== */
.selector-item {
    padding: 9px 15px;
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}
.selector-item:hover {
    background: var(--surface) !important;
}
.selector-item:active {
    background: var(--hover-bg) !important;
}
.selector-item .client-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}
.selector-item .client-ceo {
    color: var(--text-secondary);
    font-size: 16px;
    margin-left: 4px;
}
.selector-item .client-contact {
    color: var(--text-secondary);
    font-size: 16px;
    white-space: nowrap;
}
.trade-badge {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}
.trade-badge.sales {
    background: transparent;
    color: #5dade2;
}
.trade-badge.purchase {
    background: transparent;
    color: #f0a050;
}
.trade-badge.both {
    background: transparent;
    color: var(--text-muted);
}
/* 거래처 자동완성 드롭다운 (Utils.ClientSelector.attachAutocomplete) */
.client-autocomplete-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}
.client-autocomplete-wrapper > input {
    flex: 1;
}
.client-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-top: none;
    z-index: 1500;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.client-autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--light-border);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.4;
}
.client-autocomplete-item:last-child { border-bottom: none; }
.client-autocomplete-item:hover,
.client-autocomplete-item.active {
    background: var(--bg-hover);
}
.client-autocomplete-item .ac-name { font-weight: 600; }
.client-autocomplete-item .ac-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 6px;
}
.client-autocomplete-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.selector-category-header {
    padding: 7px 12px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ==================== 모달 버튼 고정 (sticky) ==================== */

/* 견적서 작성 모달 - 하단 버튼 고정 */
.modal-buttons-sticky {
    position: sticky;
    bottom: -30px;
    margin: 20px -30px -30px -30px;
    padding: 15px 30px;
    background: var(--dark-soft);
    border-top: 1px solid var(--light-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.modal-buttons-sticky > button {
    flex: 1;
}

/* 미리보기 모달 - 하단 버튼 고정 (sticky bottom:0 — 뷰포트 밖으로 절대 안 밀림) */
.preview-actions-sticky {
    position: sticky;
    bottom: 0;
    margin: 20px -20px -20px -20px;
    padding: 12px 20px;
    background: var(--dark-soft);
    border-top: 1px solid var(--light-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

/* 미리보기 버튼 균등 배치 */
.preview-actions-sticky button {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

/* 인쇄 시 sticky 버튼 숨김 */
@media print {
    .preview-actions-sticky {
        display: none !important;
    }

    .modal-buttons-sticky {
        display: none !important;
    }
}

/* ==================== 상세 페이지 헤더 SSOT (프로토콜 #88) ==================== */
.detail-page-header {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    background: transparent;
    margin-top: 15px;   /* .tab-menu 동일 간격 */
}
.detail-page-header > h3 {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
}
.detail-page-header > button,
.detail-page-header > .status-badge {
    padding: 3px 10px;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
}

/* ==================== 공지사항 (42차) ==================== */
.notice-attach-dropzone {
    border: 2px dashed var(--light-border);
    background: var(--bg-secondary);
    padding: 18px;
    text-align: center;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
}
.notice-attach-dropzone.drag-over {
    border-color: var(--primary);
    background: var(--hover-bg);
}
.notice-attach-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 14px;
}
/* 노티스 헤더 배지 통일 — 카테고리/중요도/상태 모두 동일 폭·패딩 (#59 표준) */
.importance-badge,
#noticeViewCatBadge .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    min-width: 56px;
    text-align: center;
}
.importance-normal {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
}
.importance-important {
    background: var(--status-warning);
    color: #ffffff;
}
.importance-critical {
    background: var(--status-error);
    color: #ffffff;
}
.notice-target-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 14px;
    font-size: 14px;
    gap: 6px;
}
.notice-target-chip .chip-x {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.notice-target-chip .chip-x:hover {
    color: var(--status-error);
}
.notice-reaction-btn {
    padding: 6px 14px;
    border: 1px solid var(--light-border);
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 18px;
    cursor: pointer;
    font-size: 14px;
}
.notice-reaction-btn:hover {
    background: var(--hover-bg);
}
.notice-reaction-btn.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}
.notice-comment {
    padding: 12px 0;
    border-bottom: 1px solid var(--light-border);
}
.notice-comment-reply {
    margin-left: 32px;
    border-left: 2px solid var(--light-border);
    padding-left: 12px;
}
.notice-comment-body {
    color: var(--text-primary);
    line-height: 1.6;
}

/* 카테고리 색상 팔레트 */
.cat-color-palette {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0;
}
.cat-color-swatch {
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; border: 3px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cat-color-swatch:hover { transform: scale(1.1); }
.cat-color-swatch.selected { border-color: var(--text-primary); transform: scale(1.1); }
.cat-color-preview {
    display: inline-block; width: 22px; height: 22px;
    border-radius: 50%; vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.cat-row-actions { display: flex; gap: 4px; justify-content: center; align-items: center; }
.cat-row-actions .btn-sm { padding: 4px 10px; font-size: 13px; }
.cat-arrow-btn {
    background: var(--surface); border: 1px solid var(--light-border);
    color: var(--text-primary); width: 28px; height: 28px;
    border-radius: 4px; cursor: pointer;
}
.cat-arrow-btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--primary); }
.cat-arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ==================== 이메일 연락처 탭 & 자동완성 개선 ==================== */

/* 연락처 필터 탭 바 */
.contact-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.contact-tab-btn {
    padding: 4px 12px;
    border: 1px solid var(--light-border);
    background: var(--light);
    border-radius: 0;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.contact-tab-btn:hover {
    background: var(--hover-bg);
}

.contact-tab-btn.active {
    background: var(--primary);
    color: var(--text-heading);
    border-color: var(--primary);
}

/* 자동완성 드롭다운 (기존 .compose-autocomplete 확장) */
.compose-autocomplete {
    max-height: 320px;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 자동완성 그룹 헤더 */
.autocomplete-group-header {
    padding: 6px 12px;
    background: var(--surface);
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--light-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 타입 뱃지 (사내/매출처/매입처) */
.contact-type-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--text-heading);
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
}

/* 자동완성 아이템 레이아웃 확장 */
.autocomplete-item-main {
    font-size: 16px;
    line-height: 1.4;
}

.autocomplete-item-main strong {
    color: var(--text-primary);
}

.autocomplete-position {
    color: var(--text-muted);
    font-size: 16px;
    margin-left: 2px;
}

.autocomplete-company {
    color: var(--primary-hover);
    font-size: 16px;
    font-weight: 500;
    margin-left: 4px;
}

.autocomplete-company::before {
    content: "·";
    margin-right: 4px;
    color: var(--text-muted);
}

.autocomplete-dept {
    color: #8399A8;
    font-size: 16px;
    margin-left: 4px;
}

.autocomplete-dept::before {
    content: "·";
    margin-right: 4px;
    color: var(--text-muted);
}

.autocomplete-item-email {
    font-size: 16px;
    color: #aaa;
    margin-top: 1px;
}

.autocomplete-item-sub {
    font-size: 16px;
    color: #aaa;
    margin-top: 1px;
}

.autocomplete-empty {
    padding: 12px;
    text-align: center;
    color: #aaa;
    font-size: 16px;
}

/* 수신자 태그 타입별 색상 (기존 .recipient-tag 유지, 타입별 추가) */
.recipient-tag-internal {
    background: #1e3a5f;
    color: #8399A8;
}

.recipient-tag-sales_client {
    background: #1a3a2a;
    color: #69f0ae;
}

.recipient-tag-purchase_client {
    background: #2a2518;
    color: #f0a050;
}

/* 태그 내 타입 점 표시 */
.tag-type-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 태그 삭제 버튼 (기존 .recipient-tag button과 공존) */
.tag-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    color: var(--text-muted);
}

.tag-remove-btn:hover {
    color: var(--danger);
}

/* ==================== 연락처 선택 모달 & 버튼 ==================== */

.btn-contact-inline {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    padding: 5px 10px;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
}

.btn-contact-inline:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.contact-selector-item {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background 0.1s;
    gap: 10px;
}

.contact-selector-item:hover {
    background: var(--surface);
}

.contact-selector-item:last-child {
    border-bottom: none;
}

.contact-selector-added {
    background: #1a2a1e;
}

.contact-selector-added:hover {
    background: #1e3520;
}

.contact-selector-action {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.contact-add-btn {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 700;
}

.contact-added-check {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 700;
}

.contact-selector-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.cs-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.cs-org {
    font-size: 16px;
    color: var(--primary-dark);
    white-space: nowrap;
}

.cs-email {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== 발주서 A4 미리보기 ==================== */

.po-page {
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: #000;
}

/* 상단 .po-top-header 폐기 (v7) — 회사명을 .po-title-left로 이동 */
.po-top-header { display: none; }

.po-company-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12pt;
    font-weight: bold;
    color: #333;
}

.po-company-logo img {
    height: 30px;
}

/* === 결재 박스 (도장 위 / 이름 아래) — 제목 줄 우측 + 발주처 테두리와 만남 + 시각적 2px 하향 === */
.po-approval-wrap { border: 0; width: 200px; flex-shrink: 0; align-self: flex-end; position: relative; top: 1px; }
.po-approval-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    box-shadow: none;
}
.po-approval-table th {
    padding: 1px 2px;
    background: #f0f0f0;
    font-weight: bold;
    text-align: center;
    font-size: 7pt;
    color: #000;
    border: 1px solid #000;
    white-space: nowrap;
    line-height: 1.2;
}
.po-approval-table td {
    padding: 2px;
    border: 1px solid #000;
    text-align: center;
    height: 56px;
    font-size: 7pt;
    color: #000;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.po-approval-table tr:last-child td { border-bottom: 0; }  /* info-box 1.5px top border와 겹침 해소 */
.po-approval-table .stamp-img { width: 30px; height: 30px; object-fit: contain; display: block; margin: 0 auto; }
.po-approval-stamp { display: flex; align-items: center; justify-content: center; height: 32px; }
.po-approval-ink { color: #c00; font-weight: bold; font-size: 7pt; }
.po-approval-name { font-size: 7pt; color: #333; margin-top: 1px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-approval-x { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }

/* 회사명(좌상단) + 제목(중앙) + 결재박스(우, 발주처 테두리와 만남) — 통합 한 줄 */
.po-title-section {
    display: flex;
    align-items: stretch;
    margin: 8px 0 0;
    padding: 0;
    border: none;
}
.po-title-left {
    width: 200px;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 2px;
}
.po-title-center {
    flex: 1;
    text-align: center;
    align-self: center;
}
.po-title-spacer { display: none; }

.po-title-section h1 {
    font-size: 24pt;
    font-weight: bold;
    letter-spacing: 20px;
    margin: 0;
    color: #000;
}

.po-title-sub {
    font-size: 9pt;
    color: #666;
    margin-top: 2px;
}

/* 발주처 / 수신처 정보 박스 */
.po-info-box {
    border: 1.5px solid #000;
    margin-bottom: 10px;
    overflow: hidden;
}

.po-info-header {
    background: #e8e8e8;
    padding: 5px 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1.5px solid #000;
    font-size: 10pt;
    letter-spacing: 8px;
}

.po-info-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: none;
    table-layout: fixed;
}

.po-info-table th,
.po-info-table td {
    padding: 5px 10px;
    font-size: 9pt;
    border-bottom: 1px solid #ddd;
    background: #ffffff;
    color: #000;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
}

.po-info-table th {
    width: 110px;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    background: #fafafa;
}

.po-info-table tr:last-child th,
.po-info-table tr:last-child td {
    border-bottom: none;
}

/* 조건 테이블 */
.po-condition-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    box-shadow: none;
    table-layout: fixed;
}

.po-condition-table th,
.po-condition-table td {
    padding: 6px 10px;
    border: 1.5px solid #000;
    font-size: 9pt;
    background: #ffffff;
    color: #000;
}

.po-cond-header {
    background: #e8e8e8 !important;
    font-weight: bold;
    text-align: center;
    width: 110px;
    white-space: nowrap;
}

/* 발주 내용 */
.po-items-section {
    margin-bottom: 10px;
}

.po-items-title {
    background: #e8e8e8;
    padding: 6px 10px;
    font-weight: bold;
    text-align: center;
    border: 1.5px solid #000;
    border-bottom: none;
    font-size: 10pt;
    letter-spacing: 8px;
}

.po-items-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: none;
}

.po-items-table th,
.po-items-table td {
    padding: 6px 8px;
    border: 1.5px solid #000;
    font-size: 9pt;
    text-align: center;
    background: #ffffff;
    color: #000;
    vertical-align: middle;
}

.po-items-table th {
    background: #f0f0f0;
    font-weight: bold;
}

.po-items-table thead {
    border: 1.5px solid #000;
}

/* 합계 테이블 */
.po-total-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    box-shadow: none;
}

.po-total-table th,
.po-total-table td {
    padding: 8px 12px;
    border: 1.5px solid #000;
    font-size: 10pt;
    background: #ffffff;
    color: #000;
}

.po-total-table th {
    background: #e8e8e8;
    font-weight: bold;
    text-align: center;
    width: 110px;
    letter-spacing: 3px;
}

.po-total-table td.po-total-amount {
    text-align: right;
    font-weight: bold;
    font-size: 16pt;
    color: #c00 !important;
}

/* 하단 정보 */
.po-footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 8pt;
    color: #666;
}

.po-number-display {
    font-family: 'Courier New', monospace;
    font-size: 8pt;
    color: #999;
}

.po-footer-note {
    font-size: 8pt;
    color: #666;
}

/* 제출문 */
.po-submit-text {
    text-align: center;
    font-size: 11pt;
    margin: 25px 0 20px 0;
    font-weight: 500;
}

/* 날짜 */
.po-date-line {
    text-align: center;
    font-size: 11pt;
    margin-bottom: 25px;
}

/* 발주자 */
.po-orderer-line {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    font-size: 12pt;
    font-weight: 500;
    padding-right: 30px;
}

.po-stamp-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    color: #c00;
    font-size: 10pt;
    font-weight: bold;
}

/* ==================== 인쇄 시 발주서 ==================== */
@media print {
    .po-top-header {
        display: flex !important;
    }

    .po-page {
        padding: 12mm !important;
    }

    .po-approval-table th,
    .po-approval-table td {
        border: 1px solid #000 !important;
    }

    .po-items-table th,
    .po-items-table td {
        border: 1px solid #000 !important;
    }

    .po-total-table th,
    .po-total-table td {
        border: 1.5px solid #000 !important;
    }

    /* 도장 이미지 인쇄 시 표시 */
    .stamp-image,
    .stamp-cell img,
    .po-stamp-area img {
        display: inline-block !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ==================== 결재 시스템 ==================== */
#approvalPendingSection td,
#approvalMyRequestsSection td {
    text-align: center;
}

.status-rejected {
    background: transparent !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
}

.status-cancelled {
    background: transparent !important;
    border: 1px solid var(--muted) !important;
    color: var(--text-secondary) !important;
}

/* ==================== 결재 처리 2분할 레이아웃 ==================== */
.modal-content.modal-approval-fullscreen {
    width: 1400px;
    max-width: none;
    height: 85vh;
    max-height: 85vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-approval-fullscreen .modal-header {
    padding: 15px 25px;
    margin: 0;
    border-bottom: 2px solid var(--primary);
    flex-shrink: 0;
}

.approval-split-container {
    display: flex;
    width: 100%;
    flex: 1;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* 왼쪽: 문서 미리보기 영역 */
.approval-split-left {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: #d0d0d0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.approval-split-left .a4-container {
    background: transparent;
    padding: 0;
}

.approval-split-left .a4-page {
    transform-origin: top center;
}

/* 오른쪽: 결재 처리 패널 */
.approval-split-right {
    width: 500px;
    min-width: 500px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--surface);
    border-left: 2px solid var(--light-border);
    padding: 25px;
    display: flex;
    flex-direction: column;
}

/* 결재 패널 내부 버튼 영역 */
.approval-panel-buttons {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--light-border);
    flex-shrink: 0;
}

.approval-panel-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

/* 문서 로딩 표시 */
.approval-doc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210mm;
    min-height: 297mm;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ==================== 결재 노드타입 뱃지 ==================== */
.node-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    font-size: inherit;
    font-weight: normal;
    line-height: 1.4;
    border: 1px solid var(--light-border);
}

.node-badge-approve {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
}

.node-badge-cooperate {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--accent);
}

.node-badge-review {
    background: var(--surface);
    color: var(--muted);
    border-color: var(--muted);
}

.node-badge-notify {
    background: var(--surface);
    color: var(--text-secondary);
    border-color: var(--light-border);
}

/* ==================== 결재선 그룹 섹션 ==================== */
.approval-group-section {
    border: 1px solid var(--light-border);
    border-radius: 0;
    margin-bottom: 12px;
    overflow: hidden;
}

.approval-group-header {
    background: var(--light);
    padding: 10px 15px;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid var(--light-border);
}

.approval-group-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 16px;
}

.approval-group-section table {
    margin: 0;
    border-radius: 0;
}

.approval-group-section table th,
.approval-group-section table td {
    font-size: 16px;
}

/* 결재선 출처 카드 (저장된 결재선 / 전결규정) */
.approval-source-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 5px;
    align-items: stretch;
}

.approval-source-card {
    border: 1px solid var(--light-border);
    background: var(--surface);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.approval-source-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-heading);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--light-border);
    letter-spacing: 0.2px;
}

.approval-source-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.approval-source-card-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.approval-source-select {
    flex: 1;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    background: var(--background);
    color: var(--text-primary);
    font-size: 16px;
}

.approval-source-action,
.approval-source-save,
.approval-source-suggest {
    height: 36px;
    padding: 0 14px;
    font-size: 16px;
    line-height: 36px;
    white-space: nowrap;
    box-sizing: border-box;
}

.approval-source-save,
.approval-source-suggest {
    width: 100%;
    padding: 0;
}

.approval-source-card-hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: auto;
    padding-top: 4px;
}

.approval-group-add-btn {
    float: right;
    padding: 4px 12px;
    font-size: 16px;
}

.approval-group-empty-clickable {
    display: block;
    width: 100%;
    border: 1px dashed var(--light-border);
    background: transparent;
    color: var(--text-muted);
    padding: 20px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.approval-group-empty-clickable:hover,
.approval-group-empty-clickable:focus-visible {
    background: var(--light);
    color: var(--text-heading);
    border-color: var(--accent);
    outline: none;
}

.approver-selector-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 대결함/참조함 */
#approvalActingSection td,
#approvalReferencesSection td {
    text-align: center;
}

/* ==================== 조직 관리 ==================== */

/* 탭 메뉴 */
.tab-menu {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--primary);
    margin-top: 15px;
}

.tab-btn {
    padding: 12px 25px;
    border: 1px solid var(--light-border);
    border-bottom: none;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    border-radius: 0;
    transition: all 0.2s;
}

.tab-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--light-border);
}

/* 서브탭 (생산관리 등 탭 내 탭) — 메인 .tab-menu와 동일한 primary underline 패턴 */
.sub-tab-menu {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--primary);
    margin: 15px 0 0 0;
}

.sub-tab-btn {
    padding: 8px 18px;
    border: 1px solid var(--light-border);
    border-bottom: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    border-radius: 0;
    transition: all 0.2s;
}

.sub-tab-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.sub-tab-btn.active {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--light-border);
}

.sub-tab-content {
    padding: 15px 0;
}

/* 간트 코팅 행 */
.gantt-coating-row {
    background: rgba(230, 126, 34, 0.05);
}

/* 조직관리 사용자 테이블 */
#usersTableWrap { border: 1px solid var(--light-border); border-radius: 0; overflow-x: auto; }
#usersTable { background: var(--surface); border: none; box-shadow: none; border-radius: 0; }
#usersTable th, #usersTable td { background: var(--surface); border: 1px solid var(--light-border); text-align: center; vertical-align: middle; font-size: 16px; padding: 10px; }
#usersTable th { font-size: 16px; font-weight: 600; }
#usersTable td select { font-size: 16px; padding: 4px 6px; margin: 0 auto; display: block; text-align: center; }

/* 부서 리스트 sidebar 컨테이너 */
.dept-list-wrap {
    max-width: 320px;
}
.dept-list {
    border: 1px solid var(--light-border);
    border-radius: 0;
    overflow: hidden;
    background: var(--surface);
}

.dept-item {
    padding: 12px 15px;
    border-bottom: 1px solid #555;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

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

.dept-item:hover {
    background: var(--hover-bg);
}

.dept-item.active {
    background: var(--primary);
    color: var(--text-heading);
}

.dept-item.active .btn-sm {
    color: var(--text-heading);
    border-color: var(--light-border);
}

/* 소형 버튼 */
.btn-sm {
    padding: 3px 8px;
    font-size: 16px;
    border: 1px solid var(--light-border);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: 0;
    cursor: pointer;
}

.btn-sm:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-sm.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-sm.btn-danger:hover {
    background: var(--danger);
    color: var(--text-heading);
}

/* ==================== 기안서 A4 스타일 ==================== */
.draft-page {
    padding: 30px 40px;
    font-size: 10pt;
}

.draft-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 10pt;
    table-layout: fixed;
}

.draft-info-table th {
    width: 110px;
    padding: 8px 10px;
    border: 1px solid #333;
    background: #f0f0f0;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color: #000;
}

.draft-info-table td {
    width: auto;
    padding: 8px 10px;
    border: 1px solid #333;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
}

.draft-body-section {
    border: 1px solid #333;
    border-top: none;
    min-height: 400px;
}

.draft-body-header {
    padding: 8px 10px;
    background: #f0f0f0;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #333;
    font-size: 10pt;
    letter-spacing: 10px;
    color: #000;
}

.draft-body-content {
    padding: 20px;
    font-size: 16px;
    line-height: 1.8;
    min-height: 350px;
    color: #000;
}

.draft-body-content * {
    color: #000 !important;
}

.draft-body-content p {
    margin-bottom: 8px;
}

.draft-body-content ul,
.draft-body-content ol {
    padding-left: 20px;
    margin-bottom: 8px;
}

/* Quill 에디터 오버라이드 */
/* Quill.js 다크 테마 오버라이드 (전역) */
.ql-toolbar.ql-snow {
    background: var(--surface);
    border-color: var(--light-border);
}

.ql-container.ql-snow {
    border-color: var(--light-border);
    background: var(--surface);
}

.ql-snow .ql-stroke {
    stroke: var(--text-secondary) !important;
}

.ql-snow .ql-fill {
    fill: var(--text-secondary) !important;
}

.ql-snow .ql-picker-label {
    color: var(--text-secondary) !important;
}

.ql-snow .ql-picker-options {
    background: var(--dark-soft) !important;
    border-color: var(--light-border) !important;
}

.ql-snow .ql-picker-item {
    color: var(--text-primary) !important;
}

.ql-snow .ql-picker-item:hover {
    background: var(--light) !important;
}

.ql-editor {
    color: var(--text-primary);
}

.ql-editor.ql-blank::before {
    color: var(--text-muted) !important;
    font-style: italic;
}

.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--accent) !important;
}

.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: var(--accent) !important;
}

.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active {
    color: var(--accent) !important;
}

.ql-snow .ql-tooltip {
    background: var(--dark-soft) !important;
    border-color: var(--light-border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.ql-snow .ql-tooltip input[type="text"] {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--light-border) !important;
}

.ql-snow .ql-tooltip a {
    color: var(--primary-hover) !important;
}

#draftEditorContainer .ql-editor {
    min-height: 300px;
    font-size: 16px;
    line-height: 1.8;
}

#draftEditorContainer .ql-toolbar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#draftEditorContainer .ql-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 장치 사양 Quill 에디터 */
#equipmentSpecsEditorContainer .ql-editor {
    min-height: 300px;
    font-size: 16px;
    line-height: 1.6;
}

#equipmentSpecsEditorContainer .ql-editor img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 8px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* 이미지 플로팅 레이어 & 오버레이 */
.specs-editor-wrapper {
    position: relative;
}
.specs-img-layer {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.specs-floating-img {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 0;
}
.specs-img-overlay {
    z-index: 3 !important;
}
.specs-resize-handle {
    transition: background 0.15s, transform 0.15s;
}
.specs-resize-handle:hover {
    background: var(--accent, #FF9800) !important;
    transform: scale(1.3);
}

#equipmentSpecsEditorContainer .ql-toolbar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#equipmentSpecsEditorContainer .ql-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 이메일 작성 Quill 에디터 */
.email-editor-wrapper {
    position: relative;
}
#composeBody {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#composeBody .ql-editor {
    min-height: 200px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.7;
}
#composeBody .ql-editor img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    cursor: pointer;
}
#composeBody .ql-toolbar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    flex-shrink: 0;
}
#composeBody .ql-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}
/* 이메일 이미지 리사이즈 오버레이 */
.email-img-overlay {
    position: absolute;
    border: 2px solid #2196F3;
    z-index: 3;
    box-sizing: border-box;
    pointer-events: auto;
}
.email-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #2196F3;
    border: 2px solid #fff;
    border-radius: 2px;
    z-index: 4;
}
.email-resize-handle:hover {
    background: var(--accent, #FF9800) !important;
    transform: scale(1.3);
}
.email-img-delete-btn {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 26px;
    height: 26px;
    background: var(--status-error);
    color: #fff;
    border-radius: 50%;
    font-size: 17px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    z-index: 5;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ==================== 거래명세표 A4 스타일 (items-table 8열) ==================== */

/* 거래명세표 8열 - th는 항상 중앙정렬 */
.items-table.ts-8col th {
    text-align: center;
}

/* 거래명세표 8열 컬럼 너비 + td 정렬 */
.items-table.ts-8col th:nth-child(1),
.items-table.ts-8col td:nth-child(1) { width: 5%; }           /* NO */
.items-table.ts-8col td:nth-child(1) { text-align: center; }

.items-table.ts-8col th:nth-child(2),
.items-table.ts-8col td:nth-child(2) { width: 25%; }          /* 품명 */
.items-table.ts-8col td:nth-child(2) { text-align: left; padding-left: 8px; }

.items-table.ts-8col th:nth-child(3),
.items-table.ts-8col td:nth-child(3) { width: 17%; }          /* 규격 */
.items-table.ts-8col td:nth-child(3) { text-align: left; padding-left: 8px; }

.items-table.ts-8col th:nth-child(4),
.items-table.ts-8col td:nth-child(4) { width: 7%; }           /* 단위 */
.items-table.ts-8col td:nth-child(4) { text-align: center; }

.items-table.ts-8col th:nth-child(5),
.items-table.ts-8col td:nth-child(5) { width: 8%; }           /* 수량 */
.items-table.ts-8col td:nth-child(5) { text-align: right; padding-right: 8px; }

.items-table.ts-8col th:nth-child(6),
.items-table.ts-8col td:nth-child(6) { width: 14%; }          /* 단가 */
.items-table.ts-8col td:nth-child(6) { text-align: right; padding-right: 8px; }

.items-table.ts-8col th:nth-child(7),
.items-table.ts-8col td:nth-child(7) { width: 14%; }          /* 공급가액 */
.items-table.ts-8col td:nth-child(7) { text-align: right; padding-right: 8px; }

.items-table.ts-8col th:nth-child(8),
.items-table.ts-8col td:nth-child(8) { width: 10%; }          /* 세액 */
.items-table.ts-8col td:nth-child(8) { text-align: right; padding-right: 8px; }

/* 합계 행 */
.items-table .ts-total-row {
    background: #e0e0e0 !important;
}

.items-table .ts-total-row td {
    font-weight: bold;
    padding: 6px 4px;
}


/* ============================================================
   사내 메신저 스타일 (디자인 시스템 준수)
   ============================================================ */

.messenger-container {
    display: flex;
    height: calc(100vh - 120px);
    background: var(--light);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--light-border);
    box-shadow: none;
}

/* --- 좌측 사이드바 --- */
.messenger-sidebar {
    width: 320px;
    min-width: 320px;
    background: var(--surface);
    border-right: 1px solid var(--light-border);
    display: flex;
    flex-direction: column;
}

.messenger-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--light-border);
}

.messenger-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.messenger-sidebar-header .btn-add {
    padding: 0.25rem 0.5rem;
    font-size: 16px;
}

.messenger-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--light-border);
}

.messenger-search input {
    width: 100%;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
    outline: none;
    background: var(--surface);
    color: var(--text-primary);
    box-sizing: border-box;
}

.messenger-search input:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 0.25rem rgba(32,107,196,0.25);
}

.messenger-room-list {
    flex: 1;
    overflow-y: auto;
}

.messenger-room-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--light-border);
    transition: background 0.15s;
}

.messenger-room-item:hover {
    background: var(--light);
}

.messenger-room-item.active {
    background: #1a2a4a;
    border-left: 3px solid var(--primary);
}

.messenger-room-item.pinned {
    background: #1e1d1a;
}

.messenger-room-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hover-bg);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
    border: 1.5px solid var(--light-border);
}

.messenger-room-avatar.group {
    background: var(--hover-bg);
    color: var(--accent);
    border-radius: 0;
}

.messenger-room-avatar .online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2fb344;
    border: 2px solid var(--surface);
}

.messenger-room-info {
    flex: 1;
    min-width: 0;
}

.messenger-room-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.messenger-room-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger-room-time {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 8px;
}

.messenger-room-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.messenger-room-preview {
    font-size: 16px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.messenger-room-badge {
    background: var(--danger);
    color: var(--text-heading);
    font-size: 12px;
    font-weight: normal;
    padding: 2px 7px;
    border-radius: 0;
    margin-left: 8px;
    flex-shrink: 0;
}

.messenger-room-muted {
    opacity: 0.5;
}

.messenger-pin-icon {
    font-size: 16px;
    margin-left: 4px;
    color: var(--text-muted);
}

/* --- 우측 채팅 영역 --- */
.messenger-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.messenger-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.messenger-empty-icon {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.5;
    font-weight: 600;
}

.messenger-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.messenger-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--light-border);
    background: var(--surface);
}

.messenger-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.messenger-back-btn {
    display: none;
    font-size: 18px;
    padding: 4px 8px;
}

#messenger-chat-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.messenger-member-count {
    font-size: 16px;
    color: var(--text-secondary);
}

.messenger-chat-actions {
    display: flex;
    gap: 4px;
}

.messenger-chat-actions .btn-sm {
    padding: 0.4375rem 0.75rem;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
}

.messenger-meeting-btn {
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--light-border) !important;
    font-weight: 500;
}
.messenger-meeting-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    opacity: 1;
}

.messenger-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--light-border);
    background: var(--light);
}

.messenger-search-bar input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 16px;
}

/* 메시지 영역 */
.messenger-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--light);
}

.messenger-date-separator {
    text-align: center;
    margin: 16px 0;
    position: relative;
}

.messenger-date-separator span {
    background: var(--light);
    padding: 4px 16px;
    font-size: 16px;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

.messenger-date-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--light-border);
}

/* 메시지 버블 */
.messenger-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 70%;
    margin-bottom: 2px;
}

.messenger-msg.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.messenger-msg.other {
    align-self: flex-start;
    align-items: center;
}

.messenger-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--muted);
    color: var(--text-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.messenger-msg-avatar.hidden {
    visibility: hidden;
}

.messenger-msg-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.messenger-msg.mine .messenger-msg-content {
    align-items: flex-end;
}

.messenger-msg-sender {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    font-weight: 500;
}

.messenger-msg-bubble {
    padding: 8px 14px;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.messenger-msg.mine .messenger-msg-bubble {
    background: var(--dark-soft);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    border-bottom-right-radius: 4px;
}

.messenger-msg.other .messenger-msg-bubble {
    background: var(--dark-soft);
    color: var(--text-primary);
    border: 1px solid var(--primary);
    border-bottom-left-radius: 4px;
}

.messenger-msg-reply {
    padding: 6px 10px;
    margin-bottom: 4px;
    border-left: 3px solid var(--primary);
    background: rgba(255,255,255,0.05);
    border-radius: 0;
    font-size: 16px;
}

.messenger-msg-reply-name {
    font-weight: 600;
    color: var(--primary);
}

.messenger-msg-reply-text {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 200px;
}

.messenger-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.messenger-msg.mine .messenger-msg-meta {
    flex-direction: row-reverse;
}

.messenger-msg-time {
    font-size: 16px;
    color: var(--text-muted);
}

.messenger-msg-read {
    font-size: 16px;
    color: var(--primary);
    font-weight: 500;
}

.messenger-msg-system {
    text-align: center;
    margin: 8px 0;
    font-size: 16px;
    color: var(--text-secondary);
}

/* 이미지 카드 */
.messenger-msg-img-card .messenger-msg-img-thumb {
    width: 48px;
    height: 48px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.messenger-msg-img-card .messenger-msg-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 파일 카드 */
.messenger-msg-text-card .text-icon {
    background: #6c757d;
    color: var(--text-heading);
}

.messenger-msg-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.05);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.messenger-msg-file-icon {
    font-size: 20px;
}

.messenger-msg-file-info {
    display: flex;
    flex-direction: column;
}

.messenger-msg-file-name {
    font-size: 16px;
    font-weight: 500;
}

.messenger-msg-file-size {
    font-size: 16px;
    color: var(--text-muted);
}

.messenger-msg-deleted {
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.7;
}

.messenger-typing {
    padding: 4px 20px 8px;
    font-size: 16px;
    color: var(--text-muted);
    font-style: italic;
}

.messenger-reply-preview {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    background: var(--light);
    border-top: 1px solid var(--light-border);
}

.reply-preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--primary);
    padding-left: 8px;
}

.reply-preview-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.reply-preview-text {
    font-size: 16px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
}

/* 입력 영역 */
.messenger-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--light-border);
    background: var(--surface);
}

#messenger-input {
    flex: 1;
    border: 1px solid var(--light-border);
    border-radius: 0;
    padding: 0.4375rem 0.75rem;
    font-size: 16px;
    resize: none;
    max-height: 120px;
    line-height: 1.5;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text-primary);
}

#messenger-input:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 0.25rem rgba(32,107,196,0.25);
}

.messenger-send-btn {
    padding: 0.4375rem 1rem;
    font-size: 16px;
    line-height: 1.5;
    flex-shrink: 0;
    box-sizing: border-box;
}

.messenger-attach-btn {
    padding: 0.4375rem 0.75rem;
    font-size: 16px;
    line-height: 1.5;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* --- 새 대화 모달 사용자 목록 --- */
.messenger-user-select-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--light-border);
    border-radius: 0;
    margin-top: 8px;
}

.messenger-user-select-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--light-border);
}

.messenger-user-select-item:hover {
    background: var(--light);
}

.messenger-user-select-item.selected {
    background: #1a2a4a;
}

.messenger-user-select-item .user-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.messenger-user-select-item .user-name {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-primary);
}

.messenger-user-select-item .user-dept {
    font-size: 16px;
    color: var(--text-secondary);
}

.messenger-user-select-item .user-check {
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
}

.messenger-selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 24px;
}

.messenger-selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--primary);
    color: var(--text-heading);
    font-weight: 500;
    border-radius: 0;
    font-size: 16px;
}

.messenger-selected-tag .remove-tag {
    cursor: pointer;
    font-size: 16px;
    margin-left: 2px;
}

/* --- 채팅방 메뉴 --- */
.room-menu-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--light-border);
}

.room-menu-section:last-child {
    border-bottom: none;
}

.room-menu-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.room-menu-member .member-online {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--light-border);
    flex-shrink: 0;
}

.room-menu-member .member-online.online {
    background: #2fb344;
}

/* 우클릭 메뉴 */
.messenger-context-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 10000;
    min-width: 140px;
}

.messenger-context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.messenger-context-menu-item:hover {
    background: var(--light);
}

.messenger-context-menu-item.danger {
    color: var(--danger);
}

/* 이메일 주소 컨텍스트 메뉴 */
.email-context-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    z-index: 10010;
    min-width: 180px;
    padding: 4px 0;
}
.email-context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
}
.email-context-menu-item:hover {
    background: var(--light);
}
.email-context-menu-sep {
    height: 1px;
    background: var(--light-border);
    margin: 4px 0;
}
.email-addr-link {
    color: var(--primary, #4a90e2);
    text-decoration: none;
    cursor: pointer;
}
.email-addr-link:hover {
    text-decoration: underline;
}
.email-row-sender.email-addr-trigger,
.email-card-sender.email-addr-trigger {
    cursor: pointer;
}
.email-row-sender.email-addr-trigger:hover,
.email-card-sender.email-addr-trigger:hover {
    text-decoration: underline;
}

/* ==================== PDF 뷰어 ==================== */
.pdf-viewer-container {
    width: 90vw;
    height: 90vh;
    background: var(--surface);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.pdf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--dark);
    color: var(--text-heading);
    flex-shrink: 0;
}

.pdf-viewer-header span {
    font-size: 16px;
}

.pdf-viewer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-viewer-controls .btn-sm {
    padding: 4px 10px;
    font-size: 16px;
}

#pdf-page-info, #pdf-zoom-info {
    min-width: 60px;
    text-align: center;
    font-size: 16px;
}

.pdf-viewer-actions {
    display: flex;
    gap: 6px;
}

.pdf-viewer-actions button {
    padding: 5px 12px;
    font-size: 16px;
}

.pdf-viewer-body {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    background: #525659;
}

#pdf-render-canvas {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background: var(--surface);
}

/* 메시지 내 PDF 첨부 스타일 */
.messenger-msg-pdf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 12px;
    background: var(--light);
    border-radius: 0;
    border: 1px solid var(--light-border);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.messenger-msg-pdf .messenger-msg-file-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    width: 100%;
    padding-top: 2px;
}

.messenger-msg-pdf .messenger-msg-file-icon {
    background: var(--danger);
    color: var(--text-heading);
    padding: 4px 8px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.messenger-msg-pdf .messenger-msg-file-info {
    flex: 1;
    min-width: 0;
}

.messenger-msg-pdf .messenger-msg-file-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.messenger-msg-pdf .messenger-msg-file-size {
    font-size: 16px;
    color: var(--text-muted);
}

.messenger-msg-pdf .btn-sm {
    padding: 3px 8px;
    font-size: 16px;
    white-space: nowrap;
    text-decoration: none;
}

/* 파일 카드 - 다크 버블 내 스타일 */
.messenger-msg-bubble .messenger-msg-pdf {
    background: var(--surface);
    border-color: var(--light-border);
}

.messenger-msg-bubble .messenger-msg-pdf .messenger-msg-file-name {
    color: var(--text-primary);
}

.messenger-msg-bubble .messenger-msg-pdf .messenger-msg-file-size {
    color: var(--text-muted);
}

.messenger-msg-bubble .messenger-msg-pdf .btn-sm {
    color: var(--text-secondary);
    border-color: var(--light-border);
    background: var(--light);
}

.messenger-msg-bubble .messenger-msg-pdf .btn-sm:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.messenger-msg-bubble .messenger-msg-file {
    background: rgba(255,255,255,0.05);
}

.messenger-msg-bubble .messenger-msg-file-name {
    color: var(--text-primary);
}

.messenger-msg-bubble .messenger-msg-file-size {
    color: var(--text-muted);
}

/* 오피스 파일 아이콘 색상 */
.messenger-msg-office .office-xlsx,
.messenger-msg-office .office-xls {
    background: #217346;
}
.messenger-msg-office .office-pptx,
.messenger-msg-office .office-ppt {
    background: #D04423;
}
.messenger-msg-office .office-docx,
.messenger-msg-office .office-doc {
    background: #2B579A;
}
.messenger-msg-office .office-hwp,
.messenger-msg-office .office-hwpx {
    background: #2B8ECA;
}

/* 업로드 변환 중 토스트 */
.messenger-upload-toast {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: var(--text-heading);
    padding: 8px 20px;
    border-radius: 0;
    font-size: 16px;
    z-index: 10;
    animation: fadeInUp 0.3s;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==================== 캔버스 회의 모드 ==================== */
.messenger-container.canvas-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 8000;
    min-width: 0;
    overflow: auto;
    border-radius: 0;
    border: none;
}

.messenger-container.canvas-mode .messenger-sidebar {
    display: none;
}

.messenger-container.canvas-mode .messenger-chat-area {
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    flex: none;
    flex-shrink: 0;
    overflow: hidden;
}

.messenger-container.canvas-mode .messenger-chat-header {
    display: none;
}

.messenger-canvas-area {
    flex: 1;
    min-width: 800px;
    display: flex;
    flex-direction: column;
    background: var(--dark-soft);
    min-width: 0;
}

/* 캔버스 헤더 */
.canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--dark);
    color: var(--text-heading);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
}

.canvas-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
}

.canvas-file-name {
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
    flex-shrink: 1;
    min-width: 0;
}

.canvas-file-open-btn {
    padding: 3px 10px !important;
    font-size: 16px !important;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}
.canvas-file-open-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}
.canvas-file-close-btn {
    padding: 3px 10px !important;
    font-size: 16px !important;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}
.canvas-file-close-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}
.canvas-save-btn {
    padding: 3px 12px !important;
    font-size: 16px !important;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
}
.canvas-save-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.canvas-header-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.canvas-header-right .btn-delete {
    padding: 5px 14px;
    font-size: 16px;
}


/* 음성 통화 컨트롤 */
.canvas-header-center {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.voice-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-btn {
    padding: 5px 16px !important;
    font-size: 16px !important;
    font-weight: 600;
    border-radius: 0;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--light-border) !important;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}

.voice-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    transform: scale(1.04);
}

.voice-btn.active {
    background: var(--surface) !important;
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    animation: voiceBtnPulse 2s ease-in-out infinite;
}

@keyframes voiceBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 51, 51, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(196, 51, 51, 0); }
}

.voice-mute-btn {
    padding: 5px 12px !important;
    font-size: 16px !important;
    font-weight: 600;
    border-radius: 0;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--light-border) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-mute-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.voice-mute-btn.muted {
    background: var(--surface) !important;
    color: #e09100 !important;
    border-color: #e09100 !important;
}

/* 마이크 활성 인디케이터 */
.voice-mic-indicator {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 0;
    background: #1a2a22;
    border: 1px solid #2e8b57;
}

.voice-mic-indicator.active {
    display: inline-flex;
}

.voice-mic-indicator.muted {
    background: #2a2518;
    border-color: #c07800;
}

.voice-mic-icon {
    font-size: 16px;
    line-height: 1;
}

.voice-mic-indicator.muted .voice-mic-icon::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    width: 14px;
    height: 14px;
    border-bottom: 2px solid #e09100;
    transform: rotate(-45deg);
    transform-origin: center;
}

.voice-mic-icon {
    position: relative;
}

/* 오디오 레벨 바 */
.voice-level-bars {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 14px;
}

.voice-level-bar {
    width: 3px;
    border-radius: 0;
    background: #2e8b57;
    transition: height 0.08s ease-out;
    min-height: 2px;
}

.voice-mic-indicator.muted .voice-level-bar {
    background: #e09100;
}

.voice-level-bar:nth-child(1) { height: 2px; }
.voice-level-bar:nth-child(2) { height: 2px; }
.voice-level-bar:nth-child(3) { height: 2px; }
.voice-level-bar:nth-child(4) { height: 2px; }
.voice-level-bar:nth-child(5) { height: 2px; }

.voice-indicator {
    display: none;
}

.voice-pulse {
    display: none;
}

/* 캔버스 바디 (패널 + 래퍼) */
.canvas-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 음성 참여자 패널 */
.voice-panel {
    width: 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--light-border);
    overflow-y: auto;
}

.voice-panel-header {
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--light-border);
}

.voice-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.vp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.vp-item.speaking {
    background: #1a2a22;
    border-left-color: #2e8b57;
}

.vp-item.muted .vp-avatar {
    opacity: 0.5;
}

.vp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.vp-info {
    flex: 1;
    min-width: 0;
}

.vp-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.vp-mic-icon {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.vp-no-voice .vp-mic-icon {
    opacity: 0.35;
}

.vp-level-bars {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 10px;
}

.vp-level-bar {
    width: 3px;
    height: 2px;
    border-radius: 0;
    background: var(--light-border);
    transition: height 0.08s ease-out, background 0.08s;
}

.vp-level-bar:nth-child(1) { height: 3px; }
.vp-level-bar:nth-child(2) { height: 3px; }
.vp-level-bar:nth-child(3) { height: 3px; }
.vp-level-bar:nth-child(4) { height: 3px; }

.vp-level-bar.active {
    background: #2e8b57;
}
.vp-level-bar.active:nth-child(1) { height: 4px; }
.vp-level-bar.active:nth-child(2) { height: 6px; }
.vp-level-bar.active:nth-child(3) { height: 8px; }
.vp-level-bar.active:nth-child(4) { height: 10px; }

.vp-item.muted .vp-level-bar.active {
    background: #e09100;
}

/* 마이크 토글 버튼 (본인용) */
.vp-mic-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.15s, opacity 0.15s;
    user-select: none;
}

.vp-mic-toggle:hover {
    opacity: 0.85;
}

.vp-mic-toggle.active {
    background: rgba(46, 139, 87, 0.25);
    color: #4caf80;
}

.vp-mic-toggle.active .vp-mic-label {
    color: #4caf80;
    font-size: 16px;
    font-weight: 600;
}

.vp-mic-toggle.off {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.vp-mic-toggle.off .vp-mic-label {
    color: var(--text-secondary);
    font-size: 16px;
    opacity: 0.6;
}

.vp-mic-toggle.muted-toggle {
    background: rgba(224, 145, 0, 0.2);
    color: #e09100;
}

.vp-mic-toggle.muted-toggle .vp-mic-label {
    color: #e09100;
    font-size: 16px;
    font-weight: 600;
}

.vp-mic-label {
    font-size: 16px;
    line-height: 1;
}

/* Phase B: 손들기 라벨 (이모지 미사용 — 텍스트 배지) */
.vp-raised-hand {
    display: inline-block;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
    line-height: 1.2;
}

/* Phase B: 회의 헤더 손들기 버튼 활성 상태 */
#raise-hand-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

/* Phase B: 발표자 모드 PiP (화면공유 위 우하단 카메라 미리보기) */
.presenter-pip {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 200px;
    height: 150px;
    z-index: 9999;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    cursor: grab;
    border: 2px solid var(--accent, #3498db);
}
.presenter-pip video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.presenter-pip:active { cursor: grabbing; }

/* 캔버스 래퍼 (3레이어 스택) */
.canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

/* 프로토콜 #150 — Client View Mode DOM SSOT (2026-05-12) */
body.canvas-view-canvas #canvas-wrapper    { display: flex !important; }
body.canvas-view-canvas #camera-grid-view  { display: none !important; }
body.canvas-view-canvas #screen-share-view { display: none !important; }
body.canvas-view-camera #canvas-wrapper    { display: none !important; }
body.canvas-view-camera #camera-grid-view  { display: grid !important; }
body.canvas-view-camera #screen-share-view { display: none !important; }
body.canvas-view-screen #canvas-wrapper    { display: flex !important; }
body.canvas-view-screen #camera-grid-view  { display: none !important; }
body.canvas-view-screen #screen-share-view { display: none !important; }

/* ============================================================================
 * PLC/HMI SSOT 통합 블록 — 리뷰.md #46~#48 + 화상회의리뷰.md #190~#193
 * (이전에는 style.css 에만 있었으나 style.css 가 index.html 에 로드되지 않아
 *  재고/QMS/설비/결재 탭이 자동 토글되지 않는 회귀 발생. 3개 테마 파일에 동기화)
 * 모든 body 클래스 SSOT 규칙. JS .style.display 직접 조작 폐기.
 * ============================================================================ */

/* #190 — 화이트보드 enter/exit 버튼 */
#whiteboard-enter-btn,
#whiteboard-exit-btn { display: none; }
body.canvas-view-camera #whiteboard-enter-btn,
body.canvas-view-screen #whiteboard-enter-btn { display: inline-flex; }
body.canvas-view-canvas #whiteboard-exit-btn { display: inline-flex; }
.wb-active-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.wb-active-btn:hover {
    background: var(--primary-hover, var(--primary)) !important;
    filter: brightness(1.08);
}

/* #191 — 파일 관련 (canvas-view-canvas + canvas-has-file) */
#canvas-file-open-btn,
#canvas-file-close-btn,
#canvas-file-name { display: none; }
body.canvas-view-canvas #canvas-file-open-btn { display: inline-flex; }
body.canvas-view-canvas.canvas-has-file #canvas-file-close-btn,
body.canvas-view-canvas.canvas-has-file #canvas-file-name { display: inline-flex; }

/* #191 — 화면공유 버튼 (i-am-sharer 마스터 인터락) */
#screen-share-btn,
#screen-share-stop-btn { display: none; }
body.canvas-view-camera:not(.i-am-sharer) #screen-share-btn,
body.canvas-view-canvas:not(.i-am-sharer) #screen-share-btn,
body.canvas-view-screen:not(.i-am-sharer) #screen-share-btn { display: inline-flex; }
body.i-am-sharer #screen-share-stop-btn { display: inline-flex; }
body.i-am-sharer #screen-share-stop-btn {
    background: var(--status-error, #e53935) !important;
    color: #fff !important;
    border-color: var(--status-error, #e53935) !important;
}

/* #191 — 캔버스 도구바 (camera 모드 숨김) */
body.canvas-view-camera #canvas-toolbar { display: none; }

/* #191 — 호스트 전용 전체 음소거 */
#mute-all-btn { display: none; }
body.is-host.canvas-view-camera #mute-all-btn,
body.is-host.canvas-view-canvas #mute-all-btn,
body.is-host.canvas-view-screen #mute-all-btn { display: inline-flex; }

/* #191 — 발표자 PiP (화면공유 뷰에서만) */
#presenter-pip-btn { display: none; }
body.canvas-view-screen #presenter-pip-btn { display: inline-flex; }
body.presenter-pip-on #presenter-pip-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* #191 — 손들기 active */
body.raise-hand-active #raise-hand-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* #192 — 게스트 음소거 (voice-active 일 때만) */
#guest-mute-btn { display: none; }
body.voice-active #guest-mute-btn { display: inline-flex; }

/* #192 — 게스트 화면공유 */
#guest-screen-btn,
#screen-share-status-btn { display: none; }
body.canvas-view-camera:not(.i-am-sharer) #guest-screen-btn,
body.canvas-view-canvas:not(.i-am-sharer) #guest-screen-btn,
body.canvas-view-screen:not(.i-am-sharer) #guest-screen-btn { display: inline-flex; }
body.i-am-sharer #screen-share-status-btn { display: inline-flex; }

/* #192 — 캔버스 페이지 컨트롤 (canvas-paged 일 때만) */
#canvas-page-controls { display: none; }
body.canvas-paged #canvas-page-controls { display: flex; }

/* #193 — messenger-canvas-area (.messenger-container.canvas-mode 일 때만) */
#messenger-canvas-area { display: none; }
.messenger-container.canvas-mode #messenger-canvas-area { display: flex; }

/* #193 — 모바일 자동 가로 모드라 mmm-orientation 영구 숨김 */
body.meeting-mobile-active #mmm-orientation { display: none; }

/* #193 — 게스트 페이지 3 상태 SSOT */
#guest-join-section,
#guest-meeting-section,
#guest-end-message { display: none; }
body.guest-state-join #guest-join-section { display: flex; }
body.guest-state-meeting #guest-meeting-section { display: flex; }
body.guest-state-end #guest-end-message { display: flex; }

/* #193 — voice-panel (회의 모드 진입 시) */
#voice-panel { display: none; }
.messenger-container.canvas-mode #voice-panel,
body.guest-state-meeting #voice-panel { display: flex; }

/* 리뷰.md #46 — 결재함 4 탭 section SSOT */
#approvalPendingSection,
#approvalMyRequestsSection,
#approvalActingSection,
#approvalReferencesSection { display: none; }
body.approval-tab-pending #approvalPendingSection,
body.approval-tab-my-requests #approvalMyRequestsSection,
body.approval-tab-acting #approvalActingSection,
body.approval-tab-references #approvalReferencesSection { display: block; }

/* 리뷰.md #46 — 결재 모달 첨부 section */
#approvalAttachSection { display: none; }
body.approval-has-attach #approvalAttachSection { display: block; }

/* 리뷰.md #47 — 재고 7 탭 section SSOT */
#invTabOverview,
#invTabHistory,
#invTabMaterial,
#invTabParts,
#invTabConsumable,
#invTabPackaging,
#invTabEtc { display: none; }
body.inv-tab-overview #invTabOverview { display: block; }
body.inv-tab-history #invTabHistory { display: block; }
body.inv-tab-material #invTabMaterial { display: block; }
body.inv-tab-parts #invTabParts { display: block; }
body.inv-tab-consumable #invTabConsumable { display: block; }
body.inv-tab-packaging #invTabPackaging { display: block; }
body.inv-tab-etc #invTabEtc { display: block; }

/* 리뷰.md #47 — 재고 LOT section */
.inv-lot-section { display: none; }
.inv-lot-section.lot-enabled { display: block; }

/* 리뷰.md #47 — 재고 상세 권한별 버튼 SSOT */
.inv-btn-perm-po,
.inv-btn-perm-inbound,
.inv-btn-perm-outbound,
.inv-btn-perm-adjust { display: none; }
body.has-perm-inv-inbound .inv-btn-perm-inbound { display: inline-block; }
body.has-perm-inv-outbound .inv-btn-perm-outbound { display: inline-block; }
body.has-perm-inv-adjust .inv-btn-perm-adjust { display: inline-block; }
#invDetailBtnPO.show-po { display: inline-block; }

/* 리뷰.md #199 — 품목 상세 권한별 버튼 SSOT (재고 .inv-btn-perm-* 패턴 동일) */
.item-btn-perm-edit,
.item-btn-perm-delete { display: none; }
body.has-perm-item-edit .item-btn-perm-edit { display: inline-block; }
body.has-perm-item-delete .item-btn-perm-delete { display: inline-block; }

/* 리뷰.md #48 — QMS 9 탭 section SSOT */
#qmsDashboard, #qmsStandards, #qmsIncoming, #qmsProcess, #qmsFinal,
#qmsNcr, #qmsCertificate, #qmsSupplier, #qmsCalibration, #qmsComplaint { display: none; }
body.qms-tab-dashboard #qmsDashboard,
body.qms-tab-standards #qmsStandards,
body.qms-tab-incoming #qmsIncoming,
body.qms-tab-process #qmsProcess,
body.qms-tab-final #qmsFinal,
body.qms-tab-ncr #qmsNcr,
body.qms-tab-certificate #qmsCertificate,
body.qms-tab-supplier #qmsSupplier,
body.qms-tab-calibration #qmsCalibration,
body.qms-tab-complaint #qmsComplaint { display: block; }

/* 리뷰.md #48 — 설비 4 탭 section SSOT */
#eqTabDashboard, #eqTabRegistry, #eqTabWoPm, #eqTabStats { display: none; }
body.eq-tab-dashboard #eqTabDashboard,
body.eq-tab-registry #eqTabRegistry,
body.eq-tab-wopm #eqTabWoPm,
body.eq-tab-stats #eqTabStats { display: block; }

/* 메신저 사이드바 탭 (채팅/회의) — 데스크탑 기본 스타일 */
.messenger-sidebar-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0 12px;
    border-bottom: 1px solid var(--light-border);
}
.messenger-sidebar-tabs .mst-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}
.messenger-sidebar-tabs .mst-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}
.messenger-sidebar-tabs .mst-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.canvas-wrapper canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#canvas-bg { z-index: 1; }
#canvas-draw { z-index: 2; }
#canvas-live { z-index: 3; touch-action: none; }

#canvas-pointers {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 4;
    pointer-events: none;
}

.canvas-pointer-cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: left 0.1s, top 0.1s;
}

.canvas-pointer-label {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: var(--text-heading);
    background: rgba(0,0,0,0.7);
    padding: 1px 6px;
    border-radius: 0;
    white-space: nowrap;
}

/* 음성 활성화 마우스 포인터 오버레이 */
.meeting-pointers-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
}
.meeting-pointer {
    position: absolute;
    left: 0; top: 0;
    pointer-events: none;
    transition: transform 0.05s linear, opacity 0.3s;
    will-change: transform, opacity;
    z-index: 101;
    display: none;
}
.meeting-pointer svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.meeting-pointer-label {
    position: absolute;
    top: 18px; left: 14px;
    font-size: 11px; color: #fff;
    padding: 1px 6px; border-radius: 3px;
    white-space: nowrap; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 캔버스 도구바 */
/* #133: 테마 무관 고정 dark surface (회의 모드 SSOT) */
.canvas-toolbar {
    flex-shrink: 0;
    background: #2a2a2a;
    color: #f0f0f0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 8px 12px;
    flex-wrap: nowrap;
}

.canvas-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.canvas-tool-group,
.canvas-color-group,
.canvas-width-group,
.canvas-action-group,
.canvas-page-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.canvas-tool-group {
    border-right: 1px solid var(--light-border);
    padding-right: 12px;
}

.canvas-color-group {
    border-right: 1px solid var(--light-border);
    padding-right: 12px;
}

.canvas-width-group {
    border-right: 1px solid var(--light-border);
    padding-right: 12px;
}

/* 도구 버튼 — 리뷰.md #119: 다크 toolbar 위 흰색 강제 */
.canvas-tool-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.canvas-tool-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.canvas-tool-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* 색상 버튼 */
.canvas-color-btn {
    width: 24px;
    height: 24px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s;
}

.canvas-color-btn:hover {
    transform: scale(1.2);
}

.canvas-color-btn.active {
    border-color: var(--text-heading);
    box-shadow: 0 0 0 2px var(--primary);
}

/* 굵기 버튼 — #119: 다크 toolbar 위 흰색 강제 */
.canvas-width-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.canvas-width-btn span {
    display: block;
    background: #fff;
    border-radius: 50%;
}

.canvas-width-btn:hover {
    background: rgba(255,255,255,0.15);
}

.canvas-width-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

.canvas-width-btn.active span {
    background: var(--surface);
}

/* 액션 버튼 — #119: 다크 toolbar 위 흰색 강제 */
.canvas-action-btn {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
}

.canvas-action-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* 페이지 그룹 */
.canvas-page-group {
    margin-left: auto;
}

#canvas-page-info {
    color: #fff;
    font-size: 16px;
    min-width: 50px;
    text-align: center;
}

/* 메신저 반응형 → mobile.css로 이동 */

/* ==================== 회의 기록 ==================== */

.canvas-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.canvas-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.canvas-history-item:hover {
    background: var(--light);
}

.canvas-history-icon {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--primary);
    color: var(--text-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.canvas-history-info {
    flex: 1;
    min-width: 0;
}

.canvas-history-info .ch-title {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-history-info .ch-meta {
    font-size: 16px;
    color: var(--muted);
    margin-top: 2px;
}

.canvas-history-info .ch-participants {
    font-size: 16px;
    color: var(--muted);
    margin-top: 2px;
}

.canvas-history-strokes {
    font-size: 16px;
    color: var(--muted);
    text-align: right;
    flex-shrink: 0;
}

.canvas-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

/* 화면 공유 뷰 (캔버스와 상호 배타적) */
.screen-share-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #000;
    position: relative;
    min-height: 0;
    overflow: hidden;
}
/* 화면 공유자 전체 커서 숨김 (getDisplayMedia 캡처 방지) */
.screen-sharing-cursor-hide,
.screen-sharing-cursor-hide * {
    cursor: none !important;
}
/* 화상회의리뷰.md #187 — 모달/인터랙티브 영역은 OS cursor 강제 표시.
   사용자 보고: "마우스 포인터가 모달 뒤에 있고 이상한 상태, 클릭 못함".
   getDisplayMedia 캡처에 cursor 포함은 막아야 하나, 모달/버튼/입력은 사용자가 실제로 조작 필요. */
.screen-sharing-cursor-hide .modal,
.screen-sharing-cursor-hide .modal *,
.screen-sharing-cursor-hide #obt-alert-overlay,
.screen-sharing-cursor-hide #obt-alert-overlay *,
.screen-sharing-cursor-hide #delegate-picker-modal,
.screen-sharing-cursor-hide #delegate-picker-modal *,
.screen-sharing-cursor-hide button,
.screen-sharing-cursor-hide input,
.screen-sharing-cursor-hide select,
.screen-sharing-cursor-hide textarea,
.screen-sharing-cursor-hide a,
.screen-sharing-cursor-hide [role="button"],
.screen-sharing-cursor-hide [contenteditable="true"] {
    cursor: auto !important;
}
.screen-sharing-cursor-hide button,
.screen-sharing-cursor-hide a,
.screen-sharing-cursor-hide [role="button"],
.screen-sharing-cursor-hide .modal button,
.screen-sharing-cursor-hide .modal a {
    cursor: pointer !important;
}
.screen-sharing-cursor-hide input,
.screen-sharing-cursor-hide textarea,
.screen-sharing-cursor-hide [contenteditable="true"] {
    cursor: text !important;
}

.screen-share-view video {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: contain;
    background: #000;
}
.screen-share-info {
    padding: 10px 16px;
    color: #fff;
    background: rgba(0,0,0,0.6);
    text-align: center;
    font-size: 14px;
}
#screen-share-btn.active {
    background: var(--status-error);
    color: #fff;
}
.screen-share-active-btn {
    background: var(--status-error) !important;
    color: #fff !important;
    cursor: default !important;
    opacity: 1 !important;
    animation: screenSharePulse 2s ease-in-out infinite;
}
@keyframes screenSharePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
/* 화면 공유 중지 바 (공유자 본인에게만 표시) */
.screen-share-stop-bar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 10;
    animation: screenShareBarSlideUp 0.3s ease-out;
}
@keyframes screenShareBarSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.screen-share-stop-icon {
    font-size: 12px;
    animation: screenSharePulse 1.5s ease-in-out infinite;
}
@keyframes screenSharePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.screen-share-stop-text {
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
}
.screen-share-stop-btn {
    padding: 6px 16px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    white-space: nowrap;
}

/* ─── 카메라 그리드 뷰 ─── */
.camera-grid-view { flex:1; display:grid; gap:4px; padding:4px; background:var(--dark); overflow:hidden; grid-auto-rows:1fr; }
.camera-grid-view.grid-1 { grid-template-columns:1fr; }
.camera-grid-view.grid-2 { grid-template-columns:1fr 1fr; }
.camera-grid-view.grid-3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.camera-grid-view.grid-3 .camera-tile:first-child { grid-row:1/3; }
.camera-grid-view.grid-4 { grid-template-columns:1fr 1fr; }
.camera-grid-view.grid-5-9 { grid-template-columns:repeat(3,1fr); }
.camera-grid-view.grid-10-16 { grid-template-columns:repeat(4,1fr); }

.camera-tile { position:relative; background:var(--dark); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:0; }
.camera-tile video { width:100%; height:100%; object-fit:cover; }
.camera-tile.self video { transform:scaleX(-1); }
.camera-tile.active-speaker { box-shadow:0 0 0 3px var(--status-success); }
.camera-tile.self-hidden { display:none; }

.camera-tile-avatar { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.camera-tile-initial { font-size:28px; font-weight:700; color:#fff; }
.camera-tile-loading { position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% + 50px)); font-size:13px; color:rgba(255,255,255,0.7); white-space:nowrap; }

.camera-tile-overlay { position:absolute; bottom:0; left:0; right:0; padding:4px 8px; background:linear-gradient(transparent,rgba(0,0,0,0.7)); display:flex; align-items:center; gap:6px; }
.camera-tile-name { font-size:13px; color:#fff; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camera-tile-mute { font-size:14px; opacity:0.8; }
.camera-tile-pin { font-size:14px; cursor:pointer; opacity:0; transition:opacity 0.2s; }
.camera-tile:hover .camera-tile-pin { opacity:0.8; }
.camera-tile-pin:hover { opacity:1 !important; }

/* 참여자 패널 내 미니 카메라 (아바타 대체) */
.vp-camera-mini { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.vp-camera-mini video { width: 100%; height: 100%; object-fit: cover; }
.vp-camera-mini.self video { transform: scaleX(-1); }

/* 카메라 토글 버튼 (본인 항목 내) */
.vp-camera-toggle { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding: 3px 8px; border-radius: 12px; cursor: pointer; font-size: 14px; user-select: none; transition: background 0.15s, opacity 0.15s; }
.vp-camera-toggle:hover { opacity: 0.85; }
.vp-camera-toggle.active { background: rgba(46,139,87,0.25); color: #4caf80; }
.vp-camera-toggle.off { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

/* ─── 원격 제어 스타일 ─── */
.remote-control-layer {
    position: absolute;
    inset: 0;
    z-index: 110;
    /* 화상회의리뷰.md #226 — controller(B) 캡처 레이어. crosshair(+) 로컬 커서를 숨겨
       B 가 공유 영상 속 피제어자(A)의 실제 커서만 보도록 (이중 포인터 회귀 해소, 표준 원격데스크톱 UX) */
    cursor: none;
}
/* 화상회의리뷰.md #226 — cursor:none 상속 차단. B 의 제어 버튼(파일/클립보드/종료)은 커서 표시 */
.remote-control-buttons, .remote-control-buttons button { cursor: pointer; }
.remote-control-indicator {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(220, 50, 50, 0.85);
    color: #fff;
    padding: 4px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    z-index: 120;
    animation: remote-pulse 2s infinite;
}
@keyframes remote-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.remote-control-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}
.remote-control-buttons .btn-sm {
    font-size: 12px;
}
.remote-file-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 360px;
    background: var(--dark);
    border-left: 1px solid var(--light-border);
    z-index: 130;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.remote-file-header {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--light-border);
    flex-shrink: 0;
}
.remote-file-header > div {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.remote-file-path {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.remote-file-list {
    flex: 1;
    overflow-y: auto;
}
.remote-file-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--light-border);
    font-size: 13px;
}
.remote-file-item:hover {
    background: var(--hover-bg);
}
.remote-file-icon {
    flex-shrink: 0;
    font-size: 16px;
}
.remote-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.remote-file-size {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--muted);
}
.remote-file-delete-btn {
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 6px;
    opacity: 0;
}
.remote-file-item:hover .remote-file-delete-btn {
    opacity: 1;
}
.remote-file-editor {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    background: var(--dark);
    z-index: 5;
}
.remote-file-editor-header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--light-border);
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}
.remote-file-editor-header span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.remote-file-editor textarea {
    flex: 1;
    background: var(--surface);
    color: var(--text-primary);
    border: none;
    padding: 12px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    resize: none;
    outline: none;
}
#remote-control-request-btn {
    background: var(--status-warning);
    color: #000;
    font-weight: 600;
}

/* 회의 다시보기 */
.canvas-replay-container {
    width: 90vw;
    height: 90vh;
    background: var(--dark);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canvas-replay-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    color: var(--text-heading);
    position: relative;
}

.canvas-replay-header > #canvas-replay-title {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.canvas-replay-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.canvas-replay-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.replay-rotate-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
    cursor: pointer;
}

.replay-rotate-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.replay-close-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--surface);
    color: var(--danger);
    border: 1px solid var(--danger);
    cursor: pointer;
    margin-left: 4px;
}

.replay-close-btn:hover {
    background: var(--danger);
    color: var(--text-heading);
}

.canvas-replay-body {
    flex: 1;
    position: relative;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2c2c2c;
}

.canvas-replay-body canvas {
    position: absolute;
}

#replay-bg-canvas {
    z-index: 1;
}

#replay-draw-canvas {
    z-index: 2;
}

/* ==================== 품목관리 현황 카드 ==================== */
.item-stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 12px 0; }
.mw-stats-grid { grid-template-columns: repeat(4, 1fr); }
.mw-date-row { display: flex; gap: 8px; align-items: center; }

/* ==================== 기술 입문 (mywork tab 6, 56차) ==================== */
.mw-ti-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.mw-ti-toc { background: var(--surface); border: 1px solid var(--light-border); border-radius: 0;
    padding: 12px; max-height: calc(100vh - 220px); overflow-y: auto; position: sticky; top: 80px; }
.mw-ti-toc-header { margin: 0 0 8px 0; font-size: 17px !important; font-weight: 700 !important; color: var(--text-primary);
    border-bottom: 1px solid var(--light-border); padding-bottom: 6px; }
.mw-ti-toc ul { list-style: none; padding: 0; margin: 0; }
.mw-ti-toc li { margin: 0; }
.mw-ti-toc a { display: block; padding: 6px 8px; color: var(--text-primary); text-decoration: none;
    font-size: 16px !important; font-weight: 400; line-height: 1.4; border-radius: 0; transition: background 0.15s; }
.mw-ti-toc a:hover { background: var(--hover-bg); }
.mw-ti-toc a.active { background: var(--accent); color: var(--bg-primary); }
.mw-ti-toc .ti-l1 { padding-left: 8px; font-weight: 600; }
.mw-ti-toc .ti-l2 { padding-left: 22px; }
.mw-ti-toc .ti-l3 { padding-left: 36px; opacity: 0.85; }
.mw-ti-content { min-width: 0; padding-top: 12px; }

/* 폰트 cascade: 17px(제목/섹션) → 16px(본문) — 위계는 폰트 굵기로 (56H차 통일)
   글로벌 `* { font-size: 16px }` 우회: 본문 영역 모든 자손에 wildcard 16px 강제 */
#myworkPage #mwTiHeader { display: none !important; }
#myworkPage #mwTiTitle { display: none !important; }
#myworkPage #mwTiDesc { display: none !important; }

.mw-ti-section { padding: 20px 0; border-top: 1px solid var(--light-border); }
.mw-ti-section:first-child { border-top: none; padding-top: 0; }

/* 섹션 헤더 (depth-0/1/2) — wildcard 적용 안 됨 (헤더는 .section-content 밖)
   크기는 모두 17px, 위계는 굵기(700/700/600)로 표현 */
#myworkPage .mw-ti-section.depth-0 > .mw-ti-section-header h2 { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 12px 0; color: var(--text-primary); }
#myworkPage .mw-ti-section.depth-1 > .mw-ti-section-header h3 { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 10px 0; color: var(--text-primary); }
#myworkPage .mw-ti-section.depth-2 > .mw-ti-section-header h4 { font-size: 17px !important; font-weight: 600 !important; margin: 0 0 8px 0; color: var(--text-primary); }

/* ★ 핵심: 본문 + 모든 자손 → 16px 강제 (글로벌 * { font-size:16px } 우회) */
#myworkPage .mw-ti-section-content,
#myworkPage .mw-ti-section-content * {
    font-size: 16px !important;
}
#myworkPage .mw-ti-section-content { line-height: 1.7; color: var(--text-primary); font-weight: 400; }
#myworkPage .mw-ti-section-content p { margin: 6px 0; font-weight: 400; }
#myworkPage .mw-ti-section-content ul,
#myworkPage .mw-ti-section-content ol { padding-left: 22px; margin: 6px 0; }
#myworkPage .mw-ti-section-content li { margin: 3px 0; font-weight: 400; }
#myworkPage .mw-ti-section-content h4 { font-weight: 700 !important; margin: 10px 0 4px 0; color: var(--text-primary); }
#myworkPage .mw-ti-section-content strong { font-weight: 700 !important; }
#myworkPage .mw-ti-section-content em { font-style: italic; }

/* 테이블: width 강제 해제 + 디자인 통일 (56E차) */
#myworkPage .mw-ti-section-content table {
    width: auto !important;
    max-width: 100%;
    background: transparent !important;
    border: 1px solid var(--light-border) !important;
    margin: 8px 0;
    box-shadow: none !important;
}
#myworkPage .mw-ti-section-content table th,
#myworkPage .mw-ti-section-content table td {
    padding: 6px 12px !important;
    text-transform: none !important;
    white-space: normal !important;
    border: 1px solid var(--light-border) !important;
}
#myworkPage .mw-ti-section-content table th {
    text-align: center !important;
    background: var(--hover-color) !important;
    font-weight: 700 !important;
}
#myworkPage .mw-ti-section-content table td { text-align: left; font-weight: 400 !important; }
.item-stat-card { background: var(--surface); border-radius: 0; padding: 20px 12px; text-align: center;
    border: 1px solid var(--light-border); cursor: pointer; transition: all 0.2s; }
.item-stat-card:hover { background: var(--hover-bg); }
.item-stat-count { font-size: 20px; font-weight: bold; color: var(--text-primary); }
.item-stat-label { font-size: 16px; color: var(--text-secondary); margin-top: 4px; }

/* 품목 변경이력 테이블 */
.item-log-section { margin-top: 16px; }
.item-log-section h4 { margin: 0 0 8px 0; font-size: 16px; color: var(--text-primary); }
.item-log-action-add { color: var(--primary); font-weight: 600; }
.item-log-action-edit { color: var(--accent); font-weight: 600; }
.item-log-action-delete { color: var(--danger); font-weight: 600; }
tr.activity-row-clickable { cursor: pointer; transition: background 0.15s; }
tr.activity-row-clickable:hover { background: var(--hover-bg); }
.m-card.activity-row-clickable { cursor: pointer; transition: background 0.15s; }
.m-card.activity-row-clickable:active { background: var(--hover-bg); }
.item-subcat-header td { user-select: none; }
.item-subcat-header:hover td { background: var(--light-border) !important; }
.item-group-thead th { background: var(--surface); color: var(--text-secondary); padding: 0.75rem; font-size: 16px; font-weight: 600; text-align: center; border-bottom: 2px solid var(--light-border); }

/* ==================== 재고관리 ==================== */
.inv-type-inbound { color: var(--primary); font-weight: bold; }
.inv-type-outbound { color: var(--danger); font-weight: bold; }
.inv-type-adjust { color: var(--accent); font-weight: bold; }
.inv-status-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }
.inv-status-warning { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.inv-status-ok { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); }
.lot-expiry-danger { color: var(--danger); font-weight: bold; }
.lot-expiry-warning { color: var(--accent); font-weight: bold; }

/* ==================== 일정관리 - 캘린더 ==================== */
.calendar-container { margin-top: 8px; }
.calendar-nav { display: flex; align-items: center; gap: 0; margin-top: 12px; }
.filter-bar .calendar-nav { margin-top: 0; }
.cal-nav-btn { background: transparent; color: var(--text-secondary); border: none; padding: 4px 8px; cursor: pointer; font-size: 16px; line-height: 1; transition: color 0.15s; }
.cal-nav-btn:hover { color: var(--text-primary); }
.calendar-title { font-size: 16px; font-weight: 600; min-width: 100px; text-align: center; color: var(--text-primary); padding: 0 2px; }
.cal-today-btn { padding: 6px 14px; font-size: 16px; border: 1px solid var(--light-border); background: var(--surface); color: var(--text-secondary); border-radius: 0; cursor: pointer; transition: all 0.15s; }
.cal-today-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--light-border); border-radius: 0; overflow: hidden; background: var(--surface); }
.calendar-weekday { padding: 8px 4px; text-align: center; font-size: 16px; font-weight: 600; background: var(--surface); border-bottom: 1px solid var(--light-border); color: var(--text-secondary); }
.calendar-weekday.sunday { color: var(--danger); }
.calendar-weekday.saturday { color: var(--primary); }
.calendar-cell { min-height: 150px; padding: 4px; border: 1px solid var(--light-border); border-width: 0 1px 1px 0; cursor: pointer; transition: background 0.15s; overflow: hidden; background: transparent; }
.calendar-cell:hover { background: var(--hover-bg); }
.calendar-cell.other-month { opacity: 0.35; }
.calendar-cell.today { background: rgba(46, 204, 113, 0.1); }
.calendar-cell.today .calendar-day-number { background: var(--status-success); color: var(--text-heading); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.calendar-cell.holiday .calendar-day-number { color: var(--danger); font-weight: 700; }
.calendar-cell.sunday .calendar-day-number { color: var(--danger); }
.calendar-cell.saturday .calendar-day-number { color: var(--primary); }
.calendar-day-number { font-size: 16px; font-weight: 500; margin-bottom: 2px; }
.calendar-holiday-name { font-size: 16px; color: var(--danger); line-height: 1.2; margin-bottom: 2px; }
.calendar-event { font-size: 16px; color: var(--text-secondary); padding: 2px 6px; border-radius: 3px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; cursor: pointer; border: 1px solid var(--event-color, var(--primary)); background: rgba(255,255,255,0.06); transition: background 0.15s; }
.calendar-event:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.calendar-event-more { font-size: 16px; color: var(--text-secondary); cursor: pointer; padding: 1px 4px; border-radius: 3px; }
.calendar-event-more:hover { background: var(--bg-hover); color: var(--accent); }

/* 캘린더 일정 팝오버 */
.calendar-day-popover { position: absolute; z-index: 1050; width: 260px; background: var(--dark-soft); border-radius: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.4); border: 1px solid var(--light-border); overflow: hidden; }
.cdp-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.cdp-date { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.cdp-close { font-size: 18px; cursor: pointer; color: var(--text-secondary); line-height: 1; padding: 0 2px; }
.cdp-close:hover { color: var(--danger); }
.cdp-body { padding: 8px 10px; max-height: 240px; overflow-y: auto; }
.cdp-event { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 0; cursor: pointer; }
.cdp-event:hover { background: var(--bg-hover); }
.cdp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cdp-title { font-size: 16px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 주간 뷰 */
.calendar-week-grid { border: 1px solid var(--light-border); border-radius: 0; overflow: hidden; background: var(--surface); }
.calendar-week-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface); border-bottom: 1px solid var(--light-border); }
.calendar-week-day-header { padding: 8px; text-align: center; font-size: 16px; }
.calendar-week-day-header.today { background: rgba(74, 144, 226, 0.12); }
.calendar-week-day-header.holiday, .calendar-week-day-header.sunday { color: var(--danger); }
.calendar-week-day-header.saturday { color: var(--primary); }
.week-day-name { font-weight: 600; }
.week-day-num { font-size: 20px; font-weight: 700; }
.week-holiday { display: block; font-size: 16px; color: var(--danger); }
.calendar-week-allday { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 200px; }
.calendar-week-allday-col { padding: 4px; border-right: 1px solid var(--light-border); }

/* ==================== 일정관리 - 간트 차트 ==================== */
/* -- Gantt: layout -- */
.gantt-toolbar { display: none; }
.gantt-wrapper { display: flex; border: none; border-radius: 0; overflow: hidden; max-height: 700px; background: var(--surface); }

/* -- Gantt LEFT (fixed width, no hscroll) -- */
.gantt-left { display: flex; flex-direction: column; width: 800px; flex-shrink: 0; border-right: 1px solid var(--light-border); overflow: hidden; }
.gantt-left-spacer { flex-shrink: 0; background: transparent; }
.gantt-left-header { flex-shrink: 0; overflow: hidden; height: 63px; background: transparent; border-top: 1px solid var(--light-border); border-bottom: 1px solid var(--light-border); }
.gantt-lh-row { height: 21px; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid var(--light-border); }
.gantt-lh-tbl th { border-bottom: none !important; height: 20px !important; padding: 0 4px !important; }
.gantt-lh-merged { height: 63px; }
.gantt-lh-merged th { border-bottom: none !important; height: 63px !important; vertical-align: middle !important; }
.gantt-lh-sub { font-size: 16px !important; color: var(--text-secondary) !important; font-weight: 400 !important; }
.gantt-left-body { flex: 1; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; background: transparent; }
.gantt-left-body::-webkit-scrollbar { width: 0; display: none; }
.gantt-left-table { border-collapse: collapse; font-size: 16px; table-layout: fixed; width: 100%; min-width: 0 !important; }
.gantt-left-table th { background: transparent; padding: 2px 4px; border-bottom: none; border-right: 1px solid var(--light-border); font-weight: 600; font-size: 16px; text-align: center; white-space: nowrap; height: 20px; box-sizing: border-box; }
.gantt-left-table th:last-child { border-right: none; }
.gantt-left-table td { padding: 3px 4px; border-bottom: 1px solid var(--light-border); border-right: 1px solid var(--light-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 36px; box-sizing: border-box; }
.gantt-left-table td:last-child { border-right: none; }
.gantt-cat-row td { border-bottom: 1px solid var(--light-border); text-align: center; }
.gantt-cat-actions { margin-left: 8px; opacity: 0; transition: opacity 0.15s; }
.gantt-cat-row:hover .gantt-cat-actions { opacity: 1; }
.gantt-cat-btn { font-size: 16px !important; padding: 1px 5px !important; border: 1px solid var(--light-border) !important; border-radius: 0 !important; background: var(--bg-white) !important; color: var(--text-secondary) !important; cursor: pointer !important; vertical-align: middle; }
.gantt-cat-btn:hover { background: var(--primary) !important; color: var(--bg-white) !important; border-color: var(--primary) !important; }
.gantt-task-row { cursor: pointer; }
.gantt-task-row:hover { background: var(--hover-bg) !important; }
.gantt-task-row.gantt-selected { background: rgba(52,152,219,0.15) !important; }
.gantt-task-row.gantt-selected td { border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary); }
.gantt-sel-group { display: inline-flex; gap: 6px; }
.gantt-cell-title { cursor: pointer; color: #5bc0de; font-weight: 500; }
.gantt-cell-title:hover { text-decoration: underline; }
.gantt-client-cell { font-weight: 500; }

/* -- Gantt RIGHT (flex, scrollbar on top) -- */
.gantt-right { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
.gantt-right-hscroll { overflow-x: auto; overflow-y: hidden; flex-shrink: 0; background: transparent; }
.gantt-right-hscroll::-webkit-scrollbar { height: 12px; }
.gantt-right-hscroll::-webkit-scrollbar-thumb { background: var(--muted-light); border-radius: 6px; }
.gantt-right-hscroll::-webkit-scrollbar-track { background: transparent; }
.gantt-right-header { overflow: hidden; flex-shrink: 0; height: 63px; background: transparent; border-top: 1px solid var(--light-border); border-bottom: 1px solid var(--light-border); }
.gantt-header-years, .gantt-header-months, .gantt-header-days { height: 21px; box-sizing: border-box; }
.gantt-right-body { overflow-x: hidden; overflow-y: auto; flex: 1; background: transparent; }

/* -- Gantt: right header -- */
.gantt-header-inner { display: inline-block; }
.gantt-header-years { display: flex; }
.gantt-header-year { text-align: center; font-size: 16px; font-weight: 700; border-right: 1px solid var(--light-border); height: 20px; line-height: 20px; background: transparent; box-sizing: border-box; }
.gantt-header-months { display: flex; }
.gantt-header-month { text-align: center; font-size: 16px; font-weight: 600; border-right: 1px solid var(--light-border); height: 20px; line-height: 20px; box-sizing: border-box; }
.gantt-header-days { display: flex; }
.gantt-header-day { text-align: center; font-size: 16px; height: 20px; line-height: 20px; border-right: 1px solid var(--light-border); color: var(--text-secondary); box-sizing: border-box; }
.gantt-header-day.weekend { background: rgba(0,0,0,0.04); color: var(--primary); }
.gantt-header-day.holiday { background: rgba(208, 2, 27, 0.08); color: var(--danger); }
.gantt-header-day.today { background: rgba(74, 144, 226, 0.15); font-weight: 700; color: var(--primary); }

/* -- Gantt: bars area -- */
.gantt-bars { overflow: hidden; }
.gantt-col-shade { position: absolute; top: 0; background: rgba(0,0,0,0.03); z-index: 0; }
.gantt-col-shade.holiday { background: rgba(208, 2, 27, 0.05); }
.gantt-vline { position: absolute; top: 0; width: 1px; background: var(--light-border); z-index: 0; opacity: 0.5; }
.gantt-hline { position: absolute; left: 0; height: 1px; background: var(--light-border); z-index: 0; opacity: 0.6; }
.gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 1; opacity: 0.7; }
.gantt-summary-bar { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--light-border); border-radius: 0; font-size: 13px; color: var(--text-primary); }
.gantt-sum-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gantt-sum-label { font-weight: 700; color: var(--text-primary); min-width: 64px; font-size: 13px; }
.gantt-sum-value { color: var(--text-primary); font-weight: 500; }
.gantt-sum-days { color: var(--text-secondary); font-weight: 400; font-size: 12px; }
.gantt-sum-sep { color: var(--text-muted); margin: 0 4px; }
.gantt-sum-delta { font-weight: 700; font-size: 13px; }
.gantt-sum-delta.gantt-sum-over { color: var(--danger); }
.gantt-sum-delta.gantt-sum-under { color: var(--status-success); }
.gantt-sum-delta.gantt-sum-even { color: var(--text-primary); }
.gantt-bar { position: absolute; border-radius: 0; cursor: pointer; z-index: 1; overflow: hidden; opacity: 0.85; transition: opacity 0.15s; display: flex; align-items: center; }
.gantt-bar:hover { opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.gantt-bar-progress { position: absolute; top: 0; left: 0; height: 100%; background: #3a4565; border-radius: 4px 0 0 4px; }
.gantt-bar-label { font-size: 16px; color: white; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* -- Gantt: date inputs & workdays -- */
.gantt-date-cell { padding: 2px 2px !important; text-align: center; }
.gantt-date-input { width: 100%; border: 1px solid var(--light-border); border-radius: 3px; padding: 2px 2px; font-size: 16px; text-align: center; background: var(--surface); color: var(--text-primary); outline: none; cursor: pointer; }
.gantt-date-input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.gantt-date-input::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(1); opacity: 0.7; }
.gantt-workdays-cell { text-align: center; font-size: 16px; font-weight: 600; color: #5bc0de; }
.gantt-back-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gantt-project-title { font-size: 19px; font-weight: 700; margin: 0; color: var(--text-primary); }
.gantt-back-row-btns { display: flex; gap: 6px; margin-left: auto; }

/* ==================== 간트 차트 인쇄 미리보기 ==================== */
#ganttPreviewOverlay { display: none; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; background: var(--surface); }
.gantt-preview-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: var(--dark-soft); color: var(--text-heading); flex-shrink: 0; border-bottom: 1px solid var(--light-border); }
.gantt-preview-body { flex: 1; overflow: auto; padding: 20px; background: var(--surface); }

/* ==================== 일정관리 - 상태/진행률 ==================== */
.schedule-status-active { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 16px; font-weight: 600; background: transparent; color: var(--primary); }
.schedule-status-completed { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 16px; font-weight: 600; background: transparent; color: #7ed321; }
.schedule-status-on_hold { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 16px; font-weight: 600; background: transparent; color: var(--accent); }
.schedule-status-cancelled { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 16px; font-weight: 600; background: transparent; color: #999; }
.schedule-progress-bar { height: 8px; background: var(--light-border); border-radius: 4px; overflow: hidden; display: inline-block; width: 80px; vertical-align: middle; }
.schedule-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }
.progress-text { font-size: 16px; color: var(--text-secondary); margin-left: 4px; }
.schedule-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ==================== 일정관리 - 전체 현황 ==================== */
.schedule-overview-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.overview-card { flex: 1; min-width: 140px; background: var(--sidebar-bg); border: 1px solid var(--light-border); border-radius: 0; padding: 20px; text-align: center; }
.overview-card-num { font-size: 20px; font-weight: 700; color: var(--primary); }
.overview-card-label { font-size: 16px; color: var(--text-secondary); margin-top: 4px; }
.overview-project-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--light-border); }
.overview-project-name { font-size: 16px; font-weight: 500; min-width: 200px; }
.ms-diamond { font-size: 16px; }

/* ==================== 일정관리 - 기타 ==================== */
.assignee-badge { display: inline-block; background: var(--hover-bg); border: 1px solid var(--light-border); border-radius: 12px; padding: 2px 8px; font-size: 16px; margin: 2px; }
.assignee-badge .btn-icon { background: none; border: none; cursor: pointer; color: var(--danger); font-size: 16px; padding: 0 2px; }
.task-assignee-list { min-height: 28px; }

/* ==================== OBT 커스텀 알림 (alert/confirm 대체) ==================== */
#obt-alert-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#obt-alert-overlay.obt-alert-show { opacity: 1; }
#obt-alert-overlay.obt-alert-show .obt-alert-box {
    transform: scale(1);
}
.obt-alert-box {
    background: var(--dark-soft);
    border: 1px solid var(--light-border);
    border-radius: 0;
    padding: 28px 32px 20px;
    min-width: 320px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transform: scale(0.92);
    transition: transform 0.2s ease;
}
.obt-alert-icon { margin-bottom: 12px; }
.obt-alert-msg {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    word-break: keep-all;
}
.obt-alert-buttons { display: flex; gap: 8px; justify-content: center; }
.obt-alert-btn {
    padding: 8px 28px;
    border: none;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.obt-alert-btn:active { transform: scale(0.97); }
.obt-alert-btn.obt-alert-ok {
    background: var(--primary);
    color: var(--text-heading);
}
.obt-alert-btn.obt-alert-ok:hover { background: var(--primary-hover); }
.obt-alert-btn.obt-alert-cancel {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--light-border);
}
.obt-alert-btn.obt-alert-cancel:hover { background: var(--light-border); }
.obt-alert-input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}
.obt-alert-input:focus { border-color: var(--primary); }

/* ==================== 코팅관리 시스템 ==================== */

/* 프로그레스 바 */
.coating-progress-bar {
    display: inline-block;
    width: 100%;
    height: 16px;
    background: var(--light-border);
    border-radius: 0;
    overflow: hidden;
    vertical-align: middle;
}
.coating-progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
    min-width: 0;
}

/* 상태 뱃지 */
.coating-status-received { background: transparent; border: 1px solid #f76707; color: #f76707; }
.coating-status-in_progress { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.coating-status-completed { background: transparent; border: 1px solid #37b24d; color: #37b24d; }
.coating-status-shipped { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-secondary); }

/* 우선순위 뱃지 */
.coating-priority-high { background: transparent; border: 1px solid #fa5252; color: #fa5252; }
.coating-priority-normal { background: transparent; border: 1px solid var(--light-border); color: var(--text-primary); }
.coating-priority-low { background: transparent; border: 1px solid var(--text-muted); color: var(--text-muted); }

/* 상세 테이블 */
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table td { padding: 6px 8px; border-bottom: 1px solid var(--light-border); font-size: 16px; }
.detail-table td:first-child { width: 100px; color: var(--text-secondary); }

/* 작은 버튼 */
.btn-small { padding: 3px 8px; font-size: 16px; border: 1px solid var(--light-border); background: var(--surface); color: var(--text-primary); cursor: pointer; }
.btn-small:hover { background: var(--hover-bg); }
.btn-danger-small { border-color: var(--danger); color: var(--danger); }
.btn-danger-small:hover { background: var(--danger); color: #fff; }

/* ==================== 패럴린 단가 계산 ==================== */
.parylene-fullscreen { width: 98vw !important; height: 96vh; max-height: 96vh !important; display: flex; flex-direction: column; overflow: hidden; padding: 16px !important; }
.parylene-fullscreen .modal-header { margin-bottom: 8px; padding-bottom: 6px; }
.parylene-fullscreen .parylene-split { flex: 1; min-height: 0; }
.parylene-fullscreen .modal-footer { flex-shrink: 0; margin-top: 8px; padding-top: 8px; }
.parylene-split { display: flex; gap: 12px; }
.parylene-input-panel { flex: 0 0 55%; overflow-y: auto; padding-right: 8px; }
.parylene-input-panel .form-section { margin-bottom: 8px; padding: 8px 12px; }
.parylene-input-panel .form-section h4 { margin: 0 0 6px 0; padding-bottom: 4px; }
.parylene-input-panel .form-group { margin-bottom: 6px; }
.parylene-input-panel .form-group label { margin-bottom: 2px; }
.parylene-input-panel .form-row { gap: 8px; }

/* 챔버 폼 폰트 크기 통일 */
#chamberFormArea .form-group label { font-size: 16px; }
#chamberFormArea .form-group input { font-size: 16px; }
#chamberFormArea h4 { font-size: 18px; }

.parylene-result-panel { flex: 1; background: var(--bg-tertiary); border-radius: 8px; padding: 12px; overflow-y: auto; }
.parylene-unit-price { font-size: 28px; font-weight: 700; color: var(--primary); text-align: center; margin: 4px 0; }
.parylene-moq-warn { color: var(--status-warning); background: rgba(243, 156, 18, 0.12); padding: 8px 12px; border-radius: 6px; font-size: 16px; }
.cost-bar-chart { display: flex; height: 28px; border-radius: 4px; overflow: hidden; }
.cost-bar-segment { transition: width 0.3s ease; min-width: 2px; }
.pc-formula-hidden { display: none; }
.pc-tray-layout-section { margin-top: 16px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; }
.pc-section-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--text-secondary); user-select: none; }
.pc-section-toggle:hover { background: var(--surface); }
.pc-tray-body { padding: 0 14px 14px; }
.pc-tray-canvas-wrap { text-align: center; margin-bottom: 10px; }
.pc-tray-canvas-wrap canvas { background: var(--surface); border-radius: 6px; border: 1px solid var(--light-border); max-width: 100%; }
.pc-tray-controls { font-size: 16px; color: var(--text-secondary); text-align: center; }
.pc-tray-modes { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
.pc-tray-mode-btn { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: all .15s; }
.pc-tray-mode-btn:hover { border-color: var(--primary); color: var(--primary); }
.pc-tray-mode-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(74,158,255,.1); font-weight: 600; }
.pc-tray-sliders { display: flex; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
.pc-tray-sliders label { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.pc-tray-num-input { width: 80px; padding: 8px 12px; border: 1px solid var(--light-border); border-radius: 4px; background: var(--surface); color: var(--text-primary); font-size: 16px; text-align: center; }
.pc-tray-num-input:focus { border-color: var(--primary); outline: none; }
.pc-tray-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; justify-content: center; }
.pc-tray-util-bar { display: inline-block; width: 80px; height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.pc-tray-util-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s; }
.pc-tray-side-wrap { margin-top: 10px; text-align: center; }
.pc-tray-side-wrap canvas { background: var(--surface); border-radius: 6px; border: 1px solid var(--light-border); max-width: 100%; }
.settings-tab-content { min-height: 200px; padding: 16px 0; }
.settings-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.settings-section-header h4 { margin: 0; }
.settings-section-header .text-muted { font-size: 13px; }
/* 설정 목록 아이템 */
.settings-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--light-border); }
.settings-item:last-child { border-bottom: none; }
.settings-item-num { flex-shrink: 0; width: 24px; font-size: 14px; font-weight: 600; color: var(--text-muted); text-align: right; }
.settings-item-info { flex: 1; min-width: 0; }
.settings-item-info strong { font-size: 14px; }
.settings-item-info .text-muted { font-size: 13px; }
.settings-item-info .badge { font-size: 11px; padding: 2px 6px; background: var(--primary); color: #fff; border-radius: 3px; margin-left: 6px; }
.settings-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.settings-item-actions .btn-sm { padding: 4px 10px; font-size: 13px; }
/* 설정 탭 액션 행: 모바일에서 자동 줄바꿈 */
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.settings-actions > button { flex: 0 0 auto; }
.settings-list { border: 1px solid var(--light-border); border-radius: 6px; background: var(--bg-tertiary); }
.settings-list:empty { display: none; }
/* 이메일 설정 모달: 체크박스(form-group input width:100% 제외) + baseline 정렬 */
#emailSettingsModal .form-group input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--primary);
}
#emailSettingsModal .form-group label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
}
#emailSettingsModal .settings-section-header { align-items: baseline; }
.folder-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
@media print { .parylene-split { display: block; } .parylene-input-panel { display: none; } .parylene-result-panel { flex: none; width: 100%; } }

/* 패럴린 최소 폰트 16px */
.parylene-fullscreen, .parylene-fullscreen input, .parylene-fullscreen select,
.parylene-fullscreen th, .parylene-fullscreen td, .parylene-fullscreen label { font-size: 16px; }
#paryleneSettingsModal th, #paryleneSettingsModal td,
#paryleneSettingsModal label, #paryleneSettingsModal input,
#paryleneSettingsModal select { font-size: 16px; }

/* ==================== QMS 인라인 테이블 입력 ==================== */
#qmsStdItemsTable,
#qmsInspResultsTable,
#qmsCertItemsTable {
    min-width: 700px;
}
#qmsStdItemsTable { min-width: 970px; }
#qmsInspResultsTable { min-width: 830px; }
#qmsStdItemsTable th,
#qmsInspResultsTable th,
#qmsCertItemsTable th {
    white-space: nowrap;
}
#qmsStdItemsTable td,
#qmsInspResultsTable td,
#qmsCertItemsTable td {
    padding: 2px 3px;
}
#qmsStdItemsTable td:nth-child(n+5),
#qmsStdItemsTable th:nth-child(n+5) {
    text-align: center;
}
#qmsCertItemsTable td:nth-child(1),
#qmsCertItemsTable th:nth-child(1),
#qmsCertItemsTable td:nth-child(5),
#qmsCertItemsTable th:nth-child(5),
#qmsCertItemsTable td:nth-child(7),
#qmsCertItemsTable th:nth-child(7) {
    text-align: center;
}
#qmsStdItemsTable td input,
#qmsStdItemsTable td select,
#qmsInspResultsTable td input,
#qmsInspResultsTable td select,
#qmsCertItemsTable td input,
#qmsCertItemsTable td select {
    border: none;
    background: transparent;
    padding: 6px 4px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
    text-align: center;
    -moz-appearance: textfield;
}
#qmsStdItemsTable td input[type="number"]::-webkit-inner-spin-button,
#qmsStdItemsTable td input[type="number"]::-webkit-outer-spin-button,
#qmsInspResultsTable td input[type="number"]::-webkit-inner-spin-button,
#qmsInspResultsTable td input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#qmsStdItemsTable td input:focus,
#qmsStdItemsTable td select:focus,
#qmsInspResultsTable td input:focus,
#qmsInspResultsTable td select:focus,
#qmsCertItemsTable td input:focus,
#qmsCertItemsTable td select:focus {
    background: var(--hover-bg);
}

/* 통합 검색 */
.btn-search-primary { background:var(--surface); color:var(--text-secondary); border:1px solid var(--light-border); padding:10px 24px; font-size:16px; cursor:pointer; font-weight:normal; transition:background-color 0.2s, color 0.2s; }
.btn-search-primary:hover { background:var(--hover-bg); color:var(--text-primary); }
/* 아코디언 */
.sa-group { border-bottom:1px solid var(--light-border); }
.sa-group-header { display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; background:var(--light); transition:background 0.15s; font-size:16px; }
.sa-group-header:hover { background:var(--hover-bg); }
.sa-arrow { font-size:14px; color:var(--text-muted); width:16px; }
.sa-group-title { font-weight:600; color:var(--text-heading); }
.sa-group-count { font-size:16px; color:var(--text-muted); margin-left:auto; }
.sa-group-body { padding:0 0 0 20px; }
.sa-module { border-top:1px solid var(--light-border); }
.sa-module-header { display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; font-size:16px; }
.sa-module-header:hover { background:var(--hover-bg); }
.sa-arrow-sm { font-size:14px; color:var(--text-muted); width:14px; }
.sa-selall { margin-left:auto; font-size:15px; color:var(--accent); cursor:pointer; }
.sa-selall:hover { text-decoration:underline; }
.sa-field-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:4px 8px; padding:8px 12px 12px 36px; }
.sa-field-label { display:flex; align-items:center; gap:4px; font-size:16px; color:var(--text-primary); cursor:pointer; padding:3px 0; }
.sa-field-label input[type="checkbox"] { accent-color:var(--primary); }
.sa-filter-label { font-size:16px; color:var(--text-secondary); white-space:nowrap; }
/* 검색 카드 */
.search-card { border:1px solid var(--light-border); padding:12px 16px; margin-bottom:4px; cursor:pointer; transition:background 0.15s; }
.search-card:hover { background:var(--hover-bg); }
.sa-result-header { background:var(--surface) !important; color:var(--text-primary) !important; border:1px solid var(--light-border); }
.sa-result-header span { color:var(--text-primary) !important; }
/* 검색 도움말 바 */
.sa-help-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; margin-top:12px; background:var(--surface); border:1px solid var(--light-border); border-bottom:none; font-size:14px; color:var(--text-muted); line-height:1.5; }
.sa-help-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
.sa-help-bar b { color:var(--text-primary); }
.sa-bulk-toggle { font-size:15px; color:var(--accent); cursor:pointer; padding:2px 6px; border:1px solid transparent; }
.sa-bulk-toggle:hover { text-decoration:underline; border-color:var(--light-border); }
.sa-help-bar .sa-bulk-toggle:first-of-type { margin-left:auto; }
.sa-bulk-sep { color:var(--text-muted); }
.sa-bulk-group { margin-left:auto; }
/* 필터 미적용 안내 */
.sa-filter-notice { padding:8px 14px; font-size:14px; color:var(--status-warning); background:rgba(224,145,0,0.08); border:1px solid rgba(224,145,0,0.25); margin-top:4px; }
.sa-no-status-tag { display:inline-block; font-size:12px; padding:1px 8px; margin-left:6px; color:var(--status-warning); border:1px solid var(--status-warning); vertical-align:middle; font-weight:400; }

/* 고급 필터 패널 */
.sa-adv-panel { border:1px solid var(--light-border); margin-top:8px; background:var(--bg-primary); }
.sa-adv-header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--light-border); background:var(--surface); }
.sa-adv-topbar { display:flex; align-items:center; gap:8px; padding:10px 16px; flex-wrap:wrap; border-bottom:1px solid var(--light-border); }
.sa-adv-presetbar { display:flex; align-items:center; gap:8px; padding:8px 16px; flex-wrap:wrap; border-bottom:1px solid var(--light-border); background:var(--surface); }
/* 옵션 C: 상단 행 (제목 + 우측 상단 프리셋) */
.sa-adv-toprow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--light-border); background:var(--surface); flex-wrap:wrap; }
.sa-adv-titlebox { display:flex; flex-direction:column; gap:4px; flex:1; min-width:200px; }
.sa-adv-title { font-weight:600; font-size:16px; color:var(--text-heading); }
.sa-adv-hint { font-size:13px; color:var(--text-muted); }
.sa-adv-presetbox { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sa-adv-combinatorrow { display:flex; align-items:center; gap:8px; padding:10px 16px; flex-wrap:wrap; border-bottom:1px solid var(--light-border); }
.sa-adv-mod { min-width:120px; max-width:160px; }
.sa-adv-comb { min-width:72px; max-width:90px; font-weight:600; }
.sa-adv-select { padding:7px 10px; font-size:14px; border:1px solid var(--light-border); background:var(--card-bg); color:var(--text-primary); min-width:100px; height:36px; box-sizing:border-box; line-height:1.2; }
.sa-adv-op { min-width:90px; }
.sa-adv-radio { display:flex; align-items:center; gap:4px; font-size:14px; color:var(--text-primary); cursor:pointer; white-space:nowrap; }
.sa-adv-radio input[type="radio"] { accent-color:var(--primary); }
.sa-adv-row { display:flex; align-items:center; gap:8px; padding:8px 16px; flex-wrap:wrap; border-bottom:1px solid var(--light-border); }
.sa-adv-input { padding:7px 10px; font-size:14px; border:1px solid var(--light-border); background:var(--card-bg); color:var(--text-primary); flex:1; min-width:100px; height:36px; box-sizing:border-box; line-height:1.2; }
.sa-adv-del { padding:0 10px; font-size:14px; flex:none; line-height:1; height:36px; box-sizing:border-box; min-width:36px; display:inline-flex; align-items:center; justify-content:center; }
.sa-adv-presetbar button, .sa-adv-actions button, .sa-adv-row button { flex:none; }
.sa-adv-desc { padding:2px 16px 8px 16px; font-size:13px; color:var(--text-muted); line-height:1.4; border-bottom:1px solid var(--light-border); }
.sa-adv-actions { display:flex; align-items:center; gap:8px; padding:10px 16px; flex-wrap:wrap; }

/* ==================== 헤더 아이콘 버튼 (메신저/이메일) ==================== */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
    position: relative;
    white-space: nowrap;
}
.header-icon-btn:hover { background: rgba(255,255,255,0.15); }
.header-icon-btn.active { background: rgba(255,255,255,0.2); border-color: var(--primary); }
.header-icon-svg { display: inline-flex; align-items: center; font-size: 18px; }
.header-icon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
}

/* ==================== 플로팅 패널 ==================== */
.floating-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 420px;
    height: 620px;
    background: var(--bg-secondary);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 800;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease;
}
.floating-panel.minimized {
    height: 48px;
    width: 280px;
    overflow: hidden;
}
.floating-panel.minimized .floating-panel-body { display: none; }
.floating-panel.expanded {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    border-radius: 8px;
}
.floating-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-bottom: 1px solid var(--light-border);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
}
.floating-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    flex: 1;
}
.floating-panel-actions { display: flex; gap: 4px; }
.floating-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 4px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s;
}
.floating-panel-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.floating-panel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.floating-panel-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 799;
}

/* 두 번째 패널 왼쪽에 배치 */
.floating-panel + .floating-panel { right: 460px; }
.floating-panel.expanded + .floating-panel,
.floating-panel + .floating-panel.expanded { right: 10px; }

/* 플로팅 패널 내부 page-content 래퍼 높이 채우기 */
.floating-panel .page-content {
    height: 100%;
    overflow: hidden;
}
/* 플로팅 패널 내부 메신저 스타일 오버라이드 */
.floating-panel .messenger-container {
    height: 100%;
    display: flex;
    flex-direction: row;
}
.floating-panel .messenger-sidebar { width: 100%; max-width: none; border-right: none; }
/* 채팅방 미선택 시 chat-area 숨기고 sidebar만 표시. chat-open 클래스 추가 시 chat-area 표시 */
.floating-panel .messenger-chat-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-secondary); z-index: 1; display: none !important; }
.floating-panel .messenger-container.chat-open .messenger-chat-area { display: flex !important; }
.floating-panel .messenger-sidebar-header h3 { display: none; }
.floating-panel .messenger-sidebar-header { padding: 8px 10px; }
.floating-panel .messenger-canvas-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
.floating-panel .messenger-empty { display: none !important; }
.floating-panel .messenger-back-btn { display: inline-flex !important; }

/* 플로팅 패널 내부 이메일 스타일 오버라이드 */
.floating-panel .email-container {
    height: 100%;
    display: flex;
    flex-direction: row;
}
.floating-panel .email-sidebar { display: flex; width: 175px; min-width: 175px; padding: 8px; }
.floating-panel .email-sidebar .email-sidebar-tabs { margin-bottom: 6px; }
.floating-panel .email-sidebar .email-sidebar-tab { padding: 5px 4px; font-size: 15px; }
.floating-panel .email-sidebar .email-compose-btns { margin-bottom: 6px; }
.floating-panel .email-sidebar .btn-compose,
.floating-panel .email-sidebar .btn-compose-self { padding: 6px 4px; font-size: 14px; }
.floating-panel .email-sidebar .email-nav-item { padding: 5px 8px; font-size: 15px; }
.floating-panel .email-sidebar .email-nav-section { margin-top: 6px; }
.floating-panel .email-sidebar .email-nav-section-header { padding: 3px 8px; font-size: 15px; }
.floating-panel .email-sidebar .email-nav-section-header .btn-sm { font-size: 15px; padding: 1px 6px; }
.floating-panel .email-sidebar .nav-unread-count { font-size: 12px; padding: 0px 5px; }
.floating-panel .email-sidebar .email-sidebar-bottom { padding: 8px; }
.floating-panel .email-sidebar .email-sidebar-bottom .btn-sm { font-size: 12px; padding: 4px 8px; }
.floating-panel .email-sidebar .email-account-label { font-size: 10px; margin-bottom: 2px; }
.floating-panel .email-sidebar .email-account-address { font-size: 12px; margin-bottom: 6px; }
.floating-panel .email-mobile-tabs { display: none !important; }
.floating-panel .email-mobile-tabs button { font-size: 16px; padding: 6px 12px; white-space: nowrap; }
.floating-panel .email-list-panel { flex: 1; overflow-y: auto; }
.floating-panel .email-detail-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-secondary); z-index: 1; overflow-y: auto; }
.floating-panel .email-compose-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-secondary); z-index: 1; }
.floating-panel .email-compose-body { padding: 0; }
.floating-panel .compose-field-row { padding: 6px 12px; }
.floating-panel .compose-field-label { flex: 0 0 70px; font-size: 13px; }
.floating-panel .email-list-header { padding: 8px 10px; }
.floating-panel .email-list-header h3 { display: none; }

/* 플로팅 패널 내부 모달 — 패널 안에서 표시 */
.floating-panel > .modal {
    position: absolute;
    padding-top: 10px;
    border-radius: 0 0 12px 12px;
}
.floating-panel > .modal .modal-content {
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    width: auto;
}
.floating-panel > .modal .modal-content.modal-large {
    width: 900px;
}
.floating-panel > .modal .modal-content.wide {
    width: 800px;
}
.floating-panel > .modal .modal-content.modal-preview {
    width: 1100px;
}

/* ==================== 생산운영 2단 탭 ==================== */
.mfg-sub-tabs {
    border-bottom: 1px solid var(--light-border);
    margin-top: 0;
    padding: 0 8px;
    background: var(--surface);
}
.mfg-sub-tabs .tab-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0;
}
.mfg-sub-tabs .tab-btn:hover {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: var(--light-border);
}
.mfg-sub-tabs .tab-btn.active {
    color: var(--primary);
    background: transparent;
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* 생산운영 종합현황 KPI */
.mfg-kpi-section {
    margin-bottom: 20px;
}
.mfg-kpi-section h3 {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
}
.mfg-kpi-section .item-stats-grid {
    margin-top: 0;
}

/* 생산운영 크로스 알림 */
.mfg-alert-item {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    font-size: 14px;
}
.mfg-alert-item.warning {
    border-left: 3px solid var(--status-warning);
    color: var(--status-warning);
}
.mfg-alert-item.danger {
    border-left: 3px solid var(--status-error);
    color: var(--status-error);
}

/* ==================== 장치개발 (Device Development) ==================== */

/* 성능평가 항목 테이블 */
.eval-items-table {
    width: 100%;
    border-collapse: collapse;
}
.eval-items-table th,
.eval-items-table td {
    padding: 8px 10px;
    border: 1px solid var(--card-border);
    text-align: center;
    font-size: 13px;
    vertical-align: middle;
}
.eval-items-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.eval-items-table td.item-name {
    text-align: left;
    font-weight: 500;
    min-width: 120px;
}
.eval-items-table td.item-spec {
    text-align: left;
    font-size: 12px;
    max-width: 200px;
}
.eval-items-table td.item-criteria {
    text-align: left;
    font-size: 12px;
    max-width: 180px;
}
.eval-items-table .result-input {
    width: 100%;
    min-width: 100px;
    padding: 4px 6px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
}
.eval-items-table .eval-select {
    padding: 4px 6px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 80px;
}

/* 평가 결과 배지 */
.eval-badge-pass {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}
.eval-badge-fail {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}
.eval-badge-pending {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}
.eval-badge-na {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

/* 센서 차트 영역 */
.sensor-chart-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
.sensor-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    align-items: center;
}
.sensor-chart-toolbar button {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}
.sensor-chart-toolbar button:hover {
    background: var(--card-border);
}
.sensor-chart-toolbar button.active {
    background: var(--accent-primary, #3498db);
    color: #fff;
    border-color: var(--accent-primary, #3498db);
}
.sensor-chart-toolbar .toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--card-border);
    margin: 0 4px;
}

/* 분석 결과 패널 */
.analysis-result-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
}
.analysis-result-panel strong {
    color: var(--text-primary);
}

/* RECIPE 테이블 */
.recipe-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.recipe-section {
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
}
.recipe-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.recipe-table {
    width: 100%;
    border-collapse: collapse;
}
.recipe-table th,
.recipe-table td {
    padding: 6px 8px;
    border: 1px solid var(--card-border);
    font-size: 12px;
    text-align: center;
}
.recipe-table th {
    background: var(--bg-secondary);
    font-weight: 600;
}
.recipe-table input {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--card-border);
    border-radius: 3px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
}

/* 두께 측정 그리드 */
.thickness-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.thickness-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.thickness-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.thickness-item input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    text-align: center;
}
.thickness-summary {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}
.thickness-summary .value {
    color: var(--accent-primary, #3498db);
}

/* 파일 업로드 드롭존 */
.sensor-upload-zone {
    border: 2px dashed var(--card-border);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}
.sensor-upload-zone:hover,
.sensor-upload-zone.dragover {
    border-color: var(--accent-primary, #3498db);
    background: rgba(52, 152, 219, 0.05);
}
.sensor-upload-zone .upload-icon {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: 0.5;
}
.sensor-upload-zone .upload-text {
    font-size: 14px;
    color: var(--text-secondary);
}
.sensor-upload-zone .upload-hint {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 4px;
}

/* A4 미리보기 — 성능평가 */
.eval-a4-container {
    background: #fff;
    color: #000;
    padding: 40px;
    font-family: '바탕체', 'Batang', serif;
    font-size: 11px;
    line-height: 1.4;
}
.eval-a4-container .a4-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: '맑은 고딕', 'Malgun Gothic', sans-serif;
    margin-bottom: 20px;
}
.eval-a4-container .a4-info {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
}
.eval-a4-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.eval-a4-container th,
.eval-a4-container td {
    border: 1px solid #333;
    padding: 6px 8px;
    font-size: 10px;
    vertical-align: middle;
}
.eval-a4-container th {
    background: #d9d9d9;
    font-weight: bold;
    text-align: center;
}
.eval-a4-container .col-method,
.eval-a4-container .col-result {
    background: #d9ffff;
}
.eval-a4-container .col-eval {
    background: #ffd9d9;
}
.eval-a4-container .final-row {
    background: #ffd9d9;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* ==================== 키보드 접근성: focus-visible ==================== */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

/* 모바일 반응형 → mobile.css로 이동 */

/* ==================== 설비관리: 설비별 상태 카드 그리드 (2026-04-20 v2: 사각형+14px 이상) ==================== */
.eq-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0;
    margin-top: 4px;
    border-top: 1px solid var(--light-border);
    border-left: 1px solid var(--light-border);
}
.eq-status-card {
    background: var(--surface);
    border-right: 1px solid var(--light-border);
    border-bottom: 1px solid var(--light-border);
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.eq-status-card:hover {
    background: var(--hover-bg);
}
.eq-status-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.eq-status-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.eq-status-card-code {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.eq-status-card-kpi {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}
.eq-status-card-kpi > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eq-status-card-kpi-label {
    font-size: 14px;
    color: var(--text-secondary);
}
.eq-status-card-kpi-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.eq-status-card-foot {
    font-size: 14px;
    color: var(--text-secondary);
    padding-top: 8px;
    border-top: 1px solid var(--light-border);
}

/* ==================== Date Range Filter (검색 날짜 통일 컴포넌트) ==================== */
.dr-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    min-width: 200px;
}
.dr-filter .dr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: left;
}
.dr-filter .dr-btn:hover {
    border-color: var(--accent);
}
.dr-filter .dr-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}
.dr-filter .dr-icon svg {
    display: block;
}
.dr-filter .dr-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}
.dr-filter.has-value .dr-label {
    color: var(--text-primary);
}
.dr-filter .dr-clear {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.dr-filter .dr-clear:hover {
    background: var(--light-border);
    color: var(--text-primary);
}
.dr-filter .dr-clear[hidden] {
    display: none;
}
.dr-filter .dr-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    min-width: 384px;     /* 앱 크기와 통일 (사용자 선호) */
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.dr-filter .dr-popover[hidden] {
    display: none;
}
.dr-filter .dr-chips {
    display: flex;
    flex-wrap: nowrap;            /* 칩 5개 항상 한 줄 (overflow는 popover min-width로 방지) */
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-border);
}
.dr-filter .dr-chips button {
    flex: 1 1 0;                  /* 5개 칩이 전체 폭을 균등 분배 (50H차) */
    min-width: 0;
    padding: 8px 4px;             /* 좁아질 수 있으므로 가로 padding 축소 */
    background: transparent;
    border: 1px solid var(--light-border);
    border-radius: 0;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}
.dr-filter .dr-chips button:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.dr-filter .dr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.dr-filter .dr-row label {
    flex: 0 0 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.dr-filter .dr-row input[type="date"] {
    flex: 1;
    padding: 10px;                /* 앱 크기 통일 */
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: 0;
    color: var(--text-primary);
    font-size: 16px;              /* 앱 크기 통일 */
}
.dr-filter .dr-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--light-border);
}
.dr-filter .dr-actions button {
    padding: 10px 16px;           /* 앱 크기 통일 */
    border: 1px solid var(--light-border);
    border-radius: 0;
    font-size: 14px;              /* 앱 크기 통일 */
    cursor: pointer;
    background: transparent;
    color: var(--text-primary);
}
/* 50E차: btn-confirm/btn-save 표준 패턴 — 배경 없음, 외곽선 + hover 시 hover-bg 틴트 */
.dr-filter .dr-actions .dr-apply {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.dr-filter .dr-actions .dr-apply:hover {
    background: var(--hover-bg);
}
.dr-filter .dr-actions .dr-cancel:hover {
    background: var(--hover-bg);
}
@media (max-width: 768px) {
    /* 모바일에서는 부모 flex가 column인 경우 width:100%로 한 행 차지.
       chips/input/actions 크기는 base와 동일(50G차 통일) — 모바일 전용 오버라이드 제거 */
    .dr-filter {
        min-width: 0;
        width: 100%;
    }
    .dr-filter .dr-popover {
        max-width: calc(100vw - 16px);
        max-height: 70vh;
        overflow-y: auto;
    }
}
.dr-filter .dr-popover.dr-popover-right {
    left: auto;
    right: 0;
}

/* 통합검색 필터 페어 — 라벨+컨트롤이 묶여서 줄바꿈 시 분리 방지 */
.sa-filter-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
}
.sa-filter-pair > .sa-filter-label {
    flex: 0 0 auto;
}
.sa-filter-pair > .dr-filter,
.sa-filter-pair > select {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 768px) {
    .sa-filter-pair {
        flex: 1 1 100%;
    }
}

/* ==================== 화상회의리뷰.md #169 PLC 원격제어 메뉴 인터락 (2026-05-14) ==================== */
/* 마스터: body.i-am-sharer (화면공유 발표자). 슬레이브: body.remote-menu-open / body.agent-verified.
   가시성은 본 CSS 가 body 클래스 조합으로 결정 (SSOT). JS 는 클래스 토글만, 인라인 style.display 금지.
   3 테마 + mobile 동일 룰 (테마 무관 구조 인터락 — #133/#157 패턴). */

/* tier 1 (원격제어 메뉴 토글) — 마스터=1 일 때만 노출 */
body:not(.i-am-sharer) #remote-menu-toggle-btn { display: none !important; }

/* tier 2 (메뉴 sub 버튼) — 마스터=1 + remote-menu-open=1 동시 조건 (PLC AND 게이트) */
body:not(.i-am-sharer) #remote-agent-verify-btn,
body:not(.i-am-sharer) #remote-delegate-btn,
body:not(.i-am-sharer) #remote-agent-download-btn,
body.i-am-sharer:not(.remote-menu-open) #remote-agent-verify-btn,
body.i-am-sharer:not(.remote-menu-open) #remote-delegate-btn,
body.i-am-sharer:not(.remote-menu-open) #remote-agent-download-btn { display: none !important; }

/* 회수 버튼 — 위임 진행 중일 때만 (마스터=1 보장 — 위임 시작 자체가 마스터=1 전제) */
body:not(.remote-delegating) #remote-delegate-revoke-btn { display: none !important; }

/* controller 측 "원격제어 닫기" — 자기가 controller 일 때만 (마스터와 독립) */
body:not(.remote-controlling) #remote-control-exit-btn { display: none !important; }

/* 배지 — 위임/controller 둘 중 하나일 때만 (body.has-delegate-badge 동기화) */
#remote-delegate-badge {
    display: none;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 140, 0, 0.2);
    color: #ff8c00;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}
body.has-delegate-badge #remote-delegate-badge { display: inline-block; }

/* agent-verified 시각 표식 — 마스터=1 일 때만 의미 있음 */
body.i-am-sharer.agent-verified #remote-agent-verify-btn { color: #5dc865; border-color: rgba(93, 200, 101, 0.4); }
body.i-am-sharer.agent-verified #remote-agent-verify-btn::before { content: '\25CF '; }  /* 채워진 원 */
body.i-am-sharer:not(.agent-verified) #remote-agent-verify-btn::before { content: '\25CB '; }  /* 빈 원 */

/* 화면공유 1→0 하강 펄스 (0.5초 페이드아웃 + 클릭 차단) — 슬레이브 버튼군 visual reset */
body.remote-cleanup-pulse #remote-menu-toggle-btn,
body.remote-cleanup-pulse #remote-agent-verify-btn,
body.remote-cleanup-pulse #remote-delegate-btn,
body.remote-cleanup-pulse #remote-agent-download-btn,
body.remote-cleanup-pulse #remote-delegate-revoke-btn {
    opacity: 0.3;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}