/*
 * v2.0 확장 화면(SCR-13~17) 공통 프리미티브.
 * design.md §1 토큰만 참조. 각 화면 CSS가 @import 로 선반영한다.
 */

/* 스크롤 가능한 페이지 루트 — kx-shell__content(overflow:hidden, flex) 내부에서 자체 스크롤. */
.kx-page {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ══════════════════════════════════════════════════════════
 * 카드 정본 — Nifty 카드 계보
 * 라운딩 8px · 1px 중립 테두리 · subtle 그림자 · hover elevation.
 * 각진/미클립 카드 0 목표: 미디어 카드는 .kx-card--flush + __media 로 모서리 클립.
 * ══════════════════════════════════════════════════════════ */
.kx-card {
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kx-card:hover {
  box-shadow: var(--shadow-level2);
}
/* 헤더 행(현행) — 제목 + 우측 액션 */
.kx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.kx-card__head h2 {
  font-size: var(--fs-h3);
  color: var(--color-neutral-900);
}
.kx-card__hint {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  margin: -4px 0 var(--space-3);
}

/* ── Nifty 구조형 카드 (헤더/바디/푸터·미디어 클립) ──
 * .kx-card--flush 로 카드 자체 패딩 제거 + overflow:hidden(미디어를 라운딩에 클립).
 * 구획별 패딩·neutral-200 구분선은 각 파트가 담당. */
.kx-card--flush {
  padding: 0;
  overflow: hidden;
}
.kx-card__media {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--color-neutral-100);
}
.kx-card__media > img,
.kx-card__media > video,
.kx-card__media > canvas,
.kx-card__media > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kx-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}
.kx-card__header h2,
.kx-card__header h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-neutral-900);
}
.kx-card__body {
  padding: var(--space-4);
}
.kx-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
}

/* ══════════════════════════════════════════════════════════
 * 공용 제목 클래스 — 페이지/섹션 제목 편차(20/22/26/30px) 근본 해소.
 * 역할↔토큰 1:1 고정. 화면별 제목은 이 클래스로 수렴한다.
 * ══════════════════════════════════════════════════════════ */
.kx-page__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
}
.kx-page__subtitle {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-neutral-500);
}
.kx-section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-900);
}

/* 세그먼트 토글 */
.kx-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  gap: 2px;
}
.kx-seg__btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: 3px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-500);
  cursor: pointer;
}
.kx-seg__btn.is-active {
  background: var(--color-white);
  color: var(--color-primary-700);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* ══════════════════════════════════════════════════════════
 * 셀렉트 / 드롭다운 — Nifty(§2.4) 계보
 * 커스텀 캐럿(고정 중립 chevron, 양 테마 공용) + hover/focus/disabled 상태.
 * appearance:none 로 OS별 기본 화살표 제거 후 kx 캐럿으로 통일.
 * ══════════════════════════════════════════════════════════ */
.kx-select {
  height: 36px;
  padding: 0 calc(var(--space-5) + 2px) 0 var(--space-3);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-neutral-700);
  font-size: var(--fs-body);
  font-family: inherit;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kx-select:not(:disabled):hover {
  border-color: var(--color-neutral-500);
}
.kx-select:focus-visible {
  outline: none;
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px var(--color-primary-050);
}
.kx-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-neutral-050);
}
.kx-select--sm {
  height: 32px;
  font-size: var(--fs-caption);
}

/* ── 드롭다운 메뉴 (§2.4) — 트리거 + 카드형 메뉴 + 항목. ── */
.kx-menu {
  min-width: 180px;
  padding: var(--space-1);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-level2);
}
.kx-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
  text-align: left;
  cursor: pointer;
}
.kx-menu__item:not(:disabled):hover,
.kx-menu__item.is-active {
  background: var(--color-primary-050);
  color: var(--color-primary-700);
}
.kx-menu__item--danger {
  color: var(--color-error);
}
.kx-menu__item--danger:not(:disabled):hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.kx-menu__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kx-menu__divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--color-neutral-200);
}

/* ══════════════════════════════════════════════════════════
 * 리스트 그룹 (§2.5) — 공지·활동·검색결과 등 목록형.
 * 행 = 아이콘/점 + 제목/메타 + 우측 배지/시간. 구분선·hover.
 * ══════════════════════════════════════════════════════════ */
.kx-list-group {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}
.kx-list-group__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
}
.kx-list-group__item:last-child {
  border-bottom: none;
}
a.kx-list-group__item,
button.kx-list-group__item {
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
a.kx-list-group__item:hover,
button.kx-list-group__item:hover,
.kx-list-group__item.is-active {
  background: var(--color-primary-050);
}
.kx-list-group__item.is-active {
  color: var(--color-primary-700);
}
.kx-list-group__body {
  flex: 1;
  min-width: 0;
}
.kx-list-group__title {
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-900);
}
.kx-list-group__meta {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-list-group__aside {
  margin-left: auto;
  flex: none;
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}

/* KPI 카드(공통) — 카드 정본과 동일 Nifty 엘리베이션 */
.kx-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
}
.kx-kpi:hover {
  box-shadow: var(--shadow-level2);
}
.kx-kpi__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-kpi__ai {
  color: var(--color-ai-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
}
.kx-kpi__value {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
}
.kx-kpi__sub {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-kpi--warn {
  border-color: var(--color-violation-warn);
}
.kx-kpi--error .kx-kpi__value {
  color: var(--color-error);
}

/* 델타 칩 */
.kx-delta {
  align-self: flex-start;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}
.kx-delta--up {
  color: var(--color-success);
  background: var(--color-success-bg);
}
.kx-delta--down {
  color: var(--color-error);
  background: var(--color-error-bg);
}

/* degraded 배지 */
.kx-bi__degraded {
  font-size: var(--fs-micro);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
 * 데이터 그리드 표준 — Nifty "Advanced table headers" 계보
 * (GUARDiA ITSM Nifty 다크 테마 계보와 정합)
 * 헤더: 12px / 600 / 중간색(neutral-500) / 좌정렬 / 서브톤 배경 / 2px 하단 구분선
 * 본문: 14px / neutral-700 / 1px 행 구분선(neutral-200) / 미들 정렬
 * 숫자열(.kx-num): 우정렬 tabular-nums
 * 전 화면 테이블(.kx-list-table·.kx-aq__table·.kx-adm-*·.kx-i18n-table·
 * .kxp-ticktable·.kx-boq__table 등)은 이 정의로 폰트·정렬·헤더 스타일을 수렴한다.
 * ══════════════════════════════════════════════════════════ */
.kx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
}
.kx-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-500);
  text-align: left;
  letter-spacing: 0.02em;
  background: var(--color-neutral-050);
  border-bottom: 2px solid var(--color-neutral-200);
  white-space: nowrap;
  vertical-align: bottom;
}
.kx-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  vertical-align: middle;
}
.kx-table tbody tr:hover {
  background: var(--row-hover);
}
.kx-table-scroll {
  overflow-x: auto;
  /* flex/grid 자식 함정 방지: 부모 폭에 맞춰 축소되고, 넓은 표는 자기 안에서 가로 스크롤. */
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.kx-table--zebra tbody tr:nth-child(even) {
  background: var(--zebra);
}
/* 숫자열: 우정렬 + 등폭 숫자(정렬 통일) */
.kx-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 비교 매트릭스 표준 (.kx-matrix) — 목록 표준과 분리된 의도적 패턴.
 * 헤더 강조(neutral-900/700)·중앙 정렬·항목별 1px 셀 보더. auction 낙찰 비교 등. */
.kx-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
}
.kx-matrix th,
.kx-matrix td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-200);
  text-align: center;
  vertical-align: middle;
}
.kx-matrix thead th {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
  background: var(--color-neutral-050);
  white-space: nowrap;
}
.kx-matrix tbody th {
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-900);
  text-align: left;
  background: var(--color-neutral-050);
}
.kx-matrix .kx-num {
  font-variant-numeric: tabular-nums;
}

/* 참고: docs 리포트 표(.kx-rep__table)는 A4 종이 시뮬레이션(고정 흰 배경·고정 잉크색)이라
 * 테마 토큰(다크서 반전) 부적합 + 신규 인쇄색 토큰 금지 → 의도적 테마 독립 예외로 유지한다. */

/* 가로 막대 리스트 */
.kx-barlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kx-barlist__top {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
  margin-bottom: 6px;
}
.kx-barlist__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  overflow: hidden;
}
.kx-barlist__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary-600);
}

/* ══════════════════════════════════════════════════════════
 * 공용 상세 뷰 — Nifty blog(blog-apps/blog) 계보
 * 상세/기사형 화면(옥션·검수·행사·전시 상세 등)의 히어로·메타·본문·사이드바를 통일한다.
 * 신규 색 토큰 0 — 기존 --color-*·--space-*·--fs-*·--shadow-* 만 재사용.
 * 구조: __hero(브레드크럼+제목+메타/상태배지) → __grid(main + sidebar) → __section(본문 리듬).
 * 기존 work 모듈의 .kx-detail(마스터-디테일 패널)과 이름 충돌 회피를 위해 .kx-detailview 네임스페이스 사용.
 * ══════════════════════════════════════════════════════════ */
.kx-detailview {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* 히어로 — blog 기사 헤더(브레드크럼·제목·메타·상태) */
.kx-detailview__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.kx-detailview__crumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  flex-wrap: wrap;
}
.kx-detailview__crumb button,
.kx-detailview__crumb a {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-neutral-500);
  font-size: inherit;
  cursor: pointer;
}
.kx-detailview__crumb button:hover,
.kx-detailview__crumb a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}
.kx-detailview__crumb-cur {
  color: var(--color-neutral-700);
  font-weight: var(--fw-semibold);
}
.kx-detailview__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.kx-detailview__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
}
.kx-detailview__hero-aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.kx-detailview__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-detailview__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* 메타 항목 사이 중간점 구분 */
.kx-detailview__meta-item + .kx-detailview__meta-item::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--color-neutral-200);
}
.kx-detailview__meta-label {
  color: var(--color-neutral-500);
}
.kx-detailview__meta-value {
  color: var(--color-neutral-700);
  font-weight: var(--fw-semibold);
}

/* 상태 배지(작성·기간·상태) — Nifty contextual pill */
.kx-detailview__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  white-space: nowrap;
}
.kx-detailview__badge--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.kx-detailview__badge--warn {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.kx-detailview__badge--danger {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.kx-detailview__badge--info {
  background: var(--color-primary-050);
  color: var(--color-primary-700);
}

/* 본문 그리드 — 메인 콘텐츠 + 우측 사이드바(관련정보·CTA) */
.kx-detailview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1080px) {
  .kx-detailview__grid {
    grid-template-columns: 1fr;
  }
}
.kx-detailview__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
.kx-detailview__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-5);
}
@media (max-width: 1080px) {
  .kx-detailview__sidebar {
    position: static;
  }
}

/* 섹션 — 본문 리듬(제목 구분선 + 리치 프로즈) */
.kx-detailview__section {
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.kx-detailview__section-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
}
.kx-detailview__prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-neutral-700);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 성과 배지 */
.kx-grade {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.kx-grade--excellent {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.kx-grade--good {
  background: var(--color-primary-050);
  color: var(--color-primary-700);
}
.kx-grade--fair {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.kx-grade--review {
  background: var(--color-error-bg);
  color: var(--color-error);
}
