/* ============================================================ * app.css — 컴포넌트/레이아웃 스타일 * 색·폰트·간격 값은 tokens.css 의 CSS 변수를 사용합니다. * (templates 의 에서 tokens.css 를 먼저 로드해야 함) * ============================================================ */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-14); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* ===== 페이지 레이아웃 ===== */ .page-main { flex: 1 0 auto; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-10); } .container { /* 기존 단순 페이지(placeholder 등) 호환 */ flex: 1 0 auto; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-6); } .muted { color: var(--color-text-muted); } .ok { color: var(--color-primary); font-weight: var(--fw-semibold); } /* ============================================================ * 헤더 (상단 메뉴) — Figma Group 3 (1920x70) * ============================================================ */ .topbar { height: var(--header-h); flex-shrink: 0; /* 긴 페이지(대시보드 등)에서 flex 컬럼이 헤더를 눌러 작아지는 것 방지 */ background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .topbar-inner { height: 100%; max-width: none; /* 디자인: 풀폭 (로고 좌측끝 / 버튼 우측끝) */ margin: 0; padding: 0 var(--space-6); /* 좌우 24px = 디자인 엣지 여백 */ display: flex; align-items: center; gap: var(--space-8); } .brand { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--color-text); white-space: nowrap; } .brand b { color: var(--color-primary); } /* 1Depth 메뉴 */ .menu { list-style: none; display: flex; margin: 0; padding: 0; height: 100%; align-items: stretch; gap: var(--space-1); } .menu-item { position: relative; display: flex; align-items: center; } .menu-link { display: flex; align-items: center; height: 100%; padding: 0 var(--space-4); color: var(--color-text-sub); font-size: var(--fs-18); /* 디자인 18px */ font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; } .menu-item:hover > .menu-link { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* 2Depth 드롭다운 */ .submenu { list-style: none; margin: 0; padding: var(--space-2) 0; position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-pop); display: none; z-index: 110; } .menu-item:hover > .submenu { display: block; } .submenu li a { display: block; padding: 10px var(--space-4); color: var(--color-text-sub); font-size: var(--fs-14); white-space: nowrap; } .submenu li a:hover { background: var(--color-bg); color: var(--color-primary); } /* 우측 인증 버튼 */ .topbar-auth { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-14); font-weight: var(--fw-medium); cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-ghost { color: var(--color-text-sub); background: transparent; } .btn-ghost:hover { color: var(--color-primary); } .btn-line { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong); } .btn-line:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn-primary { color: var(--color-text-invert); background: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dark); } /* 헤더 인증 버튼 — Figma A-2-2 회원가입/로그인 (흰 알약형, 피그마 원본 자연 크기) */ .btn-auth { height: 40px; /* 디자인 높이 40 */ min-width: 92px; /* 회원가입/로그인 폭 통일 (디자인 80/87 → 동일하게) */ padding: 0 var(--space-3); gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border-strong); /* #D9D9D9 ≈ 디자인 #DADADA */ border-radius: var(--radius-pill); color: var(--color-text); /* #26282C ≈ 디자인 #222222 */ font-size: var(--fs-15); font-weight: var(--fw-medium); } .btn-auth svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-auth:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ============================================================ * 푸터 — Figma Group 427318428 (1920x70) * ============================================================ */ .footer { flex-shrink: 0; height: var(--footer-h); background: var(--color-surface); border-top: 1px solid var(--color-border); } .footer-inner { height: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-sub); /* 디자인 #595C61 */ font-size: var(--fs-14); /* 디자인 14px */ flex-wrap: wrap; } .footer-inner .sep { width: 1px; height: 12px; background: var(--color-border-strong); /* 디자인 #D5D5D5 ≈ #D9D9D9 */ } .footer-links { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } /* 디자인: 흰 배경 + #DADADA 테두리 + radius 6, 높이 30 */ .footer-links a { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-sub); font-size: var(--fs-14); } .footer-links a:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ============================================================ * 대시보드 — Figma A-1_대시보드 샘플 * ============================================================ */ .page-title { font-size: var(--fs-24); font-weight: var(--fw-bold); margin: 0 0 var(--space-6); } .section-title { font-size: var(--fs-20); font-weight: var(--fw-bold); margin: 0; } /* 공통 카드 */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6) 0; } .card-head h3 { font-size: var(--fs-18); font-weight: var(--fw-semibold); margin: 0; } .card-more { font-size: var(--fs-14); color: var(--color-text-muted); } .card-more:hover { color: var(--color-primary); } .card-body { padding: var(--space-5) var(--space-6) var(--space-6); } /* 1) 통계 요약 카드 4개 (282x130) */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-5); } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); position: relative; min-height: 130px; } .stat-card .stat-label { font-size: var(--fs-14); color: var(--color-text-sub); font-weight: var(--fw-medium); } .stat-card .stat-value { font-size: var(--fs-26); font-weight: var(--fw-bold); } .stat-card .stat-delta { font-size: var(--fs-12); color: var(--color-text-muted); } .stat-card .stat-icon { position: absolute; top: var(--space-5); right: var(--space-6); width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: rgba(79, 63, 236, .08); color: var(--color-primary); } /* 2) 차트 2개 (588x340) */ .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); } .chart-placeholder { height: 240px; display: grid; place-items: center; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--fs-14); background: var(--color-bg); } /* 3) 하단 3분할 (게시판A / 게시판B / 메뉴 바로가기) */ .bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); } /* 게시판 리스트 */ .board-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; } .board-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); font-size: var(--fs-14); } .board-list li:first-child { border-top: 0; } .board-list .b-title { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-list li:hover .b-title { color: var(--color-primary); } .board-list .b-date { color: var(--color-text-muted); font-size: var(--fs-12); flex-shrink: 0; } /* 메뉴 바로가기 */ .shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); } .shortcut { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-sub); font-size: 13px; text-align: center; } .shortcut:hover { border-color: var(--color-primary); color: var(--color-primary); } .shortcut .ic { color: var(--color-primary); } /* ===== 반응형 ===== */ @media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .chart-grid, .bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .stat-grid { grid-template-columns: 1fr; } .topbar-inner { gap: var(--space-4); } .menu { display: none; } /* 모바일 메뉴는 추후 햄버거로 */ } /* ============================================================ * 관리 화면 공통 (목록/검색/테이블) — CAMS pm/* 이식용 * ============================================================ */ /* 페이지 헤더 + 브레드크럼 */ .page-head { margin-bottom: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-12); color: var(--color-text-muted); margin-bottom: var(--space-3); } .breadcrumb .sep { color: var(--color-border-strong); } .breadcrumb .here { color: var(--color-text-sub); font-weight: var(--fw-medium); } .page-head .page-title { margin: 0 0 var(--space-2); } .page-desc { color: var(--color-text-sub); font-size: var(--fs-14); margin: 0; } /* 검색 필터 카드 */ .filter-card { padding: var(--space-6); margin-bottom: var(--space-5); } .filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); } .field { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: var(--space-3); } .field > label { font-size: var(--fs-14); color: var(--color-text-sub); font-weight: var(--fw-medium); } /* 폼 입력 요소 */ .input, .select { width: 100%; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--fs-14); color: var(--color-text); background: var(--color-surface); } .input:focus, .select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79, 63, 236, .12); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237E8192' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } /* 필터 하단 액션 (검색 버튼 등) */ .filter-actions { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } /* 테이블 위 툴바 (건수 / 신규등록 등) */ .table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .table-toolbar .count { font-size: var(--fs-14); color: var(--color-text-sub); } .table-toolbar .count b { color: var(--color-primary); } /* 데이터 테이블 */ .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); background: var(--color-surface); border-top: 2px solid var(--color-text); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; } .data-table thead th { padding: var(--space-3) var(--space-4); background: var(--color-bg); color: var(--color-text-sub); font-weight: var(--fw-semibold); text-align: center; white-space: nowrap; border-bottom: 1px solid var(--color-border); } .data-table tbody td { padding: var(--space-3) var(--space-4); text-align: center; color: var(--color-text); border-bottom: 1px solid var(--color-border); } .data-table tbody tr { cursor: pointer; } .data-table tbody tr:hover td { background: var(--color-bg); } .data-table .left { text-align: left; } .data-table .num { color: var(--color-text-muted); } .data-table td.expired { color: #E03131; } .data-table .empty { padding: var(--space-10); color: var(--color-text-muted); cursor: default; } .data-table tbody tr:has(.empty):hover td { background: transparent; } /* 페이지네이션 */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-6); } .pagination a, .pagination span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-14); color: var(--color-text-sub); } .pagination a:hover { background: var(--color-bg); } .pagination .current { background: var(--color-primary); color: var(--color-text-invert); font-weight: var(--fw-medium); } @media (max-width: 1024px) { .filter-grid { grid-template-columns: 1fr; } } /* ============================================================ * 회원가입 / 로그인 화면 — Figma A-2 * ============================================================ */ /* 회원가입: 좌 폼 / 우 안내·FAQ 2단 */ .auth-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); align-items: start; } /* 폼 필드 */ .form-card { padding: var(--space-8); } .form-field { margin-bottom: var(--space-5); } .form-field > label { display: block; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--color-text-sub); margin-bottom: var(--space-2); } .form-field .req { color: var(--color-primary); margin-left: 2px; } .input-row { display: flex; gap: var(--space-2); } .input-row .input, .input-row .select { flex: 1; } .input-row .btn { flex-shrink: 0; } .form-submit { display: flex; justify-content: center; margin-top: var(--space-8); } .form-submit .btn { min-width: 220px; height: 48px; font-size: var(--fs-16); } /* 우측 안내 + FAQ 패널 */ .info-panel { padding: var(--space-6); } .info-panel h3 { font-size: var(--fs-18); font-weight: var(--fw-bold); margin: 0 0 var(--space-4); } .info-panel .info-desc { list-style: none; margin: 0 0 var(--space-6); padding: 0; } .info-panel .info-desc li { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-2); font-size: var(--fs-14); color: var(--color-text-sub); line-height: 1.6; } .info-panel .info-desc li::before { content: "•"; position: absolute; left: 0; color: var(--color-primary); } .faq-title { font-size: var(--fs-16); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); } .faq-list { list-style: none; margin: 0; padding: 0; } .faq-list li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); font-size: var(--fs-14); color: var(--color-text); } .faq-list li:first-child { border-top: 0; } .faq-list .q { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-sm); background: rgba(79, 63, 236, .1); color: var(--color-primary); font-weight: var(--fw-bold); font-size: var(--fs-12); } .faq-list li:hover .q-text { color: var(--color-primary); } /* 로그인: 중앙 카드 */ .login-wrap { max-width: 420px; margin: 48px auto; } .login-wrap .form-card { padding: var(--space-8); } .login-head { text-align: center; margin-bottom: var(--space-6); } .login-head .page-title { margin: 0 0 var(--space-2); } .login-foot { text-align: center; margin-top: var(--space-5); font-size: var(--fs-14); color: var(--color-text-muted); } .login-foot a { color: var(--color-primary); font-weight: var(--fw-medium); } @media (max-width: 900px) { .auth-layout { grid-template-columns: 1fr; } }