/* ============================================================ DREAMGREEN — shell.css 의료 블루 디자인 시스템 + 앱 셸(좌측 사이드바 + 상단 토픽바). index.html 핸드오프 토큰과 100% 통일. ▶ 사용법: 각 페이지 에서 로 불러오고, design.css 링크는 제거(이 파일이 대체). 에 data-dg-* 속성 + 콘텐츠를 .dg-content 로 감싼다. (자세한 규칙은 HANDOFF.md 참고) 이 파일은 3부로 구성: 1) 토큰 + 베이스 2) 앱 셸 (사이드바 / 토픽바 / 콘텐츠 / 반응형) ← 신규 클래스(.dg-*, .sidebar, .topbar) 3) 레거시 클래스 재스킨 (구 design.css 흡수 — 기존 페이지 마크업 호환) ============================================================ */ /* ───────────────────────────────────────────── 1) 토큰 + 베이스 ───────────────────────────────────────────── */ /* @import 는 다른 규칙보다 앞서야 유효 (CSS 규격) — Pretendard 로드 */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); :root { --dg-primary: #1E6FB2; --dg-primary-dark: #185C95; --dg-primary-darker: #134E80; --dg-tint: #E7F0F8; --dg-app-bg: #EFF3F4; --dg-card: #FFFFFF; --dg-tile: #FAFBFB; --dg-ink: #16282E; --dg-strong: #1B2D33; --dg-body: #33454B; --dg-muted: #5E6E74; --dg-faint: #8A989D; --dg-faint2: #9AA7AB; --dg-border: #E7EDEE; --dg-border-side: #E5ECED; --dg-divider: #F0F4F4; --dg-danger: #B23A28; --dg-card-shadow: 0 1px 2px rgba(16, 40, 46, 0.04); --dg-card-hover: 0 14px 28px -18px rgba(16, 40, 46, 0.32); --dg-hero-grad: linear-gradient(122deg, #2A7EC2 0%, #185C95 55%, #134E80 100%); --dg-sidebar-w: 252px; --dg-topbar-h: 64px; --dg-content-max: 1300px; /* 상태 색 */ --dg-ok-bg: #E7F4ED; --dg-ok-fg: #1F7A52; --dg-warn-bg: #FBF0DC; --dg-warn-fg: #9A6312; --dg-low-bg: #FBE9E6; --dg-low-fg: #B23A28; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--dg-app-bg); color: var(--dg-ink); min-height: 100vh; } a { text-decoration: none; color: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #CDD8DA; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #B4C2C5; background-clip: content-box; } /* shell.js 가 셸을 조립하기 전, 콘텐츠가 풀폭으로 번쩍 안 뜨도록 */ body[data-dg-page] > .dg-content { opacity: 0; } body.dg-ready .dg-content { opacity: 1; } /* ───────────────────────────────────────────── 2) 앱 셸 ───────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } /* ── 사이드바 ── */ .sidebar { width: var(--dg-sidebar-w); flex-shrink: 0; align-self: flex-start; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--dg-card); border-right: 1px solid var(--dg-border-side); display: flex; flex-direction: column; z-index: 20; } .brand { padding: 22px 20px 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #EEF2F3; } .brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 9px; flex-shrink: 0; background: #fff; } .brand-logo-fallback { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--dg-tint); flex-shrink: 0; } .brand-name { font-size: 14.5px; font-weight: 700; color: #14252B; letter-spacing: -0.3px; line-height: 1.25; } .brand-sub { font-size: 11px; color: var(--dg-faint); font-weight: 500; margin-top: 1px; } .nav { flex: 1; padding: 16px 14px; } .nav-group { margin-bottom: 18px; } .nav-group-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.9px; color: #A2AFB3; text-transform: uppercase; padding: 0 10px 8px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: #48585E; transition: background .14s ease, color .14s ease; } .nav-item:hover { background: #F1F5F6; } .nav-item.active { background: var(--dg-primary); color: #fff; font-weight: 600; } .nav-item .nav-ic { display: flex; align-items: center; } .sidebar-foot { padding: 12px 14px 16px; border-top: 1px solid #EEF2F3; } .sidebar-foot .admin-only { display: none; } .sidebar-user { display: flex; align-items: center; gap: 11px; padding: 10px 11px; margin-top: 6px; border-radius: 11px; background: #F5F8F8; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dg-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .user-meta { line-height: 1.3; min-width: 0; } .user-meta .user-name { font-size: 13px; font-weight: 600; color: var(--dg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-meta .user-role { font-size: 11px; color: var(--dg-faint); } /* ── 메인 + 토픽바 ── */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; height: var(--dg-topbar-h); background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid #E6ECED; } .topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; } .topbar-title { font-size: 18px; font-weight: 700; color: var(--dg-ink); letter-spacing: -0.4px; white-space: nowrap; } .topbar-sub { font-size: 12.5px; color: var(--dg-faint2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; align-items: center; gap: 12px; } .searchbox { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 10px; background: #F2F5F6; border: 1px solid #E7ECED; color: var(--dg-faint2); min-width: 230px; } .searchbox span.lbl { font-size: 13px; } .bell-btn { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E7ECED; background: #fff; color: #46565C; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s ease; } .bell-btn:hover { background: #F4F8F8; } .bell-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #E0533B; border: 1.5px solid #fff; display: none; } .topbar-divider { width: 1px; height: 24px; background: #E3E9EA; } #userInfo { display: flex; align-items: center; gap: 10px; } .logout-btn { background: #fff; color: var(--dg-muted); border: 1px solid #E0E7E8; padding: 7px 13px; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; transition: all .14s ease; font-family: inherit; white-space: nowrap; } .logout-btn:hover { background: #F4F8F8; color: var(--dg-primary); border-color: #CDE0F1; } /* ── 콘텐츠 컬럼 ── */ .content, .dg-content { max-width: var(--dg-content-max); width: 100%; margin: 0 auto; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 24px; } .dg-content.dg-flush { max-width: none; padding: 0; gap: 0; } /* ── 햄버거 (모바일) ── */ .hamburger-btn { display: none; } .menu-overlay { display: none; position: fixed; inset: 0; background: rgba(16,40,46,0.35); z-index: 19; backdrop-filter: blur(2px); } /* ───────────────────────────────────────────── 2b) 셸 제공 UI 키트 (.dg-* — 신규 콘텐츠 작성용) ───────────────────────────────────────────── */ .dg-hero { position: relative; overflow: hidden; border-radius: 18px; background: #185C95; background-image: var(--dg-hero-grad); color: #fff; padding: 30px 34px; box-shadow: 0 18px 38px -20px rgba(24,92,149,0.65); } .dg-card { background: var(--dg-card); border: 1px solid var(--dg-border); border-radius: 15px; padding: 22px 24px; box-shadow: var(--dg-card-shadow); } .dg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .dg-card-head-l { display: flex; align-items: center; gap: 9px; } .dg-card-head-l .hic { display: flex; color: var(--dg-primary); } .dg-card-title { font-size: 16px; font-weight: 700; color: var(--dg-strong); } .dg-view-all { font-size: 12.5px; font-weight: 600; color: var(--dg-primary); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; } .dg-sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; } .dg-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--dg-primary); text-transform: uppercase; margin-bottom: 5px; } .dg-sec-title { font-size: 19px; font-weight: 700; color: var(--dg-ink); letter-spacing: -0.4px; } /* 페이지 액션 헤더 (제목 + 우측 버튼들) */ .dg-page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .dg-page-head h2 { font-size: 18px; font-weight: 700; color: var(--dg-ink); letter-spacing: -0.3px; margin: 0; } .dg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* 버튼 */ .dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease; } .dg-btn-primary { background: var(--dg-primary); color: #fff; } .dg-btn-primary:hover { background: var(--dg-primary-dark); box-shadow: 0 8px 18px -10px rgba(30,111,178,0.7); } .dg-btn-ghost { background: #fff; color: var(--dg-body); border-color: #E0E7E8; } .dg-btn-ghost:hover { background: #F4F8F8; color: var(--dg-primary); border-color: #CDE0F1; } .dg-btn-tint { background: var(--dg-tint); color: var(--dg-primary-dark); } .dg-btn-tint:hover { background: #DCEAF6; } /* 통계 타일 그리드 */ .dg-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; } .dg-tile { border: 1px solid #ECF0F1; border-radius: 12px; padding: 15px 17px; background: var(--dg-tile); } .dg-tile .l { font-size: 12px; color: var(--dg-faint); font-weight: 500; margin-bottom: 7px; } .dg-tile .v { font-size: 25px; font-weight: 700; letter-spacing: -0.5px; color: var(--dg-ink); font-variant-numeric: tabular-nums; } .dg-tile .v.danger { color: var(--dg-danger); } .dg-tile .s { font-size: 11.5px; color: #A2AFB3; margin-top: 2px; } /* 테이블 */ .dg-table { width: 100%; border-collapse: collapse; } .dg-table th { font-size: 11.5px; font-weight: 600; color: var(--dg-faint2); padding: 0 0 10px; border-bottom: 1px solid #ECF0F1; text-align: left; } .dg-table th.right { text-align: right; } .dg-table td { padding: 13px 0; border-bottom: 1px solid #F2F5F5; font-size: 13.5px; color: #22343A; } .dg-table td.right { text-align: right; } .dg-table tbody tr:hover td { background: #F8FAFA; } /* 배지 / 칩 */ .dg-badge { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; display: inline-block; } .dg-badge.ok { background: var(--dg-ok-bg); color: var(--dg-ok-fg); } .dg-badge.warn { background: var(--dg-warn-bg); color: var(--dg-warn-fg); } .dg-badge.low { background: var(--dg-low-bg); color: var(--dg-low-fg); } .dg-badge.muted { background: #F1F5F6; color: #7A888D; } /* 반응형 행 그리드 헬퍼 */ .dg-grid { display: grid; gap: 18px; } .dg-grid-2 { grid-template-columns: repeat(2, 1fr); } .dg-grid-3 { grid-template-columns: repeat(3, 1fr); } .dg-grid-auto { grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 14px; } .dg-footer { text-align: center; padding: 10px 0 4px; font-size: 12px; color: var(--dg-faint2); } /* ── 반응형 ── */ @media (min-width: 769px) and (max-width: 1100px) { .sidebar { width: 216px; } .content, .dg-content { padding: 24px 20px 36px; } .dg-stats { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { .hamburger-btn { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #E7ECED; color: #46565C; border-radius: 9px; width: 38px; height: 38px; font-size: 1.1em; cursor: pointer; flex-shrink: 0; } .sidebar { position: fixed; top: 0; left: -270px; width: 255px; height: 100vh; transition: left .28s ease; z-index: 999; box-shadow: 4px 0 20px rgba(16,40,46,0.18); } .sidebar.open { left: 0; } .menu-overlay.open { display: block; z-index: 998; } .topbar { padding: 0 16px; gap: 12px; } .topbar-sub { display: none; } .searchbox { display: none; } .content, .dg-content { padding: 18px 14px 32px; gap: 18px; } .dg-stats { grid-template-columns: repeat(2,1fr); } .dg-grid-2, .dg-grid-3 { grid-template-columns: 1fr; } .user-meta .user-name { max-width: 90px; } .logout-btn { padding: 6px 10px; } } /* ───────────────────────────────────────────── 3) 레거시 클래스 재스킨 (구 design.css 흡수) 기존 페이지 마크업을 셸 안으로 옮긴 뒤, 남아있는 공통 컴포넌트 클래스가 의료 블루 / 흰 카드 톤을 갖도록 보정. ───────────────────────────────────────────── */ /* 페이지 자체의 옛 상단 헤더는 셸이 대신하므로 숨김 */ body[data-dg-page] > .header, body[data-dg-page] .dg-content > .header { display: none !important; } /* 카드 / 섹션 */ .dashboard-card, .staff-section, .notice-card, .section, .inventory-section, .form-card, .content-card, .schedule-section, .counsel-section, .archive-section, .blog-section, .legend, .card, .panel, .box { background: #FFFFFF !important; border: 1px solid var(--dg-border) !important; box-shadow: var(--dg-card-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 인사말/그라데이션 배너 */ .greeting-banner { background: var(--dg-hero-grad) !important; border: none !important; box-shadow: 0 12px 30px -16px rgba(24, 92, 149, 0.5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 리스트 아이템 (어르신/직원 목록 등) */ .list-item { background: #FFFFFF !important; border: 1px solid var(--dg-border) !important; box-shadow: var(--dg-card-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .list-item:hover { background: #F4F8F8 !important; border-color: #BCD6EF !important; } .list-item.active { background: var(--dg-tint) !important; border-color: var(--dg-primary) !important; } .list-name { color: var(--dg-strong) !important; } .list-sub { color: #6B7A7F !important; } /* 페이지 내부 보조 사이드바 헤더 (carefor-resident-list 등) */ .sidebar-header { background: #FFFFFF !important; border-bottom: 1px solid var(--dg-border-side) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sidebar-title { color: var(--dg-strong) !important; } /* 테이블 */ table { background: transparent !important; } thead th { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } tbody tr:hover { background: #F4F8F8 !important; filter: none !important; } /* 인풋 / 폼 */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { background: #F6F9F9 !important; border: 1px solid #E2E9EA !important; color: var(--dg-ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { background: #FFFFFF !important; border-color: var(--dg-primary) !important; box-shadow: 0 0 0 3px rgba(30, 111, 178, 0.12) !important; outline: none !important; } /* 공통 버튼류 (페이지마다 이름 제각각 — 의료 블루로 통일) */ .btn-primary, .btn-submit, .save-btn, .btn-save, .btn-add, .primary-btn { background: var(--dg-primary) !important; border: 1px solid var(--dg-primary) !important; color: #fff !important; box-shadow: none !important; } .btn-primary:hover, .btn-submit:hover, .save-btn:hover, .btn-save:hover, .btn-add:hover, .primary-btn:hover { background: var(--dg-primary-dark) !important; border-color: var(--dg-primary-dark) !important; } .btn-secondary, .btn-cancel, .cancel-btn, .secondary-btn, .btn-secondary-small { background: #fff !important; color: var(--dg-body) !important; border: 1px solid #E0E7E8 !important; } .btn-secondary:hover, .btn-cancel:hover, .cancel-btn:hover, .secondary-btn:hover, .btn-secondary-small:hover { background: #F4F8F8 !important; color: var(--dg-primary) !important; border-color: #CDE0F1 !important; } /* 탭 바 (inventory / health-alerts 등) */ .tab-btn.active, .tab.active { color: var(--dg-primary) !important; border-color: var(--dg-primary) !important; } /* 섹션 타이틀 — 강제 좌측바 제거(재디자인 페이지가 직접 스타일링). 미정의 페이지용 최소 폴백만 */ .section-title { color: var(--dg-strong); } /* 모달 */ .modal, .modal-overlay, .picker-modal { background: rgba(16, 40, 46, 0.50) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; } .modal-content, .modal-box, .modal-container, .popup, .cycle-modal-content, .picker-content { background: #FFFFFF !important; border: 1px solid var(--dg-border) !important; box-shadow: 0 24px 60px rgba(16, 40, 46, 0.25) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 재고/상태 배지 */ .inv-badge.ok, .badge.ok { background: var(--dg-ok-bg) !important; color: var(--dg-ok-fg) !important; } .inv-badge.warn, .badge.warn { background: var(--dg-warn-bg) !important; color: var(--dg-warn-fg) !important; } .inv-badge.low, .badge.low { background: var(--dg-low-bg) !important; color: var(--dg-low-fg) !important; } .inv-badge.nomin, .badge.muted { background: #F1F5F6 !important; color: #7A888D !important; } /* 알림 / 토스트 */ .notification, .toast { background: #FFFFFF !important; border: 1px solid var(--dg-border) !important; box-shadow: var(--dg-card-shadow) !important; color: var(--dg-body) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .notification.error, .toast.error { background: linear-gradient(135deg, #E0533B, #C2402B) !important; border-color: rgba(224,83,59,0.35) !important; color: #fff !important; } .notification.success, .toast.success { background: linear-gradient(135deg, #1F9D63, #15784B) !important; border-color: rgba(31,157,99,0.35) !important; color: #fff !important; } .notification.warning, .toast.warning { background: linear-gradient(135deg, #D9930F, #B5780B) !important; border-color: rgba(217,147,15,0.35) !important; color: #fff !important; } /* 드롭다운 */ .dropdown-menu, .user-dropdown, [class*="dropdown-content"] { background: #FFFFFF !important; border: 1px solid var(--dg-border) !important; box-shadow: 0 12px 36px rgba(16, 40, 46, 0.16) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } hr { border-color: var(--dg-divider) !important; }