/* 카페24 상품관리 모듈 전용 스타일.
   전역(erp.css) 은 건드리지 않는다. 클래스 접두사: cf24-
   색상은 erp.css 의 :root 토큰을 재사용한다. */

/* .erp-page 는 flex column + overflow-y:auto 다. 자식의 flex-shrink 기본값이
   1 이라 내용이 화면보다 길면 카드가 눌려 잘리고(스크롤도 안 생긴다),
   시스템 화면의 [카페24 연결] 버튼처럼 카드 아래쪽이 사라진다.
   축소를 막아 넘친 만큼 .erp-page 가 스크롤하게 한다.
   이 파일은 카페24 템플릿에서만 로드되므로 다른 모듈에는 영향이 없다. */
.erp-page > * {
  flex-shrink: 0;
}

.cf24-card {
  margin-bottom: var(--sp-16, 16px);
}

.cf24-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-8, 8px);
  margin-bottom: var(--sp-12, 12px);
}

.cf24-card-head h3 {
  margin: 0;
  font-size: var(--text-heading, 18px);
  letter-spacing: -0.45px;
}

.cf24-muted {
  color: var(--color-midtone-gray, #737373);
  font-size: var(--text-caption, 12px);
}

.cf24-err {
  color: var(--color-callout-red, #c22b10);
}

.cf24-nowrap {
  white-space: nowrap;
}

/* 상태 배지 */
.cf24-badge-ok {
  background: var(--color-success-green, #10c22b);
  color: #fff;
}

.cf24-badge-off {
  background: var(--color-ghost-gray, #f2f2f2);
  color: var(--color-rich-black, #0a0a0a);
}

/* 안내/오류 배너 */
.cf24-flash {
  padding: var(--sp-10, 10px) var(--sp-12, 12px);
  border-radius: var(--r-lg, 10px);
  margin-bottom: var(--sp-12, 12px);
  font-size: var(--text-body, 14px);
}

.cf24-flash-ok {
  background: #eefaf0;
  border: 1px solid var(--color-success-green, #10c22b);
}

.cf24-flash-err {
  background: #fdefec;
  border: 1px solid var(--color-callout-red, #c22b10);
}

/* 키-값 표 */
.cf24-kv th {
  width: 180px;
  text-align: left;
  color: var(--color-midtone-gray, #737373);
  font-weight: 500;
  white-space: nowrap;
}

.cf24-actions {
  display: flex;
  gap: var(--sp-8, 8px);
  align-items: center;
  margin-top: var(--sp-12, 12px);
}

.cf24-warn {
  color: var(--color-callout-red, #c22b10);
  font-size: var(--text-caption, 12px);
  font-weight: 500;
}

/* 검색 도구모음 / 페이지 이동 */
.cf24-toolbar {
  display: flex;
  gap: var(--sp-8, 8px);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-12, 12px);
}

.cf24-search {
  flex: 0 1 320px;
  padding: var(--sp-8, 8px) var(--sp-12, 12px);
  border: 1px solid var(--color-subtle-ash, #e5e5e5);
  border-radius: var(--r-lg, 10px);
  font-size: var(--text-body, 14px);
}

.cf24-pager {
  display: flex;
  gap: var(--sp-12, 12px);
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-16, 16px);
}

/* 상세설명 HTML 원문 */
.cf24-label {
  display: block;
  margin: var(--sp-16, 16px) 0 var(--sp-8, 8px);
  font-size: var(--text-caption, 12px);
  font-weight: 500;
  color: var(--color-midtone-gray, #737373);
}

.cf24-html {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-12, 12px);
  border: 1px solid var(--color-subtle-ash, #e5e5e5);
  border-radius: var(--r-lg, 10px);
  background: var(--color-ghost-gray, #f2f2f2);
  font-family: var(--font-geist-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}

/* 넓은 로그 표는 카드 안에서만 가로 스크롤 */
.cf24-scroll {
  overflow-x: auto;
}

.cf24-scroll code {
  font-family: var(--font-geist-mono, ui-monospace, monospace);
  font-size: 12px;
}

.cf24-empty {
  padding: var(--sp-24, 24px);
}

.cf24-empty h3 {
  margin: 0 0 var(--sp-8, 8px);
}