/* ========================================
   source-maker.css
   소스메이커 — Flow 썸네일 도구용 소스 생성기 페이지
   색상/간격은 common.css 의 :root 변수를 사용한다
   ======================================== */

/* 폭·좌우 패딩은 헤더와 같은 토큰 (옛 1180/16 은 헤더 1200/20 과 어긋났다) */
.sm-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--container-pad) var(--spacing-2xl);
}

/* ── 히어로 ───────────────────────────── */
/* 🔴 옛 보라 그라데 위 흰 글씨였다. 밝은 바탕에서는 제목이 통째로 안 보인다.
   opacity 로 흐리게 만들던 방식도 폐기 — 농도는 색 단계로 표현한다. */
.sm-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

.sm-hero-title {
  font-size: var(--font-2xl);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* 부연 카피 — 우측 정렬. 좁은 화면에서는 아래로 떨어지며 좌측 정렬로 돌아간다 */
.sm-hero-copy {
  text-align: right;
}

.sm-hero-desc {
  font-size: var(--font-sm);
  color: var(--ink-500);
  margin: 0;
}

.sm-hero-note {
  font-size: var(--font-xs);
  color: var(--ink-400);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .sm-hero-copy { text-align: left; }
}

/*
  🔴 display 를 지정한 요소는 [hidden] 을 이겨 버린다.
     (실제로 .sm-file-row 가 flex 라 hidden 인데도 보였다)
     이 페이지에서 hidden 은 항상 숨김이 되도록 못박는다.
*/
.sm-page [hidden] { display: none !important; }

/* ── 단계 카드 ────────────────────────── */
/* 🔴 이 카드는 그림자로만 경계를 만들고 있었다. 바탕이 순백이 되면서 그림자를
   얕게 줄이자 테두리가 통째로 사라져 보였다 → 테두리를 명시한다. */
.sm-step,
.sm-spec {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-300);
  box-shadow: none;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.sm-step-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.sm-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--primary-color);
  color: var(--text-inverse);
  font-size: var(--font-sm);
  flex-shrink: 0;
}

.sm-help {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.sm-help code {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.sm-url-note {
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}

/* ── 탭 ───────────────────────────────── */
.sm-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: var(--spacing-md);
}

.sm-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--spacing-sm) var(--spacing-md);
  font: inherit;
  font-size: var(--font-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sm-tab:hover { color: var(--text-primary); }

.sm-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 700;
}

.sm-tab-panel { display: none; }
.sm-tab-panel.active { display: block; }

/* ── 붙여넣기 ─────────────────────────── */
.sm-textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  line-height: 1.5;
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  resize: vertical;
  margin-bottom: var(--spacing-sm);
}

.sm-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* ── 드롭 영역 ────────────────────────── */
.sm-drop {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sm-drop.is-over {
  border-color: var(--primary-color);
  background: var(--gray-50);
}

.sm-drop-icon {
  font-size: var(--font-3xl);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.sm-drop-text {
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.sm-drop-sub {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

/*
  드래그가 주 동선이고 [파일 선택] 은 보조다 — 크기를 낮춰 균형을 맞춘다.
  (common.css 의 .btn 기본 크기를 이 안에서만 줄인다)
*/
.sm-drop-btn {
  margin-top: var(--spacing-md);
  padding: 5px 12px;
  font-size: var(--font-xs);
  font-weight: 400;
}

/* ── 한 줄 드롭존 (엑셀) ──────────────── */
.sm-drop-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /* 세로만 약간 키운다 — 한 줄짜리라 기본 여백으론 눌려 보였다 */
  padding: 1.25rem var(--spacing-md);
  text-align: left;
}

.sm-drop-row .sm-drop-icon {
  font-size: var(--font-xl);
  margin-bottom: 0;
}

.sm-drop-row .sm-drop-text { font-size: var(--font-sm); }
.sm-drop-row .sm-drop-btn { margin-top: 0; flex-shrink: 0; }

/* 엑셀 탭 상태 줄 — 표에 몇 행 들어갔는지 / 무슨 열이 비었는지 */
.sm-excel-note {
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: #fdf3e7;
  color: #8a5116;
}

.sm-excel-note.is-ok {
  background: #e6f2ea;
  color: #1c6b40;
}

/* ── 엑셀 자동 매핑 ───────────────────── */
.sm-mapping {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}

.sm-mapping-head {
  font-weight: 700;
  font-size: var(--font-sm);
  margin-bottom: 2px;
}

.sm-mapping-guide {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

/* ── 역할별 색 (지정 상태를 한눈에) ──────
   🔴 세 열을 **구분**하는 것이 목적이므로 색 자체는 유지한다 (무채색으로 만들면 기능이 준다).
   다만 옛 파랑·보라·청록은 채도가 높아 웜 팔레트 위에서 튀었다 → 톤을 낮춰 앉힌다.
   상품코드만 브랜드 오렌지 — 셋 중 가장 중요한 필수 열이다. */
:root {
  --role-code: #c25a38;   /* 오렌지 — 상품코드 (필수) */
  --role-name: #5b6bb5;   /* 차분한 남보라 — 상품명 */
  --role-url:  #4a8a86;   /* 차분한 청록 — 이미지URL(선택) */
}

/* ── 지정 현황 요약 ───────────────────── */
.sm-mapping-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.sm-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-300);
  background: var(--bg-surface);
}

.sm-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  flex-shrink: 0;
}

.sm-legend-chip.sm-role-code.is-on { border-color: var(--role-code); }
.sm-legend-chip.sm-role-name.is-on { border-color: var(--role-name); }
.sm-legend-chip.sm-role-url.is-on  { border-color: var(--role-url); }
.sm-legend-chip.sm-role-code.is-on .sm-legend-dot { background: var(--role-code); }
.sm-legend-chip.sm-role-name.is-on .sm-legend-dot { background: var(--role-name); }
.sm-legend-chip.sm-role-url.is-on  .sm-legend-dot { background: var(--role-url); }

.sm-legend-label { font-weight: 700; color: var(--text-secondary); }
.sm-legend-val { color: var(--text-muted); }

/* 필수인데 아직 안 고른 것은 확실히 눈에 띄어야 한다 */
.sm-legend-chip.is-off:not(.sm-role-url) {
  border-color: var(--error-color);
  background: #fdf0ef;
}

.sm-legend-chip.is-off:not(.sm-role-url) .sm-legend-val {
  color: var(--error-color);
  font-weight: 700;
}

.sm-legend-opt {
  color: var(--text-muted);
  font-size: 0.9em;
}

/* ── 열 지정 표 ───────────────────────── */
.sm-mapping-preview {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.sm-map-table {
  border-collapse: collapse;
  font-size: var(--font-xs);
  width: 100%;
}

.sm-map-table th,
.sm-map-table td {
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 4px 6px;
  text-align: left;
  max-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-map-table th:last-child,
.sm-map-table td:last-child { border-right: none; }

.sm-map-pick { background: var(--gray-50); padding: 5px 6px; }

.sm-map-select {
  width: 100%;
  min-width: 5rem;
  font: inherit;
  font-size: var(--font-xs);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
}

.sm-map-select.sm-role-code,
.sm-map-select.sm-role-name,
.sm-map-select.sm-role-url { font-weight: 700; color: var(--text-inverse); }

.sm-map-select.sm-role-code { background: var(--role-code); border-color: var(--role-code); }
.sm-map-select.sm-role-name { background: var(--role-name); border-color: var(--role-name); }
.sm-map-select.sm-role-url  { background: var(--role-url);  border-color: var(--role-url); }

/* 엑셀 원래 헤더 줄 */
.sm-map-head {
  background: var(--gray-100);
  color: var(--text-secondary);
  font-weight: 700;
}

.sm-map-head.sm-role-code { color: var(--role-code); }
.sm-map-head.sm-role-name { color: var(--role-name); }
.sm-map-head.sm-role-url  { color: var(--role-url); }

/* 지정된 열은 값까지 옅게 칠해 어느 열이 쓰이는지 바로 보인다 */
.sm-map-table td.sm-role-code { background: #fdf4f0; }
.sm-map-table td.sm-role-name { background: #f2f3f9; }
.sm-map-table td.sm-role-url  { background: #eef5f4; }

.sm-map-more {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 4px 8px;
}

/* ── 매칭 확인 표 ─────────────────────── */
.sm-table-wrap { overflow-x: auto; }

.sm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.sm-table th,
.sm-table td {
  border-bottom: 1px solid var(--gray-200);
  padding: var(--spacing-sm);
  text-align: left;
  vertical-align: middle;
}

.sm-table th {
  background: var(--gray-50);
  color: var(--text-secondary);
  font-weight: 700;
  white-space: nowrap;
}

.sm-table tr.is-missing { background: #fdf6e3; }

.sm-col-thumb { width: 4.5rem; }
.sm-col-code { width: 8rem; white-space: nowrap; }
.sm-col-state { width: 6rem; }
.sm-col-act { width: 2.5rem; }

/* 행 빼기 — 평소엔 흐리게, hover 시 또렷하게 */
.sm-row-del {
  border: 0;
  background: none;
  color: var(--gray-400);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.sm-row-del:hover {
  color: var(--error-color);
  background: var(--gray-100);
}

.sm-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  display: block;
}

.sm-thumb-none {
  display: inline-block;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.sm-badge {
  display: inline-block;
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.sm-badge-ok { background: #dcf0e4; color: #1c6b40; }
.sm-badge-order { background: var(--gray-100); color: var(--text-secondary); }
.sm-badge-miss { background: #fadfdd; color: #a33a33; }

/* ── 생성 / 진행 / 결과 ───────────────── */
.sm-generate { font-size: var(--font-base); }

.sm-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.sm-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.sm-progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary-color);
  transition: width var(--transition-fast);
}

.sm-progress-text {
  font-size: var(--font-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.sm-result {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--gray-200);
}

.sm-result-msg {
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.sm-result-tip,
.sm-result-cta {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.sm-result-cta { margin-top: var(--spacing-sm); }
.sm-result-cta a { color: var(--primary-color); font-weight: 700; }

/* ── 출력 규격 안내 ───────────────────── */
.sm-spec-title {
  font-size: var(--font-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.sm-spec-list {
  list-style: disc;
  padding-left: 1.25rem;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.sm-spec-list li { margin-bottom: var(--spacing-xs); }

.sm-spec-list code {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* ── 입력 2단 (데이터 7 : 이미지 3) ─────── */
.sm-input-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.sm-input-main { min-width: 0; }

.sm-input-side {
  min-width: 0;
  border-left: 1px solid var(--gray-200);
  padding-left: var(--spacing-lg);
}


/* ── 우측 이미지 패널 ─────────────────── */
.sm-drop-sm { padding: var(--spacing-lg) var(--spacing-md); }

.sm-drop-img {
  padding: var(--spacing-md) var(--spacing-sm);
}

.sm-drop-img .sm-drop-text { font-size: var(--font-sm); }
.sm-drop-img .sm-drop-btn { margin-top: var(--spacing-sm); }

.sm-img-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.sm-img-status.is-loaded {
  background: #dcf0e4;
  color: #1c6b40;
}

.sm-img-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--spacing-sm);
}

.sm-img-chip {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}

.sm-img-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.sm-img-clear {
  margin-top: var(--spacing-sm);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.sm-img-clear:hover { color: var(--text-primary); }

/* ── 매칭 확인 (접힘) ─────────────────── */
.sm-match-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sm-match-summary::-webkit-details-marker { display: none; }

.sm-match-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-xl);
  font-weight: 700;
  flex-shrink: 0;
}

.sm-match-brief {
  font-size: var(--font-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-match-brief.is-ok { color: var(--success-color); }
.sm-match-brief.is-warn { color: var(--warning-color); }

.sm-match-summary #dropMissingBtn { margin-left: auto; flex-shrink: 0; }
.sm-match-summary #dropMissingBtn + .sm-match-toggle { margin-left: 0; }

.sm-match-toggle {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--font-sm);
  color: var(--primary-color);
  white-space: nowrap;
}

.sm-match-toggle::after { content: '펼치기 ▾'; }
.sm-match[open] .sm-match-toggle::after { content: '접기 ▴'; }

.sm-match-help { margin: 0; }

/* 🔴 표 높이를 묶는다 — 수백 행이면 페이지가 끝없이 늘어나 아래 버튼이 안 보였다 */
.sm-match-table {
  max-height: 420px;
  overflow-y: auto;
  margin-top: var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

/* 스크롤해도 헤더는 남는다 */
.sm-match-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gray-50);
}

.sm-match-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.sm-btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-sm);
}

.sm-generate-note {
  font-size: var(--font-sm);
  color: var(--gray-500);
}

/* ── 단계 헤더 (제목 + 행수 + 되돌리기) ── */
.sm-step-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.sm-step-head .sm-step-title { margin-bottom: 0; }

.sm-row-count {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/*
  전체 초기화 — 옆의 ↺ 아이콘과 헷갈리지 않도록 아이콘이 아니라 텍스트로 둔다.
  (아이콘 두 개가 나란히 있으면 어느 쪽이 무슨 범위인지 구별이 안 된다)
*/
.sm-reset-all {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.sm-reset-all:hover { color: var(--error-color); }

.sm-reset {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sm-reset:hover:not(:disabled) {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 내용이 없을 때 눌리는 버튼이 보이면 그것도 소음이다 */
.sm-reset:disabled {
  opacity: 0.35;
  cursor: default;
}

/*
  전체 초기화가 떠 있으면 그쪽이 우측 정렬을 맡고 ↺ 는 바로 옆에 붙는다.
  🔴 .sm-reset 정의보다 뒤에 와야 margin-left:auto 를 덮는다.
*/
.sm-step-head .sm-reset-all:not([hidden]) ~ .sm-reset {
  margin-left: var(--spacing-sm);
}

/* ── 엑셀형 입력 그리드 ───────────────── */
.sm-grid-wrap {
  /* 🔴 높이 고정 + 내부 스크롤. 500행을 넣어도 페이지가 늘어나지 않는다 */
  max-height: 400px;
  overflow: auto;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
}

.sm-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-sm);
  table-layout: fixed;
}

.sm-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gray-100);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-300);
  white-space: nowrap;
}

.sm-grid td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  vertical-align: top;
}

/* 코드/상품명만 줄바꿈. URL 은 아래에서 한 줄 말줄임으로 따로 잡는다 */
td.sm-g-code,
td.sm-g-name { overflow-wrap: anywhere; }

.sm-grid td:last-child { border-right: none; }

.sm-grid td[contenteditable]:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  background: var(--bg-surface);
}

/* 열 너비 — 상품코드는 좁게, 상품명은 넓게 */
.sm-g-no {
  position: relative;
  width: 2.8rem;
  text-align: right;
  color: var(--text-muted);
  background: var(--gray-50);
  user-select: none;
  font-size: var(--font-xs);
}

/* 행 삭제 — 평소엔 번호만, 마우스를 올리면 번호 자리에 [−] 가 나온다 */
.sm-g-del {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  border: none;
  background: var(--gray-100);
  color: var(--error-color);
  font-size: var(--font-base);
  line-height: 1;
  cursor: pointer;
}

.sm-grid tr:hover .sm-g-del { display: block; }
.sm-grid tr:hover .sm-g-num { visibility: hidden; }
.sm-g-del:hover { background: #fadfdd; }

.sm-g-code { width: 7rem; }
.sm-g-url { width: 11rem; }

/* URL 은 길어서 그대로 두면 행 높이를 다 잡아먹는다 — 한 줄 말줄임 + title 툴팁 */
td.sm-g-url {
  color: var(--text-muted);
  font-size: var(--font-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 편집 중에는 전체가 보여야 고칠 수 있다 */
td.sm-g-url:focus {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}

/* ── 셀 다중선택 (드래그로 범위 잡고 Delete 로 비우기) ── */
.sm-grid td.is-sel {
  background: #fae8df;
  box-shadow: inset 0 0 0 1px #e08a66;
}

.sm-grid.is-selecting { user-select: none; }
.sm-grid.is-selecting td { cursor: cell; }


.sm-g-opt {
  font-weight: 400;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.sm-grid-note {
  font-size: var(--font-xs);
  margin-top: var(--spacing-xs);
  padding: 6px 10px;
  border-radius: var(--radius-md);
}

.sm-grid-note.is-warn { background: #fdf3e7; color: #8a5116; }

/* ── 실행 버튼 줄 ─────────────────────── */
.sm-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

/* 데이터 읽기 — 이 페이지의 주 동작이므로 primary(검정) 를 쓴다.
   🔴 초록이었는데 팔레트에 없는 색이라 혼자 튀었다 (색 위계: 검정 CTA > 오렌지 액센트). */
.sm-btn-read {
  background: var(--ink-900);
  color: var(--text-inverse);
  border: none;
}

.sm-btn-read:hover:not(:disabled) { filter: brightness(0.93); }
.sm-btn-read:disabled { opacity: 0.5; cursor: default; }

/* ── 확장 안내 (이미지 패드 아래) ─────── */
.sm-ext {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}

.sm-ext-title {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.sm-ext-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.sm-ext-cta {
  display: inline-block;
  font-size: var(--font-xs);
  padding: 5px 12px;
}

/* ── 모바일 ───────────────────────────── */
@media (max-width: 640px) {
  .sm-hero-title { font-size: var(--font-xl); }
  .sm-step,
  .sm-spec { padding: var(--spacing-md); }
  .sm-col-name { min-width: 12rem; }
}

/* 좁은 화면에서는 2단을 세로로 — 고정 px 폭을 쓰지 않는다 */
@media (max-width: 900px) {
  .sm-input-grid { grid-template-columns: 1fr; }
  .sm-input-side {
    border-left: none;
    border-top: 1px solid var(--gray-200);
    padding-left: 0;
    padding-top: var(--spacing-lg);
  }
  .sm-match-summary { flex-wrap: wrap; }
  .sm-match-toggle { margin-left: 0; }
}