/* =====================================================================
   일구대 — 화면 스타일
   원칙: 배경(회색) 위에 흰 카드로 묶고, 카드마다 제목줄 아래 구분선.
   글자는 본문 14px 이상, 보조 글자도 대비를 충분히. 색은 파랑(주요 동작)·초록(완료)·주황(확인 필요)·빨강(삭제)만.
   ===================================================================== */

:root {
  --bg: #f1f3f6;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --line: #e3e7ed;
  --line-strong: #cdd3dc;
  --text: #111827;
  --text-2: #374151;
  /* 보조 글자는 회색 칸(--panel-2) 위에서도 4.5:1 이상 되게 (#6b7280 은 흐려서 설명이 잘 안 읽혔다) */
  --muted: #5b6574;
  --accent: #2f6fed;
  --accent-hover: #1f5bd8;
  --accent-soft: #edf3ff;
  --accent-line: #c5d7fb;
  --ok: #136f35; /* 흰 배경·연한 초록 위 4.5:1 (2026-09-26 디자인 검토) */
  --ok-soft: #e6f6eb;
  --warn: #b45309;
  --warn-soft: #fff5e6;
  --warn-line: #f6d7a7;
  --danger: #c42a1d; /* 연한 빨강 배경 위 4.5:1 */
  --danger-soft: #fdeceb;
  --sidebar: #111827;
  --sidebar-hover: #1f2937;
  --sidebar-text: #cbd2dc;
  --sidebar-muted: #8a94a5;
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
  --shadow: 0 1px 3px rgba(17, 24, 39, .07), 0 6px 16px rgba(17, 24, 39, .04);
  --shadow-lg: 0 16px 40px rgba(17, 24, 39, .16);
  --focus: 0 0 0 3px rgba(47, 111, 237, .2);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 "Pretendard Variable", Pretendard, "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  /* 한국어는 낱말 중간에서 끊지 않는다 ("카테고 / 리" 방지). 칸보다 긴 낱말만 쪼갠다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
a { color: var(--accent); text-underline-offset: 2px; }
code { font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }
small { font-size: .8em; }

/* ---------- 입력 ---------- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
label .hint { font-weight: 400; }
label.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
label.checkbox input { width: auto; margin: 0; }

input, select, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 400;
  background: #fff;
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input:not([type="checkbox"]):not([type="radio"]), select { min-height: 40px; }
input::placeholder, textarea::placeholder { color: #6f7885; }
input:hover, select:hover, textarea:hover { border-color: #b3bcc8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
textarea { resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  padding-right: 34px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- 버튼 ---------- */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
button:hover:not(:disabled), .button:hover { background: var(--panel-2); border-color: #b3bcc8; }
button:focus-visible, .button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus); }
button:disabled { opacity: .45; cursor: default; }
.primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.ghost:hover:not(:disabled) { background: rgba(17, 24, 39, .05); border-color: transparent; }
.danger { color: var(--danger); }
.ghost.danger:hover:not(:disabled) { background: var(--danger-soft); }
.icon { min-width: 38px; padding: 0 10px; font-size: 20px; line-height: 1; }
.icon-sm { min-height: 30px; min-width: 30px; padding: 0 6px; font-size: 14px; }

/* ---------- 글자 · 배지 ---------- */

.hint { color: var(--muted); font-size: 13px; font-weight: 400; }
.sub { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.error-text { margin: 0; min-height: 1.2em; color: var(--danger); font-size: 13px; }
.warn-text {
  margin: 0;
  padding: 9px 12px;
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-soft);
  color: #8a4a08;
  font-size: 13.5px;
}

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.5; padding: 2px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.muted { background: #eef0f3; color: var(--text-2); }
.pill.info { background: var(--accent-soft); color: var(--accent); }
/* 출처 — 아마존 주황 · 라쿠텐 빨강 (카드 사진 위 뱃지와 표 제목 앞 뱃지가 같은 색) */
.pill.src { font-size: 12px; padding: 1px 8px; vertical-align: 2px; }
.src-amazon { background: #fff1dc !important; color: #b45309 !important; }
.src-rakuten { background: #fde8e8 !important; color: #bf0000 !important; }
.src-yodobashi { background: #e8eefc !important; color: #1d3f91 !important; }
/* 네이버 스토어 링크 — 초록 N 아이콘 */
.naver-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: #027a37; color: #fff !important; font: 800 12px/1 ui-sans-serif, system-ui, sans-serif; text-decoration: none !important; vertical-align: -4px; margin-right: 6px; }
.naver-link:hover { background: #02a94c; }
.list-table td.links .naver-link { margin-right: 0; margin-bottom: 4px; }
.pill.soft { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-soft); font-weight: 500; }

.chip { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; box-shadow: none; }
.chip span { color: var(--muted); margin-left: 2px; font-weight: 600; }
.chip.on { background: var(--text); border-color: var(--text); color: #fff; }
.chip.on span { color: #cfd4da; }

/* ---------- 카드 ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.card.flush { padding: 0; overflow: hidden; }
.card-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* 카드 맨 위 제목줄은 아래 구분선으로 본문과 나눈다 */
.card > .card-title:first-child,
.card > .row-between:first-child:has(> .card-title) {
  margin: 0 -22px 16px;
  padding: 0 22px 14px;
  border-bottom: 1px solid var(--line);
}
.card > .row-between:first-child:has(> .card-title) .card-title { margin-bottom: 0; }
.card.row-between > .card-title { margin-bottom: 0; }
/* 링크·포커스 가능 요소도 키보드 포커스가 보이게 */
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.card.stack > .card-title:first-child,
.card.stack > .row-between:first-child:has(> .card-title) { margin-bottom: 4px; }

/* 접는 카드 (기본 정보·옵션·판매가·상품 속성·업로드 설정 탭) — 제목줄을 누르면 접고 편다. 접으면 제목줄만 남는다 */
.card.fold > summary { cursor: pointer; list-style: none; }
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary .card-title::before {
  content: '';
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}
.card.fold:not([open]) > summary .card-title::before { transform: rotate(-45deg); }
.card.fold > summary:hover .card-title { color: var(--accent); }
.card.fold:not([open]) { gap: 0; }
.card.fold:not([open]) > summary.row-between:first-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* 카드를 끌어서 순서 바꾸기 (⠿ 손잡이, 2026-09-24) */
.drag-handle { cursor: grab; color: var(--muted); font-size: 16px; padding: 0 4px; flex: none; touch-action: none; opacity: 0; transition: opacity .15s; }
.card.fold:hover .drag-handle, .card.fold:focus-within .drag-handle { opacity: 1; }
@media (hover: none) { .drag-handle { opacity: 1; } }
.drag-handle:hover { color: var(--text-2); }
.drag-handle:active { cursor: grabbing; }
.card.fold.dragging { opacity: .4; }
.card.fold.drop-before, .card.fold.drop-after { position: relative; }
.card.fold.drop-before::before, .card.fold.drop-after::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.card.fold.drop-before::before { top: -7px; }
.card.fold.drop-after::after { bottom: -7px; }

.inline { display: flex; align-items: center; gap: 8px; }
.inline.wrap { flex-wrap: wrap; }
/* 한 묶음으로 쓰는 칸+단추 (재고 일괄 적용처럼) — 옆 항목과 구분되게 테두리로 묶는다 */
.group-box { gap: 6px; padding: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* 열을 minmax(0, 1fr) 로 — 안에 넓은 표가 있으면 카드 밖으로 밀려 나갔다(표는 제 칸 안에서 옆으로 민다) */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* 결과를 채워 넣을 빈 자리(상품명 점검 등)가 비어 있을 때 간격만 두 번 먹어 큰 빈칸이 생겼다 */
.stack > div:empty:not([contenteditable]) { display: none; }
.stack-lg { display: grid; gap: 20px; }
.divider { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.w-num { width: 90px; flex: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: #7c4206;
  font-weight: 500;
}
.banner::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.stack-lg > .banner { margin: 0; }

.empty {
  padding: 56px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--panel);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.card .empty { border: 0; border-radius: 0; }
.empty p { margin: 0 0 14px; font-size: 15px; }

/* ---------- 로그인 ---------- */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 20% 0%, #e3ebfb 0, transparent 45%), var(--bg);
}
.login-card { width: 100%; max-width: 360px; display: grid; gap: 14px; padding: 32px 28px; box-shadow: var(--shadow-lg); }
.login-card .brand { display: flex; align-items: center; gap: 10px; font-size: 22px; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f8bff, #2f6fed 60%, #1f4fbf);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ---------- 레이아웃 ---------- */

.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px;
  background: var(--sidebar);
  color: var(--sidebar-text);
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px 18px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.sidebar nav { display: grid; gap: 2px; }
.sidebar nav a, .logout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav-label { flex: 1; text-align: left; }
.sidebar nav a:hover, .logout:hover:not(:disabled) { background: var(--sidebar-hover) !important; color: #fff; }
.sidebar nav a.on { background: rgba(79, 139, 255, .16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #4f8bff; }
.sidebar nav a.on .nav-icon { opacity: 1; stroke: #8fb4ff; }
.nav-group { margin: 18px 12px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--sidebar-muted); }
.count { min-width: 24px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e5e7eb; font-size: 12px; font-weight: 600; text-align: center; line-height: 20px; }
.sidebar nav a.on .count { background: #4f8bff; color: #fff; }
.logout { margin-top: auto; border: 0; background: transparent; box-shadow: none; width: 100%; justify-content: flex-start; }
/* 지금 배포된 커밋 — 여러 세션이 동시에 커밋해서 뭐가 배포됐는지 화면에서 바로 보려고 (2026-09-24) */
.version-tag { margin: 6px 12px 2px; font-size: 12px; font-family: monospace; color: var(--sidebar-muted); cursor: default; }
/* "PC 화면" 토글 — 좁은 화면에서만 보이고, 켜져 있으면(뷰포트 920px 고정) 넓은 레이아웃에서도 끌 수 있게 보인다 */
.pc-view-btn { display: none; }
body.pc-view .pc-view-btn { display: flex; }
.ai-usage-tag { color: var(--sidebar-text); }
.ai-usage-tag.warn { color: #ff9b9b; opacity: 1; }
#aiUsageLine.neg { color: var(--danger); font-weight: 600; }

/* 1920px 화면에서 오른쪽이 600px 씩 비어 있었다. 표·갤러리가 많은 화면이라 넓게 쓰는 편이 낫다. */
.content { padding: 28px 36px 96px; max-width: 1600px; width: 100%; }
.content > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }

/* ---------- 수집 ---------- */

.source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.source-grid .card { display: flex; flex-direction: column; }
.guide { margin: 14px 0 6px; font-size: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.guide summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.guide ol { margin: 8px 0 12px; padding-left: 20px; line-height: 1.9; }

.progress { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 13px; color: var(--text-2); }
.bar { flex: 1; height: 8px; background: #e6e9ef; border-radius: 999px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .2s; }
.logs {
  max-height: 200px; overflow: auto; margin: 0;
  padding: 12px 14px; background: #111827; color: #d6dae0;
  border-radius: var(--radius); font-size: 12px; line-height: 1.7; white-space: pre-wrap;
}
/* 카테고리 추천 칩 — 자주 쓴 카테고리와 구분되게 */
.chip.suggest { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.chip.suggest .hint { color: inherit; opacity: .7; margin-left: 4px; }

/* 올린 이미지가 저장소를 얼마나 쓰는지 (기본 설정) */
.usage { display: grid; gap: 8px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.usage .bar { height: 8px; }
.usage .bar > div.warn { background: var(--warn); }
.usage .bar > div.danger { background: var(--danger); }

/* AI 일괄 대기열 — 오른쪽 아래 떠 있는 판. 모달(dialog)이 아니라 뒤의 목록·편집 화면을 그대로 쓸 수 있다 (2026-09-25 사용자: "다른 작업도 동시에") */
.ai-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 44;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 640px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 6px;
  padding: 10px 14px 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ai-panel[hidden] { display: none; }
.ai-panel-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.ai-panel-head strong { font-size: 15px; }
.ai-panel-head #aiPanelCount { margin-left: auto; white-space: nowrap; }
.ai-panel .progress { margin: 0; }
.ai-panel-body { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; min-height: 0; }
.ai-panel .ai-queue { max-height: none; min-height: 0; }
.ai-panel .ai-queue td.name { max-width: 220px; }
.ai-panel-hint { font-size: 12px; }
.ai-panel.collapsed { grid-template-rows: auto auto; }
.ai-panel.collapsed .ai-panel-body { display: none; }
/* 판이 떠 있는 동안 기본 설정 저장 막대가 그 밑에 깔리지 않게 (넓은 화면) */
@media (min-width: 1101px) {
  body:has(#aiPanel:not([hidden])) .savebar { margin-right: 500px; }
}
@media (max-width: 820px) {
  .ai-panel { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; max-height: 40vh; }
}

/* 대기열 표 — 상품마다 단계별 ⏳/✓/–/✗ */
.ai-queue { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.ai-queue table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-queue th, .ai-queue td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.ai-queue th { position: sticky; top: 0; background: var(--panel-2); font-size: 12px; color: var(--text-2); }
.ai-queue td.name { text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ai-queue tr.done td.name { color: var(--text-2); }
.ai-queue .s-ok { color: var(--ok); font-weight: 700; }
.ai-queue .s-fail { color: var(--danger); font-weight: 700; cursor: help; }
.ai-queue .s-run { color: var(--accent); }
.ai-queue .s-skip, .ai-queue .s-wait { color: var(--muted); }
.logs .err { color: #ff9b9b; }
.logs .warn { color: #ffd08a; }

/* ---------- 대기목록 (나중에 담기) ---------- */

.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input { flex: 1; min-width: 0; }

.queue-list { display: flex; flex-direction: column; }
.queue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.queue-row:first-child { border-top: 0; }
.queue-row.done { opacity: 0.55; }
.queue-main { flex: 1; min-width: 0; }
.queue-title { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.queue-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.queue-meta .mono { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-2); overflow-wrap: anywhere; }
.queue-actions { display: flex; gap: 6px; flex: none; }

.copy-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.copy-row code { overflow-wrap: anywhere; }

/* ---------- 목록 공통 ---------- */

/* 전체 · 준비됨 · 확인 필요: 한 덩어리 탭처럼 */
.filters { display: inline-flex; gap: 2px; padding: 3px; background: #e5e8ee; border-radius: var(--radius); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.filters .chip { min-height: 32px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; padding: 0 14px; }
.filters .chip:hover:not(:disabled) { background: rgba(255, 255, 255, .6); }
.filters .chip.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.filters .chip.on span { color: var(--accent); }

.toolbar {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px 10px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.toolbar .search { width: 260px; margin: 0; }
.toolbar .sort-select { width: auto; margin: 0; min-height: 36px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); opacity: .8; }
.menu[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 240px;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.menu-list.right { left: auto; right: 0; }
.menu-list button { border: 0; box-shadow: none; justify-content: space-between; text-align: left; width: 100%; min-height: 40px; padding: 0 12px; }
.menu-list button:hover:not(:disabled) { background: var(--panel-2); }
.menu-list .hint { margin: 4px 12px; white-space: normal; }

/* ---------- 수집상품 카드 ---------- */

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.product-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 111, 237, .18); }
.card-media { position: relative; padding: 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.thumb { display: block; aspect-ratio: 1; width: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: 6px; }
.thumb.none { display: grid; place-items: center; color: var(--muted); font-size: 13px; background: #eceef2; }
.product-card .pick { position: absolute; top: 12px; left: 12px; z-index: 1; width: 20px; height: 20px; margin: 0; }
.product-card .source {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  /* 사진이 mix-blend-mode: multiply 라 뒤에 그려지면 배지까지 어두워졌다 (어두운 사진 위에서 안 보임) */
  z-index: 1;
}
.card-body { display: grid; gap: 6px; padding: 12px 14px 10px; flex: 1; align-content: start; }
.product-card .name { font-size: 14px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.product-card .name.untranslated { color: var(--muted); font-weight: 400; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.product-card .price { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.product-card .price small { margin-left: 1px; font-size: 13px; font-weight: 600; }
.product-card .profit { font-size: 13px; color: var(--muted); }
.card-foot { padding: 10px 14px 14px; border-top: 1px solid var(--line); }
/* 빠진 항목을 하나씩 따로 (한 알약에 몰아 쓰면 여러 줄로 뭉쳐 읽기 어려웠다) */
.need-list { display: flex; flex-wrap: wrap; gap: 4px; }
.profit-pos { color: var(--ok); font-weight: 600; }
.profit-neg { color: var(--danger); font-weight: 700; }

/* ---------- 표 ---------- */

/* 오른쪽에 내용이 더 있으면 그림자가 보인다 (background-attachment: local 트릭) */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .12), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .12), transparent) right center / 12px 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: 13px; color: var(--text-2); font-weight: 600; background: var(--panel-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
/* 맨 오른쪽 칸이 표 테두리에 붙어 잘린 듯 보였다 */
thead th:last-child, tbody td:last-child { padding-right: 16px; }
tbody tr:hover { background: #fafbfc; }
th.tight, td.tight { width: 1%; white-space: nowrap; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; display: block; }
td .title { cursor: pointer; font-weight: 500; }
td .title:hover { color: var(--accent); }

/* ---------- 기본 설정 ---------- */

.settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1060px; }
/* 위 탭에서 골라 카드를 하나씩 본다 (예전엔 긴 한 쪽을 내리며 봤다). 넘치면 옆으로 민다 */
.settings-nav {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.settings-nav::-webkit-scrollbar { display: none; }
/* 긴 설명은 접어 둔다 — 필요할 때만 펴 본다 (기본 설정 화면이 글자로 빽빽했다) */
.hint-more > summary {
  cursor: pointer;
  width: max-content;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.hint-more > summary:hover { color: var(--accent); }
.hint-more > :not(summary) { margin: 6px 0 0; }

.settings-nav a { flex: none; padding: 9px 14px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.settings-nav a:hover { background: var(--panel-2); color: var(--accent); }
.settings-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.settings-nav a.need::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: 2px; border-radius: 50%; background: var(--warn); }
/* 카드 안의 작은 묶음 제목 (한 카드에 성격이 다른 칸이 섞일 때) */
.sub-head { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--text); }
.sub-head .hint { margin-left: 6px; font-weight: 400; }
/* 같은 줄의 입력 칸은 아래 끝으로 맞춘다 — 이름이 두 줄로 넘어간 칸만 입력 칸이 내려가 어긋나 보였다 */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 18px; margin-bottom: 14px; align-items: end; }
/* 입력 칸 아래에 안내(일본어 있음)가 붙는 줄은 위로 맞춘다 — 아래로 맞추면 안내가 뜬 칸만 입력 칸이 올라갔다 */
.field-grid:has(.ja-note) { align-items: start; }
.card > .hint:last-child, .card > p.hint { margin: 10px 0 0; line-height: 1.6; }
.unit { position: relative; }
.unit input { padding-right: 40px; text-align: right; }
.unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-35%); color: var(--muted); font-size: 13px; font-weight: 500; }
.example { margin: 12px 0 0; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); font-size: 14px; font-weight: 500; color: #1d3f8a; }
.example:empty { display: none; }
.status-list { display: grid; grid-template-columns: 160px 1fr; gap: 0; margin: 0; font-size: 14px; }
.status-list dt, .status-list dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
.status-list dt:last-of-type, .status-list dd:last-of-type { border-bottom: 0; }
.status-list dt { color: var(--muted); }
.status-list dd { margin: 0; font-weight: 500; }
/* 원문 사양 — 줄마다 옅은 줄무늬, 일본어가 남은 줄은 주황 (상세페이지 사양표에 그대로 나간다) */
.spec-list dt, .spec-list dd { padding: 9px 12px; }
.spec-list dt { color: var(--text-2); font-weight: 600; background: var(--panel-2); }
.spec-list dt.jp, .spec-list dd.jp { background: var(--warn-soft); }
.spec-list dt.jp { box-shadow: inset 3px 0 0 var(--warn); }
.spec-warn { margin-bottom: 12px; }
.spec-warn .warn-text { flex: 1 1 260px; }
.spec-origin { margin-top: 12px; }
.spec-origin > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.spec-origin > .spec-list { margin-top: 8px; opacity: .8; }
/* 체크 상자를 한 줄에 여러 개 놓을 때 서로 붙어 보였다 */
.inline.wrap:has(> label.checkbox) { gap: 8px 20px; }
.savebar {
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.savebar .primary { min-width: 120px; }

/* API 연결 카드 — 서비스마다 테두리로 묶는다 */
.api-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.api-block .field-grid { margin: 0; }
.api-block .hint { margin: 0; }

/* ---------- 서랍 · 창 ---------- */

.backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .42); z-index: 30; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(580px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}
.drawer-head, .drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.drawer-head strong { font-size: 17px; }
.drawer-foot { border-top: 1px solid var(--line); border-bottom: 0; background: var(--panel-2); }
.drawer-foot #drawerStatus { margin-left: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; display: grid; gap: 20px; align-content: start; }
.drawer-body section { display: grid; gap: 10px; }
.drawer-body h3 { margin: 0; font-size: 14px; font-weight: 700; }
.drawer-body details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.drawer-body details pre { white-space: pre-wrap; font: 13px/1.6 inherit; background: var(--panel-2); padding: 12px; border-radius: var(--radius-sm); max-height: 240px; overflow: auto; }

.dialog {
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  border: 0;
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-lg);
  display: none;
}
.dialog[open] { display: grid; gap: 14px; align-content: start; overflow: auto; } /* 내용이 화면보다 길면 창 안에서 굴린다 (2026-09-26 디자인 검토) */
.dialog strong { font-size: 17px; }
/* 창 머리: 제목이 길어 줄이 바뀌어도 닫기(×)는 오른쪽 위에 그대로 둔다 */
.dialog > .row-between:first-child { flex-wrap: nowrap; align-items: start; }
.dialog > .row-between:first-child strong { min-width: 0; }
.dialog::backdrop { background: rgba(17, 24, 39, .42); }
/* 항목이 많은 창은 제목·적용 단추를 고정하고 가운데만 굴린다 */
#settingsBulkDialog[open] { align-content: stretch; grid-template-rows: auto auto 1fr auto; }
#settingsBulkBody { overflow: auto; min-height: 0; }

/* ---------- 상품 편집 ---------- */

.editor-top {
  position: sticky;
  top: 12px;
  z-index: 6;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.editor-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; }
.editor-title { flex: 1; min-width: 0; }
.editor-title > div:first-child { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checklist { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.checklist:empty { display: none; }
/* 통과한 뱃지는 "✓ n/m" 하나로 접는다 — 채울 것만 보인다 (2026-09-25 윈들리 참고, 머리를 가볍게) */
.checklist .pill.ok:not(.checklist-short) { display: none; }
.checklist-short { display: inline-flex; }
.tabs { display: flex; gap: 2px; padding: 0 8px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs.more-right { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.tabs button {
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
}
.tabs button:hover:not(:disabled) { background: transparent !important; color: var(--text); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
/* 채울 것이 남은 탭 — 머리의 "!" 뱃지와 같은 주황 점 */
.tabs button.need::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
/* 머리의 등록 체크 뱃지는 누르면 그 탭으로 간다 */
.checklist button.pill { min-height: 0; border: 0; box-shadow: none; font-size: 12px; padding: 2px 9px; }
.checklist button.pill.warn:hover:not(:disabled) { background: #fde7c6; }
.checklist button.pill.ok:hover:not(:disabled) { background: #d6f0de; }
/* 넓게 쓰는 탭이 아니면 머리도 본문과 같은 폭 (머리만 오른쪽으로 더 나와 어긋나 보였다) */
.editor-top { max-width: 1280px; }
.editor-wide > .editor-top { max-width: none; }
/* 입력 칸이 너무 넓어지면 읽기 나쁘므로 1080px 으로 잡는다.
   다만 이미지 탭은 갤러리 + 원본 미리보기를 좌우로 놓으므로 넓은 화면을 다 쓴다. */
.editor-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 1280px; }

/* ---------- 편집 화면 촘촘하게 (2026-09-25 사용자: "수정할 때 한 눈에 다 안 보여서 불편") ----------
   본문 폭 1080 → 1280, 카드 여백·칸 높이·글자·간격을 줄여 한 화면에 더 많이 들어오게. 목록·기본 설정은 그대로 */
.editor-body { font-size: 13.5px; }
.editor-head { padding: 6px 12px 2px; gap: 8px; }
.editor-title > div:first-child { font-size: 15px; }
.checklist { padding: 0 12px 4px; }
.tabs button { min-height: 36px; padding: 0 11px; font-size: 13.5px; }
.editor-body .card { padding: 10px 14px; }
.editor-body .card > .card-title:first-child,
.editor-body .card > .row-between:first-child:has(> .card-title) { margin: 0 -14px 8px; padding: 0 14px 7px; }
.editor-body .card.stack > .card-title:first-child,
.editor-body .card.stack > .row-between:first-child:has(> .card-title) { margin-bottom: 2px; }
.editor-body .card-title { font-size: 14.5px; }
.editor-body .stack { gap: 6px; }
.editor-body .field-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 10px; margin-bottom: 6px; }
.editor-body label { font-size: 12px; }
.editor-body input:not([type="checkbox"]):not([type="radio"]), .editor-body select, .editor-body textarea { margin-top: 4px; padding: 6px 10px; }
.editor-body input:not([type="checkbox"]):not([type="radio"]), .editor-body select { min-height: 32px; }
.editor-body button:not(.pill):not(.icon):not(.icon-sm) { min-height: 30px; font-size: 13px; }
.editor-body .hint { font-size: 12px; }
.editor-body th, .editor-body td { padding: 4px 8px; }
.editor-body .price-stats .stat b { font-size: 18px; }
.editor-body .price-stats { padding: 10px 14px; gap: 6px; }
.editor-body .price-stats .basis { padding-top: 6px; }
.editor-body .origin-line .origin-text-line { font-size: 13px; }
.editor-body .basic-main { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.editor-body .gallery.large { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
/* 옵션 탭: 옵션값 한 줄 36 → 28px */
.editor-body .value-row { padding: 2px 6px; gap: 6px; }
.editor-body .value-row input[type="text"] { min-height: 28px; padding: 2px 8px; }
.editor-body .value-origin { font-size: 12.5px; }
/* 상세페이지 탭: 캔버스를 70% 로 보여 한 화면에 더 많이 (사용자: "상세페이지 탭 해상도는 30% 더") — 저장되는 HTML 은 그대로, 보기만 줄인다 */
.editor-body #detailCanvas { zoom: 0.7; } /* 기본값 — 실제 값은 배율 바(app.js applyDetailZoom)가 style 로 덮는다 */
.zoom-ctl { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.zoom-ctl input[type="range"] { width: 110px; margin: 0; min-height: 0; padding: 0; accent-color: var(--accent); }
.zoom-ctl [data-zoom-text] { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.editor-body .detail-studio { grid-template-columns: 170px minmax(0, 1fr) 220px; gap: 10px; }
.editor-body .detail-photo-list { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.editor-body .detail-side { font-size: 12.5px; }
.editor-body .origin-line .origin-text-line { font-size: 12.5px; }
/* 판매가 표: 옵션 원문(ブラック / 25.0cm)을 한국어 이름 옆에 한 줄로 — 두 줄이라 조합 9개가 화면을 다 먹었다 */
.editor-body td { line-height: 1.35; padding-top: 4px; padding-bottom: 4px; }
.editor-body td input:not([type="checkbox"]):not([type="radio"]), .editor-body td select { min-height: 28px; padding: 2px 8px; margin-top: 0; }
.editor-body td > .hint { display: inline; margin-left: 6px; font-size: 12px; }
.editor-body .w-num { width: 84px; }
@media (max-width: 820px) {
  .editor-body .basic-main { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .editor-body td > .hint { display: block; margin-left: 0; }
}
.editor-body:has(.detail-studio) { max-width: none; }
.origin { font-size: 13px; color: var(--text-2); line-height: 1.6; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.editor-body .origin-text { white-space: pre-wrap; font: 13px/1.7 inherit; background: var(--panel-2); border: 1px solid var(--line); padding: 14px; border-radius: var(--radius-sm); max-height: 420px; overflow: auto; }
.editor-body details > summary { cursor: pointer; }
/* 상품명 카드 — 원문 상자와 입력 칸 사이를 띄우고, 글자 수와 "초안 만들기" 를 한 줄 가운데에 맞춘다 */
.origin + label { margin-top: 16px; }
label:has(input[data-field="titleKo"]) + .row-between { margin-top: 8px; }
/* 스마트스토어 태그 — 칩 + 입력 칸 한 상자 */
#tagField { margin-top: 18px; }
.tag-head { margin-bottom: 6px; font-size: 13px; color: var(--text-2); }
.tag-head b { color: var(--text); }
.tag-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); cursor: text; }
.tag-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tag-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; }
.tag-chip::before { content: "#"; opacity: .6; margin-right: 1px; }
.tag-chip .dict-mark { margin-left: 5px; padding: 0 5px; border-radius: 6px; background: var(--ok-soft, #e7f6ec); color: var(--ok, #157f3d); font-size: 11px; font-weight: 700; line-height: 16px; }
.tag-chip.blocked { background: var(--danger-soft, #fdecea); color: var(--danger, #c0392b); text-decoration: line-through; text-decoration-thickness: 1px; }
.tag-chip .block-mark { margin-left: 5px; padding: 0 5px; border-radius: 6px; background: var(--danger, #c0392b); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-decoration: none; }
.tag-chip button { min-height: 22px; min-width: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: inherit; font-size: 15px; line-height: 1; }
.tag-chip button:hover:not(:disabled) { background: rgba(37, 99, 235, .15); }
.tag-box input { flex: 1; min-width: 160px; border: 0; padding: 4px; min-height: 28px; background: transparent; box-shadow: none; outline: none; }
.tag-box input:focus { box-shadow: none; }
/* 태그 추천 후보 */
.tag-head.row-between { align-items: center; gap: 10px; flex-wrap: wrap; }
/* 태그 단추가 다섯 개라 좁은 화면에서는 줄을 바꾼다 (옆으로 넘치지 않게) */
.tag-head .inline { flex-wrap: wrap; gap: 6px; }
.tag-suggest { margin: 4px 0 8px; padding: 10px 12px; border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); background: var(--panel-2); }
.tag-suggest > .row-between { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tag-options { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-option { min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; background: var(--panel); }
.tag-option small { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.tag-option:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }
/* 네이버로 그대로 가는 칸에 일본어가 남았을 때 */
input.has-ja { border-color: var(--warn-line); background: var(--warn-soft); }
.ja-note { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--warn); }
.ja-note[hidden] { display: none; }
.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.breakdown div { background: var(--panel-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; color: var(--muted); }
.breakdown b { display: block; font-size: 15px; color: var(--text); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.gallery.large { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.gallery figure { position: relative; margin: 0; cursor: grab; }
.gallery figure:active { cursor: grabbing; }
/* 사진 뒤 "+" 칸 — 상품이미지 올리기 (2026-09-26 사용자: 올리기 단추 대신 네모 안 플러스) */
.editor-body .gallery .add-tile { aspect-ratio: 1; min-height: 0; padding: 0; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel-2); box-shadow: none; font-size: 34px; font-weight: 300; line-height: 1; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.editor-body .gallery .add-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gallery .drop-hint { grid-column: 1 / -1; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; display: block; transition: border-color .12s; }
.gallery img:hover { border-color: var(--accent-line); }
.gallery figure.main img { border: 2px solid var(--accent); }
.gallery .tag { position: absolute; left: 6px; bottom: 6px; font-size: 12px; font-weight: 600; background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 7px; }
.gallery .remove { position: absolute; top: 6px; right: 6px; min-height: 26px; min-width: 26px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; background: rgba(255, 255, 255, .95); }
.gallery .remove:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: #f3b8b3; }
.gallery.large figure { cursor: grab; transition: opacity .12s; }
.gallery figure.dragging { opacity: .35; }
.gallery figure.drop-before::before, .gallery figure.drop-after::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.gallery figure.drop-before::before { left: -8px; }
.gallery figure.drop-after::after { right: -8px; }
.gallery .order { position: absolute; left: 6px; top: 6px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(17, 24, 39, .72); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; line-height: 20px; }
.gallery figure.main .order { background: var(--accent); }
.gallery figure.over-limit img { opacity: .45; }
/* 상세페이지 공통 배너처럼 가로로 긴 이미지 */
.gallery.wide { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery.wide img { aspect-ratio: 16 / 7; cursor: default; }
.gallery.dropzone { min-height: 96px; align-content: start; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel-2); }
.gallery.dropzone.drop-on { border-color: var(--accent); background: var(--accent-soft); }
.gallery.dropzone .drop-hint { grid-column: 1 / -1; margin: 0; align-self: center; text-align: center; padding: 18px 8px; }

/* (썸네일의 ✎·☆·‹ › 단추는 2026-09-26 에 뺐다 — 편집은 미리보기 카드 "편집", 대표는 맨 앞으로 끌기) */

/* 원본 크기 미리보기 — 줄이지 않고 그대로 그리고, 넘치면 상자 안에서 스크롤 */
/* 갤러리 + 원본 미리보기. 넓은 화면에서는 좌우로 놓아 둘 다 한눈에 보이게 한다 */
/* 열을 minmax(0, 1fr) 로 — 그냥 두면 단추 줄 폭만큼 늘어나 휴대폰에서 화면이 옆으로 밀렸다 */
/* 썸네일 카드 아래에 미리보기 카드 — 한눈에 (2026-09-25 윈들리 참고, 전에는 오른쪽 옆에 붙어 있었다) */
.image-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }

.image-original {
  /* 화면 밖으로 나가지 않게 (전에는 560px 고정이라 FHD 에서 아래가 잘렸다) */
  min-height: 320px;
  max-height: min(520px, calc(100vh - 260px));
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
/* 전체 보기(기본) — 사진이 커도 상자에 맞춰 줄여 통째로 보여 준다 */
.image-original.fit { overflow: hidden; min-height: 220px; }
.image-original.fit img {
  display: block;
  max-width: 100%;
  /* 상자 max-height 에서 안쪽 여백 24px + 테두리 2px 을 뺀다 (안 빼면 2px 이 잘렸다) */
  max-height: calc(min(520px, 100vh - 260px) - 26px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
/* 1:1 — 줄이지 않고 원래 픽셀 그대로. 상자보다 크면 상자 안에서 민다 */
.image-original.actual { overflow: auto; }
.image-original.actual img { display: block; max-width: none; max-height: none; background: #fff; box-shadow: var(--shadow-sm); }

.gallery .ok-text, .ok-text { color: var(--ok, #157f3d); font-weight: 600; }

/* 옵션 탭 "자주 쓰는 치수" — 평소에는 안 보이고 단추를 눌러야 열린다 */
.size-picker { display: grid; gap: 8px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.size-picker .chip { min-width: 52px; justify-content: center; }
.size-picker .chip.on { background: var(--ok-soft); color: var(--ok); border-color: #b7e2c4; }

.gallery .move { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }

/* 수집상품 목록 보기 */
.list-table tbody tr { cursor: pointer; }
.list-table tbody tr:hover { background: var(--panel-2); }
.list-table tbody tr.selected { background: var(--accent-soft); }
.list-table .title.untranslated { color: var(--muted); }
.list-table td:nth-child(3) { min-width: 220px; }
.list-table td:nth-child(7) { min-width: 150px; }
.list-table .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-table td .hint { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-table .pill { white-space: normal; line-height: 1.45; }
td.code { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }

/* 판매가 직접 입력: 계산값은 흐린 placeholder, 직접 넣은 값은 파란 테두리 */
.price-table input.sale-price { width: 110px; text-align: right; }
.price-table input.opt-price { width: 84px; text-align: right; }
.list-table td.links { white-space: nowrap; line-height: 1.7; }
#naverBody .title[data-naver-open] { cursor: pointer; }
#naverBody .title[data-naver-open]:hover { color: var(--accent); text-decoration: underline; }
#naverDialogBody .price-table tr.unavailable td { color: var(--muted); }
#nvStatus button, #nvDisplay button { min-height: 32px; font-size: 13px; }
#nvGroups .nv-group { width: 150px; }
#nvComboTable td.inline { gap: 4px; }
#nvComboTable td.inline .w-num { width: 110px; }
.product-card .source.src-amazon { border-color: #f6d7a7; }
/* 네이버에 올리는 중인 카드 */
.product-card.uploading { outline: 2px solid var(--accent); outline-offset: -1px; }
#uploadingNote { margin-left: 4px; }
/* 바로가기 페이지 — 바깥 사이트 링크 줄 */
.link-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.link-row:hover { background: var(--panel-2); border-color: var(--line-strong); }
.link-row b { font-size: 14px; }
/* 끌 수 있는 카드는 제목줄 전체를 잡고 끌 수 있다 */
.fold > summary[draggable] { cursor: grab; }
.fold.dragging > summary[draggable] { cursor: grabbing; }
.product-card .source.src-rakuten { border-color: #f3b8b8; }
.logs a { color: #93c0ff; }
.price-table input.opt-price.manual { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.price-tools { row-gap: 8px; }
.price-stats .basis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.price-stats .basis button { margin-left: auto; min-height: 30px; font-size: 12.5px; }
.price-tools .group-box .hint { padding: 0 4px; white-space: nowrap; }
.price-table input.sale-price.manual { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.price-table .neg { color: var(--danger); font-weight: 600; }
/* 순수익은 초록(남음)·빨강(손해)으로 */
.price-table td.profit { color: var(--ok); font-weight: 600; }
.price-table td.profit.neg { color: var(--danger); }
/* 계산된 판매가가 흐린 글자라 빈칸처럼 보였다 — 계산값도 검은 글자로 (직접 넣은 값은 파랑) */
.price-table input.sale-price::placeholder { color: var(--text); opacity: 1; }
/* 기준 옵션 줄 (스마트스토어 판매가가 되는 조합) */
.price-table tr.base td { background: var(--accent-soft); }
.price-table tr.base td:nth-child(2) { font-weight: 600; }

/* 판매가 탭 맨 위 — 판매가·예상이익·이익률 */
.price-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; align-items: end; }
.price-stats .stat { display: grid; gap: 2px; }
.price-stats .stat span { font-size: 13px; color: var(--muted); font-weight: 500; }
.price-stats .stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-stats .stat b.pos { color: var(--ok); }
.price-stats .stat b.neg { color: var(--danger); }
.price-stats .basis { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
/* 휴대폰은 한 줄에 하나 (금액 범위가 길어 세 칸이면 서로 겹쳤다) */
@media (max-width: 820px) {
  .price-stats { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .price-stats .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .price-stats .stat b { font-size: 18px; text-align: right; }
}
.gallery .move button { min-height: 26px; min-width: 26px; padding: 0; border-radius: 6px; font-size: 15px; line-height: 1; background: rgba(255, 255, 255, .95); }

/* 기본 정보 탭 (2026-09-25 윈들리 참고): 왼쪽 대표 사진 · 오른쪽 원본 상품명 → 스마트스토어 상품명. 단추는 제목줄 오른쪽 */
.basic-main { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: start; }
.basic-thumb { margin: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); overflow: hidden; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.basic-thumb img { width: 100%; height: 100%; object-fit: contain; }
.origin-line { display: grid; gap: 4px; }
.origin-line .origin-text-line { font-size: 13.5px; line-height: 1.6; color: var(--text); word-break: break-all; }
.count-input { position: relative; }
.count-input input { padding-right: 68px; }
.count-input .count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
/* 제목줄 안의 단추(상품명 초안 만들기 등)는 접기/펴기를 건드리지 않는다 */
.card.fold > summary .inline { flex: none; }
.card-subtitle { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.address-head { margin: 4px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
/* 고른 출고지·반품지의 전체 주소 — 고르는 칸은 좁아 잘리므로 아래에 한 줄로 다 보여 준다 */
.address-text { display: block; margin-top: 6px; line-height: 1.5; word-break: break-all; min-height: 1.5em; }
.address-text:empty { display: none; }
@media (max-width: 820px) {
  .basic-main { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
}

/* 카테고리 고르기 — 고른 경로를 보여 주는 단추를 누르면 검색+추천 드롭다운이 펼쳐진다 (2026-09-24, 참고 화면 캡처 기준) */
.category-picker { display: grid; gap: 8px; position: relative; }
.category-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-weight: 600; text-align: left; }
.category-trigger.unset { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); font-weight: 500; }
.category-trigger .chev { flex: none; color: var(--muted); font-weight: 400; }
.category-dropdown { display: grid; gap: 8px; }
.category-picker input[type="search"] { margin: 0; }
.category-list { display: grid; gap: 10px; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: var(--panel); box-shadow: var(--shadow); }
.category-group { display: grid; gap: 2px; }
.category-row { display: flex; align-items: center; gap: 8px; border: 0; box-shadow: none; text-align: left; white-space: normal; width: 100%; padding: 8px 10px; background: transparent; }
.category-row:hover:not(:disabled) { background: var(--accent-soft); }
.category-row .check { flex: none; width: 16px; color: var(--accent); font-weight: 700; }
.category-row.on { color: var(--accent); font-weight: 600; }
.category-picker .chip { font-size: 13px; }

/* ---------- 상세페이지 만들기 (윈들리처럼 — 왼쪽 사진 · 가운데 고치는 화면 · 오른쪽 구조) ---------- */

.detail-studio { display: grid; grid-template-columns: 216px minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
/* 툴바가 세 칸 위에 붙어 있으므로 옆 칸들은 그 아래에 선다 (--barh 는 app.js 가 잰다) */
.detail-photos, .detail-side {
  position: sticky; top: calc(var(--stick) + var(--barh, 54px) + 14px);
  max-height: calc(100vh - var(--stick) - var(--barh, 54px) - 38px); overflow: auto;
}
.detail-photo-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* 순서 바꾸기는 **캔버스 안에서** 끌어 옮긴다 (블로그처럼). 여기서는 누르면 그 자리로 간다 */
.detail-photo-list figure { position: relative; margin: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; cursor: pointer; }
.detail-photo-list figure:hover { border-color: var(--accent); }
.option-table-set { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.detail-photo-list img { width: 100%; height: 100%; object-fit: contain; }
.detail-photo-list .remove { position: absolute; top: 2px; right: 2px; min-height: 22px; width: 22px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; border: 0; font-size: 14px; line-height: 1; }
/* 사진 순서 바꾸기 — 캔버스 안에서 끄는 것이 잘 안 될 때를 위해 단추로도 둔다 */
.detail-photo-list .edit { position: absolute; right: 2px; bottom: 2px; min-height: 22px; width: 22px; padding: 0; border: 0; border-radius: 5px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; line-height: 1; box-shadow: none; }
.detail-photo-list .edit:hover { background: var(--accent); }
.detail-photo-list .move { position: absolute; left: 2px; bottom: 2px; display: flex; gap: 2px; }
.detail-photo-list .move button { min-height: 22px; width: 22px; padding: 0; border: 0; border-radius: 5px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; line-height: 1; box-shadow: none; }
.detail-photo-list .move button:hover { background: var(--accent); }
/* 몇 번째 사진인지 (캔버스 위에서부터) */
.detail-photo-list .num {
  position: absolute; top: 3px; left: 3px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: rgba(17, 24, 39, .75); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}
/* 마우스가 있는 화면에서는 단추를 올렸을 때만 — 작은 사진 위에 단추 네 개가 늘 떠 있어 사진이 안 보였다 */
@media (hover: hover) {
  /* 상품이미지 칸 — × 를 올렸을 때만 (단추가 늘 떠 있으면 사진이 잘 안 보였다) */
  .gallery.large figure .remove { opacity: 0; transition: opacity .12s; }
  .gallery.large figure:hover .remove,
  .gallery.large figure:focus-within .remove { opacity: 1; }
  /* 올리면 ‹ › 와 겹치는 "대표이미지" 표는 잠깐 숨긴다 */
  .gallery.large figure:hover .tag { opacity: 0; }
  .detail-photo-list figure .remove, .detail-photo-list figure .edit, .detail-photo-list figure .move { opacity: 0; transition: opacity .12s; }
  .detail-photo-list figure:hover .remove, .detail-photo-list figure:hover .edit, .detail-photo-list figure:hover .move,
  .detail-photo-list figure:focus-within .remove, .detail-photo-list figure:focus-within .edit, .detail-photo-list figure:focus-within .move { opacity: 1; }
}

/* 오른쪽 구성 — 한 줄에 하나, 상태(비어 있음 등)는 오른쪽 끝 */
.detail-side .part-row { gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.detail-side .part-row > span:first-of-type { flex: 1; }
.detail-side .part-row:has(input:not(:checked)) > span:first-of-type { color: var(--muted); }
.part-note { flex: none; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.detail-side.stack { gap: 0; }
.detail-side.stack > :not(.part-row):not(.card-title) { margin-top: 12px; }
.detail-side .option-table-set { margin: 8px 0; }

/* 툴바 정렬 아이콘 */
.tb-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.detail-photo-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.detail-photo-pick button { padding: 0; min-height: 0; aspect-ratio: 1; overflow: hidden; }
.detail-photo-pick img { width: 100%; height: 100%; object-fit: contain; }

.detail-canvas-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 툴바는 **한 줄**로 둔다 — 여러 줄이 되면 붙어 있는 막대가 화면의 20% 를 먹는다.
   좁으면 단추 줄만 옆으로 밀어 보고, PC/모바일 세그먼트는 오른쪽에 그대로 둔다. */
.detail-toolbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  position: sticky; top: var(--stick); z-index: 3;
}
/* 좁으면 옆으로 미는 대신 **줄을 바꾼다** — 밀린 단추는 있는 줄 모른다(사용자 신고) */
.detail-toolbar .tools-scroll {
  flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.detail-toolbar .tools-scroll > * { flex: none; }
.detail-toolbar button { min-height: 32px; padding: 0 10px; font-size: 13px; }
/* 자주 안 쓰는 단추는 "더보기(⋯)" 안에 — 툴바가 넘쳐 안 보이지 않게 */
.detail-toolbar .tools-more { flex: none; }
.detail-toolbar .tools-more > summary { min-height: 32px; padding: 0 10px; font-size: 16px; line-height: 1; }
.detail-toolbar .tools-more > summary::after { display: none; }
.detail-toolbar .tools-more .menu-list { min-width: 220px; }
.detail-toolbar .tools-more .menu-list button { min-height: 38px; font-size: 13px; gap: 10px; }
.detail-toolbar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
/* 커서 자리에 걸려 있는 꾸밈은 단추가 눌린 모습으로 (블로그 편집기처럼) */
.detail-toolbar .tools-scroll button.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.detail-toolbar .font-size { min-height: 32px; margin: 0; padding: 0 6px; font-size: 13px; width: auto; }
.detail-toolbar .color-pick { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 0 8px; min-height: 32px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; }
.detail-toolbar .color-pick input { width: 22px; height: 22px; padding: 0; border: 0; background: none; margin: 0; min-height: 0; cursor: pointer; }

.detail-canvas { background: #e7eaef; border-radius: var(--radius); padding: 16px; overflow: auto; }
.detail-canvas > div { background: #fff; padding: 16px; border-radius: 6px; box-shadow: var(--shadow); }
.detail-canvas.mobile > div { max-width: 390px; }

/* 붙어 있는 것들이 편집 머리(제목·탭) 아래에 서도록 — 높이는 app.js 가 재서 넣는다 */
.detail-studio { --stick: 180px; }

/* 캔버스 = 네이버 블로그처럼 문서 하나. 테두리로 덩어리를 나누지 않는다. */
#detailCanvas { outline: 0; min-height: 300px; }
/* 사진 파일을 끌어다 놓는 중 */
#detailCanvas.drop-on { outline: 2px dashed var(--accent); outline-offset: 6px; background: var(--accent-soft); }
#detailCanvas img { max-width: 100%; height: auto; }
#detailCanvas img.flash { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 고른 사진 위에 뜨는 크기·정렬 도구 */
.image-tools {
  position: absolute; z-index: 20; display: flex; align-items: center; gap: 2px;
  padding: 3px; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.image-tools button { min-height: 26px; padding: 0 8px; font-size: 12px; border-radius: var(--radius-sm); }
.image-tools .sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }
#detailCanvas img { cursor: pointer; }

/* 맨 앞·맨 뒤 빈 줄 — 여기를 눌러 이어 쓸 수 있다 */
#detailCanvas > p[data-spacer] { min-height: 1.7em; }

/* 부품 — 안을 못 고치는 덩어리 (상·하단 공통 · 사양표 · 옵션 이미지 표) */
.dpart { position: relative; border-radius: 6px; padding: 2px; }
/* 사양표 — 칸 안은 고칠 수 있다. 줄 끝 × 는 화면에만 있고 저장되지 않는다 */
.dpart th[contenteditable], .dpart td[contenteditable] { outline: 0; }
.dpart th[contenteditable]:focus, .dpart td[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.dpart td.spec-x { width: 28px; padding: 0 2px; border: 0; text-align: center; }
.dpart span.spec-x { display: inline-block; width: 28px; vertical-align: top; padding-top: 6px; text-align: center; font-size: 13px; }
.dpart .spec-x button { min-height: 22px; width: 22px; padding: 0; font-size: 13px; line-height: 1; border-radius: 50%; background: transparent; border: 0; color: var(--text-2); opacity: 0; box-shadow: none; }
.dpart:hover .spec-x button { opacity: 1; }
.dpart .spec-x button:hover { background: var(--danger-soft); color: var(--danger); }
.dpart:hover { background: #f4f7ff; }
/* 눌러서 고른 부품 — Delete 로 지울 수 있다 */
.dpart.picked { background: #e8f0ff; box-shadow: 0 0 0 2px var(--accent); }
.dpart.picked .dpart-name, .dpart.picked .dpart-x { opacity: 1; }
.dpart-name,
.dpart-x { opacity: 0; transition: opacity .12s; }
.dpart:hover .dpart-name,
.dpart:hover .dpart-x { opacity: 1; }
.dpart-name {
  position: absolute; top: -9px; left: 8px; z-index: 1;
  font: 600 11px/1.6 inherit; color: var(--text-2); background: #fff; padding: 0 5px; border-radius: 4px;
}
.dpart-x {
  position: absolute; top: -10px; right: 6px; z-index: 2;
  min-height: 22px; width: 22px; padding: 0; font-size: 13px; line-height: 1;
  border-radius: 50%; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
}

/* 고칠 수 있는 영역 (상품명·상품 설명) — 비었을 때만 안내가 보인다 */
/* 안쪽 여백은 바깥 여백으로 상쇄해 글자 위치는 그대로 (테두리가 글자에 붙지 않게) */
.dregion { outline: 0; min-height: 24px; position: relative; border-radius: 6px; padding: 4px 8px; margin: 0 -8px; }
/* 어디가 상품명·상품 설명 자리인지 — 마우스를 올리거나 쓰는 중이면 테두리와 이름이 보인다 */
.dregion:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.dregion:focus-within, .dregion:focus { box-shadow: 0 0 0 2px var(--accent-line); }
.dregion::after {
  content: attr(data-label); position: absolute; top: -9px; right: 8px; opacity: 0; pointer-events: none;
  font: 600 11px/1.6 "Pretendard Variable", Pretendard, system-ui, sans-serif; color: var(--accent); background: #fff; padding: 0 5px; border-radius: 4px;
}
.dregion:hover::after, .dregion:focus::after { opacity: 1; }
.dregion:empty::before { content: attr(data-placeholder); color: var(--muted); }

.segmented { display: inline-flex; gap: 2px; padding: 3px; background: #e5e8ee; border-radius: var(--radius); }
.segmented button { min-height: 30px; border: 0; border-radius: 7px; padding: 0 14px; background: transparent; box-shadow: none; font-size: 13px; color: var(--text-2); }
.segmented button:hover:not(:disabled) { background: rgba(255, 255, 255, .6); }
.segmented button.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

.option-group .card-title .pill { font-size: 11.5px; }
.value-list { display: grid; gap: 4px; margin-top: 6px; }
.value-row { display: grid; grid-template-columns: 22px minmax(90px, 200px) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--radius-sm); }
/* 목록 쪽 넘기기 */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 4px; }
.pager .hint { white-space: nowrap; }


.value-row.has-image { grid-template-columns: 22px 36px minmax(70px, 180px) minmax(0, 1fr) auto; }
.value-image { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
/* ---------- 소싱 분석 (public/sourcing.js) ---------- */
.src-table-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.src-table-tools .search { flex: 1 1 200px; max-width: 320px; margin: 0; }
/* 폰에서도 보게 — 표는 카드 안에서 옆으로 민다 (페이지는 안 늘어난다) */
.src-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.src-table { min-width: 640px; }
.src-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.src-table th.sortable:hover { color: var(--accent, #2563eb); }
.src-table td { white-space: nowrap; }
.src-table td:first-child { white-space: normal; min-width: 180px; }
.src-table tr.src-expand { cursor: pointer; }
.src-table tr.src-detail td { background: var(--bg, #f6f7f9); white-space: normal; }
.src-part { display: inline-block; margin: 2px 8px 2px 0; padding: 2px 8px; border-radius: 999px; background: #e8f0fe; font-size: 13px; }
.src-part.neg { background: #fdecec; color: #b91c1c; }
.lvl { display: inline-block; min-width: 44px; padding: 1px 8px; border-radius: 999px; font-weight: 600; text-align: center; }
.lvl-low { background: #e7f6ec; color: #15803d; }
.lvl-mid { background: #fff4e0; color: #b45309; }
.lvl-high { background: #fdecec; color: #b91c1c; }
.src-progress { display: grid; gap: 6px; margin-top: 8px; }
.src-progress progress { width: 100%; height: 8px; }
.src-sync .inline label { display: inline-flex; align-items: center; gap: 6px; }
.src-sync select { width: auto; margin: 0; }
.src-filters label { display: inline-flex; align-items: center; gap: 6px; }
.src-filters input { width: 120px; margin: 0; }
.src-kw-input textarea { width: 100%; }
.src-unclassified { display: grid; gap: 8px; }
.src-unclassified .src-name { flex: 1 1 260px; }
.src-unclassified input { width: 160px; margin: 0; }
.src-unclassified .warn-text, .src-part .warn-text { color: #b45309; font-size: 13px; }

/* 판매가 탭 — 옵션가 한도에 걸리는 조합 정리 안내 */
.warn-card { display: grid; gap: 8px; justify-items: start; border-color: #f5c77e; background: #fffaf0; }
.warn-card .hint { margin: 0; }

/* 옵션 이미지 — 작은 썸네일에 마우스를 올리면 오른쪽에 크게 (이름과 함께) */
.value-thumb { position: relative; display: inline-flex; cursor: zoom-in; }
.value-zoom {
  display: none; position: absolute; left: 44px; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-lg);
  flex-direction: column; gap: 6px; pointer-events: none;
}
.value-zoom img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius-sm); }
.value-zoom span { font-size: 13px; font-weight: 600; text-align: center; }
@media (hover: hover) { .value-thumb:hover .value-zoom { display: flex; } }
.value-row:hover { background: var(--panel-2); }
.value-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.value-row input[type="text"] { margin: 0; min-height: 36px; }
.value-origin { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 목록 머리 — 원문 / 스마트스토어에 보일 이름 */
.value-row.value-head { padding-block: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.value-row.value-head:hover { background: none; }
.fill-count { font-weight: 500; opacity: .85; }
/* 뺀 옵션값(안 파는 색)은 흐리게 — 파는 값과 한눈에 갈리게 */
.value-row.excluded .value-origin, .value-row.excluded input[type="text"], .value-row.excluded .value-image { opacity: .45; }
.value-row.excluded .value-origin { text-decoration: line-through; }
/* 한국어가 비어 있는 칸 — 원문이 흐린 글자로 들어 있어 채운 것처럼 보였다 */
.value-row:not(.excluded) input[data-option]:placeholder-shown,
.option-group input[data-option="nameKo"]:placeholder-shown,
input[data-field="titleKo"]:placeholder-shown { border-color: var(--warn-line); background: var(--warn-soft); }
/* 이 상품만 다르게 넣은 값 (기본 설정 값이 아닌 것) */
label.overridden select,
.unit input[data-override]:not(:placeholder-shown) { border-color: var(--accent-line); background-color: var(--accent-soft); }
/* 비워 둔 칸은 기본 설정 값을 검은 글자로 보여 준다 (회색 "기본 500" 대신 그냥 500 — 사용자 요청). 이 상품만 바꾼 값은 위처럼 파란 칸 */
.unit input[data-override]:not(:disabled)::placeholder { color: var(--text); opacity: 1; }

.card .table-wrap:has(.price-table) { max-height: 600px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.price-table th { position: sticky; top: 0; z-index: 1; }
.price-table td, .price-table th { padding: 8px 10px; }
.price-table input[type="number"] { margin: 0; min-height: 34px; width: 96px; text-align: right; padding: 4px 8px; }
.price-table input[type="radio"], .price-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.price-table tr.unavailable td { color: var(--muted); background: #fafafa; }
.price-table td:nth-child(2) { min-width: 140px; }

/* ---------- 알림 ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #111827;
  color: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  /* left:50% 만 두면 오른쪽 절반 너비 안에서만 늘어나 휴대폰에서 알림이 좁고 길어진다 */
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast button { min-height: 32px; border: 0; background: transparent; box-shadow: none; color: #93c0ff; font-weight: 600; }
.toast button:hover:not(:disabled) { background: rgba(255, 255, 255, .08) !important; }

/* 알림 기록 — 사라진 알림을 다시 본다. 여는 단추는 사이드바 맨 아래 */
.sidebar .toast-log-btn ~ .logout { margin-top: 0; }
.toast-log-btn.on { background: rgba(79, 139, 255, .16) !important; color: #fff; box-shadow: inset 3px 0 0 #4f8bff; }
.toast-log-btn .count { background: #ef4444; color: #fff; }
.toast-log {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - 100px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.toast-log[hidden] { display: none; }
.toast-log-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.toast-log-head .hint { margin-right: auto; }
.toast-log-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.toast-log-list li { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.toast-log-list li:last-child { border-bottom: 0; }
.toast-log-list time { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.toast-log-list p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.toast-log-list .empty { color: var(--muted); font-size: 14px; }
.shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; padding: 14px; font-size: 14px; }
.shortcut-list dt { font-family: ui-monospace, monospace; font-weight: 600; white-space: nowrap; }
.shortcut-list dd { margin: 0; color: var(--text-2); }

/* ---------- 좁은 화면 ---------- */

@media (max-width: 820px) {
  /* 휴대폰에서는 도구막대 단추가 왼쪽에 오므로, 오른쪽에 붙인 메뉴가 화면 왼쪽 밖으로 나가 글자가 잘렸다 */
  .menu-list.right { left: 0; right: auto; }
  .menu-list { max-width: calc(100vw - 32px); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: sticky;
    height: 56px;
    z-index: 10;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sidebar .brand { padding: 0 6px 0 0; white-space: nowrap; flex: none; font-size: 16px; }
  .sidebar .brand > span:last-child { display: none; }
  .sidebar nav { display: flex; gap: 2px; }
  .sidebar nav a { white-space: nowrap; gap: 6px; padding: 0 10px; min-height: 38px; }
  .sidebar nav a.on { box-shadow: inset 0 -2px 0 #4f8bff; }
  .nav-group { display: none; }
  .logout { margin: 0 0 0 auto; width: auto; flex: none; padding: 0 10px; }
  .version-tag { display: none; } /* 가로 막대라 "왼쪽 아래" 가 의미 없어 좁은 화면에서는 뺀다 */
  .pc-view-btn { display: flex; }
  /* 목록 표에서 원문(일본어) 상품명 줄은 숨긴다 — 한 줄이 여덟 줄이 되어 목록을 못 훑었다 (2026-09-26 사용자 캡처) */
  .mobile-trim .title + .hint { display: none; }
  .mobile-trim td { padding-top: 8px; padding-bottom: 8px; }
  .mobile-trim .title { font-size: 14px; line-height: 1.4; }
  .logout .nav-label { display: none; }
  .toast-log-btn ~ .logout { margin-left: 0; } /* 맨 오른쪽으로 미는 것은 첫 단추(알림 기록) 하나만 */
  .toast-log { left: 16px; right: 16px; width: auto; bottom: 16px; }
  .content { padding: 20px 16px 96px; }
  h1 { font-size: 21px; }
  /* 좁은 화면에서 표를 가로로 밀어 봐야 잘 안 보인다 → 덜 중요한 칸을 숨기고 남은 칸을 폭에 맞춘다.
     숨기는 것: 사진(카드 보기에 있다) · 상품코드 · 예상이익 · 날짜. 남기는 것: 상품 · 판매가 · 등록 체크 */
  /* 목록 표(수집상품·등록상품)에만 — 전에는 모든 표에 걸려 판매가 표의 옵션·판매가·순수익 칸까지 휴대폰에서 숨었다 */
  .mobile-trim th:nth-child(2), .mobile-trim td:nth-child(2),
  .mobile-trim th:nth-child(4), .mobile-trim td:nth-child(4),
  .mobile-trim th:nth-child(6), .mobile-trim td:nth-child(6),
  .mobile-trim th:nth-child(8), .mobile-trim td:nth-child(8) { display: none; }
  table.mobile-trim { width: 100%; table-layout: fixed; }
  .mobile-trim th:nth-child(1), .mobile-trim td:nth-child(1) { width: 34px; padding: 10px 0 10px 10px; }
  .mobile-trim th:nth-child(5), .mobile-trim td:nth-child(5) { width: 84px; }
  .mobile-trim th:nth-child(7), .mobile-trim td:nth-child(7) { width: 86px; }
  .mobile-trim td:nth-child(7) .pill, .mobile-trim td:nth-child(7) .chip { font-size: 11px; line-height: 1.35; }
  .list-table td:nth-child(3) { min-width: 0; }
  .list-table td:nth-child(7) { min-width: 0; }

  /* 좁은 화면에서는 도구막대가 네 줄이 되어 화면의 1/3 을 먹었다 → 붙여 두지 않고 같이 스크롤시킨다 */
  .toolbar { position: static; padding: 10px; }
  /* 검색이 가장 자주 쓰는 칸이라 맨 위 줄에 둔다 (전에는 order:3 으로 맨 아래였다) */
  .toolbar .search { width: 100%; order: -1; }
  .toolbar-actions { margin-left: 0; flex-wrap: wrap; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .card-media { padding: 10px; }
  .product-card .price { font-size: 16px; }
  /* 휴대폰은 위에 메뉴 줄이 붙어 있어 탭은 같이 스크롤시킨다 */
  .settings-nav { position: static; }
  .card { padding: 16px; }
  .card > .card-title:first-child,
  .card > .row-between:first-child:has(> .card-title) { margin: 0 -16px 14px; padding: 0 16px 12px; }
  .two { grid-template-columns: 1fr; }
  .editor-top { top: 64px; }
  .editor-head { flex-wrap: wrap; padding: 10px 12px 6px; }
  .editor-title { order: -1; flex-basis: 100%; }
  /* ← 목록 옆 한 줄에 쪽 번호·삭제·점검·저장을 붙여 놓는다 (등록 전 점검이 들어오며 좁아졌다) */
  /* 다 안 들어가면(업로드 메뉴가 늘며 더 좁아졌다) 페이지가 아니라 이 줄만 옆으로 스크롤한다 */
  /* 오른쪽 정렬은 넘칠 때 왼쪽 단추(‹ › 다음 할 일)가 화면 밖으로 밀려 스크롤로도 못 닿았다 → 첫 단추의 auto 여백으로 (넘치면 0) */
  .editor-head > .inline > :first-child { margin-left: auto; }
  .editor-head > .inline { flex: 1 1 0; min-width: 0; justify-content: flex-start; gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .editor-head > .inline::-webkit-scrollbar { display: none; }
  /* 가로 스크롤 줄(overflow-x:auto) 안에서는 드롭다운이 잘린다 → 화면 아래에 고정해서 띄운다 (2026-09-26 디자인 검토) */
  .editor-head .menu-list.right { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; z-index: 30; }
  .editor-head > .inline > * { flex: none; }
  .editor-head > .inline button { padding-inline: 10px; }
  /* 업로드 단추가 줄 맨 끝에 붙어 있어, 메뉴는 왼쪽으로 펼친다(오른쪽으로 펼치면 화면 밖으로 나간다) */
  .editor-head .menu-list.right { left: auto; right: 0; }
  #editorPos { white-space: nowrap; }
  .save-state { font-size: 11px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .wide-only { display: none; }
  .checklist { padding: 0 12px 10px; }
  /* 좁은 화면: 통과한 항목은 개수만, 부족한 항목만 이름을 보여 준다 */
  .checklist .pill.ok { display: none; }
  .checklist .checklist-short { display: inline-flex; }
  .status-list { grid-template-columns: 110px 1fr; }
  .value-row { grid-template-columns: 20px 72px minmax(0, 1fr) auto; gap: 4px; padding: 4px 0; }
  /* 옵션 이미지가 있는 줄은 칸이 하나 더 있다 — 전에는 이 규칙이 없어 한국어 칸이 손가락 하나만큼 좁아졌다 */
  .value-row.has-image { grid-template-columns: 20px 32px 60px minmax(0, 1fr) auto; }
  .value-row.has-image .value-image { width: 32px; height: 32px; }
  /* 상세페이지 만들기: 세 칸 → 위아래로 */
  .detail-studio { grid-template-columns: minmax(0, 1fr); }
  .detail-photos, .detail-side { position: static; max-height: none; }
  /* 이미 휴대폰 폭이라 PC/모바일 미리보기 고르기가 의미 없다 — 툴바 줄 수를 줄인다 */
  .detail-toolbar .segmented { display: none; }
  .detail-toolbar .sep { display: none; }
  .detail-toolbar { padding: 6px; gap: 6px; }
  .detail-photo-list { grid-template-columns: repeat(4, 1fr); }
  .detail-toolbar { position: static; }
  .detail-canvas { padding: 10px; }
  /* 대기목록: 줄이 좁으면 단추를 아래로 내린다 */
  .queue-row { flex-wrap: wrap; }
  .queue-actions { width: 100%; }
  .queue-actions > * { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input { flex-basis: 100%; }
  .inline-form button { width: 100%; }
}


/* ---------- 모바일 미리보기 ----------
   넓은 화면에서 "휴대폰에서 어떻게 보이나" 를 보려고 만든 것.
   같은 앱을 390px 짜리 iframe 으로 띄운다 — 폭이 진짜로 390px 이라 반응형 규칙이 그대로 걸린다.
   (앱 안에 또 앱이 뜨므로 iframe 안에서는 이 단추를 숨긴다 — app.js 가 window.top 을 보고 가른다) */

/* 여는 단추는 사이드바 맨 아래 (전에는 오른쪽 아래에 떠 있어 카드·표 끝을 가렸다) */
.sidebar .mobile-peek-btn + .logout { margin-top: 0; }
.mobile-peek-btn.on { background: rgba(79, 139, 255, .16) !important; color: #fff; box-shadow: inset 3px 0 0 #4f8bff; }

.mobile-peek {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 39;
  width: 390px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mobile-peek-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.mobile-peek-head .hint { margin-right: auto; }
.mobile-peek iframe { display: block; width: 390px; height: 780px; max-height: calc(100vh - 100px); border: 0; background: var(--bg); }

/* 좁은 화면은 이미 모바일이라 단추를 숨긴다 */
@media (max-width: 1100px) {
  .mobile-peek-btn, .mobile-peek { display: none; }
}

/* 고른 선택지에서 안 쓰이는 입력 칸 — 넣어도 소용없다는 것을 보이게 */
label.unused { opacity: .55; }
label.unused input, label.unused select { background: var(--panel-2); cursor: not-allowed; }

/* ---------- 올리기 전 점검 ---------- */
.dialog.wide { max-width: 760px; }
.preflight-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.preflight-item + .preflight-item { margin-top: 8px; }
.preflight-item .name { font-weight: 600; margin-bottom: 4px; }
.preflight-item ul { margin: 0; padding-left: 18px; }
.preflight-item li { line-height: 1.6; }
.preflight-item li.stop { color: var(--danger); }
.preflight-item li.warn { color: var(--warn, #9a5b00); }
/* 본문만 스크롤시킨다 — 푸터를 sticky 로 두면 뒤로 내용이 비쳐 지저분했다 */
#preflightBody { overflow-y: auto; max-height: min(60vh, 520px); }
.preflight-foot { padding-top: 12px; border-top: 1px solid var(--line); }

/* 기본 설정: 저장하지 않은 변경이 있으면 저장 막대에서 눈에 띄게 */
#settingsStatus.unsaved { color: var(--warn); font-weight: 600; font-size: 13px; }
#settingsStatus.saved { color: var(--ok); font-size: 13px; }
/* 숫자 하나만 넣는 칸이 카드 폭만큼 늘어나지 않게 */
label.narrow { max-width: 260px; }

/* 상세페이지 공통: 공통 이미지에 들어 있는 고지 체크 */
.notice-images { display: grid; gap: 8px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.notice-images .inline { gap: 8px 18px; }

/* ---------- 이미지 편집기 (Filerobot, public/vendor) ---------- */

.image-editor-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .55); padding: 16px; }
.image-editor-overlay > div { width: 100%; height: 100%; background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
/* 편집기가 떠 있는 동안에는 뒤 화면이 같이 스크롤되지 않게 */
body.editor-open { overflow: hidden; }

/* ---------- 가벼운 사진 편집기 (public/imageEditor.js) ---------- */
.lite-editor { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
.lite-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.lite-options { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 46px; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.lite-options label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text-2); }
.lite-options input, .lite-options select { margin: 0; min-height: 32px; padding: 0 8px; }
.lite-options input[type="color"] { width: 36px; padding: 2px; }
.lite-spacer { flex: 1; }
.lite-stage { position: relative; display: grid; place-items: center; overflow: hidden; background: #f3f4f6; background-image: linear-gradient(45deg, #e9ebef 25%, transparent 25%, transparent 75%, #e9ebef 75%), linear-gradient(45deg, #e9ebef 25%, transparent 25%, transparent 75%, #e9ebef 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.lite-stage canvas { box-shadow: var(--shadow); background: #fff; touch-action: none; cursor: crosshair; }
.lite-stage[data-tool="text"] canvas { cursor: text; }
.lite-rect { position: absolute; pointer-events: none; border: 2px solid var(--accent); background: rgba(56, 116, 255, .12); box-shadow: 0 0 0 9999px rgba(17, 24, 39, .18); }
.lite-stage[data-tool="mask"] .lite-rect { box-shadow: none; }
.lite-rect::after { content: attr(data-size); position: absolute; right: 0; bottom: -22px; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; white-space: nowrap; }
.lite-status { padding: 8px 14px; border-top: 1px solid var(--line); min-height: 34px; }
@media (max-width: 820px) {
  .lite-toolbar { padding: 8px; gap: 6px; }
  .lite-toolbar .inline { flex-wrap: wrap; }
}

@media (max-width: 820px) {
  .image-editor-overlay { padding: 0; }
  .image-editor-overlay > div { border-radius: 0; }
}

/* 편집 화면 자동 저장 상태 (저장 단추 옆) */
.save-state { white-space: nowrap; margin-right: 4px; }
.save-state.saved { color: var(--ok); }
.save-state.error { color: var(--danger); font-weight: 600; }

/* 붙어 있는 머리·도구막대 위쪽 틈으로 아래 내용(사진 등)이 비쳐 보였다 → 그 틈을 배경색으로 덮는다 */
@media (min-width: 1101px) {
  .editor-top, .toolbar { box-shadow: 0 -12px 0 var(--bg), var(--shadow); }
  .settings-nav { box-shadow: 0 -12px 0 var(--bg), var(--shadow-sm); }
  .detail-toolbar { box-shadow: 0 -8px 0 var(--bg); }
}

@media (max-width: 820px) {
  /* 판매가 표는 칸을 숨기지 않는다 (판매가·순수익이 핵심) — 대신 입력 칸을 좁혀 덜 밀리게 */
  .price-table input[type="number"] { width: 78px; }
  .price-table input.sale-price { width: 90px; }
  .price-table td, .price-table th { padding: 8px 6px; }
}

/* 상세페이지 탭 정렬
   ① 툴바가 두 줄이 되면 오른쪽 묶음(⋯·PC/모바일)이 두 줄 사이 어중간한 높이에 떠 있었다 → 첫 줄에 맞춘다
   ② PC/모바일 고르기만 36px 라 다른 단추(32px)보다 컸다
   ③ 왼쪽 "상세페이지이미지 4장" 제목이 두 줄로 넘어가 오른쪽 "구성" 카드와 구분선 높이가 달랐다 → 한 줄로 */
.detail-toolbar { align-items: flex-start; }
.detail-toolbar .segmented { padding: 2px; }
.detail-toolbar .segmented button { min-height: 28px; }
.detail-photos > .card-title { flex-wrap: nowrap; white-space: nowrap; }

/* 원본 상품명 직역 (2026-09-26) */
.literal-line { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text); }
.literal-line .hint { flex: none; }
.literal-line .ai-btn { padding: 2px 8px; font-size: 12px; }

/* 네이버에서 들여온 상품 · 원본 연결 안 됨 (2026-09-26) */
.src-naver { background: #e3f7ec !important; color: #027a37 !important; }
.product-card .source.src-naver { border-color: #a7e3c2; }
.pill.src-unlinked { background: #fff1dc; color: #b45309; font-weight: 700; }
#editorLink.warn { color: #b45309; border-color: #f6d7a7; font-weight: 600; }

/* 가져온 상품 (2026-09-26) */
#adoptJobBox .progress { height: 8px; background: var(--line, #e3e6ea); border-radius: 4px; overflow: hidden; }
#adoptJobBox .progress > div { height: 100%; width: 0; background: var(--accent, #2b6cb0); transition: width .4s; }
#importedBody .title { cursor: pointer; }
#importedBody .title:hover { text-decoration: underline; }

/* ZOZOTOWN 출처 뱃지 (2026-09-26) */
.src-zozo { background: #eceff3 !important; color: #111827 !important; }
.product-card .source.src-zozo { border-color: #cfd5dd; }

/* 개발 공부 (2026-09-26) */
.study .study-flow { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.7; }
.study table td, .study table th { vertical-align: top; }
.study table td:first-child { white-space: nowrap; }
.study td.muted { color: var(--muted); }
.study-terms { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.study-terms dt { font-weight: 700; }
.study-terms dd { margin: 0; color: var(--text); }
.study-log { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 720px) { .study-terms { grid-template-columns: 1fr; } .study-terms dd { margin-bottom: 6px; } .study table td:first-child { white-space: normal; } }

/* AI 지우개 원형 붓 (2026-09-26 — 윈들리 매직브러시처럼) */
.lite-brush { position: absolute; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(239, 68, 68, .42); border: 1.5px solid rgba(220, 38, 38, .9); z-index: 2; }
.lite-stage[data-tool="erase"] canvas { cursor: none; }
[data-brush-size] { display: inline-block; min-width: 44px; font-variant-numeric: tabular-nums; }

/* 편집기 단축키 · 선택 사각형 옮기기·크기 · 스포이드 (2026-09-26) */
.lite-editor kbd { margin-left: 5px; padding: 0 4px; border: 1px solid var(--line, #e3e6ea); border-radius: 4px; font: 600 10px/16px ui-monospace, Consolas, monospace; color: var(--muted, #6b7280); background: var(--panel, #fff); }
.lite-rect > i { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--accent, #2b6cb0); border-radius: 2px; }
.lite-rect > i[data-h="nw"] { left: -6px; top: -6px; }
.lite-rect > i[data-h="ne"] { right: -6px; top: -6px; }
.lite-rect > i[data-h="sw"] { left: -6px; bottom: -6px; }
.lite-rect > i[data-h="se"] { right: -6px; bottom: -6px; } .lite-rect > i[data-h="n"] { left: calc(50% - 6px); top: -6px; } .lite-rect > i[data-h="s"] { left: calc(50% - 6px); bottom: -6px; } .lite-rect > i[data-h="w"] { left: -6px; top: calc(50% - 6px); } .lite-rect > i[data-h="e"] { right: -6px; top: calc(50% - 6px); }
.lite-stage.picking canvas { cursor: copy; }

/* 사진 주소로 추가 칸 (2026-09-26) */
.add-tile.url-tile { font-size: 22px; }

/* 가리기 사각형(얹기) 테두리 (2026-09-26) */
.lite-rect.layer { box-shadow: none; border-style: dashed; background: transparent; }

/* 소싱 분석 — 검색광고 합계 (2026-09-26) */
.src-summary { gap: 28px; }
.src-summary b { font-size: 18px; }

/* 스토어 고르기 (2026-09-26 여러 스토어) */
.store-switch { display: flex; align-items: center; gap: 8px; margin: -4px 12px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; text-align: left; font-size: 13px; }
.store-switch b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-switch .hint { color: rgba(255,255,255,.6); }
.store-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.store-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; overflow: hidden; }
.store-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.store-dialog-head { background: #03c75a; color: #fff; font-weight: 700; font-size: 18px; padding: 16px 22px; }
.store-dialog-body { padding: 16px 22px 20px; display: grid; gap: 12px; }
.store-list { display: grid; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow: hidden; }
.store-row { display: flex; justify-content: flex-start; width: 100%; align-items: center; gap: 10px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line, #e5e7eb); background: #fff; cursor: pointer; text-align: left; font-size: 15px; }
.store-row:last-child { border-bottom: 0; }
.store-row:hover, .store-row.on { background: #f5f8ff; }
.store-live { margin-left: auto; color: #16a34a; font-size: 13px; font-weight: 700; }
.store-add summary { cursor: pointer; color: var(--accent, #2563eb); font-weight: 600; }