/* =================================================================== agrisys-design-system.css — Agrisys ADAS 공용 디자인 시스템 번들 CMS(cms.agrisys.kr) 의 design-tokens+tokens+typography+components+utilities 5개 CSS 를 로드 순서대로 1파일로 합친 것. 단일 출처는 CMS 원본. farming.farmstack.kr 이식용 (docs/41 프롬프트 동봉). =================================================================== */ /* ====================== design-tokens.css ====================== */ /* =================================================================== FarmStack Design System — design-tokens.css docs/12 §2.1 (라이트) + §2.2 (다크) 그대로. 외부 연계 시스템 (영농일지·제품구매·컨설팅·AS) 도 본 파일을 동일 복제. =================================================================== */ :root { color-scheme: light; /* Brand colors */ --color-primary: #2E7D32; --color-primary-light: #4CAF50; --color-primary-dark: #1B5E20; --color-secondary: #1565C0; --color-secondary-light: #1976D2; --color-danger: #D32F2F; --color-warning: #F57C00; --color-success: #388E3C; --color-background: #F5F5F5; --color-card: #FFFFFF; --color-surface: #FAFAFA; --color-text: #212121; --color-text-secondary: #757575; --color-border: #E0E0E0; /* Layout */ --sidebar-width: 220px; --sidebar-collapsed-width: 64px; --header-height: 64px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.30s ease; /* Font scale */ --font-scale: 1; --base-font-size: calc(14px * var(--font-scale)); } /* Dark theme override (docs/12 §2.2) */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #4CAF50; --color-primary-light: #66BB6A; --color-primary-dark: #388E3C; --color-secondary: #42A5F5; --color-secondary-light: #64B5F6; --color-danger: #EF5350; --color-warning: #FFB74D; --color-success: #66BB6A; --color-background: #0d1117; --color-card: #161b22; --color-surface: #21262d; --color-text: #e6edf3; --color-text-secondary: #8b949e; --color-border: #30363d; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.50); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.50); } :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] button { color-scheme: dark; } /* ====================== tokens.css ====================== */ /* =================================================================== tokens.css — FarmStack 정밀 디자인 토큰 (2026-05-10) -------------------------------------------------------------------- 참조 디자인 (화면 캡처 2026-05-10 172145.png) 의 정밀한 색·간격·그림자. 기존 design-tokens.css 와 호환; 두 파일이 모두 로드되면 본 파일이 우선. ─────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* === Brand colors (정밀 — 참조 이미지의 진한 녹색) === */ --color-primary: #2D7A3E; --color-primary-hover: #246330; --color-primary-light: #E8F5EE; --color-primary-soft: #F0F9F4; --color-primary-dark: #1F5A2E; --color-primary-border: #B7DFC4; --color-secondary: #1565C0; --color-secondary-light: #E3F2FD; /* === Status === */ --color-error: #DC2626; --color-error-bg: #FEE2E2; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-success: #10B981; --color-success-bg: #D1FAE5; --color-info: #3B82F6; --color-info-bg: #DBEAFE; --color-danger: #DC2626; /* === Neutral text & surfaces === */ --color-text: #111827; --color-text-strong: #030712; --color-text-secondary: #6B7280; --color-text-tertiary: #9CA3AF; --color-text-inverse: #FFFFFF; --color-bg-page: #F9FAFB; --color-bg-card: #FFFFFF; --color-bg-subtle: #F3F4F6; --color-bg-muted: #F9FAFB; /* legacy aliases — 기존 design-tokens.css 와 호환 */ --color-background: var(--color-bg-page); --color-card: var(--color-bg-card); --color-surface: var(--color-bg-subtle); /* === Borders === */ --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-input: #D1D5DB; --color-border-focus: #2D7A3E; /* === Spacing scale (8px base, 4px step) === */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* legacy aliases */ --spacing-xs: var(--space-xs); --spacing-sm: var(--space-sm); --spacing-md: var(--space-md); --spacing-lg: var(--space-lg); --spacing-xl: var(--space-xl); /* === Radius === */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* === Shadows (참조 이미지의 옅은 카드 그림자) === */ --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-card-hover: 0 4px 8px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04); --shadow-pop: 0 8px 24px rgba(17, 24, 39, 0.12); --shadow-focus: 0 0 0 3px rgba(45, 122, 62, 0.18); /* legacy */ --shadow-sm: var(--shadow-card); --shadow-md: var(--shadow-card-hover); --shadow-lg: var(--shadow-pop); /* === Layout === */ --sidebar-width: 240px; --sidebar-collapsed-width: 64px; --header-height: 60px; --content-max-width: 1440px; --container-form: 960px; /* 폼 컨테이너 권장 폭 */ --container-narrow: 720px; --container-content-pad-mobile: 12px; /* 모바일 좌우 마진 */ --container-content-pad-desktop: 24px; /* 데스크톱 좌우 마진 */ /* === Breakpoints (반응형 단일 출처 — media query 안에서는 직접 사용 불가, 코멘트로만 참조) === --bp-sm: 640px mobile→tablet --bp-md: 768px tablet→small-laptop --bp-lg: 1024px laptop --bp-xl: 1280px desktop --bp-2xl: 1536px wide CSS @media 는 var() 미지원이라 숫자 그대로 적는다 (값을 바꿀 일이 거의 없음). JS 에서 동기화가 필요하면 getComputedStyle 로 :root 의 --bp-* 를 읽는다. */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* === Transitions === */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* duration tokens (정밀 — 분석가 H1 권고 통일) */ --t-fast: 150ms; --t-base: 250ms; --t-slow: 350ms; /* === z-index scale (단일 출처) === */ --z-base: 1; --z-sticky: 50; --z-dropdown: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1100; /* === Typography scale (정밀 — 디자이너 §3.1) === */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 1.875rem; /* 30px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.375; --lh-normal: 1.5; --lh-relaxed: 1.625; /* === Form control tokens === */ --form-control-height: 42px; --form-control-padding-x: 14px; --form-control-padding-y: 10px; /* === Card / section tokens === */ --card-padding: var(--space-xl); --card-padding-mobile: var(--space-lg); --section-gap: var(--space-lg); /* === Elevation (별칭) === */ --elevation-0: none; --elevation-1: var(--shadow-card); --elevation-2: var(--shadow-card-hover); --elevation-3: var(--shadow-pop); /* === Font scale (typography.css 가 사용) === */ --font-scale: 1; --base-font-size: calc(16px * var(--font-scale)); } /* === Dark theme override === */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #4ADE80; --color-primary-hover: #22C55E; --color-primary-light: rgba(74, 222, 128, 0.16); --color-primary-soft: rgba(74, 222, 128, 0.08); --color-primary-dark: #15803D; --color-primary-border: rgba(74, 222, 128, 0.40); --color-secondary: #60A5FA; --color-secondary-light: rgba(96, 165, 250, 0.16); --color-error: #F87171; --color-error-bg: rgba(248, 113, 113, 0.16); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.16); --color-success: #34D399; --color-success-bg: rgba(52, 211, 153, 0.16); --color-info: #60A5FA; --color-info-bg: rgba(96, 165, 250, 0.16); --color-danger: #F87171; --color-text: #F3F4F6; --color-text-strong: #FFFFFF; --color-text-secondary: #9CA3AF; --color-text-tertiary: #6B7280; --color-bg-page: #0B1220; --color-bg-card: #111827; --color-bg-subtle: #1F2937; --color-bg-muted: #111827; --color-background: var(--color-bg-page); --color-card: var(--color-bg-card); --color-surface: var(--color-bg-subtle); --color-border: #1F2937; --color-border-strong: #374151; --color-border-input: #374151; --color-border-focus: #4ADE80; --shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.50); --shadow-pop: 0 8px 32px rgba(0,0,0,0.60); --shadow-focus: 0 0 0 3px rgba(74, 222, 128, 0.30); } :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] button { color-scheme: dark; } /* ====================== typography.css ====================== */ /* =================================================================== typography.css — Pretendard + rem 스케일 (docs/12 §3) =================================================================== */ /* font-size 강제 적용 — Settings 폰트 크기 전역 반영 (사용자 요청 2026-05-10) */ html { font-size: var(--base-font-size, calc(16px * var(--font-scale, 1))) !important; } body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 1rem; line-height: 1.5; color: var(--color-text); background-color: var(--color-background); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--spacing-sm); font-weight: 600; line-height: 1.3; color: var(--color-text); } h1, .page-title { font-size: 1.714rem; font-weight: 700; } h2, .card-title { font-size: 1.286rem; font-weight: 600; } h3 { font-size: 1.143rem; font-weight: 600; } h4 { font-size: 1.000rem; font-weight: 600; } p { margin: 0 0 var(--spacing-md); } a { color: var(--color-secondary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-secondary-light); text-decoration: underline; } code { font-family: 'Courier New', Courier, monospace; font-size: 0.92em; background: var(--color-surface); padding: 0 4px; border-radius: var(--radius-sm); } .text-secondary { color: var(--color-text-secondary); font-size: 0.929rem; } .text-right { text-align: right; } .text-center { text-align: center; } .text-monospace { font-family: 'Courier New', Courier, monospace; } .stat-value { font-size: 2.000rem; font-weight: 700; line-height: 1.1; } .stat-label { font-size: 0.929rem; color: var(--color-text-secondary); } .form-label { font-size: 0.929rem; font-weight: 500; color: var(--color-text); display: block; margin-bottom: var(--spacing-xs); } .badge, .status-badge, .trust-badge { font-size: 0.857rem; font-weight: 500; } .nav-section-title { font-size: 0.786rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.04em; } /* ====================== components.css ====================== */ /* =================================================================== components.css — FarmStack 정밀 컴포넌트 (2026-05-10 재설계) -------------------------------------------------------------------- 참조: 화면 캡처 2026-05-10 172145.png 원칙: - 카드 = 흰 배경, 12px 둥근 모서리, 옅은 그림자, 24~32px 패딩 - 섹션 타이틀 = 18~20px 굵은 검정 + 1px #E5E7EB 구분선 - 입력 = 14px 굵은 라벨, 12~14px 패딩, 6~8px radius - 카드 선택 = 큰 아이콘 + 큰 라벨 + 작은 부연; 선택 시 녹색 외곽선 + 옅은 녹색 배경 - 메인 버튼 = #2D7A3E 배경 + 흰 글씨 =================================================================== */ * { box-sizing: border-box; } /* ───────────────────────── Layout shell ───────────────────────── */ .app-container { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; transition: grid-template-columns var(--transition-normal); } body.sidebar-collapsed .app-container { grid-template-columns: var(--sidebar-collapsed-width) 1fr; } .sidebar { background: var(--color-bg-card); border-right: 1px solid var(--color-border); overflow: hidden; transition: width var(--transition-normal); display: flex; flex-direction: column; } .sidebar-header { height: var(--header-height); display: flex; align-items: center; padding: 0 var(--space-md); border-bottom: 1px solid var(--color-border); } .sidebar-logo { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 700; color: var(--color-text); font-size: 1.05rem; text-decoration: none; } .sidebar-logo i { color: var(--color-primary); font-size: 1.4rem; } /* legacy fallback */ .sidebar-logo__img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .sidebar-logo__text { line-height: 1.2; } body.sidebar-collapsed .sidebar-logo span, body.sidebar-collapsed .sidebar-logo .sidebar-logo__text { display: none; } body.sidebar-collapsed .sidebar-logo__img { width: 28px; height: 28px; } .sidebar-nav { padding: var(--space-md) 0; overflow-y: auto; } .nav-section { list-style: none; padding: 0 0 var(--space-md); margin: 0; } .nav-section-title { padding: var(--space-sm) var(--space-lg); } .nav-item { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-lg); color: var(--color-text-secondary); border-left: 3px solid transparent; transition: background var(--transition-fast), color var(--transition-fast); font-size: 0.95rem; } .nav-item i { font-size: 1.05rem; width: 20px; text-align: center; } .nav-item:hover { background: var(--color-bg-subtle); color: var(--color-text); text-decoration: none; } .nav-item.active { background: var(--color-primary-soft); color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; } body.sidebar-collapsed .nav-item span, body.sidebar-collapsed .nav-section-title { display: none; } /* 단계 193 (2026-05-23) — collapsible 사이드바 sub-tree 토글 (AI 관리 등 메뉴 많은 그룹). */ /* 단계 194 (2026-05-23) — a11y: focus-visible 윤곽선 (키보드 사용자 가시성). */ .nav-section-collapsible .nav-section-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: color var(--transition-fast); border-radius: 4px; } .nav-section-collapsible .nav-section-toggle:hover { color: var(--color-text); } .nav-section-collapsible .nav-section-toggle:focus { outline: none; } .nav-section-collapsible .nav-section-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .nav-section-collapsible .toggle-chevron { font-size: 0.85rem; transition: transform 0.18s ease; margin-right: var(--space-sm); opacity: 0.55; } .nav-section-collapsible.collapsed .toggle-chevron { transform: rotate(-90deg); } .nav-section-collapsible.collapsed > li:not(.nav-section-title) { display: none; } body.sidebar-collapsed .nav-section-collapsible .toggle-chevron { display: none; } /* ───────────────────────── Header ───────────────────────── */ .header { height: var(--header-height); background: var(--color-bg-card); border-bottom: 1px solid var(--color-border); padding: 0 var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); position: sticky; top: 0; z-index: 10; } .header-left, .header-right { display: flex; align-items: center; gap: var(--space-sm); } .header-search { display: flex; align-items: center; gap: var(--space-xs); background: var(--color-bg-subtle); padding: 6px var(--space-sm); border-radius: var(--radius-md); min-width: 280px; border: 1px solid transparent; transition: border-color var(--transition-fast), background var(--transition-fast); } .header-search:focus-within { border-color: var(--color-border-focus); background: var(--color-bg-card); } .header-search i { color: var(--color-text-secondary); } .header-search input { border: 0; background: transparent; outline: none; color: var(--color-text); width: 100%; font-size: 0.95rem; } .header-profile { display: flex; align-items: center; gap: var(--space-sm); } /* ───────────────────────── Main content ───────────────────────── */ .main-content { background: var(--color-bg-page); min-width: 0; width: 100%; /* grid cell stretch 보강 — 모바일에서 sidebar=0 일 때 main 이 collapse 되는 현상 방지 */ display: flex; flex-direction: column; } .page-content { padding: var(--space-lg) var(--container-content-pad-desktop); flex: 1; max-width: var(--content-max-width); width: 100%; margin: 0 auto; } /* 폼 페이지 (create/edit) 의 form 은 적당한 폭으로 — `.form-page-narrow` 로 명시 opt-in. filter-bar 같은 짧은 form 은 영향 없음. */ .form-page-narrow { max-width: var(--container-form); margin-left: auto; margin-right: auto; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); flex-wrap: wrap; gap: var(--space-sm); /* lg → md */ padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); /* page 영역 분리 */ } .page-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .page-title { margin: 0; font-size: 1.375rem; line-height: 1.3; word-break: keep-all; font-weight: 700; letter-spacing: -0.01em; } /* ───────────────────────── Auth shell ───────────────────────── */ .auth-shell { min-height: 100vh; background: var(--color-bg-page); display: flex; flex-direction: column; /* 단계 101 hotfix (2026-05-16): 누락된 column 추가. flex-row 기본이라 partials/flash alert 가 auth-card 옆에 가로 배치되어 카드가 좁게 쪼그라들던 버그 fix */ align-items: center; justify-content: center; padding: var(--space-lg); gap: var(--space-md); } .auth-shell > .alert { max-width: 420px; /* 단계 101 — alert 가 auth-card 와 같은 폭 + 세로 stack */ width: 100%; box-sizing: border-box; } .auth-card { background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-xl); width: 100%; max-width: 420px; border: 1px solid var(--color-border); box-sizing: border-box; } .auth-card-header { text-align: center; margin-bottom: var(--space-lg); } .auth-card-logo { font-size: 2.4rem; color: var(--color-primary); } .auth-card-logo-img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; } .auth-card-title { margin-top: var(--space-sm); } .auth-card-subtitle { color: var(--color-text-secondary); margin-top: var(--space-xs); font-size: 0.929rem; } /* ───────────────────────── Cards ───────────────────────── */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-lg); overflow: hidden; } .card-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); background: var(--color-bg-card); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } .card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-text); } .card-body { padding: var(--space-lg); } .card-footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); background: var(--color-bg-muted); } /* ───────────────────────── Section card (참조 디자인 정수) ───────────────────────── "기본 정보" 같은 섹션 — 흰 카드 + 24~32px 패딩 + 위쪽에 큰 타이틀과 옅은 구분선. form 태그 자체에 .section-card 를 붙여도 되고, 카드 안에 여러 .section-card 가 들어가도 됨. ─────────────────────────────────────────────────────────────────────────────── */ /* ─────────────────── 컴팩트 admin v4 (2026-05-10 — 카드 boundary 강제 표시) ───────── 사용자 피드백: "타이틀과 내용 위아래 구분 안 됨" — 카드 자체가 안 보였음. 원인: 페이지 배경 = 카드 배경 = 흰색, 보더/그림자 너무 약함. 해결: 페이지 배경 옅은 회색 + 카드 보더 강화 + 그림자 명확 + 타이틀 녹색 구분선. ──────────────────────────────────────────────────────────────────────────────── */ /* 페이지 main 영역 배경 — 토큰 변수로 (다크/라이트 자동 전환) */ body, .app-container, .app-container > main, .main-content, .page-content { background: var(--color-bg-page) !important; } .main-content { min-height: calc(100vh - var(--header-height, 60px)); } .section-card { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 8px !important; box-shadow: var(--shadow-card-hover) !important; padding: 24px 28px !important; margin-bottom: 20px !important; position: relative; } .section-card + .section-card { margin-top: 0; } .section-card--compact { padding: var(--space-md); } .section-card--primary { border: 1px solid var(--color-primary-border) !important; } .section-card--optional { background: var(--color-bg-subtle) !important; } .section-title { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-strong); margin: 0 0 16px 0 !important; padding-bottom: 10px !important; /* 녹색 굵은 구분선 — 다크/라이트 자동 토큰 */ border-bottom: 2px solid var(--color-primary) !important; display: flex; align-items: center; gap: 0; letter-spacing: -0.005em; line-height: 1.35; } /* 사용자 요청 — section-title 앞 아이콘 모두 숨김 */ .section-title i, .section-title .bi, .section-title [class*="bi-"] { display: none !important; } .section-title i { color: var(--color-primary); font-size: 1.1em; } .section-title small { margin-left: auto; font-size: 0.813rem; font-weight: 400; color: var(--color-text-secondary); } .section-subtitle { color: var(--color-text-secondary); font-size: 0.8125rem; /* 14 → 13 (장식 ↓) */ margin: 0 0 var(--space-md) 0; line-height: 1.4; } /* ───────────────────────── Stat grid ───────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .stat-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); display: flex; gap: var(--space-md); align-items: center; } .stat-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: white; } .stat-icon.primary { background: var(--color-primary); } .stat-icon.secondary { background: var(--color-secondary); } .stat-icon.warning { background: var(--color-warning); } .stat-icon.danger { background: var(--color-danger); } .stat-info { flex: 1; min-width: 0; } .stat-change.positive { color: var(--color-success); font-size: 0.857rem; } .stat-change.negative { color: var(--color-danger); font-size: 0.857rem; } /* ───────────────────────── Tables ───────────────────────── */ .table-responsive { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th, .data-table td { text-align: left; padding: 8px 12px; /* 12 16 → 8 12 (admin 컴팩트) */ border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: 0.875rem; /* 컴팩트 14px */ } .data-table th { background: var(--color-bg-muted); color: var(--color-text-secondary); font-weight: 600; font-size: 0.75rem; /* 13 → 12 */ text-transform: uppercase; /* admin tool — 헤더 강조 */ letter-spacing: 0.04em; white-space: nowrap; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--color-bg-muted); } .data-table tbody tr.is-deleted td { color: var(--color-text-secondary); text-decoration: line-through; } .data-table td.text-right, .data-table th.text-right { text-align: right; } .data-table td.cell-actions { text-align: right; white-space: nowrap; } .data-table td.cell-name { font-weight: 600; color: var(--color-text-strong); } .data-table td.cell-mute { color: var(--color-text-secondary); } /* ───────────────────────── Buttons ───────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; /* 10 16 → 8 14 (컴팩트) */ border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; /* 0.9 → 0.875 */ cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform 0.05s ease; text-decoration: none; line-height: 1.2; font-family: inherit; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-block { display: flex; width: 100%; justify-content: center; } .btn-sm { padding: 6px 10px; font-size: 0.813rem; } .btn-lg { padding: 12px 20px; font-size: 1rem; } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-inverse); } .btn-secondary { background: var(--color-bg-card); color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); color: var(--color-text); } .btn-soft { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary-border); } .btn-soft:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); } /* btn-add — 보조 "추가" 버튼 (참조 디자인의 옅은 녹색 + 진한 녹색 글씨) */ .btn-add { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary-border); border-style: dashed; font-weight: 600; } .btn-add:hover { background: var(--color-primary-soft); border-color: var(--color-primary); border-style: solid; color: var(--color-primary-dark); } .btn-add i { color: var(--color-primary); } /* btn-outline-primary — 녹색 외곽선 보조 액션 */ .btn-outline-primary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-primary:hover { background: var(--color-primary); color: var(--color-text-inverse); } .btn-success { background: var(--color-success); color: var(--color-text-inverse); border-color: var(--color-success); } .btn-warning { background: var(--color-warning); color: var(--color-text-inverse); border-color: var(--color-warning); } .btn-danger { background: var(--color-danger); color: var(--color-text-inverse); border-color: var(--color-danger); } .btn-link { background: transparent; color: var(--color-primary); border-color: transparent; padding: 6px 8px; } .btn-link:hover { color: var(--color-primary-hover); text-decoration: underline; } .btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn-outline:hover { background: var(--color-bg-subtle); } .btn-outline-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); } .btn-outline-danger:hover { background: var(--color-danger); color: var(--color-text-inverse); } .btn-icon { background: transparent; border: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; padding: 0; } .btn-icon:hover { background: var(--color-bg-subtle); color: var(--color-text); } .btn-icon.btn-icon-danger { color: var(--color-danger); } .btn-icon.btn-icon-danger:hover { background: var(--color-error-bg); color: var(--color-danger); } /* ───────────────────────── Status badges ───────────────────────── */ .badge, .status-badge, .trust-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-bg-subtle); color: var(--color-text); font-size: 0.75rem; font-weight: 600; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; } .badge i, .status-badge i { font-size: 0.7rem; } /* status-badge — 회원 상태 (참조 이미지의 옅은 배경 + 짙은 글씨) */ .status-badge.pending { background: var(--color-warning-bg); color: #92400E; } .status-badge.active, .status-badge.normal, .status-badge.completed { background: var(--color-success-bg); color: #065F46; } .status-badge.suspended, .status-badge.danger { background: var(--color-error-bg); color: #991B1B; } .status-badge.deactivated, .status-badge.offline { background: var(--color-bg-subtle); color: var(--color-text-secondary); } .status-badge.deleted { background: var(--color-error-bg); color: #991B1B; text-decoration: line-through; } .status-badge.in-progress { background: var(--color-info-bg); color: #1E40AF; } .status-badge.follow-up, .status-badge.warning { background: var(--color-warning-bg); color: #92400E; } .status-badge.primary { background: var(--color-primary-light); color: var(--color-primary-dark); } .trust-badge.verified { background: var(--color-success-bg); color: #065F46; } .trust-badge.unverified { background: var(--color-warning-bg); color: #92400E; } .trust-badge.official { background: var(--color-info-bg); color: #1E40AF; } /* ── tier-badge — 파트너 5-등급 (단계 37). sort_order 낮을수록 상위. ── */ .tier-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; letter-spacing: 0.02em; } .tier-badge.tier-elite { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #78350f; border-color: #d97706; box-shadow: 0 1px 2px rgba(217, 119, 6, 0.2); } .tier-badge.tier-premier { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; border-color: #6366f1; } .tier-badge.tier-advanced { background: var(--color-info-bg); color: #1E40AF; border-color: rgba(30, 64, 175, 0.3); } .tier-badge.tier-standard { background: var(--color-success-bg); color: #065F46; border-color: rgba(6, 95, 70, 0.25); } .tier-badge.tier-registered { background: var(--color-bg-subtle); color: var(--color-text-secondary); border-color: var(--color-border); } /* 다크 토큰 대응: text 가 너무 어둡지 않게 살짝 보정 */ [data-theme="dark"] .tier-badge.tier-elite { color: #fde68a; background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.45); } [data-theme="dark"] .tier-badge.tier-premier { color: #c7d2fe; background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.45); } [data-theme="dark"] .tier-badge.tier-advanced { color: #93c5fd; } [data-theme="dark"] .tier-badge.tier-standard { color: #6ee7b7; } [data-theme="dark"] .tier-badge.tier-registered { color: var(--color-text-secondary); } /* tier-card — Tier 정책 페이지 표시용 */ .tier-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); background: var(--color-bg); display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; } .tier-card .tier-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .tier-card .tier-card-title { font-size: 1.125rem; font-weight: 700; margin: 0; } .tier-card .tier-card-meta { font-size: 0.75rem; color: var(--color-text-secondary); } .tier-card .tier-card-criteria, .tier-card .tier-card-benefits { font-size: 0.875rem; line-height: 1.5; } .tier-card .tier-card-criteria { color: var(--color-text); } .tier-card .tier-card-benefits { margin: 0; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-bg-muted); color: var(--color-text); } .tier-card.tier-card-elite { border-color: #d97706; } .tier-card.tier-card-premier { border-color: #6366f1; } .tier-card.tier-card-advanced { border-color: rgba(30, 64, 175, 0.4); } .badge-list { display: flex; gap: var(--space-xs); flex-wrap: wrap; } .badge-soft { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary-border); } /* ───────────────────────── Forms (정밀 — 참조 이미지 기준) ───────────────────────── */ .form-stack { display: flex; flex-direction: column; gap: var(--space-md); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } /* form-row 변형 — 강제 한 줄 (사용자 요청 2026-05-10) */ .form-row.form-row--address { display: flex !important; flex-wrap: nowrap !important; gap: 14px !important; align-items: end; } .form-row.form-row--coords { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; } .form-row.form-row--cultiv-desc { display: flex !important; flex-wrap: nowrap !important; gap: 14px !important; align-items: start; } @media (max-width: 768px) { .form-row.form-row--address { flex-wrap: wrap !important; } .form-row.form-row--coords { grid-template-columns: repeat(2, 1fr) !important; } .form-row.form-row--cultiv-desc { flex-wrap: wrap !important; } } .form-row { align-items: start; margin-bottom: var(--space-md); } .form-row:last-child { margin-bottom: 0; } /* orphan 배너 — description 의 [orphan: ...] 텍스트를 분리해 별도 표시 */ .orphan-banner { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; margin: 0 0 var(--space-md) 0; background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--color-text-strong); } .orphan-banner i { color: var(--color-warning); font-size: 1em; flex-shrink: 0; } .orphan-banner__label { font-weight: 700; color: var(--color-warning); flex-shrink: 0; } .orphan-banner__detail { color: var(--color-text-secondary); } .orphan-banner__detail code { background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px; } .orphan-banner__detail a { color: var(--color-primary); font-weight: 600; text-decoration: underline; } .form-row > .form-group-grow { grid-column: span 2; } .form-row > .form-group-narrow { max-width: 180px; } .form-row > .form-group-button-align { align-self: end; } .form-group { display: flex; flex-direction: column; gap: 6px; /* 컴팩트 — 6px (라벨-입력) */ min-width: 0; } .form-label { font-size: 0.8125rem; /* 13px — admin 컴팩트 (라벨이 입력보다 작음) */ font-weight: 600; color: var(--color-text-secondary); /* 라벨 옅게 — 입력값에 시각 무게 */ display: block; margin: 0; line-height: 1.4; text-transform: none; } .form-label small { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-secondary); margin-left: 4px; } .form-label .required { color: var(--color-error); margin-left: 2px; font-weight: 700; font-size: 1.05em; line-height: 1; } .form-label small { margin-left: 6px; font-size: 0.75rem; font-weight: 400; color: var(--color-text-secondary); } .form-control { padding: 8px 12px; /* 10 14 → 8 12 (컴팩트) */ border: 1px solid var(--color-border-input); background: var(--color-bg-card); color: var(--color-text); border-radius: var(--radius-sm); /* md → sm */ font-size: 0.9rem; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); font-family: inherit; line-height: 1.5; min-height: 42px; } .form-control::placeholder { color: var(--color-text-tertiary); } .form-control:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .form-control.is-invalid, .form-control[aria-invalid="true"] { border-color: var(--color-error); background-color: var(--color-error-bg); } .form-control.is-invalid:focus, .form-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); } .form-error { color: var(--color-error); font-size: 0.813rem; font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 4px; } /* 빈 에러 또는 hidden 속성일 때 강제 숨김 (display:flex 가 hidden 무력화 방지) */ .form-error[hidden], .form-error.is-empty { display: none !important; } /* form-error 안의 아이콘 모두 숨김 (사용자 요청 — 빨간 원+느낌표 제거) */ .form-error i, .form-error .bi, .form-error [class*="bi-"] { display: none !important; } .form-control:disabled, .form-control[readonly] { background: var(--color-bg-subtle); color: var(--color-text-secondary); cursor: not-allowed; } .form-control[readonly]:focus { box-shadow: none; border-color: var(--color-border-input); } textarea.form-control { min-height: 80px; resize: vertical; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M4.427 6.427a.75.75 0 011.06 0L8 8.94l2.513-2.513a.75.75 0 011.06 1.06l-3.043 3.044a.75.75 0 01-1.06 0L4.427 7.487a.75.75 0 010-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } .form-readonly { padding: 10px 14px; background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--color-text); min-height: 42px; display: flex; align-items: center; word-break: break-all; } .form-helper { font-size: 0.813rem; color: var(--color-text-secondary); margin: 4px 0 0 0; display: flex; align-items: center; gap: 4px; } .form-helper i { font-size: 0.85em; } .form-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); } .form-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .form-check.inline { margin-right: var(--space-md); } /* ───── 카드 선택 그리드 (참조 이미지의 핵심: 출처 유형 4개 카드) ───── .card-grid { ... } 안에 .card-option 들이 들어가고, 선택 시 .card-option--selected. 라디오/체크박스를 hidden 으로 숨기고 라벨을 카드로 만든다. ─────────────────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 140→180: 좁은 영역에서 자연 2-3열 */ gap: var(--space-md); /* 12px → 16px */ } .card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* 120→160 */ } .card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 180→220: 4 카드 더 큼 */ } .card-option { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); /* 8 → 8 (var) */ padding: var(--space-lg) var(--space-md); /* 18 12 → 24 16 */ background: var(--color-bg-card); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform 0.15s ease; color: var(--color-text); min-height: 132px; /* 110 → 132 */ word-break: keep-all; } .card-option:hover { border-color: var(--color-primary-border); background: var(--color-primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .card-option:focus-within { box-shadow: var(--shadow-focus); } .card-option input[type="radio"], .card-option input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; } .card-option__icon { font-size: 1.6rem; color: var(--color-text-secondary); transition: color var(--transition-fast); line-height: 1; } .card-option__icon img, .card-option__icon svg { width: 28px; height: 28px; display: block; } .card-option__label { font-size: 0.9375rem; /* 14 → 15 */ font-weight: 600; color: var(--color-text); line-height: 1.35; } .card-option__hint { font-size: 0.8125rem; /* 12 → 13 */ color: var(--color-text-secondary); line-height: 1.4; } /* selected — JS 가 input.checked 에 따라 클래스 토글 */ .card-option.is-selected, .card-option:has(input:checked) { border-color: var(--color-primary); border-width: 2px; background: var(--color-primary-light); padding: 17px 11px; /* border 1.5→2 보정 */ } .card-option.is-selected .card-option__icon, .card-option:has(input:checked) .card-option__icon { color: var(--color-primary); } .card-option.is-selected .card-option__label, .card-option:has(input:checked) .card-option__label { color: var(--color-primary-dark); } /* ───── 토글 스위치 (참조 이미지의 "도서로 등록" 토글) ───── */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch__track { position: absolute; inset: 0; background: #CBD5E1; border-radius: var(--radius-pill); transition: background var(--transition-fast); cursor: pointer; } .toggle-switch__track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--color-bg-card); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--transition-fast); } .toggle-switch input:checked + .toggle-switch__track { background: var(--color-primary); } .toggle-switch input:checked + .toggle-switch__track::before { transform: translateX(20px); } .toggle-switch input:focus-visible + .toggle-switch__track { box-shadow: var(--shadow-focus); } .toggle-row { display: flex; align-items: center; gap: var(--space-md); padding: 14px var(--space-md); background: var(--color-bg-muted); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .toggle-row__body { flex: 1; min-width: 0; } .toggle-row__title { font-weight: 600; color: var(--color-text); font-size: 0.9rem; } .toggle-row__hint { color: var(--color-text-secondary); font-size: 0.813rem; margin-top: 2px; } /* ───────────────────────── Filter bar ───────────────────────── */ .filter-bar { display: grid; grid-template-columns: 1fr repeat(auto-fit, minmax(160px, 200px)) auto auto; gap: var(--space-sm); align-items: end; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-card); } /* filter-bar — 한 줄 강제 (사용자 요청 2026-05-10) */ .filter-bar { display: flex !important; flex-wrap: nowrap !important; align-items: end !important; gap: 8px !important; padding: var(--space-sm) var(--space-md) !important; overflow-x: auto; /* 좁은 viewport 가로 스크롤 */ } .filter-bar > .form-group { flex: 0 0 auto !important; min-width: 140px; margin-bottom: 0 !important; } .filter-bar > .form-group:first-child { flex: 1 1 240px !important; /* 검색 input 만 넓게 */ } .filter-bar > .form-check, .filter-bar > .btn { flex: 0 0 auto !important; white-space: nowrap; } .filter-bar .form-check { height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); background: var(--color-bg-muted); font-size: 0.875rem; } /* ───────────────────────── Tabs ───────────────────────── */ .tab-nav { display: flex; gap: 4px; /* 컴팩트 */ border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-md); /* lg → md */ overflow-x: auto; } .tab-link { padding: 6px 12px; /* 10 16 → 6 12 */ border-bottom: 2px solid transparent; color: var(--color-text-secondary); font-weight: 500; font-size: 0.875rem; white-space: nowrap; margin-bottom: -1px; } .tab-link:hover { color: var(--color-text); text-decoration: none; } .tab-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } /* ─── show.php — admin 단일 페이지 패턴 ─── 7 탭 → 모든 panel 동시 표시 + tab-nav 는 sticky anchor menu (스크롤 점프). 관리자가 한 화면에서 모든 정보 보고 싶음 (정보 밀도 ↑). ─────────────────────────────────────── */ .tab-nav.js-tabnav { position: sticky; top: 0; z-index: 10; background: var(--color-bg-page, #F9FAFB); padding: var(--space-sm) 0; margin-bottom: var(--space-md); } /* 모든 tabpanel 동시 노출 (JS hidden 무시) */ section[role="tabpanel"][hidden] { display: block !important; } /* anchor scroll-margin 으로 sticky tab-nav 가 가리지 않게 */ section[role="tabpanel"] { scroll-margin-top: 60px; } /* ───────────────────────── Pagination ───────────────────────── */ .pagination { display: inline-flex; gap: 4px; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; /* 36 → 32 (admin 컴팩트) */ padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-bg-card); font-size: 0.8125rem; /* 14 → 13 */ transition: background var(--transition-fast), border-color var(--transition-fast); } .page-link:hover { background: var(--color-bg-subtle); text-decoration: none; } .page-link.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } .page-link.disabled { color: var(--color-text-tertiary); cursor: not-allowed; } /* ───────────────────────── Alerts ───────────────────────── */ .alert { display: flex; align-items: flex-start; gap: var(--space-sm); padding: 12px var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md); border: 1px solid transparent; font-size: 0.9rem; /* 좁은 flex 컨테이너에서 narrow column 으로 shrink 되는 현상 방지 */ width: 100%; box-sizing: border-box; flex-shrink: 0; word-break: keep-all; /* CJK 단어 단위 줄바꿈 — 한 글자씩 세로 표시 방지 */ overflow-wrap: anywhere; /* 그래도 넘치면 적절히 break */ } .alert > span { min-width: 0; flex: 1 1 auto; word-break: keep-all; } .alert-success { background: var(--color-success-bg); color: #065F46; border-color: rgba(16, 185, 129, 0.30); } .alert-danger { background: var(--color-error-bg); color: #991B1B; border-color: rgba(220, 38, 38, 0.30); } .alert-warning { background: var(--color-warning-bg); color: #92400E; border-color: rgba(245, 158, 11, 0.30); } .alert-info { background: var(--color-info-bg); color: #1E40AF; border-color: rgba(59, 130, 246, 0.30); } /* ───────────────────────── Empty state ───────────────────────── */ .empty-state { background: var(--color-bg-card); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); text-align: center; padding: var(--space-2xl) var(--space-xl); color: var(--color-text-secondary); } .empty-state i { font-size: 2.4rem; color: var(--color-text-tertiary); display: block; margin-bottom: var(--space-sm); } .empty-state p { margin: 0 0 var(--space-md) 0; } /* ───────────────────────── Key-value list ───────────────────────── */ .key-value { display: grid; grid-template-columns: 130px 1fr; /* 200 → 130 (admin 컴팩트) */ gap: 6px var(--space-md); /* 10 → 6 */ align-items: start; } .key-value dt { color: var(--color-text-secondary); font-size: 0.8125rem; /* 14 → 13 */ font-weight: 500; padding-top: 1px; } .key-value dd { margin: 0; color: var(--color-text); font-size: 0.875rem; /* 0.9 → 0.875 (14px) */ word-break: break-all; line-height: 1.5; } @media (max-width: 640px) { .key-value { grid-template-columns: 1fr; gap: 2px var(--space-sm); } .key-value dt { padding-top: 8px; } } /* ───────────────────────── Inline form ───────────────────────── */ .inline-form { display: inline; } /* ───────────────────────── Avatar / chips ───────────────────────── */ .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--color-bg-subtle); border: 1px solid var(--color-border); flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; } .avatar-lg { width: 64px; height: 64px; } .avatar-xl { width: 96px; height: 96px; } /* 회원 목록 cell 의 이름 앞 avatar — 인라인 정렬 */ .cell-name__avatar-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .cell-name__avatar-row .avatar { flex-shrink: 0; } .user-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .user-cell__name { font-weight: 600; color: var(--color-text-strong); } .user-cell__sub { font-size: 0.813rem; color: var(--color-text-secondary); } .chip-list { display: inline-flex; flex-wrap: wrap; gap: 4px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-bg-subtle); color: var(--color-text); font-size: 0.75rem; border: 1px solid var(--color-border); } .chip-soft { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary-border); } /* ───────────────────────── Section grid (dashboard cards) ───────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } /* ═══════════════════════════════════════════════════════════════════════ 반응형 — 단일 출처 (tokens.css 의 --bp-* 코멘트 참조) 원칙: mobile-first 가 아닌 desktop-first (기존 룰 그대로 두고 좁아질 때만 override). ════════════════════════════════════════════════════════════════════════ */ /* ─── Backdrop for mobile sidebar ─── */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); z-index: 99; opacity: 0; transition: opacity var(--transition-normal); } body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; } /* ─── ≤ 1024px (laptop 이하) ─── */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .filter-bar { grid-template-columns: 1fr 1fr; } .filter-bar > .form-group { grid-column: span 1; } .filter-bar > .form-group:first-child { grid-column: 1 / -1; } } /* ─── ≤ 992px (small-laptop) ─── */ @media (max-width: 992px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .key-value { grid-template-columns: 1fr; gap: var(--space-xs); } .key-value dt { padding-top: var(--space-sm); font-size: 0.813rem; text-transform: uppercase; letter-spacing: 0.02em; } } /* ─── ≤ 768px (tablet → mobile transition) ─── */ @media (max-width: 768px) { /* Sidebar → 햄버거로 slide-in (position:fixed 로 grid 에서 빠짐). grid-template-columns: 0 1fr 이면 main 이 첫 셀(0px) 차지 → main 폭 0 collapse 버그. 단일 컬럼 1fr 로 main 이 viewport 전체 폭 차지하게 (사용자 결정 2026-05-11 단계 27 후속 hotfix). */ .app-container { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: var(--sidebar-width); z-index: 100; transform: translateX(-100%); transition: transform var(--transition-normal); } body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-pop); } body.sidebar-collapsed .sidebar { /* 모바일에서는 collapsed 무시 */ width: var(--sidebar-width); } /* Header */ .header { padding: 0 var(--space-md); } .header-search { display: none; } .header-profile-name { display: none; } /* Layout padding 축소 */ .page-content { padding: var(--space-md) var(--container-content-pad-mobile); } .section-card { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-md); } .section-card--compact { padding: var(--space-md); } /* page-header — 모바일 세로 스택 */ .page-header { flex-direction: column; align-items: flex-start; } .page-actions { width: 100%; } /* form-row — 모바일 1열 (각 form-group 100%) */ .form-row { grid-template-columns: 1fr; gap: var(--space-md); } .form-row > .form-group-grow { grid-column: span 1; } .form-row > .form-group-narrow { max-width: 100%; } .form-row > .form-group-button-align { align-self: stretch; } .form-row > .form-group-button-align .form-label[aria-hidden="true"] { display: none; /* 모바일에서 숨김 라벨이 자리 차지 안하도록 */ } .form-row > .form-group-button-align .btn { width: 100%; justify-content: center; } /* card-grid — 모바일 1열, 카드 가로형 (아이콘 좌·텍스트 우) 권장 */ .card-grid, .card-grid--wide, .card-grid--compact { grid-template-columns: 1fr; gap: var(--space-sm); } .card-option { flex-direction: row; text-align: left; align-items: center; gap: var(--space-md); padding: var(--space-md); min-height: 64px; } .card-option__icon { font-size: 1.4rem; flex-shrink: 0; } .card-option__icon img, .card-option__icon svg { width: 24px; height: 24px; } .card-option__label { font-size: 0.95rem; flex: 1; min-width: 0; } .card-option__hint { font-size: 0.75rem; margin-left: auto; text-align: right; flex-shrink: 0; } /* filter-bar — 모바일 1열 */ .filter-bar { grid-template-columns: 1fr; padding: var(--space-md); } .filter-bar > .form-group { grid-column: span 1; } .filter-bar .btn, .filter-bar .form-check { width: 100%; justify-content: center; } /* stat-grid — 모바일 1열 */ .stat-grid { grid-template-columns: 1fr; } /* form-actions sticky footer — full width 버튼 */ .form-actions { gap: var(--space-sm); } .form-actions > .btn { flex: 1 1 auto; justify-content: center; } .form-actions > .btn-link { flex: 0 0 auto; } /* sticky 액션 카드 — 모바일에서는 더 큰 padding */ .card-footer { padding: var(--space-md); flex-direction: column-reverse; align-items: stretch; } .card-footer > .btn { width: 100%; justify-content: center; } /* 데이터 테이블 — 가로 스크롤 + 셀 padding 축소 */ .data-table th, .data-table td { padding: 10px 12px; } /* tab-nav 가 좁을 때 가로 스크롤 보장 */ .tab-nav { -webkit-overflow-scrolling: touch; } /* 농장 카드 (form-card) padding 축소 */ .form-card .card-body { padding: var(--space-md); } .form-card .card-header { padding: var(--space-md); } /* Auth shell — 모바일에서 카드 padding 축소 */ .auth-shell { padding: var(--space-md); } .auth-card { padding: var(--space-lg); } } /* ─── ≤ 1024px (좁은 데스크톱 / 태블릿) — 컴팩트 admin ─── */ @media (max-width: 1024px) { .card-grid, .card-grid--wide, .card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-sm); } .section-card { padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); } } /* ─── ≤ 640px (small mobile) ─── */ @media (max-width: 640px) { .page-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } /* 1rem → 1.125rem 살짝 키움 */ .section-card { padding: var(--space-md); margin-bottom: var(--space-lg); } .section-card--primary { padding-left: calc(var(--space-md) - 4px); } /* 카드 옵션 hint 가 너무 길면 별도 행으로 */ .card-option__hint { margin-left: 0; text-align: left; flex-basis: 100%; } /* 데이터 테이블 셀 폰트 축소 + min-width 보장 (가로 스크롤) */ .data-table { font-size: 0.85rem; min-width: 600px; } /* 데이터 테이블 — 카드형 변환 (.data-table--cards 가 적용된 경우만) */ .data-table--cards, .data-table--cards thead, .data-table--cards tbody, .data-table--cards th, .data-table--cards td, .data-table--cards tr { display: block; } .data-table--cards { min-width: 0; } .data-table--cards thead { position: absolute; top: -9999px; left: -9999px; /* 시각적으로 숨김, 스크린리더는 셀의 data-label 로 */ } .data-table--cards tr { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-sm); box-shadow: var(--shadow-card); } .data-table--cards td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); text-align: right; } .data-table--cards td::before { content: attr(data-label); font-weight: 600; color: var(--color-text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; text-align: left; flex: 0 0 40%; } .data-table--cards td.cell-actions { justify-content: flex-end; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px dashed var(--color-border); } .data-table--cards td.cell-actions::before { display: none; } .data-table--cards td.cell-name { font-size: 1rem; flex-direction: column; align-items: flex-start; text-align: left; margin-bottom: var(--space-xs); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); } .data-table--cards td.cell-name::before { display: none; } } /* ───────────────────────── Legacy compatibility (기존 클래스들 유지) ───────────────────────── */ .form-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); margin: 0 0 var(--space-lg) 0; background: var(--color-bg-card); } .form-legend { font-size: 1rem; font-weight: 700; padding: 0 var(--space-sm); color: var(--color-text-strong); } .form-card { background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .form-card .card-header { background: transparent; padding: var(--space-md); } .form-card .card-body { padding: var(--space-md); } .required { color: var(--color-error); font-weight: 700; font-size: 1.15em; /* 1.05 → 1.15 (별표 더 두드러짐) */ margin-left: 4px; vertical-align: -1px; } /* ═══════════════════════════════════════════════════════════════════════ Users redesign 2026-05-10 — 추가 컴포넌트 (분석가 + 디자이너 보고서 반영) - .section-card 변형 (--primary / --standard / --optional) - .progress-rail / .progress-step (페이지 헤더 우측 1/6) - .form-sticky-footer (저장/취소 sticky 영역) - .modal* (focus-trap 가능한 a11y 모달) - .empty-state (보강) - .btn min-height 42px 일치 (현재 패딩만 — 명시 보강) - .password-strength (강도 미터) - .check-status (인라인 검증 ✓ / ✕) ════════════════════════════════════════════════════════════════════════ */ /* ─── section-card 변형 (좌측 컬러 레일로 위계 표현) ─── */ .section-card { position: relative; } .section-card--primary { border-left: 4px solid var(--color-primary); } .section-card--standard { border-left: 4px solid var(--color-secondary); } .section-card--optional { border-left: 4px solid var(--color-border-strong); background: var(--color-bg-card); } .section-card[data-progress] .section-progress-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); background: var(--color-bg-subtle); padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); flex-shrink: 0; } .section-card.is-active[data-progress] .section-progress-pill { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: var(--color-primary-border); } /* ─── 페이지 헤더 progress (1/6 형태) ─── */ .page-progress { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); } .page-progress__icon { color: var(--color-primary); } .page-progress__current { color: var(--color-text-strong); font-weight: var(--fw-bold); } /* ─── 폼 sticky 저장 footer ─── */ .form-sticky-footer { position: sticky; bottom: 0; z-index: var(--z-sticky); margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.06); display: flex; justify-content: flex-end; gap: var(--space-sm); align-items: center; flex-wrap: wrap; } .form-sticky-footer__hint { margin-right: auto; color: var(--color-text-secondary); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 768px) { .form-sticky-footer { padding: var(--space-md); flex-direction: column-reverse; align-items: stretch; border-radius: var(--radius-md); } .form-sticky-footer > .btn { width: 100%; justify-content: center; } .form-sticky-footer__hint { margin-right: 0; text-align: center; justify-content: center; order: 999; } } /* ─── btn 통일 — 최소 높이 42px (form-control 과 visual rhythm) ─── */ .btn { min-height: var(--form-control-height); } .btn-sm { min-height: 32px; } .btn-lg { min-height: 48px; } .btn-icon { min-height: 34px; } /* ─── inline 검증: 성공 / 실패 / 진행중 ─── */ .check-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--fw-medium); margin-top: 4px; line-height: var(--lh-snug); } .check-status--ok { color: var(--color-success); } .check-status--error { color: var(--color-error); } .check-status--loading { color: var(--color-text-secondary); } .check-status i { font-size: 0.95em; } .check-status--loading i { animation: cs-spin 0.9s linear infinite; } @keyframes cs-spin { to { transform: rotate(360deg); } } /* ─── 비밀번호 강도 미터 ─── */ .password-strength { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-sm); } .password-strength__bars { display: inline-flex; gap: 3px; flex: 0 0 auto; } .password-strength__bar { width: 28px; height: 4px; border-radius: 2px; background: var(--color-border); transition: background var(--t-fast); } .password-strength.is-low .password-strength__bar:nth-child(1) { background: var(--color-error); } .password-strength.is-medium .password-strength__bar:nth-child(-n+2) { background: var(--color-warning); } .password-strength.is-strong .password-strength__bar { background: var(--color-success); } .password-strength__label { font-weight: var(--fw-medium); color: var(--color-text-secondary); } .password-strength.is-low .password-strength__label { color: var(--color-error); } .password-strength.is-medium .password-strength__label { color: var(--color-warning); } .password-strength.is-strong .password-strength__label { color: var(--color-success); } /* ─── modal (a11y, focus-trap 가능) ─── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.55); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility 0s linear var(--t-base); } .modal-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-base), visibility 0s; } .modal-dialog { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: flex-start; justify-content: center; padding: var(--space-lg) var(--space-md); overflow-y: auto; pointer-events: none; } .modal-dialog.is-open { display: flex; } .modal-content { pointer-events: auto; background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); width: 100%; max-width: 600px; margin: var(--space-xl) auto; overflow: hidden; transform: translateY(-12px); opacity: 0; transition: opacity var(--t-base), transform var(--t-base); } .modal-dialog.is-open .modal-content { transform: translateY(0); opacity: 1; } .modal-content--lg { max-width: 800px; } .modal-content--sm { max-width: 420px; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); } .modal-title { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text-strong); display: flex; align-items: center; gap: 6px; } .modal-title i { color: var(--color-primary); } .modal-close { background: transparent; border: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; font-size: 1.1rem; } .modal-close:hover { background: var(--color-bg-subtle); color: var(--color-text); } .modal-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .modal-body { padding: var(--space-lg); max-height: calc(100vh - 220px); overflow-y: auto; } .modal-footer { display: flex; gap: var(--space-sm); justify-content: flex-end; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-bg-muted); flex-wrap: wrap; } body.has-modal-open { overflow: hidden; } /* 라운드 79c + 80 (2026-05-27) — modal 안 모든 인터랙티브 요소 강제 활성. * 외부 ancestor 의 inert/pointer-events 가 modal 안까지 영향을 못 주도록 보장. * 라운드 79 + 79b 의 JS-side 가드와 함께 layered defense. * * 라운드 80: dialog 자체에도 pointer-events 강제 + inert 속성 무시. * 배경: 모달이 열려있는데도 inner 클릭/타이핑/스크롤 모두 차단되는 증상 → * dialog 자체가 inert 또는 pointer-events:none 으로 잠긴 케이스 대비. */ .modal-dialog.is-open { pointer-events: auto !important; } .modal-dialog.is-open[inert] { /* inert 속성이 어디선가 잘못 적용되어도 시각적으로는 살아있도록 */ opacity: 1 !important; } .modal-dialog.is-open .modal-content, .modal-dialog.is-open .modal-content * { pointer-events: auto !important; } .modal-dialog.is-open .modal-body { pointer-events: auto !important; overflow-y: auto !important; } .modal-dialog.is-open input, .modal-dialog.is-open select, .modal-dialog.is-open textarea, .modal-dialog.is-open button { pointer-events: auto !important; user-select: auto !important; } @media (max-width: 768px) { .modal-dialog { padding: 0; align-items: stretch; } .modal-content { margin: 0; max-width: 100%; border-radius: 0; min-height: 100vh; } .modal-body { max-height: none; } .modal-footer { flex-direction: column-reverse; } .modal-footer > .btn { width: 100%; justify-content: center; } } /* ─── show.php tab 패널 a11y ─── */ [role="tabpanel"][hidden] { display: none !important; } /* ─── show.php 모바일 카드뷰 (외부 시스템 등) ─── */ @media (max-width: 640px) { .show-external-mobile-cards { display: flex; flex-direction: column; gap: var(--space-sm); } .show-external-mobile-cards > .data-table { display: none; } } /* ─── empty-state 보강 ─── */ .empty-state h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); color: var(--color-text); } .empty-state .btn { margin-top: var(--space-sm); } /* ═══════════════════════════════════════════════════════════════════════ Sidebar footer + 토글 버튼 + 폰트 크기 라디오 (2026-05-10 — ADR-016) 사이드바 footer = 시스템 메뉴 (환경 설정 / 관리자) — sticky 하단. 토글 버튼 = sidebar-header 우측 명시 표시 (햄버거). font-scale-grid = 4단계 라디오 카드 (작게 / 기본 / 크게 / 매우 크게). ═══════════════════════════════════════════════════════════════════════ */ /* ─── 사이드바 — flex 컬럼으로 footer 가 항상 하단 (header 의 .sidebar 정의 보강) ─── */ .sidebar-header { /* 헤더 안에서 logo/toggle 버튼 = 한 폭 가득 클릭 영역 */ padding: 0; gap: 0; } /* * sidebar-logo 가