/* ============================================================================
   공통 UI(claude_common ui-kit)와 ERP 옛 CSS 잇기 (2026-10-05)

   싣는 순서(layout.php): global.css → custom.css → [ERP 테마 css] → 공통 테마(novap-ui/themes) → 공통 부품 CSS → **이 파일**
   - 옛 색 변수(--erp-*)를 공통 테마 변수(--uk-*)로 잇는다 - 아직 옮기지 않은 화면(custom.css)과 공통 부품이
     같은 테마 색을 쓴다. 테마는 설정 > 디자인 테마(App\Utils\Theme)가 고른 공통 테마 파일 하나다
   - ERP 뼈대(.app-shell) 크기·인쇄, 공통 부품에 없는 ERP 상단바 조각(톱니바퀴·종·프로필)의 자리만 정한다
   - 화면을 다 옮기면 custom.css와 함께 줄여 나간다. 색·모서리 숫자를 새로 적지 않는다 - var(--uk-*)만
   ========================================================================== */

/* ── 옛 색 변수 → 공통 테마 변수 ──
   :root[data-theme]로 적는다 - ERP 테마 파일(themes/blue.css의 :root[data-theme="blue"])보다 뒤에 실려 이긴다 */
:root[data-theme] {
  --erp-nav-bg: var(--uk-surface);
  --erp-nav-bg-hover: var(--uk-head);
  --erp-nav-active: var(--uk-brand);
  --erp-nav-text: var(--uk-muted);
  --erp-nav-text-strong: var(--uk-fg);

  --erp-bg: var(--uk-bg);
  --erp-surface: var(--uk-surface);
  --erp-surface-sunk: var(--uk-sunk);
  --erp-surface-hover: var(--uk-head);
  --erp-border: var(--uk-border);
  --erp-border-strong: color-mix(in srgb, var(--uk-border) 80%, var(--uk-fg));
  --erp-border-soft: var(--uk-line);

  --erp-text: var(--uk-fg);
  --erp-text-label: color-mix(in srgb, var(--uk-fg) 85%, var(--uk-muted));
  --erp-text-muted: var(--uk-muted);
  --erp-text-faint: color-mix(in srgb, var(--uk-muted) 70%, var(--uk-surface));

  --erp-primary: var(--uk-brand);
  --erp-primary-dark: var(--uk-brand-dark);
  --erp-primary-soft: var(--uk-brand-light);
  --erp-primary-ring: color-mix(in srgb, var(--uk-brand) 16%, transparent);
  --erp-success: var(--uk-ok);
  --erp-success-soft: var(--uk-ok-light);
  --erp-danger: var(--uk-danger);
  --erp-danger-dark: var(--uk-danger-dark);
  --erp-danger-soft: var(--uk-danger-light);
  --erp-warning: var(--uk-warn);
  --erp-warning-soft: var(--uk-warn-light);
  --erp-info: var(--uk-brand);
  --erp-info-soft: var(--uk-brand-light);

  --erp-sh-dark: rgba(var(--uk-shc), .30);
  --erp-sh-soft: rgba(var(--uk-shc), .15);
  --erp-shadow-1: var(--uk-up-sm);
  --erp-shadow: var(--uk-up);
  --erp-shadow-4: var(--uk-up-lg);
  --erp-shadow-in: var(--uk-down);

  /* 페이지에 붙는 표 머리글이 비켜설 상단바 높이(table.css·table.js) */
  --tb-sticky-top: var(--erp-topbar-h);
}

body { background: var(--uk-bg); color: var(--uk-fg); }

/* ── 뼈대(.app-shell) - 폭·높이만 ERP 값으로 ── */
.app-shell { --app-sidebar-w: var(--erp-sidebar-w); --app-topbar-h: var(--erp-topbar-h); }
/* 화면들이 이미 쓰는 section/container - 사이드바 레이아웃에서는 폭 제한·큰 여백을 걷는다(예전 .erp-content 규칙) */
.app-content .section { padding: 0; }
.app-content .container { max-width: none; width: 100%; margin: 0; }
/* 서브계정 신청 안내 띠 */
.app-content > .join-notice { margin-bottom: var(--erp-gap); }

/* ── 아직 옮기지 않은 화면의 옛 마크업이 공통 부품 CSS와 부딪히는 곳 (화면을 옮기면 지운다) ── */
/* 대시보드 숫자 카드는 공통 마크업(.stat-cards > a.stat-card)으로 옮겼다(A조) - 임시 .columns.stat-cards 줄은 지웠다 */

/* ── 상단바 오른쪽(ERP만): 설정 톱니바퀴 · 알림 종 · 프로필 - 펼침 메뉴는 공통 .dropdown ── */
.app-topbar-right .dropdown { position: relative; }
.app-topbar-right .erp-icon-button.dropdown-btn { padding: 0; }
/* 머리줄 설정·알림 = 공통 머리줄 아이콘(단추 44·아이콘 28·동그란 바탕, 2026-10-22 사용자 "아이콘 크기 높이 등등 다 동일" - claude_common ui/navigation.md "머리줄 아이콘") */
.app-topbar-right .erp-icon-button { width: var(--uk-hd-btn, 44px); height: var(--uk-hd-btn, 44px); border-radius: 50%; color: var(--uk-fg); }
.app-topbar-right .erp-icon-button svg { width: var(--uk-hd-icon, 28px); height: var(--uk-hd-icon, 28px); stroke-width: var(--uk-hd-stroke, 1.3); }
.erp-user.dropdown-btn { border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.erp-user.dropdown-btn[aria-expanded="true"] { background: var(--uk-surface); box-shadow: var(--uk-down); }
.erp-bell-menu { min-width: 16rem; }
/* 프로필 메뉴(공통 profile-menu) 안의 ERP 줄(서브계정 바꾸기·신청) - 공통 .dropdown-item을 그대로 쓰되 크기·여백은
   같은 목록의 .profile-menu-item(로그아웃)과 맞춘다. 서브계정 바꾸기 줄은 <form> 안 <button>이라 폭을 채운다 */
.profile-menu-list .dropdown-item { width: 100%; padding: 10px 16px; border-radius: 0; font-size: 14px; }
.profile-menu-list .dropdown-section { padding: 8px 16px 2px; }
.profile-menu-list form { margin: 0; }
.erp-bell-item { justify-content: space-between; }
.erp-bell-empty { padding: .6rem .9rem; color: var(--uk-muted); font-size: var(--fs-sm); }
.app-topbar .app-search input[type="search"] { border-radius: var(--uk-r-pill); }
@media (max-width: 1023px) {
  .erp-user-name, .erp-user-role { display: none; }
}

/* ── 인쇄 - 조작용 뼈대를 걷는다(예전 .erp-sidebar/.erp-topbar 규칙) ── */
@media print {
  .app-sidebar, .app-topbar, .app-backdrop, .app-bottombar { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0; }
}

/* ============================================================================
   B조 - 견적·계산서 화면(quotation/* invoice/* quote_request/* public/*, 견적서·계산서 표·업체 탭) (2026-10-05)
   ========================================================================== */
/* 목록 표 - 할인된 견적서의 소계(정가)에 긋는 취소선은 흐리게 */
.table s.is-was { color: var(--uk-muted); }

/* 공유 링크 아래 열람 이력 - 링크 줄과 띄운다 */
.detail-list.share-views { margin-top: .9rem; }
.share-views-times { color: var(--uk-muted); }
.share-link-note + .share-link { margin-top: .4rem; }   /* 링크 줄 사이·버튼 폭은 공통 form.css */

/* 품목 표 위 안내 한 줄 - 칸 줄(form-row) 밖이라 들여쓰지 않는다 */
.form-panel > .form-help.quote-items-help,
.form-panel > .form-help.invoice-items-help { margin: -.3rem 0 .6rem; }

/* 견적서 품목 - 그룹마다 제목 줄(이름 칸) + 공통 반복행 표. [＋][×]는 quotation-items.js가 처리해서 공통 data-repeat-*가 없다 -
   첫 줄엔 [＋]만, 나머지 줄엔 [×]만 보이는 공통 규칙을 여기서 같은 모양으로 건다 */
.quote-group + .quote-group { margin-top: .9rem; }
.quote-group > .repeat-group-title { margin: 0 0 .3rem; }
.quote-group .quote-group-name { width: 100%; max-width: 36rem; font-weight: 600; }   /* 그룹 이름은 50자까지 - 16rem이면 제목이 잘렸다(2026-10-05) */
/* [＋][×] 모양은 공통 .repeat-btn.is-add/.is-remove(form.css, 2026-10-05 공통에 올림) */
.quote-items tbody tr.js-quote-item:first-child .js-remove-item,
.quote-items tbody tr.js-quote-item:not(:first-child) .js-add-item { display: none; }
.quote-items .quote-items-empty { text-align: center; color: var(--uk-muted); }
/* custom.css의 한 칸 반복행 규칙(`.repeat-row { display: flex }`, `:first-child::before { content: "대표" }`)이 표 줄에 걸리지 않게 */
.repeat-table tr.repeat-row { display: table-row; }
.repeat-table tr.repeat-row::before { content: none; }
/* 표 안 드롭다운은 칸을 꽉 채운다 */
.repeat-table td > .select select { width: 100%; }
/* 계산서 품목 - 월·일·수량 칸이 좁아 공통 최소 폭(4.5rem)을 풀고, 휴대폰은 표 상자 안에서 가로로 민다 */
.repeat-table.invoice-items td > .input[type="number"] { min-width: 3.5rem; }
.repeat-table-wrap > .repeat-table.invoice-items { min-width: 62rem; }
.repeat-table-wrap > .repeat-table.quote-items { min-width: 46rem; }

/* 고객용 문서(견적서·계산서 링크, hideChrome) - 바탕 위에 종이 한 장처럼 띄운다. 문서 면·선 색은 종이 그대로(custom.css) */
html:has(.quote-sheet, .tax-invoice) { background: var(--uk-bg); }
.quote-sheet, .tax-invoice { padding: 1.5rem 1.75rem; border-radius: var(--uk-r-sm); box-shadow: var(--uk-up); }
@media (max-width: 767px) {
  .quote-sheet, .tax-invoice { margin-top: 0; padding: 1rem; }
}
@media print {
  html:has(.quote-sheet, .tax-invoice) { background: none; }
  .quote-sheet, .tax-invoice { padding: 0; box-shadow: none; border-radius: 0; }
}
/* 계산서 발행 - [업체찾기] 묶음 아래 설명: 휴대폰은 라벨이 칸 위로 올라가므로 들이지 않는다(custom.css .form-help는 라벨 폭만큼 들인다) */
@media (max-width: 767px) {
  .js-company-finder + .form-help { margin-left: 0; }
}

/* ============================================================================
   C조 - 입출금·일정 화면(2026-10-05 공통 UI로 옮김)
   transaction/* · sales_group/* · category/* · schedule/* · partials/_transaction_list·_tx_summary·_tx_tabs·_modal_transaction·
   _modal_sales_group·_table_sales_groups · company/_tab_sales·_tab_schedules. 색·모서리는 var(--uk-*)만
   ========================================================================== */
/* 검색 카드의 짧은 안내(업체를 고르면 그룹이 나온다) */
.tx-search-note { font-size: 13px; color: var(--uk-muted); }
/* 연도별 매출통계 - 거래처 찾기 칸이 검색어 줄을 다 쓴다 */
.list-search-field > .tx-company-picker { flex: 1 1 20rem; min-width: 0; }
/* 입출금내역 목록 - 날짜 칸은 값만큼 */
.tx-table .is-date, .list-table .table .is-date { width: 7rem; }
/* 오늘 경계선 - 오늘보다 뒤 날짜의 마지막 줄 아래 파란 선(2026-11-10 사용자, _transaction_list.php) */
.tx-table tr.tx-today-edge > td { border-bottom: 2px solid var(--uk-brand); }
/* 목록 내용 뒤 비고 - 약간 작은 회색 한 줄, 길면 …(2026-11-12 사용자, _transaction_list.php) */
.tx-memo-line { display: inline-block; max-width: 24em; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: var(--fs-sm); color: var(--uk-muted); }
/* 입출금 창 - `지출` 줄 오른쪽 끝에 [비고 작성 ⌄](2026-11-12 사용자). 펴지면 화살표가 위로 */
.tx-exclude-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tx-memo-toggle { gap: 4px; }
.tx-memo-toggle svg { transition: transform .15s; }
.tx-memo-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 매출통계 - 집계 칸 넷을 두 장씩(2026-09-23 사용자 "좌우 1:1"), 좁으면 한 줄에 하나. 공통에 칸 두 개 격자가 없어 화면 것으로 둔다 */
.tx-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 1023px) { .tx-stat-grid { grid-template-columns: minmax(0, 1fr); } }
.tx-stat-grid > .detail-panel { margin: 0; min-width: 0; }
.stat-count { font-size: 12px; font-weight: 400; color: var(--uk-muted); }
.stat-panel .stat-month { width: 6rem; }
.stat-panel .stat-amount { width: 9rem; }
.tx-cal-card { padding: 14px; }
/* 작업일정 달력 카드 - 달력은 바깥 카드 끝까지, 넘기기 줄은 타임라인 카드(.sch-timeline-card·.sch-card-head)처럼 아래 선 하나(2026-10-22 사용자
   "달력카드는 빼고 밖에 카드에 맞춰"). 달력은 공통 달력(2026-10-27, schedule/_calendar.php) */
.sch-cal-card { padding: 0; overflow: hidden; }
.sch-cal-card .cal-nav { padding: .6rem 1.1rem; border-bottom: 1px solid var(--uk-border); }
/* 작업일정 달력은 가로 스크롤이 필요 없다 - 달을 넘기거나 끄는 동안 가로 스크롤 막대가 생겨(2026-10-22 사용자 "달 이동할 때 좌우 스크롤이
   생겨 안 생기게") 아예 막는다 */
.sch-cal .cal-scroll { overflow-x: hidden; }
.detail-stats + .tx-stat-grid { margin-top: 18px; }

/* AI 검색 안내 줄(2026-10-19, App\Utils\AiSearch::notice) - 검색줄 맨 아래 한 줄 전체 */
.list-search > .ai-search-notice { grid-column: 1 / -1; margin: .2rem 0 0; font-size: 13px; color: var(--uk-muted); }
.ai-search-badge { display: inline-block; margin-right: .3rem; padding: 0 .4rem; border-radius: var(--uk-r-pill); background: var(--uk-brand); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; }
.ai-search-notice a { margin-left: .4rem; }

/* 업체 상세 `작업일정` 탭 달력 - 표 칸(.has-table) 안이라 좌우만 띄운다 */
.detail-panel .sch-tab-cal { padding: 0 .75rem .75rem; }

/* 제목 끝 색 칸(schedule/_color_input.php) - 색 단추 + 견본 25칸(5×5) 창 */
.sch-color { position: relative; flex: 0 0 auto; display: inline-flex; }
.sch-color-btn { width: 2.6rem; height: 34px; padding: 4px; border: 1px solid var(--uk-border); border-radius: 8px; background: var(--uk-surface); cursor: pointer; }
.sch-color-btn::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--ev); }
.sch-color-btn:hover, .sch-color-btn[aria-expanded="true"] { border-color: var(--uk-brand); }
.sch-color-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 28px); gap: 6px; padding: 10px;
  background: var(--uk-surface); border: 1px solid var(--uk-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.sch-color-pop[hidden] { display: none; }
.sch-color-opt { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--ev); cursor: pointer; }
.sch-color-opt:hover { transform: scale(1.12); }
.sch-color-opt.is-selected { box-shadow: 0 0 0 2px var(--uk-surface), 0 0 0 4px var(--ev); }
.sch-color-opt:focus-visible { outline: 2px solid var(--uk-fg); outline-offset: 2px; }
/* 작업일정 목록 - 제목 옆 메모 미리보기, 댓글 시각 */
.sch-memo-peek, .schedule-comment-time { color: var(--uk-muted); }

/* 분류 관리 - 안내 띠 아래 보드 */
.cat-notice { margin-bottom: 18px; }

/* ============================================================================
   A조 - 공용 조각·업체·기준정보 화면을 공통 마크업으로 옮기며 남은 자리 (2026-10-05)
   ========================================================================== */
/* 호스팅 도메인 줄 [＋][×] - 동작은 domain-rows.js(data-domain-*)라 공통 data-repeat-*가 없다. 모양은 공통 .repeat-btn.is-add/.is-remove(form.css) */
/* 첫 화면·서브계정 신청·사람 고르기 창의 짙은 브랜드 배경(custom.css .home-gate · .gate-card · .switch-modal · .inquiry-*) -
   예전엔 청록 숫자(#0a2021 등)를 직접 적어 테마를 따라가지 않았다. 테마 강조색(--uk-brand*)에서 뽑는다.
   (blue 테마는 css/themes/blue.css가 남색으로 따로 덮는다) */
:root[data-theme] {
  --a-gate-deep: color-mix(in srgb, var(--uk-brand-dark) 28%, var(--uk-fg));
  --a-gate-mid: color-mix(in srgb, var(--uk-brand-dark) 55%, var(--uk-fg));
  --a-gate-glow: color-mix(in srgb, var(--uk-brand) 45%, transparent);
  --a-gate-glow-soft: color-mix(in srgb, var(--uk-brand-light) 35%, transparent);
  --a-gate-haze: color-mix(in srgb, var(--uk-surface) 12%, transparent);
  --a-gate-line: color-mix(in srgb, var(--uk-surface) 6%, transparent);
  --a-gate-text: color-mix(in srgb, var(--uk-on-strong) 92%, var(--uk-brand));
  --a-gate-sub: color-mix(in srgb, var(--uk-on-strong) 78%, var(--uk-brand));
  --a-gate-shadow: rgba(var(--uk-shc), .55);
  --a-brand-shadow: color-mix(in srgb, var(--uk-brand-dark) 35%, transparent);
}
/* 서브계정 신청·대기(join/*) - 흰 카드(.gate-card) 안의 칸 묶음은 공통 라벨 위 폼(.form-panel.is-label-top)인데, 카드 안 카드가 되지 않게 면을 걷고 한 줄에 하나씩 */
.gate-card .form-panel.gate-fields { grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; padding: 0; border: 0; background: none; box-shadow: none; }
/* 권한 창(partials/_permission_modal.php) - 머리 안내 한 줄, 기본 묶음 알약 + [기본값으로]를 한 칸에 */
.permission-lead { margin: 0 0 .75rem; }
.permission-templates { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
/* 대시보드 칸 안 표(dashboard.php .dash-clip) - PC·휴대폰 모두 칸 폭에 맞춰 이름·제목을 …로 줄인다. 날짜·남은 날 뱃지·금액은 줄이지 않는다.
   예전 휴대폰 규칙(이름 9rem + 표 상자 안에서 옆으로 밀기)은 뱃지(`15일 남음`)·금액이 카드 끝에서 잘린 채 보였다(2026-10-05).
   이름이 옆 칸 위로 겹쳤던 원인은 글자 칸의 최소 폭(custom.css 5.5em)이라 휴대폰에서만 그 최소 폭을 푼다 */
@media (max-width: 767px) {
  .dash-clip > a, .dash-clip > span { min-width: 0; }
  .table tr:has(> .dash-clip) > td { padding-left: .3rem; padding-right: .3rem; white-space: nowrap; }   /* 칸 사이를 좁혀 이름·제목 자리를 늘린다 */
}
/* 호스팅 수정(hosting/form.php) 접속 정보·도메인 표 - 칸 안 입력이 한 글자 폭으로 찌그러지지 않게 최소 폭을 주고, 모자라면 표 상자 안에서 옆으로 민다 */
.hosting-table td > .input,
.hosting-table .finder-line > .input { min-width: 8.5rem; }
.hosting-table td > .input[type="number"] { min-width: 5rem; }
/* A조 끝 */
/* 연도별 매출통계 - 합계 표 아래 그래프 칸 */
.tx-summary + .chart-card { margin-top: 18px; }
/* 바닥 시트 버튼 줄 안의 링크 버튼([전체 화면으로]) - 글자를 가운데로(버튼과 같은 줄 높이) */
.bottom-sheet-actions > a.button { display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================================
   2026-10-05 화면 점검(QA 두 번)에서 나온 자리 - 화면 묶음과 상관없이 여기 모은다
   ========================================================================== */
/* 업체 등록·수정 사업자등록번호 줄([대표] 번호 · 메모 · [＋]) - 번호 칸은 번호 길이만큼(000-00-00000), 메모가 남은 폭.
   공통 .repeat-rows > .repeat-row > .input(flex 1)이 custom.css 폭보다 뒤라 여기서 다시 준다.
   휴대폰은 한 줄에 다 넣으면 번호가 잘리고 메모가 눌려서 메모를 다음 줄로 내린다(번호 칸 아래 맞춤) */
.repeat-rows > .repeat-row > .input.is-key { flex: 0 0 11rem; }
.repeat-rows > .repeat-row > .input.is-note { flex: 1 1 8rem; }
@media (max-width: 767px) {
  .repeat-rows > .repeat-row:has(> .is-note) { flex-wrap: wrap; }
  .repeat-rows > .repeat-row > .input.is-key { flex: 1 1 8rem; }
  .repeat-rows > .repeat-row > .repeat-act { order: 1; }
  .repeat-rows > .repeat-row > .input.is-note { order: 2; flex: 1 1 calc(100% - 2.6rem - .35rem); margin-left: calc(2.6rem + .35rem); }
}
/* 상세 라벨-값(.detail-list) 휴대폰 - 라벨은 띄어쓰기에서만 꺾는데(custom.css) 띄어쓰기 없는 긴 라벨(`사업자등록번호`)은 5.5rem 칸을
   넘어 값 위로 겹쳤다. 라벨 칸을 가장 긴 낱말만큼까지는 늘린다(짧은 라벨뿐이면 5.5rem 그대로) */
@media (max-width: 767px) {
  .detail-list { grid-template-columns: minmax(5.5rem, min-content) minmax(0, 1fr); }
  .detail-list > dt { word-break: keep-all; }
}
/* 설정 > 디자인 테마 - 카드 셋을 같은 폭·같은 키로(고른 카드만 `사용 중` 뱃지 때문에 키가 컸고, 휴대폰에서 둘·하나로 들쭉날쭉했다).
   뱃지는 견본 색 띠 옆으로 */
.theme-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 11rem)); }
@media (max-width: 767px) { .theme-choices { grid-template-columns: minmax(0, 1fr); align-self: stretch; } }   /* 휴대폰은 한 줄에 하나씩 꽉 차게 */
.theme-choices > .filter-check.is-card { max-width: none; margin: 0; }
.theme-choice-foot { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; min-height: 22px; }
.theme-choice-foot > .theme-swatch { margin-top: 0; }