/* ============================================================
   KRDS 공통 컴포넌트 — krds-tokens.css 뒤에 로드한다.

   이 프로젝트의 컴포넌트 층은 Tailwind 유틸리티 클래스다
   (bg-white / border-gray-300 / rounded ...). 유틸리티 클래스는
   특정도가 element 선택자보다 높아서 여기 규칙을 이긴다.
   그래서 이 파일은 **유틸리티가 손대지 않는 것만** 맡는다:

     - 포커스 링 (Tailwind 는 focus: 유틸을 붙인 곳에만 적용)
     - 오류 상태 (aria-invalid)
     - 유틸리티 클래스가 없는 맨 input / select / table
     - 모달 · 배지 · 칩 · 알림처럼 프로젝트가 클래스로 쓰는 것

   Tailwind 클래스가 붙은 요소의 색·라운드는 각 셸의 tailwind.config
   theme 에서 바꿔야 한다. 여기서 !important 로 이기려 들지 않는다 —
   그렇게 하면 어느 쪽이 진짜 값인지 아무도 모르게 된다.
   ============================================================ */

/* 포커스 — KRDS 필수. 키보드 사용자에게만 4px 파란 halo */
:focus-visible {
  outline: none;
  box-shadow: var(--krds-focus-ring);
  border-radius: var(--krds-radius-sm);
}

/* 오류 상태 — 색만으로 알리지 않는다(규칙 7). 문구는 .field-error 로 함께 표기 */
[aria-invalid="true"],
.is-invalid {
  border: 2px solid var(--krds-danger) !important;
}
.field-error {
  display: block;
  margin-top: var(--krds-space-sm);
  color: var(--krds-danger);
  font-weight: 600;
}
.field-help {
  display: block;
  margin-top: var(--krds-space-sm);
  color: var(--krds-muted);
}

/* 유틸리티 클래스가 없는 맨 입력 — 기본값이라도 KRDS 를 따르게 */
input:not([class]), textarea:not([class]) {
  border: 1px solid var(--krds-line-strong);
  border-radius: var(--krds-radius-lg);
  background: var(--krds-canvas);
  color: var(--krds-body);
}
select:not([class]) {
  border: 1px solid var(--krds-line-strong);
  border-radius: var(--krds-radius-md);
  background: var(--krds-canvas);
  color: var(--krds-body);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--krds-line);
  border-color: var(--krds-line-disabled);
  color: var(--krds-muted);
}

/* 표 — 숫자 열은 자릿수가 흔들리지 않게 */
table:not([class]) thead th {
  background: var(--krds-surface);
  color: var(--krds-fg);
  border-bottom: 1px solid var(--krds-line-strong);
}
table:not([class]) tbody td { border-bottom: 1px solid var(--krds-line); }
.col-number, .num-cell, td.text-right, th.text-right {
  font-variant-numeric: tabular-nums;
}
tr.total-row td, tr.sum-row td, tfoot td {
  background: var(--krds-surface);
  color: var(--krds-fg);
  font-weight: 700;
}

/* 상태 배지 — 색과 함께 라벨을 쓴다(규칙 7) */
.badge, .status-badge {
  display: inline-block;
  padding: 0 var(--krds-space-md);
  border-radius: var(--krds-radius-sm);
  font-weight: 600;
}
.badge-success, .status-badge.ok      { background: var(--krds-success); color: #fff; }
.badge-warning, .status-badge.warn    { background: var(--krds-warning); color: var(--krds-fg); }
.badge-danger,  .status-badge.err     { background: var(--krds-danger);  color: #fff; }
.badge-info,    .status-badge.info    { background: var(--krds-info);    color: #fff; }
.badge-neutral, .status-badge.neutral { background: var(--krds-surface); color: var(--krds-fg); border: 1px solid var(--krds-line); }

/* 필터 칩 — 활성만 파랑(규칙 4) */
.chip {
  border: 1px solid var(--krds-line);
  background: var(--krds-canvas);
  color: var(--krds-fg);
  border-radius: var(--krds-radius-pill);
}
.chip.active, .chip[aria-pressed="true"] {
  border-color: var(--krds-primary);
  background: var(--krds-primary-soft);
  color: var(--krds-primary-hover);
}

/* 알림 배너 — 배경은 흰색 유지, 시스템 색은 보더로만 */
.alert, .flash, .notice-banner {
  background: var(--krds-canvas);
  color: var(--krds-fg);
  border: 1px solid var(--krds-line);
  border-radius: var(--krds-radius-lg);
}
.alert-success, .flash.ok      { border-color: var(--krds-success); }
.alert-warning, .flash.warn    { border-color: var(--krds-warning); }
.alert-danger,  .flash.err     { border-color: var(--krds-danger); }
.alert-info,    .flash.info    { border-color: var(--krds-info); }

/* 모달 — 그림자 금지의 유일한 예외 */
.modal, dialog {
  background: var(--krds-canvas);
  border: 1px solid var(--krds-line);
  border-radius: var(--krds-radius-xl);
  box-shadow: 0 .2rem 0 0 rgba(0,0,0,.1), 0 .4rem .8rem 0 rgba(0,0,0,.1);
}
.modal-backdrop, dialog::backdrop { background: rgba(0,0,0,.5); }

/* 모션은 강조 수단이 아니다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   전화주문 접수 패널 — 좌측 하단 FAB + 440px 드로어
   ============================================================ */
/* 버튼 + 라벨 한 덩어리. bottom 만 바꾸면 통째로 오르내린다.

   96px → 40px (2026-08-21). 96px 이던 이유는 사이드바 맨 아래 '지자체 선택' 블록을
   가리지 않으려던 것이었는데, 그 블록을 없애고 관리자 대메뉴로 옮기면서 이유가 사라졌다
   (`_dashboard_gov_portal_sidebar.php` · `menu_admin_lg_switch.sql`).
   그대로 두면 버튼 아래에 빈 공간 73px 이 남는다.

   40px 의 근거: 푸터(.portal-footer)가 실측 23.3px 이고 그 위로 약 17px 을 띄운다.
   푸터 글자 크기·padding 을 바꾸면 이 값도 같이 봐야 한다. */
.krds-po-launcher {
  position: fixed; left: 24px; bottom: 40px; z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.krds-po-fab {
  /* 안쪽 파란 원 68px + 링 8px = 84px. 링은 primary-soft(#ecf2fe)보다 한 단계
     진한 연파랑이라 흰 배경에서도 테두리가 또렷하다. 그림자가 아니라 보더다(규칙 5).
     두께·색을 바꾸려면 아래 두 값만 만지면 된다. */
  --krds-po-ring-w: 8px;
  --krds-po-ring:   #d8e4fb;
  width: calc(68px + var(--krds-po-ring-w) * 2);
  height: calc(68px + var(--krds-po-ring-w) * 2);
  box-sizing: border-box; border-radius: 50%;
  background: var(--krds-primary);
  border: var(--krds-po-ring-w) solid var(--krds-po-ring);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer; padding: 0;
}
.krds-po-fab:active { background: var(--krds-primary-active); }
.krds-po-fab-label {
  padding: 4px 10px; border-radius: var(--krds-radius-pill);
  background: var(--krds-canvas); border: 1px solid var(--krds-primary);
  color: var(--krds-primary-hover); font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.krds-po-backdrop { position: fixed; inset: 0; z-index: 940; background: rgba(0,0,0,.5); }

/* 헤더(안내 띠 + 대메뉴) 아래에서 슬라이드한다 — top 은 셸이 정한다 */
.krds-po-panel {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 950;
  width: min(440px, 92vw);
  background: var(--krds-canvas);
  border-right: 1px solid var(--krds-line-strong);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s;
}
.krds-po-panel.open { transform: translateX(0); }
/* 시안(전화주문 접수 패널 KRDS.dc.html) 수치 그대로 — 패널 헤더는 본문 글자 규칙(A안)의
   대상이 아니라 크롬이다. 패딩 18/24, 아이콘 18px, 제목 19px, 닫기 32px. */
.krds-po-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: 18px 24px;
  background: var(--krds-primary); color: #fff;
  font-weight: 700;
}
.krds-po-title { display: flex; align-items: center; gap: 10px; font-family: var(--krds-font-title); font-size: 19px; line-height: 1.2; }
.krds-po-title i { font-size: 18px; }
.krds-po-close {
  flex-shrink: 0;
  width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--krds-radius-md); background: transparent; color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.krds-po-close:hover { background: rgba(255,255,255,.18); }
.krds-po-frame { flex: 1; width: 100%; border: 0; background: var(--krds-canvas); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media print { .krds-po, .krds-po-launcher, .krds-po-fab, .krds-po-fab-label, .krds-po-panel, .krds-po-backdrop { display: none !important; } }


/* ============================================================
   패널 안(iframe)에서만 — body.krds-panel
   드로어는 440px 다. 업무 화면의 12열 주문표를 그대로 밀어 넣으면 한 열이
   30px 도 안 돼 아무것도 읽히지 않는다. 시안과 같이 봉투종류 / 수량(팩) / 금액
   3열만 남긴다. DOM 은 건드리지 않았다 — 감추는 것은 전부 CSS 이고, 셀에는
   po-c-* 표식만 붙였다. 이 블록을 지우면 12열 표가 그대로 돌아온다.
   ============================================================ */
body.krds-panel { background: var(--krds-canvas); }

/* --- 주문 내용 표: 시안과 같은 3열 --------------------------------- */
/* col 은 마크업에 인라인 width 가 박혀 있다 — !important 가 없으면 12열 폭이 그대로 남아
   보이는 3열이 표 왼쪽 절반에 몰린다(실제로 그렇게 나왔다). */
body.krds-panel .phone-batch-table col.po-c-group,
body.krds-panel .phone-batch-table col.po-c-pack,
body.krds-panel .phone-batch-table col.po-c-box,
body.krds-panel .phone-batch-table col.po-c-unit,
body.krds-panel .phone-batch-table col.po-c-wrap { width: 0 !important; }
body.krds-panel .phone-batch-table col.po-c-name { width: 44% !important; }
body.krds-panel .phone-batch-table col.po-c-qty  { width: 30% !important; }
body.krds-panel .phone-batch-table col.po-c-amt  { width: 26% !important; }

body.krds-panel .phone-batch-table .po-c-group,
body.krds-panel .phone-batch-table .po-c-pack,
body.krds-panel .phone-batch-table .po-c-box,
body.krds-panel .phone-batch-table .po-c-unit,
body.krds-panel .phone-batch-table .po-c-order,
body.krds-panel .phone-batch-table .po-c-wrap { display: none; }

/* 12열용 말줄임(overflow:hidden)이 남아 있으면 합계 금액 끝자리가 잘린다 */
body.krds-panel .phone-batch-table th,
body.krds-panel .phone-batch-table td { overflow: visible; text-overflow: clip; }
body.krds-panel .phone-batch-table thead th { white-space: normal; }
body.krds-panel .phone-batch-table .po-c-name { white-space: normal; word-break: keep-all; }

/* 표를 감싼 상자·회색 헤더 대신 굵은 밑줄 한 줄(규칙 5: 깊이는 보더로) */
body.krds-panel .phone-batch-wrap { border: 0; border-radius: 0; overflow: visible; }
body.krds-panel .phone-batch-table thead th {
  background: var(--krds-canvas); color: var(--krds-fg); font-weight: 700;
  padding: 0 4px 10px; border-bottom: 1px solid var(--krds-line-strong) !important;
}
body.krds-panel .phone-batch-table thead tr:first-child th[colspan] { padding-bottom: 4px; }
body.krds-panel .phone-batch-table tbody td {
  padding: 10px 4px; border-bottom: 1px solid var(--krds-line);
  color: var(--krds-fg); font-variant-numeric: tabular-nums;
}
body.krds-panel .phone-batch-table tbody td.po-c-amt { color: var(--krds-body); }
body.krds-panel .phone-batch-table .item-qty-input {
  padding: 6px 10px; border: 1px solid var(--krds-line-strong);
  border-radius: var(--krds-radius-md); font-variant-numeric: tabular-nums;
}
/* 12열 표는 스크롤 중 머리·합계를 sticky 로 붙여 둔다. 패널에서는 감싼 상자의
   overflow 를 풀어 sticky 기준 상자가 사라지므로 꺼 둔다(목록도 짧다). */
body.krds-panel .phone-batch-table thead th { position: static; }

/* 숫자 열은 오른쪽 정렬 — .data-table 의 text-align:left 가 Tailwind text-right 를
   이기고 있어(명시도 0,1,1 > 0,1,0) 헤더·수치가 전부 왼쪽에 붙어 있었다. */
body.krds-panel .phone-batch-table .po-c-qty,
body.krds-panel .phone-batch-table .po-c-amt { text-align: right; }
body.krds-panel .phone-batch-table .po-c-name { text-align: left; }

/* 합계는 표 안에서 못 그린다. tfoot 의 라벨 셀이 colspan=7 인데, 그 7개 중
   6개를 숨기면 fixed 레이아웃이 그 셀에 표 전체 폭(100%)을 줘 버리고 금액 셀이
   표 오른쪽 바깥으로 밀려난다(Chromium 실측: 라벨 24~416, 금액 416~416).
   그래서 패널에서는 tfoot 을 접고 표 밖의 .po-total 한 줄을 쓴다. */
body.krds-panel .phone-batch-table tfoot { display: none; }
.po-total { display: none; }
body.krds-panel .po-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 4px 0; border-top: 1px solid var(--krds-line-strong);
}
body.krds-panel .po-total span { font-size: 15px; color: var(--krds-body); }
body.krds-panel .po-total strong {
  font-size: 26px; font-weight: 700; color: var(--krds-fg); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* --- 하단 버튼 줄: 시안의 고정 바 ---------------------------------- */
body.krds-panel .phone-order-actions {
  margin-top: 20px; padding-top: 16px; gap: 10px;
  border-top: 1px solid var(--krds-line);
}
body.krds-panel .phone-order-actions button[type="submit"] { flex: 1; padding: 14px; box-shadow: none; }
body.krds-panel .phone-order-actions #phone-order-cancel {
  padding: 14px 22px; background: var(--krds-canvas);
  border: 1px solid var(--krds-line-strong); color: var(--krds-fg);
}


/* ============================================================
   타이틀급 서체 — 시안은 제목·메뉴에만 Paperlogy 를 쓰고 본문은 Pretendard 다.
   크기는 시안 3a 기준: 화면 제목 32 · 카드 제목 17 · 큰 카드 제목 19 ·
   브랜드 20 · 대메뉴 17 · 좌측 메뉴 17 · 탭 15.
   본문·표 글자는 건드리지 않는다(README A안).
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--krds-font-title); }
/* 대메뉴 — 셸마다 마크업이 다르다(.portal-top-nav 를 쓰는 포털·워크스페이스·관리자,
   Tailwind 유틸만 쓰는 main.php·대시보드). 헤더 안의 nav 를 한꺼번에 잡는다. */
.portal-top-nav,
.nav-top { font-family: var(--krds-font-title); font-size: 17px; }
.po-sec-title {
  font-family: var(--krds-font-title);
  font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--krds-fg);
}
.po-sec-title-lg { font-size: 19px; }


/* ============================================================
   확인·알림 모달 (시안 3i) — public/js/krds-dialog.js 가 쓰는 마크업
   라운드 12 · 여백 40 · 검정 50% 배경막. 그림자는 모달만 예외(규칙 5).
   파괴적 동작(is-danger)에만 #de3412 를 쓴다.
   ============================================================ */
.krds-dialog-root { position: fixed; inset: 0; z-index: 10000; }
.krds-dialog-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.krds-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* 셸마다 Tailwind preflight 유무가 달라 box-sizing 을 명시한다 — 없으면 패딩 80px 이
     더해져 640px 로 커진다(시안은 패딩 포함 560px). */
  box-sizing: border-box;
  width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--krds-canvas);
  border-radius: var(--krds-radius-xl);
  padding: 40px;
  box-shadow: 0 2px 0 0 rgba(0,0,0,.1), 0 4px 8px 0 rgba(0,0,0,.1);
  display: flex; flex-direction: column;
  font-family: var(--krds-font-body);
  color: var(--krds-body);
}
.krds-dialog-title {
  margin: 0 0 12px;
  font-family: var(--krds-font-title);
  font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--krds-fg);
}
.krds-dialog-body { font-size: 17px; line-height: 1.6; color: var(--krds-body); }
.krds-dialog-note {
  margin-top: 20px; padding: 16px 20px;
  border: 1px solid var(--krds-line); border-radius: var(--krds-radius-lg);
  background: var(--krds-surface);
  font-size: 15px; color: var(--krds-body);
}
.krds-dialog-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: auto; padding-top: 28px;
}
.krds-dialog-btn {
  padding: 12px 20px; border-radius: var(--krds-radius-md);
  font-family: inherit; font-size: 17px; line-height: 1.2; cursor: pointer;
  border: 1px solid var(--krds-line-strong);
  background: var(--krds-canvas); color: var(--krds-fg);
}
.krds-dialog-btn:hover { background: var(--krds-surface); }
.krds-dialog-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37,110,244,.35); }
.krds-dialog-ok {
  border-color: var(--krds-primary); background: var(--krds-primary); color: #fff;
}
.krds-dialog-ok:hover { border-color: var(--krds-primary-hover); background: var(--krds-primary-hover); }
.krds-dialog-ok.is-danger { border-color: var(--krds-danger); background: var(--krds-danger); }
.krds-dialog-ok.is-danger:hover { border-color: #b02a0e; background: #b02a0e; }
@media print { .krds-dialog-root { display: none !important; } }

/* ============================================================
   전역 폼 · 버튼 · 표 통일 (2026-08-16 요청)

   왜 여기인가: 같은 성격의 요소가 뷰 200여 개에 흩어져 있고 클래스도 제각각이다.
   파일마다 고치면 diff 가 200개로 번지고, 다음에 값을 바꿀 때 또 200개를 훑어야 한다.
   그래서 "값"은 이 블록 한 곳에서만 정한다.

   왜 .krds-ui 를 앞에 붙이는가: Tailwind 유틸(.rounded · .rounded-sm · .border-gray-300)을
   이겨야 한다. 유틸은 명시도 0,1,0 이라 "클래스 + 요소"(0,1,1)면 순서와 무관하게 이긴다.
   .krds-ui 는 각 셸의 <body> 에 붙어 있다.

   확정값 (사용자 결정)
     - radius  : 입력 · select · 버튼 모두 6px 하나로
     - 보더색  : #cdd1d5 (현행 유지). KRDS 원안의 #58616a 는 채택하지 않았다
     - 표 헤더 : 회색면 #f4f5f6 + 진한 글자 #1e2124 + 하단 1px #58616a
   ============================================================ */

/* ── 입력 · select · textarea ───────────────────────────────── */
.krds-ui input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
.krds-ui select,
.krds-ui textarea {
  border: 1px solid var(--krds-line);
  border-radius: 6px;
}
/* 오류 표시는 보더로 알리므로 위 규칙보다 세야 한다 */
.krds-ui .is-invalid,
.krds-ui [aria-invalid="true"] { border: 2px solid var(--krds-danger); }

/* ── 버튼 ───────────────────────────────────────────────────
   배지·칩은 <span> 이라 여기 걸리지 않는다(배지 4px 유지).
   링크를 버튼처럼 쓴 <a> 는 rounded 계열 클래스를 가진 것만 집는다 —
   본문 텍스트 링크까지 둥글게 만들지 않기 위해서다. */
.krds-ui button,
.krds-ui input[type="submit"],
.krds-ui input[type="button"],
.krds-ui a.rounded,
.krds-ui a.rounded-sm,
.krds-ui a.rounded-md { border-radius: 6px; }
/* 원형·알약은 예외 — 전화주문 FAB, 필터 칩 */
.krds-ui button.rounded-full,
.krds-ui a.rounded-full,
.krds-ui .krds-po-fab,
.krds-ui .chip { border-radius: 9999px; }
/* 밑줄로 활성 표시를 하는 것도 예외다.
   상단 대메뉴는 <button> 인데 활성 표시가 border-bottom: 3px 다 —
   라운드를 주면 그 밑줄의 양끝이 둥글어져 얇은 알약처럼 보인다(2026-08-16 되돌림).

   ⚠ 화면 쪽 <style> 에서 `.ti-tab { border-radius: 0 }` 처럼 클래스 하나로 덮으려 하면
     **안 먹는다** — 위 `.krds-ui button` 이 명시도 (0,2,0) 이라 (0,1,0) 을 이긴다.
     밑줄형 탭을 새로 만들면 여기에 선택자를 더하는 것이 맞다 (2026-08-24: .ti-tab). */
.krds-ui .portal-nav-trigger,
.krds-ui .portal-nav-link,
.krds-ui .nav-top a,
.krds-ui .ti-tab { border-radius: 0; }

/* ── 밑줄형 탭 (.ti-tabs / .ti-tab) ─────────────────────────
   화면 안에서 모드를 가르는 탭이다. **활성 표시는 상단 대메뉴와 같은 규격이어야 한다** —
   3px 밑줄 · 선은 `--krds-primary` · 글자는 `--krds-primary-hover` · 굵기 700.
   정본은 대메뉴다: `_dashboard_gov_portal_topnav_css.php` 의 `.portal-nav-trigger.is-active`.

   ⚠ **이 규칙이 공용 파일에 있는 이유가 전부다.** 화면마다 Tailwind 로
     `border-b-2 border-blue-600 font-semibold` 처럼 따로 칠하면 굵기(2 vs 3) ·
     색(하드코딩 파랑 vs 토큰) · 글자 굵기(600 vs 700)가 조금씩 어긋나고,
     그 어긋남을 화면마다 다시 지적받는다(2026-08-24 세금계산서 · 2026-09-05 지정판매소 반품).
     **밑줄형 탭이 필요하면 새로 칠하지 말고 이 클래스를 쓴다.**

   ⚠ 선택자가 세 겹(0,3,0)인 이유 — 위 `.krds-ui button { border-radius: 6px }` 가 (0,2,0)
     이라 `.ti-tab`(0,1,0) 으로는 라운드를 못 없앤다. 밑줄 양끝이 얇은 알약처럼 둥글어진다.

   ⚠ 구분선이 2px·중간 회색인 이유 — 1px `--krds-line`(#cdd1d5) 로 했더니 선이 안 보이고
     파란 밑줄만 공중에 뜬 것처럼 보였다(그렇게 두 번 틀렸다). 선이 또렷해야 활성 탭이
     '한 줄 위의 한 구간' 으로 읽힌다.

   카드 안에 넣을 때는 카드 여백을 상쇄한다 — `class="ti-tabs -mx-3 -mt-3 mb-1"`.
   `.ti-tabs` 자체 좌우 여백 12px 가 카드의 `p-3`(12px)와 같아 첫 탭이 본문과 맞는다. */
.krds-ui .ti-tabs {
  display: flex; align-items: stretch;
  padding: 0 12px;
  background: #fff;
  border-bottom: 2px solid #b9c1c9;
}
.krds-ui .ti-tabs .ti-tab {
  display: inline-flex; align-items: center;
  padding: 9px 20px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  margin-bottom: -2px;               /* 밑줄이 구분선 위에 겹쳐 앉는다 */
  background: transparent;
  font: inherit; font-size: 14px; color: #5b6470;
  cursor: pointer; white-space: nowrap;
}
.krds-ui .ti-tabs .ti-tab:hover { color: var(--krds-fg); }
.krds-ui .ti-tabs .ti-tab.is-on {
  color: var(--krds-primary-hover);
  font-weight: 700;
  border-bottom-color: var(--krds-primary);
}
/* 탭 줄 오른쪽 안내문. 줄바꿈되면 탭 줄이 두 줄 높이가 되고 밑줄이 글자에서 멀어져
   떠 보인다 — 좁은 화면에서는 줄바꿈 대신 뒤를 잘라 낸다. */
.krds-ui .ti-tabs-hint {
  align-self: center; margin-left: 16px;
  font-size: 11px; color: #6b7280;
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── 표 헤더 ────────────────────────────────────────────────
   색을 일부러 준 헤더(bg-blue-50 같은 묶음 표시)는 건드리지 않는다.
   배경 클래스가 없는 헤더만 회색면으로 맞춘다. */
.krds-ui table thead th { color: var(--krds-fg); border-bottom: 1px solid var(--krds-line-strong); }
.krds-ui table thead tr:not([class*="bg-"]) > th:not([class*="bg-"]) { background: var(--krds-surface); }

/* ── 컨트롤 높이 통일 (34px) ─────────────────────
   여기까지 세 갈래였다 — 입력칸 30px · select 28px · 버튼 34px.
   같은 줄에 나란히 서는 것들이라 밑선(items-end)을 맞추면 그 차이가
   라벨 높이 차이로 올라온다. 버튼 규격(px-4 py-1.5 = 34px)에 맞춘다.

   왜 padding 이 아니라 height 인가 —
   select 는 line-height 가 normal 이라 글꼴이 높이를 정한다. padding 으로는
   입력칸과 같은 값을 만들 수 없다. Chrome 의 input[type=date] 는 달력 아이콘
   때문에 같은 padding 에서도 2px 더 높다. height 로 못 박아야 종류가 섞여도 맞는다.

   textarea 는 뺐다 — 여러 줄 입력이라 높이를 고정하면 안 된다.
   체크박스·라디오·file·range 도 뺀다(고유 크기가 있다). */
.krds-ui input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]),
.krds-ui select { height: 34px; }

/* ── 표 머리글 글자 크기 ─────────────────────────
   셸 4곳(admin/layout · bag/layout/embed · main · portal)이 .data-table thead th 에
   font-size: 0.6875rem(11px) 을 박고 있어 본문(13px)보다 작았다.
   값을 한 곳에서 정하려고 여기서 되돌린다 — inherit 이라 표가 자기 크기를
   따로 정한 화면(인쇄용 9px 등)도 그 크기를 그대로 따라간다.
   명시도 0,3,1 로 셸 규칙(0,2,1)을 이기므로 로드 순서와 무관하다. */
.krds-ui .data-table thead th { font-size: inherit; }

/* ── 표 글꼴 통일 ────────────────────────────────
   .data-table 은 자기 font-family(Pretendard 계열)를 갖고 있고, 그 클래스가 없는 표는
   셸 글꼴(Paperlogy)을 쓴다 — 같은 화면 안에서도 표마다 글꼴이 달라 보였다.
   표 단위로 물려받게 해서 한 화면 한 글꼴이 되게 한다.

   td 에는 걸지 않는다 — 코드 열의 font-mono(바코드·LOT·사업자번호)는 살려야 한다.
   대신 한글이 든 셀에 font-mono 가 붙어 있으면 등폭 글꼴에 한글 자형이 없어
   굴림으로 폴백하므로, 그런 셀은 뷰에서 font-mono 를 뗐다(동 표시 2곳).

   정렬(text-align)과 줄바꿈(white-space)은 건드리지 않는다 —
   .data-table 의 text-align:left 가 Tailwind text-right 를 이겨서
   숫자 열이 왼쪽에 붙는 사고가 이미 한 번 있었다(위 phone-batch-table 주석 참고). */
.krds-ui table { font-family: inherit; }

/* ── 표 정렬 유틸이 통하게 ─────────────────────────
   셸의 .data-table th, .data-table td { text-align: left } 이 명시도 0,1,1 로
   Tailwind 의 .text-right / .text-center (0,1,0) 를 이기고 있었다.
   그래서 뷰에 text-right 를 적어도 숫자가 왼쪽에 붙었다 — 전화주문 표에서
   이 문제를 만나 표 전용 규칙(.po-c-qty)을 따로 쓴 적이 있다(위 주석).
   여기서 한 번만 뚫어 두면 모든 표에서 유틸이 뜻대로 동작한다(명시도 0,3,1). */
.krds-ui .data-table th.text-right,
.krds-ui .data-table td.text-right { text-align: right; }
.krds-ui .data-table th.text-center,
.krds-ui .data-table td.text-center { text-align: center; }
.krds-ui .data-table th.text-left,
.krds-ui .data-table td.text-left { text-align: left; }

/* ── 부분 갱신 중 표시 (krds-partial.js) ─────────────────────────
   조회를 눌렀는데 화면이 그대로면 눌렸는지 알 수 없다. 전체 reload 때는
   브라우저 탭의 로딩 표시가 그 역할을 했지만 fetch 에는 그것이 없다.
   그래서 본문을 살짝 흐리게 하고 클릭을 막는다 — 연타로 요청이 겹치는 것도 같이 막힌다.
   깜빡임을 피하려고 transition 을 짧게 두었다. */
#krds-work[aria-busy="true"] {
  opacity: .55;
  pointer-events: none;
  transition: opacity .12s linear;
  cursor: progress;
}

/* 인쇄에는 영향이 없어야 한다 */
@media print {
  #krds-work[aria-busy="true"] { opacity: 1; }
}