/* 비즈네트워크 관리프로그램 - 공통 스타일 폰트/색상 토큰은 project2.eworks.kr 관리자 화면(Plus Jakarta Sans + Noto Sans KR, shadcn/ui "zinc" 테마 · Tailwind v4 OKLCH)과 톤을 맞췄습니다. 라이트/다크 테마 전환을 지원하며, 속성으로 아래 :root[data-theme] 블록이 적용됩니다. */ :root { --color-bg: oklch(0.967 0.001 286.375); /* zinc-100 */ --color-surface: #ffffff; --color-border: oklch(0.92 0.004 286.32); /* zinc-200 */ --color-text: oklch(0.141 0.005 285.823); /* zinc-950 */ --color-text-sub: oklch(0.552 0.016 285.938); /* zinc-500 */ --color-primary: oklch(0.21 0.006 285.885); /* zinc-900 */ --color-primary-foreground: #ffffff; --color-primary-dark: oklch(0.141 0.005 285.823); /* zinc-950 */ --color-primary-light: oklch(0.967 0.001 286.375); /* zinc-100 */ --color-ring: oklch(0.705 0.015 286.067); /* zinc-400 */ --color-info: oklch(0.546 0.245 262.881); /* blue-600 */ --color-info-light: oklch(0.97 0.014 254.604); /* blue-50 */ --color-info-border: oklch(0.882 0.059 254.128); /* blue-200 */ --color-danger: oklch(0.577 0.245 27.325); /* red-600 */ --color-danger-light: oklch(0.971 0.013 17.38); /* red-50 */ --color-danger-border: oklch(0.885 0.062 18.334); /* red-200 */ --color-success: oklch(0.627 0.194 149.214); /* green-600 */ --color-success-light: oklch(0.982 0.018 155.826); /* green-50 */ --color-success-border: oklch(0.925 0.084 155.995); /* green-200 */ --color-warning: oklch(0.473 0.137 46.201); /* amber-800 */ --color-warning-light: oklch(0.987 0.022 95.277); /* amber-50 */ --color-warning-border: oklch(0.926 0.078 92.34); /* amber-200 */ --color-gray-light: oklch(0.967 0.001 286.375); /* zinc-100 */ --color-gray-text: oklch(0.442 0.017 285.786); /* zinc-600 */ --color-purple: oklch(0.541 0.281 293.009); /* violet-600 */ --color-purple-light: oklch(0.969 0.016 293.756); /* violet-50 */ --color-teal: oklch(0.6 0.118 184.704); /* teal-600 */ --color-teal-light: oklch(0.984 0.014 180.72); /* teal-50 */ --sidebar-width: 224px; --sidebar-width-collapsed: 72px; --topbar-height: 64px; --radius: 0.625rem; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); } /* ── 다크 테마 토큰 (수동 전환 + OS 선호도, data-theme 미지정 시) ───────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: oklch(0.141 0.005 285.823); /* zinc-950 */ --color-surface: oklch(0.21 0.006 285.885); /* zinc-900 */ --color-border: oklch(0.274 0.006 286.033); /* zinc-800 */ --color-text: oklch(0.985 0 0); /* zinc-50 */ --color-text-sub: oklch(0.705 0.015 286.067); /* zinc-400 */ --color-primary: oklch(0.92 0.004 286.32); /* zinc-200 (반전) */ --color-primary-foreground: oklch(0.21 0.006 285.885); /* zinc-900 */ --color-primary-dark: oklch(0.985 0 0); /* zinc-50 */ --color-primary-light: oklch(0.274 0.006 286.033); /* zinc-800 */ --color-ring: oklch(0.442 0.017 285.786); /* zinc-600 */ --color-info: oklch(0.707 0.165 254.624); /* blue-400 */ --color-info-light: color-mix(in srgb, var(--color-info) 16%, var(--color-bg)); --color-info-border: color-mix(in srgb, var(--color-info) 38%, var(--color-bg)); --color-danger: oklch(0.704 0.191 22.216); /* red-400 */ --color-danger-light: color-mix(in srgb, var(--color-danger) 16%, var(--color-bg)); --color-danger-border: color-mix(in srgb, var(--color-danger) 38%, var(--color-bg)); --color-success: oklch(0.792 0.209 151.711); /* green-400 */ --color-success-light: color-mix(in srgb, var(--color-success) 16%, var(--color-bg)); --color-success-border: color-mix(in srgb, var(--color-success) 38%, var(--color-bg)); --color-warning: oklch(0.828 0.189 84.429); /* amber-400 */ --color-warning-light: color-mix(in srgb, var(--color-warning) 16%, var(--color-bg)); --color-warning-border: color-mix(in srgb, var(--color-warning) 38%, var(--color-bg)); --color-gray-light: oklch(0.274 0.006 286.033); /* zinc-800 */ --color-gray-text: oklch(0.871 0.006 286.286); /* zinc-300 */ --color-purple: oklch(0.702 0.183 293.541); /* violet-400 */ --color-purple-light: color-mix(in srgb, var(--color-purple) 16%, var(--color-bg)); --color-teal: oklch(0.777 0.152 181.912); /* teal-400 */ --color-teal-light: color-mix(in srgb, var(--color-teal) 16%, var(--color-bg)); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --color-bg: oklch(0.141 0.005 285.823); --color-surface: oklch(0.21 0.006 285.885); --color-border: oklch(0.274 0.006 286.033); --color-text: oklch(0.985 0 0); --color-text-sub: oklch(0.705 0.015 286.067); --color-primary: oklch(0.92 0.004 286.32); --color-primary-foreground: oklch(0.21 0.006 285.885); --color-primary-dark: oklch(0.985 0 0); --color-primary-light: oklch(0.274 0.006 286.033); --color-ring: oklch(0.442 0.017 285.786); --color-info: oklch(0.707 0.165 254.624); --color-info-light: color-mix(in srgb, var(--color-info) 16%, var(--color-bg)); --color-info-border: color-mix(in srgb, var(--color-info) 38%, var(--color-bg)); --color-danger: oklch(0.704 0.191 22.216); --color-danger-light: color-mix(in srgb, var(--color-danger) 16%, var(--color-bg)); --color-danger-border: color-mix(in srgb, var(--color-danger) 38%, var(--color-bg)); --color-success: oklch(0.792 0.209 151.711); --color-success-light: color-mix(in srgb, var(--color-success) 16%, var(--color-bg)); --color-success-border: color-mix(in srgb, var(--color-success) 38%, var(--color-bg)); --color-warning: oklch(0.828 0.189 84.429); --color-warning-light: color-mix(in srgb, var(--color-warning) 16%, var(--color-bg)); --color-warning-border: color-mix(in srgb, var(--color-warning) 38%, var(--color-bg)); --color-gray-light: oklch(0.274 0.006 286.033); --color-gray-text: oklch(0.871 0.006 286.286); --color-purple: oklch(0.702 0.183 293.541); --color-purple-light: color-mix(in srgb, var(--color-purple) 16%, var(--color-bg)); --color-teal: oklch(0.777 0.152 181.912); --color-teal-light: color-mix(in srgb, var(--color-teal) 16%, var(--color-bg)); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html, body { margin: 0; padding: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.5; letter-spacing: -.01em; transition: background-color .15s ease, color .15s ease; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1,h2,h3,h4 { margin: 0; } /* ── 레이아웃 ───────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--color-surface); color: var(--color-text); border-right: 1px solid var(--color-border); flex-shrink: 0; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; transition: width .2s ease, transform .2s ease, background-color .15s ease; } .sidebar .brand { height: var(--topbar-height); flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--color-border); } .sidebar .brand-mark { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-primary); color: var(--color-primary-foreground); font-weight: 800; font-size: 14px; } .sidebar .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .sidebar .brand-name { font-weight: 700; font-size: 13.5px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .brand-sub { font-size: 11px; color: var(--color-text-sub); white-space: nowrap; } .sidebar nav { padding: 10px 10px; flex: 1; overflow-y: auto; } .sidebar .menu-group-title { padding: 14px 10px 6px; font-size: 11px; letter-spacing: .04em; color: var(--color-text-sub); text-transform: uppercase; font-weight: 600; } .sidebar a.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; color: var(--color-text-sub); font-size: 13.5px; border-radius: 999px; } .sidebar a.menu-item:hover { background: var(--color-gray-light); color: var(--color-text); } .sidebar a.menu-item.active { background: var(--color-info-light); color: var(--color-info); font-weight: 700; } .sidebar .menu-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sidebar .menu-icon svg { width: 18px; height: 18px; } .sidebar-foot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--color-border); } .sidebar-foot-avatar { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; background: var(--color-primary); color: var(--color-primary-foreground); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .sidebar-foot-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .sidebar-foot-name { font-size: 12.5px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-foot-sub { font-size: 11px; color: var(--color-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; transition: margin-left .2s ease; } /* ── 사이드바 접기/펼치기 (데스크탑) ───────────────── */ html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-width-collapsed); } html[data-sidebar="collapsed"] .main { margin-left: var(--sidebar-width-collapsed); } html[data-sidebar="collapsed"] .sidebar .brand { justify-content: center; padding: 0; } html[data-sidebar="collapsed"] .sidebar .brand-text, html[data-sidebar="collapsed"] .sidebar .menu-group-title, html[data-sidebar="collapsed"] .sidebar a.menu-item span:not(.menu-icon), html[data-sidebar="collapsed"] .sidebar-foot-text { display: none; } html[data-sidebar="collapsed"] .sidebar a.menu-item { justify-content: center; padding: 9px 0; } html[data-sidebar="collapsed"] .sidebar-foot { justify-content: center; padding: 12px 0; } html[data-sidebar="collapsed"] .sidebar-toggle svg { transform: scaleX(-1); } .topbar { height: var(--topbar-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; z-index: 10; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .menu-toggle { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 6px; color: var(--color-text); cursor: pointer; } .menu-toggle svg { width: 20px; height: 20px; } .menu-toggle:hover { background: var(--color-gray-light); } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 6px; color: var(--color-text-sub); cursor: pointer; flex-shrink: 0; } .sidebar-toggle svg { width: 19px; height: 19px; transition: transform .2s ease; } .sidebar-toggle:hover { background: var(--color-gray-light); color: var(--color-text); } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-sub); min-width: 0; overflow: hidden; white-space: nowrap; } .breadcrumb .sep { color: var(--color-border); } .breadcrumb .current { color: var(--color-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: none; background: none; color: var(--color-text-sub); cursor: pointer; } .icon-btn:hover { background: var(--color-gray-light); color: var(--color-text); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn .icon-moon { display: none; } html[data-theme="dark"] .icon-btn .icon-sun { display: none; } html[data-theme="dark"] .icon-btn .icon-moon { display: block; } .content { padding: 20px; flex: 1; } .page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .page-head h1 { font-size: 19px; font-weight: 700; } .page-head .desc { font-size: 12px; color: var(--color-text-sub); margin-top: 2px; } /* ── 카드/패널 ───────────────────────────── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; } .card > h2, .card-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .stat-card .label { font-size: 12px; color: var(--color-text-sub); margin-bottom: 6px; } .stat-card .value { font-size: 24px; font-weight: 800; } .stat-card .value small { font-size: 12px; font-weight: 500; color: var(--color-text-sub); } /* ── 검색/필터 바 ─────────────────────────── */ .search-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; padding: 12px 14px; margin-bottom: 14px; } .search-bar .field { display: flex; align-items: center; gap: 6px; font-size: 13px; } .search-bar label { color: var(--color-text-sub); } .search-bar .spacer { flex: 1; } /* ── 폼 요소 ───────────────────────────── */ input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input[type=tel], select, textarea { border: 1px solid var(--color-border); border-radius: 5px; padding: 7px 10px; font-size: 13px; font-family: inherit; color: var(--color-text); background: var(--color-surface); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring) 25%, transparent); } textarea { width: 100%; resize: vertical; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; } .form-grid.cols-1 { grid-template-columns: 1fr; } .form-row { display: flex; flex-direction: column; gap: 5px; } .form-row.span-2 { grid-column: span 2; } .form-row label { font-size: 12.5px; font-weight: 600; color: var(--color-gray-text); } .form-row label .req { color: var(--color-danger); margin-left: 2px; } .hint { font-size: 10px; color: var(--color-text-sub); } .form-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); } .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .btn:hover { background: var(--color-gray-light); } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-foreground); } .btn-primary:hover { background: var(--color-primary-dark); } .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-primary-foreground); } .btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ── 테이블 ───────────────────────────── */ .table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; } table.grid { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; } table.grid th, table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: center; } table.grid thead th { background: var(--color-gray-light); color: var(--color-gray-text); font-weight: 700; position: sticky; top: 0; } table.grid tbody tr:hover { background: color-mix(in srgb, var(--color-info) 6%, var(--color-surface)); } table.grid td.text-left { text-align: left; } table.grid a.row-link { color: var(--color-primary); font-weight: 600; } .table-toolbar { display: flex; justify-content: flex-start; align-items: center; padding: 10px 4px; font-size: 12.5px; color: var(--color-text-sub); } table.grid td.drag-handle { cursor: grab; color: var(--color-text-sub); font-size: 15px; user-select: none; } table.grid tr[draggable="true"]:active { cursor: grabbing; } .detail-table { width: 100%; border-collapse: collapse; font-size: 13px; } .detail-table th { width: 150px; background: var(--color-gray-light); text-align: left; padding: 10px 14px; color: var(--color-gray-text); font-weight: 600; border: 1px solid var(--color-border); } .detail-table td { padding: 10px 14px; border: 1px solid var(--color-border); } /* ── 배지 ───────────────────────────── */ .badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; } .badge-gray { background: var(--color-gray-light); color: var(--color-gray-text); } .badge-blue { background: var(--color-info-light); color: var(--color-info); } .badge-green { background: var(--color-success-light); color: var(--color-success); } .badge-red { background: var(--color-danger-light); color: var(--color-danger); } .badge-orange { background: var(--color-warning-light); color: var(--color-warning); } .badge-purple { background: var(--color-purple-light); color: var(--color-purple); } .badge-teal { background: var(--color-teal-light); color: var(--color-teal); } /* ── 페이지네이션 ───────────────────────── */ .pagination { display: flex; justify-content: center; margin-top: 16px; } .page-list { display: flex; gap: 4px; } .page-list li a { display: inline-block; min-width: 32px; text-align: center; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 13px; } .page-list li.active a { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-foreground); } /* ── 알림 ───────────────────────────── */ .flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; } .flash-success { background: var(--color-success-light); color: var(--color-success); border: 1px solid var(--color-success-border); } .flash-error { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid var(--color-danger-border); } .flash-info { background: var(--color-info-light); color: var(--color-info); border: 1px solid var(--color-info-border); } .empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-sub); } /* ── 첨부파일 썸네일/모달 ───────────────── */ .attach-grid { display: flex; flex-wrap: wrap; gap: 16px; } .attach-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 108px; } .attach-label { font-size: 11.5px; color: var(--color-text-sub); text-align: center; } .attach-thumb { display: block; width: 96px; height: 96px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-gray-light); cursor: zoom-in; } .attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .attach-file { font-size: 12px; color: var(--color-primary); text-align: center; word-break: break-all; } .attach-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.85); z-index: 100; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; } .attach-modal.open { display: flex; } .attach-modal img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .attach-modal-close { position: absolute; top: 16px; right: 24px; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; } /* ── 주소검색(다음 우편번호) 모달 ───────────────── */ .address-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 110; align-items: center; justify-content: center; } .address-modal.open { display: flex; } .address-modal-box { width: 460px; max-width: 92vw; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .address-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: 14px; font-weight: 700; } .address-modal-close { cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-text-sub); } .address-modal-body { width: 100%; height: 480px; } /* ── 범용 모달(문자 발송 등) ───────────────────── */ .modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 120; align-items: center; justify-content: center; } .modal.open { display: flex; } .modal-box { width: 420px; max-width: 92vw; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: 14px; font-weight: 700; } .modal-close { cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-text-sub); } .modal-body { padding: 16px; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border); } /* ── 로그인 화면 ───────────────────────── */ /* 로그인 카드는 테마 토글이 없으므로 항상 어두운 그라데이션 위 흰 카드로 고정합니다. */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, oklch(0.21 0.006 285.885), oklch(0.274 0.006 286.033)); } .login-box { width: 360px; background: #fff; border-radius: 14px; padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .login-box .logo { text-align: center; font-size: 20px; font-weight: 800; color: oklch(0.21 0.006 285.885); margin-bottom: 4px; } .login-box .sub { text-align: center; font-size: 12.5px; color: oklch(0.552 0.016 285.938); margin-bottom: 24px; } .login-box input { width: 100%; padding: 11px 12px; margin-bottom: 10px; border-color: oklch(0.92 0.004 286.32); background: #fff; color: oklch(0.141 0.005 285.823); } .login-box .btn-primary { width: 100%; padding: 11px; font-size: 14px; margin-top: 6px; background: oklch(0.21 0.006 285.885); border-color: oklch(0.21 0.006 285.885); color: #fff; } .login-box .btn-primary:hover { background: oklch(0.141 0.005 285.823); } .login-box .error { background: oklch(0.971 0.013 17.38); color: oklch(0.577 0.245 27.325); padding: 10px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 12px; } /* ── 반응형 ───────────────────────────── */ @media (max-width: 900px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .menu-toggle { display: flex; } .sidebar-toggle { display: none; } .form-grid { grid-template-columns: 1fr; } .form-row.span-2 { grid-column: span 1; } /* 모바일에서는 데스크탑 접기 상태(data-sidebar="collapsed")를 무시하고 항상 펼친 폭으로 표시합니다. */ html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-width); } html[data-sidebar="collapsed"] .main { margin-left: 0; } html[data-sidebar="collapsed"] .sidebar .brand { justify-content: flex-start; padding: 0 18px; } html[data-sidebar="collapsed"] .sidebar .brand-text, html[data-sidebar="collapsed"] .sidebar .menu-group-title, html[data-sidebar="collapsed"] .sidebar a.menu-item span:not(.menu-icon), html[data-sidebar="collapsed"] .sidebar-foot-text { display: block; } html[data-sidebar="collapsed"] .sidebar .brand-text { display: flex; } html[data-sidebar="collapsed"] .sidebar a.menu-item { justify-content: flex-start; padding: 9px 12px; } html[data-sidebar="collapsed"] .sidebar-foot { justify-content: flex-start; padding: 12px 16px; } } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; } .tabs a { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--color-text-sub); border-bottom: 2px solid transparent; } .tabs a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* ── 박스탭(개별 박스 형태의 그룹 탭) ───────────────── */ .box-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .box-tabs li { margin: 0; } .box-tabs a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--color-text-sub); background: var(--color-surface); } .box-tabs a:hover { background: var(--color-gray-light); color: var(--color-text); } .box-tabs a.active { background: var(--color-info-light); color: var(--color-info); border-color: var(--color-info-border); } .box-tabs a .text-sub { color: inherit; opacity: .7; } .text-sub { color: var(--color-text-sub); font-size: 12px; } .mt-0{margin-top:0}.mb-0{margin-bottom:0}