/* ===== SOURCE: css/theme-foundation.css ===== */ /* ========================================================= DAERYUNG ERP STEP113-1 - 공통 디자인/테마 기반 --------------------------------------------------------- 목적 1) STEP112-29-2의 확정 UI를 그대로 유지한다. 2) 화면용 색상/표면/테두리/버튼/사이드바 값을 디자인 토큰으로 통합한다. 3) STEP113-2 이후 4종 테마가 동일 컴포넌트를 안전하게 재사용할 기반을 만든다. 4) A4 인쇄 영역은 이 파일에서 직접 재정의하지 않는다. ========================================================= */ :root, html[data-theme="classic"] { color-scheme: light; /* 기본 배경/글자 */ --dr-bg: #f4f6f9; --dr-surface: #ffffff; --dr-surface-soft: #f8fafc; --dr-surface-hover: #f8fbff; --dr-text: #1f2937; --dr-text-strong: #1e293b; --dr-text-muted: #64748b; --dr-text-soft: #94a3b8; /* 테두리/포커스 */ --dr-border: #dbe3ee; --dr-border-soft: #e5eaf1; --dr-border-strong: #cbd5e1; --dr-focus: #60a5fa; --dr-focus-ring: rgba(59, 130, 246, .20); /* 브랜드/동작 색상 - STEP112 확정 색상과 동일 */ --dr-primary: #3979a7; --dr-primary-hover: #316b95; --dr-primary-soft: #e4eef8; --dr-primary-soft-hover: #d6e6f5; --dr-primary-border: #9db5cb; --dr-primary-text: #163f66; --dr-danger: #c94b5b; --dr-danger-hover: #b83d4c; --dr-success: #15803d; --dr-warning: #b45309; /* 사이드바 */ --dr-sidebar-start: #111b32; --dr-sidebar-mid: #172b4d; --dr-sidebar-end: #10243c; --dr-sidebar-text: #dce7f8; --dr-sidebar-muted: #8ea2c4; --dr-sidebar-subtext: #b8c3d6; --dr-sidebar-item: #b9c7dd; --dr-sidebar-accent: #60a5fa; --dr-sidebar-icon: #93c5fd; --dr-sidebar-hover: rgba(148, 163, 184, .13); --dr-sidebar-open: rgba(15, 23, 42, .16); --dr-sidebar-active-start: rgba(59, 130, 246, .35); --dr-sidebar-active-end: rgba(59, 130, 246, .12); /* 모달/레이아웃 */ --dr-overlay: rgba(0, 0, 0, .40); --dr-radius-sm: 7px; --dr-radius: 8px; --dr-radius-lg: 12px; --dr-control-h: 36px; --dr-shadow-panel: 0 1px 2px rgba(15, 23, 42, .03); --dr-shadow-sidebar: 5px 0 20px rgba(15, 23, 42, .12); --dr-shadow-modalbar: 0 2px 8px rgba(15, 23, 42, .06); /* 기존 STEP91/STEP92 변수와 연결 - 기능 CSS 호환 */ --ui-primary: var(--dr-primary); --ui-primary-hover: var(--dr-primary-hover); --ui-secondary: var(--dr-surface-soft); --ui-border: var(--dr-border); --ui-text: #334155; --ui-radius: var(--dr-radius); --ui-control-h: var(--dr-control-h); --erp-btn-primary: var(--dr-primary); --erp-btn-primary-hover: var(--dr-primary-hover); --erp-btn-secondary: var(--dr-primary-soft); --erp-btn-secondary-border: var(--dr-primary-border); --erp-btn-secondary-text: var(--dr-primary-text); --erp-btn-secondary-hover: var(--dr-primary-soft-hover); --erp-btn-danger: var(--dr-danger); --erp-btn-danger-hover: var(--dr-danger-hover); } /* 화면 영역만 토큰에 연결한다. 인쇄 문서/A4 관련 선택자와 @media print는 의도적으로 포함하지 않는다. */ @media screen { body { background: var(--dr-bg); color: var(--dr-text); } .sidebar { background: linear-gradient(165deg, var(--dr-sidebar-start), var(--dr-sidebar-mid) 55%, var(--dr-sidebar-end)); box-shadow: var(--dr-shadow-sidebar); } .brand-mark { background: linear-gradient(135deg, var(--dr-sidebar-accent), #2563eb); } .brand-sub { color: var(--dr-sidebar-subtext); } .sidebar-label { color: var(--dr-sidebar-muted); } .menu-head { color: var(--dr-sidebar-text); } .menu-head:hover, .menu-group.open .menu-head { background: var(--dr-sidebar-hover); } .menu-icon { color: var(--dr-sidebar-icon); } .menu-chevron { color: var(--dr-sidebar-muted); } .menu-group.open { background: var(--dr-sidebar-open); } .menu-item { color: var(--dr-sidebar-item); } .menu-item:hover, .menu-item.active { background: linear-gradient(90deg, var(--dr-sidebar-active-start), var(--dr-sidebar-active-end)); } .menu-item.active { box-shadow: inset 3px 0 0 var(--dr-sidebar-accent); } .topbar span, .panel > p, .calendar-note, .empty-ledger, .list-page-count { color: var(--dr-text-muted); } .card, .panel, .table, .modal-box, .modal-actionbar { background: var(--dr-surface); } .card, .panel { border-color: var(--dr-border); } .panel { box-shadow: var(--dr-shadow-panel); } .panel h2, .panel h3 { color: var(--dr-text-strong); } .btn, button.btn { background: var(--dr-primary); border-color: var(--dr-primary); } .btn:hover, button.btn:hover, .btn.primary:hover, button.btn.primary:hover { background: var(--dr-primary-hover); border-color: var(--dr-primary-hover); } .btn.secondary, button.btn.secondary { background: var(--dr-primary-soft); border-color: var(--dr-primary-border); color: var(--dr-primary-text); } .btn.secondary:hover, button.btn.secondary:hover { background: var(--dr-primary-soft-hover); color: var(--dr-primary-text); } .btn.danger, button.btn.danger { background: var(--dr-danger); border-color: var(--dr-danger); } .btn.danger:hover, button.btn.danger:hover { background: var(--dr-danger-hover); border-color: var(--dr-danger-hover); } input, select, textarea, .form-grid input, .form-grid select, .form-grid textarea, .panel input, .panel select, .panel textarea { background: var(--dr-surface); color: var(--dr-text); border-color: var(--dr-border-strong); } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .panel input:focus, .panel select:focus, .panel textarea:focus { outline-color: var(--dr-focus-ring); border-color: var(--dr-focus); } .table-wrap, .process50-table-wrap { border-color: var(--dr-border); } .table th { background: var(--dr-surface-soft); color: #475569; } .table th, .table td { border-color: var(--dr-border-soft); } .table tbody tr:hover { background: var(--dr-surface-hover); } .modal { background: var(--dr-overlay); } .modal-actionbar { border-bottom-color: var(--dr-border); box-shadow: var(--dr-shadow-modalbar); } } /* ===== SOURCE: css/step113-1-1.css ===== */ /* ========================================================= DAERYUNG ERP STEP113-1-1 - 생산 등록/수정 모달 구조 통일 - 기능/DB/재고연동 로직은 변경하지 않는다. - STEP113 테마 토큰을 사용하여 이후 4종 테마에 그대로 대응한다. ========================================================= */ @media screen { #modal .production11311-form{ width:100%; min-width:0; } #modal .production11311-section{ box-sizing:border-box!important; width:100%!important; min-width:0!important; margin:0 0 14px!important; padding:0 14px 14px!important; border:1px solid var(--dr-border, #b8d3e7)!important; border-radius:var(--dr-radius-sm, 7px)!important; background:var(--dr-surface-soft, #f3f8fc)!important; overflow:hidden!important; } #modal .production11311-title{ box-sizing:border-box!important; width:calc(100% + 28px)!important; margin:0 -14px 14px!important; padding:11px 14px!important; background:var(--dr-primary, #2f8fc5)!important; color:#fff!important; border:0!important; font-size:16px!important; font-weight:700!important; line-height:1.2!important; } #modal .production11311-section .form-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; align-items:start!important; margin:0!important; } #modal .production11311-section .form-grid>div{min-width:0!important;} #modal .production11311-section label{ display:block!important; margin:0 0 5px!important; color:var(--dr-text-muted, #30465a)!important; font-size:12px!important; font-weight:700!important; } #modal .production11311-section label small{ font-weight:500!important; color:var(--dr-text-soft, #64748b)!important; } #modal .production11311-section input:not([type=checkbox]):not([type=radio]), #modal .production11311-section select, #modal .production11311-section textarea{ box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:100%!important; border:1px solid var(--dr-border-strong, #b8cfe2)!important; border-radius:var(--dr-radius-sm, 7px)!important; background:var(--dr-surface, #fff)!important; color:var(--dr-text, #1f2937)!important; padding:7px 9px!important; } #modal .production11311-section input:not([type=checkbox]):not([type=radio]), #modal .production11311-section select{height:38px!important;} #modal .production11311-section textarea{ min-height:76px!important; resize:vertical!important; line-height:1.45!important; } #modal .production11311-span-2{grid-column:1/-1!important;} #modal .production11311-note, #modal .production11311-flow{ box-sizing:border-box!important; width:100%!important; margin-top:12px!important; padding:10px 12px!important; border:1px solid var(--dr-border, #dbe3ee)!important; border-radius:var(--dr-radius-sm, 7px)!important; background:var(--dr-surface, #fff)!important; color:var(--dr-text-muted, #64748b)!important; font-size:12px!important; line-height:1.5!important; } #modal .production11311-flow strong{ display:block!important; margin-bottom:6px!important; color:var(--dr-text-strong, #1e293b)!important; font-size:13px!important; } #modal .production11311-flow p{margin:4px 0!important;} } @media screen and (max-width:700px){ #modal .production11311-section .form-grid{grid-template-columns:1fr!important;} #modal .production11311-span-2{grid-column:auto!important;} } /* ===== SOURCE: css/step113-2.css ===== */ /* ========================================================= DAERYUNG ERP STEP113-2 - 4종 테마 실제 적용 --------------------------------------------------------- - classic : STEP112/113-1 확정 화면 유지 - light : 밝은 화이트 + 대륭 오렌지 포인트 - dark : 네이비 다크 업무형 - cinematic : 차콜/블루 + 오렌지 포인트 - 인쇄/A4 규칙은 수정하지 않으며 화면(@media screen)에서만 적용 ========================================================= */ /* 1) LIGHT ------------------------------------------------ */ /* ===== STEP113-2-4: 최종 테마 토큰 통합 ===== */ html[data-theme="classic"]{ --dr-section-bg:#f3f8fc; --dr-table-head-bg:#e8f2f9; --dr-table-head-text:#244764; --dr-row-alt:#f8fbfd; --dr-row-hover:#eef6fb; --dr-accent-wash:#eff6ff; --dr-accent-ink:#1e40af; --dr-mobile-header:#111d35; --dr-mobile-button:#223c68; --dr-button-primary:#3979a7; --dr-button-primary-hover:#316b95; --dr-button-contrast:#ffffff; --dr-primary-contrast:#ffffff; /* STEP113-2-6: 화면 공통 의미 토큰 */ --dr-section-title-bg:#2f8fc5; --dr-section-title-text:#ffffff; --dr-section-border:#b8d3e7; --dr-field-label:#30465a; --dr-component-border:#d7e4ef; --dr-table-divider:#d5e4ef; } html[data-theme="light"]{ color-scheme:light; --dr-bg:#f5f3f1; --dr-surface:#ffffff; --dr-surface-soft:#f8f6f4; --dr-surface-hover:#f4efec; --dr-text:#2f3338; --dr-text-strong:#202328; --dr-text-muted:#74777c; --dr-text-soft:#a0a2a6; --dr-border:#dedbd8; --dr-border-soft:#e9e6e3; --dr-border-strong:#cbc6c2; --dr-focus:#b57969; --dr-focus-ring:rgba(181,121,105,.16); --dr-primary:#b57969; --dr-primary-hover:#9f695b; --dr-primary-soft:#f3e9e5; --dr-primary-soft-hover:#ecddd7; --dr-primary-border:#d7b6ad; --dr-primary-text:#68443a; --dr-danger:#c94b5b; --dr-danger-hover:#b83d4c; --dr-success:#15803d; --dr-warning:#b45309; --dr-sidebar-start:#f3f0ed; --dr-sidebar-mid:#f8f6f4; --dr-sidebar-end:#ece9e6; --dr-sidebar-text:#34373b; --dr-sidebar-muted:#96918d; --dr-sidebar-subtext:#76716e; --dr-sidebar-item:#55585c; --dr-sidebar-accent:#b57969; --dr-sidebar-icon:#9f695b; --dr-sidebar-hover:rgba(181,121,105,.08); --dr-sidebar-open:rgba(181,121,105,.04); --dr-sidebar-active-start:rgba(181,121,105,.14); --dr-sidebar-active-end:rgba(181,121,105,.03); --dr-shadow-panel:0 1px 3px rgba(27,31,36,.05); --dr-shadow-sidebar:4px 0 18px rgba(27,31,36,.08); --dr-shadow-modalbar:0 2px 9px rgba(27,31,36,.06); --dr-section-bg:#faf7f5; --dr-table-head-bg:#eee9e5; --dr-table-head-text:#544944; --dr-row-alt:#fbf9f7; --dr-row-hover:#f5efeb; --dr-accent-wash:#f4eae6; --dr-accent-ink:#765045; --dr-mobile-header:#f3f0ed; --dr-mobile-button:#a86c5d; --dr-primary-contrast:#ffffff; --dr-button-primary:#a86c5d; --dr-button-primary-hover:#935d50; --dr-button-contrast:#ffffff; /* STEP113-2-6: 화면 공통 의미 토큰 */ --dr-section-title-bg:var(--dr-primary); --dr-section-title-text:var(--dr-primary-contrast); --dr-section-border:var(--dr-border); --dr-field-label:var(--dr-text-muted); --dr-component-border:var(--dr-border); --dr-table-divider:var(--dr-border-soft); } html[data-theme="dark"]{ color-scheme:dark; --dr-bg:#11171a; --dr-surface:#1a2226; --dr-surface-soft:#202b30; --dr-surface-hover:#27343a; --dr-text:#e3e9eb; --dr-text-strong:#f5f8f9; --dr-text-muted:#a8b3b7; --dr-text-soft:#7e8c91; --dr-border:#35454b; --dr-border-soft:#2c3b40; --dr-border-strong:#485b62; --dr-focus:#6b9296; --dr-focus-ring:rgba(107,146,150,.18); --dr-primary:#5a8084; --dr-primary-hover:#678f94; --dr-primary-soft:#273b3e; --dr-primary-soft-hover:#30474b; --dr-primary-border:#587277; --dr-primary-text:#e0edef; --dr-danger:#cc5868; --dr-danger-hover:#db6878; --dr-success:#34a66a; --dr-warning:#d4933b; --dr-sidebar-start:#0d1417; --dr-sidebar-mid:#121d21; --dr-sidebar-end:#0e171a; --dr-sidebar-text:#e2eaec; --dr-sidebar-muted:#768b91; --dr-sidebar-subtext:#9aabb0; --dr-sidebar-item:#becace; --dr-sidebar-accent:#6b9296; --dr-sidebar-icon:#7fa3a7; --dr-sidebar-hover:rgba(107,146,150,.11); --dr-sidebar-open:rgba(107,146,150,.05); --dr-sidebar-active-start:rgba(107,146,150,.23); --dr-sidebar-active-end:rgba(107,146,150,.05); --dr-overlay:rgba(2,7,14,.72); --dr-shadow-panel:0 1px 3px rgba(0,0,0,.20); --dr-shadow-sidebar:5px 0 24px rgba(0,0,0,.35); --dr-shadow-modalbar:0 2px 10px rgba(0,0,0,.22); --dr-section-bg:#1c272b; --dr-table-head-bg:#243136; --dr-table-head-text:#d7e1e3; --dr-row-alt:#1c272b; --dr-row-hover:#27353a; --dr-accent-wash:#26383b; --dr-accent-ink:#c4d9dc; --dr-mobile-header:#0d1417; --dr-mobile-button:#4e7478; --dr-primary-contrast:#ffffff; --dr-button-primary:#4e7478; --dr-button-primary-hover:#5c858a; --dr-button-contrast:#ffffff; /* STEP113-2-6: 화면 공통 의미 토큰 */ --dr-section-title-bg:var(--dr-primary); --dr-section-title-text:var(--dr-primary-contrast); --dr-section-border:var(--dr-border); --dr-field-label:var(--dr-text-muted); --dr-component-border:var(--dr-border); --dr-table-divider:var(--dr-border-soft); } html[data-theme="cinematic"]{ color-scheme:dark; --dr-bg:#101215; --dr-surface:#1a1d21; --dr-surface-soft:#202429; --dr-surface-hover:#292e34; --dr-text:#e9eaec; --dr-text-strong:#f8f8f9; --dr-text-muted:#b0b2b6; --dr-text-soft:#85898f; --dr-border:#3b4047; --dr-border-soft:#32363c; --dr-border-strong:#505760; --dr-focus:#b66f5e; --dr-focus-ring:rgba(182,111,94,.17); --dr-primary:#b66f5e; --dr-primary-hover:#c07c6b; --dr-primary-soft:#392b28; --dr-primary-soft-hover:#44312d; --dr-primary-border:#755248; --dr-primary-text:#f0d9d3; --dr-danger:#cf5664; --dr-danger-hover:#df6674; --dr-success:#4aa675; --dr-warning:#d7a24b; --dr-sidebar-start:#0b0d10; --dr-sidebar-mid:#12161b; --dr-sidebar-end:#0d1014; --dr-sidebar-text:#eef0f2; --dr-sidebar-muted:#777e86; --dr-sidebar-subtext:#a5aab0; --dr-sidebar-item:#c1c5ca; --dr-sidebar-accent:#b66f5e; --dr-sidebar-icon:#c48576; --dr-sidebar-hover:rgba(182,111,94,.09); --dr-sidebar-open:rgba(182,111,94,.045); --dr-sidebar-active-start:rgba(182,111,94,.21); --dr-sidebar-active-end:rgba(182,111,94,.045); --dr-overlay:rgba(0,0,0,.78); --dr-shadow-panel:0 8px 28px rgba(0,0,0,.16); --dr-shadow-sidebar:6px 0 28px rgba(0,0,0,.42); --dr-shadow-modalbar:0 3px 14px rgba(0,0,0,.24); --dr-section-bg:#1d2024; --dr-table-head-bg:#2b2726; --dr-table-head-text:#e6d8d4; --dr-row-alt:#1c1f23; --dr-row-hover:#292523; --dr-accent-wash:#332927; --dr-accent-ink:#e1bdb4; --dr-mobile-header:#0d1014; --dr-mobile-button:#a86253; --dr-primary-contrast:#ffffff; --dr-button-primary:#a86253; --dr-button-primary-hover:#b56f60; --dr-button-contrast:#ffffff; /* STEP113-2-6: 화면 공통 의미 토큰 */ --dr-section-title-bg:var(--dr-primary); --dr-section-title-text:var(--dr-primary-contrast); --dr-section-border:var(--dr-border); --dr-field-label:var(--dr-text-muted); --dr-component-border:var(--dr-border); --dr-table-divider:var(--dr-border-soft); } /* 2) DARK ------------------------------------------------- */ /* 3) CINEMATIC ------------------------------------------- */ @media screen { /* 테마 전환기 ------------------------------------------ */ .dr-theme-switcher { position: relative; display: inline-flex; align-items: center; } .dr-theme-toggle { min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; } .dr-theme-toggle .dr-theme-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dr-primary); box-shadow: 0 0 0 3px var(--dr-primary-soft); } .dr-theme-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 292px; padding: 10px; z-index: 120000; border: 1px solid var(--dr-border); border-radius: 12px; background: var(--dr-surface); box-shadow: 0 14px 36px rgba(15,23,42,.22); } .dr-theme-menu[hidden] { display: none !important; } .dr-theme-menu-title { padding: 2px 4px 9px; color: var(--dr-text-strong); font-size: 13px; font-weight: 800; } .dr-theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dr-theme-option { appearance: none; border: 1px solid var(--dr-border); border-radius: 10px; background: var(--dr-surface-soft); color: var(--dr-text); min-height: 64px; padding: 8px; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; } .dr-theme-option:hover { border-color: var(--dr-primary); background: var(--dr-surface-hover); transform: translateY(-1px); } .dr-theme-option.active { border-color: var(--dr-primary); box-shadow: 0 0 0 2px var(--dr-focus-ring); } .dr-theme-preview { height: 22px; display: grid; grid-template-columns: 28% 72%; overflow: hidden; border-radius: 6px; margin-bottom: 6px; border: 1px solid rgba(127,127,127,.25); } .dr-theme-preview i, .dr-theme-preview b { display: block; } .dr-theme-preview.classic i { background: #172b4d; } .dr-theme-preview.classic b { background: #f4f6f9; border-left: 4px solid #3979a7; } .dr-theme-preview.light b { background: #f7f8fa; border-left: 4px solid #e2725b; } .dr-theme-preview.dark b { background: #162234; border-left: 4px solid #3d86c6; } .dr-theme-preview.cinematic b { background: #191e26; border-left: 4px solid #e2725b; } .dr-theme-option strong { display: block; font-size: 12px; color: var(--dr-text-strong); } .dr-theme-option small { display: block; margin-top: 2px; color: var(--dr-text-muted); font-size: 10px; } /* LIGHT 세부 표현 ------------------------------------- */ html[data-theme="light"] .sidebar { border-right: 1px solid #e5e7eb; } html[data-theme="light"] .brand, html[data-theme="light"] .menu-head, html[data-theme="light"] .menu-item { text-shadow: none; } html[data-theme="light"] .brand { color: #242933; } html[data-theme="light"] .brand-mark { background: linear-gradient(135deg, #e2725b, #c85843); color: #fff; } /* DARK / CINEMATIC 공통 가독성 ----------------------- */ html[data-theme="dark"] .topbar, html[data-theme="cinematic"] .topbar, html[data-theme="dark"] #content, html[data-theme="cinematic"] #content { color: var(--dr-text); } html[data-theme="dark"] .topbar h1, html[data-theme="cinematic"] .topbar h1, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="cinematic"] h1, html[data-theme="cinematic"] h2, html[data-theme="cinematic"] h3, html[data-theme="cinematic"] h4 { color: var(--dr-text-strong); } html[data-theme="dark"] .office-kpi, html[data-theme="cinematic"] .office-kpi, html[data-theme="dark"] .office11229-kpi, html[data-theme="cinematic"] .office11229-kpi, html[data-theme="dark"] .inventory-kpi, html[data-theme="cinematic"] .inventory-kpi, html[data-theme="dark"] .site50-card, html[data-theme="cinematic"] .site50-card, html[data-theme="dark"] .final-panel, html[data-theme="cinematic"] .final-panel, html[data-theme="dark"] .calendar-panel, html[data-theme="cinematic"] .calendar-panel, html[data-theme="dark"] .office11229-section, html[data-theme="cinematic"] .office11229-section, html[data-theme="dark"] .office11229-form-section, html[data-theme="cinematic"] .office11229-form-section, html[data-theme="dark"] .office112291-day-section, html[data-theme="cinematic"] .office112291-day-section, html[data-theme="dark"] .schedule-list-panel, html[data-theme="cinematic"] .schedule-list-panel { background: var(--dr-surface); border-color: var(--dr-border); color: var(--dr-text); } html[data-theme="dark"] .office-kpi span, html[data-theme="cinematic"] .office-kpi span, html[data-theme="dark"] .office11229-kpi span, html[data-theme="cinematic"] .office11229-kpi span, html[data-theme="dark"] .office-activity small, html[data-theme="cinematic"] .office-activity small, html[data-theme="dark"] label, html[data-theme="cinematic"] label, html[data-theme="dark"] .hint, html[data-theme="cinematic"] .hint { color: var(--dr-text-muted); } html[data-theme="dark"] .office-mini-row, html[data-theme="cinematic"] .office-mini-row, html[data-theme="dark"] .office-notice-row, html[data-theme="cinematic"] .office-notice-row, html[data-theme="dark"] .admin-user-row, html[data-theme="cinematic"] .admin-user-row, html[data-theme="dark"] .office-activity > div, html[data-theme="cinematic"] .office-activity > div { border-bottom-color: var(--dr-border-soft); } html[data-theme="dark"] .admin-menu-buttons, html[data-theme="cinematic"] .admin-menu-buttons, html[data-theme="dark"] .qty53, html[data-theme="cinematic"] .qty53 { background: var(--dr-surface-soft) !important; border-color: var(--dr-border) !important; color: var(--dr-text) !important; } html[data-theme="dark"] .qty53 span, html[data-theme="cinematic"] .qty53 span { background: var(--dr-surface) !important; border-color: var(--dr-border) !important; } html[data-theme="dark"] .office11229-table, html[data-theme="cinematic"] .office11229-table, html[data-theme="dark"] .office112291-day-table, html[data-theme="cinematic"] .office112291-day-table { color: var(--dr-text); } html[data-theme="dark"] .office11229-table th, html[data-theme="cinematic"] .office11229-table th, html[data-theme="dark"] .office112291-day-table th, html[data-theme="cinematic"] .office112291-day-table th { background: var(--dr-surface-soft); color: var(--dr-text-muted); border-color: var(--dr-border); } html[data-theme="dark"] .office11229-table td, html[data-theme="cinematic"] .office11229-table td, html[data-theme="dark"] .office112291-day-table td, html[data-theme="cinematic"] .office112291-day-table td { border-color: var(--dr-border-soft); } /* 시네마틱은 메인 배경에 은은한 조명감을 추가한다. */ html[data-theme="cinematic"] .sidebar { background: linear-gradient(165deg, rgba(226,114,91,.035), transparent 30%), linear-gradient(165deg, var(--dr-sidebar-start), var(--dr-sidebar-mid) 55%, var(--dr-sidebar-end)); } /* 모바일 테마 메뉴 */ @media (max-width: 900px) { .topbar-actions { gap: 6px; align-items: center; } .dr-theme-toggle { min-width: 74px; padding-left: 10px; padding-right: 10px; } .dr-theme-menu { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; } } } @media screen { /* 다크 계열 공통 테이블/달력 보정 */ html[data-theme="dark"] .table, html[data-theme="cinematic"] .table, html[data-theme="dark"] .process50-table, html[data-theme="cinematic"] .process50-table, html[data-theme="dark"] .drawing-table8, html[data-theme="cinematic"] .drawing-table8, html[data-theme="dark"] .work-table8, html[data-theme="cinematic"] .work-table8 { background: var(--dr-surface); color: var(--dr-text); } html[data-theme="dark"] .table th, html[data-theme="cinematic"] .table th, html[data-theme="dark"] .process50-table th, html[data-theme="cinematic"] .process50-table th, html[data-theme="dark"] .drawing-table8 th, html[data-theme="cinematic"] .drawing-table8 th, html[data-theme="dark"] .work-table8 th, html[data-theme="cinematic"] .work-table8 th { background: var(--dr-surface-soft) !important; color: var(--dr-text-muted) !important; border-color: var(--dr-border) !important; } html[data-theme="dark"] .table td, html[data-theme="cinematic"] .table td, html[data-theme="dark"] .process50-table td, html[data-theme="cinematic"] .process50-table td, html[data-theme="dark"] .drawing-table8 td, html[data-theme="cinematic"] .drawing-table8 td, html[data-theme="dark"] .work-table8 td, html[data-theme="cinematic"] .work-table8 td { color: var(--dr-text); border-color: var(--dr-border-soft) !important; } html[data-theme="dark"] .cal-head span, html[data-theme="cinematic"] .cal-head span { background: var(--dr-surface-soft); color: var(--dr-text-muted); border-color: var(--dr-border); } html[data-theme="dark"] .cal-day, html[data-theme="cinematic"] .cal-day { background: var(--dr-surface); color: var(--dr-text); border-color: var(--dr-border); } html[data-theme="dark"] .cal-day.empty, html[data-theme="cinematic"] .cal-day.empty { background: var(--dr-surface-soft); } html[data-theme="dark"] .cal-day.today, html[data-theme="cinematic"] .cal-day.today { background: var(--dr-surface-hover); box-shadow: inset 0 0 0 2px var(--dr-focus); } html[data-theme="dark"] .cal-event { background: #233f5d; color: #cfe8ff; } html[data-theme="cinematic"] .cal-event { background: #49302c; color: #ffded6; } /* 선택된 테마가 상단 버튼 자체에도 바로 드러나도록 함 */ html[data-theme="light"] .dr-theme-toggle, html[data-theme="cinematic"] .dr-theme-toggle { border-color: var(--dr-primary-border); } } @media screen and (max-width: 900px) { .topbar .dr-theme-toggle { display: inline-flex !important; } } /* ===== SOURCE: css/step113-2-1.css ===== */ /* ========================================================= DAERYUNG ERP STEP113-2-1 - 4종 테마 강조색 전면 적용 --------------------------------------------------------- 목적 - STEP112 누적 CSS에 남아 있는 고정 파란색과 !important를 삭제하지 않고, 마지막 화면용 오버라이드로 안전하게 제어한다. - 인쇄/A4 문서 자체의 색상 규칙은 건드리지 않는다. ========================================================= */ @media screen { /* 앱 전체 표면 ------------------------------------------------ */ html[data-theme] body{background:var(--dr-bg)!important;color:var(--dr-text)!important;} html[data-theme] .main, html[data-theme] #content{background:var(--dr-bg)!important;color:var(--dr-text)!important;} html[data-theme] .sidebar{ background:linear-gradient(165deg,var(--dr-sidebar-start),var(--dr-sidebar-mid) 55%,var(--dr-sidebar-end))!important; color:var(--dr-sidebar-text)!important; border-right:1px solid color-mix(in srgb,var(--dr-sidebar-accent) 22%, transparent)!important; } html[data-theme] .brand{color:var(--dr-sidebar-text)!important;} html[data-theme] .brand-sub{color:var(--dr-sidebar-subtext)!important;} html[data-theme] .sidebar-label{color:var(--dr-sidebar-muted)!important;} html[data-theme] .brand-mark{ background:linear-gradient(135deg,var(--dr-sidebar-accent),var(--dr-primary-hover))!important; box-shadow:0 5px 14px color-mix(in srgb,var(--dr-sidebar-accent) 32%, transparent)!important; } html[data-theme] .menu-head{color:var(--dr-sidebar-text)!important;} html[data-theme] .menu-icon{color:var(--dr-sidebar-icon)!important;} html[data-theme] .menu-chevron{color:var(--dr-sidebar-muted)!important;} html[data-theme] .menu-group.open{background:var(--dr-sidebar-open)!important;} html[data-theme] .menu-head:hover, html[data-theme] .menu-group.open .menu-head{background:var(--dr-sidebar-hover)!important;color:var(--dr-sidebar-text)!important;} html[data-theme] .submenu{border-left-color:color-mix(in srgb,var(--dr-sidebar-accent) 36%, transparent)!important;} html[data-theme] .menu-item{color:var(--dr-sidebar-item)!important;} html[data-theme] .menu-item:hover, html[data-theme] .menu-item.active{ background:linear-gradient(90deg,var(--dr-sidebar-active-start),var(--dr-sidebar-active-end))!important; color:var(--dr-sidebar-text)!important; } html[data-theme] .menu-item.active{box-shadow:inset 3px 0 0 var(--dr-sidebar-accent)!important;} html[data-theme] .topbar h1{color:var(--dr-text-strong)!important;} html[data-theme] .topbar span{color:var(--dr-text-muted)!important;} /* 공통 버튼 - 기존 #3979a7/#2563eb !important보다 우선 -------- */ html[data-theme] .btn.secondary, html[data-theme] button.btn.secondary, html[data-theme] .table .action-detail, html[data-theme] .table .action-edit{ background:var(--dr-primary-soft)!important; border-color:var(--dr-primary-border)!important; color:var(--dr-primary-text)!important; } html[data-theme] .btn.secondary:hover, html[data-theme] button.btn.secondary:hover, html[data-theme] .table .action-detail:hover, html[data-theme] .table .action-edit:hover{ background:var(--dr-primary-soft-hover)!important; border-color:var(--dr-primary)!important; color:var(--dr-primary-text)!important; } /* STEP112 공통 섹션 표면 ------------------------------------- */ html[data-theme] :is( .erp11226-section,.site11227-section,.purchase112182-section, .po11219-list-section,.imp11220-list-section,.gr11221-section, .shp11223-section,.site11224-section,.site112243-section, .as11225-section,.inventory109 .inv11222-section,.office11229-section, .inv112281-form-section,.office11229-form-section,.office112291-day-section, #modal .order11217-section,#modal .purchase11218-section,#modal .po11219-section, #modal .imp11220-section,.gr11221-form-section,.shp11223-form-section, .site11224-form-section,.as11225-form-section,#modal .production11311-section ){ background:var(--dr-section-bg)!important; border-color:var(--dr-border)!important; color:var(--dr-text)!important; } /* 모든 최근 공통 섹션 제목의 파란색 제거 */ html[data-theme] :is( .erp11226-title,.site11227-title,.purchase112182-title, .po11219-list-title,.imp11220-list-title,.gr11221-title,.gr11221-form-title, .shp11223-title,.shp11223-form-title,.site11224-title,.site11224-form-title, .site112243-title,.as11225-title,.as11225-form-title, .inventory109 .inv11222-title,.office11229-title,.inv112281-form-title, .office11229-form-title,.office112291-day-title, #modal .customer-direct-section-title,#modal .quote-section-title,#modal .order11217-title, #modal .purchase11218-title,#modal .purchase11218-titlebar, #modal .po11219-title,#modal .po11219-titlebar, #modal .imp11220-title,#modal .imp11220-titlebar, #modal .production11311-title ){ background:var(--dr-primary)!important; border-color:var(--dr-primary)!important; color:#fff!important; } /* 입력창/라벨 ------------------------------------------------ */ html[data-theme] :is( .erp11226-search-field label,.site11227-field label,.purchase112182-field label, .site11224-field label,.site11224-form-section label,.site112243-field label, .as11225-field label,.inventory109 .inv11222-field label,.inv112281-form label, .office11229-form label,#modal .production11311-section label ){color:var(--dr-text-muted)!important;} html[data-theme] :is( .erp11226-search-field input,.erp11226-search-field select, .site11227-field input,.site11227-field select, .purchase112182-field input,.purchase112182-field select, .site11224-field input,.site11224-field select,.site11224-form-section input,.site11224-form-section select,.site11224-form-section textarea, .site112243-field input,.site112243-field select, .as11225-field input,.as11225-field select,.as11225-field textarea, .inventory109 .inv11222-field input,.inventory109 .inv11222-field select, .inv112281-form input,.inv112281-form select,.inv112281-form textarea, .office11229-form input,.office11229-form select,.office11229-form textarea, #modal .production11311-section input,#modal .production11311-section select,#modal .production11311-section textarea ){ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-strong)!important; } /* 테이블 - 최근 공통 구조 ------------------------------------ */ html[data-theme] :is( .erp11226-table,.site11227-table,.office11229-table,.office112291-day-table, .inventory109 .inv11222-table-section .table,.inventory109 #invLedgerResult .table, .gr11221-table-section .table,.shp11223-section .table,.as11225-section .table, .site11224-section .table,.site112243-section .table ){ background:var(--dr-surface)!important; color:var(--dr-text)!important; } html[data-theme] :is( .erp11226-table thead th,.site11227-table thead th,.office11229-table thead th,.office112291-day-table thead th, .inventory109 .inv11222-table-section .table thead th,.inventory109 #invLedgerResult .table thead th, .gr11221-table-section .table thead th,.shp11223-section .table thead th, .as11225-section .table thead th,.site11224-section .table thead th,.site112243-section .table thead th ){ background:var(--dr-table-head-bg)!important; color:var(--dr-table-head-text)!important; border-color:var(--dr-border)!important; } html[data-theme] :is( .erp11226-table tbody td,.site11227-table tbody td,.office11229-table tbody td,.office112291-day-table tbody td, .inventory109 .inv11222-table-section .table tbody td,.inventory109 #invLedgerResult .table tbody td, .gr11221-table-section .table tbody td,.shp11223-section .table tbody td, .as11225-section .table tbody td,.site11224-section .table tbody td,.site112243-section .table tbody td ){ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-soft)!important; } html[data-theme] :is( .erp11226-table,.site11227-table,.office11229-table,.office112291-day-table, .inventory109 .inv11222-table-section .table,.inventory109 #invLedgerResult .table, .gr11221-table-section .table ) tbody tr:nth-child(even) td{background:var(--dr-row-alt)!important;} html[data-theme] :is( .erp11226-table,.site11227-table,.office11229-table,.office112291-day-table, .inventory109 .inv11222-table-section .table,.inventory109 #invLedgerResult .table, .gr11221-table-section .table ) tbody tr:hover td{background:var(--dr-row-hover)!important;} /* 카드/KPI/공지/검색 박스 ------------------------------------ */ html[data-theme] :is( .card,.panel,.site50-card,.draw50,.process50-kpi>div,.process50-table-wrap, .office-kpi,.office11229-kpi,.office11229-today-work,.office112291-day-summary>div, .inventory109 .inv11222-kpi>div,.as11225-activity,.site11227-section .site-selector-v3, .inv112281-help,.production11311-note,.production11311-flow ){ background:var(--dr-surface)!important; border-color:var(--dr-border)!important; color:var(--dr-text)!important; } html[data-theme] :is( .erp11226-notice,.site11227-notice,.purchase112182-notice,.po11219-notice,.imp11220-notice, .gr11221-notice,.shp11223-notice,.site11224-notice,.site112243-notice,.as11225-notice, .inventory109 .inv11222-notice,.office11229-notice,.site50-notice ){ background:var(--dr-accent-wash)!important; border-color:var(--dr-primary-border)!important; color:var(--dr-primary-text)!important; } html[data-theme] :is( .inventory109 .inv11222-kpi strong,.office11229-kpi strong,.office112291-day-summary strong, .office11229-list-info b,.site11227-head h2,.office11229-calendar-section .calendar-v4-titlebar h3 ){color:var(--dr-text-strong)!important;} /* 달력 / 진행상태에서 남아 있던 파란 강조 --------------------- */ html[data-theme] .cal-head span{background:var(--dr-surface-soft)!important;border-color:var(--dr-border)!important;color:var(--dr-text)!important;} html[data-theme] .cal-day{background:var(--dr-surface)!important;border-color:var(--dr-border)!important;color:var(--dr-text)!important;} html[data-theme] .cal-day.empty{background:var(--dr-surface-soft)!important;} html[data-theme] .cal-day.today{background:var(--dr-accent-wash)!important;box-shadow:inset 0 0 0 2px var(--dr-primary)!important;} html[data-theme] .cal-event{background:var(--dr-primary-soft)!important;color:var(--dr-primary-text)!important;} html[data-theme] .site50-bar i{background:var(--dr-primary)!important;} html[data-theme] .stage50.active{border-color:var(--dr-primary)!important;box-shadow:inset 0 0 0 1px var(--dr-primary)!important;} html[data-theme] .draw50-file small{color:var(--dr-primary)!important;} html[data-theme] .step-badge{background:var(--dr-primary-soft)!important;color:var(--dr-primary-text)!important;} html[data-theme] .site-row-selected td{background:var(--dr-accent-wash)!important;} html[data-theme] .dr-voice-btn.listening{outline-color:var(--dr-focus-ring)!important;background:var(--dr-primary-soft)!important;color:var(--dr-primary-text)!important;} /* 테마 선택창도 각 테마 표면에 완전히 동기화 ------------------- */ html[data-theme] .dr-theme-menu{background:var(--dr-surface)!important;border-color:var(--dr-border)!important;color:var(--dr-text)!important;} html[data-theme] .dr-theme-option{background:var(--dr-surface-soft)!important;border-color:var(--dr-border)!important;color:var(--dr-text)!important;} html[data-theme] .dr-theme-option.active{border-color:var(--dr-primary)!important;box-shadow:0 0 0 2px var(--dr-focus-ring)!important;} /* 모바일 고정 파란색 제거 ------------------------------------ */ html[data-theme] .mobile-header{background:var(--dr-mobile-header)!important;color:var(--dr-text-strong)!important;} html[data-theme] .mobile-menu-button, html[data-theme] .mobile-home-button{background:var(--dr-mobile-button)!important;border-color:color-mix(in srgb,var(--dr-primary) 55%, #ffffff 25%)!important;color:#fff!important;} /* 라이트 테마는 파란색 잔상을 최소화 --------------------------- */ html[data-theme="light"] .sidebar{box-shadow:4px 0 18px rgba(67,42,35,.08)!important;} html[data-theme="light"] .menu-item:hover, html[data-theme="light"] .menu-item.active{color:#713425!important;} html[data-theme="light"] .menu-head:hover, html[data-theme="light"] .menu-group.open .menu-head{color:#33231f!important;} /* 시네마틱은 오렌지 발광을 조금 더 강조 ----------------------- */ } @media screen { /* 모달/일반 입력창의 고정 흰색까지 테마 표면으로 통일 */ html[data-theme] .modal-box, html[data-theme] .modal-actionbar{ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border)!important; } html[data-theme] #content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html[data-theme] #content select, html[data-theme] #content textarea, html[data-theme] #modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html[data-theme] #modal select, html[data-theme] #modal textarea{ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-strong)!important; } html[data-theme] #content input:focus, html[data-theme] #content select:focus, html[data-theme] #content textarea:focus, html[data-theme] #modal input:focus, html[data-theme] #modal select:focus, html[data-theme] #modal textarea:focus{ border-color:var(--dr-focus)!important; outline-color:var(--dr-focus-ring)!important; } /* 테마 선택 미리보기 자체도 실제 팔레트와 맞춘다. */ } /* ===== SOURCE: css/step113-2-2.css ===== */ /* ========================================================= DAERYUNG ERP STEP113-2-2 - 차분한 테마 + 사용자 색상 조정 --------------------------------------------------------- - STEP113-2-1 기능을 유지하면서 기본 팔레트 채도를 낮춘다. - 화면 테마의 핵심 색상을 사용자가 직접 조정할 수 있게 한다. - A4/인쇄 규칙은 이 파일에서 재정의하지 않는다. ========================================================= */ /* 기본 프리셋: CLASSIC은 기존 확정 색상 유지 */ /* LIGHT: 넓은 면적은 중성색, 포인트만 저채도 웜톤 */ /* DARK: 기존 청록을 낮춘 회청록으로 */ /* CINEMATIC: 오렌지는 유지하되 채도와 면적을 낮춤 */ @media screen { /* 버튼 색상을 주색상과 별도로 조정할 수 있도록 분리 */ html[data-theme] .btn:not(.secondary):not(.danger), html[data-theme] button.btn:not(.secondary):not(.danger), html[data-theme] .btn.primary, html[data-theme] button.btn.primary, html[data-theme] .table .btn.action-preview, html[data-theme] :is(#content,#modal) table .erp-list-actions .action-preview, html[data-theme] .quote-preview-toolbar .btn.primary, html[data-theme] .document-print-toolbar .btn.primary { background:var(--dr-button-primary,var(--dr-primary))!important; border-color:var(--dr-button-primary,var(--dr-primary))!important; color:var(--dr-button-contrast,#fff)!important; } html[data-theme] .btn:not(.secondary):not(.danger):hover, html[data-theme] button.btn:not(.secondary):not(.danger):hover, html[data-theme] .btn.primary:hover, html[data-theme] .table .btn.action-preview:hover, html[data-theme] :is(#content,#modal) table .erp-list-actions .action-preview:hover { background:var(--dr-button-primary-hover,var(--dr-primary-hover))!important; border-color:var(--dr-button-primary-hover,var(--dr-primary-hover))!important; color:var(--dr-button-contrast,#fff)!important; } /* 섹션 제목은 주색상을 사용하되 밝은 사용자 색상도 대비 보장 */ html[data-theme] :is( .erp11226-title,.site11227-title,.purchase112182-title, .po11219-list-title,.imp11220-list-title,.gr11221-title,.gr11221-form-title, .shp11223-title,.shp11223-form-title,.site11224-title,.site11224-form-title, .site112243-title,.as11225-title,.as11225-form-title, .inventory109 .inv11222-title,.office11229-title,.inv112281-form-title, .office11229-form-title,.office112291-day-title, #modal .customer-direct-section-title,#modal .quote-section-title,#modal .order11217-title, #modal .purchase11218-title,#modal .purchase11218-titlebar, #modal .po11219-title,#modal .po11219-titlebar, #modal .imp11220-title,#modal .imp11220-titlebar, #modal .production11311-title ) { color:var(--dr-primary-contrast,#fff)!important; } /* 테마 메뉴: 색상 편집기가 펼쳐질 공간 */ .dr-theme-menu{width:372px;max-height:min(78vh,690px);overflow:auto;} .dr-theme-tools{margin-top:10px;padding-top:9px;border-top:1px solid var(--dr-border);} .dr-theme-customize-toggle{ width:100%;display:flex;justify-content:space-between;align-items:center; min-height:36px;padding:7px 10px;border:1px solid var(--dr-border);border-radius:9px; background:var(--dr-surface-soft);color:var(--dr-text);font-size:12px;font-weight:800;cursor:pointer; } .dr-theme-customize-toggle:hover{border-color:var(--dr-primary);background:var(--dr-surface-hover);} .dr-theme-customize-toggle .arrow{font-size:10px;color:var(--dr-text-muted);transition:transform .15s ease;} .dr-theme-customize-toggle[aria-expanded="true"] .arrow{transform:rotate(180deg);} .dr-theme-customizer{padding:10px 2px 2px;} .dr-theme-customizer[hidden]{display:none!important;} .dr-theme-customizer-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:9px;} .dr-theme-customizer-head strong{display:block;color:var(--dr-text-strong);font-size:12px;} .dr-theme-customizer-head small{display:block;margin-top:2px;color:var(--dr-text-muted);font-size:10px;line-height:1.45;} .dr-theme-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .dr-theme-color-field{padding:8px;border:1px solid var(--dr-border);border-radius:9px;background:var(--dr-surface-soft);} .dr-theme-color-field label{display:block;margin-bottom:6px;color:var(--dr-text-muted);font-size:10px;font-weight:800;} .dr-theme-color-controls{display:grid;grid-template-columns:32px 1fr;gap:6px;align-items:center;} .dr-theme-color-controls input[type="color"]{ width:32px!important;height:30px!important;min-height:30px!important;padding:2px!important;border:1px solid var(--dr-border-strong)!important; border-radius:7px!important;background:var(--dr-surface)!important;cursor:pointer; } .dr-theme-color-controls input[type="text"]{ width:100%!important;height:30px!important;min-height:30px!important;padding:4px 7px!important; border:1px solid var(--dr-border-strong)!important;border-radius:7px!important;background:var(--dr-surface)!important; color:var(--dr-text)!important;font-size:10px!important;font-family:Consolas,"Courier New",monospace!important;text-transform:uppercase; } .dr-theme-color-controls input.invalid{border-color:#c94b5b!important;box-shadow:0 0 0 2px rgba(201,75,91,.12)!important;} .dr-theme-customizer-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:9px;} .dr-theme-reset-btn{ min-height:32px;padding:6px 10px;border:1px solid var(--dr-border);border-radius:8px;background:var(--dr-surface); color:var(--dr-text-muted);font-size:11px;font-weight:800;cursor:pointer; } .dr-theme-reset-btn:hover{border-color:var(--dr-primary);color:var(--dr-text);} .dr-theme-save-note{margin-right:auto;align-self:center;color:var(--dr-text-soft);font-size:9px;} .dr-theme-palette-presets{margin:0 0 10px;padding:9px;border:1px solid var(--dr-border);border-radius:10px;background:var(--dr-surface-soft);} .dr-theme-palette-presets[hidden]{display:none!important;} .dr-theme-palette-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px;} .dr-theme-palette-title strong{font-size:11px;color:var(--dr-text-strong);} .dr-theme-palette-title small{font-size:9px;color:var(--dr-text-soft);} .dr-theme-palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .dr-theme-palette{display:flex;align-items:center;gap:7px;min-height:34px;padding:5px 7px;border:1px solid var(--dr-border);border-radius:8px;background:var(--dr-surface);color:var(--dr-text);cursor:pointer;text-align:left;} .dr-theme-palette:hover{border-color:var(--dr-primary);background:var(--dr-surface-hover);} .dr-theme-palette.active{border-color:var(--dr-primary);box-shadow:0 0 0 2px var(--dr-focus-ring);background:var(--dr-primary-soft);} .dr-theme-palette-swatches{display:flex;flex:0 0 auto;width:42px;height:20px;overflow:hidden;border:1px solid var(--dr-border);border-radius:6px;} .dr-theme-palette-swatches i{display:block;flex:1;height:100%;} .dr-theme-palette-name{min-width:0;font-size:9.5px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .dr-theme-palette-custom{margin-top:6px;font-size:9px;font-weight:700;color:var(--dr-primary-text);text-align:right;} /* 채도를 낮춘 시네마틱 배경 */ html[data-theme="cinematic"] body{ background: radial-gradient(circle at 78% 8%,rgba(182,111,94,.04),transparent 30%), radial-gradient(circle at 18% 80%,rgba(72,85,97,.07),transparent 34%), var(--dr-bg)!important; } html[data-theme="cinematic"] .brand-mark{ background:linear-gradient(135deg,var(--dr-sidebar-accent),color-mix(in srgb,var(--dr-sidebar-accent) 72%, #111 28%))!important; } html[data-theme="cinematic"] .menu-item.active, html[data-theme="cinematic"] .dr-theme-toggle{ box-shadow:inset 3px 0 0 var(--dr-sidebar-accent),0 0 12px color-mix(in srgb,var(--dr-sidebar-accent) 7%, transparent)!important; } @media (max-width:900px){ .dr-theme-menu{left:10px;right:10px;top:66px;width:auto;max-height:calc(100vh - 78px);} .dr-theme-color-grid{grid-template-columns:1fr;} } } @media screen { /* 테마 선택 미리보기도 새 저채도 기본값과 일치 */ .dr-theme-preview.light i{background:#F3F0ED!important;} .dr-theme-preview.light b{background:#F5F3F1!important;border-left-color:#B57969!important;} .dr-theme-preview.dark i{background:#0D1417!important;} .dr-theme-preview.dark b{background:#1A2226!important;border-left-color:#6B9296!important;} .dr-theme-preview.cinematic i{background:#0B0D10!important;} .dr-theme-preview.cinematic b{background:#1A1D21!important;border-left-color:#B66F5E!important;} } /* ========================================================= STEP113-3 - 최종 5종 테마 오버라이드 기본 / 봄 / 여름 / 가을 / 겨울 화면 전용이며 @media print/A4 규칙은 변경하지 않는다. ========================================================= */ @media screen { html[data-theme="classic"]{ color-scheme:light; --dr-bg:#F4F5F4;--dr-surface:#FFFFFF;--dr-surface-soft:#F8F9F8;--dr-surface-hover:#F0F3F4; --dr-text:#30363B;--dr-text-strong:#20262B;--dr-text-muted:#6F787F;--dr-text-soft:#9AA2A8; --dr-border:#DCE1E3;--dr-border-soft:#E8EBED;--dr-border-strong:#C9D0D4; --dr-focus:#667789;--dr-focus-ring:rgba(102,119,137,.18); --dr-primary:#667789;--dr-primary-hover:#596A7B;--dr-primary-soft:#E9EDF0;--dr-primary-soft-hover:#DEE4E8; --dr-primary-border:#B8C2CA;--dr-primary-text:#3E4D5A;--dr-primary-contrast:#FFFFFF; --dr-button-primary:#5F7183;--dr-button-primary-hover:#536576;--dr-button-contrast:#FFFFFF; --dr-sidebar-start:#263039;--dr-sidebar-mid:#29333D;--dr-sidebar-end:#222B33; --dr-sidebar-text:#F0F3F4;--dr-sidebar-muted:#98A4AC;--dr-sidebar-subtext:#BBC4C9;--dr-sidebar-item:#D1D7DA; --dr-sidebar-accent:#8EA0AE;--dr-sidebar-icon:#A8B7C2;--dr-sidebar-hover:rgba(142,160,174,.11); --dr-sidebar-open:rgba(142,160,174,.055);--dr-sidebar-active-start:rgba(142,160,174,.24);--dr-sidebar-active-end:rgba(142,160,174,.045); --dr-section-bg:#F8F9F8;--dr-table-head-bg:#E8ECEE;--dr-table-head-text:#46535D;--dr-row-alt:#FAFBFA;--dr-row-hover:#F0F3F4; --dr-accent-wash:#EEF1F3;--dr-accent-ink:#4E5F6D;--dr-mobile-header:#29333D;--dr-mobile-button:#5F7183; --dr-section-title-bg:#667789;--dr-section-title-text:#FFFFFF;--dr-section-border:#DCE1E3; --dr-field-label:#5F6970;--dr-component-border:#DCE1E3;--dr-table-divider:#E2E6E8; } html[data-theme="spring"]{ color-scheme:light; --dr-bg:#FFF6F8;--dr-surface:#FFFFFF;--dr-surface-soft:#FFFAFB;--dr-surface-hover:#FFF0F4; --dr-text:#3D3438;--dr-text-strong:#282023;--dr-text-muted:#78686E;--dr-text-soft:#A7979D; --dr-border:#EAD9DF;--dr-border-soft:#F3E7EB;--dr-border-strong:#DFC4CC; --dr-focus:#D7849A;--dr-focus-ring:rgba(215,132,154,.20); --dr-primary:#D7849A;--dr-primary-hover:#C67289;--dr-primary-soft:#FBE9EE;--dr-primary-soft-hover:#F7DDE5; --dr-primary-border:#EEC4D0;--dr-primary-text:#8F4F62;--dr-primary-contrast:#FFFFFF; --dr-button-primary:#C56F87;--dr-button-primary-hover:#B65E77;--dr-button-contrast:#FFFFFF; --dr-sidebar-start:#304D61;--dr-sidebar-mid:#38566A;--dr-sidebar-end:#294559; --dr-sidebar-text:#FFFFFF;--dr-sidebar-muted:#DCEAF2;--dr-sidebar-subtext:#EAF4F8;--dr-sidebar-item:#F2F8FB; --dr-sidebar-accent:#F0A6B7;--dr-sidebar-icon:#FFD0DA;--dr-sidebar-hover:rgba(240,166,183,.20); --dr-sidebar-open:rgba(240,166,183,.09);--dr-sidebar-active-start:rgba(240,166,183,.34);--dr-sidebar-active-end:rgba(240,166,183,.10); --dr-section-bg:#FFF8FA;--dr-table-head-bg:#F8E5EB;--dr-table-head-text:#6E4A55;--dr-row-alt:#FFFBFC;--dr-row-hover:#FFF0F4; --dr-accent-wash:#FCECF1;--dr-accent-ink:#8A5061;--dr-mobile-header:#38566A;--dr-mobile-button:#C56F87; --dr-section-title-bg:#D7849A;--dr-section-title-text:#FFFFFF;--dr-section-border:#EAD9DF; --dr-field-label:#76535E;--dr-component-border:#EAD9DF;--dr-table-divider:#F0E3E7; } html[data-theme="summer"]{ color-scheme:light; --dr-bg:#F2F9FC;--dr-surface:#FFFFFF;--dr-surface-soft:#F8FCFE;--dr-surface-hover:#ECF7FC; --dr-text:#2D3940;--dr-text-strong:#1E2930;--dr-text-muted:#627784;--dr-text-soft:#90A2AC; --dr-border:#CFE2EC;--dr-border-soft:#E4EFF5;--dr-border-strong:#B7D2DF; --dr-focus:#2E8ED0;--dr-focus-ring:rgba(46,142,208,.20); --dr-primary:#2E8ED0;--dr-primary-hover:#237AB7;--dr-primary-soft:#E2F2FB;--dr-primary-soft-hover:#D4ECF8; --dr-primary-border:#B7DDF0;--dr-primary-text:#24628C;--dr-primary-contrast:#FFFFFF; --dr-button-primary:#2279B8;--dr-button-primary-hover:#1B69A1;--dr-button-contrast:#FFFFFF; --dr-sidebar-start:#1B475F;--dr-sidebar-mid:#20536D;--dr-sidebar-end:#173D52; --dr-sidebar-text:#FFFFFF;--dr-sidebar-muted:#D9ECF5;--dr-sidebar-subtext:#EAF5FA;--dr-sidebar-item:#F1F9FC; --dr-sidebar-accent:#76C4E7;--dr-sidebar-icon:#A9DFF5;--dr-sidebar-hover:rgba(118,196,231,.20); --dr-sidebar-open:rgba(118,196,231,.09);--dr-sidebar-active-start:rgba(118,196,231,.34);--dr-sidebar-active-end:rgba(118,196,231,.10); --dr-section-bg:#F5FAFD;--dr-table-head-bg:#DDEFF8;--dr-table-head-text:#28586F;--dr-row-alt:#F8FCFE;--dr-row-hover:#EAF6FC; --dr-accent-wash:#E7F5FC;--dr-accent-ink:#28698F;--dr-mobile-header:#20536D;--dr-mobile-button:#2279B8; --dr-section-title-bg:#2E8ED0;--dr-section-title-text:#FFFFFF;--dr-section-border:#CFE2EC; --dr-field-label:#41697D;--dr-component-border:#CFE2EC;--dr-table-divider:#DCEBF2; } html[data-theme="autumn"]{ color-scheme:light; --dr-bg:#FFF7EF;--dr-surface:#FFFFFF;--dr-surface-soft:#FFFBF7;--dr-surface-hover:#FFF1E5; --dr-text:#41362E;--dr-text-strong:#2A211C;--dr-text-muted:#7D6B5F;--dr-text-soft:#A89588; --dr-border:#EBD8C9;--dr-border-soft:#F4E8DE;--dr-border-strong:#DCC1AD; --dr-focus:#C2733E;--dr-focus-ring:rgba(194,115,62,.20); --dr-primary:#C2733E;--dr-primary-hover:#AE6334;--dr-primary-soft:#F9E9DB;--dr-primary-soft-hover:#F5DDCA; --dr-primary-border:#E9C5AA;--dr-primary-text:#7D4B2C;--dr-primary-contrast:#FFFFFF; --dr-button-primary:#AD6032;--dr-button-primary-hover:#985128;--dr-button-contrast:#FFFFFF; --dr-sidebar-start:#4D3023;--dr-sidebar-mid:#5A3A2B;--dr-sidebar-end:#43291E; --dr-sidebar-text:#FFFFFF;--dr-sidebar-muted:#F0DFD3;--dr-sidebar-subtext:#F7EBE3;--dr-sidebar-item:#FFF7F1; --dr-sidebar-accent:#E0A068;--dr-sidebar-icon:#F2C49D;--dr-sidebar-hover:rgba(224,160,104,.20); --dr-sidebar-open:rgba(224,160,104,.09);--dr-sidebar-active-start:rgba(224,160,104,.34);--dr-sidebar-active-end:rgba(224,160,104,.10); --dr-section-bg:#FFF8F2;--dr-table-head-bg:#F5E2D2;--dr-table-head-text:#6E4C36;--dr-row-alt:#FFFBF7;--dr-row-hover:#FFF0E3; --dr-accent-wash:#FBEBDD;--dr-accent-ink:#805237;--dr-mobile-header:#5A3A2B;--dr-mobile-button:#AD6032; --dr-section-title-bg:#C2733E;--dr-section-title-text:#FFFFFF;--dr-section-border:#EBD8C9; --dr-field-label:#765642;--dr-component-border:#EBD8C9;--dr-table-divider:#F0E1D6; } html[data-theme="winter"]{ color-scheme:light; --dr-bg:#F4F9FC;--dr-surface:#FFFFFF;--dr-surface-soft:#F9FCFE;--dr-surface-hover:#EEF6FB; --dr-text:#303A42;--dr-text-strong:#202A31;--dr-text-muted:#647582;--dr-text-soft:#94A2AB; --dr-border:#D5E3EC;--dr-border-soft:#E7F0F5;--dr-border-strong:#BDD2E0; --dr-focus:#6B9FCC;--dr-focus-ring:rgba(107,159,204,.20); --dr-primary:#6B9FCC;--dr-primary-hover:#5A8BB7;--dr-primary-soft:#E7F1F8;--dr-primary-soft-hover:#DAEAF4; --dr-primary-border:#C3DAEA;--dr-primary-text:#466B88;--dr-primary-contrast:#FFFFFF; --dr-button-primary:#568AB8;--dr-button-primary-hover:#477AA7;--dr-button-contrast:#FFFFFF; --dr-sidebar-start:#2C4658;--dr-sidebar-mid:#344F63;--dr-sidebar-end:#263C4C; --dr-sidebar-text:#FFFFFF;--dr-sidebar-muted:#E0ECF4;--dr-sidebar-subtext:#EDF5F9;--dr-sidebar-item:#F5FAFD; --dr-sidebar-accent:#A7CEE8;--dr-sidebar-icon:#C7E2F2;--dr-sidebar-hover:rgba(167,206,232,.20); --dr-sidebar-open:rgba(167,206,232,.09);--dr-sidebar-active-start:rgba(167,206,232,.34);--dr-sidebar-active-end:rgba(167,206,232,.10); --dr-section-bg:#F7FBFD;--dr-table-head-bg:#E1EDF6;--dr-table-head-text:#49606F;--dr-row-alt:#FAFCFE;--dr-row-hover:#EDF5FA; --dr-accent-wash:#EAF4FA;--dr-accent-ink:#4A6F8B;--dr-mobile-header:#344F63;--dr-mobile-button:#568AB8; --dr-section-title-bg:#6B9FCC;--dr-section-title-text:#FFFFFF;--dr-section-border:#D5E3EC; --dr-field-label:#586E7D;--dr-component-border:#D5E3EC;--dr-table-divider:#E1EBF1; } html[data-theme="classic"] .brand-mark, html[data-theme="spring"] .brand-mark, html[data-theme="summer"] .brand-mark, html[data-theme="autumn"] .brand-mark, html[data-theme="winter"] .brand-mark{ background:linear-gradient(135deg,var(--dr-sidebar-accent),color-mix(in srgb,var(--dr-sidebar-accent) 68%, #26313a 32%))!important; color:#fff!important; } .dr-theme-auto{ width:100%;display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:8px 10px; border:1px solid var(--dr-border);border-radius:10px;background:var(--dr-surface-soft);color:var(--dr-text);cursor:pointer;text-align:left; } .dr-theme-auto:hover{border-color:var(--dr-primary);background:var(--dr-surface-hover);} .dr-theme-auto.active{border-color:var(--dr-primary);box-shadow:0 0 0 2px var(--dr-focus-ring);} .dr-theme-auto-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--dr-primary-soft);color:var(--dr-primary-text);font-size:12px;font-weight:900;} .dr-theme-auto strong{display:block;font-size:12px;color:var(--dr-text-strong);} .dr-theme-auto small{display:block;margin-top:2px;font-size:10px;color:var(--dr-text-muted);} .dr-theme-preview.classic i{background:#29333D!important}.dr-theme-preview.classic b{background:#F4F5F4!important;border-left:4px solid #667789!important} .dr-theme-preview.spring i{background:#38566A url("../assets/theme/spring.webp") center 42%/cover no-repeat!important}.dr-theme-preview.spring b{background:#FFF6F8!important;border-left:4px solid #D7849A!important} .dr-theme-preview.summer i{background:#20536D url("../assets/theme/summer.webp") center 42%/cover no-repeat!important}.dr-theme-preview.summer b{background:#F2F9FC!important;border-left:4px solid #2E8ED0!important} .dr-theme-preview.autumn i{background:#5A3A2B url("../assets/theme/autumn.webp") center 42%/cover no-repeat!important}.dr-theme-preview.autumn b{background:#FFF7EF!important;border-left:4px solid #C2733E!important} .dr-theme-preview.winter i{background:#344F63 url("../assets/theme/winter.webp") center 42%/cover no-repeat!important}.dr-theme-preview.winter b{background:#F4F9FC!important;border-left:4px solid #6B9FCC!important} .as1132851-pending-item{border-color:var(--dr-border)!important;background:var(--dr-primary-soft)!important;color:var(--dr-text)!important} .as1132851-pending-meta small{color:var(--dr-primary-text)!important} } /* ========================================================= STEP113-3-2-7 - 계절 이미지 전체 제거 / 좌측 메뉴 세로 계절 포인트 - 계절 이미지를 본문, 카드, 테마 미리보기에서 사용하지 않음 - 모달/리스트/업무 화면 stacking 구조를 건드리지 않음 - 계절감은 좌측 사이드바 우측의 세로 컬러 띠로만 표현 ========================================================= */ @media screen { html[data-theme="spring"] .sidebar, html[data-theme="summer"] .sidebar, html[data-theme="autumn"] .sidebar, html[data-theme="winter"] .sidebar { box-shadow: inset -6px 0 0 var(--dr-sidebar-accent), var(--dr-shadow-sidebar) !important; } /* 선택된 메뉴에도 같은 계절 포인트를 이어서 보여준다. */ html[data-theme="spring"] .menu-item.active, html[data-theme="summer"] .menu-item.active, html[data-theme="autumn"] .menu-item.active, html[data-theme="winter"] .menu-item.active { box-shadow: inset 4px 0 0 var(--dr-sidebar-accent) !important; } /* 기본 테마는 기존 메뉴 모양 그대로 유지한다. */ html[data-theme="classic"] .sidebar { box-shadow: var(--dr-shadow-sidebar) !important; } /* 모바일 서랍 메뉴에서도 같은 세로 포인트만 사용한다. */ @media (max-width: 900px) { html[data-theme="spring"] .sidebar, html[data-theme="summer"] .sidebar, html[data-theme="autumn"] .sidebar, html[data-theme="winter"] .sidebar { box-shadow: inset -5px 0 0 var(--dr-sidebar-accent), var(--dr-shadow-sidebar) !important; } } } /* ========================================================= STEP113-3-2-10 - 좌측 메뉴 밝은 원경 계절 이미지 적용 - STEP113-3-2-9 구조를 유지하고 이미지/농도만 조정한다. - 본문/모달/리스트/업무 로직은 건드리지 않는다. - 가까운 잎/꽃 확대 대신 멀리서 본 계절 풍경을 사용한다. ========================================================= */ @media screen { html[data-theme="spring"] .sidebar, html[data-theme="summer"] .sidebar, html[data-theme="autumn"] .sidebar, html[data-theme="winter"] .sidebar { isolation:isolate; overflow-x:hidden; box-shadow:var(--dr-shadow-sidebar) !important; } /* 밝은 세로 원경 이미지를 사이드바 배경으로 선명하게 표시 */ html[data-theme="spring"] .sidebar::before, html[data-theme="summer"] .sidebar::before, html[data-theme="autumn"] .sidebar::before, html[data-theme="winter"] .sidebar::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:no-repeat; background-size:cover; background-position:center center; opacity:.90; filter:saturate(1.04) contrast(1.02) brightness(1.03); } html[data-theme="spring"] .sidebar::before { background-image:url("../assets/theme/spring.webp"); } html[data-theme="summer"] .sidebar::before { background-image:url("../assets/theme/summer.webp"); } html[data-theme="autumn"] .sidebar::before { background-image:url("../assets/theme/autumn.webp"); } html[data-theme="winter"] .sidebar::before { background-image:url("../assets/theme/winter.webp"); } /* 이미지 자체의 왼쪽 명암을 살리고, 메뉴 글자 보호용 오버레이만 최소 적용 */ html[data-theme="spring"] .sidebar::after, html[data-theme="summer"] .sidebar::after, html[data-theme="autumn"] .sidebar::after, html[data-theme="winter"] .sidebar::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb,var(--dr-sidebar-start) 42%, transparent) 0%, color-mix(in srgb,var(--dr-sidebar-mid) 26%, transparent) 62%, color-mix(in srgb,var(--dr-sidebar-end) 18%, transparent) 100%); } html[data-theme="spring"] .sidebar > *, html[data-theme="summer"] .sidebar > *, html[data-theme="autumn"] .sidebar > *, html[data-theme="winter"] .sidebar > * { position:relative; z-index:1; } html[data-theme="spring"] .sidebar .brand, html[data-theme="spring"] .sidebar .brand-sub, html[data-theme="spring"] .sidebar .sidebar-label, html[data-theme="spring"] .sidebar .menu-head, html[data-theme="spring"] .sidebar .menu-item, html[data-theme="summer"] .sidebar .brand, html[data-theme="summer"] .sidebar .brand-sub, html[data-theme="summer"] .sidebar .sidebar-label, html[data-theme="summer"] .sidebar .menu-head, html[data-theme="summer"] .sidebar .menu-item, html[data-theme="autumn"] .sidebar .brand, html[data-theme="autumn"] .sidebar .brand-sub, html[data-theme="autumn"] .sidebar .sidebar-label, html[data-theme="autumn"] .sidebar .menu-head, html[data-theme="autumn"] .sidebar .menu-item, html[data-theme="winter"] .sidebar .brand, html[data-theme="winter"] .sidebar .brand-sub, html[data-theme="winter"] .sidebar .sidebar-label, html[data-theme="winter"] .sidebar .menu-head, html[data-theme="winter"] .sidebar .menu-item { text-shadow:0 1px 2px rgba(0,0,0,.28); } html[data-theme="spring"] .menu-item.active, html[data-theme="summer"] .menu-item.active, html[data-theme="autumn"] .menu-item.active, html[data-theme="winter"] .menu-item.active { box-shadow:inset 4px 0 0 var(--dr-sidebar-accent) !important; } html[data-theme="classic"] .sidebar::before, html[data-theme="classic"] .sidebar::after { content:none !important; } @media (max-width:900px) { html[data-theme="spring"] .sidebar::before, html[data-theme="summer"] .sidebar::before, html[data-theme="autumn"] .sidebar::before, html[data-theme="winter"] .sidebar::before { opacity:.82; } } } /* ========================================================= STEP113-3-2-11 - 좌측 검은 오버레이 제거 + 메뉴 호버 강조 + 화살표 가독성 강화 - STEP113-3-2-10의 밝은 원경 계절 이미지를 유지한다. - 이미지 자체의 왼쪽 검은 영역은 파일에서 제거하고, CSS의 사이드바 오버레이는 사용하지 않는다. - 평소에는 배경 이미지를 더 선명하게 보이고, 마우스 오버/선택 시 해당 메뉴 행만 선명하게 강조한다. - 서브메뉴 화살표(chevron)는 기본 상태에서도 더 또렷하게 보이도록 조정한다. ========================================================= */ @media screen { html[data-theme="spring"] .sidebar::after, html[data-theme="summer"] .sidebar::after, html[data-theme="autumn"] .sidebar::after, html[data-theme="winter"] .sidebar::after { content:none !important; } html[data-theme="spring"] .sidebar::before, html[data-theme="summer"] .sidebar::before, html[data-theme="autumn"] .sidebar::before, html[data-theme="winter"] .sidebar::before { opacity:.96 !important; filter:saturate(1.08) contrast(1.04) brightness(1.04) !important; background-position:center center !important; background-size:cover !important; } html[data-theme="spring"] .sidebar .brand, html[data-theme="spring"] .sidebar .brand-sub, html[data-theme="spring"] .sidebar .sidebar-label, html[data-theme="spring"] .sidebar .menu-head, html[data-theme="spring"] .sidebar .menu-item, html[data-theme="spring"] .sidebar .menu-chevron, html[data-theme="summer"] .sidebar .brand, html[data-theme="summer"] .sidebar .brand-sub, html[data-theme="summer"] .sidebar .sidebar-label, html[data-theme="summer"] .sidebar .menu-head, html[data-theme="summer"] .sidebar .menu-item, html[data-theme="summer"] .sidebar .menu-chevron, html[data-theme="autumn"] .sidebar .brand, html[data-theme="autumn"] .sidebar .brand-sub, html[data-theme="autumn"] .sidebar .sidebar-label, html[data-theme="autumn"] .sidebar .menu-head, html[data-theme="autumn"] .sidebar .menu-item, html[data-theme="autumn"] .sidebar .menu-chevron, html[data-theme="winter"] .sidebar .brand, html[data-theme="winter"] .sidebar .brand-sub, html[data-theme="winter"] .sidebar .sidebar-label, html[data-theme="winter"] .sidebar .menu-head, html[data-theme="winter"] .sidebar .menu-item, html[data-theme="winter"] .sidebar .menu-chevron { text-shadow:0 1px 5px rgba(0,0,0,.42) !important; } html[data-theme="spring"] .menu-group.open, html[data-theme="summer"] .menu-group.open, html[data-theme="autumn"] .menu-group.open, html[data-theme="winter"] .menu-group.open { background:transparent !important; padding:0 !important; } html[data-theme="spring"] .menu-head, html[data-theme="summer"] .menu-head, html[data-theme="autumn"] .menu-head, html[data-theme="winter"] .menu-head { border:1px solid transparent; backdrop-filter:none; } html[data-theme="spring"] .menu-head:hover, html[data-theme="spring"] .menu-group.open .menu-head, html[data-theme="summer"] .menu-head:hover, html[data-theme="summer"] .menu-group.open .menu-head, html[data-theme="autumn"] .menu-head:hover, html[data-theme="autumn"] .menu-group.open .menu-head, html[data-theme="winter"] .menu-head:hover, html[data-theme="winter"] .menu-group.open .menu-head { background:linear-gradient(90deg, rgba(17,25,39,.42), rgba(17,25,39,.18)) !important; border-color:rgba(255,255,255,.18) !important; color:#fff !important; box-shadow:0 7px 18px rgba(0,0,0,.12) !important; backdrop-filter:blur(5px); } html[data-theme="spring"] .menu-item, html[data-theme="summer"] .menu-item, html[data-theme="autumn"] .menu-item, html[data-theme="winter"] .menu-item { border:1px solid transparent; } html[data-theme="spring"] .menu-item:hover, html[data-theme="spring"] .menu-item.active, html[data-theme="summer"] .menu-item:hover, html[data-theme="summer"] .menu-item.active, html[data-theme="autumn"] .menu-item:hover, html[data-theme="autumn"] .menu-item.active, html[data-theme="winter"] .menu-item:hover, html[data-theme="winter"] .menu-item.active { background:linear-gradient(90deg, rgba(17,25,39,.40), rgba(17,25,39,.14)) !important; border-color:rgba(255,255,255,.16) !important; color:#ffffff !important; box-shadow:inset 3px 0 0 var(--dr-sidebar-accent), 0 6px 14px rgba(0,0,0,.10) !important; backdrop-filter:blur(5px); } html[data-theme="spring"] .menu-item:hover, html[data-theme="summer"] .menu-item:hover, html[data-theme="autumn"] .menu-item:hover, html[data-theme="winter"] .menu-item:hover { transform:translateX(3px); } html[data-theme="spring"] .menu-chevron, html[data-theme="summer"] .menu-chevron, html[data-theme="autumn"] .menu-chevron, html[data-theme="winter"] .menu-chevron { color:rgba(241,247,255,.96) !important; opacity:1 !important; font-size:20px !important; } html[data-theme="spring"] .menu-head:hover .menu-chevron, html[data-theme="spring"] .menu-group.open .menu-chevron, html[data-theme="summer"] .menu-head:hover .menu-chevron, html[data-theme="summer"] .menu-group.open .menu-chevron, html[data-theme="autumn"] .menu-head:hover .menu-chevron, html[data-theme="autumn"] .menu-group.open .menu-chevron, html[data-theme="winter"] .menu-head:hover .menu-chevron, html[data-theme="winter"] .menu-group.open .menu-chevron { color:#ffffff !important; text-shadow:0 1px 6px rgba(0,0,0,.56) !important; } html[data-theme="spring"] .brand-wrap, html[data-theme="summer"] .brand-wrap, html[data-theme="autumn"] .brand-wrap, html[data-theme="winter"] .brand-wrap { border-radius:14px; background:linear-gradient(180deg, rgba(17,25,39,.18), rgba(17,25,39,.10)); backdrop-filter:blur(3px); } @media (max-width:900px) { html[data-theme="spring"] .sidebar::before, html[data-theme="summer"] .sidebar::before, html[data-theme="autumn"] .sidebar::before, html[data-theme="winter"] .sidebar::before { opacity:.93 !important; } } } /* ========================================================= STEP113-3-2-12 - 사이드바 브랜드/메뉴 텍스트·아이콘 선명화 - STEP113-3-2-11의 밝은 배경 이미지는 유지한다. - 상단 브랜드 영역, 메뉴명, 메뉴 아이콘, 펼침 화살표의 가독성을 한 단계 더 높인다. - 기본 상태에서도 은은한 반투명 배경을 넣고 hover/active 시에는 더 또렷하게 유지한다. ========================================================= */ @media screen { html[data-theme="spring"] .brand-wrap, html[data-theme="summer"] .brand-wrap, html[data-theme="autumn"] .brand-wrap, html[data-theme="winter"] .brand-wrap { padding:10px 12px 12px !important; margin:0 3px 12px !important; border:1px solid rgba(255,255,255,.18) !important; background:linear-gradient(180deg, rgba(14,23,38,.34), rgba(14,23,38,.20)) !important; backdrop-filter:blur(6px) !important; box-shadow:0 8px 22px rgba(0,0,0,.10) !important; } html[data-theme="spring"] .brand, html[data-theme="summer"] .brand, html[data-theme="autumn"] .brand, html[data-theme="winter"] .brand { color:#ffffff !important; font-size:18px !important; font-weight:900 !important; letter-spacing:.1px; text-shadow:0 1px 7px rgba(0,0,0,.46) !important; } html[data-theme="spring"] .brand-sub, html[data-theme="summer"] .brand-sub, html[data-theme="autumn"] .brand-sub, html[data-theme="winter"] .brand-sub { color:rgba(245,249,255,.92) !important; font-size:11px !important; font-weight:700 !important; text-shadow:0 1px 5px rgba(0,0,0,.42) !important; } html[data-theme="spring"] .sidebar-label, html[data-theme="summer"] .sidebar-label, html[data-theme="autumn"] .sidebar-label, html[data-theme="winter"] .sidebar-label { color:rgba(242,247,255,.74) !important; text-shadow:0 1px 4px rgba(0,0,0,.36) !important; } html[data-theme="spring"] .menu-head, html[data-theme="summer"] .menu-head, html[data-theme="autumn"] .menu-head, html[data-theme="winter"] .menu-head, html[data-theme="spring"] .menu-item, html[data-theme="summer"] .menu-item, html[data-theme="autumn"] .menu-item, html[data-theme="winter"] .menu-item { color:#ffffff !important; font-weight:700 !important; text-shadow:0 1px 6px rgba(0,0,0,.42) !important; } html[data-theme="spring"] .menu-head, html[data-theme="summer"] .menu-head, html[data-theme="autumn"] .menu-head, html[data-theme="winter"] .menu-head { background:linear-gradient(90deg, rgba(17,25,39,.16), rgba(17,25,39,.05)) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 2px 10px rgba(0,0,0,.05) !important; } html[data-theme="spring"] .menu-group.open .menu-head, html[data-theme="summer"] .menu-group.open .menu-head, html[data-theme="autumn"] .menu-group.open .menu-head, html[data-theme="winter"] .menu-group.open .menu-head { background:linear-gradient(90deg, rgba(17,25,39,.34), rgba(17,25,39,.14)) !important; border-color:rgba(255,255,255,.18) !important; } html[data-theme="spring"] .submenu, html[data-theme="summer"] .submenu, html[data-theme="autumn"] .submenu, html[data-theme="winter"] .submenu { border-left-color:rgba(255,255,255,.24) !important; } html[data-theme="spring"] .menu-item, html[data-theme="summer"] .menu-item, html[data-theme="autumn"] .menu-item, html[data-theme="winter"] .menu-item { background:linear-gradient(90deg, rgba(17,25,39,.12), rgba(17,25,39,.03)) !important; border-color:rgba(255,255,255,.05) !important; } html[data-theme="spring"] .menu-item:hover, html[data-theme="spring"] .menu-item.active, html[data-theme="summer"] .menu-item:hover, html[data-theme="summer"] .menu-item.active, html[data-theme="autumn"] .menu-item:hover, html[data-theme="autumn"] .menu-item.active, html[data-theme="winter"] .menu-item:hover, html[data-theme="winter"] .menu-item.active { background:linear-gradient(90deg, rgba(17,25,39,.42), rgba(17,25,39,.18)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:inset 3px 0 0 var(--dr-sidebar-accent),0 7px 18px rgba(0,0,0,.12) !important; } html[data-theme="spring"] .menu-icon, html[data-theme="summer"] .menu-icon, html[data-theme="autumn"] .menu-icon, html[data-theme="winter"] .menu-icon { color:rgba(245,249,255,.96) !important; font-size:18px !important; text-shadow:0 1px 6px rgba(0,0,0,.44) !important; opacity:1 !important; } html[data-theme="spring"] .menu-chevron, html[data-theme="summer"] .menu-chevron, html[data-theme="autumn"] .menu-chevron, html[data-theme="winter"] .menu-chevron { color:rgba(245,249,255,.98) !important; font-size:21px !important; font-weight:800 !important; text-shadow:0 1px 6px rgba(0,0,0,.48) !important; } html[data-theme="spring"] .dashboard-link .menu-icon, html[data-theme="summer"] .dashboard-link .menu-icon, html[data-theme="autumn"] .dashboard-link .menu-icon, html[data-theme="winter"] .dashboard-link .menu-icon { color:#ffffff !important; } } /* ========================================================= STEP113-3-2-13 - 브랜드 부제 줄바꿈 정리 + 서브메뉴 선명도 강화 - 상단 부제를 의도적인 2줄 구조로 정리한다. - 서브메뉴 항목의 가독성을 한 단계 더 높인다. ========================================================= */ @media screen { html[data-theme="spring"] .brand-sub, html[data-theme="summer"] .brand-sub, html[data-theme="autumn"] .brand-sub, html[data-theme="winter"] .brand-sub { display:flex !important; flex-direction:column; gap:1px; line-height:1.28 !important; white-space:normal !important; } html[data-theme="spring"] .brand-sub-line, html[data-theme="summer"] .brand-sub-line, html[data-theme="autumn"] .brand-sub-line, html[data-theme="winter"] .brand-sub-line { display:block; font-size:11px; font-weight:800; letter-spacing:-0.05px; } html[data-theme="spring"] .submenu, html[data-theme="summer"] .submenu, html[data-theme="autumn"] .submenu, html[data-theme="winter"] .submenu { margin:4px 7px 2px 18px !important; padding:5px 0 5px 12px !important; border-left-width:2px !important; } html[data-theme="spring"] .submenu .menu-item, html[data-theme="summer"] .submenu .menu-item, html[data-theme="autumn"] .submenu .menu-item, html[data-theme="winter"] .submenu .menu-item { color:rgba(255,255,255,.97) !important; font-size:13px !important; font-weight:800 !important; text-shadow:0 1px 6px rgba(0,0,0,.46) !important; background:linear-gradient(90deg, rgba(17,25,39,.22), rgba(17,25,39,.08)) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 3px 10px rgba(0,0,0,.06) !important; } html[data-theme="spring"] .submenu .menu-item:hover, html[data-theme="spring"] .submenu .menu-item.active, html[data-theme="summer"] .submenu .menu-item:hover, html[data-theme="summer"] .submenu .menu-item.active, html[data-theme="autumn"] .submenu .menu-item:hover, html[data-theme="autumn"] .submenu .menu-item.active, html[data-theme="winter"] .submenu .menu-item:hover, html[data-theme="winter"] .submenu .menu-item.active { background:linear-gradient(90deg, rgba(17,25,39,.46), rgba(17,25,39,.18)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:inset 3px 0 0 var(--dr-sidebar-accent),0 7px 18px rgba(0,0,0,.12) !important; } } /* ========================================================= STEP113-3-2-14 - 전체 메뉴 테마 적용 누락 전수 보정 --------------------------------------------------------- 점검 대상 - 품목관리 등록/검색, 견적 입력 모달, 현장관리(site8), 공정현황 - 입고 KPI, AS 보조영역/사진, 일정·달력 팝업 - 권한/대시보드 설정/전역검색/상단 팝업 원칙 - 화면 UI에만 적용(@media screen) - A4/인쇄 문서의 확정 색상은 유지 - 공정 단계/상태 배지의 의미 색상은 유지 ========================================================= */ @media screen { /* 브랜드 두 번째 줄: DAERYUNG ERP 제목 폭에 맞춰 우측 끝 정렬 */ .brand-wrap>div:last-child{width:max-content;max-width:100%;} .brand-sub{width:100%;} .brand-sub .brand-sub-line:last-child{ display:block!important; width:100%; text-align:justify; text-align-last:justify; } /* 1. 공통 누락 표면 */ html[data-theme] :is( .quote-modal-box,.quote-section,.quote-stamp-status,.quote-total-box>div, .item-code-builder,.item-edit-note,.item-v2-section,.item-v2-photo-preview, .item-v2-photo-help,.item-create-dialog,.item-create-head, .material-detail-summary>div,.material-detail-info>div, .process50-legend,.file50,.inspection64,.site-process-chart, .gr11221-kpi>div,.site112242-work-wrap,.site112242-memo,.site112243-ledger-wrap, .as11225-kpi,.as11225-table-wrap,.as113285-photo-phase,.as113285-photo-item, .as113285-photo-add,.permission-policy>div,.dashboard-widget-settings label, .as112271-worker-list,.as112271-worker-list label, .dr-global-search-results,.dr-global-search-result,.dr-top-pop,.dr-date-picker, .office11229-calendar-section>.office-calendar,.office112292-day-actions, #as_historyHint,#itemSearchModal>div ){ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border)!important; } /* 2. 부드러운 보조면 */ html[data-theme] :is( .quote-stamp-status,.quote-total-box>div,.item-edit-note,.item-v2-photo-help, .process50-legend,.as113285-photo-item,.as113285-photo-add, .dr-global-search-result:hover,.dr-top-pop>button:hover, .office112292-day-actions,#as_historyHint ){ background:var(--dr-surface-soft)!important; color:var(--dr-text-muted)!important; } /* 3. 품목관리 */ html[data-theme] :is(.item-v2-title,.item-create-head .item-v2-title){ background:var(--dr-primary)!important; color:var(--dr-primary-contrast,#fff)!important; border-color:var(--dr-primary)!important; } html[data-theme] :is(.item-v2-grid label,.item-code-builder label,.item-edit-photo label){ color:var(--dr-text-muted)!important; } html[data-theme] :is( .item-code-builder input,.item-code-builder select, .item-v2-grid input,.item-v2-grid select,.item-v2-grid textarea, .item-edit-photo input,.item-edit-photo select,.item-edit-photo textarea ){ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-strong)!important; } html[data-theme] .item-v2-photo-preview{border-color:var(--dr-primary-border)!important;color:var(--dr-text-muted)!important;} html[data-theme] #itemSearchModal>div{box-shadow:0 18px 50px rgba(0,0,0,.22)!important;} /* 4. 견적 입력 모달 - 인쇄/A4 미리보기는 제외 */ html[data-theme] .quote-modal-box{background:var(--dr-surface)!important;color:var(--dr-text)!important;} html[data-theme] .quote-modal-head p{color:var(--dr-text-muted)!important;} html[data-theme] .quote-section{background:var(--dr-section-bg)!important;border-color:var(--dr-border)!important;} html[data-theme] .quote-form-grid label{color:var(--dr-text-muted)!important;} html[data-theme] :is(.quote-form-grid input,.quote-form-grid select,.quote-form-grid textarea,.quote-items-table input,.quote-items-table select){ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-strong)!important; } html[data-theme] .q-custom-note, html[data-theme] tr[data-custom="1"] td:first-child>span{color:var(--dr-text-muted)!important;} /* 5. 현장관리 site8 구형 내부 구성까지 테마 연결 */ html[data-theme] .site8{color:var(--dr-text)!important;} html[data-theme] .site8-head p{color:var(--dr-text-muted)!important;} html[data-theme] :is( .site8 .product-card,.site8 .card,.site8 .product-image,.site8 .qty-box8, .site8 .filter8,.site8 .photo-chip,.site8 .stage-tab8, .site8 .ledger-detail-grid>.card:first-child>.summary-row ){ background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border)!important; } html[data-theme] :is(.site8 .product-copy small,.site8 .stage-vchart small,.site8 .ledger-detail-grid>.card:first-child>.summary-row span){ color:var(--dr-text-muted)!important; } html[data-theme] :is(.site8 .info-box,.site8 .footer-note){ background:var(--dr-accent-wash)!important; border-color:var(--dr-primary-border)!important; color:var(--dr-primary-text)!important; } html[data-theme] :is(.site8 .stage-dash-row,.site8 .summary-row,.site8 .vchart-large){border-color:var(--dr-border-soft)!important;} html[data-theme] :is(.site8 .vtrack,.site8 .big-progress){background:var(--dr-surface-soft)!important;} html[data-theme] :is(.site8 .form-grid8 input,.site8 .form-grid8 select,.site8 .form-grid8 textarea,.site8 .loc-form input,.site8 .loc-form select,.site8 .filter8 input,.site8 .filter8 select,.site8 .today-input){ background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-strong)!important; } html[data-theme] .site8 .work-table8 th{background:var(--dr-table-head-bg)!important;color:var(--dr-table-head-text)!important;border-color:var(--dr-border)!important;} html[data-theme] .site8 .work-table8 td{background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-soft)!important;} html[data-theme] .site8 .stage-tab8.active{background:var(--dr-primary-soft)!important;color:var(--dr-primary-text)!important;border-color:var(--dr-primary)!important;} html[data-theme] .site8 .product-card.active{background:linear-gradient(135deg,var(--dr-surface),var(--dr-primary-soft))!important;} /* 6. 공정/현장 보조 컴포넌트 */ html[data-theme] :is(.process50-table-wrap,.process50-kpi>div,.site50-card,.draw50){background:var(--dr-surface)!important;border-color:var(--dr-border)!important;color:var(--dr-text)!important;} html[data-theme] .process50-table th{background:var(--dr-table-head-bg)!important;color:var(--dr-table-head-text)!important;border-color:var(--dr-border)!important;} html[data-theme] .process50-table td{background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-soft)!important;} html[data-theme] :is(.stage50,.site-chart-track){background:var(--dr-surface-soft)!important;border-color:var(--dr-border-strong)!important;} html[data-theme] :is(.site50-head p,.process50-head p,.site50-title p,.site50-meta,.draw50-foot,.stage50 small,.draw50-head span){color:var(--dr-text-muted)!important;} /* 7. 구매/발주/수입/입고/출고의 남은 강제 흰색 */ html[data-theme] :is( .purchase112182-list-section .table-wrap,.purchase112182-list-section .table, .po11219-table-section .table-wrap,.po11219-table-section .table, .imp11220-table-section .table-wrap,.imp11220-table-section .table, .gr11221-table-section .table-wrap,.gr11221-table-section .table, .shp11223-table-section .table-wrap,.shp11223-table-section .table ){background:var(--dr-surface)!important;border-color:var(--dr-border)!important;color:var(--dr-text)!important;} html[data-theme] :is( .purchase112182-list-section .table tbody td,.po11219-table-section .table tbody td, .imp11220-table-section .table tbody td,.gr11221-table-section .table tbody td, .shp11223-table-section .table tbody td ){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-soft)!important;} html[data-theme] :is(.po11219-field input,.po11219-field select,.imp11220-field input,.imp11220-field select,.material112202-field input,.material112202-field select){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-strong)!important;} html[data-theme] :is(.purchase112181-notice,.gr11221-notice){background:var(--dr-accent-wash)!important;color:var(--dr-primary-text)!important;border-color:var(--dr-primary-border)!important;} /* 8. 현장 등록/시공/대장 세부 테이블 */ html[data-theme] :is( .site11224-table-section .drawing-table8,.site11224-table-section>div[id="site_register_list8"], .site112242-work-wrap,.site112242-work-table,.site112243-ledger-wrap,.site112243-ledger-table ){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} html[data-theme] :is(.site11224-table-section .drawing-table8 tbody td,.site112242-work-table tbody td,.site112243-ledger-table tbody td){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-soft)!important;} html[data-theme] .site11224-form .qty-box8{background:var(--dr-surface)!important;border-color:var(--dr-border)!important;} html[data-theme] .site11224-form .etc-qty-box8{background:var(--dr-accent-wash)!important;border-color:var(--dr-primary-border)!important;} /* 9. AS 현황/접수/대장 보조영역 */ html[data-theme] :is(.as11225-search-field input,.as11225-search-field select,.as11225-status-select){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-strong)!important;} html[data-theme] :is(.as11225-table,.as11225-table-wrap){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} html[data-theme] .as11225-table tbody td{background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-soft)!important;} html[data-theme] .as112271-worker-list label{background:var(--dr-surface-soft)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} /* 상태 배지의 의미색은 유지하고 기본 배지만 테마 표면에 연결 */ html[data-theme] .as11225-badge:not([data-status]){background:var(--dr-surface-soft)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} /* 10. 달력/날짜선택/팝업 */ html[data-theme] :is(.dr-date-head button,.dr-date-year-tools button,.dr-date-today,.calendar-v4-actions select,.schedule-view-select,.calendar-v3-nav select){background:var(--dr-surface-soft)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} html[data-theme] :is(.dr-date-head input,.dr-date-head select){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-strong)!important;} html[data-theme] .dr-date-cell{background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border-soft)!important;} html[data-theme] .cal-grid-v4 .cal-day{background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} html[data-theme] .cal-grid-v4 .cal-day.other-month{background:var(--dr-surface-soft)!important;color:var(--dr-text-muted)!important;} /* 11. 검색/권한/상단 팝업 */ html[data-theme] :is(.permission-role-pill,.dr-development-log code){background:var(--dr-surface-soft)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} html[data-theme] :is(.dr-development-log,.dr-development-log pre){background:var(--dr-surface)!important;color:var(--dr-text)!important;border-color:var(--dr-border)!important;} html[data-theme] :is(.dr-global-search-results,.dr-top-pop){box-shadow:0 14px 34px rgba(0,0,0,.18)!important;} } /* ========================================================= STEP113-3-2-15 - 현장현황 2개 구역 테마 누락 보정 - 3. 공정 진행현황 내부 카드 제목바 - 4. 선택 현장 상세 내부 카드 제목바/요약카드 - 7공정 고유색/상태 의미색은 유지 ========================================================= */ @media screen { /* 공정 진행현황 / 선택 현장 상세의 구형 파란 카드 제목바를 현재 테마 제목색으로 통일 */ html[data-theme] :is( .site11227-progress-section .card > .card-title, .site112243-detail-section #ledger_detail8 .card > .card-title ) { background:var(--dr-section-title-bg)!important; color:#fff!important; border-color:var(--dr-section-title-bg)!important; } html[data-theme] :is( .site11227-progress-section .card > .card-title b, .site112243-detail-section #ledger_detail8 .card > .card-title b ) { color:rgba(255,255,255,.92)!important; } /* 두 구역의 내부 카드/요약행/표면을 테마 표면색에 확실히 연결 */ html[data-theme] :is( .site11227-progress-section .process-dash, .site11227-progress-section .site112241-summary > .card, .site112243-detail-section #ledger_detail8 > .ledger-detail-grid > .card, .site112243-detail-section #ledger_detail8 .ledger-products > .card, .site112243-detail-section #ledger_detail8 > .card ) { background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border)!important; } html[data-theme] :is( .site11227-progress-section .stage-dash-row, .site11227-progress-section .summary-row, .site112243-detail-section #ledger_detail8 .summary-row ) { background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-soft)!important; } html[data-theme] .site112243-detail-section #ledger_detail8 .ledger-detail-grid > .card:first-child > .summary-row { background:var(--dr-surface-soft)!important; border-color:var(--dr-border-soft)!important; } html[data-theme] :is( .site11227-progress-section .info-box, .site11227-progress-section .footer-note ) { background:var(--dr-accent-wash)!important; color:var(--dr-primary-text)!important; border-color:var(--dr-primary-border)!important; } html[data-theme] :is( .site11227-progress-section .vtrack, .site11227-progress-section .big-progress, .site112243-detail-section #ledger_detail8 .big-progress ) { background:var(--dr-surface-soft)!important; } /* 선택 현장 상세 표는 현재 테마의 표 헤더/본문색을 강제 적용 */ html[data-theme] .site112243-detail-section #ledger_detail8 .drawing-table8 thead th { background:var(--dr-table-head-bg)!important; color:var(--dr-table-head-text)!important; border-color:var(--dr-border)!important; } html[data-theme] .site112243-detail-section #ledger_detail8 .drawing-table8 tbody td { background:var(--dr-surface)!important; color:var(--dr-text)!important; border-color:var(--dr-border-soft)!important; } html[data-theme] .site112243-detail-section #ledger_detail8 .drawing-table8 tbody tr:nth-child(even) td { background:var(--dr-row-alt)!important; } } /* ========================================================= STEP113-3-2-20 관리자 최초 1회 운영 시작 초기화 ========================================================= */ .admin-production-init{margin-top:18px;padding:16px;border:1px solid var(--dr-border,#d8dee4);border-radius:12px;background:var(--dr-surface,#fff);} .admin-production-init h4{margin:0 0 8px;color:var(--dr-primary-text,#334155);} .admin-production-init p{margin:8px 0 12px;line-height:1.6;} .admin-production-init.done{opacity:.9;} .admin-production-init .btn.danger{font-weight:700;} /* ========================================================= STEP113-3-2-25-3 로그인 모바일 사계절 → ERP 계절 테마 ========================================================= */ @media screen { html[data-theme="spring"] .sidebar::before, html[data-theme="summer"] .sidebar::before, html[data-theme="autumn"] .sidebar::before, html[data-theme="winter"] .sidebar::before { opacity:.98 !important; background-size:cover !important; background-position:39% center !important; filter:saturate(1.06) contrast(1.02) brightness(1.01) !important; } html[data-theme="spring"] .brand-wrap, html[data-theme="summer"] .brand-wrap, html[data-theme="autumn"] .brand-wrap, html[data-theme="winter"] .brand-wrap { background:linear-gradient(180deg,rgba(15,25,36,.34),rgba(15,25,36,.18)) !important; border-color:rgba(255,255,255,.22) !important; backdrop-filter:blur(5px) !important; } html[data-theme="spring"] .menu-head, html[data-theme="summer"] .menu-head, html[data-theme="autumn"] .menu-head, html[data-theme="winter"] .menu-head, html[data-theme="spring"] .menu-item, html[data-theme="summer"] .menu-item, html[data-theme="autumn"] .menu-item, html[data-theme="winter"] .menu-item { text-shadow:0 1px 5px rgba(0,0,0,.52) !important; } @media (max-width:900px) { html[data-theme="spring"] .sidebar::before, html[data-theme="summer"] .sidebar::before, html[data-theme="autumn"] .sidebar::before, html[data-theme="winter"] .sidebar::before { background-position:37% center !important; opacity:.97 !important; } } }