/* 화면 공통 스타일. 색은 여기서 정하지 않는다. --cx-primary 같은 변수로만 쓰고, 실제 값은 아래 테마 블록이 정한다. 설치할 때 고른 테마가 으로 오면 그에 맞는 값이 걸린다. 화면마다 색을 직접 적으면 테마를 바꿔도 그 화면만 예전 색으로 남는다. */ /* ── 테마 ─────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="green"] { --cx-primary: #283979; --cx-primary-dark: #1f5592; --cx-accent: #009490; } :root[data-theme="navy"] { --cx-primary: #1b3a6b; --cx-primary-dark: #14294b; --cx-accent: #2c5aa0; } :root[data-theme="charcoal"] { --cx-primary: #2f3437; --cx-primary-dark: #1e2224; --cx-accent: #4a5257; } :root[data-theme="violet"] { --cx-primary: #4a2e7a; --cx-primary-dark: #372058; --cx-accent: #6b4ba8; } :root { --cx-bg: #ffffff; --cx-fg: #1f2429; --cx-muted: #6b7378; --cx-line: #dfe3e6; --cx-danger: #c0392b; } * { box-sizing: border-box; } body { margin: 0; background: var(--cx-bg); color: var(--cx-fg); font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; font-size: 14px; line-height: 1.6; } /* ── 상단바 ───────────────────────────────────────────────────────────────── */ .cx-topbar { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 52px; background: var(--cx-primary); color: #fff; /* 폭이 좁아지면 메뉴가 아래로 흐르지 않고 가로로 밀린다. 줄바꿈을 허용하면 상단바 높이가 들쭉날쭉해져 본문 위치가 흔들린다. */ overflow-x: auto; white-space: nowrap; } .cx-brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 16px; } .cx-nav { display: flex; gap: 4px; flex: 1; } .cx-nav a { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 6px 12px; border-radius: 4px; } .cx-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; } /* 지금 보고 있는 화면. 색만으로 표시하면 색약인 사람에게 구별되지 않아 밑줄을 함께 둔다. */ .cx-nav a.on { color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 #fff; } .cx-user { display: flex; align-items: center; gap: 10px; } .cx-logout button { background: none; border: 1px solid rgba(255, 255, 255, .4); color: #fff; padding: 4px 10px; border-radius: 4px; cursor: pointer; } /* ── 본문 ─────────────────────────────────────────────────────────────────── */ .cx-main { max-width: 1280px; margin: 0 auto; padding: 20px; } .cx-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .cx-page-head h1 { font-size: 20px; margin: 0; } .cx-btn { display: inline-block; padding: 6px 14px; border: 1px solid var(--cx-line); border-radius: 4px; background: #fff; color: var(--cx-fg); text-decoration: none; cursor: pointer; font-size: 13px; } .cx-btn.cx-primary { background: var(--cx-accent); border-color: var(--cx-accent); color: #fff; } .cx-search { display: flex; gap: 8px; margin-bottom: 12px; } .cx-search input { flex: 1; max-width: 360px; padding: 6px 10px; border: 1px solid var(--cx-line); border-radius: 4px; } /* ── 표 ───────────────────────────────────────────────────────────────────── */ /* 좁은 화면에서 표가 화면 밖으로 나가지 않게 가로 스크롤을 준다. 줄바꿈으로 우겨 넣으면 칸이 무너져 어느 값이 어느 열인지 알 수 없게 된다. */ .cx-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .cx-table th, .cx-table td { border-bottom: 1px solid var(--cx-line); padding: 8px 10px; text-align: left; white-space: nowrap; } .cx-table th { background: #f5f7f8; font-weight: 600; } .cx-table td a { color: var(--cx-primary-dark); } .cx-center { text-align: center; } .cx-right { text-align: right; } /* 비었을 때·불러오는 중·실패했을 때를 서로 다르게 보여 준다. 실패를 빈 표로 두면 '자료가 없다' 로 읽히는데, 사용자가 할 일이 다르다 — 없으면 등록하면 되고, 실패면 다시 시도하거나 알려야 한다. */ .cx-empty td, .cx-loading td { text-align: center; color: var(--cx-muted); padding: 28px; } .cx-error td { text-align: center; color: var(--cx-danger); padding: 28px; } /* ── 상세 ─────────────────────────────────────────────────────────────────── */ .cx-detail dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; border-top: 1px solid var(--cx-line); padding-top: 16px; } .cx-detail dt { color: var(--cx-muted); } .cx-detail dd { margin: 0; word-break: break-all; } .cx-section { margin-top: 28px; } .cx-section h2 { font-size: 16px; } /* ── 페이지 ───────────────────────────────────────────────────────────────── */ .cx-paging { display: flex; gap: 4px; justify-content: center; margin-top: 16px; flex-wrap: wrap; } .cx-paging button { min-width: 32px; padding: 4px 8px; border: 1px solid var(--cx-line); background: #fff; border-radius: 4px; cursor: pointer; } .cx-paging button.on { background: var(--cx-primary); border-color: var(--cx-primary); color: #fff; } .cx-foot { text-align: center; color: var(--cx-muted); padding: 24px; font-size: 12px; } /* ── 좁은 화면 ────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .cx-main { padding: 12px; } /* 상세의 라벨/값을 위아래로. 140px 라벨을 유지하면 값 칸이 너무 좁아진다. */ .cx-detail dl { grid-template-columns: 1fr; gap: 2px 0; } .cx-detail dt { margin-top: 10px; font-size: 12px; } } /* ── 종류 탭 ──────────────────────────────────────────────────────────────── */ /* 요청 화면처럼 같은 모양의 목록이 여럿일 때. 좁은 화면에서는 가로로 밀린다 — 줄바꿈하면 탭이 두 줄이 되어 아래 표 위치가 화면마다 달라진다. */ .cx-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--cx-line); overflow-x: auto; white-space: nowrap; } .cx-tabs a { padding: 8px 14px; text-decoration: none; color: var(--cx-muted); border-bottom: 2px solid transparent; } .cx-tabs a.on { color: var(--cx-primary); font-weight: 700; border-bottom-color: var(--cx-accent); } /* ── 상태 배지 ────────────────────────────────────────────────────────────── */ /* 색만으로 구별하지 않는다 — 색약인 사람에게는 같은 회색으로 보인다. 글자가 항상 함께 있고, 색은 훑어볼 때 돕는 역할만 한다. */ .cx-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--cx-line); background: #f5f7f8; } .cx-st-대기 { background: #eef1f3; } .cx-st-승인진행중 { background: #e6f0fb; border-color: #b9d5f2; } .cx-st-승인완료 { background: #e7f6ec; border-color: #b6e0c4; } .cx-st-승인반려 { background: #fdecea; border-color: #f3c3bd; color: var(--cx-danger); } .cx-st-작업실패 { background: #fdecea; border-color: #f3c3bd; color: var(--cx-danger); } .cx-st-작업성공 { background: #e7f6ec; border-color: #b6e0c4; } .cx-search select { padding: 6px 10px; border: 1px solid var(--cx-line); border-radius: 4px; background: #fff; } /* 체크박스가 붙은 검색 조건. 글자와 상자가 따로 놀지 않게 묶는다. */ .cx-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } /* 파이프라인 상태. 요청/승인과 다른 낱말을 쓰므로 따로 둔다. */ .cx-st-running { background: #e6f0fb; border-color: #b9d5f2; } .cx-st-success { background: #e7f6ec; border-color: #b6e0c4; } .cx-st-failed { background: #fdecea; border-color: #f3c3bd; color: var(--cx-danger); } .cx-st-canceled { background: #eef1f3; color: var(--cx-muted); } /* ── 대시보드 카드 ────────────────────────────────────────────────────────── */ /* auto-fit 으로 폭에 맞춰 접힌다. 개수를 고정하면 좁은 화면에서 카드가 찌그러져 숫자가 줄바꿈된다 — 훑어보는 화면인데 읽는 데 시간이 걸리면 뜻이 없다. */ .cx-cards { display: grid; gap: 12px; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .cx-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--cx-line); border-radius: 6px; text-decoration: none; color: var(--cx-fg); background: #fff; } .cx-card:hover { border-color: var(--cx-accent); } .cx-card-label { font-size: 13px; color: var(--cx-muted); } .cx-card-value { font-size: 26px; color: var(--cx-primary); } /* 상세의 처리 영역 */ .cx-actions { display: flex; gap: 8px; margin-top: 10px; } .cx-btn.cx-danger { background: var(--cx-danger); border-color: var(--cx-danger); color: #fff; } #reason { width: 100%; max-width: 640px; padding: 8px; border: 1px solid var(--cx-line); border-radius: 4px; } /* 화면 맨 위 안내. 무엇을 하는 화면인지 한 줄로 알려 준다. */ .cx-hint { color: var(--cx-muted); font-size: 13px; margin: 0 0 12px; } /* ── 사용자설정 · OTP ─────────────────────────────────────────────────────── */ .cx-otp-state { color: var(--cx-muted); padding: 12px 0; } .cx-steps { line-height: 2; padding-left: 20px; } .cx-qr { margin: 12px 0; min-height: 200px; } .cx-qr img { border: 1px solid var(--cx-line); border-radius: 4px; } .cx-qr-fallback { color: var(--cx-danger); } /* 손으로 옮겨 적을 값이다. 좁은 글꼴로 두면 0/O·1/I 를 잘못 읽는다. */ .cx-secret code { font-family: ui-monospace, "Consolas", monospace; font-size: 15px; letter-spacing: 1px; background: #f5f7f8; padding: 4px 8px; border-radius: 4px; word-break: break-all; }