/* ============================================================
   구원소싱기 - 셀러구원 확정 디자인 체계(2026-08-17)
   바탕 통일(쿨그레이+흰 카드) + 소싱기 포인트 색 에메랄드 #0ca678
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden 속성이 항상 우선하도록 (팝업/로그인 화면 숨김 보장) */
[hidden] { display: none !important; }

:root {
  --accent: #0ca678;     /* 소싱기 에메랄드 - 브랜드/강조 (도구별 포인트 색) */
  --accent-h: #099268;   /* hover */
  --accent-a: #087f5b;   /* pressed/active */
  --bg: #f5f5f7;         /* 페이지 배경(서피스) */
  --canvas: #ffffff;     /* 카드/입력 흰 면 */
  --line: #e9ebee;       /* 카드 경계(subtle) */
  --line2: #dadce0;      /* 입력/구분선(hairline) */
  --text: #333333;       /* 본문 */
  --muted: #767676;      /* 캡션 */
  --muted2: #5f6368;     /* 보조 텍스트 */
  --link: #087f5b;       /* 링크 - 에메랄드 딥 */
  --error: #e74c3c;      /* 에러/하락 */
  --warning: #f5a623;    /* 주의 */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-full: 9999px;
  --sh-subtle: 0 1px 2px rgba(0,0,0,.06);
  --sh-standard: 0 2px 8px rgba(0,0,0,.1);
  --sh-prominent: 0 4px 16px rgba(0,0,0,.12);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", Helvetica, Arial, "Nanum Gothic", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; letter-spacing: -0.2px;
}

/* 공통 버튼 */
button { cursor: pointer; border: none; border-radius: var(--r-sm); padding: 9px 14px;
  font-size: 14px; font-weight: 700; background: var(--accent); color: #fff; }
button:hover { background: var(--accent-h); }
button:active { background: var(--accent-a); }
button:disabled { background: var(--line2); color: #999; cursor: default; }
button.ghost { background: var(--canvas); color: var(--text); border: 1px solid var(--line2); font-weight: 500; }
button.ghost:hover { background: var(--bg); }
button.small { padding: 7px 12px; font-size: 12px; }

/* 로그인 / 승인대기 화면 (그린 배경 금지 → 밝은 서피스) */
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg); }
.auth-card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 26px; width: 100%; max-width: 360px; box-shadow: var(--sh-standard); }
.auth-brand { font-size: 24px; font-weight: 800; text-align: center; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.brand-logo { width: 30px; height: 30px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--bg); padding: 4px; border-radius: var(--r-md); }
.auth-tabs button { flex: 1; background: transparent; color: var(--muted2); padding: 9px; border-radius: var(--r-sm); font-weight: 700; }
.auth-tabs button.active { background: var(--canvas); color: var(--accent-a); box-shadow: var(--sh-subtle); }
#authForm { display: flex; flex-direction: column; gap: 10px; }
#authForm input { padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 15px; color: var(--text); }
#authForm input:focus { outline: none; border: 2px solid var(--accent); }
#authSubmit { padding: 13px; font-size: 16px; font-weight: 700; margin-top: 4px; min-height: 48px; }
#authSubmit:disabled { opacity: .6; }
.auth-msg { text-align: center; font-size: 13px; margin-top: 14px; min-height: 18px; color: var(--accent-a); line-height: 1.5; }
.auth-alt { text-align: center; font-size: 13px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted2); }
.auth-alt a { color: var(--link); font-weight: 700; text-decoration: none; }
.pending-cta { display: block; text-align: center; background: var(--accent); color: #fff; border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 14px; font-weight: 700; text-decoration: none; margin-bottom: 8px; }
.pending-cta:hover { background: var(--accent-h); }

/* 승인 대기 화면 */
.pending-msg { text-align: center; font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 14px; }
.pending-email { text-align: center; font-size: 13px; color: var(--muted2); margin-bottom: 18px; }
#pending .auth-card button { width: 100%; }

/* 관리자 회원관리 */
.admin-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#adminSearch { flex: 1; min-width: 160px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 14px; }
#adminSearch:focus { outline: none; border: 2px solid var(--accent); }
.admin-stat { font-size: 12px; color: var(--muted2); white-space: nowrap; }
.admin-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.m-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-email { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.m-date { font-size: 11px; color: var(--muted); }
.m-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.m-badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; }
.m-badge.ok { background: #e7f8ee; color: #02a046; }
.m-badge.wait { background: #fff4e0; color: #b8780c; }
.m-badge.admin { background: #f3e8ff; color: #7b2cbf; }
.m-btn { padding: 7px 14px; font-size: 12px; font-weight: 700; }
.m-btn.approve { background: var(--accent); }
.m-btn.block { background: var(--canvas); color: var(--error); border: 1px solid #f3c0bb; font-weight: 700; }
.m-btn.block:hover { background: #fde8e6; }
.admin-note { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5;
  background: var(--bg); padding: 10px 12px; border-radius: var(--r-md); }

/* 상단바 (네이버: 흰 배경 + 그린 워드마크) */
.topbar {
  background: var(--canvas); color: var(--text); padding: 14px 20px;
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.userbox { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#userEmail { color: var(--muted2); }
.logo { width: 34px; height: 34px; display: block; }
.topbar h1 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--accent); }
.topbar p { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ⚠ 이 폭이 표가 잘리는지를 좌우합니다.
   탐색기 칸이 붙어 표가 13 → 16칸이 됐는데 1480px 로 묶여 있어서
   넓은 화면에서도 오른쪽 칸(시장 매출·최고 매출)이 잘렸습니다.
   표 최소폭(1480px) + 좌우 여백보다 넉넉해야 가로 스크롤 없이 다 보입니다. */
main { max-width: 1760px; margin: 0 auto; padding: 16px 20px 60px; }

/* 탭 (전체 / 즐겨찾기 / 숨김) - 네이버 칩 스타일 */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs .tab {
  background: var(--canvas); color: var(--text); border: 1px solid var(--line2);
  padding: 8px 16px; border-radius: var(--r-full); font-weight: 500; font-size: 13px;
}
.tabs .tab:hover { background: var(--bg); }
.tabs .tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.tabs .tab span { font-variant-numeric: tabular-nums; opacity: .85; }

/* 컨트롤 */
.controls { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row + .row { margin-top: 10px; }
.filters { gap: 12px; }
/* 키워드 검색 = 녹색창 (그린 테두리 강조) */
#q { flex: 1; min-width: 220px; height: 48px; padding: 0 16px; border: 2px solid var(--accent);
  border-radius: var(--r-md); background: var(--canvas); color: var(--text); font-size: 15px; }
#q:focus { outline: none; border-color: var(--accent-a); }
#q::placeholder { color: #999; }
#item { height: 48px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); min-width: 160px; font-size: 14px; color: var(--text); }
#item:focus { outline: none; border: 2px solid var(--accent); }
.filters label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted2); gap: 4px; }
.filters input, .filters select { padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 13px; min-width: 110px; color: var(--text); }
.filters input:focus, .filters select:focus { outline: none; border: 2px solid var(--accent); }
.filters .chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); align-self: flex-end; padding-bottom: 8px; }
.filters .chk input { accent-color: var(--accent); }
button.ghost { align-self: flex-end; }
.count { margin-top: 12px; font-size: 13px; color: var(--muted2); }
.count strong { color: var(--accent-a); font-size: 16px; }

/* 표 */
.tablewrap { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto; }
/* ⚠ min-width 는 칸 수에 맞춰 정합니다. (지금 14칸 — 🌏 해외대행 추가) */
table { width: 100%; border-collapse: collapse; min-width: 1360px; }
thead th {
  background: var(--bg); color: var(--muted2); font-size: 12px; font-weight: 700;
  padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line2); white-space: nowrap;
  position: sticky; top: 0;
}
th.num { text-align: right; }
/* 정렬 가능한 헤더 + 화살표(↕ ▲ ▼) */
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: var(--text); }
thead th .sar { font-size: 11px; opacity: .35; margin-left: 1px; }
thead th.sorted { color: var(--accent-a); }
thead th.sorted .sar { opacity: 1; color: var(--accent); }
tbody td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg); }
.kw { font-weight: 700; color: var(--text); }

/* 순위 — 지금 정렬 기준의 순번 (표 맨 앞) */
th.rank-col { width: 46px; text-align: center; }
td.rank-col {
  text-align: center; color: var(--muted2); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 12px;
}

/* 액션(★ ✕ 🔍) */
th.act { width: 76px; text-align: center; }
td.act { text-align: center; white-space: nowrap; }
td.act .star, td.act .hide, td.act .lens {
  display: inline-block; cursor: pointer; user-select: none; font-size: 16px;
  width: 22px; line-height: 22px; border-radius: var(--r-sm); vertical-align: middle;
}
td.act .star { color: #cfd6d1; }
td.act .star:hover { color: #f5a623; }
td.act .star.on { color: #f5a623; }
td.act .hide { color: #cfd6d1; font-size: 13px; }
td.act .hide:hover { color: var(--error); background: #fde8e6; }
td.act .hide.on { color: var(--accent-a); }
td.act .lens { font-size: 13px; filter: grayscale(1); opacity: .45; }
td.act .lens:hover { filter: none; opacity: 1; background: #e7f1ff; }
body.lens-ready td.act .lens { filter: none; opacity: .8; }

/* 윙렌즈 안내 모달 */
.lens-state { padding: 11px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; }
.lens-state.ok { background: #e8f6ef; color: #0c7a55; }
.lens-state.ok small { margin-left: 6px; color: #6b8f81; font-weight: 500; }
.lens-state.no { background: #fff5e6; color: #a86a08; }
.lens-guide { margin-top: 16px; }
.lens-guide h3 { margin: 18px 0 8px; font-size: 14px; }
.lens-guide ol { margin: 0; padding-left: 20px; color: var(--text); font-size: 13px; line-height: 1.9; }
.lens-guide code { padding: 1px 6px; border-radius: 4px; background: #eef1ee; font-size: 12px; }

/* 경쟁강도 뱃지 */
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; }
.b-low { background: #e7f8ee; color: #02a046; }
.b-mid { background: #fff4e0; color: #b8780c; }
.b-high { background: #fde8e6; color: var(--error); }

/* 소싱점수 뱃지 */
.sbadge { display: inline-block; min-width: 38px; padding: 3px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.s-gold { background: #fff4e0; color: #b8780c; border: 1px solid #f5d27a; }
.s-good { background: #e7f8ee; color: #02a046; }
.s-mid  { background: var(--bg); color: var(--muted2); }
.s-low  { background: #fafafa; color: #aab2ac; }

/* ===== 확장 업데이트 안내 띠 ===== */
.ext-update {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff6e5; border: 1px solid #f5d99a; border-radius: var(--r-md);
  padding: 12px 16px; margin-bottom: 12px;
}
.ext-update-mark {
  width: 26px; height: 26px; border-radius: 9999px; background: #a86a08; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.ext-update p { margin: 0; flex: 1; font-size: 13.5px; color: #7a4e05; line-height: 1.6; }
.ext-update button { background: #a86a08; }
.ext-update button:hover { background: #8d5906; }
.ext-update button:disabled { background: var(--line2); color: #999; }

/* ===== 해외대행 추천 배너 (기본 화면) ===== */
.reco-bar {
  background: linear-gradient(180deg, #f2f8ff, #eaf2ff);
  border: 1px solid #cfe0fb; border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 14px;
}
.reco-head { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
.reco-head b { font-size: 16px; color: #1257c4; }
/* 전체 키워드 보기 — 왼쪽에 크게. 켜면 색이 바뀌어 지금 무엇을 보고 있는지 바로 압니다. */
.reco-all {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 16px; border-radius: 9999px; border: 2px solid var(--line2);
  background: var(--canvas); color: var(--text); font-size: 15px; font-weight: 700;
}
.reco-all:hover { border-color: var(--accent); }
.reco-all input { width: 19px; height: 19px; accent-color: var(--accent); cursor: pointer; }
.reco-all:has(input:checked) { border-color: var(--accent); background: #e8f6ef; color: var(--accent-a); }
.reco-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: #2b6cb0; }
.reco-note.warn { color: #a86a08; font-weight: 600; }

/* 🌏 해외대행 점수 — 소싱점수와 헷갈리지 않게 파란 계열로 구분 */
.obadge { display: inline-block; min-width: 38px; padding: 3px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.o-gold { background: #e6f0ff; color: #1257c4; border: 1px solid #a9c6f5; }
.o-good { background: #eef4ff; color: #2b6cb0; }
.o-mid  { background: var(--bg); color: var(--muted2); }
.o-low  { background: #fafafa; color: #aab2ac; }
th.ohs-col, td.ohs-col { background: #f6faff; white-space: nowrap; }

/* 가격대 등급 뱃지 */
.pbadge { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; }
.p-low { background: var(--bg); color: var(--muted2); }
.p-mid { background: #e7f8ee; color: #02a046; }
.p-high { background: #fff4e0; color: #b8780c; }
.p-prem { background: #f3e8ff; color: #7b2cbf; }

.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ===== 행 호버 미리보기 카드 ===== */
.hovercard { position: fixed; z-index: 60; width: 320px; background: var(--canvas);
  border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--sh-prominent);
  padding: 14px 16px; font-size: 13px; pointer-events: none; }
.hc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.hc-head b { font-size: 15px; color: var(--text); }
.hc-item { color: var(--muted2); font-size: 12px; }
.hc-badges { display: flex; gap: 6px; margin-bottom: 8px; }
.hc-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.hc-l { color: var(--muted2); }
.hc-v { font-weight: 700; color: var(--text); white-space: nowrap; }
.hc-v small { font-weight: 500; color: var(--muted2); }
.hovercard .up.pos { color: #02a046; font-size: 11.5px; }
.hovercard .up.neg { color: var(--error); font-size: 11.5px; }
.hc-sec { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px;
  color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.hc-dot { width: 8px; height: 8px; border-radius: 999px; }
.hc-dot.n { background: #03c75a; }
.hc-dot.c { background: #e74c3c; }
.hc-tip { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; text-align: center; }

/* 페이지 */
.pager { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 16px; }
.pager button { background: var(--canvas); color: var(--text); border: 1px solid var(--line2); font-weight: 500; }
.pager button:hover { background: var(--bg); }
.pager button:disabled { opacity: .4; cursor: default; }
#pageInfo { font-size: 13px; color: var(--muted2); }

/* 상세 팝업 */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal-box { background: var(--canvas); border-radius: var(--r-md); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px; position: relative; box-shadow: var(--sh-prominent); }
.modal-box h2 { color: var(--text); margin-bottom: 16px; padding-right: 30px; font-size: 20px; font-weight: 700; }
.modal-box h2 .m-item { font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: var(--r-full); vertical-align: middle; margin-left: 6px; }
.close { position: absolute; top: 14px; right: 14px; background: var(--bg); color: var(--text); width: 32px; height: 32px; border-radius: 50%; padding: 0; z-index: 2; font-weight: 500; }
.close:hover { background: var(--line); }

/* 쇼핑 검색 바로가기 */
.shoplinks { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
/* 상세팝업 네이버/쿠팡 섹션 (위아래 분리) */
.msec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.msec-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 800; font-size: 15px; color: var(--text); }
.msec-h .shoplink { padding: 7px 14px; font-size: 12px; }
.shoplink {
  flex: 1; min-width: 160px; text-align: center; text-decoration: none;
  padding: 12px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px;
  color: #fff; transition: opacity .15s;
}
.shoplink:hover { opacity: .88; }
.shoplink.naver { background: var(--accent); }
.shoplink.coupang { background: #ec1f30; }

/* 카드 대시보드 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.stat-ic { font-size: 20px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--canvas); border-radius: var(--r-md); flex-shrink: 0; }
.stat-l { font-size: 11px; color: var(--muted2); margin-bottom: 3px; }
.stat-v { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-v small { font-size: 11px; font-weight: 500; color: var(--muted); }
.up { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-sm); }
.up.pos { color: var(--error); background: #fde8e6; }
.up.neg { color: var(--link); background: #e6f0fb; }

/* 진입시점 추세 그래프 */
.trendbox { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.trend-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.trend-graph { position: relative; }
.trend-svg { width: 100%; height: auto; background: var(--bg); border-radius: var(--r-md); display: block; }
.t-overlay { cursor: crosshair; touch-action: none; }
.t-guide { stroke: var(--error); stroke-width: 1; stroke-dasharray: 3 3; }
.t-hover { fill: var(--error); stroke: #fff; stroke-width: 2; }
.t-tip { position: absolute; transform: translate(-50%, -135%); background: var(--text); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-md); white-space: nowrap;
  pointer-events: none; z-index: 3; box-shadow: var(--sh-standard); }
.t-tip b { color: #6ee7a0; }
.t-tip small { opacity: .65; font-weight: 600; }
.trend-basis { margin-top: 8px; font-size: 12px; color: var(--muted2); line-height: 1.5;
  background: var(--bg); border-radius: var(--r-md); padding: 8px 11px; }
.trend-basis b { color: var(--accent-a); }
.t-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.t-area { fill: rgba(3,199,90,.10); stroke: none; }
.t-peak { fill: var(--error); stroke: #fff; stroke-width: 2; }
.ax { fill: #9aa49d; font-size: 10px; text-anchor: middle; }
.trend-tip { margin-top: 8px; font-size: 13px; background: #e8f1fd; border-radius: var(--r-md); padding: 10px 12px; }
.trend-tip b { color: var(--accent-a); }
.trend-note { font-size: 12px; color: var(--muted2); margin-top: 4px; }
.no-trend { text-align: center; color: var(--muted); font-size: 13px; padding: 16px; line-height: 1.6; }

/* 같은 품목 키워드 */
.rel { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.rel-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.rel-row { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: var(--r-md); cursor: pointer; font-size: 13px; }
.rel-row:hover { background: var(--bg); }
.rel-kw { font-weight: 600; color: var(--text); }
.rel-v { color: var(--muted2); font-variant-numeric: tabular-nums; }

/* 쿠팡 태그 생성 */
.taggen { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.tag-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.tag-count { font-weight: 800; color: var(--accent-a); font-variant-numeric: tabular-nums; margin-left: 4px; }
.tag-tip { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--line2);
  color: var(--text); padding: 6px 7px 6px 12px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; }
.chip-x { background: none; border: none; color: var(--muted); font-size: 11px; padding: 0; width: 17px; height: 17px;
  border-radius: 50%; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
.chip-x:hover { background: #fde8e6; color: var(--error); }
.tag-empty { color: var(--muted); font-size: 13px; }
.tag-add { display: flex; gap: 8px; flex-wrap: wrap; }
#tagInput { flex: 1; min-width: 150px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 14px; color: var(--text); }
#tagInput:focus { outline: none; border: 2px solid var(--accent); }

/* 마진계산기 */
.mc-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.mc-rate { display: flex; align-items: center; justify-content: space-between; background: var(--bg); padding: 12px; border-radius: var(--r-md); margin-bottom: 14px; }
.mc-rate label { font-size: 13px; font-weight: 600; color: var(--text); }
.mc-rate input { width: 92px; padding: 7px 9px; border: 1px solid var(--line2); border-radius: var(--r-sm); text-align: right; font-size: 14px; color: var(--text); }
.mc-rate input:focus { outline: none; border: 2px solid var(--accent); }
.mc-field { margin-bottom: 14px; }
.mc-field > label, .mc-grid label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mc-in { width: 100%; padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); text-align: right; font-size: 14px; color: var(--text); }
.mc-in:focus { outline: none; border: 2px solid var(--accent); }
.mc-big { font-size: 18px; font-weight: 700; }
.mc-cost { display: flex; gap: 8px; }
.mc-cost .mc-in { flex: 1; }
.mc-cur { display: flex; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.mc-cur button { background: var(--bg); color: var(--muted2); border: none; padding: 0 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
.mc-cur button.on { background: var(--accent); color: #fff; }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.mc-batch-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.mc-batch-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.exclude-panel { background: var(--canvas); border-radius: var(--r-md); padding: 18px; box-shadow: var(--sh-subtle); }
.ex-empty { font-size: 13px; color: var(--muted2); line-height: 1.6; margin: 0 0 12px; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line2); border-radius: 9999px; padding: 6px 8px 6px 14px; font-size: 14px; font-weight: 600; color: var(--text); }
.ex-x { border: none; background: var(--line2); color: var(--muted2); width: 20px; height: 20px; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ex-x:hover { background: #ffd9d9; color: #d23; }
.ex-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.ex-label { font-size: 12px; font-weight: 700; color: var(--muted2); margin-right: 4px; }
.ex-kwlist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 320px; overflow-y: auto; padding: 10px; background: var(--bg); border-radius: var(--r-sm); }
.ex-kw { font-size: 12px; color: var(--muted2); background: var(--canvas); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 3px 8px; }
.ex-kw.more { color: var(--muted); font-style: italic; border: none; background: transparent; }
/* 🏷 자동 브랜드 제외 */
.ex-brand { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line2); }
.ex-state { font-size: 11px; font-weight: 700; border-radius: 9999px; padding: 2px 9px; }
.ex-state.on { background: #e8f1fc; color: var(--accent); }
.ex-state.off { background: var(--bg); color: var(--muted); }
.ex-kw { display: inline-flex; align-items: center; gap: 4px; }
.ex-back, .ex-rex { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 1px 2px; border-radius: 4px; }
.ex-back:hover { background: #e8f1fc; color: var(--accent); }
.ex-rex:hover { background: #ffd9d9; color: #d23; }
.ex-kw.back { color: var(--text); background: #e8f1fc; border-color: #b7d5f5; }
/* 중국어 번역기 */
.trans-box { max-width: 1040px; width: 96vw; }
.trans-body { display: flex; gap: 14px; align-items: stretch; margin-top: 8px; }
.trans-main { flex: 2.2; min-width: 0; display: flex; flex-direction: column; }
.trans-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line2); padding-left: 14px; }
.trans-side-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.trans-chat { height: 58vh; min-height: 320px; overflow-y: auto; background: var(--bg); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
@media (max-width: 680px) { .trans-body { flex-direction: column; } .trans-side { border-left: none; border-top: 1px solid var(--line2); padding-left: 0; padding-top: 12px; } }
.trans-empty { color: var(--muted2); font-size: 13px; text-align: center; margin: auto; line-height: 1.6; }
.tb { max-width: 85%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.tb-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.tb-ai { align-self: flex-start; background: var(--canvas); color: var(--text); border: 1px solid var(--line2); border-bottom-left-radius: 4px; }
.tb-acts { display: flex; gap: 6px; margin-top: 8px; }
.tb-copy, .tb-save { font-size: 11px; padding: 3px 10px; border-radius: 9999px; background: var(--bg); color: var(--muted2); border: 1px solid var(--line2); cursor: pointer; }
.tb-copy:hover, .tb-save:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.trans-input { display: flex; flex-direction: column; gap: 8px; }
.trans-input textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 14px; font-family: inherit; resize: vertical; color: var(--text); box-sizing: border-box; }
.trans-input textarea:focus { outline: none; border: 2px solid var(--accent); }
.trans-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 번역기 이미지 첨부 미리보기 */
.trans-img-preview { position: relative; display: inline-block; align-self: flex-start; }
.trans-img-preview img { max-height: 92px; max-width: 220px; border-radius: var(--r-sm); border: 1px solid var(--line2); display: block; }
.trans-img-preview button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 9999px; background: var(--text); color: #fff; border: 2px solid var(--canvas); font-size: 12px; line-height: 1; padding: 0; cursor: pointer; }
/* 채팅 말풍선 안 이미지 썸네일 */
.tb-thumb { max-height: 120px; max-width: 100%; border-radius: 8px; margin-bottom: 6px; display: block; }
.trans-phrases { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.ph-hint { font-size: 12px; color: var(--muted); }
.ph-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 6px 8px 6px 12px; }
.ph-txt { min-width: 0; flex: 1; cursor: pointer; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-zh { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-ko { font-size: 12px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-acts { display: flex; gap: 6px; flex-shrink: 0; }
.ph-copy { font-size: 11px; padding: 3px 9px; border-radius: 9999px; background: var(--canvas); color: var(--muted2); border: 1px solid var(--line2); cursor: pointer; }
.ph-copy:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ph-x { border: none; background: var(--line2); color: var(--muted2); width: 20px; height: 20px; border-radius: 50%; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-x:hover { background: #ffd9d9; color: #d23; }
.mc-hint { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: right; }
.mc-hint.mc-left { text-align: left; }
.mc-result { background: var(--bg); border-radius: var(--r-md); padding: 14px; margin-top: 4px; }
.mc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted2); padding: 3px 0; }
.mc-row.bold { font-weight: 700; color: var(--text); }
.mc-row.big { padding-top: 4px; }
.mc-row small { font-size: 11px; color: var(--muted); font-weight: 500; }
.mc-divider { border-top: 1px solid var(--line2); margin: 8px 0; }
.mc-warn { color: var(--error); font-size: 13px; text-align: center; padding: 8px 0; line-height: 1.5; }
.mc-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 0; }
.mc-strike { text-decoration: line-through; text-decoration-color: #f3c0bb; color: var(--muted2); font-weight: 600; }
.mc-sell { font-size: 22px; font-weight: 800; color: var(--accent-a); }
.mc-real { font-size: 16px; font-weight: 800; color: var(--error); }
.mc-formula { font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.7; }

@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }

footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }

@media (max-width: 600px) {
  .topbar h1 { font-size: 19px; }
  main { padding: 12px; }
  .filters label { min-width: calc(50% - 6px); }
}

/* ===== 잠깐 떴다 사라지는 알림 =====
   창(모달)을 띄우면 어차피 다른 탭으로 넘어가서 아무도 안 봅니다.
   그래서 화면 아래에 조용히 알리고 3초 뒤 사라집니다. */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 9999; max-width: 90vw; padding: 12px 20px;
  border-radius: var(--r-full); background: #17181a; color: #fff;
  font-size: 14px; font-weight: 700; box-shadow: var(--sh-prominent);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ===== 담은 상품 ===== */
/* 컬럼이 많아 기본 모달보다 넓게 씁니다. */
.modal-box.wide { max-width: 1240px; }
.saved-count { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.saved-count strong { color: var(--accent-a); font-variant-numeric: tabular-nums; }
.saved-box { max-height: 62vh; overflow: auto; }
.saved-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.saved-table th, .saved-table td { padding: 9px 10px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: middle; }
.saved-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); font-size: 12px; font-weight: 700; color: var(--muted2); white-space: nowrap; }
.saved-table td.num, .saved-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.saved-table td.rev { font-weight: 800; color: var(--accent-a); }
.saved-table tr:hover td { background: #fafbfc; }

.saved-thumb { width: 54px; }
.saved-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--bg); display: block; }
.saved-name { min-width: 260px; max-width: 380px; }
.saved-name a { color: var(--text); font-weight: 600; text-decoration: none; display: block;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.saved-name a:hover { color: var(--accent); text-decoration: underline; }
.saved-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.saved-table td a { color: var(--accent); text-decoration: none; }
.saved-table td a:hover { text-decoration: underline; }
.saved-table td small { color: var(--muted); font-size: 11px; margin-left: 4px; }

.saved-act { white-space: nowrap; }
.saved-act .chip { padding: 5px 10px; font-size: 12px; cursor: pointer; text-decoration: none; margin-right: 4px; }
.saved-act .chip.china { background: #ff6a00; border-color: #ff6a00; color: #fff; }
.saved-act .chip.del { color: var(--muted); }
.saved-act .chip.del:hover { background: #fde8e6; border-color: var(--error); color: var(--error); }