/* ====================================================================== cgrid.css — 관리자 목록 그리드 키트 스타일 (colon-grid 정본) 여기에는 **그리드가 쓰는 것만** 둔다. 사이드바·로그인·대시보드처럼 앱마다 다른 껍데기는 app.css 로 나갔다 — 섞여 있으면 키트만 떼어낼 수 없다. ⚠️ Tailwind 없이도 표가 제대로 보이도록 정렬/굵기 유틸을 자체 정의한다(맨 아래). Tailwind 가 있는 프로젝트에서는 같은 뜻이라 충돌하지 않는다. ====================================================================== */ /* ============================================================ 기반 토큰 — 출처: postring admin.css (canonical) 기본 테마는 블랙앤화이트다. **쓰는 쪽에서 덮어쓰라고 열어 둔 값들**이며, 키트 규칙은 이 토큰만 참조한다(색을 직접 박지 않는다). 쓰는 쪽 예: :root { --primary: #2563eb; --gk-row-hover-bg: #eff6ff; --gk-row-hover-fg: inherit; } ============================================================ */ :root { --primary: #111827; /* 블랙(주 강조) */ --primary-dark: #000000; --primary-light: #f3f4f6; /* 연한 회색(호버/선택 배경) */ --primary-border: #d1d5db; --secondary: #64748b; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --bg: #f1f5f9; --card-bg: #ffffff; --text-primary: #1e293b; --text-secondary: #64748b; --border: #e2e8f0; --control-border: #d5dbe3; /* 폼 컨트롤·버튼 공통 보더 — 모든 인풋/셀렉트/버튼 통일. v4.23.0 #f0f0f0 → #d5dbe3(입력칸이 바탕과 구분이 안 됐다, §1.4.2) */ --radius: 12px; --radius-sm: 8px; --gk-combo-min: 7rem; /* 콤보(셀렉트) 최소 폭 — 화면마다 필터 시작 위치가 들쭉날쭉하지 않게 */ --gk-search-btn-min: 26px; /* 검색카드 초기화/조회의 최소 높이 — 필터를 따라 줄되 여기서 멈춘다 (§2.2) */ /* ----- 그리드 테마 (쓰는 쪽에서 덮어쓰는 지점) ----- 기본값은 위 기반 토큰에서 파생된다 → --primary 만 바꿔도 전체가 따라온다. */ --gk-head-bg: #f8fafc; /* 헤더 배경 */ --gk-row-hover-bg: var(--primary); /* 행 마우스오버 배경 */ --gk-row-hover-fg: #ffffff; /* 행 마우스오버 글자 */ --gk-row-edit-hover-bg: #f8fafc; /* 수정모드에서는 반전하지 않는다 */ --gk-row-opened-bg: color-mix(in srgb, var(--primary) 12%, #fff); /* 열어본 행 — 테마색의 연한 버전(노랑 고정값이 아니라 테마를 따라간다) */ --gk-sel-bg: rgba(17, 24, 39, .07); /* 범위 선택 배경 */ --gk-sel-fg: var(--text-primary); /* 범위 선택 글자 — hover 반전을 되돌린다 */ --gk-sel-edge: var(--primary); /* 선택 테두리 */ --gk-fill-bg: rgba(245, 158, 11, .13); /* 채우기 미리보기 */ --gk-fill-edge: #f59e0b; --gk-zoom-base: #94a3b8; /* 셀 안 돋보기 — 기본 */ --gk-zoom-invert: #ffffff; /* 행이 반전됐을 때 */ --gk-editing-bg: #fffbeb; /* 수정모드 도구 그룹 */ --gk-editing-border: #fcd34d; --gk-mcard-border: #dde2ec; /* 모바일 행 카드 테두리(v4.17.2, §2.19 ⑦) — 표 칸 선(--border)보다 또렷하게 */ --gk-mcard-shadow: 0 2px 8px rgba(26, 26, 46, .05); /* 모바일 행 카드 옅은 그림자 */ } /* ---------- [hidden] 은 늘 숨김 (v4.23.0, §1.4.2) ---------- JS 가 el.hidden = true 로 숨겨도 같은 요소의 표시 클래스(Tailwind flex · block · grid, 사이트 .row 등)가 이겨서 보였다 (postring 쿠폰 '기간 지정 / 발급 후 N일' 이 둘 다 보이던 것). 조건부 칸(data-show-if)도 이것에 기댄다. */ [hidden] { display: none !important; } /* ---------- 로딩 FOUC 방지: 향상(admin-grid.js) 전 원본 숨김 + 자리 확보 ---------- */ table[data-grid]:not(.grid-ready) { visibility: hidden; } /* 향상 전 원본 테이블 숨김 */ [data-grid-actions] { display: none; } /* JS가 툴바로 이전 후 노출 */ .bg-white:has(> table[data-grid]:not(.grid-ready)), .bg-white:has([data-grid-actions]) { position: relative; min-height: 360px; } /* 그리드 영역 자리 확보 */ .bg-white:has(> table[data-grid]:not(.grid-ready))::after { /* 로딩 shimmer 플레이스홀더 */ content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, #eef2f7 30%, #f7fafc 50%, #eef2f7 70%); background-size: 200% 100%; animation: gridShimmer 1.25s linear infinite; } @keyframes gridShimmer { to { background-position: -200% 0; } } /* 상세/수정 모달이 목록 위로 함께 로드될 때: 목록은 배경이므로 FOUC shimmer·자리확보 생략(모달 뒤 스켈레톤 깜빡임 방지) */ body:has([data-admin-modal]) .bg-white:has(> table[data-grid]:not(.grid-ready))::after { content: none !important; animation: none !important; } body:has([data-admin-modal]) .bg-white:has(> table[data-grid]:not(.grid-ready)), body:has([data-admin-modal]) .bg-white:has([data-grid-actions]) { min-height: 0 !important; } /* ---------- 체크박스 · 라디오 (v4.23.0, §1.4.2) ---------- 브라우저 기본 모양 대신 키트 모양 — 18px · 테마색(--primary) · 라벨과 세로 가운데. 그리드 행 선택·폼 선택지에 같이 쓰인다. (예전 v4.22 까지는 accent-color 만 — 브라우저마다 모양·크기가 달랐다) */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; box-sizing: border-box; display: inline-grid; place-content: center; vertical-align: middle; border: 1.5px solid #b6bfcc; background: #fff; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; } input[type="checkbox"] { border-radius: 5px; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--primary); } input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); } input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); } input[type="checkbox"]:indeterminate { background: var(--primary); border-color: var(--primary); } input[type="checkbox"]:indeterminate::after { content: ""; width: 9px; height: 2px; background: #fff; border-radius: 1px; border: 0; transform: none; } input[type="radio"]:checked { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 4px #fff; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(17, 24, 39, .18); } input[type="radio"]:checked:focus-visible { box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px rgba(17, 24, 39, .18); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; } /* ---------- 검색/필터 영역 (진담 filter-bar) ---------- */ /* 검색카드 — 예전엔 Tailwind 유틸로 만들던 껍데기. 키트가 자립하도록 여기서 정의한다. */ .admin-search-card { display: flex; gap: 16px; align-items: stretch; padding: 16px; margin-bottom: 16px; } .filter-bar { display: flex; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; flex: 1 1 auto; } /* 가로 24px — 필터끼리 붙어 보이지 않게 */ .filter-group { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 0 0 auto; } .filter-group > label { font-size: 13px; color: var(--text-primary); font-weight: 600; margin: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } /* 라벨 앞 세로 바 — 필터가 여럿이면 어디부터 어디까지가 한 칸인지 안 읽힌다. 전체건수(.grid-count)와 같은 표식을 작게 쓴다 → 같은 언어로 읽힌다. */ .filter-group > label::before { content: ""; flex: 0 0 auto; display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: var(--primary); } /* 검색카드 버튼열 — 필터 높이를 따라가되 **바닥이 있다**. 두 버튼은 세로 영역을 반씩 나눠 쓴다(§2.2). 다만 min-height:0 이면 필터가 한 줄일 때 버튼이 25px 까지 눌려 글자가 상자에 끼인다 → 최소 높이를 둬서 거기서 멈춘다. 바닥에 걸리면 카드가 그만큼(1줄 기준 +10px) 커진다 — 버튼이 못 읽히는 것보다 낫다는 판단. */ /* 버튼 사이 간격도 좁힌다 — 바닥값과 합쳐 **한 줄 필터(58px) 안에 딱 들어가** 카드를 안 민다 (26+4+26 = 56 ≤ 58). 필터가 두 줄 이상이면 어차피 바닥에 안 닿으니 아무 영향이 없다. */ .admin-search-card .admin-search-actions { gap: 4px; } .admin-search-card .admin-search-actions .btn { min-height: var(--gk-search-btn-min); /* 크기는 **키트가 정한다**. 앱이 자기 `.btn-primary { padding: 9px 18px }` 로 덮으면 같은 키트인데 검색 버튼만 7px 커졌다(velysound 실측: 카드 116 vs colon-grid 102). 여기서 다시 못 박아 어느 앱에 얹혀도 검색카드 버튼은 같은 크기가 된다. */ padding: 0 14px; font-size: 13px; /* 보더도 마찬가지 — 앱 `.btn-sm { border: none }`(velysound admin.css 계열 포크 3곳)에 눌려 초기화/조회가 **테두리 없는 맨 글자**로 보였다(§2.3 컨트롤 통일 위반). 앱이 색을 바꾸고 싶으면 같은 자리(0,3,0)에서 덮으면 된다 — velysound 가 그렇게 한다. */ border-width: 1.5px; border-style: solid; border-color: var(--control-border); /* `border:none` 은 색까지 currentColor 로 되돌린다 → 검은 테두리가 된다 */ } .filter-row { display: inline-flex; align-items: center; gap: 6px; } /* ---------- 바로 반영(data-search-live) · 상세 필터 접기(data-filter-more) · 걸린 조건 칩 — v4.12.0 ---------- */ /* 바로 반영 화면은 [조회]가 기간이 있을 때만 남는다 — 초기화 하나면 세로로 늘리지 않고 컨트롤 높이에 맞춘다 */ .admin-search-card .admin-search-actions.is-live { justify-content: flex-end; } .admin-search-card .admin-search-actions.is-live .btn { flex: 0 0 auto; height: 34px; } /* 상세 필터 버튼 — 기본 줄 끝. 숫자 = 상세 칸에 걸린 조건 수 */ .filter-more-btn { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 700; } .filter-more-btn.on { border-color: var(--primary); } .filter-more-n:empty { display: none; } .filter-more-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; } /* 상세 칸 — 기본 줄 아래 한 줄을 통째로(접힘이 기본, 열림은 화면별로 기억) */ .filter-more { display: none; flex: 1 1 100%; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; padding-top: 12px; border-top: 1px dashed var(--control-border); grid-column: 1 / -1; } .filter-more.is-open { display: flex; } /* v4.21.0 — 펼친 상세 칸은 **기본 줄에 이어 붙는다**(윗줄 빈자리부터 채우고 넘치면 다음 줄). 상세 칸을 따로 한 줄로 두면 윗줄이 비어도 두 줄이 됐다. [상세 필터] 단추는 늘 줄 끝(order). 좁은 화면은 아래 @media 그대로(한 줄에 하나). */ @media (min-width: 769px) { .filter-more.is-open { display: contents; } .filter-bar > .filter-more-toggle { order: 1; } .filter-bar > .filter-foot { order: 2; } } /* 한 줄에 다 들어감(.is-more-fit, grid 가 잰다) — 접지 않는다: 상세 칸을 펴고 단추를 숨긴다 */ .admin-search-card.is-more-fit .filter-more { display: contents; } .admin-search-card.is-more-fit .filter-more-toggle { display: none; } /* 묶음(data-filter-set) — 같은 이름끼리 한 덩어리로 줄바꿈 */ .filter-set { display: inline-flex; align-items: flex-end; gap: 10px 24px; flex: 0 0 auto; flex-wrap: nowrap; max-width: 100%; } @media (max-width: 768px) { .filter-set { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; grid-column: 1 / -1; } } /* 기간을 바꾸고 아직 [조회]를 안 눌렀다 — 칸과 버튼에 표시(놓치지 않게) */ .filter-group.is-pending .filter-input { border-color: #f3b14b; background: #fffbf2; } .admin-search-card .admin-search-actions .btn.is-pending { position: relative; } .admin-search-card .admin-search-actions .btn.is-pending::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; } /* 걸린 조건 칩 — ✕ 로 하나씩 푼다. 없으면 자리도 차지하지 않는다 */ .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; } .filter-chips.is-empty { display: none; } .filter-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: #eef2ff; color: #2a3a8f; font-size: 12.5px; font-weight: 600; max-width: 100%; } .filter-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: #6c78c9; cursor: pointer; padding: 0; } .filter-chip-x:hover { background: #dfe5ff; color: #2a3a8f; } .filter-chip-x .gk-icon { width: 12px; height: 12px; } /* ---------- 자주 쓰는 필터 (v4.20.0, cgrid-presets.js · §1.7 data-presets) ---------- 켜진 검색카드만(.has-fp) — 위 = 필터 칸이 카드 너비를 다 쓰고, 맨 아랫줄(.fp-bar) = 왼쪽 칩 · 오른쪽 [상세 필터][초기화][조회] 가로. 선언 없는 표는 이 규칙에 하나도 안 걸린다(예전 배치 그대로). */ .admin-search-card.has-fp { flex-direction: column; gap: 14px; } .admin-search-card.has-fp > .filter-bar { width: 100%; } /* v4.21.1 — 버튼열이 아래 줄(.fp-bar)로 내려가 오른쪽 기둥 자리가 비는데, 필터 칸은 제 너비 그대로라 줄 끝에 빈칸이 남았다 (colon-work 실측). 켜진 카드에서는 칸이 그 줄 남는 너비를 나눠 갖고 안의 컨트롤도 칸을 꽉 채운다. v4.21.2 — 칸 기본 너비를 **내용 폭이 아니라 정해진 값(flex-basis)** 으로 — 내용 폭이면 검색어 줄 인라인 28rem·콤보 인라인 폭 (옵션 글자가 길면 더 넓다)이 그대로 줄바꿈 기준이 돼, 카드 안쪽 1250px 에 4칸(검색어 720px)밖에 안 들어갔다. 보통 칸(콤보·셀렉트) 10rem · 기간 18rem · 검색어(검색유형+입력) 19.5rem(입력 ≈ 12rem) → 1250px 에 검색어 + 고르기 5칸. 줄바꿈은 이 값으로 하고, 남는 폭은 칸들이 나눠 가져 줄 끝까지 찬다. 안의 인라인 폭은 !important 로 눌러 칸을 따라가게 한다. v4.21.3 — **늘어나는 건 검색어 칸뿐**. 고르기(콤보·셀렉트·다중선택)·기간 칸까지 남는 폭을 나눠 가지니 검색어 없는 줄 (colon-work 세금계산서 둘째 줄 진행상태·작업·귀속년월)에서 '작업' 콤보가 약 280px·귀속년월이 약 400px 로 쓸데없이 컸다 (상한 22rem·30rem 은 걸려 있었지만 그 아래라 안 막았다). 고르기 10rem · 기간 18rem 은 제 기본 폭 그대로(flex 0 0), 검색어(검색유형+입력)만 19.5rem 에서 줄 남는 폭을 흡수 → 검색어 있는 줄은 꽉, 없는 줄은 기본 폭으로 왼쪽부터(남는 자리는 빈다). 배지 칩 줄(.badge-filter)은 칩 개수만큼 폭이 필요해 내용 폭 그대로. 좁은 화면은 아래 @media(grid) 그대로. v4.22.1 — 피커(v4.22.0)가 기간 칸에 붙이는 보이는 글자 칸(input.cg-pk-input, type=text)이 '검색어 칸' 판정에 걸려 귀속년월 기간이 줄 남는 폭을 다 먹었다(colon-work 세금계산서 실측) → 검색어 판정에서 .cg-pk-input 을 뺀다. */ @media (min-width: 769px) { .admin-search-card.has-fp .filter-bar .filter-group:not(.filter-more-toggle) { flex: 0 0 10rem; min-width: 0; align-items: stretch; } .admin-search-card.has-fp .filter-bar .filter-group:has(> .filter-row > input[type="month"]), .admin-search-card.has-fp .filter-bar .filter-group:has(> .filter-row > input[type="date"]) { flex: 0 0 18rem; } .admin-search-card.has-fp .filter-bar .filter-group:has(> .filter-row > input[type="text"]:not(.cg-pk-input)) { flex: 1 1 19.5rem; } .admin-search-card.has-fp .filter-bar .filter-group:has(> .filter-row > .badge-filter) { flex: 0 0 auto; min-width: auto; } /* 묶음 — 상자는 안 칸 폭의 합(안 칸 width 로 정한다, flex-basis 는 상자 기본 너비에 안 먹는다). 안에 검색어 칸이 있을 때만 상자째 늘고 그 칸이 흡수 */ .admin-search-card.has-fp .filter-bar .filter-set { flex: 0 0 auto; min-width: 0; } .admin-search-card.has-fp .filter-bar .filter-set:has(> .filter-group > .filter-row > input[type="text"]:not(.cg-pk-input)) { flex: 1 1 auto; } .admin-search-card.has-fp .filter-bar .filter-set > .filter-group { width: 10rem; } .admin-search-card.has-fp .filter-bar .filter-set > .filter-group:has(> .filter-row > input[type="month"]), .admin-search-card.has-fp .filter-bar .filter-set > .filter-group:has(> .filter-row > input[type="date"]) { width: 18rem; } .admin-search-card.has-fp .filter-bar .filter-set > .filter-group:has(> .filter-row > input[type="text"]:not(.cg-pk-input)) { width: 19.5rem; } /* 안의 컨트롤 — 인라인 폭(콤보 138px 등)을 눌러 칸을 따라가게(줄바꿈 기준은 위 flex-basis 라 칸이 커지지 않는다) */ .admin-search-card.has-fp .filter-bar .filter-group > .combobox, .admin-search-card.has-fp .filter-bar .filter-group > select, .admin-search-card.has-fp .filter-bar .filter-group > input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; min-width: 0; max-width: 100%; } .admin-search-card.has-fp .filter-bar .filter-group .combobox input { width: 100%; } /* 한 줄 칸(검색어 = 검색유형+검색어 · 기간 · 표 밖 필터): 줄 인라인 28rem 을 누르고 칸 너비를 따른다. 검색유형 콤보는 제 폭 그대로·검색어 입력이 흡수, 기간 두 칸은 반씩, 표 밖 select 하나면 꽉 */ .admin-search-card.has-fp .filter-bar .filter-group > .filter-row { display: flex; width: 100% !important; min-width: 0; max-width: 100%; } .admin-search-card.has-fp .filter-bar .filter-row > input[type="text"] { flex: 1 1 auto; min-width: 0; } .admin-search-card.has-fp .filter-bar .filter-row > input[type="month"], .admin-search-card.has-fp .filter-bar .filter-row > input[type="date"], .admin-search-card.has-fp .filter-bar .filter-row > input.cg-pk-input { flex: 1 1 0; width: auto; min-width: 0; } .admin-search-card.has-fp .filter-bar .filter-row > .combobox:only-child, .admin-search-card.has-fp .filter-bar .filter-row > select:only-child { flex: 1 1 auto; width: 100% !important; min-width: 0; } } .admin-search-card .fp-bar { display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 12px; border-top: 1px dashed var(--control-border, #e2e8f0); } .admin-search-card .fp-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; } .admin-search-card .fp-label { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-primary, #334155); white-space: nowrap; word-break: keep-all; } .admin-search-card .fp-chips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .admin-search-card .fp-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; margin: 0; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #475569; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; word-break: keep-all; cursor: pointer; box-sizing: border-box; transition: background .15s, border-color .15s, color .15s; } .admin-search-card .fp-chip:hover { border-color: #94a3b8; color: #0f172a; } .admin-search-card .fp-chip.is-on { background: #0f172a; border-color: #0f172a; color: #fff; } .admin-search-card .fp-chip .fp-count { font-weight: 700; color: #e11d48; } .admin-search-card .fp-chip.is-on .fp-count { color: #fda4af; } .admin-search-card .fp-mine { padding: 0 4px 0 0; cursor: default; } .admin-search-card .fp-mine > button { display: inline-flex; align-items: center; gap: 5px; height: 100%; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .admin-search-card .fp-mine .fp-pick { padding: 0 4px 0 12px; } .admin-search-card .fp-mine .fp-star { display: inline-flex; color: #f59e0b; } .admin-search-card .fp-mine .fp-del { width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 999px; color: #94a3b8; } .admin-search-card .fp-mine .fp-del:hover { background: rgba(148, 163, 184, .18); color: #e11d48; } .admin-search-card .fp-mine.is-on .fp-del { color: #cbd5e1; } .admin-search-card .fp-save { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 11px 0 9px; margin: 0; border: 1px dashed #cbd5e1; border-radius: 999px; background: #fff; color: #64748b; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; word-break: keep-all; cursor: pointer; box-sizing: border-box; } .admin-search-card .fp-save:hover { border-color: #64748b; color: #0f172a; } /* 오른쪽 버튼 — 키트 세로 기둥(초기화/조회)을 가로 한 줄로 */ .admin-search-card .fp-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .admin-search-card .fp-actions .filter-more-toggle { width: auto; margin: 0; padding: 0; flex: 0 0 auto; } .admin-search-card .fp-actions .filter-more-toggle > label { display: none; } .admin-search-card .fp-actions .filter-more-btn { width: auto; } .admin-search-card .fp-actions .admin-search-actions { flex-direction: row !important; align-self: center; gap: 6px; } .admin-search-card .fp-actions .admin-search-actions .btn { flex: 0 0 auto; width: auto; height: 34px; min-height: 0; } .filter-input { border: 1.5px solid var(--control-border); border-radius: var(--radius-sm); padding: 0 0.6rem; height: 34px; /* 툴바/검색 컨트롤 공통 높이 */ font-size: 13px; line-height: 1.4; outline: none; background-color: #fff; color: var(--text-primary); transition: border-color .15s, box-shadow .15s; } .filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); } /* 모달 폼 컨트롤(인풋/셀렉트/텍스트영역) 보더 = 짙은 회색 통일 (콤보 input 제외 — filter-input로 이미 통일) */ [data-admin-modal] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.combobox-input), [data-admin-modal] textarea { border-color: var(--control-border); } /* 모달 폼 컨트롤 포커스 = 검색창과 동일 통일 */ [data-admin-modal] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, [data-admin-modal] textarea:focus, [data-admin-modal] select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); outline: none; } select.filter-input { min-width: var(--gk-combo-min); /* 콤보로 안 바뀐 네이티브 셀렉트도 같은 바닥을 쓴다 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 13px 9px; padding-right: 30px; } /* ---------- 버튼 (진담 btn) ---------- */ .btn { border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; padding: 8px 16px; transition: all .15s; border: 1.5px solid var(--control-border); cursor: pointer; /* 공통 보더(짙은 회색) */ display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; /* 좁은 폭에서 글자 세로 쪼개짐 방지(§2.12) */ user-select: none; /* 그리드 드래그 중 버튼 글자가 파랗게 잡히지 않게 */ } .btn svg { flex-shrink: 0; } /* hover = 색상반전(검흰↔흰검, 파흰↔흰파)으로 통일 + 1px 올라옴·옅은 그림자(v4.29.0 §2.21 움직임 — 맨 아래 블록) */ /* 기본 버튼 = 흰 바탕·검은 글씨. 보더는 전부 짙은 회색(--control-border) 통일. hover 시 색상반전 */ .btn-primary { background: #fff; border-color: var(--control-border); color: var(--primary); } .btn-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* hover 반전: 흰검 → 검흰 */ .btn-light { background: #fff; border-color: var(--control-border); color: var(--text-primary); } .btn-light:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* 흰검 → 검흰 */ .btn-outline { background: #fff; border-color: var(--control-border); color: var(--primary); } /* §2.3 초기화 */ .btn-outline:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* 흰검 → 검흰 */ .btn-danger-outline { background: #fff; border-color: var(--control-border); color: var(--danger); } .btn-danger-outline:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* 흰빨 → 빨흰 */ .btn-sm { padding: 0 14px; height: 34px; font-size: 13px; } /* 셀렉트/툴바 컨트롤과 높이 통일 */ /* ---------- 데이터 테이블 (진담 data-table) ---------- */ /* 가로 오버플로우(컬럼 합이 넓어질 때)는 카드 안에서 스크롤 — 밖으로 안 나가게 */ .table-wrap { overflow-x: auto; } /* §2.5 table-layout: auto — 고정폭이 텍스트 컬럼을 뭉개지 않게 내용 사이징(컬럼 리사이즈는 드래그 시 px 고정으로 동작). */ .data-table { width: 100%; border-collapse: collapse; table-layout: auto; } .data-table thead th { text-align: center; } /* §450 헤더 전부 중앙정렬 */ .data-table th { background: #f8fafc !important; border-bottom: 2px solid var(--border) !important; border-right: 1px solid var(--border); /* 컬럼 구분선(리사이즈 위치 가시화) */ padding: 10px 14px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--text-secondary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } .data-table td { padding: 11px 14px !important; border-bottom: 1px solid var(--border) !important; border-right: 1px solid var(--border); /* 컬럼 구분선 */ font-size: 13px; color: var(--text-primary); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 넘치면 ... */ } .data-table th:last-child, .data-table td:last-child { border-right: none; } .data-table td.seq-cell { font-size: 11px; color: #64748b; } /* §2.10 순번=보조정보(작은 폰트+흐린 slate-500, 데이터처럼 안 읽히게) */ .data-table td .truncate, .data-table td > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 컬럼 너비 조절 핸들(임시) — 우측 경계 위 */ .col-resizer { position: absolute; top: 0; right: -1px; width: 7px; height: 100%; cursor: col-resize; user-select: none; z-index: 2; } .col-resizer:hover { background: var(--primary); opacity: .5; } /* 컬럼 위치 변경(임시, 드래그) 피드백 */ .data-table th.col-dragging { opacity: .5; } .data-table th.col-dragover { box-shadow: inset 3px 0 0 0 var(--primary); } /* 빈 상태(데이터 0건) — 고정 높이 200px. (.data-table td 의 padding !important 를 이기려 특정도↑) */ .data-table td.grid-empty-cell { height: 200px; padding: 0 !important; text-align: center; vertical-align: middle; color: var(--text-secondary); font-size: 14px; border-right: none !important; } .data-table tbody tr:last-child td { border-bottom: none !important; } .data-table tbody tr:hover td { background: var(--primary-light); } .data-table tbody tr.row-clickable { cursor: pointer; } /* 열어본 행 — 상세를 열었던 행을 닫은 뒤에도 가리킨다(§2.5). ⚠️ hover 규칙보다 **먼저** 와야 한다. 뒤에 두면 마우스를 올려도 이 색이 이겨 반전이 죽는다. */ .data-table tbody tr.row-opened > td { background: var(--gk-row-opened-bg); } /* 로우 hover = 색상반전(흰 배경 → 검정, 글자 흰색). 배지(bg-* 보유)는 자체 색 유지 */ .data-table tbody tr.row-clickable:hover td { background: var(--gk-row-hover-bg); color: var(--gk-row-hover-fg); } /* ⚠️ 드래그로 범위를 고르는 동안에는 행 반전을 끈다. 반전(어두운 배경 + 흰 글자)과 선택(밝은 배경)이 겹치면 **흰 글자 + 밝은 배경**이 되어 글자가 사라진다. 선택은 셀 단위인데 반전은 행 단위라, 같은 행의 고른 칸과 안 고른 칸이 서로 다른 색이 되는 문제도 있다. */ body.grid-dragging .data-table tbody tr.row-clickable:hover td { background: inherit; color: inherit; } /* 드래그가 끝나도 **선택이 남아 있는 동안**에는 마찬가지다 — 반전이 켜지면 고른 범위가 묻힌다. (엑셀도 범위를 고른 상태에서 행 강조를 하지 않는다) */ .data-table:has(td.cell-sel) tbody tr.row-clickable:hover td { background: inherit; color: inherit; } /* 필수 열 표시 — 선언만 하면 헤더에 점이 붙는다(화면마다 별표를 손으로 달지 않게) */ /* 필수 표시 = 헤더 **왼쪽**의 빨간 별표. 수정모드에서만 보인다(보기만 할 땐 입력 얘기가 불필요) */ .data-table.grid-edit-mode th[data-required]::before { content: '*'; color: var(--danger); font-weight: 700; margin-right: 3px; line-height: 1; } /* ---------- 정렬 헤더 (다중정렬: 1개=화살표만, 2개+=순서 숫자) ---------- */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--primary) !important; } .sort-ind { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; } .sort-ind .sort-ar { font-size: 10px; opacity: .3; } th.sortable.sorted .sort-ind .sort-ar { opacity: 1; color: var(--primary); } .sort-ind .sort-pri { display: none; min-width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--primary); border-radius: 9999px; padding: 0 3px; } .sort-ind .sort-pri:not(:empty) { display: inline-block; } /* 번호 있을 때(2개+)만 표시 */ /* 전체건수 (진담: 세로 바 + "전체 N건") */ .grid-count { font-size: 13px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; } .grid-count::before { content: ""; width: 5px; height: 16px; border-radius: 2px; background: var(--primary); display: inline-block; } .grid-count b { color: var(--primary); } /* ---------- 페이징 (진담 pagination) ---------- */ .grid-pager-area { margin-top: 16px; } /* 그리드 카드와 별개 하위 영역 */ .pagination-wrapper { display: flex; justify-content: center; align-items: center; gap: 6px; } .grid-page-status { margin-left: 10px; font-size: 13px; color: var(--text-secondary); } .page-gap { padding: 0 2px; color: var(--text-secondary); font-size: 13px; user-select: none; align-self: center; } /* 컬럼 표시/숨김 팝오버(§2.11) — 버튼 기준 툴팁식 팝업(모달 아님) */ .col-pop { position: fixed; z-index: 250; width: 300px; max-width: calc(100vw - 16px); padding: 12px; background: #fff; border: 1px solid var(--control-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); } .col-pop-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; } .col-pop-list { display: flex; flex-wrap: wrap; gap: 6px; } .col-badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .12s; background: var(--primary); border: 1px solid var(--primary); color: #fff; } /* 활성(표시) */ .col-badge:hover { opacity: .85; } .col-badge.off { background: #f1f5f9; border-color: var(--border); color: #94a3b8; } /* 비활성(숨김) */ .page-btn { min-width: 34px; height: 34px; padding: 0 8px; border: 1.5px solid var(--control-border); border-radius: var(--radius-sm); background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; color: var(--text-primary); transition: all .15s; } .page-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; } /* 색상반전 통일 */ .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .page-btn:disabled { opacity: .45; cursor: not-allowed; } /* ---------- 로딩 스켈레톤 ---------- */ @keyframes skel-shimmer { 0% { background-position: -180px 0; } 100% { background-position: calc(180px + 100%) 0; } } .skeleton-bar { display: inline-block; height: 12px; border-radius: 6px; width: 100%; background: #e9edf2; background-image: linear-gradient(90deg, #e9edf2 0, #f5f7fa 60px, #e9edf2 120px); background-size: 180px 100%; background-repeat: no-repeat; animation: skel-shimmer 1.15s ease-in-out infinite; } .grid-skeleton td { padding: 11px 14px !important; border-bottom: 1px solid var(--border) !important; } /* ---------- 공통 로딩 부품 (v4.25.0, cgrid-loading.js · ADMIN_PAGE_RULE §1.2.1) ---------- 자리 먼저 + 그 모양의 스켈레톤. is-wait = 아직 200ms 안 지남 → 자리(크기)는 차지하되 안 보인다(짧은 응답 깜빡임 방지). */ .cg-sk.is-wait, .grid-skeleton.is-wait { visibility: hidden; } .cg-sk { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; box-sizing: border-box; width: 100%; } /* 영역이 grid·flex 그릇이어도(카드 줄) 스켈레톤은 한 칸이 아니라 그릇 전체를 쓴다 — 안 그러면 블록 4개가 첫 칸에 세로로 쌓인다 */ .cg-sk, .cg-load-err { grid-column: 1 / -1; flex: 1 1 100%; } .cg-sk-over { position: absolute; inset: 0; z-index: 5; background: var(--card-bg, #fff); padding: 14px 16px; border-radius: inherit; overflow: hidden; } .cg-sk-row { display: flex; gap: 16px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef1f5; } .cg-sk-row .skeleton-bar { flex: 1 1 0; } .cg-sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .cg-sk-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 96px; box-sizing: border-box; border: 1px solid #e6eaf0; border-radius: 10px; background: var(--card-bg, #fff); } .cg-sk-field { display: flex; flex-direction: column; gap: 7px; } .cg-sk-input, .cg-sk-btn { display: block; height: 38px; border-radius: 6px; border: 1px solid #e6eaf0; background: #f6f8fb; } .cg-sk-li { padding: 7px 12px; } .cg-sk-box { display: block; width: 100%; height: 100%; min-height: 200px; border-radius: 8px; background: #eef1f5 linear-gradient(90deg, #eef1f5 0, #f6f8fb 80px, #eef1f5 160px) no-repeat; background-size: 240px 100%; animation: skel-shimmer 1.4s ease-in-out infinite; } .cg-sk-box:only-child { flex: 1 1 auto; } .cg-sk-search { display: flex; gap: 12px; align-items: flex-end; padding: 14px; border: 1px solid #e6eaf0; border-radius: 10px; background: var(--card-bg, #fff); } .cg-sk-pair { flex: 1 1 0; display: flex; flex-direction: column; gap: 7px; } .cg-sk-btn { flex: 0 0 72px; background: #e9edf2; } .cg-sk-tool { display: flex; gap: 8px; align-items: center; padding: 4px 2px 0; } .cg-sk-tool .skeleton-bar { width: auto; flex: 0 0 auto; } .cg-sk-gap { flex: 1 1 auto; } .cg-sk-thead { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e2e8f0; } .cg-sk-thead .skeleton-bar { background: #e2e7ee; } /* 실패 — 영역 안에 오류 + [다시 시도] */ .cg-load-err { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 120px; padding: 24px 16px; box-sizing: border-box; color: #475569; font-size: 14px; text-align: center; word-break: keep-all; } .cg-load-err.cg-sk-over { background: var(--card-bg, #fff); } .cg-load-err-msg { display: inline-flex; align-items: center; gap: 6px; } .cg-load-err-msg svg { color: #ef4444; flex: 0 0 auto; } .cg-load-retry { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; cursor: pointer; border: 1px solid var(--control-border, #d5dbe3); border-radius: 6px; background: #fff; color: #1e293b; font: inherit; font-size: 13px; font-weight: 600; } .cg-load-retry:hover { background: var(--primary); border-color: var(--primary); color: #fff; } /* 다시 받는 표 — 누르기는 바로 막고(grid-busy), 흐리게(grid-loading)는 200ms 뒤 */ .data-table.grid-busy { pointer-events: none; } /* 탭 셸 새 탭 첫 로드 뼈대(cgrid-shell.js) — iframe 위 덮개 */ .cs-pane { position: relative; } .cs-frame-skel { position: absolute; inset: 0; z-index: 2; background: var(--bg, #f1f5f9); overflow: hidden; } .cs-ws.mode-split .cs-frame-skel { top: 28px; } .cs-frame-skel-in { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; } .cs-frame-skel.is-err { display: flex; align-items: center; justify-content: center; } /* 움직임 줄이기 — shimmer 멈춤(자리·모양은 그대로) */ @media (prefers-reduced-motion: reduce) { .skeleton-bar, .cg-sk-box { animation: none !important; } .bg-white:has(> table[data-grid]:not(.grid-ready))::after { animation: none !important; } .data-table.grid-loading tbody { transition: none; } } /* ---------- 콤보박스 (input + dropdown, 전체목록 노출) ---------- */ .combobox { position: relative; display: inline-flex; align-items: center; } .combobox.cb-block { display: flex; width: 100%; } .combobox.cb-block .combobox-input { flex: 1 1 auto; width: 100%; } /* 페이지당 개수 — **숫자 세 자리 + 화살표 = 4.5rem** 고정(§2.4·§2.5). 키트는 이 콤보에 cb-block 을 안 붙이지만(v4.17.1), 붙어 있어도 사이트의 `.combobox.cb-block { width:100% }` 를 이기게 특정도를 한 칸 올린 선택자를 같이 둔다(postring 265px 실측). */ .combobox.cb-compact, .combobox.cb-block.cb-compact { width: 4.5rem; flex: 0 0 auto; } .combobox.cb-compact .combobox-input, .combobox.cb-block.cb-compact .combobox-input { width: 100%; min-width: 0; } .combobox-input { cursor: pointer; padding-right: 30px !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 13px 9px; } .combobox.combobox-open .combobox-input { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); outline: none; } .combobox-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; /* 목록 폭 = **트리거와 항상 같다.** 트리거 쪽이 이미 `max(--gk-combo-min, 가장 긴 항목)` 으로 잡히므로(cgrid-combobox.js syncWidth) 여기서 따로 늘릴 필요가 없다. ⚠️ 한쪽만 max-content 로 두면 둘이 어긋난다 — 폭은 **한 곳에서만** 정한다. */ width: auto; min-width: 100%; box-sizing: border-box; /* 트리거와 폭이 1px 도 어긋나지 않게 */ background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .10); max-height: 280px; overflow-y: auto; z-index: 1100; padding: 4px 0; } .combobox.combobox-open .combobox-dropdown { display: block; } /* 위로 펼치기(v4.17.1, §2.4 목록 = 다 보이게) — 아래 공간(모달 본문·창)이 모자라면 cgrid-combobox.js fitDrop 이 붙인다 */ .combobox-dropdown.combobox-drop-up { top: auto; bottom: calc(100% + 4px); } .combobox-item { padding: 8px 12px; font-size: 14px; cursor: pointer; color: #334155; white-space: nowrap; line-height: 1.4; } .combobox-item:hover, .combobox-item.combobox-item-active { background: var(--primary-light); } .combobox-item.combobox-item-selected { background: rgba(17, 24, 39, .08); color: var(--primary); font-weight: 600; } .combobox-empty { padding: 10px 12px; font-size: 13px; color: #94a3b8; text-align: center; } /* ---------- 다중선택 콤보 (체크박스+인풋+드롭다운, cgrid-combobox.js enhanceMulti) ---------- 검색카드 코드 필터의 기본(§2.2). 모양은 단일 콤보 그대로 + 항목 앞 체크박스 + 상단 [전체 선택][선택 해제]. 목록만 스크롤된다 — 상단 바는 늘 보인다. */ .cb-multi-dropdown { padding: 0; overflow: hidden; display: none; flex-direction: column; max-height: 320px; } .combobox.combobox-open .cb-multi-dropdown, .cb-multi-dropdown.combobox-dropdown-portal { display: flex !important; } .cb-multi-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); flex: 0 0 auto; background: #fff; } .cb-multi-act { border: 0; background: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-family: inherit; } .cb-multi-act:hover { background: var(--primary-light); color: var(--primary); } .cb-multi-done { display: none; margin-left: auto; color: var(--primary); } .cb-multi-list { overflow-y: auto; padding: 4px 0; flex: 1 1 auto; min-height: 0; } .cb-multi-item { display: flex; align-items: center; gap: 8px; } /* 체크 표시가 선택 상태를 말한다 — 단일 콤보의 굵은 글씨·배경은 여기선 겹쳐서 시끄럽다 */ .cb-multi-item.combobox-item-selected { background: transparent; font-weight: 500; color: var(--text-primary); } .cb-multi-item.combobox-item-selected.combobox-item-active, .cb-multi-item.combobox-item-selected:hover { background: var(--primary-light); } .cb-check { flex: 0 0 auto; width: 16px; height: 16px; box-sizing: border-box; border-radius: 4px; border: 1.5px solid var(--primary-border); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; } .cb-check svg { width: 12px; height: 12px; display: block; } .combobox-item-selected .cb-check { background: var(--primary); border-color: var(--primary); color: #fff; } .cb-multi-text { overflow: hidden; text-overflow: ellipsis; } /* 하나라도 골랐으면 트리거 글자를 강조 — '전체' 와 걸러진 상태가 한눈에 갈린다 */ .combobox.cb-multi.cb-multi-has:not(.combobox-open) .combobox-input { color: var(--primary); font-weight: 600; } .combobox.cb-multi .combobox-input { text-overflow: ellipsis; } /* 좁은 화면 — 아래에서 올라오는 시트(body 로 띄운다). 손가락 크기 항목 + [완료] */ .cb-multi-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1190; } .cb-multi-dropdown.cb-multi-sheet { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; min-width: 0 !important; max-height: 70vh; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom, 0); } /* 시트 맨 위 거르기 칸(v4.14.0) — 시트가 열리면 배경막이 원래 인풋을 덮으므로 "다시 탭해서 타자"는 여기서 한다. 16px — iOS 는 16px 보다 작은 칸에 포커스가 가면 화면을 확대한다 */ .cb-multi-find { display: none; } .cb-multi-sheet .cb-multi-find { display: block; flex: 0 0 auto; box-sizing: border-box; width: calc(100% - 20px); height: 40px; margin: 10px 10px 2px; padding: 0 12px; border: 1.5px solid var(--control-border); border-radius: 8px; font-size: 16px; font-family: inherit; background: #fff; } .cb-multi-sheet .cb-multi-find:focus { border-color: var(--primary); outline: none; } .cb-multi-sheet .cb-multi-bar { padding: 8px 10px; } .cb-multi-sheet .cb-multi-act { font-size: 14px; padding: 8px 10px; } .cb-multi-sheet .cb-multi-done { display: inline-block; } .cb-multi-sheet .cb-multi-item { padding: 12px 16px; font-size: 15px; } .cb-multi-sheet .cb-check { width: 20px; height: 20px; } .cb-multi-sheet .cb-check svg { width: 14px; height: 14px; } /* ---------- 키트 표식 = 선 SVG (v4.16.1, cgrid-icon.js · cgrid-shell.js) ---------- 글자 기호(↕ ▲▼ ＋ ✕ ⌂ ▾)는 iOS 에서 컬러 이모지로 바뀌어 그려졌다(§2 머리). 크기 1em · 색 currentColor 라 사이트가 `.sort-ar { font-size:10px; color:… }` 처럼 글자에 준 스타일이 그대로 먹는다. Tailwind preflight 의 `svg { display:block }` 을 이겨야 글자처럼 줄 안에 선다. */ .cg-sym { display: inline-block; flex: 0 0 auto; vertical-align: -0.125em; overflow: visible; } .sort-ind .sort-ar { display: inline-flex; align-items: center; } .row-move button { display: inline-flex; align-items: center; justify-content: center; } /* ---------- 모달 ---------- */ body.modal-open { overflow: hidden; } /* 모달 겹·카드 바탕 (v4.19.1, ADR-005) — 키트 마크업이 Tailwind 유틸(fixed inset-0 · bg-black/40 · max-w-3xl · max-h-[90vh] …)에만 기대서 Tailwind 없는 사이트(velysound)·프리컴파일에 그 클래스가 빠진 사이트에선 [자세히] 팝업이 스타일 없이 화면 아래에 붙었다. → 키트 표식(cg-modal-*)에 **Tailwind 와 같은 값**을 준다(Tailwind 있는 사이트는 모양이 그대로). 크기·여백 덮기는 아래 규칙들. */ .cg-modal-overlay { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background-color: rgb(0 0 0 / 0.4); padding: 1rem; overflow-y: auto; box-sizing: border-box; } .cg-modal-overlay.flex { display: flex; } .cg-modal-overlay.hidden { display: none; } .cg-modal-card { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 48rem; max-height: 90vh; margin-top: auto; margin-bottom: auto; background-color: #fff; border-radius: 0.75rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .cg-modal-head { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; flex-shrink: 0; height: 3rem; padding-left: 1.25rem; padding-right: 1.25rem; border-bottom: 1px solid #e2e8f0; } .cg-modal-card > .cg-modal-head > .cg-modal-title { /* Tailwind preflight(h3 크기·여백 상속) + font-bold · text-slate-900 · truncate */ margin: 0; font-size: inherit; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cg-modal-body { box-sizing: border-box; flex: 1 1 0%; padding: 1.5rem; overflow-y: auto; } .cg-modal-card > .cg-modal-footer { box-sizing: border-box; flex-shrink: 0; padding: 0.75rem 1.5rem; border-top: 1px solid #e2e8f0; } /* 확인·알림·입력 창(cgrid.confirm·alert·prompt, cgrid-form.js) — 같은 이유로 키트 표식(cg-dlg-*)에 같은 값 (v4.19.1, 본문·단추는 v4.19.2) */ .cg-dlg { position: fixed; inset: 0; z-index: 300; display: none; justify-content: center; align-items: center; background-color: rgb(0 0 0 / 0.4); padding: 1rem; box-sizing: border-box; } .cg-dlg.flex { display: flex; } .cg-dlg.hidden { display: none; } .cg-dlg-card { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 24rem; background-color: #fff; border-radius: 0.75rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .cg-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; box-sizing: border-box; flex-shrink: 0; height: 3rem; padding-left: 1.25rem; padding-right: 1.25rem; border-bottom: 1px solid #f1f5f9; } .cg-dlg-head > .cg-dlg-title { margin: 0; font-size: inherit; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cg-dlg-head > .cg-dlg-x { padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; color: #94a3b8; font-size: 1.875rem; line-height: 1; } .cg-dlg-head > .cg-dlg-x:hover { color: #0f172a; } /* v4.19.2 — 본문을 읽기 좋게: 14px 회색 → 15px 진한 글색 · 줄간격 1.6 · 한글은 낱자에서 안 끊기게(keep-all, 너무 긴 낱말만 anywhere). `.cg-dlg .cg-dlg-body`(0,2,0) — Tailwind `text-sm`·사이트 `p { … }` 보다 이기게. 첫 줄 = 굵은 질문(cg-dlg-q), 나머지 = 설명(cg-dlg-detail). */ .cg-dlg .cg-dlg-body { padding: 1.25rem 1.25rem 1.375rem; font-size: 15px; line-height: 1.6; color: #1e293b; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; text-align: left; max-height: 60vh; overflow-y: auto; box-sizing: border-box; } .cg-dlg .cg-dlg-body > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .cg-dlg .cg-dlg-body > .cg-dlg-q { font-size: 16px; line-height: 1.5; font-weight: 700; color: #0f172a; } .cg-dlg .cg-dlg-body > .cg-dlg-q + .cg-dlg-detail { margin-top: 0.5rem; } .cg-dlg .cg-dlg-body > p[hidden] { display: none; } .cg-dlg-input { padding: 0 1.25rem 1.25rem; box-sizing: border-box; } .cg-dlg-input.hidden { display: none; } .cg-dlg-foot { display: flex; gap: 0.5rem; justify-content: flex-end; box-sizing: border-box; flex-shrink: 0; padding: 0.75rem 1.25rem; border-top: 1px solid #f1f5f9; } /* v4.19.2 — 단추 역할을 모양으로: [확인] = 채운 주 단추(검정, 위험 동작은 빨강) · [취소] = 흰 보조 단추. 예전엔 둘 다 흰 바탕이고 hover 가 검정 반전이라, 마우스가 [취소] 위에 있으면 **취소가 채워진 주 단추처럼** 보였다(colon-hub 실측). 특정도 (0,3,1) — 사이트 `.btn-primary`·`.btn-light:hover`·`.btn:focus` 가 덮지 못하게. 초점은 **링만**(채움·색 반전 없음). */ .cg-dlg .cg-dlg-foot > button.cg-dlg-yes, .cg-dlg .cg-dlg-foot > button.cg-dlg-no { min-width: 76px; height: 40px; padding: 0 18px; justify-content: center; font-size: 14px; font-weight: 700; border-radius: var(--radius-sm, 8px); border-width: 1.5px; border-style: solid; box-shadow: none; outline: none; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes { background: var(--primary, #111827); border-color: var(--primary, #111827); color: #fff; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes:hover { background: var(--primary-dark, #000); border-color: var(--primary-dark, #000); color: #fff; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes.is-danger { background: #dc2626; border-color: #dc2626; color: #fff; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes.is-danger:hover { background: #b91c1c; border-color: #b91c1c; } .cg-dlg .cg-dlg-foot > button.cg-dlg-no { background: #fff; border-color: #cbd5e1; color: #1e293b; } .cg-dlg .cg-dlg-foot > button.cg-dlg-no:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes:focus, .cg-dlg .cg-dlg-foot > button.cg-dlg-no:focus { outline: none; box-shadow: none; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes:focus-visible, .cg-dlg .cg-dlg-foot > button.cg-dlg-no:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .cg-dlg .cg-dlg-foot > button.cg-dlg-yes.is-danger:focus-visible { outline-color: #dc2626; } .cg-dlg .cg-dlg-head > .cg-dlg-x:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; } /* 휴대폰 폭 — 창은 화면 폭 - 32px, 단추는 반씩 나눠 크게(엄지로 누르기) */ @media (max-width: 480px) { .cg-dlg .cg-dlg-foot > button.cg-dlg-yes, .cg-dlg .cg-dlg-foot > button.cg-dlg-no { flex: 1 1 0; height: 44px; font-size: 15px; } } /* 모달 푸터 버튼 정렬 — **오른쪽부터, 삭제만 왼쪽**(ADMIN_PAGE_RULE §1.4). 화면마다 푸터 div 에 flex/ml-auto 를 직접 주다 보니 어떤 팝업은 버튼이 왼쪽에 붙었다 (선택 팝업 실측). 키트가 정렬을 맡고 화면은 버튼만 나열한다. */ .cg-modal-footer { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .cg-modal-footer.hidden { display: none; } /* 삭제는 되돌릴 수 없는 액션이라 **저장/취소와 멀리** 둔다 — 손이 미끄러져 눌리지 않게 */ .cg-modal-footer [data-modal-delete], .cg-modal-footer .btn-danger-outline, .cg-modal-footer .btn-danger { margin-right: auto; } /* v4.16.1 — 모달은 화면의 `[data-modal-footer]` **감싸개째** 푸터로 옮긴다. 감싸개가 그냥 div(블록)거나 내용 폭만큼만 서는 flex 면 위 정렬이 안 먹었다 — 단추가 감싸개 안에 갇혀 삭제가 왼쪽으로 못 가고 간격도 제각각. → 감싸개를 푸터와 같은 줄(flex · 오른쪽 정렬 · 간격 8px)로 만들고 푸터 폭을 다 쓰게 한다. `:where()` 로 특정도 0 — 사이트가 감싸개에 준 클래스(flex · justify-* · gap-*)·인라인 style 이 항상 이긴다(마크업 안 바꿔도 됨). */ :where(.cg-modal-footer > [data-modal-footer]) { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex: 1 1 auto; min-width: 0; } /* 모달 기본 크기 (v4.23.0, §1.4.2) — 768px(max-w-3xl) 은 큰 입력 폼(쿠폰·상품)이 답답했다 → min(1040px, 94vw). 특정도(0,2,0)로 Tailwind max-w-3xl(0,1,0)을 이긴다. 넓은 모달(아래 cg-modal-wide 90vw)·전체화면은 그대로 */ .cg-modal-overlay > .cg-modal-card { max-width: min(1040px, 94vw); } /* 넓은 모달 — 컨텐츠에 data-modal-wide 가 있으면 화면 폭에 가깝게 넓힌다(긴 텍스트 편집 화면). Tailwind 의 max-w-3xl(0,1,0)을 이기도록 특정도를 올린다. */ .cg-modal-overlay > .cg-modal-wide { max-width: 90vw; } /* 모달 전체화면 (v4.15.0, §1.4) — 헤더 X 옆 단추. 겹(overlay)에 cg-modal-full 이 붙으면 카드가 창(셸 iframe 이면 그 iframe — 셸이 iframe 을 창 전체로 키운다)을 꽉 채운다. Tailwind 의 p-4 · max-w-3xl · max-h-[90vh] · rounded-xl · my-auto 를 이겨야 해서 !important. */ /* 모달 머리 단추 (v4.17.1, §1.4) — 전체화면 · X 는 **같은 32px 상자 · 같은 세로 중심선 · 간격 4px**, 제목줄(48px) 세로 가운데. 🚨 예전: X 가 Tailwind `text-3xl leading-none` 글자 줄(19.5×30) 안의 인라인 SVG 라 아이콘이 5px 아래로 처지고, 전체화면(32×32)과 상자 크기·간격(12px)이 달라 "전체화면이 X 보다 위에 붙어" 보였다. → 머리 줄 정렬도 키트가 맡는다(Tailwind 없는 사이트도 같게). 특정도를 올려 사이트 Tailwind 의 gap-3 을 이긴다. */ .cg-modal-card > .cg-modal-head { display: flex; align-items: center; gap: 4px; } .cg-modal-card > .cg-modal-head > .cg-modal-title { min-width: 0; margin-right: 8px; } .cg-modal-fullbtn, .cg-modal-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; font-size: 22px; line-height: 1; } .cg-modal-fullbtn { margin-left: auto; } .cg-modal-fullbtn[hidden] + .cg-modal-close { margin-left: auto; } /* 전체화면을 끈 화면(data-modal-nofull)도 X 는 오른쪽 끝 */ .cg-modal-fullbtn:hover, .cg-modal-close:hover { color: #0f172a; background: #f1f5f9; } .cg-modal-fullbtn:focus-visible, .cg-modal-close:focus-visible { outline: 2px solid var(--primary, #111827); outline-offset: 1px; } .cg-modal-fullbtn[hidden] { display: none; } .cg-modal-fullbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cg-modal-close svg { display: block; width: 20px; height: 20px; vertical-align: 0; } .cg-modal-fullbtn .cg-ic-min { display: none; } .cg-modal-full .cg-modal-fullbtn .cg-ic-max { display: none; } .cg-modal-full .cg-modal-fullbtn .cg-ic-min { display: block; } .cg-modal-overlay.cg-modal-full { padding: 0 !important; overflow: hidden !important; } .cg-modal-overlay.cg-modal-full > .cg-modal-card { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* 모바일 모달 여백(v4.17.2, §2.19 ⑦) — 바깥 16px(p-4) + 몸통 24px(p-6) + 화면 폼 상자 여백이 겹쳐 빈 곳이 컸다(postring 이 덮던 것). 마크업이 Tailwind 패딩이라 !important. 전체화면(cg-modal-full)은 바깥 여백 0 그대로 */ @media (max-width: 768px) { .cg-modal-overlay:not(.cg-modal-full) { padding: 8px !important; } .cg-modal-body { padding: 14px 14px 16px !important; } .cg-modal-head { padding-left: 14px !important; padding-right: 8px !important; } .cg-modal-footer { padding: 10px 14px !important; } } /* 모달 로딩 — 클릭 즉시 열고 내용은 뒤따라 채운다(빈 시간에 사용자가 또 누르지 않게) */ .cg-modal-skel { display: flex; flex-direction: column; gap: 13px; min-height: 320px; padding: 2px 0; } .cg-modal-skel .skeleton-bar:first-child { margin-bottom: 5px; } .cg-modal-err { min-height: 220px; } /* ============================================================ §2.12 반응형 / 모바일 (≤768px) — 공통 CSS가 자동 처리(화면별 마크업 X) ============================================================ */ @media (max-width: 768px) { /* ----- 그리드 = 카드형(행=카드, 라벨 좌 / 값 우) ----- */ /* 그리드 카드 래퍼는 투명하게 → 카드 사이 간격에 흰 배경 안 보이고 페이지 배경 노출 */ .bg-white:has(> .table-wrap) { background: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; } .data-table, .data-table tbody, .data-table tr { display: block; width: 100%; } .data-table thead { display: none; } /* 행 카드(v4.17.2, §2.19 ⑦) — 카드마다 또렷한 테두리·12px 모서리·12px 간격·옅은 그림자(colon-hub·postring 이 각자 덮던 것) */ .data-table tbody tr { border: 1px solid var(--gk-mcard-border); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--gk-mcard-shadow); overflow: hidden; background: #fff; } .data-table td { display: flex; justify-content: flex-end; align-items: center; gap: 6px; /* 값(들)은 우측에 모음 */ width: auto !important; max-width: none; text-align: right !important; /* 값 우측(컬럼 inline align 덮기) */ white-space: normal; overflow: visible; text-overflow: clip; border: none; border-bottom: 1px solid var(--border); padding: 9px 14px; } .data-table td:last-child { border-bottom: none; } .data-table td::before { content: attr(data-label); flex: 0 0 auto; margin-right: auto; /* 라벨은 좌측으로 밀고 값은 우측 그룹 */ font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: left; white-space: nowrap; } .data-table td:empty { display: none; } /* 값 없는 셀은 카드에서 숨김 */ .data-table td:has(img) { justify-content: flex-end; } .data-table td.grid-empty-cell { display: flex !important; align-items: center; justify-content: center; height: 100px; min-height: 100px; text-align: center !important; } /* 빈상태 모바일=100px·세로중앙 */ .data-table td.grid-empty-cell::before { content: none; } .data-table .col-resizer { display: none; } .table-wrap { overflow-x: visible; } .data-table tbody tr.row-clickable:hover td { background: transparent; color: inherit; } /* 카드에선 로우 반전 완화 */ /* ----- 검색영역 세로화 ----- */ .admin-search-card { flex-direction: column; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-group { width: 100%; } .filter-row { width: 100% !important; } /* 검색유형(7rem 고정)+검색값(흡수) 한 줄 유지 */ .admin-search-actions { flex-direction: row !important; align-self: auto; } /* 초기화/조회 가로 한 줄(둘 다 flex:1) */ .filter-more.is-open { flex-direction: column; align-items: stretch; } /* 상세 칸도 한 줄에 하나 */ .filter-more-toggle, .filter-more-btn { width: 100%; justify-content: center; } /* 버튼 줄(v4.14.0) — 좁을 때 키트가 [상세 필터]와 버튼열을 filter-bar 맨 끝 한 줄로 옮긴다(cgrid-grid.js layoutFoot). 위 필터와의 간격 = filter-bar 의 줄 간격 그대로. 상세 필터는 왼쪽, [초기화][조회]는 오른쪽 */ .filter-foot { display: flex; align-items: center; gap: 8px; width: 100%; grid-column: 1 / -1; } /* 앱이 filter-bar 를 grid 로 바꿔도 한 줄 통째로 */ .filter-foot .filter-more-toggle { width: auto; flex: 0 0 auto; } .filter-foot .filter-more-btn { width: auto; } .admin-search-card .filter-foot .admin-search-actions { flex: 1 1 auto; justify-content: flex-end; align-self: auto; gap: 8px; } .admin-search-card .filter-foot .admin-search-actions .btn { flex: 0 0 auto; height: 34px; min-height: 0; } /* 상세 필터가 없고 [조회]도 있으면 예전처럼 둘이 반씩 */ .admin-search-card .filter-foot.no-more .admin-search-actions:not(.is-live) .btn { flex: 1 1 0%; } /* 검색카드 필터 격자(v4.17.2, §2.19 ⑦) — 한 줄에 하나씩 좁게 서서 오른쪽이 텅 비었다(colon-hub·postring 이 각자 덮던 것). 화면 폭에 따라 한 줄 2~3칸(칸 최소 120px), 검색어(검색유형+검색값) 줄·상세 필터 펼친 칸·버튼 줄만 한 줄 통째, 칸 안 컨트롤은 칸 폭을 꽉 채운다 */ .admin-search-card .filter-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .admin-search-card .filter-group { width: auto; min-width: 0; align-items: stretch; } .admin-search-card .filter-group:has(.filter-row) { grid-column: 1 / -1; } .admin-search-card .filter-group > .combobox, .admin-search-card .filter-group > select, .admin-search-card .filter-group > input { width: 100% !important; min-width: 0; } .admin-search-card .filter-group .combobox input { width: 100%; } .admin-search-card .filter-more-toggle { align-self: end; } .admin-search-card .filter-more { grid-column: 1 / -1; } .admin-search-card .filter-more.is-open { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .admin-search-card .filter-foot { grid-column: 1 / -1; } /* ----- 촘촘한 카드(opt-in, 표 data-card="compact") — 라벨:값 한 줄씩 대신 [키] / [제목] / [나머지를 한 줄에 이어서]. 열 data-card: key·title(맨 위 한 줄씩) · bare(라벨 없이 값만) · hide(카드에서 뺌). 순번은 뺀다 ----- */ .data-table[data-card="compact"] tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; } .data-table[data-card="compact"] td { display: inline-flex; justify-content: flex-start; gap: 5px; text-align: left !important; padding: 0 !important; border: none !important; font-size: 12px; color: var(--text-secondary); /* 기본 칸의 !important 패딩·밑줄을 이긴다 */ } .data-table[data-card="compact"] td::before { margin-right: 0; font-weight: 500; font-size: 11px; color: #94a3b8; } .data-table[data-card="compact"] tbody tr:last-child td { border-bottom: none !important; } /* 합계행용 '마지막 행 밑줄 유지'(아래 규칙)를 카드에선 끈다 */ .data-table[data-card="compact"] td[data-blank], .data-table[data-card="compact"] td.seq-cell, .data-table[data-card="compact"] td[data-card="hide"] { display: none; } .data-table[data-card="compact"] td[data-card="key"] { order: -2; flex: 1 1 100%; font-size: 11px; } .data-table[data-card="compact"] td[data-card="title"] { order: -1; flex: 1 1 100%; font-size: 14px; font-weight: 600; color: var(--text-primary); } .data-table[data-card="compact"] td[data-card="key"]::before, .data-table[data-card="compact"] td[data-card="title"]::before, .data-table[data-card="compact"] td[data-card="bare"]::before { content: none; } .data-table[data-card="compact"] td.grid-empty-cell { flex: 1 1 100%; justify-content: center; } } /* ---------- 기간(부터~까지) 필터 (admin-grid.js data-range) ---------- */ .filter-dash { color: var(--text-secondary); font-size: 12px; padding: 0 2px; user-select: none; } .filter-row > input[type="month"], .filter-row > input[type="date"], .filter-row > input.cg-pk-input { width: 9.5rem; } /* v4.17.3 — 좁은 화면에선 9.5rem 두 칸(304px)이 검색카드(390 폭에서 266px)를 넘어 오른쪽으로 삐져나갔다. 두 칸이 줄 폭을 반씩 나눠 쓴다. iOS 날짜 칸은 값이 가운데로 몰려 왼쪽 정렬로 맞춘다 */ @media (max-width: 768px) { .filter-row > input[type="month"], .filter-row > input[type="date"], .filter-row > input.cg-pk-input { flex: 1 1 0; width: auto; min-width: 0; } .filter-row > input[type="month"]::-webkit-date-and-time-value, .filter-row > input[type="date"]::-webkit-date-and-time-value { text-align: left; } } /* ---------- 그리드 합계행 (admin-grid.js data-sum) ---------- */ .data-table tfoot .grid-foot-row td { background: #f8fafc !important; border-top: 2px solid var(--border) !important; border-bottom: none !important; font-size: 13px; font-weight: 700; color: var(--primary); text-align: right; white-space: nowrap; } .data-table tfoot .grid-foot-row td.foot-label { text-align: center; font-size: 11px; color: var(--text-secondary); } .data-table tbody tr:last-child td { border-bottom: 1px solid var(--border) !important; } /* 합계행이 붙으므로 마지막 행 선 유지 */ /* ---------- 콤보 자유입력(creatable) 항목 ---------- */ .combobox-item-create { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border); } /* ---------- 폼 필드 (molecule: 라벨 + 컨트롤) — 모달 폼 공통 ---------- */ .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; } /* 폼 소제목 — 항목이 열 개를 넘으면 한 덩어리로 읽히지 않는다. **묶어서 읽는 단위**를 만든다. 한 줄을 통째로 차지하는 **영역 띠**다 — 옅은 배경 + 왼쪽 굵은 막대. 제목 뒤에 얇은 선을 끌던 방식은 표·카드 테두리와 같은 색이라 '구간 머리'로 안 읽혔다(선 하나 더로 보였다). */ .form-grid .form-section { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; padding: 7px 12px; background: var(--primary-light); border-left: 4px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: .02em; } .form-grid .form-section:first-child { margin-top: 0; } .form-grid .col-2 { grid-column: span 2; } .form-grid .col-full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* footgun(§2.4): 콤보를