/* =============================================================
   GuDoC Seller Dashboard — styles
   tokens.css 의 semantic 토큰만 참조. 'modern' 테마는 대시보드용
   슬레이트(네이비) 팔레트로 이 파일에서 재정의한다.
   ============================================================= */

/* FocusOnNavigate(h1) 등 프로그램 포커스의 시각 아웃라인 억제 — a11y 포커스 이동은 유지. */
h1:focus,
[tabindex="-1"]:focus { outline: none; }

/* ---- Modern = Dashboard Slate (override tokens.css 모던) ---- */
[data-theme="modern"] {
  --color-bg:            #0F172A;   /* slate-900 */
  --color-bg-subtle:     #131E33;
  --color-surface:       #1B2740;   /* card */
  --color-surface-raised: #22304D;
  --color-surface-sunken: #0B1220;
  --color-overlay:       rgba(2, 6, 18, 0.66);

  --color-text:          #E2E8F0;
  --color-text-strong:   #F8FAFC;
  --color-text-muted:    #94A3B8;
  --color-text-subtle:   #64748B;
  --color-text-on-brand: #FFFFFF;

  --color-border:        #2A3954;
  --color-border-strong: #3A4D6E;
  --color-divider:       #22304D;

  --color-brand:         #FF6E45;
  --color-brand-hover:   #FF8B66;
  --color-brand-active:  #FFB69E;
  --color-brand-subtle:  rgba(255, 110, 69, 0.14);
  --color-brand-text:    #FF8B66;

  --color-success:       #34C77F;
  --color-success-bg:    rgba(31, 142, 92, 0.16);
  --color-warning:       #F5BB3F;
  --color-warning-bg:    rgba(232, 163, 23, 0.16);
  --color-danger:        #F26B6B;
  --color-danger-bg:     rgba(220, 53, 53, 0.18);
  --color-info:          #5B8DF6;

  --color-hover-bg:      rgba(255, 255, 255, 0.05);
  --color-active-bg:     rgba(255, 255, 255, 0.09);
  --color-focus-ring:    #FF8B66;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 16px 36px rgba(0,0,0,0.6);
  --shadow-xl: 0 28px 56px rgba(0,0,0,0.7);

  --color-cycle-monthly: #FF7B5C;
  --color-cycle-weekly: #5B8DF6;
  --color-cycle-quarterly: #A66BFF;
  --color-cycle-yearly: #34C77F;
  --color-cycle-onetime: #94A3B8;
  color-scheme: dark;
}

/* ---------------------- base ---------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--gudoc-font-sans);
  font-size: var(--gudoc-text-base);
  line-height: var(--gudoc-leading-normal);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------------------- app shell ---------------------- */
.sl-app {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas: "rail top" "rail main";
  height: 100vh;
}
.sl-top  { grid-area: top; }
.sl-rail { grid-area: rail; }
.sl-main { grid-area: main; overflow-y: auto; }

/* ---------------------- topbar ---------------------- */
.sl-top {
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 40;
}
.sl-top__store { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sl-top__avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gudoc-coral-300), var(--gudoc-coral-600));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.sl-top__name { font-weight: 700; font-size: 15px; color: var(--color-text-strong); letter-spacing: -0.01em; white-space: nowrap; }
.sl-top__role { font-size: 11.5px; color: var(--color-text-subtle); white-space: nowrap; }
.sl-top__grow { flex: 1; }
.sl-top__search {
  display: flex; align-items: center; gap: 9px;
  width: 280px; max-width: 32vw; padding: 9px 14px;
  background: var(--color-surface-sunken); border: 1px solid var(--color-border);
  border-radius: 10px; color: var(--color-text-subtle); font-size: 13px; cursor: text;
  white-space: nowrap; overflow: hidden;
}
.sl-top__icons { display: flex; align-items: center; gap: 6px; }
.sl-ico {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: var(--color-text-muted);
  background: transparent; border: none; font-size: 16px; transition: background var(--gudoc-duration-2);
}
.sl-ico:hover { background: var(--color-hover-bg); color: var(--color-text); }
.sl-ico__num {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-brand); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--color-surface);
}

/* ---------------------- icon rail ---------------------- */
.sl-rail {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 4px; z-index: 50;
}
.sl-rail__logo {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px;
  background: var(--color-brand); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; flex-shrink: 0;
}
.sl-rail__wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.sl-rail__item {
  width: 60px; padding: 10px 4px 9px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--color-text-muted); background: transparent; border: none;
  position: relative; transition: background var(--gudoc-duration-2), color var(--gudoc-duration-2);
}
.sl-rail__item:hover { background: var(--color-hover-bg); color: var(--color-text); }
.sl-rail__item i { font-size: 20px; }
.sl-rail__item span { font-size: 10px; font-weight: 600; letter-spacing: -0.01em; }
.sl-rail__item--on { color: var(--color-brand-text); }
.sl-rail__item--on::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--color-brand);
}
.sl-rail__spacer { flex: 1; }
/* flyout */
.sl-fly {
  position: absolute; left: calc(100% + 6px); top: -2px; z-index: 60;
  min-width: 184px; background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--gudoc-duration-2), transform var(--gudoc-duration-2), visibility var(--gudoc-duration-2);
}
.sl-rail__wrap:hover .sl-fly, .sl-rail__wrap:focus-within .sl-fly { opacity: 1; visibility: visible; transform: none; }
.sl-fly__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); padding: 6px 10px 8px; }
.sl-fly__item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--color-text); cursor: pointer; white-space: nowrap;
}
.sl-fly__item:hover { background: var(--color-hover-bg); }
.sl-fly__item i { width: 15px; font-size: 12px; color: var(--color-text-muted); }
.sl-fly__cnt { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* ---------------------- bottom bar (mobile) ---------------------- */
.sl-bottom { display: none; }

/* ---------------------- main / page ---------------------- */
.sl-page { padding: 24px 28px 64px; max-width: 1320px; margin: 0 auto; }
.sl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sl-head__title { font-size: 25px; font-weight: 800; letter-spacing: -0.025em; color: var(--color-text-strong); margin: 0; }
.sl-head__sub { font-size: 13.5px; color: var(--color-text-muted); margin: 5px 0 0; }
.sl-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 목록 자리의 상태 문구(로딩·오류·빈 상태) — 제목 바로 밑이 아니라 본문 자리에 놓일 때. */
.sl-head__sub--status { margin-top: 8px; }

/* flex 행의 레이아웃 프리미티브. 인라인 style="flex:1" 로 흩어져 있던 것을 모았다.
   ⚠️ .sl-grow 에는 min-width:0 을 함께 준다 — 없으면 긴 문장이 줄바꿈 대신 컨테이너를 밀어낸다. */
.sl-spacer { flex: 1 1 auto; }
.sl-grow { flex: 1 1 auto; min-width: 0; }
.sl-head__wave { font-size: 22px; }

/* segmented period selector */
.sl-seg { display: inline-flex; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 10px; padding: 3px; }
.sl-seg button {
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--color-text-muted); background: transparent; border: none;
}
.sl-seg button.is-on { background: var(--color-surface-raised); color: var(--color-text-strong); box-shadow: var(--shadow-xs); }

/* ---------------------- buttons ---------------------- */
.sl-btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  transition: background var(--gudoc-duration-2), border-color var(--gudoc-duration-2);
}
.sl-btn:hover { background: var(--color-hover-bg); }
.sl-btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.sl-btn--primary:hover { background: var(--color-brand-hover); }
.sl-btn--sm { padding: 7px 12px; font-size: 12.5px; }
/* 폼 하단 전폭 CTA(로그인·재설정 등) — 15곳이 같은 선언을 인라인으로 들고 있었다.
   ⚠️ .sl-btn--block 은 이미 있는 이름이다(아래 drawer 구역) — 이름을 겹치면
      뒤 선언이 이겨서 padding·font-size 가 죽는다. 그래서 --cta 로 둔다. */
.sl-btn--cta { width: 100%; padding: 13px; font-size: 15px; }
.sl-btn--full { width: 100%; }
.sl-btn--ghost { background: transparent; border-color: transparent; }
.sl-btn--ghost:hover { background: var(--color-hover-bg); }
.sl-btn:disabled, .sl-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------------------- cards / grid ---------------------- */
.sl-grid { display: grid; gap: 16px; }
.sl-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 18px 20px;
}
/* 읽기 편한 폼 카드 폭(설정·온보딩 등) — 14곳이 max-width:620px 을 인라인으로 들고 있었다. */
.sl-card--form { max-width: 620px; }
.sl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sl-card__title { font-size: 15px; font-weight: 700; color: var(--color-text-strong); margin: 0; }
.sl-card__link { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.sl-card__link:hover { color: var(--color-brand-text); }

/* KPI */
.sl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.sl-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px 18px 14px; position: relative; overflow: hidden; }
.sl-kpi__top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.sl-kpi__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; }
.sl-kpi__label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.sl-kpi__val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text-strong); line-height: 1.1; }
.sl-kpi__val small { font-size: 15px; font-weight: 700; color: var(--color-text-muted); }
.sl-kpi__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.sl-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; }
.sl-delta--up { color: var(--color-success); background: var(--color-success-bg); }
.sl-delta--down { color: var(--color-danger); background: var(--color-danger-bg); }
.sl-kpi__since { color: var(--color-text-subtle); }
.sl-kpi__spark { position: absolute; right: 14px; bottom: 12px; width: 76px; height: 30px; opacity: 0.9; }

/* charts row */
.sl-row2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 18px; }
.sl-row3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 18px; }
.sl-chart-wrap { position: relative; height: 260px; }
.sl-chart-wrap--sm { height: 200px; }
.sl-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.sl-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.sl-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* todo / alerts list */
.sl-todo { display: flex; flex-direction: column; gap: 2px; }
.sl-todo__item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 10px; cursor: pointer; }
.sl-todo__item:hover { background: var(--color-hover-bg); }
.sl-todo__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.sl-todo__body { flex: 1; min-width: 0; }
.sl-todo__t { font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); }
.sl-todo__s { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }
.sl-todo__n { font-size: 15px; font-weight: 800; color: var(--color-text-strong); }
.sl-credit__cancelbtn { margin-left: 8px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--color-brand-text); cursor: pointer; text-decoration: underline; }
.sl-credit__cancelbtn:hover { opacity: .75; }

.tone-coral { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.tone-blue  { background: rgba(91,141,246,0.16); color: var(--color-info); }
.tone-green { background: var(--color-success-bg); color: var(--color-success); }
.tone-amber { background: var(--color-warning-bg); color: var(--color-warning); }
.tone-violet{ background: rgba(124,58,237,0.16); color: var(--color-cycle-quarterly); }
.tone-gray  { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* top products */
.sl-prod { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; }
.sl-prod:hover { background: var(--color-hover-bg); }
.sl-prod__rank { width: 22px; text-align: center; font-family: var(--gudoc-font-mono); font-weight: 700; color: var(--color-text-subtle); font-size: 13px; }
.sl-prod__thumb { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.sl-prod__body { flex: 1; min-width: 0; }
.sl-prod__t { font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-prod__s { font-size: 12px; color: var(--color-text-muted); }
.sl-prod__v { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }

/* ---------------------- toolbar (orders) ---------------------- */
.sl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sl-scopebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.sl-scopebar__chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 999px; padding: 4px 11px; }
.sl-scopebar__t { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
.cp-disc-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.sl-2fa { display: flex; flex-direction: column; gap: 10px; }
.sl-2fa__row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }
.sl-2fa__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: var(--color-brand-subtle); color: var(--color-brand-text); font-size: 15px; }
.sl-2fa__main { flex: 1; min-width: 0; }
.sl-2fa__t { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 8px; }
.sl-2fa__d { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.sl-toggle { position: relative; width: 44px; height: 25px; border-radius: 999px; background: var(--color-border); border: none; cursor: pointer; flex-shrink: 0; transition: background .15s; padding: 0; }
.sl-toggle.is-on { background: var(--color-brand); }
.sl-toggle:disabled { opacity: .5; cursor: not-allowed; }
.sl-toggle__knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sl-toggle.is-on .sl-toggle__knob { transform: translateX(19px); }
.sl-2fa-methods { display: flex; flex-direction: column; gap: 8px; }
.sl-2fa-method { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; text-align: left; width: 100%; transition: border-color .12s, background .12s; }
.sl-2fa-method:hover:not(:disabled) { border-color: var(--color-brand); }
.sl-2fa-method.is-sel { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-2fa-method:disabled { opacity: .6; cursor: default; }
.sl-2fa-method__ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: 14px; flex-shrink: 0; }
.sl-2fa-method.is-sel .sl-2fa-method__ic { background: var(--color-brand); color: #fff; }
.sl-2fa-method__t { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); }
.sl-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border); flex-shrink: 0; position: relative; }
.sl-radio.is-on { border-color: var(--color-brand); }
.sl-radio.is-on::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-brand); }
/* 인증 앱(Google Authenticator·TOTP) 등록 — setup→키/URI→6자리 confirm→복구코드 */
.sl-authreg { margin-top: 12px; }
.sl-authreg__panel { padding: 16px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }
.sl-authreg__step { font-size: 13px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 8px; }
.sl-authreg__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-brand); color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.sl-authreg__qr { display: flex; justify-content: center; margin: 12px 0 4px; }
.sl-authreg__qr-img { display: block; width: 180px; max-width: 100%; height: auto; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--color-border); }
.sl-authreg__hint { font-size: 12px; color: var(--color-text-muted); line-height: 1.55; margin: 8px 0; }
.sl-authreg__key { font-family: var(--gudoc-font-mono); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--color-text-strong); padding: 12px 14px; border-radius: 10px; background: var(--color-surface-sunken); border: 1px dashed var(--color-border); word-break: break-all; user-select: all; }
.sl-authreg__uri { width: 100%; margin-top: 10px; justify-content: center; }
.sl-authreg__confirm { display: flex; gap: 8px; margin-top: 10px; }
.sl-authreg__confirm .sl-input { flex: 1; }
.sl-authreg__codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.sl-authreg__code { font-family: var(--gudoc-font-mono); font-size: 13.5px; font-weight: 700; text-align: center; padding: 9px 8px; border-radius: 9px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); color: var(--color-text-strong); user-select: all; }
.sl-permquick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sl-permquick__l { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); margin-right: 2px; }
.sl-permquick__btn { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.sl-permquick__btn:hover { border-color: var(--color-brand); color: var(--color-brand-text); }
.sl-permquick__btn--clear { color: var(--color-text-muted); }
.sl-permgrid { display: flex; flex-direction: column; gap: 0; }
.sl-permgrid__row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--color-border); }
.sl-permgrid__row:first-child { border-top: none; }
.sl-permgrid__cat { flex: 0 0 76px; font-size: 12.5px; font-weight: 700; color: var(--color-text-strong); padding-top: 4px; }
.sl-permgrid__chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-permchip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.sl-permchip:hover:not(.sl-permchip--locked) { border-color: var(--color-brand); }
.sl-permchip.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); font-weight: 700; }
.sl-permchip--locked { cursor: not-allowed; color: var(--color-text-muted); background: var(--color-surface-sunken); border-style: dashed; }
.sl-permgrid__row--locked .sl-permgrid__cat { color: var(--color-text-muted); }
.cp-tpllist { display: flex; flex-direction: column; gap: 8px; }
.cp-tplopt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; transition: border-color .12s, background .12s; }
.cp-tplopt:hover { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.cp-tplopt__b { display: flex; flex-direction: column; gap: 4px; }
.cp-tplopt__n { font-weight: 700; color: var(--color-text-strong); font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.cp-tplopt__m { font-size: 12px; color: var(--color-text-muted); }
.cp-tplopt__c { color: var(--color-text-subtle); font-size: 12px; }
.sl-statchips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sl-statchip { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }
.sl-statchip__n { font-size: 19px; font-weight: 800; color: var(--color-text-strong); }
.sl-statchip__l { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.sl-statchip--alert { border-color: color-mix(in oklab, var(--color-danger) 40%, transparent); }
.sl-statchip--alert .sl-statchip__n { color: var(--color-danger); }

.sl-filters { display: inline-flex; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.sl-filters button { padding: 7px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); background: transparent; border: none; }
.sl-filters button.is-on { background: var(--color-surface-raised); color: var(--color-text-strong); box-shadow: var(--shadow-xs); }
.sl-search-mini { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text-subtle); font-size: 13px; min-width: 200px; }
.sl-search-mini input { border: none; background: transparent; color: var(--color-text); font-size: 13px; outline: none; width: 100%; font-family: inherit; }

/* ---------------------- table ---------------------- */
.sl-tablecard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.sl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-table th { text-align: left; padding: 13px 16px; background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.sl-table td { padding: 14px 16px; border-top: 1px solid var(--color-divider); vertical-align: middle; }
.sl-table tbody tr { cursor: pointer; transition: background var(--gudoc-duration-1); }
.sl-table tbody tr:hover { background: var(--color-hover-bg); }
/* 알림 딥링크(?postId=)가 지목한 행 — "목록에서 상태를 확인하세요"를 눈으로 잇는다.
   새 색을 만들지 않고 기존 토큰만 쓴다(디자인 무손상). */
.sl-table tbody tr.is-focus { background: var(--color-bg-subtle); box-shadow: inset 3px 0 0 var(--accent, #F4521E); }
/* 같은 목록의 카드 뷰(_view != "list")도 동일하게 지목한다 — 두 뷰가 다 쓰이므로 한쪽만 하면 반쪽이다. */
.sl-pcard.is-focus { box-shadow: 0 0 0 2px var(--accent, #F4521E); }
.sl-table__id { font-family: var(--gudoc-font-mono); font-size: 12px; color: var(--color-text-muted); }
.sl-cust { display: flex; align-items: center; gap: 9px; }
.sl-cust__av { width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-sunken); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; }
.sl-cust__n { font-weight: 600; color: var(--color-text-strong); }
.sl-cell-prod { display: flex; align-items: center; gap: 10px; }
.sl-cell-prod__th { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.sl-amt { font-weight: 700; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

/* fulfillment + status pills */
.sl-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sl-pill i { font-size: 10px; }
.sl-ful { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.sl-ful i { font-size: 11px; }

.st-paid   { background: rgba(91,141,246,0.16); color: var(--color-info); }
.st-prep   { background: var(--color-warning-bg); color: var(--color-warning); }
.st-ship   { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.st-done   { background: var(--color-success-bg); color: var(--color-success); }
.sl-pill--restrict { background: var(--color-warning-bg, #FEF3C7); color: var(--color-warning, #92660C); padding: 2px 7px; font-size: 10.5px; }
/* 상단 바 입점 상태 배지 — 테두리 있는 각진 변형(인라인 6선언을 이관). */
.sl-pill--status { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px; border: 1px solid currentColor; }
.sl-pill--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.sl-pill--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.st-issue  { background: var(--color-danger-bg); color: var(--color-danger); }
.st-wait   { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* 목록 상단 인라인 경고 배너 — 노출 토글 실패처럼 페이지를 비우지 않는 부분 실패용 */
.sl-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--gudoc-radius-2, 8px); font-size: 12.5px; }
.sl-alert--err { background: var(--color-danger-bg); color: var(--color-danger); }

/* 정지·반려 사유 한 줄 — 상태칩 아래. 길면 말줄임(전문은 title 툴팁) */
.sl-rejreason { margin-top: 4px; max-width: 260px; font-size: 11.5px; line-height: 1.45; color: var(--color-danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sl-rowact { opacity: 0; transition: opacity var(--gudoc-duration-2); }
.sl-table tbody tr:hover .sl-rowact { opacity: 1; }

/* table foot / pagination */
.sl-tfoot { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-top: 1px solid var(--color-divider); font-size: 12.5px; color: var(--color-text-muted); }
.sl-pager { display: flex; gap: 4px; }
.sl-pager button { min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 12.5px; font-weight: 600; }
.sl-pager button[aria-current="page"] { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* ---------------------- drawer ---------------------- */
.sl-scrim { position: fixed; inset: 0; background: var(--color-overlay); z-index: 900; opacity: 0; animation: sl-fade var(--gudoc-duration-2) forwards; }
@keyframes sl-fade { to { opacity: 1; } }
.sl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw; z-index: 901;
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column;
  transform: translateX(100%); animation: sl-slide var(--gudoc-duration-3) var(--gudoc-ease-emphasis) forwards;
}
@keyframes sl-slide { to { transform: none; } }
/* 드로어 폭 변형 — 기본 440px. 내용량에 따라 세 단계가 인라인으로 흩어져 있었다. */
.sl-drawer--w480 { width: 480px; }
.sl-drawer--w520 { width: 520px; }
.sl-drawer--w560 { width: 560px; }
.sl-drawer--w760 { width: 760px; max-width: 96vw; }
/* 파일 입력은 라벨이 트리거라 숨긴다(InputFile 8곳의 display:none 이관). */
.sl-filehidden { display: none; }
.sl-drawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.sl-drawer__title { font-size: 16px; font-weight: 800; color: var(--color-text-strong); margin: 0; }
.sl-drawer__sub { font-size: 12px; color: var(--color-text-subtle); font-family: var(--gudoc-font-mono); }
.sl-drawer__x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: 15px; }
.sl-drawer__x:hover { background: var(--color-hover-bg); }
.sl-drawer__body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.sl-drawer__foot { padding: 16px 20px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; }
.sl-drawer__foot .sl-btn { flex: 1; }
/* 주 동작 버튼만 조금 더 넓게. ⚠️ 위 .sl-btn 규칙보다 뒤에 있어야 이긴다(같은 특정성). */
.sl-drawer__foot .sl-btn--wide { flex: 1.2; }

.sl-sec__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); margin-bottom: 10px; }
/* 라벨 옆 보조 문구 — 31곳이 같은 선언을 인라인으로 들고 있었다(2026-08-27 이관). .rg-field > label small 과 같은 계열. */
.sl-sec__label small { font-weight: 500; text-transform: none; color: var(--color-text-subtle); }
/* 라벨 줄을 좌우 배치로 쓰는 변형(제목 … 우측 액션). 자식은 반드시 요소로 감싼다 — 맨 텍스트를 두면 칼럼으로 쪼개진다. */
.sl-sec__label--row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-sec__label--row > .sl-spacer { flex: 1 1 auto; }

/* 체크박스 라벨(판매자 콘솔 공통).
   ⛔ flex 로 만들지 말 것 — "동의합니다 <b>강조</b> 안내" 처럼 문장을 쓰는 자리라
   flex 로 두면 텍스트런과 <b>·<small> 이 각각 flex 아이템이 되어 세로 칼럼으로 쪼개진다.
   블록 흐름 + 체크박스만 vertical-align 로 맞춘다. */
.sl-check { display: block; font-size: 13px; color: var(--color-text); line-height: 1.55; cursor: pointer; }
.sl-check input { width: 16px; height: 16px; accent-color: var(--color-brand); vertical-align: -3px; margin-right: 8px; }
.sl-check small { color: var(--color-text-subtle); }
.sl-check--lg { font-size: 13.5px; }
.sl-check--lg input { width: 17px; height: 17px; }
.sl-check--muted { font-size: 12.5px; color: var(--color-text-muted); }
.sl-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.sl-kv span { color: var(--color-text-muted); }
.sl-kv strong { color: var(--color-text-strong); font-weight: 600; text-align: right; }

/* timeline */
.sl-tl { position: relative; padding-left: 22px; }
.sl-tl::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--color-divider); }
.sl-tl__item { position: relative; padding: 6px 0 14px; }
.sl-tl__dot { position: absolute; left: -22px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); }
.sl-tl__item--done .sl-tl__dot { background: var(--color-brand); border-color: var(--color-brand); }
.sl-tl__item--on .sl-tl__dot { background: var(--color-brand); border-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-subtle); }
.sl-tl__t { font-size: 13px; font-weight: 600; color: var(--color-text-strong); }
.sl-tl__d { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 1px; }

.sl-input { width: 100%; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-sunken); color: var(--color-text-strong); font-size: 13.5px; font-family: inherit; }
.sl-input:focus { outline: none; border-color: var(--color-brand); }

/* placeholder / coming soon */
.sl-soon { text-align: center; padding: 80px 24px; }
/* 카드 안에 들어가는 빈 상태(전면 빈 화면보다 낮은 여백). */
.sl-soon--compact { padding: 36px 16px; }
/* 빈 상태 하단 액션 버튼 줄 — 32곳이 같은 선언을 인라인으로 들고 있었다(2026-08-27 이관). */
.sl-soon__actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sl-soon__ico { width: 64px; height: 64px; border-radius: 18px; background: var(--color-brand-subtle); color: var(--color-brand-text); display: grid; place-items: center; font-size: 26px; margin: 0 auto 18px; }
.sl-soon h2 { font-size: 19px; font-weight: 800; color: var(--color-text-strong); margin: 0 0 8px; }
.sl-soon p { font-size: 13.5px; color: var(--color-text-muted); margin: 0 auto; max-width: 360px; }

/* theme menu (in topbar) */
.sl-thememenu { position: absolute; top: 52px; right: 18px; z-index: 80; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 13px; box-shadow: var(--shadow-lg); padding: 7px; min-width: 150px; }
.sl-thememenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--color-text); background: transparent; border: none; }
.sl-thememenu button:hover { background: var(--color-hover-bg); }
.sl-thememenu button.is-on { color: var(--color-brand-text); font-weight: 700; }
.sl-thememenu button i:last-child { margin-left: auto; font-size: 11px; }

/* account menu (topbar 정체성 클릭 → 드롭다운) */
.sl-top__storewrap { position: relative; }
.sl-top__store {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  background: transparent; border: none; padding: 5px 8px 5px 6px;
  border-radius: 11px; cursor: pointer; text-align: left;
  transition: background var(--gudoc-duration-2);
}
.sl-top__store:hover { background: var(--color-hover-bg); }
.sl-top__id { min-width: 0; }
.sl-top__caret { font-size: 10px; color: var(--color-text-subtle); margin-left: 1px; }
.sl-menu-scrim { position: fixed; inset: 0; z-index: 70; }
.sl-accountmenu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 80;
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 7px; min-width: 232px;
}
.sl-accountmenu__head { display: flex; align-items: center; gap: 11px; padding: 9px 10px 11px; }
.sl-accountmenu__name { font-weight: 700; font-size: 14px; color: var(--color-text-strong); white-space: nowrap; }
.sl-accountmenu__sub { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 2px; }
.sl-accountmenu__div { height: 1px; background: var(--color-border); margin: 4px 6px; }
.sl-accountmenu__item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 11px; border-radius: 9px; font-size: 13px; font-weight: 500;
  color: var(--color-text); background: transparent; border: none;
  text-decoration: none; cursor: pointer;
}
.sl-accountmenu__item i { width: 15px; text-align: center; color: var(--color-text-subtle); }
.sl-accountmenu__item:hover { background: var(--color-hover-bg); }
.sl-accountmenu__item--danger { color: var(--color-danger, #dc2626); }
.sl-accountmenu__item--danger i { color: var(--color-danger, #dc2626); }
.sl-accountmenu__item--danger:hover { background: rgba(220, 38, 38, 0.08); }
.sl-accountmenu__item:disabled { opacity: 0.6; cursor: default; }

/* 미승인(pending) 판매자 온보딩 모드 — 레일 비활성 + 안내 배너 */
.sl-rail__item--disabled { opacity: 0.34; cursor: not-allowed; pointer-events: none; }
.sl-onboarding-banner {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 0 0 20px; padding: 15px 18px; border-radius: 14px;
  background: rgba(245, 158, 11, 0.10); border: 1px solid var(--color-warning, #f59e0b);
}
.sl-onboarding-banner > i { color: var(--color-warning, #f59e0b); font-size: 19px; margin-top: 1px; }
.sl-onboarding-banner strong { display: block; color: var(--color-text-strong); margin-bottom: 3px; font-size: 14.5px; }
.sl-onboarding-banner span { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; }
/* 전체 화면 대기(인증 확인 중·로그인 이동 중). */
.sl-splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--color-text-muted); }
.sl-splash__ico { font-size: 28px; color: var(--color-brand); }
.sl-splash__ico--sm { font-size: 26px; }
.sl-splash__msg { margin: 0; font-size: 14px; }
/* 드롭다운 바깥 클릭을 받는 투명 막. */
.sl-menuscrim { position: fixed; inset: 0; z-index: 70; }
/* 인라인 문장 안의 오류 강조. */
.sl-errtext { color: var(--color-danger); font-weight: 600; }
/* 반려·정지 톤 — 인라인으로 background/border 를 덮어쓰고 있었다(전역 규칙이 안 먹던 자리). */
.sl-onboarding-banner--danger { background: var(--color-danger-bg); border-color: var(--color-danger); }
.sl-onboarding-banner--danger > i { color: var(--color-danger); }
.sl-onboarding-banner--center { align-items: center; }

/* toast */
.sl-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 2000; background: var(--color-text-strong); color: var(--color-bg); padding: 12px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity var(--gudoc-duration-3), transform var(--gudoc-duration-3); }
.sl-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------- products ---------------------- */
.sl-viewtoggle { display: inline-flex; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 10px; padding: 3px; }
.sl-viewtoggle button { width: 34px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--color-text-muted); font-size: 13px; }
.sl-viewtoggle button.is-on { background: var(--color-surface-raised); color: var(--color-text-strong); box-shadow: var(--shadow-xs); }

.sl-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sl-pcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform var(--gudoc-duration-2), box-shadow var(--gudoc-duration-2); }
.sl-pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sl-pcard__cover { height: 116px; position: relative; }
.sl-pcard__st { position: absolute; top: 10px; left: 10px; }
.sl-pcard__body { padding: 13px 15px 15px; }
.sl-pcard__title { font-size: 14px; font-weight: 700; color: var(--color-text-strong); margin: 6px 0; line-height: 1.35; min-height: 2.6em; }
.sl-pcard__meta { display: flex; align-items: center; justify-content: space-between; }
.sl-pcard__subs { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }
.sl-pcard__subs i { font-size: 10px; margin-right: 3px; }
.sl-pcard__opts { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-divider); }

/* editor */
.sl-imgdrop { height: 150px; border-radius: 12px; display: grid; place-items: center; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; border: 1px dashed var(--color-border-strong); gap: 8px; }
.sl-field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-ftype { display: flex; flex-wrap: wrap; gap: 7px; }
.sl-ftype__b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 12.5px; font-weight: 600; }
.sl-ftype__b i { font-size: 11px; }
.sl-ftype__b.is-on { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.sl-opts { display: flex; flex-direction: column; gap: 8px; }
.sl-opt { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 6px; align-items: center; }
.sl-opt .sl-input { padding: 9px 11px; font-size: 12.5px; }
.sl-opt__x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 12px; }
.sl-opt__x:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; }
/* .sl-check 는 여기 있던 flex 판본이 사용처 0개인 죽은 중복이었다 —
   블록 흐름 판본(위 .sl-sec__label 근처)으로 일원화했다(2026-08-27).
   ⚠️ 뒤에 다시 선언하면 같은 특정성으로 이 자리가 이겨서 세로쓰기가 되살아난다. */

@media (max-width: 1080px) { .sl-pgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .sl-pgrid { grid-template-columns: 1fr; } .sl-field2 { grid-template-columns: 1fr; } }

/* ---------------------- rail scroll + badge ---------------------- */
.sl-rail__scroll { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; }
.sl-rail__scroll::-webkit-scrollbar { width: 0; }
.sl-rail__badge { position: absolute; top: 6px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-brand); color: #fff; font-size: 9.5px; font-weight: 700; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--color-surface); }

/* ---------------------- more sheet (mobile) ---------------------- */
.sl-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; background: var(--color-surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-xl); padding: 10px 18px calc(24px + env(safe-area-inset-bottom,0px)); transform: translateY(100%); animation: sl-sheetup var(--gudoc-duration-3) var(--gudoc-ease-emphasis) forwards; }
@keyframes sl-sheetup { to { transform: none; } }
.sl-sheet__grip { width: 40px; height: 4px; border-radius: 999px; background: var(--color-border-strong); margin: 4px auto 14px; }
.sl-sheet__title { font-size: 15px; font-weight: 800; color: var(--color-text-strong); margin-bottom: 14px; }
.sl-sheet__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sl-sheet__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border-radius: 14px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); color: var(--color-text); font-size: 12px; font-weight: 600; }
.sl-sheet__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--color-brand-subtle); color: var(--color-brand-text); display: grid; place-items: center; font-size: 15px; }

/* ---------------------- misc ---------------------- */
.sl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 18px; }
.sl-tab { padding: 11px 16px; border: none; background: transparent; color: var(--color-text-muted); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.sl-tab:hover { color: var(--color-text); }
.sl-tab.is-on { color: var(--color-brand-text); border-bottom-color: var(--color-brand); }
.sl-tab__n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text-muted); }
.sl-tab.is-on .sl-tab__n { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.cmp-card { display: flex; flex-direction: column; }
.cmp-period { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.cmp-conds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cmp-policy { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); padding-top: 12px; border-top: 1px solid var(--color-divider); }
.cmp-policy span { display: flex; align-items: center; gap: 7px; }
.cmp-policy i { width: 14px; color: var(--color-text-subtle); }
.cmp-joined { font-size: 12.5px; color: var(--color-success); background: var(--color-success-bg); border-radius: 9px; padding: 9px 11px; margin-top: 12px; display: flex; align-items: flex-start; gap: 7px; line-height: 1.5; }
.cp-disc-desc { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 7px; }

.sl-bar { height: 5px; border-radius: 999px; background: var(--color-surface-sunken); margin-top: 5px; overflow: hidden; max-width: 120px; }
.sl-bar__fill { height: 100%; border-radius: 999px; background: var(--color-brand); }
.sl-fdist { display: flex; flex-direction: column; gap: 12px; }
.sl-fdist__row { display: flex; align-items: center; gap: 11px; }
.sl-fdist__ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; font-size: 13px; }
.sl-fdist__main { flex: 1; min-width: 0; }
.sl-fdist__main .sl-bar { max-width: none; margin-top: 0; }
.sl-fdist__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.sl-fdist__l { font-size: 13px; font-weight: 600; color: var(--color-text-strong); }
.sl-fdist__n { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.sl-fdist__pct { font-size: 12px; font-weight: 700; color: var(--color-text-subtle); width: 36px; text-align: right; flex-shrink: 0; }
.sl-cards-v { display: flex; flex-direction: column; gap: 12px; }

/* coupons reuse table; reviews feed */
.sl-feed { display: flex; flex-direction: column; gap: 12px; }
.sl-rv { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 16px 18px; }
.sl-rv--flag { border-color: color-mix(in oklab, var(--color-danger) 45%, transparent); }
.sl-rv__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.sl-rv__stars { color: var(--color-warning); font-size: 12px; margin-left: 4px; }
.sl-rv__meta { font-size: 12px; color: var(--color-text-subtle); margin-top: 2px; }
.sl-rv__text { font-size: 13.5px; color: var(--color-text); line-height: 1.6; margin: 0 0 12px; }
.sl-rv__reply { background: var(--color-surface-sunken); border-radius: 11px; padding: 12px 14px; font-size: 13px; color: var(--color-text); line-height: 1.55; }
.sl-rv__reply-tag { font-size: 11.5px; font-weight: 700; color: var(--color-brand-text); margin-bottom: 5px; }
.sl-rv__reply-tag i { font-size: 10px; margin-right: 4px; }
.sl-rv__actions { display: flex; gap: 8px; align-items: center; }
.sl-rv__actions .sl-input { flex: 1; }
/* 운영자 검수 중 배너 — 자식 flex:1 만 있고 컨테이너 규칙이 없어 레이아웃이 안 잡혀 있었다(2026-08-27 실측). */
.sl-rv__mod { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--color-warning-bg); color: var(--color-warning); font-size: 12.5px; line-height: 1.55; }
.sl-rv__mod > i { flex: 0 0 auto; margin-top: 2px; }
/* 문장 전체를 이 한 덩어리에 담는다 — 여기서 텍스트를 형제로 흘리면 flex 아이템으로 쪼개진다. */
.sl-rv__modbody { flex: 1 1 auto; min-width: 0; }
.sl-rv__modbody b { font-weight: 800; }
.sl-rv__mod .sl-btn { flex: 0 0 auto; }
.sl-qbadge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--color-brand-subtle); color: var(--color-brand-text); font-size: 11px; font-weight: 800; margin-right: 4px; }

/* transfer cards */
.sl-tfcard { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 16px 18px; flex-wrap: wrap; }
.sl-tfcard__main { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; flex-wrap: wrap; }
.sl-tfcard__people { display: flex; align-items: center; gap: 14px; }
.sl-tfp { display: flex; align-items: center; gap: 9px; }
.sl-tfp__l { font-size: 10.5px; color: var(--color-text-subtle); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sl-tfcard__arrow { color: var(--color-brand); font-size: 14px; }
.sl-tfcard__prod { font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
.sl-tfcard__meta { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
.sl-tfcard__side { display: flex; gap: 8px; align-items: center; }

/* transfer approval queue */
.sl-tfcard--click { cursor: pointer; transition: border-color var(--gudoc-duration-2) var(--gudoc-ease-standard), box-shadow var(--gudoc-duration-2) var(--gudoc-ease-standard); }
.sl-tfcard--click:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.sl-tfcard__info { min-width: 0; }
.sl-tfq__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sl-tfq__sla, .sl-tfq__chk, .sl-tfq__flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sl-tfq__sla { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.sl-tfq__sla.is-urgent { background: var(--color-warning-bg); color: var(--color-warning); }
.sl-tfq__chk { background: rgba(91,141,246,0.14); color: var(--color-info); }
.sl-tfq__flag { background: var(--color-warning-bg); color: var(--color-warning); }
.sl-tfq__sla i, .sl-tfq__chk i, .sl-tfq__flag i { font-size: 10px; }

/* drawer: parties */
.sl-tfdrawer__parties { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.sl-tfparty { background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; min-width: 0; }
.sl-tfparty__hd { display: flex; align-items: center; gap: 9px; }
.sl-tfparty__meta { font-size: 11.5px; color: var(--color-text-muted); margin-top: 8px; line-height: 1.4; }
.sl-tfparty__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sl-tfflag { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--color-danger-bg); color: var(--color-danger); font-size: 12.5px; font-weight: 600; }
.sl-quote { font-size: 13px; color: var(--color-text); line-height: 1.55; padding: 11px 14px; background: var(--color-surface-sunken); border-radius: 10px; border-left: 3px solid var(--color-border-strong); }

/* drawer: consent checklist */
.sl-cslist { display: grid; gap: 8px; }
.sl-cs { display: flex; align-items: flex-start; gap: 11px; text-align: left; width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-family: inherit; transition: border-color var(--gudoc-duration-2), background var(--gudoc-duration-2); }
.sl-cs:not([disabled]):hover { border-color: var(--color-border-strong); background: var(--color-hover-bg); }
.sl-cs__box { flex: 0 0 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--color-border-strong); display: grid; place-items: center; color: #fff; font-size: 11px; transition: background var(--gudoc-duration-2), border-color var(--gudoc-duration-2); }
.sl-cs.is-ok { border-color: var(--color-success); background: var(--color-success-bg); }
.sl-cs.is-ok .sl-cs__box { background: var(--color-success); border-color: var(--color-success); }
.sl-cs.is-fail { border-color: var(--color-danger); background: var(--color-danger-bg); }
.sl-cs.is-fail .sl-cs__box { background: var(--color-danger); border-color: var(--color-danger); }
.sl-cs[disabled] { cursor: default; }
.sl-cs__body { min-width: 0; }
.sl-cs__t { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.sl-cs__t em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--color-info); background: rgba(91,141,246,0.14); padding: 1px 6px; border-radius: 5px; margin-left: 6px; }
.sl-cs__d { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.45; }
.sl-empty { text-align: center; padding: 48px 20px; color: var(--color-text-subtle); }
.sl-empty i { font-size: 28px; color: var(--color-success); margin-bottom: 10px; }
.sl-empty p { font-size: 13.5px; margin: 0; }
.sl-input--err { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px var(--color-danger-bg); }
.sl-reverify { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 11px; background: rgba(91,141,246,0.10); color: var(--color-text); font-size: 12.5px; line-height: 1.5; }
.sl-reverify > i { color: var(--color-info); font-size: 15px; margin-top: 1px; flex: 0 0 auto; }
.sl-reverify b { color: var(--color-text-strong); }
.sl-refundbox { margin-top: 12px; border: 1px solid var(--color-border); border-radius: 11px; overflow: hidden; }
.sl-refundbox__hd { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--color-surface-sunken); font-size: 12px; font-weight: 800; color: var(--color-text-strong); }
.sl-refundbox__hd i { color: var(--color-text-muted); }
.sl-refundbox__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 13px; font-size: 12.5px; border-top: 1px solid var(--color-divider); }
.sl-refundbox__row span { color: var(--color-text-muted); }
.sl-refundbox__row b { color: var(--color-text-strong); font-weight: 700; white-space: nowrap; }
.sl-refundbox__foot { padding: 8px 13px; font-size: 11.5px; color: var(--color-text-subtle); background: var(--color-surface-sunken); border-top: 1px solid var(--color-divider); }

/* seller transfer summary ownership chain (요약판 — 운영자 풀체인 압축) */
.sl-tfchain { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.sl-tfchain__count { font-size: 11px; font-weight: 700; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sl-tfchain__count i { color: var(--color-brand); font-size: 10px; }
.sl-tfchain__node { display: flex; align-items: flex-start; gap: 11px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); }
.sl-tfchain__node.is-cur { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-tfchain__node.is-flag { border-color: var(--color-danger); background: var(--color-danger-bg); }
.sl-tfchain__av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--color-surface-sunken); color: var(--color-text-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.sl-tfchain__av.is-issuer { background: var(--color-text-strong); color: #fff; }
.sl-tfchain__node.is-flag .sl-tfchain__av { background: var(--color-danger); color: #fff; }
.sl-tfchain__body { flex: 1; min-width: 0; }
.sl-tfchain__nm { font-size: 13px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sl-tfchain__role { font-size: 11.5px; font-weight: 600; color: var(--color-brand-text); margin-top: 1px; }
.sl-tfchain__meta { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.45; }
.sl-tfchain__curtag { font-size: 10px; font-weight: 800; color: var(--color-brand-text); background: var(--color-surface); padding: 2px 7px; border-radius: 999px; }
.sl-tfchain__flagtag { font-size: 10px; font-weight: 800; color: var(--color-danger); display: inline-flex; align-items: center; gap: 3px; }
.sl-tfchain__link { width: 2px; height: 13px; margin-left: 26px; background: var(--color-border); }
.sl-tfchain__node.is-flag + .sl-tfchain__link, .sl-tfchain__link:has(+ .sl-tfchain__node.is-cur) { background: var(--color-border); }
.sl-tfchain__alert { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--color-danger-bg); color: var(--color-danger); font-size: 12px; font-weight: 600; line-height: 1.45; }
.sl-tfchain__alert i { margin-top: 1px; flex: 0 0 auto; }
.sl-tfchain__ok { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--color-success-bg, rgba(31,138,91,0.10)); color: var(--color-success); font-size: 12px; font-weight: 600; }

/* seller onboarding/verify — categories, docs, addresses */
.sl-catchips { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.sl-catchip { font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; padding:8px 14px; border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-muted); display:inline-flex; align-items:center; gap:6px; transition:all .12s; }
.sl-catchip i { font-size:10px; }
.sl-catchip:hover { border-color:var(--color-border-strong); color:var(--color-text); }
.sl-catchip.is-on { background:var(--color-brand-subtle); border-color:var(--color-brand); color:var(--color-brand-text); }
.sl-catchip.is-rep { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.sl-catchip.is-rep i { color:#FFD580; }
.sl-docs2 { display:grid; gap:8px; }
.sl-doc2 { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--color-border); border-radius:11px; }
.sl-doc2__main { flex:1; min-width:0; }
.sl-doc2__nm { font-size:13px; font-weight:700; color:var(--color-text-strong); }
.sl-doc2__req { font-style:normal; font-size:10px; font-weight:800; color:var(--color-danger); background:var(--color-danger-bg); padding:1px 6px; border-radius:5px; margin-left:5px; }
.sl-doc2__cond { font-style:normal; font-size:10px; font-weight:800; color:var(--color-warning); background:var(--color-warning-bg); padding:1px 6px; border-radius:5px; margin-left:5px; }
.sl-doc2__api { font-style:normal; font-size:10px; font-weight:800; color:var(--color-info); background:rgba(91,141,246,0.14); padding:1px 6px; border-radius:5px; margin-left:5px; }
.sl-doc2__opt { font-style:normal; font-size:10px; font-weight:700; color:var(--color-text-subtle); background:var(--color-surface-sunken); padding:1px 6px; border-radius:5px; margin-left:5px; }
.sl-doc2__note { font-size:11.5px; color:var(--color-text-muted); margin-top:3px; line-height:1.4; }
.sl-doc2__right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* 서류 제출 AI 고지 박스(SellerSettings 서류 탭 · 처리방침 v2.2 수탁·국외이전 고지).
   ⛔ 부모 .rg-alert 를 flex 로 되돌리면 아래 <p>·<label> 이 세로 칼럼으로 쪼개진다(2026-08-27 Owner 적출). */
.sl-docai { margin-bottom: 14px; }
.sl-docai__line { margin:0 0 7px; }
.sl-docai__opt { display:flex; align-items:flex-start; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid color-mix(in oklab, var(--color-info) 22%, transparent); cursor:pointer; }
.sl-docai__opt input { margin-top:2px; flex:0 0 auto; accent-color:var(--color-brand); }
.sl-docai__opt > span { flex:1 1 auto; min-width:0; }
.sl-docai__marks { font-style:normal; font-size:10px; font-weight:700; color:var(--color-info); background:rgba(91,141,246,0.14); padding:1px 6px; border-radius:5px; margin-left:5px; }
.sl-onb-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--color-divider); }
.sl-onb-foot__t { font-size:13px; color:var(--color-text-muted); }
.sl-addr-form { margin-top:14px; padding:14px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface-sunken); }
.sl-addrlist { display:grid; gap:9px; margin-top:14px; }
.sl-addr { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); }
.sl-addr__ic { width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--color-surface-sunken); color:var(--color-text-muted); font-size:14px; }
.sl-addr__b { flex:1; min-width:0; }
.sl-addr__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sl-addr__label { font-size:13.5px; font-weight:700; color:var(--color-text-strong); }
.sl-addr__use { font-size:11px; font-weight:700; color:var(--color-text-muted); background:var(--color-surface-sunken); border-radius:999px; padding:2px 8px; }
.sl-addr__lock { font-size:10.5px; font-weight:700; color:var(--color-info); display:inline-flex; align-items:center; gap:4px; }
.sl-addr__lock i { font-size:9px; }
.sl-addr__addr { font-size:12.5px; color:var(--color-text-muted); margin-top:3px; }
.sl-addr__right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sl-iconbtn { width:32px; height:32px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-subtle); cursor:pointer; font-size:12px; }
.sl-iconbtn:hover { border-color:var(--color-danger); color:var(--color-danger); background:var(--color-danger-bg); }

/* notices & series */
.sl-notice { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--color-divider); }
.sl-notice:last-child { border-bottom: none; }
.sl-notice__pin { color: var(--color-brand); font-size: 12px; width: 14px; }
.sl-notice__t { font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); flex: 1; }
.sl-notice__m { font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
.sl-seriesgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.sl-seriescard { border: 1px solid var(--color-border); border-radius: 13px; overflow: hidden; cursor: pointer; transition: border-color var(--gudoc-duration-1), box-shadow var(--gudoc-duration-1); }
.sl-seriescard:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.sl-seriescard__cover { aspect-ratio: 16 / 9; }
/* 커버 미보유 시 정직한 플레이스홀더(가짜 그라데이션 금지) — 패킷3 시리즈 실바인딩. */
.sl-seriescard__cover--none { display: flex; align-items: center; justify-content: center; background: var(--color-brand-subtle); color: var(--color-text-subtle); font-size: 22px; }
.sl-seriescard__body { padding: 11px 13px; }
.sl-seriescard__t { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-seriescard__m { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.sl-serlist { display: flex; flex-direction: column; gap: 8px; }
.sl-serprod { display: flex; align-items: center; gap: 11px; border: 1px solid var(--color-border); border-radius: 11px; padding: 10px 12px; cursor: pointer; }
.sl-serprod:hover { border-color: var(--color-brand); }
.sl-serprod__th { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; }
.sl-serprod__b { flex: 1; min-width: 0; }
.sl-serprod__t { font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.sl-serprod__m { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 2px; }
.sl-serpick { display: flex; align-items: center; gap: 11px; border: 1px solid var(--color-border); border-radius: 11px; padding: 10px 12px; cursor: pointer; }
.sl-serpick.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-serpick input { width: 17px; height: 17px; accent-color: var(--color-brand); flex: 0 0 auto; cursor: pointer; }
.sl-ser__sw { width: 34px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; }
.sl-ser__sw.is-on { border-color: var(--color-text-strong); }
.sl-sercover { position: relative; overflow: hidden; cursor: pointer; }
.sl-sercover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-sercover__ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,.28); opacity: 0; transition: opacity var(--gudoc-duration-1); }
.sl-sercover:hover .sl-sercover__ov, .sl-sercover__ov { opacity: 1; }

/* settings */
.sl-pol-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-success); background: var(--color-success-bg); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.sl-pol-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--color-divider); }
.sl-pol-row__l { font-size: 13px; font-weight: 700; color: var(--color-text-strong); width: 90px; flex-shrink: 0; }
.sl-pol-row__b { font-size: 13px; color: var(--color-text-muted); flex: 1; line-height: 1.5; }
.sl-pol-row__r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sl-btn--block { display: flex; width: 100%; justify-content: center; }
.sl-note { position: relative; display: block; padding-left: 19px; font-size: 12px; color: var(--color-text-subtle); line-height: 1.55; margin: 14px 0 0; text-align: left; }
.sl-note i { position: absolute; left: 0; top: 3px; color: var(--color-brand-text); }

/* ── seller analytics (funnel·coupon·cohort·channel·series·search) ── */
.sl-funnel { display:flex; flex-direction:column; gap:10px; }
.sl-funnel__step { display:flex; align-items:center; gap:13px; }
.sl-funnel__bar { position:relative; flex:0 0 60%; height:30px; border-radius:8px; background:var(--color-surface-sunken); overflow:hidden; display:flex; align-items:center; }
.sl-funnel__fill { position:absolute; left:0; top:0; bottom:0; border-radius:8px; background:linear-gradient(90deg, color-mix(in srgb, var(--color-brand) 26%, transparent), color-mix(in srgb, var(--color-brand) 12%, transparent)); }
.sl-funnel__n { position:relative; font-size:13px; font-weight:800; color:var(--color-text-strong); padding-left:11px; }
.sl-funnel__l { font-size:13px; font-weight:700; color:var(--color-text-strong); display:flex; flex-direction:column; }
.sl-funnel__l em { font-style:normal; font-weight:800; color:var(--color-success); }
.sl-funnel__l small { font-weight:500; color:var(--color-text-subtle); font-size:11px; }
.sl-fbar { display:flex; align-items:center; gap:9px; }
.sl-fbar__t { width:60px; height:6px; border-radius:999px; background:var(--color-surface-sunken); overflow:hidden; }
.sl-fbar__t > div { height:100%; border-radius:999px; background:var(--color-brand); }
.sl-aperf { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.sl-aperf--3 { grid-template-columns:repeat(3,1fr); }
.sl-aperf__c { border:1px solid var(--color-border); border-radius:13px; padding:13px 15px; border-top:3px solid var(--color-success); }
.sl-aperf__c.is-warn { border-top-color:var(--color-warning); }
.sl-aperf__v { font-size:21px; font-weight:800; letter-spacing:-.02em; }
.sl-aperf__l { font-size:12.5px; font-weight:700; color:var(--color-text); margin-top:3px; }
.sl-aperf__d { font-size:11px; color:var(--color-text-subtle); margin-top:2px; }
.sl-cobar { display:flex; align-items:flex-end; gap:8px; height:96px; }
.sl-co { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.sl-co__bar { width:100%; border-radius:6px 6px 0 0; min-height:6px; background:var(--color-brand); }
.sl-co span { font-size:10.5px; color:var(--color-text-subtle); }
.sl-chan { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--color-divider); }
.sl-chan:last-child { border-bottom:none; }
.sl-chan__n { flex:0 0 130px; font-size:13px; font-weight:600; color:var(--color-text-strong); }
.sl-chan__t { flex:1; height:8px; border-radius:999px; background:var(--color-surface-sunken); overflow:hidden; }
.sl-chan__t > div { height:100%; border-radius:999px; background:var(--color-brand); }
.sl-chan__v { flex:0 0 auto; font-size:12.5px; font-weight:800; min-width:74px; text-align:right; }
.sl-chip2 { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--color-text); background:var(--color-surface-sunken); border-radius:8px; padding:5px 10px; }
.sl-chip2 em { font-style:normal; font-weight:800; color:var(--color-text-subtle); }
.sl-chip2 b { color:var(--color-success); }
/* 부가서비스 (크레딧·add-on 스토어) */
.sl-credrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; align-items: start; }
@media (max-width: 1080px) { .sl-credrow { grid-template-columns: 1fr; } }
.sl-credit { background: linear-gradient(135deg, var(--color-text-strong), #2A2622); color: #fff; border: none; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: space-between; }
.sl-credit--mini { aspect-ratio: auto; gap: 16px; }
/* 고객 소통 — 권한 경계 바(판매자 응대권 → 운영자 중재권). 디자인 seller.css 이식. */
.sl-authbar { display: flex; align-items: stretch; gap: 12px; padding: 13px 16px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 13px; margin-bottom: 16px; flex-wrap: wrap; }
.sl-authbar__col { flex: 1; min-width: 220px; }
.sl-authbar__k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--color-brand-text); }
.sl-authbar__k--op { color: var(--color-info); }
.sl-authbar__v { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.5; }
.sl-authbar__v b { color: var(--color-text-strong); }
.sl-authbar__sep { align-self: center; color: var(--color-text-subtle); font-size: 12px; }
/* FAQ·공지 작성 드로어 Quill RTE 호스트 — 최소 높이(snow 테마는 quill.snow.css). */
.sl-rte .ql-container { min-height: 200px; font-size: 14px; }
.sl-rte .ql-toolbar { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.sl-rte .ql-container { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
/* 리치 에디터(SellerRichTextEditor) — 작성/HTML/미리보기 3탭 + 금지어 바(운영자 admin 에디터 미러). */
.rte { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.rte__tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); }
.rte__tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); background: transparent; border: none; border-radius: 8px 8px 0 0; cursor: pointer; }
.rte__tab.is-on { color: var(--color-brand-text); background: var(--color-surface); box-shadow: inset 0 -2px 0 var(--color-brand); }
.rte__quill .ql-container { min-height: 200px; font-size: 14px; border: none; }
.rte__quill .ql-toolbar { border: none; border-bottom: 1px solid var(--color-border); }
.rte__src { width: 100%; min-height: 240px; border: none; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; resize: vertical; background: var(--color-surface); color: var(--color-text); }
.rte__preview { min-height: 200px; padding: 14px 16px; font-size: 14px; line-height: 1.65; color: var(--color-text); }
.rte__preview h2, .rte__preview h3 { font-weight: 800; margin: 10px 0 6px; }
.rte__preview ul, .rte__preview ol { padding-left: 20px; margin: 8px 0; }
.rte__preview a { color: var(--color-brand-text); text-decoration: underline; }
.rte__ph { color: var(--color-text-subtle); }
.ban-bar { margin-top: 10px; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.ban-bar--ok { background: var(--color-success-bg); color: var(--color-success); }
.ban-bar--warn { background: #FEF3C7; color: #92660C; }
.ban-bar--block { background: #FFE4E6; color: #E11D48; }
.ban-bar__hd { display: flex; align-items: center; gap: 6px; }
.ban-bar__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ban-chip { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
/* 심각도 톤 — 색을 C# 상수(BanSevMeta)가 들고 인라인으로 찍던 것을 클래스로 옮겼다.
   값은 위 .ban-bar--warn/--block 과 같은 쌍을 그대로 쓴다. */
.ban-chip--warn { background: #FEF3C7; color: #92660C; }
.ban-chip--block { background: #FFE4E6; color: #E11D48; }
.ban-chip--review { background: #E0F2FE; color: #0369A1; }

/* ── 승인 요청함(SellerApprovals) — change-requests.css 포트 ──────────────── */
.cr-intro { display: flex; align-items: flex-start; gap: 13px; background: var(--color-brand-subtle); border: 1px solid color-mix(in oklab, var(--color-brand) 22%, transparent); border-radius: 14px; padding: 15px 18px; margin-bottom: 18px; }
.cr-intro__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--color-brand); color: #fff; display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; }
.cr-intro__t { font-size: 14px; font-weight: 800; color: var(--color-text-strong); }
.cr-intro__d { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.5; }
.cr-intro__d b { color: var(--color-brand-text); }
.cr-dom { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cr-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--color-surface-sunken); color: var(--color-text-muted); }
.cr-kind i { font-size: 9px; }
.cr-dots { display: inline-flex; gap: 3px; align-items: center; }
.cr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); }
.cr-dots i.is-rej { background: var(--color-danger); }
.cr-dots i.is-used { background: var(--color-warning); }
.cr-dots i.is-ok { background: var(--color-success); }
.cr-list { display: flex; flex-direction: column; gap: 11px; }
.cr-card { display: flex; align-items: center; gap: 15px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 15px 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cr-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.cr-card.is-rejected { border-left: 3px solid var(--color-danger); }
.cr-card.is-pending { border-left: 3px solid var(--color-warning); }
.cr-card.is-approved { border-left: 3px solid var(--color-success); }
.cr-card.is-declined { border-left: 3px solid var(--color-text-subtle); opacity: .82; }
.cr-card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.cr-card__b { flex: 1; min-width: 0; }
.cr-card__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.cr-card__title { font-size: 14.5px; font-weight: 700; color: var(--color-text-strong); }
.cr-card__meta { font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-card__meta .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.cr-card__r { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.cr-diff { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.cr-diff--solo { grid-template-columns: 1fr; }
.cr-diff__col { padding: 13px 14px; }
.cr-diff__col--old { background: var(--color-surface-sunken); border-right: 1px dashed var(--color-border); }
.cr-diff__col--new { background: var(--color-success-bg); }
.cr-diff__col--del { background: var(--color-danger-bg); }
.cr-diff__lb { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; }
.cr-diff__col--old .cr-diff__lb { color: var(--color-text-subtle); }
.cr-diff__col--new .cr-diff__lb { color: var(--color-success); }
.cr-diff__col--del .cr-diff__lb { color: var(--color-danger); }
.cr-diff__row { font-size: 12.5px; padding: 4px 0; }
.cr-diff__k { color: var(--color-text-muted); font-size: 11px; }
.cr-diff__v { font-weight: 700; color: var(--color-text-strong); }
.cr-diff__v.add { color: var(--color-success); }
.cr-diff__v.del { color: var(--color-danger); text-decoration: line-through; }
.cr-diff__img { display: block; margin-top: 4px; max-width: 100%; max-height: 96px; border-radius: 8px; border: 1px solid var(--color-border); object-fit: cover; background: var(--color-surface-subtle); }
.cr-diff__col--del .cr-diff__img { opacity: .6; }
/* IMAGE 변경 행은 이미지가 여러 장일 수 있다(복합 필드 + ThumbnailUris 패킹) — 가로로 흐르게 두고 넘치면 스크롤. */
.cr-diff__imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cr-diff__fig { margin: 0; max-width: 132px; }
.cr-diff__fig figcaption { margin-top: 2px; font-size: 11px; color: var(--color-text-subtle); overflow-wrap: anywhere; }
/* 구독 옵션 JSON 가독 목록(옵션별 가격·선택 메뉴) */
.cr-optlist { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.cr-optlist li { font-size: 12px; color: var(--color-text); padding-left: 11px; position: relative; }
.cr-optlist li::before { content: "·"; position: absolute; left: 2px; color: var(--color-text-subtle); }
.cr-result { display: flex; align-items: flex-start; gap: 11px; border-radius: 12px; padding: 13px 15px; font-size: 13px; line-height: 1.55; }
.cr-result i { font-size: 17px; margin-top: 1px; flex: 0 0 auto; }
.cr-result b { font-weight: 800; }
.cr-result--pending { background: var(--color-warning-bg); color: var(--color-warning); }
.cr-result--approved { background: var(--color-success-bg); color: var(--color-success); }
.cr-result--rejected { background: var(--color-danger-bg); color: var(--color-danger); }
.cr-result--declined { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.cr-reason { border: 1px solid var(--color-danger); border-radius: 12px; overflow: hidden; }
.cr-reason__h { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--color-danger-bg); color: var(--color-danger); font-size: 12px; font-weight: 800; }
.cr-reason__b { padding: 12px 14px; font-size: 13px; color: var(--color-text); line-height: 1.6; }
.cr-reason__from { font-size: 11px; color: var(--color-text-subtle); margin-top: 8px; }
.cr-resub { border: 1px solid var(--color-brand); background: var(--color-brand-subtle); border-radius: 12px; padding: 14px; }
.cr-resub__h { font-size: 13px; font-weight: 800; color: var(--color-brand-text); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cr-resub__d { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 10px; }
.cr-resub textarea { width: 100%; min-height: 70px; resize: vertical; }
.cr-meter { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: var(--color-surface-sunken); }
.cr-meter__dots { display: inline-flex; gap: 5px; }
.cr-meter__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border-strong); display: grid; place-items: center; font-size: 6px; color: #fff; }
.cr-meter__dots i.is-rej { background: var(--color-danger); }
.cr-meter__dots i.is-used { background: var(--color-warning); }
.cr-meter__dots i.is-ok { background: var(--color-success); }
.cr-meter__t { font-size: 12px; color: var(--color-text-muted); }
.cr-meter__t b { color: var(--color-text-strong); }
.cr-empty { text-align: center; padding: 60px 20px; color: var(--color-text-subtle); }
.cr-empty i { font-size: 34px; color: var(--color-success); margin-bottom: 12px; }
.cr-empty p { font-size: 14px; margin: 0; }

/* ── 운영 공지 수신함(SellerOpNotices) — operator→seller inbox / FAQ / 1:1 Q&A ──── */
.sl-opfeed { display: flex; flex-direction: column; gap: 10px; }
.sl-opn { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.sl-opn:hover { border-color: var(--color-border-strong); }
.sl-opn.is-unread { background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-brand) 24%, var(--color-border)); }
.sl-opn__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 16px; }
.sl-opn__b { flex: 1; min-width: 0; }
.sl-opn__top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.sl-opn__cat { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 7px; }
.sl-opn__pin { color: var(--color-text-subtle); font-size: 11px; }
.sl-opn__role { font-size: 10px; font-weight: 700; color: var(--color-text-muted); background: var(--color-surface-sunken); border-radius: 5px; padding: 2px 6px; }
.sl-opn__t { font-size: 14px; font-weight: 700; color: var(--color-text-strong); line-height: 1.4; }
.sl-opn__m { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-opn__meta { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 7px; }
.sl-opn__dot { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand); }
.sl-opn__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: var(--color-brand-subtle); color: var(--color-brand-text); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.sl-opn__link:hover { background: color-mix(in srgb, var(--color-brand) 22%, transparent); }
.sl-faq { display: flex; flex-direction: column; gap: 18px; }
.sl-faq__cat { font-size: 12px; font-weight: 800; color: var(--color-brand-text); letter-spacing: .02em; margin-bottom: 8px; }
.sl-faq__item { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--color-surface); }
.sl-faq__item.is-open { border-color: var(--color-border-strong); }
.sl-faq__q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: none; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); cursor: pointer; text-align: left; }
.sl-faq__q span { flex: 1; }
.sl-faq__q i { font-size: 12px; color: var(--color-text-subtle); }
.sl-faq__a { padding: 0 16px 15px; font-size: 13px; color: var(--color-text-muted); line-height: 1.65; }
.sl-qna { display: flex; flex-direction: column; gap: 9px; }
.sl-qna__t { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-surface); }
.sl-qna__t.is-open { border-color: var(--color-border-strong); }
.sl-qna__h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: none; background: transparent; font-family: inherit; cursor: pointer; text-align: left; }
.sl-qna__hb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.sl-qna__cat { flex: none; font-size: 10.5px; font-weight: 800; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 5px; padding: 2px 7px; }
.sl-qna__subj { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-qna__body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sl-qmsg { max-width: 80%; }
.sl-qmsg--seller { align-self: flex-end; text-align: right; }
.sl-qmsg--op { align-self: flex-start; }
.sl-qmsg__b { display: inline-block; text-align: left; font-size: 13px; line-height: 1.6; padding: 10px 13px; border-radius: 13px; }
.sl-qmsg--seller .sl-qmsg__b { background: var(--color-brand); color: #fff; border-bottom-right-radius: 4px; }
.sl-qmsg--op .sl-qmsg__b { background: var(--color-surface-sunken); color: var(--color-text); border-bottom-left-radius: 4px; }
.sl-qmsg__meta { font-size: 11px; color: var(--color-text-subtle); margin-top: 4px; }
.sl-qna__pending { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-muted); background: var(--color-surface-sunken); border-radius: 9px; padding: 9px 12px; }

/* ── 대시보드 내 위젯 보드(SellerDashboard) — customizable widget board ──────── */
.sl-wsec { margin-top: 18px; }
.sl-wsec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sl-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sl-wcard { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); overflow: hidden; }
.sl-wcard__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--color-divider, var(--color-border)); }
.sl-wcard__t { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 8px; }
.sl-wcard__t i { color: var(--color-brand-text); }
.sl-wcard__act { display: flex; align-items: center; gap: 2px; }
.sl-wcard__b { width: 26px; height: 26px; border: none; background: transparent; border-radius: 7px; color: var(--color-text-subtle); cursor: pointer; font-size: 12px; }
.sl-wcard__b:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.sl-wcard__b:disabled { opacity: .3; cursor: default; }
.sl-wcard__bd { padding: 14px; flex: 1; }
.sl-wempty { border: 1px dashed var(--color-border-strong); border-radius: 14px; padding: 28px; text-align: center; color: var(--color-text-muted); background: var(--color-surface-sunken); }
.sl-wempty i { font-size: 22px; color: var(--color-text-subtle); margin-bottom: 8px; display: block; }
.sl-wempty p { font-size: 13px; margin: 0; }
.sw-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sw-quad--3 { grid-template-columns: repeat(3, 1fr); }
.sw-quad > div { display: flex; flex-direction: column; gap: 3px; }
.sw-quad span { font-size: 11.5px; color: var(--color-text-muted); }
.sw-quad b { font-size: 16px; font-weight: 800; color: var(--color-text-strong); }
.sw-big { display: flex; flex-direction: column; gap: 2px; }
.sw-big b { font-size: 26px; font-weight: 800; color: var(--color-text-strong); line-height: 1.05; }
.sw-big span { font-size: 12px; color: var(--color-text-muted); }
.sw-note { display: block; font-size: 11px; color: var(--color-text-subtle); margin-top: 8px; }
.sw-list { display: flex; flex-direction: column; gap: 8px; }
.sw-list__r { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--color-text); }
.sw-list__r b { font-weight: 700; color: var(--color-text-strong); }
.sw-list__r small { color: var(--color-text-subtle); font-weight: 500; }
.sw-catlist { display: flex; flex-direction: column; gap: 8px; }
.sw-cat { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); cursor: pointer; }
.sw-cat:hover { border-color: var(--color-border-strong); }
.sw-cat.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sw-cat__ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--color-surface-sunken); color: var(--color-text-muted); flex: 0 0 auto; }
.sw-cat.is-on .sw-cat__ic { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sw-cat__n { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); }
.sw-cat__chk { color: var(--color-text-subtle); }
.sw-cat.is-on .sw-cat__chk { color: var(--color-brand); }

/* ── 통합 위젯 보드 — KPI 위젯 + 와이드(차트/리스트) 위젯 ──── */
.sl-wcard--wide { grid-column: span 2; }
@media (max-width: 560px) { .sl-wcard--wide { grid-column: span 1; } }
.sl-wkpi { display: flex; flex-direction: column; gap: 3px; }
.sl-wkpi__v { font-size: 26px; font-weight: 800; color: var(--color-text-strong); line-height: 1.05; }
.sl-wkpi__v small { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.sl-wkpi__lb { font-size: 12px; color: var(--color-text-muted); }
.sl-wkpi__lb small { color: var(--color-text-subtle); }
.sl-wkpi--sub { flex-direction: row; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-divider, var(--color-border)); }
.sl-wkpi--sub span { font-size: 12px; color: var(--color-text-muted); }
.sl-wkpi--sub b { font-size: 15px; font-weight: 800; color: var(--color-text-strong); }

/* ── 직원·권한 탭(SellerSettings team) — 구성원 카드 + 역할 picker + 권한 매트릭스 ──── */
.sl-stafflist { display: flex; flex-direction: column; gap: 9px; }
.sl-staff { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 13px; }
.sl-staff__av { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--color-brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.sl-staff__b { flex: 1; min-width: 0; }
.sl-staff__n { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sl-staff__me { font-size: 10px; font-weight: 800; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 5px; padding: 1px 6px; }
.sl-staff__e { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.sl-staff__2fa { flex: none; font-size: 11px; font-weight: 700; color: var(--color-text-subtle); background: var(--color-surface-sunken); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.sl-staff__2fa.is-on { color: var(--color-success); background: var(--color-success-bg); }
.sl-iconbtn--danger:hover { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-bg); }
.sl-rolepick { display: flex; flex-direction: column; gap: 8px; }
.sl-roleopt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 11px; cursor: pointer; }
.sl-roleopt.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-roleopt > div { flex: 1; }
.sl-roleopt b { display: block; font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-roleopt span:not(.set-radio) { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.set-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--color-border-strong); position: relative; }
.set-radio.is-on { border-color: var(--color-brand); }
.set-radio.is-on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-brand); }
.sl-pmx-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 11px; }
.sl-pmx { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--color-surface); }
.sl-pmx th, .sl-pmx td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--color-divider, var(--color-border)); }
.sl-pmx thead th { background: var(--color-surface-sunken); font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.sl-pmx tbody tr:last-child td { border-bottom: none; }
.sl-pmx__m { text-align: left !important; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; }
.sl-pcell { display: inline-block; min-width: 38px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
.sl-pl-none { color: var(--color-text-subtle); background: var(--color-surface-sunken); }
.sl-pl-read { color: var(--color-info); background: rgba(91,141,246,0.14); }
.sl-pl-write { color: var(--color-success); background: var(--color-success-bg); }
.sl-pl-appr { color: var(--color-warning); background: var(--color-warning-bg); }
.sl-pl-exec { color: #fff; background: var(--color-brand); }
.sl-pcell--btn { border: 1px solid transparent; cursor: pointer; transition: filter .12s, border-color .12s; }
.sl-pcell--btn:hover { filter: brightness(0.96); border-color: var(--color-border-strong); }
.sl-pcell--btn.sl-pl-none { color: var(--color-text-subtle); }
.sl-pcell--btn.sl-pl-none:hover { color: var(--color-text); border-color: var(--color-brand); }
.sl-pmx-legend { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }

/* ── 쿠폰 "특정 상품" 적용 상품 멀티선택 피커 ──── */
.sl-prodpick { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px; background: var(--color-surface-sunken); }
.sl-prodpick__i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; font-size: 13px; color: var(--color-text); }
.sl-prodpick__i:hover { border-color: var(--color-border-strong); }
.sl-prodpick__i.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); font-weight: 600; }
.sl-prodpick__i i { color: var(--color-text-subtle); flex: 0 0 auto; }
.sl-prodpick__i.is-on i { color: var(--color-brand); }

/* ── 해지 정책 selector(설정 약관·정책 탭) ──────────────────────────────────── */
.sl-cancel__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-divider, var(--color-border)); }
.sl-cancel__row:first-of-type { border-top: 1px solid var(--color-divider, var(--color-border)); margin-top: 10px; }
.sl-cancel__lb { width: 72px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); }
.sl-cancel__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-cancel__opt { font-size: 12px; font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px; padding: 5px 11px; cursor: pointer; font-family: inherit; }
.sl-cancel__opt.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sl-cancel__floor { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: var(--color-text-muted); background: var(--color-surface-sunken); border-radius: 9px; padding: 9px 12px; }
.sl-pol-row__l { font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.sl-pol-row__b { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }

/* ── 상품 성과·인사이트 KPI 카드 + 이행 하위필터(SellerProducts insight) ──────── */
.sl-kpi2 { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.sl-kpi2__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--color-brand-subtle); color: var(--color-brand-text); flex: 0 0 auto; }
.sl-kpi2__v { font-size: 18px; font-weight: 800; color: var(--color-text-strong); line-height: 1.1; }
.sl-kpi2__l { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }
.sl-filters--ff { margin-bottom: 14px; }
/* 해지 정책 세그 토글(상점 기본 따름 / 이 상품만 직접 설정) — register 해지 정책 섹션 */
.rg-segrow { display: flex; gap: 8px; }
.rg-seg { flex: 1; font-size: 13px; font-weight: 700; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 10px; padding: 10px; cursor: pointer; font-family: inherit; }
.rg-seg.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }
/* 위험 액션 버튼(상품 삭제) */
.sl-btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.sl-btn--ghostdanger { color: var(--color-danger); border-color: var(--color-border); background: var(--color-surface); }
.sl-btn--ghostdanger:hover { border-color: var(--color-danger); background: var(--color-danger-subtle, rgba(220, 38, 38, 0.08)); }

/* 구독자 상세 드로어 hero + 쿠폰 직접 발급 드로어 (CRM 타깃 쿠폰) */
.sl-subhero { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sl-subhero__av { width: 44px; height: 44px; font-size: 16px; flex: 0 0 auto; }
.sl-subhero__n { font-weight: 700; color: var(--color-text-strong); font-size: 15px; }
.sl-subhero__s { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
/* "세그먼트: <b>이름</b>" 한 문장이라 블록 흐름 — flex 로 두면 라벨과 값이 각각 칼럼이 된다(2026-08-27). */
.sl-couponseg { display: block; padding: 11px 14px; border-radius: 10px; background: var(--color-brand-subtle); color: var(--color-brand-text); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.sl-couponseg > i:first-child { margin-right: 8px; }
.sl-couponhd { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; }
.sl-couponall { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sl-couponcust { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 11px; cursor: pointer; margin-bottom: 8px; font-size: 13px; }
.sl-couponcust.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-couponcust__n { font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; }
.sl-couponcust__s { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.sl-tag2 { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text-muted); }
.sl-couponpick { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid var(--color-border); border-radius: 11px; cursor: pointer; margin-bottom: 8px; }
.sl-couponpick.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-couponpick__n { font-weight: 700; color: var(--color-text-strong); font-size: 13.5px; }
.sl-couponpick__s { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.sl-couponnotify { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 12px 13px; border: 1px solid var(--color-border); border-radius: 11px; margin-top: 12px; cursor: pointer; }
.sl-couponnotify.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
/* 양도 승인 큐 KPI 요약 칩 */
.sl-tfkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sl-tfkpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.sl-tfkpi__n { font-size: 19px; font-weight: 800; color: var(--color-text-strong); line-height: 1.1; }
.sl-tfkpi__l { font-size: 12px; color: var(--color-text-muted); }
.sl-tfkpi--alert { border-color: var(--color-danger); }
.sl-tfkpi--alert .sl-tfkpi__n { color: var(--color-danger); }
.sl-tfq__sla { background: var(--color-warning-subtle, rgba(245, 158, 11, 0.12)) !important; color: var(--color-warning) !important; }
.sl-tfreason { padding: 12px 14px; border-radius: 11px; background: var(--color-surface-sunken); font-size: 13px; line-height: 1.6; color: var(--color-text); }
/* 판매자 정보 변경 — 경미/중요/이미지 섹션 + 변경 추적 */
.sl-chgsec { border: 1px solid var(--color-border); border-radius: 13px; padding: 16px; margin-bottom: 16px; }
.sl-chgsec__hd { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.sl-chgsec__hd small { color: var(--color-text-muted); font-size: 12px; }
.sl-quota { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--color-text-subtle); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.sl-quota--full { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger); }
.sl-note--warn { color: var(--color-danger); font-weight: 600; }
.sl-chgbadge { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.sl-chgbadge--minor { background: var(--color-success-bg, rgba(31, 138, 91, 0.12)); color: var(--color-success); }
.sl-chgbadge--major { background: var(--color-warning-subtle, rgba(245, 158, 11, 0.14)); color: var(--color-warning); }
.sl-chgbadge--image { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sl-chgdiff { margin-top: 14px; padding: 12px 14px; border-radius: 11px; background: var(--color-surface-sunken); }
.sl-chgdiff__row { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 4px 0; flex-wrap: wrap; }
.sl-chgdiff__f { font-weight: 700; color: var(--color-text-strong); min-width: 84px; }
.sl-chgdiff__o { color: var(--color-text-muted); text-decoration: line-through; }
.sl-chgdiff__n { color: var(--color-brand-text); font-weight: 700; }
.sl-chgdiff__row i { color: var(--color-text-subtle); font-size: 11px; }
.sl-chgcard { border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; }
.sl-chgcard__hd { display: flex; align-items: center; gap: 9px; }
.sl-chgcard__f { font-weight: 700; color: var(--color-text-strong); font-size: 13.5px; }
.sl-chgcard__meta { font-size: 12px; color: var(--color-text-muted); margin-top: 7px; }
.sl-chgcard__rej { font-size: 12px; color: var(--color-danger); margin-top: 6px; }
.sl-chgcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sl-chgcard__hist { font-size: 11.5px; color: var(--color-text-subtle); }
.sl-chgimg { display: block; border: 1px solid var(--color-border); object-fit: cover; }
.sl-chgimg--profile { width: 72px; height: 72px; border-radius: 14px; }
.sl-chgimg--header { width: 100%; max-width: 260px; height: 60px; border-radius: 8px; }
@media (max-width: 1080px) { .sl-credit { aspect-ratio: auto; } }
.sl-credit__lb { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); }
.sl-credit__bal { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 6px; }
.sl-credit__meta { font-size: 12px; color: rgba(255,255,255,.7); }
.sl-credit__tagmini { display: inline-block; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.82); background: rgba(255,255,255,.14); border-radius: 5px; padding: 1px 6px; margin: 0 1px; }
.sl-credit__tagmini--ok { color: #7BE0AE; background: rgba(31,138,91,.28); }
.sl-credit__bottom { display: flex; flex-direction: column; gap: 12px; }
.sl-credit__pm { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); }
.sl-credit__pm i { font-size: 14px; }
.sl-credit__pm--none { color: var(--color-warning-on-dark, #FBBF24); }
.sl-credit__pmedit { margin-left: 4px; background: rgba(255,255,255,.16); border: none; color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.sl-credit__pmedit:hover { background: rgba(255,255,255,.28); }
.sl-credit__btns { display: flex; gap: 8px; }
.sl-credit__btns .sl-btn { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.sl-credit__btns .sl-btn--primary { background: #fff; color: var(--color-text-strong); }
/* 결제수단 (설정) */
.sl-paycard { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--color-text-strong), #2A2622); color: #fff; border-radius: 14px; padding: 18px 20px; margin: 4px 0 6px; }
.sl-paycard__chip { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; }
.sl-paycard__b { flex: 1; min-width: 0; }
.sl-paycard__no { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.sl-paycard__meta { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; }
.sl-paycard .sl-iconbtn { color: rgba(255,255,255,.7); }
.sl-paycard .sl-iconbtn:hover { color: #fff; }
/* 결제수단 탭 — 플랫폼 빌링키(크레딧 충전 카드) 등록 상태 + 인페이지 등록 CTA */
.sl-billing { max-width: 620px; }
.sl-billing__empty { text-align: center; padding: 26px 16px 18px; color: var(--color-text-muted); }
.sl-billing__empty > i { font-size: 30px; color: var(--color-text-subtle); }
.sl-billing__empty-t { margin: 10px 0 4px; font-size: 14.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-billing__empty-s { margin: 0; font-size: 12.5px; line-height: 1.55; }
.sl-billing__alert { margin-top: 12px; }
.sl-billing__cta { margin-top: 14px; }
/* 결제수단 등록 콜백(/seller/billing/callback) — Toss 리다이렉트 결과 카드 */
.sl-billingcb { display: flex; align-items: flex-start; justify-content: center; padding-top: 46px; }
.sl-billingcb__card { width: 100%; max-width: 460px; text-align: center; padding: 34px 28px 28px; }
.sl-billingcb__ico { width: 72px; height: 72px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 30px; margin-bottom: 14px; }
.sl-billingcb__ico--busy { background: var(--color-bg-subtle, #F5EEE9); color: var(--color-brand, #F4521E); }
.sl-billingcb__ico--ok { background: rgba(31,138,91,.12); color: var(--color-success, #1F8A5B); }
.sl-billingcb__ico--fail { background: rgba(214,69,69,.1); color: var(--color-danger, #D64545); }
.sl-billingcb__title { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--color-text-strong); }
.sl-billingcb__sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.sl-billingcb__err { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-danger, #D64545); }
.sl-billingcb__code { margin: 6px 0 0; font-size: 11.5px; color: var(--color-text-subtle); }
.sl-billingcb__paycard { text-align: left; margin: 14px 0 4px; }
.sl-billingcb__btns { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
/* AI 무료 토큰 게이지 (add-on 카드) */
.sl-aitok { margin-top: 8px; }
.sl-aitok__bar { height: 5px; border-radius: 999px; background: var(--color-bg-subtle, #F5EEE9); overflow: hidden; }
.sl-aitok__bar > div { height: 100%; border-radius: 999px; background: var(--color-brand, #F4521E); }
.sl-aitok__txt { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 5px; }
.sl-aitok__txt b { color: var(--color-text-strong); font-weight: 800; }
/* AI 사용량 모달 */
.sl-aiu__hero { background: var(--color-bg-subtle, #F5EEE9); border-radius: 12px; padding: 16px; }
.sl-aiu__herotop { display: flex; justify-content: space-between; align-items: baseline; }
.sl-aiu__herotop span { font-size: 12.5px; color: var(--color-text-muted); }
.sl-aiu__herotop b { font-size: 22px; font-weight: 800; color: var(--color-text-strong); letter-spacing: -.02em; }
.sl-aiu__herotop small { font-size: 13px; font-weight: 600; color: var(--color-text-subtle); }
.sl-aiu__bar { height: 8px; border-radius: 999px; background: var(--color-border, #E7DED6); overflow: hidden; margin: 10px 0 8px; }
.sl-aiu__bar > div { height: 100%; border-radius: 999px; background: var(--color-brand, #F4521E); }
.sl-aiu__herofoot { font-size: 11.5px; color: var(--color-text-muted); }
.sl-aiu__herofoot b { color: var(--color-brand-text, #B23A12); font-weight: 800; }
.sl-aiu__list { display: flex; flex-direction: column; gap: 4px; }
.sl-aiu__row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--color-divider, #F0E9E2); }
.sl-aiu__row:last-child { border-bottom: none; }
.sl-aiu__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--color-brand-subtle, #FFEDE6); color: var(--color-brand-text, #B23A12); display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.sl-aiu__main { flex: 1; min-width: 0; }
.sl-aiu__fn { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-aiu__sub { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 1px; }
.sl-aiu__amt { flex: 0 0 92px; text-align: right; }
.sl-aiu__amt b { font-size: 14px; font-weight: 800; color: var(--color-text-strong); }
.sl-aiu__amt small { font-size: 11px; color: var(--color-text-subtle); margin-left: 2px; }
.sl-aiu__mini { height: 4px; border-radius: 999px; background: var(--color-border, #E7DED6); overflow: hidden; margin-top: 5px; }
.sl-aiu__mini > div { height: 100%; border-radius: 999px; background: var(--color-brand, #F4521E); opacity: .55; }
/* 커스텀 도메인 + 화이트라벨 드로어 */
.sl-dom-add { display: flex; gap: 8px; }
.sl-dom-add .sl-input { flex: 1; }
.sl-dom-add .sl-btn { flex: 0 0 auto; white-space: nowrap; }
.sl-domlist { display: flex; flex-direction: column; gap: 10px; }
.sl-dom { border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 14px; }
.sl-dom.is-primary { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-dom__top { display: flex; align-items: center; gap: 11px; }
.sl-dom__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--color-surface-sunken); color: var(--color-text-muted); display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.sl-dom.is-primary .sl-dom__ic { background: var(--color-brand); color: #fff; }
.sl-dom__b { flex: 1; min-width: 0; }
.sl-dom__name { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; }
.sl-dom__primary { font-size: 10px; font-weight: 800; color: var(--color-brand-text); background: var(--color-surface); border-radius: 5px; padding: 1px 6px; }
.sl-dom__meta { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 2px; }
.sl-dom__txt { margin-top: 11px; background: var(--color-surface-sunken); border-radius: 9px; padding: 10px 12px; }
.sl-dom__txtrow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.sl-dom__txtrow > span { width: 44px; color: var(--color-text-subtle); flex: 0 0 auto; }
.sl-dom__txtrow > b { color: var(--color-text-strong); font-family: var(--gudoc-font-mono, monospace); }
.sl-dom__txtval { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sl-dom__acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.sl-wl { display: flex; flex-direction: column; gap: 14px; }
.sl-wl__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-wl__lb { font-size: 13px; font-weight: 600; color: var(--color-text); }
.sl-wl__logo { display: flex; align-items: center; gap: 10px; }
.sl-wl__colors { display: flex; gap: 8px; }
.sl-wl__color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sl-wl__color.is-on { border-color: var(--color-text-strong); }
.sl-wl__themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.sl-wl__theme { display: flex; align-items: center; gap: 9px; border: 1px solid var(--color-border); border-radius: 10px; padding: 9px 11px; background: var(--color-surface); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.sl-wl__theme.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sl-wl__swatch { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.sl-wl__toggle { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--color-text); cursor: pointer; }
.sl-wl__toggle input { width: 17px; height: 17px; accent-color: var(--color-brand); cursor: pointer; }
/* 리포트 팩 미리보기 드로어 */
.sl-rp-segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.sl-rp-seg { background: var(--color-bg-subtle); border-radius: 11px; padding: 12px 8px; text-align: center; }
.sl-rp-seg__n { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sl-rp-seg__k { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.sl-rp-cohort { font-size: 12px; }
.sl-rp-chead, .sl-rp-crow { display: grid; grid-template-columns: 48px 44px repeat(4, 1fr); gap: 5px; align-items: center; }
.sl-rp-chead { color: var(--color-text-subtle); font-size: 10.5px; font-weight: 700; padding: 0 0 6px; }
.sl-rp-crow { margin-bottom: 5px; }
.sl-rp-cm { font-weight: 700; color: var(--color-text-strong); }
.sl-rp-cn { color: var(--color-text-muted); }
.sl-rp-cell { text-align: center; padding: 7px 0; border-radius: 7px; font-weight: 700; color: var(--color-text-strong); font-size: 11.5px; }
.sl-rp-churn { display: flex; flex-direction: column; gap: 8px; }
.sl-rp-cr { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-border); border-radius: 11px; padding: 11px 13px; overflow: hidden; }
.sl-rp-cr.is-locked { background: var(--color-bg-subtle); }
.sl-rp-cr.is-locked .sl-rp-cr__rs, .sl-rp-cr.is-locked .sl-rp-cr__nm { filter: blur(0); color: var(--color-text-subtle); }
.sl-rp-cr__bar { flex: 0 0 6px; align-self: stretch; border-radius: 999px; background: var(--color-border); overflow: hidden; position: relative; }
.sl-rp-cr__bar > div { position: absolute; bottom: 0; left: 0; right: 0; background: var(--color-danger); border-radius: 999px; }
.sl-rp-cr__b { flex: 1; min-width: 0; }
.sl-rp-cr__nm { font-size: 13px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 8px; }
.sl-rp-cr__risk { font-size: 11px; font-weight: 800; color: var(--color-danger); background: var(--color-danger-bg); border-radius: 999px; padding: 1px 7px; }
.sl-rp-cr__rs { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }
.sl-rp-cr__lock { color: var(--color-text-subtle); flex: 0 0 auto; }
/* 입찰 드로어 */
.sl-bid__live { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.sl-bid__livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgba(31,138,91,.5); animation: sl-pulse 1.8s infinite; }
@keyframes sl-pulse { 0%{box-shadow:0 0 0 0 rgba(31,138,91,.45);} 70%{box-shadow:0 0 0 7px rgba(31,138,91,0);} 100%{box-shadow:0 0 0 0 rgba(31,138,91,0);} }
.sl-bid__refresh { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; }
.sl-bid__refresh:hover { background: var(--color-hover-bg); }
.sl-bid__auto { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--color-success); background: var(--color-success-bg, #E5F4EC); border-radius: 999px; padding: 2px 9px; }
.sl-bid__snipe { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; background: var(--color-info-bg, #EAF1FB); color: var(--color-info-text, #2A5FA8); border-radius: 10px; padding: 11px 13px; font-size: 11.5px; line-height: 1.55; }
.sl-bid__snipe i { margin-top: 2px; flex: 0 0 auto; }
.sl-bid__snipe b { color: inherit; }
.sl-bid__stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.sl-bid__stat > div { background: var(--color-bg-subtle); border-radius: 10px; padding: 10px 12px; }
.sl-bid__stat span { display: block; font-size: 11px; color: var(--color-text-subtle); }
.sl-bid__stat b { font-size: 14px; font-weight: 800; color: var(--color-text-strong); }
.sl-bid__rank { display: flex; flex-direction: column; }
.sl-bid__row { display: grid; grid-template-columns: 26px 1fr auto 52px; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; font-size: 13px; border-bottom: 1px solid var(--color-divider); }
.sl-bid__row:last-child { border-bottom: none; }
.sl-bid__row.is-me { background: var(--color-brand-subtle); }
.sl-bid__pos { text-align: center; font-weight: 800; color: var(--color-text-subtle); }
.sl-bid__row.is-won .sl-bid__pos { color: var(--color-success); }
.sl-bid__nm { font-weight: 600; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; min-width: 0; }
.sl-bid__row.is-me .sl-bid__nm { color: var(--color-brand-text); font-weight: 800; }
.sl-bid__seat { font-size: 10px; font-weight: 800; color: var(--color-success); background: var(--color-success-bg); border-radius: 5px; padding: 1px 6px; }
.sl-bid__bid { font-weight: 800; color: var(--color-text-strong); }
.sl-bid__sov { text-align: right; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.sl-bid__mystat { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; border-radius: 9px; padding: 9px 12px; margin: 12px 0 0; background: var(--color-bg-subtle); color: var(--color-text-muted); }
.sl-bid__mystat.is-ok { background: var(--color-success-bg); color: var(--color-success); }
.sl-bid__mystat.is-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.sl-bid__amts { display: flex; gap: 8px; }
.sl-bid__amt { flex: 1; padding: 11px 8px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font-size: 13px; font-weight: 700; color: var(--color-text-strong); cursor: pointer; white-space: nowrap; }
.sl-bid__amt:hover { border-color: var(--color-brand); }
.sl-bid__amt.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sl-bid__land { display: flex; gap: 9px; }
.sl-bid__landopt { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: 11px; padding: 11px 13px; background: var(--color-surface); cursor: pointer; text-align: left; }
.sl-bid__landopt i { font-size: 16px; color: var(--color-text-muted); flex: 0 0 auto; }
.sl-bid__landopt b { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.sl-bid__landopt span { font-size: 11px; color: var(--color-text-subtle); }
.sl-bid__landopt.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-bid__landopt.is-on i, .sl-bid__landopt.is-on b { color: var(--color-brand-text); }
.sl-flat__total { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; background: var(--color-bg-subtle); border-radius: 11px; padding: 13px 16px; }
.sl-flat__total span { font-size: 13px; color: var(--color-text-muted); }
.sl-flat__total b { font-size: 18px; font-weight: 800; color: var(--color-text-strong); }
/* 크레딧 충전 모달 (중앙) */
.sl-modal-scrim { position: fixed; inset: 0; background: var(--color-overlay); z-index: 950; opacity: 0; animation: sl-fade var(--gudoc-duration-2) forwards; }
.sl-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%); z-index: 951; width: 440px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.28)); opacity: 0; animation: sl-modal-in var(--gudoc-duration-2) forwards; }
@keyframes sl-modal-in { to { opacity: 1; transform: translate(-50%, -50%); } }
.sl-modal__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.sl-modal__head .sl-drawer__x { margin-left: auto; }
.sl-modal__body { padding: 20px; overflow-y: auto; }
.sl-modal__foot { padding: 16px 20px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; }
.sl-modal__foot .sl-btn { flex: 1; }
/* 판매자 약관 원문 뷰어(SellerTermsViewer) — 게시 HTML 가독 스타일. */
/* 제출 전 개인정보 마스킹 도구(SellerDocumentMaskModal) — 캔버스를 드래그해 가릴 영역을 칠한다.
   기본 .sl-modal(440px)로는 서류가 읽히지 않아 넓힌다. */
.sl-docmask { width: 640px; }
.sl-docmask__title { font-size: 16px; font-weight: 800; color: var(--color-text-strong); margin: 0 0 3px; }
.sl-docmask__sub { font-size: 12px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.sl-docmask__guide { margin-bottom: 14px; }
.sl-docmask__guide b { font-weight: 800; }
.sl-docmask__guideline { margin: 0 0 5px; }
.sl-docmask__guideline:last-child { margin-bottom: 0; }
.sl-docmask__stage { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-sunken); padding: 10px; display: grid; place-items: center; overflow: auto; max-height: 52vh; }
.sl-docmask__canvas { max-width: 100%; height: auto; cursor: crosshair; touch-action: none; background: #fff; border-radius: 6px; }
.sl-docmask__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sl-docmask__count { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin-right: auto; font-variant-numeric: tabular-nums; }
.sl-docmask__foot .sl-btn { flex: 1; }
@media (max-width: 700px) { .sl-docmask { width: 94vw; } }

.sl-terms-viewer { width: 720px; }
.sl-terms-viewer__picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sl-terms-viewer__content { font-size: 13.5px; line-height: 1.7; color: var(--color-text); max-height: 56vh; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-subtle); }
.sl-terms-viewer__content h1, .sl-terms-viewer__content h2, .sl-terms-viewer__content h3 { margin: 14px 0 6px; font-size: 14.5px; font-weight: 800; color: var(--color-text-strong); }
.sl-terms-viewer__content p, .sl-terms-viewer__content li { margin: 0 0 8px; }
.sl-terms-viewer__content ol, .sl-terms-viewer__content ul { padding-left: 20px; }
/* 개정 약관 재동의 게이트 (전체 차단 모달) — 콘솔 위를 덮는다. 드로어/모달(901/951)보다 위,
   토스트(2000)보다 아래. 닫기 버튼 없음: 탈출 경로는 제출 또는 로그아웃뿐. */
.sl-reconsent { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--color-overlay); opacity: 0; animation: sl-fade var(--gudoc-duration-2) forwards; }
.sl-reconsent__card { width: 460px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.28)); padding: 26px 24px 22px; }
.sl-reconsent__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-brand-subtle); color: var(--color-brand-text); font-size: 20px; margin-bottom: 14px; }
.sl-reconsent__title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--color-text-strong); }
.sl-reconsent__desc { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }
.sl-reconsent__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-reconsent__item { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-subtle); transition: border-color var(--gudoc-duration-1); }
.sl-reconsent__item:hover { border-color: var(--color-border-strong); }
.sl-reconsent__label { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; cursor: pointer; }
.sl-reconsent__check { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--color-brand); cursor: pointer; }
.sl-reconsent__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.sl-reconsent__name { font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
.sl-reconsent__ver { font-size: 11.5px; font-weight: 700; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 6px; padding: 2px 7px; font-family: var(--gudoc-font-mono); }
.sl-reconsent__note { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--color-text-subtle); }
.sl-reconsent__error { margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--color-danger); border-radius: 10px; background: var(--color-danger-bg); color: var(--color-danger); font-size: 12.5px; line-height: 1.5; }
.sl-reconsent__actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 520px) {
  .sl-reconsent { padding: 14px; align-items: flex-end; }
  .sl-reconsent__card { padding: 22px 18px 18px; }
}

.sl-topup__amts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sl-topup__amt { padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font-size: 14px; font-weight: 700; color: var(--color-text-strong); cursor: pointer; transition: border-color var(--gudoc-duration-1), background var(--gudoc-duration-1); }
.sl-topup__amt:hover { border-color: var(--color-brand); }
.sl-topup__amt.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sl-topup__pm { display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; }
.sl-topup__pmic { width: 38px; height: 38px; border-radius: 9px; background: var(--color-bg-subtle); display: grid; place-items: center; font-size: 17px; color: var(--color-text-strong); flex: 0 0 auto; }
.sl-topup__pmb { flex: 1; min-width: 0; }
.sl-topup__pmno { font-size: 14px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; }
.sl-topup__pmdefault { font-size: 10px; font-weight: 800; color: var(--color-success); background: var(--color-success-bg); border-radius: 999px; padding: 1px 7px; }
.sl-topup__pmmeta { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 2px; }
.sl-topup__nocard { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--color-warning); background: var(--color-warning-bg); border-radius: 12px; padding: 13px 15px; }
.sl-topup__nocard i { color: var(--color-warning); margin-top: 2px; }
.sl-topup__nocard b { display: block; font-size: 13.5px; color: var(--color-text-strong); }
.sl-topup__nocard span { font-size: 12px; color: var(--color-text-muted); }
.sl-topup__summary { margin-top: 18px; background: var(--color-bg-subtle); border-radius: 12px; padding: 14px 16px; }
.sl-topup__srow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-text-muted); padding: 3px 0; }
.sl-topup__srow b { font-size: 15px; font-weight: 800; color: var(--color-text-strong); }
.sl-topup__auto { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; border: 1px solid var(--color-border); border-radius: 12px; padding: 13px 15px; cursor: pointer; transition: border-color var(--gudoc-duration-1), background var(--gudoc-duration-1); }
.sl-topup__auto.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-topup__auto input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--color-brand); cursor: pointer; }
.sl-topup__autot { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-topup__autod { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.5; margin-top: 3px; }
.sl-topup__autorow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-text); margin-top: 10px; }
.sl-topup__autosel { border: 1px solid var(--color-border); border-radius: 8px; padding: 5px 8px; font-size: 12px; font-family: inherit; background: var(--color-surface); color: var(--color-text-strong); }
.sl-reco { border: 1px solid var(--color-brand); background: var(--color-brand-subtle); }
.sl-reco__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--color-brand-text); }
.sl-reco__insight { font-size: 13px; color: var(--color-text); margin: 8px 0; font-style: italic; }
.sl-reco__title { font-size: 15px; font-weight: 800; color: var(--color-text-strong); }
.sl-reco__title small { font-weight: 500; font-size: 12px; color: var(--color-text-muted); display: block; margin-top: 2px; }
.sl-reco__sim { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 12px 0; }
.sl-reco__simc { background: var(--color-surface); border-radius: 10px; padding: 9px 10px; text-align: center; }
.sl-reco__simv { font-size: 15px; font-weight: 800; }
.sl-reco__simv.is-ok { color: var(--color-success); }
.sl-reco__siml { font-size: 10.5px; color: var(--color-text-subtle); margin-top: 2px; }
.sl-reco__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.sl-reco__foot b { color: var(--color-text-strong); }
.sl-addons { display: flex; flex-direction: column; gap: 10px; }
.sl-addon { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--color-border); border-radius: 13px; }
.sl-addon__ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.sl-addon__b { flex: 1; min-width: 0; }
.sl-addon__nm { font-size: 14px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; }
.sl-addon__tag { font-size: 10px; font-weight: 800; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 999px; padding: 2px 8px; }
.sl-addon__tag.is-soon { color: var(--color-text-subtle); background: var(--color-bg-subtle); }
.sl-addon__desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.sl-addon__r { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.sl-addon__price { font-size: 14px; font-weight: 800; color: var(--color-text-strong); white-space: nowrap; }
.sl-addon__price small { font-size: 11px; font-weight: 500; color: var(--color-text-subtle); margin-left: 3px; }
.sl-auclive { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; background: var(--color-success-bg, rgba(31,138,91,.1)); }
.sl-auclive__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--color-success); flex: 0 0 auto; }
.sl-auclive__b { flex: 1; min-width: 0; font-size: 12.5px; color: var(--color-text); }
.sl-auclive__b b { color: var(--color-text-strong); }
.sl-auclive__left { font-size: 12px; font-weight: 700; color: var(--color-success); flex: 0 0 auto; }
.sl-auclive--flat { background: var(--color-info-bg, rgba(50,100,168,.1)); }
.sl-auclive--flat .sl-auclive__tag, .sl-auclive--flat .sl-auclive__left { color: var(--color-info, #3264A8); }
/* 다음 사이클 인벤토리 변경 고지 (셀러측 가드레일) */
.sl-invnotice { border: 1px solid var(--color-info, #BBD2F0); background: var(--color-info-bg, #EAF1FB); }
.sl-invnotice__head { display: flex; gap: 12px; align-items: flex-start; }
.sl-invnotice__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--color-info, #3264A8); color: #fff; font-size: 16px; }
.sl-invnotice__t { margin: 0; font-size: 15px; font-weight: 800; color: var(--color-text-strong); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sl-invnotice__when { font-size: 11px; font-weight: 700; color: var(--color-info-text, #2A5FA8); background: var(--color-surface, #fff); border-radius: 999px; padding: 2px 9px; }
.sl-invnotice__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--color-info-text, #2A5FA8); display: flex; align-items: center; gap: 6px; }
.sl-invnotice__list { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 12px; }
.sl-invrow { display: flex; align-items: center; gap: 12px; background: var(--color-surface, #fff); border-radius: 10px; padding: 10px 13px; }
.sl-invrow__kind { flex: 0 0 auto; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 3px 8px; }
.sl-invrow__kind--auc { color: var(--color-brand-text, #B23A12); background: var(--color-brand-subtle, #FFEDE6); }
.sl-invrow__kind--flat { color: var(--color-info-text, #2A5FA8); background: var(--color-info-bg, #EAF1FB); }
.sl-invrow__main { flex: 1 1 auto; min-width: 0; }
.sl-invrow__main b { display: block; font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-invrow__main small { font-size: 11.5px; color: var(--color-text-muted); }
.sl-invrow__delta { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sl-invrow__delta i { font-size: 10px; opacity: .6; }
.sl-invrow__delta--up { color: var(--color-success, #1F8A5B); }
.sl-invrow__delta--down { color: var(--color-warning, #92660C); }
textarea.sl-input { resize: vertical; font-family: inherit; }

/* ---------------------- auth ---------------------- */
.sl-authwrap { display: block; height: 100vh; }
.sl-auth { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; background: var(--color-bg-subtle); }
.sl-auth__form { display: flex; flex-direction: column; justify-content: center; padding: 40px 8vw; max-width: 560px; margin: 0 auto; width: 100%; overflow-y: auto; }
.sl-auth__brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; color: var(--color-text-strong); margin-bottom: 28px; }
.sl-auth__logo { width: 32px; height: 32px; border-radius: 9px; background: var(--color-brand); color: #fff; display: grid; place-items: center; font-size: 17px; }
.sl-auth__for { font-size: 13px; font-weight: 700; color: var(--color-brand-text); background: var(--color-brand-subtle); padding: 2px 9px; border-radius: 999px; }
.sl-auth__tabs { display: flex; gap: 4px; background: var(--color-surface-sunken); padding: 4px; border-radius: 12px; margin-bottom: 24px; max-width: 320px; }
.sl-auth__tabs button { flex: 1; padding: 9px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--color-text-muted); background: transparent; border: none; }
.sl-auth__tabs button.is-on { background: var(--color-surface); color: var(--color-text-strong); box-shadow: var(--shadow-xs); }
.sl-auth__seg { display: flex; gap: 4px; background: var(--color-surface-sunken); padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.sl-auth__seg button { flex: 1; padding: 8px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sl-auth__seg button.is-on { background: var(--color-surface); color: var(--color-brand-text); box-shadow: var(--shadow-xs); }
.sl-auth__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text-strong); margin: 0 0 8px; }
.sl-auth__sub { font-size: 14px; color: var(--color-text-muted); margin: 0 0 24px; line-height: 1.5; }
.sl-auth__fields { display: flex; flex-direction: column; gap: 14px; max-width: 400px; }
.sl-auth__field { display: flex; flex-direction: column; gap: 6px; }
.sl-auth__field span { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.sl-auth__row { display: flex; align-items: center; justify-content: space-between; }
.sl-auth__check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-muted); }
.sl-auth__link { font-size: 12.5px; color: var(--color-brand-text); font-weight: 600; cursor: pointer; }
.sl-auth__switch { font-size: 13px; color: var(--color-text-muted); margin: 22px 0 0; max-width: 400px; text-align: center; }
.sl-auth__switch a { color: var(--color-brand-text); font-weight: 700; cursor: pointer; }
.sl-auth__switch--tight { margin-top: 14px; }
/* 되돌아가기 링크는 주 동작이 아니라 눈에 덜 띄게. */
.sl-auth__switch a.sl-auth__back { color: var(--color-text-muted); }
/* 인증 화면 상태 아이콘(완료·오류·진행). */
.sl-authicon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 16px; }
.sl-authicon--ok { background: var(--color-success-subtle, #e7f6ec); color: var(--color-success); }
.sl-authicon--muted { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.sl-authicon--brand { background: var(--color-brand-subtle); color: var(--color-brand-text); }
/* 인증 폼 안의 알림은 필드 바로 위라 위 여백 없이 붙인다. */
.sl-auth__form .rg-alert { margin: 0 0 14px; }
.sl-auth__hero { background: linear-gradient(150deg, #1B2740 0%, #0F172A 60%, #0B1220 100%); display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; overflow: hidden; }
.sl-auth__hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(255,110,69,0.28), transparent 70%); }
.sl-auth__hero-in { position: relative; max-width: 420px; color: #fff; }
.sl-auth__badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #FF8B66; background: rgba(255,110,69,0.14); padding: 6px 13px; border-radius: 999px; margin-bottom: 22px; }
.sl-auth__hero-in h2 { font-size: 38px; font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; margin: 0 0 16px; }
.sl-auth__hero-in p { font-size: 15px; line-height: 1.65; color: #94A3B8; margin: 0 0 32px; }
.sl-auth__stats { display: flex; gap: 30px; }
.sl-auth__stats strong { display: block; font-size: 23px; font-weight: 800; color: #F8FAFC; }
.sl-auth__stats span { font-size: 12px; color: #64748B; }
@media (max-width: 860px) { .sl-auth { grid-template-columns: 1fr; } .sl-auth__hero { display: none; } }

/* CRM */
.sl-crmcard__desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin: 8px 0 0; }

/* store cover editor */
.sl-cover-edit { height: 130px; border-radius: 13px; position: relative; overflow: hidden; margin-bottom: 10px; cursor: pointer; }
.sl-cover-edit__overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.32); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity var(--gudoc-duration-2); }
.sl-cover-edit:hover .sl-cover-edit__overlay { opacity: 1; }
.sl-cover-edit__overlay i { margin-right: 6px; }
.sl-cover-preset { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sl-cover-preset__l { font-size: 12px; color: var(--color-text-muted); font-weight: 600; margin-right: 2px; }
.sl-swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.sl-swatch.is-on { border-color: var(--color-text-strong); box-shadow: 0 0 0 2px var(--color-surface) inset; }
.sl-rowact-static { margin-left: auto; }

/* loyalty / customer analysis */
.sl-loyhero { text-align: center; padding: 8px 0 18px; border-bottom: 1px solid var(--color-divider); }
.sl-loyhero__heart { font-size: 44px; margin-bottom: 10px; }
.sl-loyhero__name { font-size: 18px; font-weight: 800; color: var(--color-text-strong); }
.sl-loyhero__email { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.sl-loyhero__score { margin: 16px auto 0; max-width: 280px; background: var(--color-surface-sunken); border-radius: 14px; padding: 14px; }
.sl-loyhero__score span { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.sl-loyhero__score strong { font-size: 32px; font-weight: 800; color: var(--color-info); letter-spacing: -0.02em; }
.sl-loyhero__score small { font-size: 16px; color: var(--color-text-subtle); font-weight: 700; }
.sl-loyhero__risk { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.sl-score { margin-bottom: 16px; }
.sl-score__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sl-score__l { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.sl-score__v { font-size: 14px; font-weight: 800; color: var(--color-text-strong); }
.sl-score__v small { font-size: 12px; color: var(--color-text-subtle); font-weight: 600; }
.sl-score__bar { height: 8px; border-radius: 999px; background: var(--color-surface-sunken); overflow: hidden; }
.sl-score__fill { height: 100%; border-radius: 999px; }
.sl-score__d { font-size: 12px; color: var(--color-text-muted); margin-top: 5px; }

/* product preview */
.sl-prev-card { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; max-width: 260px; }
.sl-prev-card__cover { height: 120px; position: relative; }
.sl-prev-card__body { padding: 13px 15px; }
.sl-prev-card__title { font-size: 15px; font-weight: 700; color: var(--color-text-strong); margin: 6px 0 2px; }

/* ---------------------- product register ---------------------- */
.sl-page--narrow { max-width: 1180px; }
.rg-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.rg-form { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.rg-ai { background: linear-gradient(120deg, var(--color-brand-subtle), color-mix(in oklab, var(--color-brand-subtle) 35%, var(--color-surface))); border: 1px solid color-mix(in oklab, var(--color-brand) 22%, transparent); border-radius: 16px; padding: 18px 20px; }
.rg-ai__head { font-size: 15px; font-weight: 700; color: var(--color-brand-text); display: flex; align-items: center; gap: 8px; }
.rg-ai__sub { font-size: 12.5px; color: var(--color-text-muted); margin: 6px 0 12px; }
.rg-ai__row { display: flex; gap: 10px; }
.rg-ai__row .sl-input { flex: 1; }

.rg-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.rg-card__head { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 15px; font-weight: 700; color: #fff; }
.rg-card__head small { font-weight: 500; opacity: 0.85; font-size: 12px; }
/* 헤더 제목은 반드시 이 한 덩어리에 담는다 — 맨 텍스트로 두면 flex 아이템으로 쪼개져 제목이 세로로 흐른다. */
.rg-card__head-t { flex: 0 1 auto; min-width: 0; }
.rg-card__head--primary { background: var(--color-brand); }
.rg-card__head--warn { background: var(--color-warning); color: #1B1300; }
.rg-card__head--gray { background: var(--color-text-subtle); }
.rg-card__head--info { background: var(--color-info); }
.rg-card__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.rg-field { display: flex; flex-direction: column; gap: 6px; }
.rg-field > label { font-size: 13px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rg-field > label b { color: var(--color-danger); }
.rg-field > label small { font-weight: 500; color: var(--color-text-subtle); }
.rg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rg-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rg-help { font-size: 11.5px; color: var(--color-text-subtle); line-height: 1.5; }
.rg-hint { font-size: 13px; color: var(--color-text-muted); background: var(--color-surface-sunken); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 8px; }
.rg-divider { height: 1px; background: var(--color-divider); margin: 4px 0; }
.rg-sub { font-size: 13px; font-weight: 700; color: var(--color-text-strong); padding-bottom: 7px; border-bottom: 1px solid var(--color-divider); }
.rg-sub small { font-weight: 500; color: var(--color-text-subtle); }

.rg-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.rg-badge--warn { background: var(--color-warning-bg); color: var(--color-warning); }
/* 즉시 반영(MINOR) 필드 배지 — 승인 대기 없이 저장되는 항목에만 쓴다. rg-chg--minor 와 같은 성공색. */
.rg-badge--ok { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); }

.rg-inpgroup { display: flex; align-items: stretch; }
.rg-inpgroup .sl-input { border-radius: 10px 0 0 10px; }
.rg-inpgroup > span { display: grid; place-items: center; padding: 0 12px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-left: none; border-radius: 0 10px 10px 0; font-size: 13px; color: var(--color-text-muted); }
.rg-inpgroup > span:first-child { border-left: 1px solid var(--color-border); border-right: none; border-radius: 10px 0 0 10px; }
.rg-inpgroup > span:first-child + .sl-input { border-radius: 0 10px 10px 0; }
.rg-discount { font-size: 12px; font-weight: 700; color: var(--color-success); }

.rg-dtype { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.rg-dtype__b { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); text-align: center; }
.rg-dtype__b i { font-size: 19px; }
.rg-dtype__l { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.rg-dtype__d { font-size: 10.5px; color: var(--color-text-subtle); line-height: 1.35; }
.rg-dtype__b.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.rg-dtype__b.is-on i, .rg-dtype__b.is-on .rg-dtype__l { color: var(--color-brand-text); }
.rg-dtype__b:disabled { opacity: 0.5; cursor: not-allowed; }

/* 상세 설명 섹션(3방식): 버튼 3개 그리드 + 적용/미리보기 */
.rg-dtype--desc { grid-template-columns: repeat(3, 1fr); }
.rg-descbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rg-descbar__type { font-size: 12.5px; font-weight: 700; color: var(--color-success); display: flex; align-items: center; gap: 6px; }
.rg-descbar__acts { display: flex; gap: 8px; }
.rg-descprev { border: 1px solid var(--color-border); border-radius: 12px; background: #fff; color: #111; padding: 16px; max-height: 360px; overflow-y: auto; word-break: break-word; }
.rg-descprev img { max-width: 100%; height: auto; }
.rg-descprev * { max-width: 100%; }
@media (max-width: 560px) { .rg-dtype--desc { grid-template-columns: 1fr; } }

.rg-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--color-text); cursor: pointer; }
.rg-check input { width: 16px; height: 16px; accent-color: var(--color-brand); }
/* ⛔ .rg-alert 를 display:flex 로 되돌리지 말 것 — 세로쓰기(문장 조각남)의 뿌리다.
   flex/grid 컨테이너에서는 자식 텍스트런·<b>·<p> 가 전부 개별 flex 아이템(=칼럼)이 되어
   한 문장이 좁은 세로 칼럼 여러 개로 쪼개진다. 알림 박스는 본문이 산문이라
   "아이콘 + 자유 문장"으로 쓰이는 게 정상이고, 그때마다 조각났다
   (2026-08-15 rg-alert__body / 08-16 rg-summary__note / 08-27 sl-docai·sl-docmask__guide·쿠폰 2곳 — 3회 재발).
   그래서 컨테이너를 블록 흐름(flow-root)으로 두고 아이콘만 띄운다 — .sl-note 와 같은 계열.
   가드: SellerOps 세로쓰기 회귀 테스트(FlexProseFragmentationGuardTests). */
.rg-alert { font-size: 12.5px; border-radius: 10px; padding: 11px 13px; display: flow-root; line-height: 1.5; }
.rg-alert--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.rg-alert--info { background: rgba(91,141,246,0.14); color: var(--color-info); }
/* 선두 아이콘만 띄워 본문이 옆으로 흐르게 한다(행잉 아이콘). 문장 중간의 <i> 는 건드리지 않는다. */
.rg-alert > i:first-child { float: left; margin: 2px 8px 0 0; }
/* 블록 자식(카탈로그 줄·문단)은 그대로 세로로 쌓인다. */
.rg-alert__body { display: block; min-width: 0; }
/* 본문 안의 카탈로그 줄들 — 문단 사이 최소 간격. */
.rg-alert__body > div + div { margin-top: 3px; }
.rg-alert > p { margin: 0 0 7px; }
.rg-alert > p:last-child { margin-bottom: 0; }

.rg-policy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rg-policy__b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--color-border); background: var(--color-surface); text-align: left; }
.rg-policy__l { font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.rg-policy__d { font-size: 11.5px; color: var(--color-text-subtle); }
.rg-policy__b.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.rg-policy__b.is-on .rg-policy__l { color: var(--color-brand-text); }

/* 기본 가격 구조(축①) — 단일가 / 변형 선택 / 등급 (구독옵션-가격모델-설계 v2.0) */
.rg-base { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rg-base__b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--color-border); background: var(--color-surface); text-align: left; cursor: pointer; }
.rg-base__l { font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.rg-base__d { font-size: 11.5px; color: var(--color-text-subtle); }
.rg-base__b.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.rg-base__b.is-on .rg-base__l { color: var(--color-brand-text); }
/* 선택한 기본 구조 안내 배너 */
.rg-polbanner { display: flex; align-items: flex-start; gap: 10px; background: var(--color-brand-subtle); border-radius: 11px; padding: 12px 14px; margin-top: 12px; }
.rg-polbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--color-brand-text); background: var(--color-surface); border-radius: 999px; padding: 4px 11px; white-space: nowrap; flex: none; }
.rg-polnote { font-size: 12.5px; line-height: 1.6; color: var(--color-text); }
/* 단일가(FLAT) 안내 — 정가 그대로 결제 */
.rg-baseinfo { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--color-text); background: rgba(91,141,246,0.10); border-radius: 10px; padding: 11px 13px; margin-top: 16px; }
.rg-baseinfo i { color: var(--color-info); margin-top: 2px; flex: none; }

/* 자동 임시보관 복구 배너 (크래시 복구 안전망) */
.rg-restore { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--color-info-bg); border: 1px solid color-mix(in oklab, var(--color-info) 28%, transparent); color: var(--color-info-text); border-radius: 11px; padding: 11px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.rg-restore > i { color: var(--color-info); }
.rg-restore__msg { flex: 1; min-width: 180px; }

/* 인라인 고객 화면 미리보기(축①+축②) — 셀러가 입력하는 즉시 고객뷰+예시결제 노출 */
.rg-optpv { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface-sunken); padding: 10px; }
.rg-optpv__h { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); padding: 2px 4px 9px; }
.rg-optpv__mode { font-weight: 800; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 999px; padding: 2px 9px; }
.rg-optrow { display: flex; align-items: center; gap: 10px; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 10px; padding: 11px 13px; margin-bottom: 7px; }
.rg-optrow:last-of-type { margin-bottom: 0; }
.rg-optrow.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.rg-optrow__dot { width: 18px; height: 18px; flex: none; border: 2px solid var(--color-border-strong); }
.rg-optrow__dot--radio { border-radius: 50%; }
.rg-optrow__dot--check { border-radius: 5px; }
.rg-optrow.is-on .rg-optrow__dot { border-color: var(--color-brand); background: radial-gradient(circle, var(--color-brand) 0 4px, transparent 5px); }
.rg-optrow.is-on .rg-optrow__dot--check { background: var(--color-brand); }
.rg-optrow__n { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); display: flex; flex-direction: column; gap: 2px; }
.rg-optrow__n small { font-weight: 500; font-size: 11.5px; color: var(--color-text-subtle); }
.rg-optrow__p { font-size: 13.5px; font-weight: 800; color: var(--color-text-strong); white-space: nowrap; }
.rg-optrow__p.is-minus { color: var(--color-success); }
.rg-optpv__seg { font-size: 11px; font-weight: 800; color: var(--color-text-subtle); padding: 8px 4px 5px; letter-spacing: .02em; }
.rg-optpv__base { background: var(--color-surface); border: 1.5px dashed var(--color-border); border-radius: 10px; padding: 11px 13px; margin-bottom: 7px; font-size: 13px; color: var(--color-text); }
.rg-optpv__base b { font-weight: 800; color: var(--color-text-strong); }
.rg-optpv__foot { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-align: right; padding: 8px 4px 2px; }
.rg-optpv__foot b { font-weight: 800; color: var(--color-text-strong); }

.rg-okbox { font-size: 12px; font-weight: 600; color: var(--color-success); background: var(--color-success-bg); border-radius: 9px; padding: 9px 11px; width: 100%; }
.rg-okbox b { font-weight: 800; }

.rg-menuadd { display: flex; gap: 8px; }
.rg-menuadd .sl-input:first-child { flex: 1; }
.rg-tags { display: flex; flex-wrap: wrap; gap: 7px; min-height: 20px; }
.rg-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--color-brand-subtle); color: var(--color-brand-text); font-weight: 600; }
.rg-tag em { font-style: normal; opacity: 0.8; }
.rg-tag button { background: none; border: none; color: inherit; opacity: 0.7; font-size: 11px; }
/* 추가 옵션(축②) 태그 — 변형과 색 구분, 할인(−)은 초록 */
.rg-tag--addon { background: var(--color-warning-bg); color: var(--color-warning); }
.rg-tag--addon em.is-minus { color: var(--color-success); opacity: 1; }
.rg-pv-minus { color: var(--color-success); }
.rg-plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rg-plan { display: grid; grid-template-columns: 1fr 1.3fr auto auto; gap: 6px; align-items: center; }
.rg-x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); }
.rg-x:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; }

.rg-imgguide { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; background: rgba(91,141,246,0.1); border-radius: 12px; padding: 14px; }
.rg-imgguide > div { display: flex; flex-direction: column; gap: 3px; }
.rg-imgguide b { font-size: 12.5px; color: var(--color-text-strong); }
.rg-imgguide span { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.rg-imgtype { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rg-imgtype__b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--color-border); background: var(--color-surface); text-align: left; }
.rg-imgtype__b b { font-size: 13px; color: var(--color-text-strong); }
.rg-imgtype__b span { font-size: 11.5px; color: var(--color-text-subtle); }
.rg-imgtype__b.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.rg-drop { margin-top: 12px; border: 1.5px dashed var(--color-border-strong); border-radius: 12px; padding: 22px; text-align: center; color: var(--color-text-muted); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rg-drop:hover { border-color: var(--color-brand); color: var(--color-brand-text); }
.rg-drop.is-busy { opacity: 0.7; cursor: wait; border-color: var(--color-brand); color: var(--color-brand-text); }
.rg-drop--pano { aspect-ratio: 8/1.4; }
.rg-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rg-thumb { width: 110px; aspect-ratio: 16/9; border-radius: 9px; position: relative; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-sunken); }
.rg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-thumb__rep { position: absolute; top: 5px; left: 5px; font-size: 9px; font-weight: 700; background: rgba(0,0,0,0.55); color: #fff; padding: 2px 6px; border-radius: 5px; }
.rg-thumb__del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rg-thumb__del:hover { background: var(--color-danger); }
.rg-pano { width: 100%; aspect-ratio: 48/9; border-radius: 9px; }
.rg-pano--img { margin-top: 12px; position: relative; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-sunken); }
.rg-pano--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-detail-ok { font-size: 12.5px; font-weight: 600; color: var(--color-success); display: flex; align-items: center; gap: 6px; }

.rg-aside { position: sticky; top: 20px; }
.rg-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px; }
.rg-summary__title { font-size: 14px; font-weight: 700; color: var(--color-text-strong); margin-bottom: 12px; }
.rg-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rg-check-list li { font-size: 13px; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; }
.rg-check-list li i { color: var(--color-text-subtle); }
.rg-check-list li.is-ok { color: var(--color-text); }
.rg-check-list li.is-ok i { color: var(--color-success); }
.rg-summary__actions { margin-top: 16px; }
/* flex 로 두면 인라인 <b>·텍스트 노드가 flex 아이템이 되어 문장이 줄마다 조각난다(2026-08-16 재적출 — rg-alert__body 와 같은 계열) → 블록 흐름 + 아이콘 인라인. */
.rg-summary__note { font-size: 11.5px; color: var(--color-text-subtle); margin: 12px 0 0; line-height: 1.5; display: block; }
.rg-summary__note > i { margin-right: 6px; }
.rg-status-seg { display: flex; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 10px; padding: 3px; }
.rg-status-seg button { flex: 1; padding: 8px 0; border-radius: 8px; border: none; background: transparent; color: var(--color-text-muted); font-size: 12.5px; font-weight: 600; }
.rg-status-seg button.is-on { background: var(--color-surface-raised); color: var(--color-text-strong); box-shadow: var(--shadow-xs); }
.rg-changes { background: var(--color-surface-sunken); border-radius: 12px; padding: 14px; }
.rg-changes__h { font-size: 13px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 6px; }
.rg-changes__h b { color: var(--color-brand-text); }
.rg-changes__none { color: var(--color-text-subtle); font-weight: 500; }
.rg-chg { margin-top: 10px; }
.rg-chg__t { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.rg-chg--approval .rg-chg__t { color: var(--color-warning); }
.rg-chg--minor .rg-chg__t { color: var(--color-success); }
.rg-chgtags { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-chgtag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.rg-chg--approval .rg-chgtag { border-color: color-mix(in oklab, var(--color-warning) 40%, transparent); }
.rg-chg--minor .rg-chgtag { border-color: color-mix(in oklab, var(--color-success) 40%, transparent); }

/* preview */
.rg-preview { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 94vw; z-index: 901; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; transform: translateX(100%); animation: sl-slide var(--gudoc-duration-3) var(--gudoc-ease-emphasis) forwards; }
.rg-preview__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--color-border); font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.rg-preview__scroll { flex: 1; overflow-y: auto; }
.rg-pv-hero { aspect-ratio: 16/9; position: relative; }
.rg-pv-tag { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; background: rgba(0,0,0,0.5); color: #fff; padding: 3px 8px; border-radius: 6px; }
.rg-pv-body { padding: 18px; }
.rg-pv-meta { font-size: 12px; color: var(--color-text-muted); }
.rg-pv-ful { color: var(--color-brand-text); font-weight: 600; }
.rg-pv-title { font-size: 19px; font-weight: 800; color: var(--color-text-strong); margin: 8px 0; }
.rg-pv-price { font-size: 20px; font-weight: 800; color: var(--color-text-strong); margin-bottom: 14px; }
.rg-pv-disc { color: var(--color-danger); }
.rg-pv-price s { font-size: 14px; font-weight: 500; color: var(--color-text-subtle); }
.rg-pv-row { font-size: 13px; color: var(--color-text-muted); padding: 7px 0; border-top: 1px solid var(--color-divider); }
.rg-pv-row b { color: var(--color-text); font-weight: 600; margin-right: 8px; }
.rg-pv-sample { font-size: 12.5px; color: var(--color-brand-text); background: var(--color-brand-subtle); border-radius: 9px; padding: 9px 11px; margin-top: 12px; }
.rg-pv-detail { margin-top: 14px; height: 120px; border-radius: 10px; background: var(--color-surface-sunken); display: grid; place-items: center; color: var(--color-text-subtle); font-size: 12px; }
.rg-pv-detailimg { margin-top: 14px; width: 100%; border-radius: 10px; border: 1px solid var(--color-border); display: block; }
/* 미리보기 구독 옵션 목록 + 주소 */
.rg-pv-opts { margin-top: 10px; border-top: 1px solid var(--color-divider); padding-top: 10px; }
.rg-pv-opts__t { font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.rg-pv-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--color-text-muted); padding: 4px 0; }
.rg-pv-opt b { color: var(--color-text-strong); font-weight: 700; white-space: nowrap; }
.rg-pv-row--addr span { color: var(--color-text-muted); }
.rg-pv-row--addr strong { color: var(--color-text-strong); font-weight: 700; }
.rg-preview__foot { padding: 14px 18px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; }
.rg-preview__foot .sl-btn { flex: 1; }

@media (max-width: 980px) {
  .rg-layout { grid-template-columns: 1fr; }
  .rg-aside { position: static; }
  .rg-dtype { grid-template-columns: repeat(2,1fr); }
  .rg-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rg-grid2 { grid-template-columns: 1fr; }
  .rg-policy { grid-template-columns: 1fr; }
  .rg-base { grid-template-columns: 1fr; }
  .rg-imgguide { grid-template-columns: 1fr; }
  .rg-imgtype { grid-template-columns: 1fr; }
}

/* ---------------------- responsive ---------------------- */
@media (max-width: 1080px) {
  .sl-kpis { grid-template-columns: repeat(2, 1fr); }
  .sl-row2 { grid-template-columns: 1fr; }
  .sl-row3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sl-app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; grid-template-areas: "top" "main"; }
  .sl-rail { display: none; }
  .sl-bottom {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .sl-bottom__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; min-height: 48px; justify-content: center; color: var(--color-text-muted); background: none; border: none; }
  .sl-bottom__item i { font-size: 18px; }
  .sl-bottom__item span { font-size: 10px; font-weight: 600; }
  .sl-bottom__item--on { color: var(--color-brand-text); }
  .sl-main { padding-bottom: 76px; }
  .sl-page { padding: 18px 16px 40px; }
  .sl-top__search { display: none; }
  .sl-table-scroll { overflow-x: auto; }
  .sl-table { min-width: 720px; }
  .sl-head__title { font-size: 21px; }
}

/* =============================================================
   PRESERVED (현재 바인딩 페이지 전용 — 새 프로토타입 디자인엔 없음)
   부가서비스(XAddons)로 크레딧이 이전되기 전까지 XSettlement 크레딧 탭 +
   SellerCreditWallet 이 사용. 디자인 업그레이드 시 보존.
   ============================================================= */
.sl-amt--credit { color: var(--color-success); }
.sl-amt--debit { color: var(--color-text-muted); }
.sl-amtopt { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--gudoc-duration-1), color var(--gudoc-duration-1); }
.sl-amtopt:hover:not(:disabled) { border-color: var(--color-brand); color: var(--color-text-strong); }
.sl-amtopt:disabled { opacity: 0.55; cursor: not-allowed; }
.sl-amtopt--selected { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }

/* =============================================================
   다중터치 어트리뷰션(라운드2) — 내 광고 기여(ROI) 섹션 내부 sub-block.
   엔진 출력 비교(모델 선택 + last-click baseline). 투명성/추정 명시.
   sl-seg / sl-table / sl-pill / sl-note 는 기존 클래스 재사용.
   ============================================================= */
.sl-mtx { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-sunken); }
.sl-mtx__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sl-mtx__seg { flex-wrap: wrap; }
.sl-mtx__cmp { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sl-mtx__cmpcard { flex: 1 1 180px; min-width: 160px; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--color-border); background: var(--color-surface-raised); }
.sl-mtx__cmpcard--base { opacity: 0.92; }
.sl-mtx__cmpcard--sel { border-color: var(--color-brand); box-shadow: var(--shadow-xs); }
.sl-mtx__cmplb { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-subtle); text-transform: uppercase; }
.sl-mtx__cmpval { margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.sl-mtx__cmpval small { font-size: 12px; font-weight: 600; color: var(--color-text-subtle); }
.sl-mtx__cmpsub { margin-top: 2px; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sl-mtx__cmparrow { display: flex; align-items: center; color: var(--color-text-subtle); font-size: 14px; }
.sl-mtx__delta { margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.sl-mtx__delta.is-up { color: var(--color-success); }
.sl-mtx__delta.is-down { color: var(--color-warning); }
.sl-mtx__transparency { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sl-mtx__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-raised); font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.sl-mtx__chip i { color: var(--color-text-subtle); font-size: 11px; }
@media (max-width: 640px) {
    .sl-mtx__cmparrow { transform: rotate(90deg); justify-content: center; width: 100%; }
    .sl-mtx__cmpcard { flex-basis: 100%; }
}

/* ── 상품 설명 템플릿 드로어(운영자 프리셋 이식) — 디자인 seller.css에서 추가 ── */
.rg-accent { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; padding: 0; }
.rg-accent.is-on { box-shadow: 0 0 0 2px var(--color-text-strong); }
.rg-accents { display: flex; gap: 8px; }
.rg-banbar b { font-weight: 800; }
.rg-banbar i { flex: 0 0 auto; }
.rg-banbar { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; border-radius: 10px; padding: 9px 12px; margin-top: 10px; }
.rg-banbar.is-bad i { color: var(--color-danger, #E11D48); }
.rg-banbar.is-bad { background: var(--color-danger-subtle, #FFE4E6); color: #9F1239; }
.rg-banbar.is-ok i { color: var(--color-ok, #1F8A5B); }
.rg-banbar.is-ok { background: var(--color-ok-subtle, #E5F4EC); color: #0F5132; }
.rg-descform { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rg-descgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rg-descmode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); padding: 9px 10px; border-radius: 8px; }
.rg-descmode.is-on { background: var(--color-surface); color: var(--color-brand-text); box-shadow: var(--shadow-sm); }
.rg-descmode:hover { color: var(--color-text); }
.rg-descmodes { display: flex; gap: 6px; background: var(--color-surface-sunken); border-radius: 11px; padding: 4px; }
.rg-descpv { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: var(--color-surface); }
.rg-descpv-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.rg-descpv-wrap { position: sticky; top: 12px; }
.rg-descpv__body { padding: 18px 20px; }
.rg-descpv__hero { padding: 26px 20px; color: #fff; }
.rg-descpv__intro { font-size: 14px; color: var(--color-text); margin: 0 0 14px; line-height: 1.6; }
.rg-descpv__intro.rg-descpv__ph { color: var(--color-text-subtle); }
.rg-descpv__kicker { font-size: 11.5px; font-weight: 600; opacity: .85; }
.rg-descpv__pts li { font-size: 13.5px; color: var(--color-text-strong); display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.rg-descpv__pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rg-descpv__row b { color: var(--color-text-strong); margin-right: 8px; font-weight: 700; }
.rg-descpv__row { font-size: 13px; color: var(--color-text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.rg-descpv__title { font-size: 20px; font-weight: 800; margin: 8px 0 0; line-height: 1.25; text-wrap: pretty; }
/* .rg-drop 은 위(rg-* 섹션)에 이미 있다 — 여기 있던 중복 선언은 제거했다(2026-08-27). */
.rg-richbody > :first-child { margin-top: 0; }
.rg-richbody > :last-child { margin-bottom: 0; }
.rg-richbody a { color: var(--color-brand-text); text-decoration: underline; }
.rg-richbody blockquote { margin: 0 0 12px; padding: 6px 0 6px 13px; border-left: 3px solid var(--color-border-strong, #D8CCC2); color: var(--color-text-muted); }
.rg-richbody h2, .rg-richbody h3 { font-weight: 800; color: var(--color-text-strong); margin: 14px 0 7px; }
.rg-richbody li { margin-bottom: 5px; }
.rg-richbody p { margin: 0 0 10px; }
.rg-richbody ul, .rg-richbody ol { margin: 0 0 10px; padding-left: 19px; }
.rg-richbody { font-size: 13.5px; line-height: 1.65; color: var(--color-text); }
.rg-tplapplied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); margin-bottom: 14px; }
.rg-tplapplied__btns { display: flex; gap: 8px; }
.rg-tplapplied__info { font-size: 13.5px; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
.rg-tplcard { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; padding: 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rg-tplcard.is-on { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.rg-tplcard:hover { border-color: var(--color-border-strong); }
.rg-tplcard__d { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.rg-tplcard__n { font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); }
.rg-tplcard__tag { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.rg-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; margin-bottom: 16px; }
.rg-tplpick > i { font-size: 20px; color: var(--color-brand-text); margin-bottom: 4px; }
.rg-tplpick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; padding: 20px; border: 1px dashed var(--color-border-strong); border-radius: 12px; background: var(--color-surface-sunken); cursor: pointer; }
.rg-tplpick:hover { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.rg-tplpick__d { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.rg-tplpick__t { font-size: 15px; font-weight: 700; color: var(--color-text-strong); }
.rg-tplrender { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; max-width: 520px; }
.tpl-bmini { font-family: inherit; width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; font-size: 10px; }
.tpl-bmini--x:hover { border-color: var(--color-danger, #E11D48); color: var(--color-danger, #E11D48); }
.tpl-bmini:disabled { opacity: .35; cursor: default; }
.tpl-body { background: var(--color-bg, var(--color-surface-sunken)); }
.tpl-brow .rg-field { margin: 0; }
.tpl-brow { border: 1px solid var(--color-divider); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: var(--color-surface); }
.tpl-brow__tools { display: flex; gap: 5px; justify-content: flex-end; margin-bottom: 6px; }
.tpl-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tpl-card.is-on { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.tpl-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tpl-card__d { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }
.tpl-card__foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-subtle); margin-top: 3px; }
.tpl-card__meta { padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; }
.tpl-card__n { font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
.tpl-card__thumb { height: 132px; overflow: hidden; position: relative; background: #fff; border-bottom: 1px solid var(--color-divider); }
.tpl-card__thumbinner { transform: scale(.42); transform-origin: top left; width: 238%; pointer-events: none; padding: 10px; }
.tpl-card__top { display: flex; align-items: center; justify-content: space-between; }
.tpl-colorhex { font-family: var(--gudoc-font-mono, monospace); font-size: 12px; }
.tpl-colorrow input[type="color"] { width: 36px; height: 32px; padding: 2px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; }
.tpl-colorrow label { font-size: 12.5px; color: var(--color-text-muted); }
.tpl-colorrow { display: grid; grid-template-columns: 1fr 36px 86px; gap: 8px; align-items: center; }
.tpl-edit { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }
.tpl-edit__form { display: flex; flex-direction: column; gap: 11px; }
.tpl-edit__preview { position: sticky; top: 8px; }
.tpl-filters { display: grid; grid-template-columns: 150px 130px 1fr; gap: 8px; margin-bottom: 16px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tpl-htmlarea { font-family: var(--gudoc-font-mono, monospace); font-size: 12px; line-height: 1.55; width: 100%; resize: vertical; white-space: pre; }
.tpl-htmlwarn { font-size: 12px; line-height: 1.5; color: var(--color-warning); background: var(--color-warning-bg); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; }
.tpl-imgrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--color-text); }
.tpl-pvhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.tpl-render { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: #fff; }
.tpl-sec { font-size: 12px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--color-divider); margin-top: 6px; }
.tpl-sec:first-child { margin-top: 0; }
.tpl-swap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tpl-swapbtn { font-family: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 8px; padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tpl-swapbtn.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-text); }
.tpl-swapbtn:hover { border-color: var(--color-brand); color: var(--color-brand-text); }
.tpl-tab { display: inline-flex; align-items: center; gap: 7px; padding: 13px 16px; border: none; background: transparent; color: var(--color-text-muted); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tpl-tab--off { opacity: .45; cursor: not-allowed; }
.tpl-tab.is-on { color: var(--color-brand-text); border-bottom-color: var(--color-brand); }
.tpl-tab:hover { color: var(--color-text); }
.tpl-tab__b { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--color-brand-subtle); color: var(--color-brand-text); }
.tpl-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }

/* ── 캠페인 참여 (플랫폼 프로모션 허브) ─────────────────────────────── */
.sl-campsec { margin-bottom: 22px; }
.sl-campsec__h { font-size: 13.5px; font-weight: 800; color: var(--color-text-strong); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.sl-campsec__sub { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 12px; }
.sl-campgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sl-campcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.sl-campcard__title { font-size: 14.5px; font-weight: 800; color: var(--color-text-strong); margin: 0; }
.sl-campcard__desc { font-size: 12.5px; color: var(--color-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-campcard__meta { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.sl-campcard__metarow { display: flex; align-items: center; gap: 7px; }
.sl-campcard__metarow i { width: 14px; text-align: center; color: var(--color-text-subtle); }
.sl-campcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.sl-chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
.sl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--color-surface-sunken); color: var(--color-text-muted); }
.sl-partcard { display: flex; flex-direction: column; gap: 11px; padding: 16px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.sl-partcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sl-partcard__title { font-size: 14px; font-weight: 800; color: var(--color-text-strong); margin: 0; }
.sl-partcard__disc { font-size: 12.5px; color: var(--color-text-muted); margin: 3px 0 0; }
.sl-reapply { display: flex; flex-direction: column; gap: 9px; padding: 13px; border-radius: 12px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.sl-reapply__h { font-size: 12.5px; font-weight: 800; color: var(--color-text-strong); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sl-textarea { width: 100%; min-height: 88px; resize: vertical; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-strong); font: inherit; font-size: 13px; line-height: 1.55; box-sizing: border-box; }
.sl-textarea:focus { outline: none; border-color: var(--color-brand); }
.sl-reappct { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); }
.sl-reappct--warn { color: var(--color-danger); }
.sl-rhist { display: flex; flex-direction: column; gap: 6px; }
.sl-rhist__i { font-size: 11.5px; color: var(--color-text-muted); padding: 8px 11px; border-radius: 10px; background: var(--color-surface-sunken); line-height: 1.5; }
.sl-rhist__n { font-weight: 700; color: var(--color-text-strong); }
.sl-rowend { display: flex; justify-content: flex-end; gap: 8px; }

/* 캠페인 내 참여 — 반응형 카드 그리드(S1) + 요약 카드(클릭 → 상세 드로어 S4) */
.sl-partgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sl-partcard--btn { cursor: pointer; text-align: left; width: 100%; background: var(--color-surface); appearance: none; transition: border-color var(--gudoc-duration-2) ease, box-shadow var(--gudoc-duration-2) ease, transform var(--gudoc-duration-2) ease; }
.sl-partcard--btn:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,0.08)); transform: translateY(-1px); }
.sl-partcard--btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.sl-partcard__summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--color-text-muted); }
.sl-partcard__summary i { margin-right: 3px; }
.sl-partcard__summary--warn { color: var(--color-danger); font-weight: 700; }
.sl-partcard__more { color: var(--color-text-subtle); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 참여 상세 드로어(S4) — 상태 hero · key/value 정보 */
.sl-partdetail__hero { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-partdetail__benefit { font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.sl-partkv { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--color-border); }
.sl-partkv:last-child { border-bottom: none; }
.sl-partkv > span { color: var(--color-text-subtle); flex-shrink: 0; }
.sl-partkv > b { color: var(--color-text-strong); font-weight: 700; text-align: right; word-break: break-word; }

/* 참여 히스토리 접이식(S5) — 거부/재신청 이력 타임라인 */
.sl-hist { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-sunken); overflow: hidden; }
.sl-hist__sum { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 12.5px; font-weight: 700; color: var(--color-text-strong); cursor: pointer; user-select: none; list-style: none; }
.sl-hist__sum::-webkit-details-marker { display: none; }
.sl-hist__sum > span:first-child { flex: 1; display: inline-flex; align-items: center; gap: 7px; }
.sl-hist__sum::after { content: "\25BE"; color: var(--color-text-subtle); font-size: 11px; transition: transform var(--gudoc-duration-2) ease; }
.sl-hist[open] .sl-hist__sum { border-bottom: 1px solid var(--color-border); }
.sl-hist[open] .sl-hist__sum::after { transform: rotate(180deg); }
.sl-hist__body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.sl-hist__i { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 11.5px; line-height: 1.5; }
.sl-hist__n { font-weight: 700; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 6px; }
.sl-hist__ico { font-size: 11px; }
.sl-hist__ico--reapply { color: var(--color-brand, #4F46E5); }
.sl-hist__ico--reject { color: var(--color-danger); }
.sl-hist__d { color: var(--color-text-subtle); text-align: right; white-space: nowrap; }
.sl-hist__t { grid-column: 1 / -1; color: var(--color-text-muted); padding: 7px 10px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); }

/* ---------------------- 상품정보제공고시 에디터 (.dn — SellerDisclosureNoticeEditor · P3) ---------------------- */
.dn { margin-top: 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); display: grid; gap: 12px; }
.dn--haserr { border-color: color-mix(in oklab, var(--color-danger) 45%, var(--color-border)); }
.dn__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dn__title { font-size: 14px; font-weight: 700; color: var(--color-text-strong); display: flex; align-items: center; gap: 7px; }
.dn__title i { color: var(--color-info); }
.dn__req { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--color-danger-bg); color: var(--color-danger); font-weight: 700; }
.dn__sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.5; }
.dn__status { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dn__pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.dn__pill--ok { background: var(--color-success-bg); color: var(--color-success); }
.dn__pill--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.dn__pill--cert { background: var(--color-danger-bg); color: var(--color-danger); font-size: 10.5px; }
.dn__group { display: grid; gap: 5px; }
.dn__label { font-size: 12.5px; font-weight: 600; color: var(--color-text-strong); }
.dn__loading { font-size: 12.5px; color: var(--color-text-muted); }
.dn__notice { margin-top: 0; }
/* 품목군 자격 규칙 안내(설계서 §11) — 안내 톤. 제출을 막지 않는다. */
.dn__evidence-rules { margin-top: 0; }
.dn__evidence-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.dn__evidence-list li { font-size: 12.5px; }
.dn__evidence-type { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,0.06); color: var(--color-text-muted); }
.dn__evidence-type--auto { background: rgba(91,141,246,0.14); color: var(--color-info); }
.dn__evidence-why { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }
/* 본문 이미지 대체 텍스트 패널(P6-c) */
.ia .rg-card__head { display: flex; align-items: center; gap: 8px; }
.ia__req, .ia__opt { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ia__req { background: rgba(224,49,49,0.12); color: #c92a2a; }
.ia__opt { background: rgba(0,0,0,0.06); color: var(--color-text-muted); }
.ia__count { margin-left: auto; font-size: 12px; color: var(--color-text-muted); font-weight: 500; }
.ia__help { margin-bottom: 10px; }
.ia__list { display: grid; gap: 10px; }
.ia__item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.ia__item--missing { border-color: rgba(224,49,49,0.5); }
.ia__thumb img { width: 120px; max-height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
.ia__form { display: grid; gap: 6px; }
.ia__row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ia__saved { padding: 1px 6px; border-radius: 999px; font-size: 11px; background: rgba(46,160,67,0.14); color: #2b8a3e; }
.ia__missing { padding: 1px 6px; border-radius: 999px; font-size: 11px; background: rgba(224,49,49,0.12); color: #c92a2a; }
.ia__ta { width: 100%; resize: vertical; font-size: 13px; }
.ia__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ia__msg { font-size: 12px; }
.ia__ocr summary { cursor: pointer; font-size: 12px; color: var(--color-text-muted); }
.ia__ocr pre { white-space: pre-wrap; font-size: 12px; background: var(--color-surface-2, #f7f7f8); padding: 8px; border-radius: 8px; max-height: 240px; overflow: auto; }
@media (max-width: 720px) { .ia__item { grid-template-columns: 1fr; } .ia__thumb img { width: 100%; max-height: 220px; } }
.dn__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.dn__tool { padding: 7px 12px; font-size: 12.5px; }
.dn__fields { display: grid; gap: 10px; }
.dn__fh { font-size: 12.5px; font-weight: 700; color: var(--color-text-strong); padding: 6px 2px 0; }
.dn__field { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-sunken); display: grid; gap: 8px; }
.dn__field--cert { border-left: 3px solid var(--color-danger); }
.dn__field--err { border-color: color-mix(in oklab, var(--color-danger) 55%, var(--color-border)); }
.dn__flabel { font-size: 13px; color: var(--color-text-strong); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.45; }
.dn__ord { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dn__cond { font-size: 11px; color: var(--color-text-muted); }
.dn__modes button { padding: 5px 10px; font-size: 12px; }
.dn__modes button:disabled { opacity: .45; cursor: not-allowed; }
.dn__input { display: grid; gap: 6px; }
.dn__preset { max-width: 460px; }
.dn__ta { resize: vertical; min-height: 38px; }
.dn__refhint { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; padding: 6px 8px; border-radius: 8px; background: rgba(91,141,246,0.10); }
.dn__refhint i { margin-right: 4px; }
.dn__err { font-size: 12px; color: var(--color-danger); display: flex; gap: 5px; align-items: flex-start; line-height: 1.45; }
.dn__ok { font-size: 12.5px; color: var(--color-success); }
.dn__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dn__preview { width: 100%; border-collapse: collapse; font-size: 13px; }
.dn__preview caption { text-align: left; font-weight: 700; padding: 6px 4px; color: var(--color-text-strong); }
.dn__preview th, .dn__preview td { border: 1px solid var(--color-border); padding: 7px 10px; vertical-align: top; text-align: left; line-height: 1.5; }
.dn__preview th { width: 38%; background: var(--color-surface-sunken); font-weight: 600; color: var(--color-text-strong); }
.dn__preview-h th { background: var(--color-surface-raised); }
.dn__preview-cert td { font-weight: 700; font-size: 14px; } /* 고시 주13 — 인증·허가번호는 판매가격 이상 크기 권장 */

.dn__suggest { border: 1px dashed color-mix(in oklab, var(--color-info) 60%, var(--color-border)); border-radius: 9px; padding: 8px 10px; background: rgba(91,141,246,0.08); display: grid; gap: 6px; }
.dn__suggest-head { font-size: 12px; color: var(--color-text-strong); }
.dn__suggest-head i { color: var(--color-info); margin-right: 4px; }
.dn__suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.dn__suggest-item small { display: block; }
.dn__evidence { font-size: 12px; color: var(--color-success); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dn__evidence-x { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); }

/* ---------------------- 구독 가격 변경 고지 (SellerSubscriptions · pricechange · 구독약관 v2.2 §10) ---------------------- */
.sl-pc-legal { margin-bottom: 16px; }
.sl-pc-legal__list { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.sl-pc-legal__list b { font-weight: 700; }
.sl-pc-retry { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sl-pc-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--color-success-bg); color: var(--color-success); font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.sl-pc-toast i { margin-top: 2px; flex: 0 0 auto; }
.sl-pc-toast p { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--color-text); }
.sl-pc-toast__x { border: none; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.sl-pc-readonly { margin: 0 0 16px; }
.sl-pc-form { margin-bottom: 18px; }
.sl-pc-form__body { display: flex; flex-direction: column; gap: 14px; }
.sl-pc-groups { display: grid; gap: 8px; }
.sl-pc-group { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--color-border); border-radius: 11px; background: var(--color-surface); cursor: pointer; font-size: 13px; color: var(--color-text); }
.sl-pc-group input { margin-top: 3px; accent-color: var(--color-brand); flex: 0 0 auto; }
.sl-pc-group.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.sl-pc-group.is-off { opacity: 0.55; cursor: not-allowed; }
.sl-pc-group__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-pc-group__price { font-weight: 700; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.sl-pc-group__sub { font-size: 12px; color: var(--color-text-muted); }
.sl-pc-group__hint { font-size: 11.5px; color: var(--color-warning); font-weight: 600; }
.sl-pc-delta { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sl-pc-delta--up { color: var(--color-danger); }
.sl-pc-delta--down { color: var(--color-success); }
.sl-pc-counter { font-size: 11.5px; color: var(--color-text-subtle); text-align: right; font-variant-numeric: tabular-nums; }
.sl-pc-counter--over { color: var(--color-danger); font-weight: 700; }
.sl-pc-summary { margin: 0; font-size: 13px; line-height: 1.65; padding: 12px 14px; border-radius: 10px; background: var(--color-surface-sunken); color: var(--color-text); }
.sl-pc-summary b { color: var(--color-text-strong); font-weight: 700; }
.sl-pc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-pc-actions .sl-note { margin: 0; }
.sl-pc-listcard .sl-pc-empty { padding: 40px 20px; }
.sl-pc-list { display: grid; gap: 12px; }
.sl-pc-card { border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 16px; background: var(--color-surface); display: grid; gap: 10px; }
.sl-pc-card--cancelled { opacity: 0.72; }
.sl-pc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sl-pc-card__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--color-text-strong); }
.sl-pc-card__title strong { font-weight: 700; }
.sl-pc-card__type--up { background: var(--color-danger-bg); color: var(--color-danger); }
.sl-pc-card__type--down { background: var(--color-success-bg); color: var(--color-success); }
.sl-pc-card__price { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.sl-pc-card__price i { color: var(--color-text-subtle); font-size: 12px; }
.sl-pc-card__price small { font-size: 12px; font-weight: 700; }
.sl-pc-card__old { color: var(--color-text-muted); text-decoration: line-through; font-weight: 600; }
.sl-pc-card__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 0; }
.sl-pc-card__meta div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-pc-card__meta dt { font-size: 11px; font-weight: 700; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
.sl-pc-card__meta dd { margin: 0; font-size: 13px; color: var(--color-text); }
.sl-pc-card__dday { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--color-brand-text); }
.sl-pc-card__counts { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-pc-chip--ok { background: var(--color-success-bg); color: var(--color-success); }
.sl-pc-chip--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.sl-pc-chip--bad { background: var(--color-danger-bg); color: var(--color-danger); }
.sl-pc-card__reason { margin: 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sl-pc-card__reason i { margin-right: 5px; }
.sl-pc-card__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.sl-pc-card__cancelinput { flex: 1 1 240px; width: auto; padding: 8px 11px; font-size: 12.5px; }
.sl-pc-card__foot .sl-note { margin: 0; }
.sl-pc-card__foot .rg-help { flex: 1 1 240px; }
@media (max-width: 760px) { .sl-pc-card__head { flex-direction: column; align-items: flex-start; } }

/* ══════════════════════════════════════════════════════════════════════════
   안내 카드 / 텍스트 원자 (2026-08-27 이관)
   ──────────────────────────────────────────────────────────────────────────
   블록·엘리먼트로 이름 붙일 수 있는 건 위쪽 BEM 구역에 있다. 여기는 그렇게
   묶이지 않는 것들 — 화면마다 자리는 다른데 "같은 톤"이라 반복되던 색·굵기·
   크기다. 인라인으로 흩어져 있으면 전역 수정이 안 먹으므로 여기로 모았다.
   ⛔ 새 컴포넌트를 여기에 만들지 말 것 — 톤 원자만.
   ══════════════════════════════════════════════════════════════════════════ */
/* 안내 카드 — 화면 상단에 놓는 설명 박스(아이콘 + 문단). 6개 화면이 같은 마크업을 복붙하고 있었다.
   ⚠️ 문단은 반드시 <p class="sl-guide__p"> 한 덩어리로 — 맨 텍스트를 두면 flex 아이템으로 쪼개진다. */
.sl-guide { display: flex; gap: 11px; align-items: flex-start; }
.sl-guide > i { color: var(--color-brand-text); margin-top: 2px; flex: 0 0 auto; }
.sl-guide__p { margin: 0; font-size: 13px; color: var(--color-text); line-height: 1.55; flex: 1 1 auto; min-width: 0; }
.sl-guide__p--muted { color: var(--color-text-muted); }
.sl-card--guide { background: var(--color-brand-subtle); border-color: transparent; }
.sl-card--sunken { background: var(--color-surface-sunken); border-color: transparent; }

/* 가로줄 / 세로쌓기 — 자리마다 이름 붙이기 어려운 순수 배치. gap 은 여백 스케일과
   같은 방침으로 6 / 8 / 12 / 18 네 단계로 정규화했다(원래 6~18px 이 뒤섞여 있었다). */
.sl-row { display: flex; align-items: center; gap: 8px; }
.sl-row--top { align-items: flex-start; }
.sl-row--wrap { flex-wrap: wrap; }
.sl-row--end { justify-content: flex-end; }
.sl-row--between { justify-content: space-between; }
.sl-row--g6 { gap: 6px; }
.sl-row--g12 { gap: 12px; }
.sl-row--g18 { gap: 18px; }
.sl-stack { display: flex; flex-direction: column; gap: 14px; }
.sl-stack--g8 { gap: 8px; }
.sl-stack--g6 { gap: 6px; }
.sl-fixed { flex: 0 0 auto; }
.sl-grid-center { display: grid; place-items: center; }
.sl-nolink { text-decoration: none; }
.sl-flex-14 { flex: 1.4; }
.sl-tt-none { text-transform: none; }
.sl-ta-c { text-align: center; }
.sl-ta-l { text-align: left; }
.sl-ta-r { text-align: right; }

/* 톤 변형 — 같은 컴포넌트의 색만 바꾸던 인라인을 모디파이어로. */
.rg-alert--success { background: var(--color-success-bg); color: var(--color-success); }
.rg-alert--neutral { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.rg-alert--info-strong { background: var(--color-info-bg, #EAF1FB); border: 1px solid var(--color-info, #3264A8); }
.sl-kpi__ico--success { background: var(--color-success-bg); color: var(--color-success); }
.sl-kpi__ico--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.sl-kpi__ico--brand { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.sl-kpi__ico--neutral { background: var(--color-bg-subtle); color: var(--color-text-strong); }
.sl-bid__snipe--neutral { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.sl-card--warn { background: var(--color-warning-subtle, rgba(245,158,11,0.10)); border-color: transparent; }
/* 테두리형 위험 버튼. ⚠️ 채움형 .sl-btn--danger 는 이미 위에 있다 — 이름을 겹치면 그쪽이 죽는다. */
.sl-btn--dangerline { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-surface); }
.sl-btn--dangerghost { color: var(--color-danger); border-color: transparent; }
.sl-btn--ghostline { background: transparent; border: 1px solid var(--color-border); }
.sl-btn--dangerfill { background: var(--color-danger-bg); }
.sl-guide__p--sm { font-size: 12.5px; }

/* 코드 입력칸 — 자간 넓힌 가운데 정렬. */
.sl-input--code { text-align: center; letter-spacing: 2px; font-size: 16px; }
.sl-input--code-md { text-align: center; letter-spacing: 6px; font-size: 16px; }
.sl-input--code-lg { text-align: center; letter-spacing: 8px; font-size: 18px; }
.sl-input--auto { width: auto; }
.sl-input--plain { border: none; padding-left: 0; padding-right: 0; }
.sl-resize-y { resize: vertical; }
.sl-preline { white-space: pre-line; }
.sl-prewrap { white-space: pre-wrap; }

/* 치수 원자 — 자리마다 뜻이 다른 폭 상한. 값은 그대로 옮겼다(폭은 정규화하지 않았다). */
.sl-mw-none { max-width: none; }
.sl-mw-full { max-width: 100%; }
.sl-mw-70 { max-width: 70px; }
.sl-mw-90 { max-width: 90px; }
.sl-mw-200 { max-width: 200px; }
.sl-mw-220 { max-width: 220px; }
.sl-mw-240 { max-width: 240px; }
.sl-mw-280 { max-width: 280px; }
.sl-mw-420 { max-width: 420px; }
.sl-mw-640 { max-width: 640px; }
.sl-mw-680 { max-width: 680px; }
.sl-num { font-variant-numeric: tabular-nums; }
.sl-self-center { align-self: center; }
.sl-d-block { display: block; }
.sl-op-1 { opacity: 1; }
.sl-op-60 { opacity: 0.6; }
.sl-c-brand-solid { color: var(--color-brand); }
/* 템플릿 드로어 — 라벨/입력 2열. */
.tpl-2col { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6px; margin-top: 8px; }


.sl-mb-0 { margin-bottom: 0; }
.sl-g12 { gap: 12px; }
.sl-cols2 { grid-template-columns: repeat(2, 1fr); }
.sl-thumb-38 { width: 38px; height: 38px; }
.sl-top__avatar--md { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; }

/* 드로어 폭 — 위 --w480/520/560 과 같은 계열. */
.sl-drawer--w420 { width: 420px; }
.sl-drawer--w440 { width: 440px; }
.sl-drawer--w460 { width: 460px; }
.sl-drawer--w640 { width: 640px; }
/* 빈 상태 여유 — 카드 밖 전면 배치. */
.sl-soon--roomy { padding: 48px 24px; }
/* 테두리·패딩 없는 평평한 행(구획선만 남기고 싶을 때). */
.sl-plain { border: none; padding: 0; }
.sl-plain--noborder { border: none; }
/* 가라앉힌 소구획 상자. */
.sl-subbox { padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-sunken); }
/* 구분선 위에 얹는 꼬리 영역. */
.sl-foot-sep { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.07)); }

/* 마지막 이관분(2026-08-27) — 단발 컴포넌트와 미세 원자. */
.sl-op-70 { opacity: .7; }
.sl-op-85 { opacity: .85; }
.sl-fs-9 { font-size: 9px; }
.sl-fs-16 { font-size: 16px; }
.sl-fs-18 { font-size: 18px; }
.sl-w-400 { font-weight: 400; }
.sl-ml-xs { margin-left: 6px; }
.sl-mr-xs { margin-right: 6px; }
.sl-mr-auto { margin-right: auto; }
.sl-d-inline { display: inline; }
.sl-underline { text-decoration: underline; }
.sl-mono { font-family: var(--gudoc-font-mono); }
.sl-track-wide { letter-spacing: 0.3em; }
.sl-jc-end { justify-content: flex-end; }
.sl-ai-start { align-items: flex-start; }
.sl-ai-end { align-items: end; }
.sl-lh-155 { line-height: 1.55; }
.sl-lh-17 { line-height: 1.7; }
.sl-w-80 { width: 80px; }
.sl-w-96 { width: 96px; }
/* 세로 패딩 — 6/7/8/10/14 로 흩어져 있던 것을 8/12/16 세 단계로. */
.sl-py-sm { padding: 8px 0; }
.sl-py-md { padding: 12px 0; }
.sl-py-lg { padding: 16px 0; }
.sl-hr { border: 0; border-top: 1px solid var(--color-border, #e5e7eb); }
.sl-img-fluid { width: 100%; height: auto; }
.sl-scroll-300 { max-height: 300px; overflow-y: auto; }
/* 카드 전체를 누르는 버튼 — 버튼 기본 외형을 지우고 내용만 남긴다. */
.sl-btn-plain { border: none; background: none; width: 100%; text-align: left; cursor: pointer; }
.sl-inline-chip { display: inline-flex; align-items: center; gap: 5px; }
.sl-cols-auto220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sl-cols-11 { grid-template-columns: 1.1fr 1fr; align-items: start; }
.sl-grid-span { grid-column: 1 / -1; }
/* 알림함 — 안 읽음 점과 그 자리를 비워 두는 자리표시. */
.sl-notice__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #F4521E); flex: 0 0 auto; }
.sl-notice__gutter { width: 14px; }
/* 쿠폰 커버 미리보기 */
.sl-cover-thumb { max-width: 100%; max-height: 120px; border-radius: 8px; border: 1px solid var(--color-border); object-fit: cover; }
/* 화면 하단 고정 알림(상품 등록 저장 결과) */
.sl-toastfab { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90; box-shadow: var(--shadow-md); }
/* 로그인 화면 안내 상자 */
.sl-authnote { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
/* 운영 공지 본문 */
.sl-notice-headline { font-size: 18px; font-weight: 800; color: var(--color-text-strong); margin: 14px 0 8px; line-height: 1.4; }
.sl-notice-body { font-size: 14px; line-height: 1.7; color: var(--color-text); }
/* 옵션 재고 표(값 단위) */
.sl-selopt-grid { display: grid; grid-template-columns: minmax(90px, auto) 1fr 96px 64px; gap: 6px 10px; align-items: center; font-size: 13px; }
/* 광고 슬롯 행 */
.sl-slotrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border, #E0D5CC); border-radius: 10px; }
.sl-slotfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-subtle, #F0E9E2); }
/* 객체탐색 리스트 줄 */
.sl-exp-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06)); }
.sl-avatar-48 { width: 48px; height: 48px; background: var(--color-surface-sunken); }
.sl-btn--xs { font-size: 12px; padding: 7px 13px; }
.sl-input--select { width: auto; padding: 7px 30px 7px 12px; }
/* 주문 상세 상단 여백만 준 구획 */
.sl-sec-pad-top { padding: 16px 18px 0; }

/* 마무리 이관분(2026-08-27) */
.sl-arrowsep { font-size: 9px; color: var(--color-text-subtle); margin: 0 3px; }
.sl-lh-16 { line-height: 1.6; }
.sl-w-auto { width: auto; }
.sl-minw-240 { min-width: 240px; }
.sl-input--tight { padding: 6px 8px; }
/* 값을 보여만 주는 읽기 전용 칸(입력 모양은 유지). */
.sl-input--readonly { display: flex; align-items: center; gap: 8px; background: var(--color-surface-sunken); color: var(--color-text-subtle); }
/* 정보 톤 카드(정산·크레딧 안내). */
.sl-card--info { background: var(--color-info-bg, #EAF1FB); border-color: var(--color-info, #3264A8); }
/* 도넛 범례 색 견본 */
.sl-legend-dot--brand { background: var(--color-brand); }
/* scrim 안 가운데 정렬 모달 카드 */
.sl-modal-center { position: relative; z-index: 901; width: min(440px, calc(100vw - 32px)); margin: 10vh auto 0; }

/* 색 톤 */
.sl-c-subtle { color: var(--color-text-subtle); }
.sl-c-muted { color: var(--color-text-muted); }
.sl-c-text { color: var(--color-text); }
.sl-c-strong { color: var(--color-text-strong); }
.sl-c-brand { color: var(--color-brand-text); }
.sl-c-success { color: var(--color-success); }
.sl-c-danger { color: var(--color-danger); }
.sl-c-warning { color: var(--color-warning); }
.sl-c-info { color: var(--color-info); }
/* 굵기 */
.sl-w-500 { font-weight: 500; }
.sl-w-600 { font-weight: 600; }
.sl-w-700 { font-weight: 700; }
.sl-w-800 { font-weight: 800; }
/* 크기 — 기존 값을 그대로 옮겼다(글자 크기는 정규화하지 않았다). */
.sl-fs-10 { font-size: 10px; }
.sl-fs-11 { font-size: 11px; }
.sl-fs-115 { font-size: 11.5px; }
.sl-fs-12 { font-size: 12px; }
.sl-fs-125 { font-size: 12.5px; }
.sl-fs-13 { font-size: 13px; }
.sl-fs-135 { font-size: 13.5px; }
.sl-fs-14 { font-size: 14px; }
.sl-fs-15 { font-size: 15px; }
/* 그 밖의 단발 원자 */
.sl-w-full { width: 100%; }
.sl-pointer { cursor: pointer; }
.sl-nowrap { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   여백 스케일 (2026-08-27 · Owner 결정으로 정규화)
   ──────────────────────────────────────────────────────────────────────────
   배경: 같은 역할의 여백이 자리마다 제각각이었다 — .sl-sec__label 위 여백만
   14/16/18/20/24px 5종, .sl-note 는 2/6/8/9/10/12/14/18px 8종. 여러 세션이
   각자 인라인으로 눈대중해 쌓은 편차지 설계된 단계가 아니었다.
   그래서 네 단계로 통일한다: xs 4 · sm 8 · md 14 · lg 18.
   새 여백이 필요하면 이 네 값 중에서 고른다.

   ⚠️ 파일 맨 끝에 두는 이유: 블록 규칙(.sl-note 등)과 특정성이 같아서(0,1,0)
      순서가 승패를 가른다. 이 블록 뒤에 다른 규칙을 붙이지 말 것.
   ⛔ 여기에 색·글자·레이아웃을 추가하지 말 것 — 여백 전용이다.
   ══════════════════════════════════════════════════════════════════════════ */
.sl-m0 { margin: 0; }
.sl-mt-xs { margin-top: 4px; }
.sl-mt-sm { margin-top: 8px; }
.sl-mt-md { margin-top: 14px; }
.sl-mt-lg { margin-top: 18px; }
.sl-mb-xs { margin-bottom: 4px; }
.sl-mb-sm { margin-bottom: 8px; }
.sl-mb-md { margin-bottom: 14px; }
.sl-mb-lg { margin-bottom: 18px; }
.sl-ml-sm { margin-left: 8px; }
.sl-ml-auto { margin-left: auto; }