@charset "utf-8";

html,
body {
  margin: 0;
  min-width: 0;
  background: #fff;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-family: var(--krds-font-family-base, "Pretendard GOV", "Malgun Gothic", Arial, sans-serif);
  font-size: 16px;
}

button,
input,
select,
textarea {
  font: inherit;
}

:root {
  --bsk-cmp-header-height: 68px;
  --bsk-cmp-lnb-width: 288px;
  --bsk-cmp-divider-width: 14px;
}

.bsk-preview-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 24px;
  background: var(--krds-light-color-surface-primary-subtler, #ecf2fe);
  border-bottom: 1px solid var(--krds-light-color-border-primary-light, #d8e5fd);
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 13px;
}

.bsk-preview-pack-id {
  font-weight: 700;
  color: var(--krds-light-color-text-primary, #0b50d0);
}

.bsk-cmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--bsk-cmp-header-height);
  padding: 0 28px;
  border-bottom: 1px solid var(--krds-light-color-divider-gray, #d8d8d8);
  background: var(--krds-light-color-background-white, #fff);
  box-shadow: 0 1px 0 rgba(29, 29, 29, 0.06);
  box-sizing: border-box;
}

.bsk-cmp-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}

.bsk-cmp-header__logo {
  width: 132px;
  max-width: 38vw;
  height: auto;
}

.bsk-cmp-header__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bsk-cmp-header__title strong {
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 18px;
  line-height: 1.25;
}

.bsk-cmp-header__title span {
  color: var(--krds-light-color-text-subtle, #555);
  font-size: 13px;
}

.bsk-cmp-shell-content {
  margin-left: calc(var(--bsk-cmp-lnb-width) + var(--bsk-cmp-divider-width));
  min-width: 0;
  min-height: calc(100vh - var(--bsk-cmp-header-height));
  padding: 30px 40px 56px;
  background: #fff;
  box-sizing: border-box;
}

.bsk-cmp-shell-board {
  width: 100%;
  max-width: 1480px;
}

/* 섹션 바로가기(#앵커) 이동 시 sticky 헤더가 섹션 제목을 덮지 않도록 도착 위치를 보정합니다. */
.bsk-cmp-shell-board section[id] {
  scroll-margin-top: calc(var(--bsk-cmp-header-height) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.bsk-cmp-divider {
  position: fixed;
  top: var(--bsk-cmp-header-height);
  bottom: 0;
  left: var(--bsk-cmp-lnb-width);
  width: var(--bsk-cmp-divider-width);
  background: #fff;
  border-left: 0;
  border-right: 1px solid var(--krds-light-color-divider-gray, #d8d8d8);
  box-sizing: border-box;
}

.bsk-cmp-divider__thumb {
  display: block;
  width: 3px;
  height: 42px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: var(--krds-light-color-border-primary, #256ef4);
}

.bsk-cmp-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bsk-cmp-header__form {
  margin-left: auto;
}

.bsk-cmp-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: calc(100vh - 113px);
}

.bsk-cmp-lnb {
  position: fixed;
  top: var(--bsk-cmp-header-height);
  bottom: 0;
  left: 0;
  width: var(--bsk-cmp-lnb-width);
  padding: 22px 16px 28px;
  overflow-y: auto;
  border-right: 1px solid var(--krds-light-color-divider-gray, #d8d8d8);
  background: #f7f8fa;
  box-sizing: border-box;
}

.bsk-cmp-menu-section {
  margin: 0 0 22px;
}

.bsk-cmp-menu-section h2 {
  margin: 0 0 8px;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 15px;
  font-weight: 700;
}

.bsk-cmp-menu-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsk-cmp-menu-section li {
  margin: 2px 0;
}

.bsk-cmp-menu-section a,
.bsk-cmp-menu-section span {
  display: block;
  padding: 8px 10px;
  border-radius: var(--krds-radius-medium1, 4px);
  color: var(--krds-light-color-text-basic, #1d1d1d);
  line-height: 1.4;
  text-decoration: none;
}

.bsk-cmp-menu-section a:hover {
  background: #eef3fb;
  color: #0b50d0;
}

.bsk-cmp-menu-section .active {
  background: var(--krds-light-color-action-primary-selected, #ecf2fe);
  color: var(--krds-light-color-text-primary, #0b50d0);
  font-weight: 700;
}

.bsk-cmp-content {
  min-width: 0;
  padding: 28px 32px 56px;
  background: var(--krds-light-color-background-white, #fff);
}

.bsk-cmp-board {
  width: 100%;
  max-width: 1480px;
}

.bsk-cmp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  color: var(--krds-light-color-text-subtle, #555);
  font-size: 13px;
  list-style: none;
}

.bsk-cmp-breadcrumb li + li::before {
  content: ">";
  margin-right: 6px;
  color: var(--krds-light-color-text-disabled, #8a949e);
}

.bsk-cmp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.bsk-cmp-page-title {
  margin: 0;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.bsk-cmp-subtitle {
  margin: 8px 0 0;
  color: var(--krds-light-color-text-subtle, #555);
  font-size: 14px;
  line-height: 1.55;
}

.bsk-cmp-section {
  margin-top: 28px;
}

.bsk-cmp-section-title {
  margin: 0 0 12px;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 20px;
  font-weight: 700;
}

.bsk-cmp-detail-title {
  margin-top: 24px;
}

.bsk-cmp-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 16px 18px;
  border: 1px solid #d8e5fd;
  border-top: 3px solid var(--krds-light-color-border-primary, #256ef4);
  border-radius: 0 0 4px 4px;
  background: #f3f7ff;
}

/* common.js(initBskSearchFields)가 라벨+입력을 한 단위로 묶어줍니다.
   필드 단위로 줄바꿈되므로 필드 수가 달라도 정렬이 어긋나지 않습니다. */
.bsk-cmp-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}

.bsk-cmp-search-field--compact {
  flex: 0 0 auto;
}

.bsk-cmp-search-field--wide {
  flex: 1 1 360px;
}

.bsk-cmp-search-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.bsk-cmp-search-control-row > input,
.bsk-cmp-search-control-row > select,
.bsk-cmp-search-control-row > textarea {
  flex: 1 1 auto;
  min-width: 0;
}

.bsk-cmp-search-note {
  flex: 1 1 100%;
  color: #344054;
  line-height: 1.5;
}

.bsk-cmp-search-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.bsk-cmp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bsk-cmp-field label {
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 13px;
  font-weight: 700;
}

.bsk-cmp-search input[type="hidden"] {
  display: none;
}

.bsk-cmp-search-field > label,
.bsk-cmp-search label {
  flex: 0 0 auto;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.bsk-cmp-search .bsk-cmp-button {
  min-width: 92px;
}

.bsk-cmp-input,
.bsk-cmp-select {
  /* width: 100%; */
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #c4ccd8;
  border-radius: var(--krds-radius-medium1, 4px);
  background: var(--krds-light-color-background-white, #fff);
  color: var(--krds-light-color-text-basic, #1d1d1d);
  box-sizing: border-box;
}

.bsk-cmp-search input:not([type="hidden"]),
.bsk-cmp-search select,
.bsk-cmp-search textarea,
.bsk-cmp-inline-form input:not([type="hidden"]),
.bsk-cmp-inline-form select,
.bsk-cmp-inline-form textarea {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #c4ccd8;
  border-radius: 4px;
  background: #fff;
  color: #1d1d1d;
  box-sizing: border-box;
}

.bsk-cmp-search textarea,
.bsk-cmp-inline-form textarea {
  height: auto;
  min-height: 76px;
  padding: 10px 11px;
}

select.bsk-ai-model-select,
.bsk-cmp-search select.bsk-ai-model-select,
.bsk-cmp-inline-form select.bsk-ai-model-select {
  /* flex: 0 0 210px;
  width: 210px;
  min-width: 150px; */
  max-width: 100%;
}

@media (max-width: 720px) {
  select.bsk-ai-model-select,
  .bsk-cmp-search select.bsk-ai-model-select,
  .bsk-cmp-inline-form select.bsk-ai-model-select {
    flex-basis: 100%;
    width: 100%;
  }
}

.bsk-cmp-search input:focus,
.bsk-cmp-search select:focus,
.bsk-cmp-search textarea:focus,
.bsk-cmp-inline-form input:focus,
.bsk-cmp-inline-form select:focus,
.bsk-cmp-inline-form textarea:focus {
  border-color: #256ef4;
  outline: 2px solid rgba(37, 110, 244, 0.18);
  outline-offset: 1px;
}

.bsk-cmp-input[aria-invalid="true"] {
  border-color: var(--krds-light-color-input-border-error, #de3412);
}

.bsk-cmp-field-error {
  color: var(--krds-light-color-text-danger, #bd2c0f);
  font-size: 12px;
}

.bsk-cmp-button,
.bsk-cmp-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--krds-light-color-button-secondary-border, #256ef4);
  border-radius: var(--krds-button--radius-medium, 4px);
  background: var(--krds-light-color-button-secondary-fill, #ecf2fe);
  color: var(--krds-light-color-text-primary, #0b50d0);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bsk-cmp-button:hover {
  border-color: #0b50d0;
  background: #d8e5fd;
  color: #083891;
}

.bsk-cmp-button--primary {
  border-color: var(--krds-light-color-button-primary-fill, #256ef4);
  background: var(--krds-light-color-button-primary-fill, #256ef4);
  color: var(--krds-light-color-text-inverse-static, #fff);
}

.bsk-cmp-button--secondary {
  border-color: var(--krds-light-color-button-secondary-border, #256ef4);
  background: var(--krds-light-color-button-secondary-fill, #ecf2fe);
  color: var(--krds-light-color-text-primary, #0b50d0);
}

.bsk-cmp-button--small {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.bsk-cmp-button--danger {
  border-color: var(--krds-light-color-border-danger, #de3412);
  background: var(--krds-light-color-surface-danger-subtler, #fdefec);
  color: var(--krds-light-color-text-danger, #bd2c0f);
}

.bsk-cmp-button[disabled],
.bsk-cmp-button.disabled {
  border-color: var(--krds-light-color-border-disabled, #c6c6c6);
  background: var(--krds-light-color-surface-disabled, #e8e8e8);
  color: var(--krds-light-color-text-disabled, #8a949e);
  cursor: not-allowed;
}

.bsk-cmp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}

.bsk-cmp-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bsk-cmp-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 18px;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3fb 100%);
  box-sizing: border-box;
}

.bsk-cmp-login-card {
  width: min(100%, 420px);
  padding: 34px 32px;
  border: 1px solid var(--krds-light-color-border-gray, #d8d8d8);
  border-top: 4px solid var(--krds-light-color-border-primary, #256ef4);
  border-radius: var(--krds-radius-medium2, 6px);
  background: var(--krds-light-color-background-white, #fff);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.bsk-cmp-login-card img {
  display: block;
  margin-bottom: 18px;
}

.bsk-cmp-login-logo {
  width: 190px;
}

.bsk-cmp-login-card h1 {
  margin: 0 0 8px;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 24px;
  line-height: 1.3;
}

.bsk-cmp-login-card p {
  margin: 0 0 22px;
  color: var(--krds-light-color-text-subtle, #555);
  line-height: 1.5;
}

.bsk-cmp-login-card form {
  display: grid;
  gap: 10px;
}

.bsk-cmp-login-card label {
  margin-top: 4px;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 14px;
  font-weight: 700;
}

.bsk-cmp-login-card input[type="text"],
.bsk-cmp-login-card input[type="password"],
.bsk-cmp-login-card input:not([type]) {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--krds-light-color-input-border, #717171);
  border-radius: var(--krds-radius-medium1, 4px);
  background: #fff;
  box-sizing: border-box;
}

.bsk-cmp-login-card .bsk-cmp-button {
  width: 100%;
  margin-top: 8px;
}

.bsk-cmp-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid #d8d8d8;
  border-top: 3px solid var(--krds-light-color-divider-primary, #256ef4);
  border-radius: 6px;
  background: #fff;
}

.bsk-cmp-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: auto;
}

.bsk-cmp-table caption {
  padding: 8px 12px;
  color: #555;
  font-weight: 700;
  text-align: left;
  background: #fff;
}

.bsk-cmp-table th,
.bsk-cmp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--krds-light-color-divider-gray, #d8d8d8);
  text-align: center;
  vertical-align: middle;
  line-height: 1.45;
  white-space: nowrap;
  word-break: keep-all;
}

.bsk-cmp-table th {
  background: var(--krds-light-color-surface-secondary-subtler, #f4f5f6);
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-weight: 700;
  white-space: nowrap;
}

.bsk-cmp-table td {
  color: #344054;
}

.bsk-cmp-table tbody tr:hover td {
  background: #f8fbff;
}

.bsk-cmp-table--detail {
  min-width: 0;
  table-layout: fixed;
}

.bsk-cmp-table--detail th[scope="row"] {
  width: 170px;
  text-align: left;
}

.bsk-cmp-table--detail td {
  text-align: left;
  white-space: normal;
}

.bsk-cmp-table--preline td {
  white-space: pre-wrap;
}

.bsk-cmp-table .bsk-cmp-cell-left {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.bsk-cmp-cell-md {
  min-width: 160px;
}

.bsk-cmp-cell-lg {
  min-width: 220px;
}

/* 버튼·폼이 들어있는 관리(액션) 셀은 버튼이 자연스럽게 줄바꿈되도록 허용합니다.
   (데이터 셀은 기본 nowrap 유지 → 날짜·ID·상태값이 불필요하게 개행되지 않음) */
.bsk-cmp-table td:has(.bsk-cmp-button),
.bsk-cmp-table td:has(form) {
  white-space: normal;
}

/* 관리 셀 안의 버튼·링크 간격을 일정하게 맞춥니다. */
.bsk-cmp-table td > .bsk-cmp-button,
.bsk-cmp-table td > a.bsk-cmp-button {
  margin: 3px 2px;
  vertical-align: middle;
}

/* 관리(액션) 열 오른쪽 고정 — 가로 스크롤 시에도 버튼이 항상 노출됩니다.
   common.js가 마지막 열이 관리/작업/처리/상세인 표에만 클래스를 붙이므로,
   이 규칙은 그 표에만 적용되어 다른 화면 레이아웃에는 영향이 없습니다. */
.bsk-cmp-table--sticky-action th:last-child,
.bsk-cmp-table--sticky-action td:last-child {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -6px 0 8px -8px rgba(29, 29, 29, 0.25);
}

.bsk-cmp-table--sticky-action thead th:last-child {
  z-index: 2;
  background: var(--krds-light-color-surface-secondary-subtler, #f4f5f6);
}

.bsk-cmp-table--sticky-action tbody td:last-child {
  z-index: 1;
}

.bsk-cmp-table--sticky-action tbody tr:hover td:last-child {
  background: #f8fbff;
}

.bsk-cmp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 4px 8px;
  border-radius: var(--krds-radius-max, 999px);
  background: var(--krds-light-color-surface-secondary-subtler, #f4f5f6);
  color: var(--krds-light-color-text-subtle, #555);
  font-size: 12px;
  font-weight: 700;
}

.bsk-cmp-badge--success {
  background: var(--krds-light-color-surface-success-subtler, #eaf6ec);
  color: var(--krds-light-color-text-success, #267337);
}

.bsk-cmp-badge--warning {
  background: var(--krds-light-color-surface-warning-subtler, #fff3db);
  color: var(--krds-light-color-text-warning, #8a5c00);
}

.bsk-cmp-badge--danger {
  background: var(--krds-light-color-surface-danger-subtler, #fdefec);
  color: var(--krds-light-color-text-danger, #bd2c0f);
}

.bsk-cmp-badge--info {
  background: var(--krds-light-color-surface-primary-subtler, #ecf2fe);
  color: var(--krds-light-color-text-primary, #0b50d0);
}

.bsk-cmp-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 18px;
  font-size: 13px;
}

.bsk-cmp-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--krds-light-color-border-primary, #256ef4);
  border-radius: 4px;
  background: var(--krds-light-color-element-primary, #256ef4);
  color: var(--krds-light-color-text-inverse-static, #fff);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.bsk-cmp-page-link.active {
  border-color: var(--krds-light-color-border-primary, #256ef4);
  background: var(--krds-light-color-element-primary, #256ef4);
  color: var(--krds-light-color-text-inverse-static, #fff);
  font-weight: 700;
}

/* hidden 속성은 항상 숨김으로 동작해야 한다. display 를 지정한 클래스(.bsk-cmp-alert 등)가
   [hidden] 의 기본 display:none 을 덮어써 빈 막대가 보이던 문제를 막는다. */
[hidden] {
  display: none !important;
}

.bsk-cmp-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--krds-light-color-border-primary-light, #d8e5fd);
  border-radius: var(--krds-radius-medium2, 4px);
  background: var(--krds-light-color-surface-primary-subtler, #ecf2fe);
  color: var(--krds-light-color-text-basic, #1d1d1d);
}

.bsk-cmp-alert--success {
  border-color: var(--krds-light-color-border-success-light, #d8eedd);
  background: var(--krds-light-color-surface-success-subtler, #eaf6ec);
}

.bsk-cmp-alert--warning {
  border-color: var(--krds-light-color-border-warning-light, #ffe0a3);
  background: var(--krds-light-color-surface-warning-subtler, #fff3db);
}

.bsk-cmp-alert--danger {
  border-color: var(--krds-light-color-border-danger-light, #fcdfd9);
  background: var(--krds-light-color-surface-danger-subtler, #fdefec);
}

.bsk-cmp-empty {
  margin-top: 16px;
  padding: 28px;
  border: 1px dashed var(--krds-light-color-border-gray, #d8d8d8);
  border-radius: var(--krds-radius-medium2, 4px);
  background: #fafbfc;
  color: var(--krds-light-color-text-subtle, #555);
  text-align: center;
}

.bsk-cmp-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.bsk-cmp-dashboard-card,
.bsk-cmp-form-box,
.bsk-cmp-list-box {
  margin-top: 16px;
  padding: 18px 20px 20px;
  border: 1px solid #d6dce5;
  border-radius: 6px;
  background: var(--krds-light-color-background-white, #fff);
  box-sizing: border-box;
}

.bsk-cmp-form-box h2,
.bsk-cmp-list-box h2 {
  margin: 0 0 12px;
  color: #1d1d1d;
  font-size: 15px;
  font-weight: 700;
}

.bsk-cmp-collection-runner__body {
  padding: 16px 18px;
  border: 1px solid #d8e5fd;
  border-top: 3px solid var(--krds-light-color-border-primary, #256ef4);
  border-radius: 0 0 4px 4px;
  background: #f3f7ff;
}

.bsk-cmp-collection-runner__note {
  margin: 0 0 14px;
  color: #344054;
  line-height: 1.5;
}

.bsk-cmp-collection-runner__mode {
  margin-bottom: 16px;
}

.bsk-cmp-choice-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.bsk-cmp-choice-inline .bsk-cmp-choice + .bsk-cmp-choice {
  margin-top: 0;
}

.bsk-cmp-source-panel {
  display: grid;
  gap: 0;
  padding: 16px;
  border: 1px solid #d8e5fd;
  border-radius: 4px;
  background: #fff;
}

.bsk-cmp-source-panel__group {
  min-width: 0;
}

.bsk-cmp-source-panel__group + .bsk-cmp-source-panel__group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e4ecfb;
}

.bsk-cmp-source-panel__title {
  margin: 0 0 10px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.bsk-cmp-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bsk-cmp-choice-group legend {
  margin: 0 0 8px;
  padding: 0;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.bsk-cmp-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: #1d1d1d;
  line-height: 1.45;
}

.bsk-cmp-choice + .bsk-cmp-choice {
  margin-top: 8px;
}

.bsk-cmp-choice input[type="radio"],
.bsk-cmp-choice input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.bsk-cmp-choice span {
  min-width: 0;
}

.bsk-cmp-choice strong,
.bsk-cmp-choice small {
  display: block;
}

.bsk-cmp-choice small {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
}

.bsk-cmp-choice:has(input:disabled) {
  color: #667085;
}

.bsk-cmp-choice:has(input:disabled) strong,
.bsk-cmp-choice:has(input:disabled) small {
  color: #667085;
}

.bsk-cmp-source-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  min-width: 0;
}

.bsk-cmp-source-choice-list__empty {
  color: #667085;
}

.bsk-cmp-collection-runner__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.bsk-cmp-collection-runner__actions .bsk-cmp-button {
  white-space: nowrap;
}

.bsk-cmp-dashboard-card strong {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--krds-light-color-text-primary, #0b50d0);
  font-size: 13px;
}

.bsk-cmp-dashboard-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.bsk-cmp-dashboard-card p {
  margin: 0;
  color: var(--krds-light-color-text-subtle, #555);
  line-height: 1.5;
}

/* Dashboard KPI tiles */
.bsk-cmp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.bsk-cmp-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid #d6dce5;
  border-left: 4px solid var(--krds-light-color-border-primary, #256ef4);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.bsk-cmp-stat:hover {
  border-color: #0b50d0;
  box-shadow: 0 6px 16px rgba(11, 80, 208, 0.1);
  transform: translateY(-1px);
}

.bsk-cmp-stat__label {
  color: var(--krds-light-color-text-subtle, #555);
  font-size: 13px;
  font-weight: 700;
}

.bsk-cmp-stat__value {
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.bsk-cmp-stat__value small {
  font-size: 14px;
  font-weight: 700;
  color: var(--krds-light-color-text-subtle, #555);
}

.bsk-cmp-stat__hint {
  color: var(--krds-light-color-text-subtle, #767676);
  font-size: 12px;
}

.bsk-cmp-stat--accent-success { border-left-color: var(--krds-light-color-text-success, #267337); }
.bsk-cmp-stat--accent-warning { border-left-color: var(--krds-light-color-text-warning, #8a5c00); }
.bsk-cmp-stat--accent-muted { border-left-color: #8a949e; }

@media (max-width: 960px) {
  .bsk-cmp-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 표 안의 인라인 폼(주로 삭제 버튼)은 좁게 인라인 배치합니다.
   수정 폼은 모달로 이동하므로 표에서는 버튼만 작게 보입니다.
   (모달 안에서는 아래 .bsk-cmp-crud-modal__body 규칙이 그리드로 재배치) */
.bsk-cmp-inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 3px 2px;
  vertical-align: middle;
}

.bsk-cmp-inline-form + .bsk-cmp-inline-form {
  margin-top: 3px;
}

.bsk-cmp-inline-form .bsk-cmp-button {
  width: auto;
  min-width: 64px;
}

.bsk-cmp-modal-preview {
  max-width: 460px;
  padding: 20px;
  border: 1px solid var(--krds-light-color-border-gray, #d8d8d8);
  border-radius: var(--krds-modal--wrap-radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bsk-cmp-modal-source {
  display: none;
}

.bsk-cmp-crud-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bsk-cmp-crud-modal.is-open {
  display: flex;
}

.bsk-cmp-crud-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.bsk-cmp-crud-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
}

.bsk-cmp-crud-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #d8d8d8;
  background: #f8fbff;
}

.bsk-cmp-crud-modal__title {
  margin: 0;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 18px;
  font-weight: 700;
}

.bsk-cmp-crud-modal__close {
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #c4ccd8;
  border-radius: 4px;
  background: #fff;
  color: #1d1d1d;
  font-size: 20px;
  cursor: pointer;
}

.bsk-cmp-crud-modal__body {
  padding: 20px;
}

.bsk-cmp-markdown-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bsk-cmp-markdown-modal.is-open {
  display: flex;
}

.bsk-cmp-markdown-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
}

.bsk-cmp-markdown-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.24);
}

.bsk-cmp-markdown-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #d8d8d8;
  background: #f8fbff;
}

.bsk-cmp-markdown-modal__title {
  margin: 0;
  color: var(--krds-light-color-text-basic, #1d1d1d);
  font-size: 18px;
  font-weight: 700;
}

.bsk-cmp-markdown-modal__close {
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #c4ccd8;
  border-radius: 4px;
  background: #fff;
  color: #1d1d1d;
  font-size: 20px;
  cursor: pointer;
}

.bsk-cmp-markdown-modal__body {
  min-height: 320px;
  padding: 26px 30px 36px;
  overflow: auto;
  color: #263238;
  line-height: 1.7;
}

/* Markdown 본문 블록 스타일은 모달 뷰어(.bsk-cmp-markdown-modal__body)와
   인라인 뷰어(.bsk-cmp-markdown-viewer, 예: AI 문의 답변)가 공용으로 사용합니다. */
.bsk-cmp-markdown-modal__body h1,
.bsk-cmp-markdown-modal__body h2,
.bsk-cmp-markdown-modal__body h3,
.bsk-cmp-markdown-modal__body h4,
.bsk-cmp-markdown-modal__body h5,
.bsk-cmp-markdown-modal__body h6,
.bsk-cmp-markdown-viewer h1,
.bsk-cmp-markdown-viewer h2,
.bsk-cmp-markdown-viewer h3,
.bsk-cmp-markdown-viewer h4,
.bsk-cmp-markdown-viewer h5,
.bsk-cmp-markdown-viewer h6 {
  margin: 1.4em 0 0.55em;
  color: #172b4d;
  line-height: 1.35;
}

.bsk-cmp-markdown-modal__body h1,
.bsk-cmp-markdown-viewer h1 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #d8e5fd;
  font-size: 28px;
}

.bsk-cmp-markdown-modal__body h2,
.bsk-cmp-markdown-viewer h2 {
  padding-bottom: 7px;
  border-bottom: 1px solid #d8d8d8;
  font-size: 22px;
}

.bsk-cmp-markdown-modal__body h3,
.bsk-cmp-markdown-viewer h3 {
  font-size: 18px;
}

.bsk-cmp-markdown-modal__body p,
.bsk-cmp-markdown-viewer p {
  margin: 0.65em 0;
}

.bsk-cmp-markdown-modal__body ul,
.bsk-cmp-markdown-viewer ul {
  margin: 0.6em 0 1em;
  padding-left: 24px;
}

.bsk-cmp-markdown-modal__body li + li,
.bsk-cmp-markdown-viewer li + li {
  margin-top: 5px;
}

.bsk-cmp-markdown-modal__body blockquote,
.bsk-cmp-markdown-viewer blockquote {
  margin: 1em 0;
  padding: 10px 14px;
  border-left: 4px solid #79a7f8;
  background: #f6f9ff;
  color: #475467;
}

.bsk-cmp-markdown-viewer__link {
  color: #0b50d0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bsk-cmp-markdown-viewer__metadata {
  margin: 0 0 20px;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  line-height: 1.55;
}

.bsk-cmp-markdown-viewer__table-wrap {
  margin: 1em 0;
  overflow-x: auto;
}

.bsk-cmp-markdown-viewer__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.bsk-cmp-markdown-viewer__table th,
.bsk-cmp-markdown-viewer__table td {
  min-width: 120px;
  padding: 9px 11px;
  border: 1px solid #d8dee8;
  text-align: left;
  vertical-align: top;
}

.bsk-cmp-markdown-viewer__table th {
  background: #f4f7fb;
  font-weight: 700;
}

.bsk-cmp-markdown-file-link {
  color: #0b50d0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 모달 헤더에 제목이 이미 있으므로, 폼 안의 중복 제목(h2)은 숨깁니다. */
.bsk-cmp-crud-modal__body .bsk-cmp-form-box > h2 {
  display: none;
}

.bsk-cmp-crud-modal__body .bsk-cmp-form-box,
.bsk-cmp-crud-modal__body .bsk-cmp-inline-form {
  margin: 0;
}

/* 신규 등록 버튼 툴바 (인라인 폼을 모달로 전환할 때 노출) */
.bsk-cmp-crud-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 10px;
}

/* 별도 페이지를 iframe으로 띄우는 수정 모달 (예: 관리자 사용자) */
.bsk-cmp-crud-modal__dialog--wide {
  width: min(1180px, 100%);
}

.bsk-cmp-crud-modal__body--frame {
  padding: 0;
}

.bsk-cmp-crud-modal__iframe {
  display: block;
  width: 100%;
  height: min(760px, calc(100vh - 132px));
  border: 0;
  background: #fff;
}

/* iframe 모달 안에서 열린 페이지는 공통 헤더·메뉴를 감추고 본문만 보여줍니다.
   common.js가 iframe 내부임을 감지해 클래스를 부여합니다. */
.bsk-cmp-embedded .bsk-cmp-header,
.bsk-cmp-embedded .bsk-cmp-lnb,
.bsk-cmp-embedded .bsk-cmp-divider,
.bsk-cmp-embedded .bsk-preview-banner {
  display: none !important;
}

.bsk-cmp-embedded .bsk-cmp-shell-content {
  margin-left: 0;
  min-height: 0;
  padding: 22px 24px 28px;
}

.bsk-cmp-crud-modal__body .bsk-cmp-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
}

.bsk-cmp-crud-modal__body .bsk-cmp-inline-form + .bsk-cmp-inline-form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 모달 안의 등록·수정 폼은 라벨을 입력 위에 두고(세로 정렬),
   textarea·파일 입력은 한 줄을 모두 차지하도록 해 정렬을 가지런히 합니다. */
.bsk-cmp-crud-modal__body .bsk-cmp-search {
  align-items: stretch;
  gap: 14px 16px;
}

.bsk-cmp-crud-modal__body .bsk-cmp-search-field {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex: 1 1 220px;
}

.bsk-cmp-crud-modal__body .bsk-cmp-search-field:has(textarea),
.bsk-cmp-crud-modal__body .bsk-cmp-search-field:has(input[type="file"]) {
  flex-basis: 100%;
}

.bsk-cmp-crud-modal__body .bsk-cmp-search-field > label {
  white-space: normal;
}

.bsk-cmp-company-section {
  margin-top: 18px;
}

.bsk-cmp-company-section .bsk-cmp-toolbar {
  align-items: flex-start;
}

.bsk-cmp-company-basic-table th[scope="row"] {
  width: 150px;
}

.bsk-cmp-company-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.bsk-cmp-file-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsk-cmp-file-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.bsk-cmp-file-list span {
  color: var(--krds-light-color-text-subtle, #555);
  font-size: 12px;
}

.bsk-cmp-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.bsk-cmp-action-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.bsk-cmp-action-form .bsk-cmp-input {
  flex: 1 1 160px;
}

/* 첨부 · 삭제 모달 패널 — 첨부 추가 / 기존 첨부 목록 / 레코드 삭제를 구분해 정리 */
.bsk-cmp-crud-modal__body .bsk-cmp-attach-panel {
  display: grid;
  gap: 12px;
  min-width: min(520px, 78vw);
}

.bsk-cmp-attach-panel .bsk-cmp-action-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.bsk-cmp-attach-panel > .bsk-cmp-action-form:first-child {
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.bsk-cmp-attach-panel > .bsk-cmp-action-form:first-child .bsk-cmp-input {
  flex: 1 1 180px;
  min-width: 0;
}

.bsk-cmp-attach-panel__files {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsk-cmp-attach-panel__files .bsk-cmp-action-form {
  justify-content: space-between;
}

.bsk-cmp-attach-panel__files span {
  flex: 1 1 auto;
  min-width: 0;
  color: #344054;
  word-break: break-all;
}

.bsk-cmp-attach-panel__danger {
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #f3d6cf;
}

.bsk-cmp-token-grid,
.bsk-cmp-catalog-grid,
.bsk-cmp-form-grid,
.bsk-cmp-alert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bsk-cmp-token {
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--krds-light-color-border-gray, #d8d8d8);
  border-radius: var(--krds-radius-medium2, 4px);
  background: var(--bsk-token-color);
  color: var(--bsk-token-text, var(--krds-light-color-text-basic, #1d1d1d));
  box-sizing: border-box;
}

.bsk-cmp-token--primary {
  --bsk-token-color: var(--krds-color-light-primary-50, #256ef4);
  --bsk-token-text: #fff;
}

.bsk-cmp-token--success {
  --bsk-token-color: var(--krds-color-light-success-50, #228738);
  --bsk-token-text: #fff;
}

.bsk-cmp-token--danger {
  --bsk-token-color: var(--krds-color-light-danger-50, #de3412);
  --bsk-token-text: #fff;
}

.bsk-cmp-token--warning {
  --bsk-token-color: var(--krds-color-light-warning-20, #ffc95c);
}

.bsk-cmp-token--text {
  --bsk-token-color: var(--krds-light-color-text-basic, #1d1d1d);
  --bsk-token-text: #fff;
}

.bsk-cmp-token--muted {
  --bsk-token-color: var(--krds-light-color-text-subtle, #555);
  --bsk-token-text: #fff;
}

.bsk-cmp-token--surface {
  --bsk-token-color: var(--krds-light-color-surface-secondary-subtler, #f4f5f6);
}

.bsk-cmp-token--card {
  --bsk-token-color: var(--krds-light-color-background-white, #fff);
}

.bsk-cmp-token strong,
.bsk-cmp-token span {
  display: block;
}

.bsk-cmp-token span {
  margin-top: 6px;
  font-size: 12px;
}

.bsk-cmp-type-sample {
  padding: 14px;
  border: 1px solid var(--krds-light-color-border-gray, #d8d8d8);
  border-radius: var(--krds-radius-medium2, 4px);
}

.bsk-cmp-type-sample h1,
.bsk-cmp-type-sample h2,
.bsk-cmp-type-sample h3,
.bsk-cmp-type-sample p {
  margin: 0 0 8px;
}

.bsk-cmp-type-sample small {
  color: var(--krds-light-color-text-subtle, #555);
}

.bsk-cmp-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--krds-light-color-text-subtle, #555);
}

.bsk-cmp-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--krds-light-color-border-primary-light, #d8e5fd);
  border-top-color: var(--krds-light-color-border-primary, #256ef4);
  border-radius: 50%;
}

.bsk-cmp-pagination {
  margin-top: 20px;
  color: #555;
}

.bsk-cmp-pagination nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bsk-cmp-pagination nav a,
.bsk-cmp-pagination nav span:not(.bsk-cmp-page-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}

.bsk-cmp-pagination nav a {
  color: #344054;
  border: 1px solid #d8d8d8;
}

.bsk-cmp-pagination nav a:hover {
  border-color: #256ef4;
  background: #eef3fb;
  color: #0b50d0;
}

.bsk-cmp-pagination nav span:not(.bsk-cmp-page-link) {
  color: #b0b8c1;
}

.bsk-cmp-empty {
  margin-top: 16px;
  background: #fafbfc;
}

@media (max-width: 1280px) {
  .bsk-cmp-search,
  .bsk-cmp-search--wrap {
    grid-template-columns: repeat(2, max-content minmax(160px, 1fr)) auto;
  }

  .bsk-cmp-source-choice-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .bsk-cmp-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .bsk-cmp-header__actions {
    justify-content: flex-start;
  }

  .bsk-cmp-layout {
    grid-template-columns: 1fr;
  }

  .bsk-cmp-lnb {
    border-right: 0;
    border-bottom: 1px solid var(--krds-light-color-divider-gray, #d8d8d8);
  }

  .bsk-cmp-menu-section ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .bsk-cmp-content {
    padding: 22px 18px 42px;
  }

  .bsk-cmp-shell-content {
    margin-left: 0;
    padding: 22px 18px 42px;
  }

  .bsk-cmp-lnb {
    position: static;
    width: auto;
  }

  .bsk-cmp-divider {
    display: none;
  }

  .bsk-cmp-page-head {
    flex-direction: column;
  }

  .bsk-cmp-search,
  .bsk-cmp-search--wrap,
  .bsk-cmp-collection-runner__grid,
  .bsk-cmp-token-grid,
  .bsk-cmp-catalog-grid,
  .bsk-cmp-form-grid,
  .bsk-cmp-alert-grid,
  .bsk-cmp-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .bsk-cmp-search label {
    min-width: 0;
  }

  .bsk-cmp-collection-runner__actions {
    justify-content: flex-start;
  }

  .bsk-cmp-table {
    min-width: 860px;
  }
}