/* ============================================================
   sellroot 셀러 포털 — 스타일
   파랑 계통 기본형. 셀루트(오렌지)의 감성을 따라가지 않는다.
   다크모드는 만들지 않는다(요구사항: 간결하게).
   ============================================================ */

:root {
  --blue: #2563eb;          /* 주색 */
  --blue-dark: #1e40af;     /* 보조 */
  --blue-soft: #eff6ff;     /* 아주 옅은 파랑(선택 배경) */
  --blue-line: #bfdbfe;

  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;

  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .05);
  --shadow-lg: 0 10px 40px rgba(15, 23, 42, .14);

  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* ── 레이아웃 ───────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ── 사이드바(다크 네이비) — 새 브랜드 디자인 2026-08-20 ── */
.sidebar {
  background: #131c31;
  border-right: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  color: #cfd8ea;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 18px 18px;
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(21, 68, 224, .28);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name {
  font-size: 17px; font-weight: 800; color: #fff;
  letter-spacing: .04em;
}
.brand-name em { font-style: normal; color: #5b9cff; }
.brand-sub { font-size: 10.5px; color: #7d8aa5; margin-top: -1px; letter-spacing: .01em; }

.nav { padding: 6px 10px; flex: 1; overflow-y: auto; }
.nav-group-label {
  font-size: 11px; color: #6b7893; font-weight: 700;
  padding: 12px 10px 6px; letter-spacing: .02em;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #c3cde3;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 3px;
  border: 0; background: none; width: 100%; text-align: left;
  font-family: inherit; font-size: 14px;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-item.active { background: linear-gradient(135deg, #2563eb, #1e40af); color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav-item .star { color: #7fb0ff; font-size: 11px; margin-left: auto; font-weight: 800; }
.nav-item.active .star { color: #dbeafe; }

/* 자동 운영 상태 박스 */
.auto-box {
  margin: 10px 14px 6px; padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.auto-box .t { font-size: 11px; color: #8b98b4; font-weight: 700; }
.auto-box .s { display: flex; align-items: center; gap: 7px; margin: 7px 0 10px; font-size: 13px; color: #e8eefc; font-weight: 700; }
.auto-box .dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.auto-box .dot.off { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.2); }
.auto-box .btn-auto {
  display: block; width: 100%; text-align: center;
  padding: 8px 0; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer;
  font-family: inherit;
}
.auto-box .btn-auto:hover { background: rgba(255,255,255,.18); text-decoration: none; }

.sidebar-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px; color: #8b98b4;
}
.sidebar-foot .who { color: #e8eefc; font-weight: 700; font-size: 13px; }
.sidebar-foot .btn-ghost { color: #9fb0d0; }
.sidebar-foot .btn-ghost:hover { color: #fff; }

/* ── 홈 대시보드(새 디자인 2026-08-20) ── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.kpi-card .head { display: flex; align-items: center; justify-content: space-between; }
.kpi-card .label { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.kpi-card .ico {
  width: 34px; height: 34px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue);
}
.kpi-card .value {
  font-size: 22px; font-weight: 800; margin-top: 10px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-card .value small { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.kpi-card .foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.kpi-card .up { color: #16a34a; font-weight: 700; }
.kpi-card .down { color: #dc2626; font-weight: 700; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
/* ★홈 카드 정렬(대표님 지적 2026-09-15) — 한 줄 틀에 카드가 하나면 가로 전체를 쓴다(왼쪽 반칸만 차고 오른쪽이 비던 것).
   카드 안 숫자칸(kpi-row-fit)은 4칸 틀에 2~3개만 들어가 좁던 것 → 들어 있는 개수대로 폭을 나눈다. */
.dash-grid > .dash-card:only-child { grid-column: 1 / -1; }
.kpi-row.kpi-row-fit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.dash-card > .h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.dash-card > .h h3 { font-size: 14.5px; margin: 0; }
.dash-card > .h a { font-size: 12px; font-weight: 700; }
.dash-card > .b { padding: 6px 18px 16px; }
.stat-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.stat-line:last-child { border-bottom: 0; }
.stat-line .n { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-line .ic {
  width: 26px; height: 26px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 13px; flex: none;
}
.auto-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .auto-sum { grid-template-columns: repeat(2, 1fr); } }
.auto-sum .it { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.auto-sum .it .ic {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; background: var(--blue-soft); color: var(--blue); flex: none;
}
.auto-sum .it b { display: block; font-size: 13px; }
.auto-sum .it span { color: var(--muted); font-size: 12px; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 18px; }
.topbar .sub { color: var(--muted); font-size: 12px; }
.topbar .spacer { flex: 1; }

.content { padding: 22px 24px 60px; width: 100%; }

/* ── 카드 ───────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-head h3 { font-size: 15px; }
.card-head .desc { color: var(--muted); font-size: 12px; }
.card-head .spacer { flex: 1; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ── 지표 타일 ──────────────────────────────────────── */
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.kpi-value { font-size: 26px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; }
.kpi-foot { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi.accent { border-color: var(--blue-line); background: linear-gradient(180deg, var(--blue-soft), #fff); }
.kpi.accent .kpi-value { color: var(--blue-dark); }
.kpi .v-ok { color: var(--ok); }
.kpi .v-warn { color: var(--warn); }
.kpi .v-danger { color: var(--danger); }

/* ── 버튼 ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--line-soft); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-dark { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-dark:hover { background: #172554; }
.btn-danger { background: #fff; border-color: #fecaca; color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--line-soft); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── 폼 ─────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.label {
  display: block; font-size: 12px; font-weight: 700;
  color: #334155; margin-bottom: 6px;
}
.label .opt { color: var(--muted); font-weight: 500; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.hint.warn { color: var(--warn); }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-family: inherit; font-size: 14px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.input[type="color"] { padding: 3px; height: 38px; cursor: pointer; }
.input[type="range"] { padding: 0; border: 0; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }

.check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 600; font-size: 13px;
  user-select: none;
}
.check input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  border: 0; background: #fff; padding: 8px 14px; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--blue); color: #fff; }

/* ── 배지 ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--line-soft); color: var(--muted);
  white-space: nowrap;
}
.badge-ok { background: #ecfdf5; color: var(--ok); }
.badge-warn { background: #fffbeb; color: var(--warn); }
.badge-danger { background: #fef2f2; color: var(--danger); }
.badge-info { background: var(--blue-soft); color: var(--blue-dark); }

/* ── 표 ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th {
  text-align: left; font-size: 12px; color: var(--muted); font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: #fcfdff; white-space: nowrap;
}
table.table td {
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.table tr:last-child td { border-bottom: 0; }
table.table tbody tr:hover { background: #fbfdff; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-name { max-width: 380px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ── 안내/오류 배너 ─────────────────────────────────── */
.notice {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line);
  background: #fff;
}
.notice .n-body { flex: 1; min-width: 0; }
.notice .n-title { font-weight: 700; margin-bottom: 3px; }
.notice .n-detail { color: var(--muted); font-size: 12px; word-break: break-all; }
.notice-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.notice-error .n-detail { color: #b91c1c; }
.notice-info { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-dark); }
.notice-info .n-detail { color: #1d4ed8; }
.notice-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.notice-warn .n-detail { color: #b45309; }

.empty {
  padding: 44px 20px; text-align: center; color: var(--muted); font-size: 13px;
}
.empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }

.skeleton {
  padding: 34px 20px; text-align: center; color: var(--muted); font-size: 13px;
}

/* ── 토스트 ─────────────────────────────────────────── */
.toast-area {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  background: #0f172a; color: #fff;
  padding: 11px 15px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 600; max-width: 420px;
  animation: toast-in .16s ease-out;
}
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }
.toast.warn { background: var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 로그인 ─────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #eff6ff 0%, #f8fafc 45%, #f8fafc 100%);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 30px 28px;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
/* 로그인 화면 정식 로고(건의 #17, 2026-08-24) — 가로 로고라 왼쪽 정렬로 둔다 */
.login-brand-logo { display: block; margin-bottom: 24px; }
.login-logo { display: block; width: 100%; max-width: 240px; height: auto; }
.login-title { font-size: 19px; font-weight: 800; }
.login-desc { color: var(--muted); font-size: 12px; }
.login-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 11px; margin: 18px 0 14px;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ── 등록 마법사(스텝) ──────────────────────────────── */
.step { display: flex; gap: 14px; margin-bottom: 16px; }
.step-num {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.step.off .step-num { background: #cbd5e1; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 800; font-size: 15px; margin-bottom: 2px; }
.step-desc { color: var(--muted); font-size: 12px; margin-bottom: 10px; }

/* 선택 카드(마켓 고르기) */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pick {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer; background: #fff; text-align: left;
  font-family: inherit; transition: border-color .12s, background .12s;
}
.pick:hover { border-color: var(--blue-line); }
.pick.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(37,99,235,.1); }
.pick.disabled { opacity: .55; cursor: not-allowed; }
.pick-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.pick-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }

/* 상품 분류 트리 (대분류 → 중분류 → 소분류) */
.tree { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.tree ul { list-style: none; margin: 0; padding-left: 18px; }
.tree > ul { padding-left: 0; }
/* 대분류는 굵게 — 깊이가 눈에 바로 들어오게 */
.tree > ul > li > .tree-node .tree-label { font-weight: 700; }
.tree-node { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; }
.tree-node:hover { background: var(--line-soft); }
.tree-toggle {
  width: 18px; height: 18px; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 11px; padding: 0; line-height: 1;
}
.tree-toggle.leaf { visibility: hidden; }
.tree-label { font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
/* 분류 이름이 자리를 다 먹고, 상품 수는 오른쪽 끝에 붙게 한다 */
.tree-label .ellipsis { flex: 1; min-width: 0; }
.tree-count { color: var(--muted); font-size: 11px; flex: none; }
.tree input { accent-color: var(--blue); cursor: pointer; }

/* 진행 상황 */
.progress { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s; }
.progress.done > i { background: var(--ok); }
.progress.fail > i { background: var(--danger); }

.stat-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.stat-row div { font-size: 12px; color: var(--muted); }
.stat-row b { display: block; font-size: 18px; color: var(--text); font-weight: 800; }

/* ── 가공 설정 미리보기 ─────────────────────────────── */
.proc-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.preview-pane { position: sticky; top: 78px; }
.preview-canvas-box {
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px; display: flex; justify-content: center;
}
#thumbPreview { width: 100%; max-width: 280px; height: auto; border-radius: 4px; display: block; }

.name-preview {
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.name-preview .before { color: var(--muted); font-size: 12px; text-decoration: line-through; word-break: break-all; }
.name-preview .after { font-weight: 700; margin-top: 6px; word-break: break-all; }
.name-preview .count { font-size: 11px; color: var(--blue-dark); margin-top: 6px; font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 600;
}
.chip button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.chip button:hover { color: var(--danger); }

.badge-editor { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; }
.badge-editor .row { gap: 8px; }

/* ── 마켓 카드 ──────────────────────────────────────── */
.market-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.market-card .mc-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.mc-logo {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.mc-body { padding: 16px; }
.guide-list { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.guide-list li { margin-bottom: 3px; }

/* 마켓에 등록할 접속 주소.
   전에는 flex-wrap 때문에 화면 폭에 따라 주소가 아래로 툭 떨어져 줄이 어긋나 보였다.
   왼쪽 설명 / 오른쪽 주소·복사버튼이 한 줄에 나란히 서고, 세로 가운데로 맞춘다(2026-08-06). */
.ip-box {
  display: flex; align-items: center; gap: 16px;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.ip-box > div:first-child { flex: 1 1 auto; min-width: 0; }
.ip-value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 800; font-size: 16px; color: var(--blue-dark);
  white-space: nowrap; margin-left: auto;
}
.ip-box .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 720px) {
  .ip-box { flex-wrap: wrap; }
  .ip-value { margin-left: 0; }
}

/* ── 비교 모달 ──────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px;
}
.modal-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 860px; max-height: 88vh; overflow: auto;
}
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; background: #fff;
}
.modal-body { padding: 20px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-col { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.compare-col.after { border-color: var(--blue-line); background: #fbfdff; }
.compare-col h4 { font-size: 13px; margin-bottom: 10px; }
.compare-img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: var(--line-soft); border-radius: var(--radius-sm); margin-bottom: 10px;
}
.kv { display: flex; gap: 8px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); width: 84px; flex: none; font-size: 12px; }
.kv .v { flex: 1; min-width: 0; word-break: break-all; }

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .proc-layout { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-item { width: auto; }
  .nav-group-label, .sidebar-foot { display: none; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .content { padding: 16px 14px 50px; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* 회원가입 신청 화면 (2026-08-06 추가) */
.req { color: #dc2626; font-weight: 700; margin-left: 2px; }
.notice-ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.65;
}



/* 로그인 화면 정식 로고 자리 확보 */
.login-brand-logo { display:block; }

.bill-or { text-align:center; color:#8b95a9; font-size:12px; margin:10px 0 8px; position:relative; }
.bill-or::before, .bill-or::after { content:''; position:absolute; top:50%; width:calc(50% - 22px);
  height:1px; background:var(--line,#e6eaf2); }
.bill-or::before { left:0; } .bill-or::after { right:0; }


/* ══ 결제 관리(이용권) — 시안 반영 2026-08-24 ═══════════════════════ */
.pl-wrap { display:flex; flex-direction:column; gap:16px; }
.pl-panel { background:#fff; border:1px solid #e8ecf3; border-radius:14px; padding:20px 22px; }
.pl-h3 { font-size:15px; font-weight:800; color:#111827; margin:0 0 14px; }

/* 히어로 */
.pl-hero { position:relative; background:#fff; border:1px solid #e8ecf3; border-radius:16px;
  padding:26px 26px 18px; }
/* ★배지가 가격박스를 덮지 않게 오른쪽에 자리를 비운다(2026-08-24 실측 교정:
   배지 1315~1397 / 가격박스 994~1389 로 74px 겹쳐 '원' 글자가 가려졌다). */
.pl-hero-in { padding-right:104px; }
.pl-hero-in { display:flex; gap:22px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; }
.pl-hero-l { flex:1; min-width:260px; }
.pl-kicker { font-size:13px; font-weight:700; color:#4b5563; }
.pl-h2 { font-size:30px; font-weight:900; letter-spacing:-.02em; color:#0f172a; margin:6px 0 8px; }
.pl-h2 b { color:#1d4ed8; }
.pl-sub { font-size:14px; color:#475569; margin:0; }
.pl-sub s { color:#94a3b8; }
.pl-sub b { color:#1d4ed8; font-weight:800; }

.pl-pricebox { display:flex; align-items:center; gap:18px; background:#111827; color:#fff;
  border-radius:14px; padding:20px 26px; min-width:330px; }
.pl-pb-col { text-align:center; }
.pl-tag { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:999px; margin-bottom:8px; }
.pl-tag.gray { background:#374151; color:#d1d5db; }
.pl-tag.blue { background:#2563eb; color:#fff; }
.pl-pb-old { font-size:19px; font-weight:700; color:#9ca3af; text-decoration:line-through; }
.pl-pb-new { font-size:26px; font-weight:900; }
.pl-pb-s { font-size:10.5px; color:#9ca3af; margin-top:4px; }
.pl-pb-arrow { width:34px; height:34px; flex:none; border-radius:50%; border:1px solid #4b5563;
  display:flex; align-items:center; justify-content:center; font-size:15px; color:#e5e7eb; }

.pl-badge { position:absolute; top:18px; right:20px; width:84px; height:84px; border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#4f46e5); color:#fff; display:flex;
  flex-direction:column; align-items:center; justify-content:center; line-height:1.15;
  box-shadow:0 6px 16px rgba(79,70,229,.3); }
.pl-badge b { font-size:19px; font-weight:900; }
.pl-badge .s { font-size:10px; opacity:.92; }
.pl-badge-ok { background:linear-gradient(135deg,#059669,#10b981);
  box-shadow:0 6px 16px rgba(16,185,129,.3); }

.pl-feat3-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:20px; padding-top:18px; border-top:1px solid #eef2f7; }
.pl-feat3 { display:flex; gap:12px; align-items:flex-start; }
.pl-feat3 b { display:block; font-size:13.5px; font-weight:800; color:#111827; }
.pl-feat3 span { display:block; font-size:12px; color:#64748b; margin-top:3px; line-height:1.5; }
.pl-ico { width:42px; height:42px; flex:none; border-radius:11px; background:#eff4ff;
  color:#2563eb; display:flex; align-items:center; justify-content:center; }
.pl-ico svg { width:21px; height:21px; }
.pl-ico.sm { width:36px; height:36px; border-radius:9px; }
.pl-ico.sm svg { width:18px; height:18px; }

/* 2단 */
.pl-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }

/* 이용권 정보 표 — dl 대신 table 로 확실하게 가로 정렬 */
.pl-table { width:100%; border-collapse:collapse; }
.pl-table th, .pl-table td { padding:11px 2px; font-size:13px; border-bottom:1px solid #f1f5f9;
  vertical-align:middle; }
.pl-table th { text-align:left; color:#64748b; font-weight:600; white-space:nowrap; width:96px; }
.pl-table td { text-align:right; color:#111827; }
.pl-table tr:last-child th, .pl-table tr:last-child td { border-bottom:0; }
.pl-table .strong { font-weight:800; }
.pl-table .blue { color:#1d4ed8; }
.pl-table .red { color:#dc2626; }
.pl-table .dim { color:#94a3b8; font-weight:500; }

.pl-hint-box { display:flex; gap:11px; align-items:flex-start; margin-top:14px; padding:13px 14px;
  background:#f5f8ff; border:1px solid #e0e9ff; border-radius:10px; }
.pl-hint-box svg { width:22px; height:22px; flex:none; color:#4f46e5; }
.pl-hint-box b { display:block; font-size:12.5px; color:#1e293b; }
.pl-hint-box span { display:block; font-size:11.5px; color:#64748b; margin-top:2px; }

/* 결제 방법 */
.pl-pick { display:flex; align-items:center; gap:12px; padding:15px 16px; margin-bottom:10px;
  border:1.5px solid #e5e9f2; border-radius:12px; cursor:pointer; transition:.15s; }
.pl-pick:hover { border-color:#c7d6ff; background:#fafbff; }
.pl-pick:has(input:checked) { border-color:#2563eb; background:#f5f8ff; }
.pl-pick input { width:18px; height:18px; flex:none; accent-color:#2563eb; }
.pl-pick-b { flex:1; }
.pl-pick-b b { display:block; font-size:14px; font-weight:800; color:#111827; }
.pl-pick-b i { display:block; font-style:normal; font-size:12px; color:#64748b; margin-top:2px; }
.pl-pick-p { text-align:right; }
.pl-pick-p b { display:block; font-size:15px; font-weight:800; color:#1d4ed8; }
.pl-pick-p i { display:block; font-style:normal; font-size:11px; color:#94a3b8; margin-top:2px; }

.pl-months { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 12px; }
.pl-months-t { font-size:12px; color:#64748b; margin-right:4px; }
.pl-m { padding:6px 12px; font-size:12.5px; border:1px solid #e5e9f2; background:#fff;
  border-radius:8px; cursor:pointer; font-family:inherit; }
.pl-m:hover { border-color:#c7d6ff; }
.pl-m.on { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:700; }

.pl-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; font-size:15px; font-weight:800; color:#fff; background:#2563eb;
  border:0; border-radius:11px; cursor:pointer; font-family:inherit; }
.pl-btn:hover { background:#1d4ed8; }
.pl-btn:disabled { background:#93b4f5; cursor:default; }
.pl-btn svg { width:19px; height:19px; }
.pl-btn.ghost { background:#fff; color:#334155; border:1.5px solid #e5e9f2; font-size:13.5px;
  padding:11px 16px; width:auto; white-space:nowrap; }
.pl-btn.ghost:hover { border-color:#c7d6ff; background:#fafbff; }
.pl-under { text-align:center; font-size:12px; color:#64748b; margin:10px 0 0; }

.pl-or { text-align:center; font-size:11.5px; color:#94a3b8; margin:18px 0 10px;
  position:relative; }
.pl-or::before, .pl-or::after { content:''; position:absolute; top:50%;
  width:calc(50% - 62px); height:1px; background:#eef2f7; }
.pl-or::before { left:0; } .pl-or::after { right:0; }
.pl-bank { font-size:13px; font-weight:700; color:#1e293b; background:#f8fafc;
  border:1px solid #eef2f7; border-radius:9px; padding:11px 13px; text-align:center; }
.pl-row2 { display:flex; gap:8px; margin-top:9px; }
.pl-row2 .input { flex:1; }

/* 기능 카드 */
.pl-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.pl-card { display:flex; gap:11px; align-items:flex-start; padding:15px;
  border:1px solid #eef2f7; border-radius:11px; }
.pl-card b { display:block; font-size:13px; font-weight:800; color:#111827; }
.pl-card span { display:block; font-size:11.5px; color:#64748b; margin-top:3px; line-height:1.5; }
.pl-notes { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px;
  padding-top:16px; border-top:1px solid #eef2f7; }
.pl-note { display:flex; gap:8px; align-items:center; font-size:11.5px; color:#64748b; }
.pl-note svg { width:17px; height:17px; flex:none; color:#94a3b8; }

@media (max-width:1100px) {
  .pl-hero-in { padding-right:0; }
  .pl-badge { top:12px; right:12px; width:74px; height:74px; }
  .pl-2col, .pl-cards { grid-template-columns:1fr 1fr; }
  .pl-feat3-row { grid-template-columns:1fr; }
  .pl-notes { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .pl-2col, .pl-cards, .pl-notes { grid-template-columns:1fr; }
  .pl-h2 { font-size:23px; }
  .pl-pricebox { min-width:0; width:100%; }
  .pl-badge { position:static; margin:0 0 12px auto; }
  .pl-hero-in { padding-right:0; }
}


/* 사이드바 이용권 박스(건의 #18) — ★2026-08-24 실수로 지웠다가 복구.
   지워진 동안 파란 밑줄 링크로 보였다(스타일 없는 <a>). */
.plan-box { display:block; margin:0 12px 10px; padding:11px 13px; border-radius:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  text-decoration:none; color:#fff; transition:.15s; }
.plan-box:hover { background:rgba(255,255,255,.14); }
.plan-box .t { font-size:11px; color:rgba(255,255,255,.62); }
.plan-box .v { font-size:15px; font-weight:800; margin-top:3px; color:#fff; }
.plan-box .s { font-size:10.5px; color:rgba(255,255,255,.5); margin-top:2px; }
.plan-box.plan-warn { background:rgba(251,146,60,.16); border-color:rgba(251,146,60,.35); }
.plan-box.plan-warn .v { color:#fdba74; }
.plan-box.plan-off { background:rgba(248,113,113,.16); border-color:rgba(248,113,113,.35); }
.plan-box.plan-off .v { color:#fca5a5; }


/* 소스 보호 — 글자·이미지 선택 금지(입력칸은 예외, 2026-08-24) */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
img { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }


/* ══ 예치금 충전(건의 #25, 2026-08-24) ═══════════════════════════ */
.dp-wrap { display:flex; flex-direction:column; gap:16px; }
.dp-top { background:linear-gradient(135deg,#0f1b3d,#1b3a8f); border-radius:14px; padding:24px 26px; color:#fff; }
.dp-bal .t { font-size:12.5px; opacity:.8; }
.dp-bal .v { font-size:34px; font-weight:900; margin:6px 0 4px; letter-spacing:-.02em; }
.dp-bal .s { font-size:12px; opacity:.72; }

.dp-amt { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.dp-amt span { font-size:13px; color:#64748b; }
.dp-amt b { font-size:26px; font-weight:900; color:#1d4ed8; }
.dp-slider { width:100%; height:6px; -webkit-appearance:none; appearance:none;
  background:linear-gradient(90deg,#2563eb 0%,#e5e9f2 0%); border-radius:99px; outline:none; }
.dp-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#2563eb; border:3px solid #fff; box-shadow:0 2px 8px rgba(37,99,235,.45); cursor:pointer; }
.dp-slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#2563eb;
  border:3px solid #fff; box-shadow:0 2px 8px rgba(37,99,235,.45); cursor:pointer; }
.dp-scale { display:flex; justify-content:space-between; font-size:11px; color:#94a3b8; margin-top:7px; }
.dp-quick { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 4px; }
.dp-q { padding:8px 14px; font-size:13px; border:1px solid #e5e9f2; background:#fff;
  border-radius:9px; cursor:pointer; font-family:inherit; }
.dp-q:hover { border-color:#c7d6ff; }
.dp-q.on { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:700; }
.dp-btns { margin-top:16px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.dp-btns .pl-btn { padding:16px 8px; border-radius:14px; font-size:14.5px;
  box-shadow:0 1px 2px rgba(15,23,42,.06); }
@media (max-width:680px) { .dp-btns { grid-template-columns:1fr; } }


/* 가입 화면 로고(2026-08-24) — 카드 밖으로 나가지 않게 크기를 확실히 묶는다.
   ★.login-brand 가 flex 가로배치라 이미지가 원본 크기(1024px)로 삐져나갔다(실측 교정). */
.login-brand-col { display:block; margin-bottom:18px; }
.login-brand-col > * { max-width:100%; }
.login-logo-sm { display:block !important; width:200px !important; max-width:100% !important;
  height:auto !important; margin-bottom:12px; flex:none; }


/* ── 결제화면 단순판(건의 #28 시안) ─────────────────────── */
.pl2-wrap { max-width: 860px; margin: 0 auto; }
.pl2-hero { position: relative; background: #0e1e46; border-radius: 18px;
  padding: 30px 34px 26px; color: #fff; overflow: hidden; }
.pl2-flag { position: absolute; top: 0; left: 26px; background: #2f6bff; color: #fff;
  font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 0 0 10px 10px; }
.pl2-flag.ok { background: #16a34a; }
.pl2-prices { display: flex; align-items: center; justify-content: center; gap: 28px;
  flex-wrap: wrap; margin: 26px 0 20px; }
.pl2-old { text-align: center; color: #93a3c4; }
.pl2-old span { display: block; font-size: 13px; margin-bottom: 4px; }
.pl2-old s { font-size: 26px; font-weight: 700; }
.pl2-arrow { font-size: 26px; color: #dbe4f8; }
.pl2-new { text-align: center; }
.pl2-new span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.pl2-new b { font-size: 40px; font-weight: 900; letter-spacing: -1px; }
.pl2-new em { display: block; font-style: normal; font-size: 12px; color: #b7c4e2; margin-top: 2px; }
.pl2-month { background: #fff; color: #14264f; border-radius: 14px;
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pl2-pill { display: inline-block; background: #2f6bff; color: #fff; font-size: 12px;
  font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.pl2-month-line { font-size: 22px; font-weight: 800; margin-top: 10px; }
.pl2-month-line b { color: #1d5eff; font-size: 28px; }
.pl2-month-f { font-size: 13px; color: #7c8db0; margin-top: 6px; }
.pl2-calc { width: 72px; height: 72px; border-radius: 50%; background: #e8efff;
  color: #1d5eff; display: flex; align-items: center; justify-content: center; flex: none; }
.pl2-calc svg { width: 38px; height: 38px; }
.pl2-cta { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 0; cursor: pointer; background: #1d5eff; color: #fff;
  font-size: 19px; font-weight: 800; padding: 18px; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(29, 94, 255, .28); transition: background .15s; }
.pl2-cta:hover { background: #174ee0; }
.pl2-cta svg { width: 22px; height: 22px; }
.pl2-lock { display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #64748b; font-size: 13px; margin: -4px 0 2px; }
.pl2-lock svg { width: 15px; height: 15px; }
.pl2-paid { text-align: center; padding: 26px 0 10px; }
.pl2-paid b { font-size: 40px; font-weight: 900; color: #7cf5b1; margin-right: 6px; }
.pl2-paid span { display: block; margin-top: 8px; color: #b7c4e2; font-size: 14px; }
.pl2-modal { display: flex; flex-direction: column; gap: 10px; min-width: 340px; }
@media (max-width: 720px) {
  .pl2-hero { padding: 26px 18px 18px; }
  .pl2-new b { font-size: 32px; }
  .pl2-month { flex-direction: column; text-align: center; }
  .pl2-modal { min-width: 0; }
}


/* ── 간편결제 버튼(카카오·네이버 브랜드색) ─────────────── */
.pl-btn.ez-kakao { background: #fee500; color: #191600; }
.pl-btn.ez-kakao:hover { background: #f4dc00; }
.pl-btn.ez-naver { background: #03c75a; color: #fff; }
.pl-btn.ez-naver:hover { background: #02b350; }

.pl2-renew { display: inline-block; margin-top: 16px; background: rgba(255,255,255,.12);
  color: #dbe4f8; border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
  padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pl2-renew:hover { background: rgba(255,255,255,.2); color: #fff; }

/* 셀루트 사용자 가이드 상자(2026-09-03) — 이용권 상자와 같은 모양, 색만 파랑 */
.plan-box.guide-box { background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.40); }
.plan-box.guide-box:hover { background:rgba(59,130,246,.28); }
.plan-box.guide-box .v { color:#bfdbfe; }

/* 메일 연동 안내 그림(2026-09-10) */
.guide-steps li { margin-bottom: 8px; font-size: 13px; color: var(--text, #222); }
.guide-shot { margin: 8px 0 6px; padding: 0; }
.guide-shot a { display: inline-block; max-width: 620px; width: 100%; line-height: 0; }   /* 그림 크기만큼만 눌리게(빈칸 클릭 확대 방지, 2026-09-10) */
.guide-shot img { display: block; width: 100%; border: 1px solid #dde1e6; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.guide-shot figcaption { margin-top: 4px; font-size: 12px; color: #475569; }

/* 문의 목록 — 제목만 훑고 필요한 건만 펼친다. */
.suggest-item {
  margin-bottom: 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
}
.suggest-summary {
  min-height: 52px; padding: 11px 13px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.suggest-summary::-webkit-details-marker { display: none; }
.suggest-title { flex: 1 1 240px; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.suggest-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.suggest-chevron { font-size: 18px; color: var(--muted); line-height: 1; transition: transform .15s ease; }
.suggest-item[open] .suggest-chevron { transform: rotate(180deg); }
.suggest-item[open] .suggest-summary { background: #fbfdff; }
.suggest-detail { padding: 13px 14px 14px; border-top: 1px solid var(--line-soft); }
.suggest-content { white-space: pre-wrap; font-size: 13.5px; overflow-wrap: anywhere; }
.suggest-images { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.suggest-images img {
  display: block; width: 72px; height: 72px; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--line);
}
.suggest-docs { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; font-size: 12.5px; }
.suggest-docs span, .suggest-docs a { max-width: 100%; overflow-wrap: anywhere; }
.suggest-reply { margin-top: 10px; padding: 10px 12px; background: var(--blue-soft); border-radius: 9px; font-size: 13px; }
.suggest-reply > div { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggest-content, .suggest-docs, .suggest-reply {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
.suggest-all-shown { margin: 10px 0 0; text-align: center; }
#sgAttach > span { max-width: 100%; overflow-wrap: anywhere; }

/* 고객 문의(2026-09-16) — 손님이 쓴 글과 우리가 보낸 답. 보기 전용 화면이다.
   한국어는 낱말 단위로 줄을 바꾼다(keep-all). 아주 긴 붙은 글자만 잘라 넘긴다. */
.cs-line {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
  word-break: keep-all; overflow-wrap: anywhere; line-height: 1.5;
}
.cs-text {
  margin-top: 2px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: #fbfdff;
  font-size: 13.5px; line-height: 1.7; white-space: pre-wrap;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
.cs-text.cs-answer { background: var(--blue-soft); border-color: var(--blue-line); }
.cs-text.cs-none { color: var(--muted); background: #fff; font-style: normal; }

/* 데스크톱 표에는 모바일 전용 [상세 보기] 칸을 표시하지 않는다. */
table.table td.mobile-details-toggle-cell { display: none; }
.mobile-product-select-all { display: none; }
.mobile-checkbox-hit { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ══ 모바일 전용 정리(2026-09-14) ══════════════════════════════════
   작은 화면에서는 왼쪽 메뉴를 서랍으로 열고, 긴 데이터 표는 행 카드로 읽는다.
   데스크톱 배치와 기능은 그대로 두고 900px 이하에서만 적용한다. */
.mobile-menu-toggle,
.mobile-nav-backdrop { display: none; }

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body.mobile-nav-open { overflow: hidden; }
  .app-shell { display: block; min-height: 100dvh; }
  .main { width: 100%; min-width: 0; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 90;
    width: min(84vw, 320px); height: 100dvh;
    border: 0; border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 18px 0 44px rgba(15,23,42,.28);
    transform: translateX(-105%); visibility: hidden; pointer-events: none;
    transition: transform .2s ease, visibility 0s linear .2s;
    overflow: hidden; overscroll-behavior: contain;
  }
  .sidebar.mobile-open {
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition-delay: 0s;
  }
  .sidebar .brand { padding: 18px 16px 14px; flex: none; }
  .sidebar .nav {
    display: block; flex: 1; min-height: 0; overflow-y: auto;
    padding: 6px 10px 10px; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .sidebar .nav-group-label { display: block; }
  .sidebar .nav-item {
    width: 100%; min-height: 44px; padding: 11px 12px;
    margin-bottom: 3px; border-radius: 10px;
  }
  .sidebar .plan-box { margin-left: 12px; margin-right: 12px; flex: none; }
  .sidebar .sidebar-foot {
    display: block; flex: none;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .mobile-nav-backdrop {
    position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: rgba(15,23,42,.48);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .mobile-nav-backdrop.show { display: block; opacity: 1; pointer-events: auto; }
  .mobile-menu-toggle {
    display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 0; border: 1px solid var(--line); border-radius: 11px;
    background: #fff; color: var(--text); cursor: pointer;
  }
  .mobile-menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

  .topbar {
    min-height: 64px; padding: 10px 12px; gap: 10px;
    align-items: flex-start; z-index: 40;
  }
  .topbar-title { flex: 1; min-width: 0; padding-top: 1px; }
  .topbar h1 { font-size: 16px; line-height: 1.35; }
  .topbar .sub {
    display: block; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px;
  }
  .topbar > .spacer, .topbar > .badge { display: none; }
  .top-tabs {
    max-width: calc(100vw - 76px); overflow-x: auto;
    flex-wrap: nowrap !important; padding: 1px 0 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .top-tabs::-webkit-scrollbar { display: none; }
  .top-tabs > a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }

  .content { padding: 14px 12px calc(40px + env(safe-area-inset-bottom)); }
  .card { margin-bottom: 12px; border-radius: 13px; }
  .card-head { padding: 12px 14px; align-items: flex-start; }
  .card-body { padding: 14px; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
  .kpi-card { min-width: 0; padding: 14px; }
  .kpi-card .value { font-size: 20px; overflow-wrap: anywhere; }
  .dash-grid { gap: 12px; }
  .dash-card > .h { padding: 12px 14px; }
  .dash-card > .b { padding: 6px 14px 14px; }
  .dash-updated { justify-content: flex-start !important; margin: 8px 0 12px !important; }

  .row { flex-direction: column; gap: 0; }
  .row > * { width: 100%; min-width: 0; flex-basis: auto; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0,1fr); }
  .pick-grid { grid-template-columns: minmax(0,1fr); }
  button:not(.mobile-nav-backdrop), .btn, .pick, .seg button { min-width: 44px; min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .btn-row { gap: 7px; }
  .input, .select, .textarea { min-height: 44px; font-size: 16px; }
  input[type="file"] { min-height: 44px; max-width: 100%; }
  .textarea { min-height: 110px; }
  details > summary { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .seg { max-width: 100%; overflow-x: auto; }
  .seg button { flex: 0 0 auto; }
  .ip-box { gap: 10px; padding: 12px; }
  .ip-value { width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
  .notice { padding: 12px 13px; }
  .hint { word-break: keep-all; overflow-wrap: break-word; }
  .card-head .desc { word-break: keep-all; overflow-wrap: break-word; }

  .toast-area {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom)); align-items: stretch;
  }
  .toast { width: 100%; max-width: none; }

  .login-wrap {
    min-height: 100dvh; padding: 16px 12px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .login-card { padding: 24px 20px; border-radius: 15px; }
}

/* 모바일 가로 화면이나 키보드가 열린 짧은 화면에서도 로그인 폼의 위·아래가 잘리지 않는다. */
@media (max-width: 900px) and (max-height: 520px) {
  .login-wrap { align-items: flex-start; }
}

@media (max-width: 680px) {
  .mobile-product-select-all {
    display: inline-flex; flex: 1 0 100%; align-items: center; gap: 8px;
    min-height: 44px; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .mobile-product-select-all:has(input:disabled) { color: var(--muted); cursor: default; }
  .mobile-product-select-all input,
  .mobile-checkbox-hit input { width: 22px; height: 22px; accent-color: var(--blue); cursor: pointer; }
  .mobile-checkbox-hit { width: 44px; height: 44px; margin: -11px; }
  .table-wrap { overflow: visible; max-width: 100%; }
  .table-wrap.mobile-compact-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  table.table.mobile-compact-table {
    display: table; width: 100%; font-size: 11.5px;
  }
  table.table.mobile-compact-table th,
  table.table.mobile-compact-table td { padding: 8px 7px; }
  table.table.mobile-card-table {
    display: block; width: 100%; min-width: 0 !important;
    table-layout: auto !important; white-space: normal;
  }
  table.table.mobile-card-table thead { display: none; }
  table.table.mobile-card-table tbody { display: grid; gap: 10px; }
  table.table.mobile-card-table tbody tr {
    display: block; overflow: hidden; width: 100%;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  table.table.mobile-card-table tbody tr:hover { background: #fff; }
  table.table.mobile-card-table tbody tr td {
    display: grid; grid-template-columns: minmax(82px, 30%) minmax(0,1fr);
    gap: 10px; width: 100%; max-width: none !important;
    padding: 10px 12px !important; border: 0 !important;
    white-space: normal !important; text-align: left !important;
    overflow: visible !important; word-break: break-word; vertical-align: top;
  }
  table.table.mobile-card-table tbody tr td:not(:last-child) { border-bottom: 1px solid var(--line-soft) !important; }
  table.table.mobile-card-table tbody tr td::before {
    content: attr(data-label); color: var(--muted);
    font-size: 11px; font-weight: 700; line-height: 1.5;
  }
  table.table.mobile-card-table tbody tr td.mobile-secondary-cell { display: none; }
  table.table.mobile-card-table tbody tr.mobile-details-open td.mobile-secondary-cell { display: grid; }
  table.table.mobile-card-table tbody tr td.mobile-unlabelled-cell {
    display: flex; grid-template-columns: none; justify-content: flex-end; align-items: center;
  }
  table.table.mobile-card-table tbody tr td.mobile-unlabelled-cell::before { display: none; }
  table.table.mobile-card-table tbody tr td.mobile-details-toggle-cell {
    display: block; padding: 9px 12px 11px !important; background: #f8fafc;
  }
  table.table.mobile-card-table .mobile-row-toggle { width: 100%; }
  table.table.mobile-card-table tbody tr td.mobile-span-cell { display: block; padding: 0 !important; }
  table.table.mobile-card-table tbody tr td.mobile-span-cell::before { display: none; }
  table.table.mobile-card-table .ellipsis,
  table.table.mobile-card-table .td-name { white-space: normal; max-width: none; overflow: visible; text-overflow: clip; }
  table.table.mobile-card-table .btn-row { justify-content: flex-start; }
  table.table.mobile-card-table .mono { overflow-wrap: anywhere; word-break: break-all; }
  table.table.mobile-card-table .mobile-market-value {
    display: inline-flex; min-width: 0; align-items: center; gap: 6px;
    word-break: keep-all; overflow-wrap: break-word;
  }

  /* 상품·주문 핵심값은 한 카드 안에서 짧은 요약 행으로 묶는다.
     실제 td/버튼은 그대로 두므로 선택·관리·송장 이벤트도 그대로 유지된다. */
  table.table.mobile-products-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
  }
  table.table.mobile-products-table tbody tr > td.mobile-primary-cell,
  table.table.mobile-orders-table tbody tr > td.mobile-primary-cell { min-width: 0; }
  table.table.mobile-products-table tbody tr > td.mobile-unlabelled-cell:not(.mobile-details-toggle-cell) {
    position: absolute; z-index: 1; top: 4px; right: 4px;
    width: 44px !important; height: 44px; padding: 11px !important;
  }
  table.table.mobile-products-table tbody tr > td[data-label="대표사진"] {
    grid-column: 1; grid-row: 1; display: block; padding: 11px 8px !important;
  }
  table.table.mobile-products-table tbody tr > td[data-label="대표사진"]::before,
  table.table.mobile-products-table tbody tr > td[data-label="다듬은 상품명"]::before { display: none; }
  table.table.mobile-products-table tbody tr > td[data-label="다듬은 상품명"] {
    grid-column: 2; grid-row: 1; display: block; padding-right: 50px !important;
  }
  table.table.mobile-products-table tbody tr > td[data-label="마켓"] { grid-column: 1; grid-row: 2; }
  table.table.mobile-products-table tbody tr > td[data-label="판매가"] { grid-column: 2; grid-row: 2; }
  table.table.mobile-products-table tbody tr > td[data-label="상태"] {
    grid-column: 1 / -1; grid-row: 3;
  }
  table.table.mobile-products-table tbody tr > td[data-label="관리"] {
    grid-column: 1 / -1; grid-row: 4;
  }
  table.table.mobile-products-table tbody tr > td[data-label="마켓"],
  table.table.mobile-products-table tbody tr > td[data-label="판매가"],
  table.table.mobile-products-table tbody tr > td[data-label="상태"] {
    display: block; min-height: 54px;
  }
  table.table.mobile-products-table tbody tr > td[data-label="상태"] {
    display: grid;
    grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
    align-items: start; word-break: keep-all; overflow-wrap: break-word;
  }
  table.table.mobile-products-table tbody tr > td[data-label="마켓"]::before,
  table.table.mobile-products-table tbody tr > td[data-label="판매가"]::before,
  table.table.mobile-products-table tbody tr > td[data-label="상태"]::before {
    display: block; margin-bottom: 3px;
  }
  table.table.mobile-products-table tbody tr > td[data-label="상태"]::before { margin-bottom: 0; }
  table.table.mobile-products-table tbody tr > td[data-label="상태"] > * {
    grid-column: 2; min-width: 0; max-width: 100%; white-space: normal;
    word-break: keep-all; overflow-wrap: break-word;
  }
  table.table.mobile-products-table tbody tr > td[data-label="관리"] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  }
  table.table.mobile-products-table tbody tr > td[data-label="관리"]::before {
    flex: 0 0 42px;
  }
  table.table.mobile-products-table tbody tr > td[data-label="관리"] .btn {
    flex: 1 1 76px;
  }
  table.table.mobile-products-table tbody tr > td.mobile-secondary-cell,
  table.table.mobile-products-table tbody tr > td.mobile-details-toggle-cell { grid-column: 1 / -1; }

  table.table.mobile-orders-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 42%);
  }
  table.table.mobile-orders-table tbody tr > td.mobile-primary-cell { display: block; }
  table.table.mobile-orders-table tbody tr > td.mobile-primary-cell::before {
    display: block; margin-bottom: 3px;
  }
  table.table.mobile-orders-table tbody tr > td[data-label="주문번호"] { grid-column: 1; grid-row: 1; }
  table.table.mobile-orders-table tbody tr > td[data-label="상태"] { grid-column: 2; grid-row: 1; }
  table.table.mobile-orders-table tbody tr > td[data-label="상품"] { grid-column: 1 / -1; grid-row: 2; }
  table.table.mobile-orders-table tbody tr > td[data-label="남은 돈"] { grid-column: 1; grid-row: 3; }
  table.table.mobile-orders-table tbody tr > td[data-label="배송"] { grid-column: 2; grid-row: 3; }
  table.table.mobile-orders-table tbody tr > td[data-label="배송"] .badge {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  }
  table.table.mobile-orders-table tbody tr > td[data-label="배송"] .btn { margin-top: 6px; max-width: 100%; }
  table.table.mobile-orders-table tbody tr > td.mobile-secondary-cell,
  table.table.mobile-orders-table tbody tr > td.mobile-details-toggle-cell { grid-column: 1 / -1; }

  /* 고객 문의(2026-09-16) — 한 문의를 카드 하나로 읽는다.
     칸을 접지 않으므로 [상세 보기] 토글은 붙지 않고, 맨 아래 [자세히]로 문의 전문을 연다. */
  table.table.mobile-cs-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 40%);
  }
  table.table.mobile-cs-table tbody tr > td { min-width: 0; }
  table.table.mobile-cs-table tbody tr > td.mobile-primary-cell { display: block; }
  table.table.mobile-cs-table tbody tr > td.mobile-primary-cell::before {
    display: block; margin-bottom: 3px;
  }
  table.table.mobile-cs-table tbody tr > td[data-label="마켓"] { grid-column: 1; grid-row: 1; }
  table.table.mobile-cs-table tbody tr > td[data-label="상태"] { grid-column: 2; grid-row: 1; }
  table.table.mobile-cs-table tbody tr > td[data-label="종류"] { grid-column: 1; grid-row: 2; }
  table.table.mobile-cs-table tbody tr > td[data-label="접수"] { grid-column: 2; grid-row: 2; }
  table.table.mobile-cs-table tbody tr > td[data-label="상품"] { grid-column: 1 / -1; grid-row: 3; }
  table.table.mobile-cs-table tbody tr > td[data-label="문의 내용"] { grid-column: 1 / -1; grid-row: 4; }
  table.table.mobile-cs-table tbody tr > td[data-label="보기"] {
    grid-column: 1 / -1; grid-row: 5;
    display: block; padding: 8px 12px 11px !important; background: #f8fafc;
  }
  table.table.mobile-cs-table tbody tr > td[data-label="보기"]::before { display: none; }
  table.table.mobile-cs-table .cs-open { width: 100%; }
  table.table.mobile-cs-table tbody tr > td[data-label="상태"] .badge,
  table.table.mobile-cs-table tbody tr > td[data-label="마켓"] .badge {
    max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: break-word;
  }
  table.table.mobile-cs-table .cs-line { -webkit-line-clamp: 3; }

  .modal-back { align-items: flex-end; padding: 0; }
  .modal-card {
    max-width: none; max-height: 92dvh; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-head { padding: 13px 14px; }
  .modal-body { padding: 14px; }
  .kv { align-items: flex-start; }
  .kv .k { width: 76px; }
  .guide-shot { margin-left: -4px; margin-right: -4px; }
  .suggest-summary { min-height: 56px; padding: 11px 12px; }
  .suggest-title { order: 1; flex-basis: calc(100% - 36px); }
  .suggest-chevron { order: 2; margin-left: auto; }
  .suggest-summary .badge { order: 3; }
  .suggest-date { order: 4; }
  .suggest-detail { padding: 12px; }
}

@media (max-width: 360px) {
  .kpi-row { grid-template-columns: minmax(0,1fr); }
  .brand-sub { display: none; }
  .content { padding-left: 10px; padding-right: 10px; }
  .pl2-prices { gap: 14px; }
  .pl2-arrow { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .mobile-nav-backdrop { transition: none; }
}

/* ── 체험용 샘플 계정 표시(2026-09-15) — 서버가 demo 라고 알려 준 계정에만 그려진다 ── */
.demo-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: 999px;
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.demo-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f97316; flex: none;
}
.sidebar > .demo-pill {
  align-self: flex-start; margin: -8px 18px 8px;
  background: rgba(249, 115, 22, .14); color: #fdba74; border-color: rgba(249, 115, 22, .4);
}
@media (max-width: 900px) {
  .topbar > .demo-pill { align-self: center; padding: 3px 8px; font-size: 11px; gap: 5px; }
  .sidebar > .demo-pill { margin: -6px 16px 8px; }
}