/* tool-sheet.css — «도구 모달» 공용 틀 (`T-316` · `D-146` · 설계 `docs/도구모달_설계_20260923.md` §3-1)
 *
 * ★무엇인가: 반자동 작업대에서 썸네일 메이커 · 쿠팡 숏폼 · 특수 페이지를 **화면 거의 전체를 덮는 큰 창**으로
 *   연다. 닫으면 보던 자리 그대로 돌아온다(페이지 이동이 아니다). 머리줄(도구 이름 · 대상 상품 · 닫기)은
 *   같고 **폭만 도구별로** 다르다 — 넓게(`.is-wide` 1120) / 중간(`.is-mid` 760).
 *
 * ★★두 앱이 같이 싣는 **파일 하나**다(메인 `/` · 작업대 `/fast`). 그래서 두 앱 어느 규칙과도 안 겹치는
 *   자기 클래스(`.tool-sheet*`·`.ts-*`)로만 그린다(`T-317` 상단바 공용화에서 배운 것).
 *
 * ★★작업대 함정 — `fast.css` 의 `.btn`(파랑 채움)은 **레이어 밖**이고 메인 `app.css` 는 `layer(legacy)` 라서,
 *   메인 부품을 작업대에 들이면 `.btn-secondary`·`.btn-ghost` 가 **전부 파랑 채움으로 뒤집힌다**
 *   (레이어 밖 규칙은 구체도와 상관없이 레이어 안 규칙을 이긴다). 그래서 **틀 안에서만** 메인 값으로
 *   되돌린다 — 메인에서는 같은 값을 다시 적는 것이라 아무것도 안 바뀐다.
 * ★색·반경 = 토큰만(DESIGN.md §11-L). 새 hex·px 를 여기서 만들지 않는다.
 */

/* 바탕 — 기존 `.modal-overlay`(z-index 50 · 반투명 scrim · 바깥 클릭 = 닫기)를 그대로 쓰고 배치만 바꾼다. */
.modal-overlay.tool-sheet-backdrop {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
  background: rgba(15, 23, 42, 0.55);
}

/* 창 — 위아래 여백만 두고 거의 전체 높이. 폭은 도구별 토큰.
   ★선택자를 `.tool-sheet-backdrop > .tool-sheet` 로 둔다 — 메인 `app.css` 의 `.modal.modal-thumb`(폭 95%)
     같은 두 단 선택자와 구체도가 같아야 뒤에 실린 이 파일이 이긴다(메인은 레이어가 없다). */
.tool-sheet-backdrop > .tool-sheet {
  --ts-w: 1120px;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--ts-w));
  max-width: none;
  height: 100%;
  max-height: none;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.tool-sheet-backdrop > .tool-sheet.is-wide { --ts-w: 1120px; }
.tool-sheet-backdrop > .tool-sheet.is-mid  { --ts-w: 760px; }

/* 본문만 스크롤 — 머리줄(닫기)은 늘 보인다. */
.tool-sheet > .modal-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* 머리줄의 «대상 상품» — 바꿀 수 없다는 뜻으로 칩 모양(누르는 것이 아니다). */
.tool-sheet .ts-target {
  display: inline-block;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-extrabold);
  word-break: keep-all;
}

/* ── 버튼 되돌리기(작업대에서 뒤집히는 것만) ─────────────────────────────── */
.tool-sheet .btn.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.tool-sheet .btn.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.tool-sheet .btn.btn-secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.tool-sheet .btn.btn-secondary:hover:not(:disabled) {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tool-sheet .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}
.tool-sheet .btn.btn-ghost:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-primary);
}

/* 대표 표시(히스토리 카드) — 완료·확정은 초록(DESIGN.md «완료는 초록»). */
.tool-sheet .ts-rep-badge,
.ts-rep-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

/* ── 머리줄 — 이름 · 대상 · (오른쪽 끝) 닫기 ──────────────────────────────── */
.tool-sheet .modal-head { justify-content: flex-start; gap: var(--space-4); }
.tool-sheet .modal-head .modal-head-actions { margin-left: auto; }

/* ── 도구 창 공용 조각(🎬 쿠팡 숏폼이 처음 쓴다) ──────────────────────────── */
.tool-sheet .ts-help {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  word-break: keep-all;
}
/* 버튼 하나 + 설명 한 줄(➕ 다른 셀러 «1688 주소에서 그림 가져오기» · `T-332` E #2) — 좁으면 설명이 아래로 내려간다. */
.tool-sheet .ts-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.tool-sheet .ts-row > .btn { flex: 0 0 auto; }
.tool-sheet .ts-row > .ts-help { flex: 1 1 16rem; min-width: 0; margin: 0; }
.tool-sheet .ts-size-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.tool-sheet .ts-size-row .field-group { flex: 1 1 0; min-width: 0; }
.tool-sheet .ts-size-out {
  margin-bottom: var(--space-4);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* 영상 미리보기 — 쇼츠(세로)가 기본이라 세로 칸. 가운데 · 폭 제한. */
.tool-sheet .ts-video-frame {
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 9 / 16;
  margin: 0 auto var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-input);
  overflow: hidden;
}
.tool-sheet .ts-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.tool-sheet .ts-video-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  word-break: keep-all;
}
.tool-sheet .ts-status { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); word-break: keep-all; }
.tool-sheet .ts-status.is-warn { color: var(--color-danger); }
.tool-sheet .ts-foot {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── 🧩 특수 페이지 창(`T-316` ③) — 왼쪽 = 만들기 · 오른쪽 = 이 상품 서랍 ─────────────── */
.tool-sheet .ts-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 760px) { .tool-sheet .ts-two-col { grid-template-columns: minmax(0, 1fr); } }
.tool-sheet .ts-sub { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: var(--font-bold); }
/* 진짜 퍼센트를 모른다 — 움직이는 줄만 보인다(지어낸 숫자 금지 · I-2ag). */
.tool-sheet .ts-progress {
  position: relative;
  height: var(--space-1);
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-input);
  overflow: hidden;
}
.tool-sheet .ts-progress > span {
  position: absolute; inset: 0 auto 0 0;
  width: 30%;
  border-radius: inherit;
  background: var(--color-primary);
  animation: ts-progress-slide 1.4s ease-in-out infinite;
}
@keyframes ts-progress-slide { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .tool-sheet .ts-progress > span { animation: none; width: 100%; opacity: .5; } }
.tool-sheet .ts-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}
.tool-sheet .ts-page {
  position: relative;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-input);
}
.tool-sheet .ts-page img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: contain; border-radius: var(--radius-sm); background: var(--color-bg-card);
}
.tool-sheet .ts-page figcaption {
  margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-secondary); word-break: keep-all;
}
.tool-sheet .ts-page [data-sps="del"] { position: absolute; top: var(--space-1); right: var(--space-1); }

/* ── 🧩 특수 페이지 — 약속 칩 · 참고 그림(`T-323`) ───────────────────────────────────── */
.tool-sheet .ts-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.tool-sheet .ts-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  word-break: keep-all;
}
.tool-sheet .ts-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tool-sheet .ts-ref {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  word-break: keep-all;
}
.tool-sheet .ts-ref img {
  flex: 0 0 auto;
  width: 5rem;
  max-height: 8rem;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── 📚 결과 버전 창(`T-349` ⑰) — 한 줄 = 작은 그림 · 이름·언제·장수 · 불러오기/이름/지우기 ─────── */
.tool-sheet .ts-ver-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.tool-sheet .ts-ver-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-input);
}
.tool-sheet .ts-ver-row.is-active { border-color: var(--color-success); }
.tool-sheet .ts-ver-thumb {
  flex: 0 0 auto;
  width: 3rem; height: 4rem;
  object-fit: cover; object-position: top;
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
}
.tool-sheet .ts-ver-name { flex: 1 1 auto; min-width: 0; word-break: keep-all; }
.tool-sheet .ts-ver-name small { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); }
.tool-sheet .ts-ver-acts { display: flex; flex: 0 0 auto; gap: var(--space-1); }

/* 옛 도구 페이지(재단사 · 쿠팡 숏폼 만들기)를 창 안에 그대로(`T-362` · 상단바 «창» 항목).
   본문 여백 없이 `<iframe>` 이 창을 꽉 채운다 — 그 페이지가 자기 여백을 갖고 있다. */
.tool-sheet.is-frame > .modal-body { padding: 0; overflow: hidden; display: flex; }
.tool-sheet .ts-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--color-bg-card); }