/* ============================================================
   탁월한셀러 팀 작업공간 — 화면 스타일
   · 바닐라 CSS 한 장. 외부 폰트·CDN 없음(제로 의존성)
   · 색은 **상태**에만 쓴다: 잠금 노랑 / 막힘 빨강 / 진행 파랑 / 끝남 초록
   · 세 사람이 같은 화면을 보고 이야기하므로, 같은 뜻은 어디서나 같은 색·같은 문구다
   ============================================================ */
:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --line: #dfe3e8;
  --line-strong: #c7ccd4;
  --text: #1f2430;
  --muted: #646c7a;
  --navy: #2a3e7a;
  --gold: #e8a838;
  --ok: #1e8e3e;      --ok-bg: #e9f6ec;
  --warn: #8a6100;    --warn-bg: #fff6e0;
  --danger: #c02626;  --danger-bg: #fdecea;
  --info: #1559b0;    --info-bg: #e9f1fb;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
}
[hidden] { display: none !important; }

/* ── 연결 상태 띠 ── */
.tkw-banner {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
.tkw-banner[data-state="CONNECTING"] {
  border-bottom-color: var(--info);
  background: var(--info-bg);
  color: var(--info);
}

/* ── 로그인 ── */
.tkw-signin {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.tkw-signin-card {
  width: 100%; max-width: 400px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px; display: flex; flex-direction: column; gap: 8px;
}
.tkw-signin-card h1 { margin: 0; font-size: 19px; }
.tkw-signin-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.tkw-signin-card label { font-size: 13px; font-weight: 600; }
.tkw-signin-card input {
  padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font: inherit;
}
.tkw-signin-card button { margin-top: 12px; }

/* ── 전체 틀 ── */
.tkw-shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.tkw-sidebar {
  background: #1a2332; color: #eef1f6;
  display: flex; flex-direction: column; gap: 18px; padding: 18px 14px;
}
.tkw-brand { display: flex; align-items: center; gap: 10px; }
.tkw-brand-mark {
  width: 32px; height: 32px; border-radius: 8px; background: var(--gold); color: #1a2332;
  display: grid; place-items: center; font-weight: 800;
}
.tkw-brand div { display: flex; flex-direction: column; line-height: 1.25; }
.tkw-brand span:last-child { font-size: 11px; color: #aab4c6; }
.tkw-main-nav { display: flex; flex-direction: column; gap: 4px; }
.tkw-main-nav button {
  text-align: left; padding: 9px 11px; border: 0; border-radius: 7px;
  background: transparent; color: #dde3ee; font: inherit; cursor: pointer;
}
.tkw-main-nav button:hover { background: #26324a; }
.tkw-main-nav button[aria-current="page"] { background: var(--navy); color: #fff; font-weight: 700; }
.tkw-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.tkw-whoami { margin: 0; font-size: 12px; color: #aab4c6; white-space: pre-line; }
.tkw-text-button {
  border: 0; background: transparent; color: #9fb6e8; font: inherit;
  text-decoration: underline; cursor: pointer; padding: 0; text-align: left;
}

.tkw-workspace { padding: 20px 24px 56px; min-width: 0; }
.tkw-app-message {
  margin: 0 0 14px; padding: 9px 12px; border-radius: 8px;
  background: var(--info-bg); color: var(--info); border: 1px solid #bcd5f2;
}
.tkw-app-message[data-kind="error"] { background: var(--danger-bg); color: var(--danger); border-color: #f0bcb6; }
.tkw-app-message[data-kind="ok"] { background: var(--ok-bg); color: var(--ok); border-color: #bbe3c6; }

/* ── 화면 머리 ── */
.tkw-route-heading { margin-bottom: 16px; }
.tkw-route-heading h1 { margin: 2px 0 4px; font-size: 22px; }
.tkw-route-heading p { margin: 0; color: var(--muted); }
.tkw-eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy);
}

/* ── 단추 ── */
.tkw-button {
  padding: 8px 13px; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer;
}
.tkw-button:disabled { opacity: .5; cursor: not-allowed; }
.tkw-button-navy { background: var(--navy); color: #fff; }
.tkw-button-gold { background: var(--gold); color: #32240a; }
.tkw-button-outline { background: #fff; color: var(--text); border-color: var(--line-strong); }
.tkw-button-danger { background: #fff; color: var(--danger); border-color: #e7a9a2; }
.tkw-small-button {
  padding: 5px 9px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: #fff; font-family: inherit; cursor: pointer;
}

/* ── 홈 여섯 칸 ── */
.tkw-home-buckets {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tkw-bucket {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.tkw-bucket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tkw-bucket-head h2 { margin: 0; font-size: 14px; }
.tkw-bucket-count { font-size: 22px; font-weight: 800; color: var(--navy); }
.tkw-bucket[data-bucket="blocked"] .tkw-bucket-count { color: var(--danger); }
.tkw-bucket-hint { margin: 0; font-size: 12px; color: var(--muted); }
.tkw-bucket-list { display: flex; flex-direction: column; gap: 10px; }

/* ── 작업 카드 ── */
.tkw-card-list { display: flex; flex-direction: column; gap: 12px; }
.tkw-card {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.tkw-card[data-blocked="true"] { border-left-color: var(--danger); }
.tkw-card[data-locked="true"] { border-left-color: var(--warn); }
.tkw-card[data-stage="PUBLISHED"] { border-left-color: var(--ok); }
.tkw-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tkw-card-head h3 { margin: 0; font-size: 15px; }
.tkw-chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--info-bg); color: var(--info);
}
.tkw-chip[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); }
.tkw-chip[data-tone="danger"] { background: var(--danger-bg); color: var(--danger); }
.tkw-chip[data-tone="ok"] { background: var(--ok-bg); color: var(--ok); }
.tkw-card p { margin: 0; font-size: 13px; }
.tkw-card-next { color: var(--navy); font-weight: 600; }
.tkw-card-meta { color: var(--muted); }
.tkw-card-blocked { color: var(--danger); font-weight: 600; }
.tkw-card-locks { display: flex; flex-wrap: wrap; gap: 6px; }
.tkw-card-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.tkw-card-links a { color: var(--info); }
.tkw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tkw-empty { margin: 0; color: var(--muted); font-size: 13px; }

/* ── 소싱 ── */
.tkw-sourcing-grid { display: grid; gap: 16px; grid-template-columns: minmax(280px, 340px) 1fr; }
@media (max-width: 1100px) { .tkw-sourcing-grid { grid-template-columns: 1fr; } }
.tkw-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.tkw-panel h2 { margin: 0; font-size: 15px; }
.tkw-field { display: flex; flex-direction: column; gap: 4px; }
.tkw-field label { font-size: 12px; font-weight: 600; }
.tkw-field input, .tkw-field textarea, .tkw-field select {
  padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: 7px; font: inherit;
}
.tkw-phone-state { font-weight: 700; }
.tkw-phone-state[data-mine="true"] { color: var(--ok); }
.tkw-phone-state[data-busy="true"] { color: var(--warn); }
.tkw-queue { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.tkw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tkw-photo-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tkw-photo {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: #fff;
  display: flex; flex-direction: column; gap: 7px;
}
.tkw-photo img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; background: #eceff3; }
.tkw-photo-missing {
  height: 150px; border-radius: 6px; background: #eceff3; color: var(--muted);
  display: grid; place-items: center; font-size: 12px; text-align: center; padding: 8px;
}
/* 경고는 **사진 옆에** 붙는다. 따로 모아 두면 사진을 승인하는 사람이 못 본다. */
.tkw-photo-warnings {
  margin: 0; padding: 7px 9px; list-style: none;
  background: var(--warn-bg); border: 1px solid #edd9a6; border-radius: 7px;
  color: var(--warn); font-size: 12px; font-weight: 600;
  display: flex; flex-direction: column; gap: 3px;
}
.tkw-photo-meta { color: var(--muted); font-size: 12px; margin: 0; }

/* ── 편집 ── */
.tkw-editor {
  margin-top: 8px; border-top: 1px dashed var(--line-strong); padding-top: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.tkw-editor-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tkw-autosave { font-size: 12px; color: var(--muted); }
.tkw-conflict {
  background: var(--danger-bg); border: 1px solid #f0bcb6; border-radius: 8px; padding: 11px;
  display: flex; flex-direction: column; gap: 7px; color: var(--danger);
}
.tkw-conflict strong { font-size: 13px; }
.tkw-conflict p { color: var(--danger); }

/* ── 일괄 업로드 ── */
.tkw-ready-list { display: flex; flex-direction: column; gap: 8px; }
.tkw-ready-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.tkw-ready-row[data-blocked="true"] { background: #fbfbfc; color: var(--muted); }
.tkw-ready-row label { font-weight: 600; }
.tkw-ready-row p { margin: 0; font-size: 12px; color: var(--muted); }
.tkw-confirm { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.tkw-progress-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.tkw-progress-bar { height: 9px; border-radius: 999px; background: #e3e7ee; overflow: hidden; }
.tkw-progress-bar > div { height: 100%; background: var(--navy); }
.tkw-attempt-list { display: flex; flex-direction: column; gap: 8px; }
.tkw-attempt {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.tkw-attempt[data-attention="true"] { border-color: var(--warn); background: var(--warn-bg); }
.tkw-attempt[data-state="FAILED"], .tkw-attempt[data-state="ABANDONED"] {
  border-color: var(--danger); background: var(--danger-bg);
}
.tkw-attempt[data-state="PUBLISHED"] { border-color: var(--ok); background: var(--ok-bg); }

/* ── 업로드된 상품 ── */
.tkw-published-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tkw-search { max-width: 420px; }

/* ── 관리 (사장님 전용) ──
   세 칸(팀원 · 사무실 폰 · 점검)을 한 화면에 세로로 쌓는다.
   급할 때 누르는 화면이라 **한 눈에 다 보이는 것**이 스크롤보다 중요하다. */
.tkw-admin-section {
  margin-top: 18px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.tkw-admin-section h2 { margin: 0 0 4px; font-size: 15px; }
.tkw-admin-section .tkw-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.tkw-admin-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.tkw-admin-list { display: flex; flex-direction: column; gap: 8px; }
.tkw-admin-item {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.tkw-admin-item strong { min-width: 140px; }
.tkw-admin-actions { display: flex; gap: 8px; margin-left: auto; }
.tkw-chip {
  padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: var(--ok-bg); color: var(--ok);
}
.tkw-chip-warn { background: var(--warn-bg); color: var(--warn); }

/* 등록 코드는 **한 번만** 보여 준다. 눈에 띄게, 그리고 "다시 못 본다"고 적어 둔다. */
.tkw-admin-code {
  margin: 10px 0; padding: 12px; border-radius: 8px;
  background: var(--warn-bg); border: 1px solid var(--warn);
}
.tkw-admin-code code {
  display: block; margin: 6px 0; padding: 8px; background: #fff;
  border: 1px dashed var(--line-strong); border-radius: 6px;
  font-size: 15px; letter-spacing: 0.04em; word-break: break-all;
}
.tkw-admin-code .tkw-hint { margin: 0; font-size: 12px; color: var(--warn); }
/* 복사 버튼은 값 바로 아래. 눈으로 옮겨 적으면 한 글자가 틀리고, 그 한 글자가 전화 한 통이 된다. */
.tkw-admin-code button { margin-bottom: 6px; }

/* 예비 수단(계정 id 로 연결)은 접어 둔다.
   지우지는 않는다 — 서버에 계정 관리 열쇠가 없으면 그게 유일한 길이다.
   다만 펼쳐 두면 예전처럼 그쪽을 쓰게 되고, 그러면 Auto Confirm 사고가 다시 난다. */
.tkw-admin-fallback { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.tkw-admin-fallback summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.tkw-admin-fallback .tkw-hint { margin: 8px 0; }

.tkw-admin-health { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tkw-admin-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.tkw-admin-stat span { font-size: 12px; color: var(--muted); }
.tkw-admin-stat-warn { border-color: var(--warn); background: var(--warn-bg); }
.tkw-admin-stat-warn span { color: var(--warn); }