/* 배달 자동 플랫폼 현황판 — 공용 스타일
 *
 * design/DESIGN.md 의 디자인 토큰을 CSS 변수로 옮긴 것.
 * .dc.html 의 인라인 스타일과 같은 값을 쓰되, 반복되는 것은 클래스로 묶었다.
 */

:root {
  /* 배경·면 */
  --bg: #F6F4F0;
  --card: #FFFFFF;
  --line: #E6E1D8;
  --rule: #F0ECE5;
  --field-line: #D6D0C6;
  --field-bg: #FCFBF9;

  /* 글자 */
  --ink: #1C1917;
  --ink-2: #57534E;
  --ink-3: #736C67;   /* 글자 대비 4.5:1 이상 (배경 #F6F4F0) */

  /* 포인트 */
  --accent: #C2410C;
  --accent-strong: #EA580C;
  --accent-bg: #FFF7ED;
  --accent-ink: #9A3412;

  /* 사이드바 */
  --side: #1C1917;
  --side-active: #3A332E;
  --side-ink: #D6D3D1;
  --side-dim: #A8A29E;

  /* 상태 */
  --ok-bg: #DCFCE7;      --ok-ink: #166534;
  --warn-bg: #FEF3C7;    --warn-ink: #92400E;
  --fail-bg: #FEE2E2;    --fail-ink: #B91C1C;
  --draft-bg: #EFF6FF;   --draft-ink: #1D4ED8;
  --plan-bg: #F0ECE5;    --plan-ink: #57534E;

  /* 모서리 */
  --r-card: 16px;
  --r-btn: 10px;
  --r-badge: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans KR', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { color: #9A3412; }

button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }

.num { font-variant-numeric: tabular-nums; }

.ic {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ic--sm { width: 16px; height: 16px; }

/* 키보드 포커스는 항상 보이게 — 클릭 영역 최소 44px 규칙과 한 쌍 */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 버튼 — 최소 높이 44px (DESIGN.md 규칙)
 * ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--card);
  color: var(--ink);
}

.btn--dark   { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 700; }
.btn--dark:hover { background: #292524; }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 700; }
.btn--accent:hover { background: #9A3412; }

.btn--ghost  { background: var(--card); border-color: var(--field-line); color: var(--ink); }
.btn--ghost:hover { background: #FAF8F5; }

.btn--block  { width: 100%; }
.btn--tall   { min-height: 52px; font-size: 16px; border-radius: 12px; }

/* 글자만 있는 보조 버튼 */
.btn--text {
  align-self: center;
  background: none;
  border: none;
  color: var(--ink-2);
  font-size: 14px;
  min-height: 44px;
  padding: 8px;
  text-decoration: underline;
}
.btn--text:hover { color: var(--ink); }

.btn--inline-accent {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  padding: 0;
}
.btn--inline-accent:hover { color: #9A3412; }

/* ---------------------------------------------------------------------------
 * 폼
 * ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 14px; font-weight: 600; }

.input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-btn);
  padding: 0 14px;
  font-size: 16px;
  background: #FFFFFF;
  color: var(--ink);
}
.input--error { border: 2px solid #B91C1C; }

.form-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #B91C1C;
  font-weight: 600;
  line-height: 1.5;
}

.hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

.notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--warn-bg);
  color: #78350F;
  font-size: 14px;
  line-height: 1.55;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  color: #44403C;
}
.checkbox input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------------------------------------------------------------------------
 * 로그인 화면
 * ------------------------------------------------------------------------- */
.auth {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

.auth__aside {
  width: 480px;
  flex-shrink: 0;
  background: var(--side);
  color: #E7E5E4;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brandmark { display: flex; align-items: center; gap: 12px; }
.brandmark__logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brandmark__name { font-size: 20px; font-weight: 700; color: #FFFFFF; }

.auth__title {
  margin: 48px 0 0;
  font-size: 36px;
  line-height: 1.35;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.auth__points {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 15px;
  color: var(--side-ink);
}
.auth__points li { display: flex; gap: 10px; align-items: center; }
.auth__points .ic { color: #FB923C; }

.auth__note { margin-top: auto; font-size: 13px; color: var(--side-dim); }

.auth__main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.card--auth {
  width: 400px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step { font-size: 13px; font-weight: 700; color: var(--accent); }
.card--auth h2 { margin: -10px 0 0; font-size: 24px; font-weight: 700; }

.lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lede b { color: var(--ink); }

.code-input {
  width: 100%;
  height: 60px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
  background: #FFFFFF;
  color: var(--ink);
}
.code-input.input--error { border-color: #B91C1C; }

.auth__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
 * 로그인 이후 임시 화면 (다음 단계에서 대시보드로 교체)
 * ------------------------------------------------------------------------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: var(--side);
  color: #FFFFFF;
}
.shell__bar .brandmark__logo { width: 38px; height: 38px; border-radius: 10px; }
.shell__bar-name { font-size: 16px; font-weight: 700; }
.shell__bar form { margin-left: auto; }
.shell__body { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 32px; }

.empty {
  width: 520px; max-width: 100%;
  background: var(--card);
  border: 1px dashed var(--field-line);
  border-radius: var(--r-card);
  padding: 40px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.empty h1 { margin: 0; font-size: 20px; font-weight: 700; }
.empty p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

[hidden] { display: none !important; }
.grow { flex-grow: 1; }

/* ---------------------------------------------------------------------------
 * 로그인 이후 공용 틀 — 사이드바 + 본문 (Main.dc.html 의 nav)
 * ------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; background: var(--bg); }

.side {
  width: 248px; flex-shrink: 0;
  background: var(--side); color: #E7E5E4;
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side__brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.side__logo {
  width: 38px; height: 38px; border-radius: 10px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.side__name { font-size: 16px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em; }
.side__brand-pick {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 14px; border-radius: 10px;
  background: #292524; border: 1px solid #3F3934; color: #FFFFFF;
  font-size: 14px; font-weight: 600;
}
.side__menu { display: flex; flex-direction: column; gap: 4px; }
.side__link {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 14px; border-radius: 10px;
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--side-ink);
}
.side__link:hover { color: #FFFFFF; background: #292524; }
.side__link.is-active { color: #FFFFFF; background: var(--side-active); font-weight: 600; }
.side__link .side__label { flex-grow: 1; }
.side__count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--accent); color: #FFFFFF; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.side__dot { width: 8px; height: 8px; border-radius: 4px; background: #FBBF24; }
.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.side__pc {
  display: flex; flex-direction: column; gap: 8px;
  background: #292524; border-radius: 12px; padding: 14px; text-decoration: none;
}
.side__pc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--side-ink); }
.side__pc-state { display: flex; align-items: center; gap: 8px; }
.side__pc-text { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.side__pc-sig { font-size: 12px; color: var(--side-dim); margin-left: auto; }
.side__user {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px; font-size: 13px; color: var(--side-dim);
}
.side__logout {
  background: none; border: none; color: var(--side-ink);
  font-size: 13px; padding: 8px 0; min-height: 44px;
}
.side__logout:hover { color: #FFFFFF; }

.dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; display: inline-block; }
.dot--live { background: #4ADE80; }
.dot--ok { background: #16A34A; }
.dot--wait { background: #F59E0B; }

.page {
  flex-grow: 1; min-width: 0;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page__intro { display: flex; flex-direction: column; gap: 6px; }
.page__date { font-size: 14px; color: var(--ink-2); }
.page__title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.page__title--tight { margin-top: 4px; }
.page__lede { margin: 0; font-size: 15px; color: var(--ink-2); }
.page__tools { display: flex; align-items: center; gap: 12px; }

.btn--sm { font-size: 14px; padding: 0 16px; }
.btn--48 { min-height: 48px; }
.btn--cta { font-size: 16px; padding: 0 22px; }
.btn--danger-text { color: var(--fail-ink); }

/* 매장 선택 세그먼트 */
.seg { display: flex; gap: 2px; background: #EAE5DD; border-radius: 12px; padding: 4px; }
.seg__btn {
  height: 36px; padding: 0 16px; border-radius: 9px; border: none;
  font-size: 14px; background: transparent; color: var(--ink-2); font-weight: 500;
}
.seg__btn.is-on { background: #FFFFFF; color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(28,25,23,0.12); }

/* ---------------------------------------------------------------------------
 * 카드 공용
 * ------------------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px 24px; display: flex; flex-direction: column; min-width: 0;
}
.card--list { gap: 4px; }
.card--gap12 { gap: 12px; }
.card--gap14 { gap: 14px; }
.card--gap16 { gap: 16px; }
.card__head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.card__head--flat { padding-bottom: 0; }
.card__title { margin: 0; font-size: 18px; font-weight: 700; }
.card__aside { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.card__sub { font-size: 13px; color: var(--ink-3); }
.card__link { margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: none; }
.card__hint { font-size: 13px; color: var(--ink-2); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.kpi__label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.kpi__num { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.kpi__num small { font-size: 18px; font-weight: 600; }
.kpi__num small.kpi__of { font-size: 20px; font-weight: 500; color: var(--ink-3); }
.kpi__note { font-size: 13px; color: var(--ink-3); }
.kpi--hot { background: var(--accent-bg); border-color: #FDBA74; color: var(--accent-ink); }
.kpi--hot .kpi__label, .kpi--hot .kpi__note { color: var(--accent-ink); }
.kpi--hot:hover { border-color: var(--accent-strong); color: var(--accent-ink); }

.pill-count {
  height: 24px; min-width: 24px; padding: 0 8px; border-radius: 12px;
  background: var(--accent); color: #FFFFFF; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 승인이 필요한 일 */
.todo { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.todo__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.todo__where { font-size: 13px; color: var(--ink-2); }
.todo__title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo__meta { font-size: 13px; color: var(--ink-3); }
.todo.is-done { opacity: .55; }
.todo .btn[disabled] { cursor: default; background: var(--ok-ink); border-color: var(--ok-ink); }

.kind {
  flex-shrink: 0; width: 48px; height: 28px; border-radius: 8px;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.kind--review { background: var(--draft-bg); color: var(--draft-ink); }
.kind--sns { background: #F3E8FF; color: #6B21A8; }
.kind--sm { width: auto; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11px; display: inline-flex; }

/* 연결 매트릭스 (대시보드) */
.matrix { display: grid; grid-template-columns: 52px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; }
.matrix__col { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
.matrix__row { font-size: 14px; font-weight: 700; }
.cell {
  height: 34px; border-radius: 8px; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.cell--ok { background: var(--ok-bg); color: var(--ok-ink); }
.cell--auth { background: var(--warn-bg); color: var(--warn-ink); outline: 2px solid #F59E0B; outline-offset: -2px; }
.cell--na { background: #F5F5F4; color: #A8A29E; font-weight: 500; }

.alert-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--warn-bg); color: #78350F; text-decoration: none; font-size: 14px;
}
.alert-link:hover { color: #78350F; background: #FDE68A; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.status-line--dim { color: var(--ink-3); }

/* SNS 슬롯 (대시보드) */
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.slot {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: 12px; text-decoration: none; min-height: 150px;
  background: #FFFFFF; border: 1px solid var(--line);
}
.slot--wait { background: var(--accent-bg); border: 2px solid var(--accent-strong); }
.slot--plan { background: #FAF8F5; border: 1px dashed var(--field-line); }
.slot__time { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.slot__desc { font-size: 13px; color: var(--ink-2); line-height: 1.45; }

.badge {
  align-self: flex-start; height: 24px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.badge--done { background: var(--ok-bg); color: var(--ok-ink); }
.badge--wait { background: var(--accent); color: #FFFFFF; }
.badge--gen { background: var(--draft-bg); color: var(--draft-ink); }
.badge--plan { background: var(--plan-bg); color: var(--plan-ink); }
.badge--pending { background: #FFEDD5; color: var(--accent-ink); }
.badge--fail { background: var(--fail-bg); color: var(--fail-ink); }

/* 에이전트 지시 */
.textarea {
  width: 100%; resize: none; border: 1px solid var(--field-line); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--field-bg);
}
.row-end { display: flex; justify-content: flex-end; }
.log__head { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 4px; }
.log { display: flex; flex-direction: column; gap: 12px; }
.log__row { display: flex; gap: 12px; font-size: 13px; line-height: 1.45; }
.log__time { color: var(--ink-3); width: 40px; flex-shrink: 0; }
.log__text b { font-weight: 600; }

/* ---------------------------------------------------------------------------
 * 배달앱 연결
 * ------------------------------------------------------------------------- */
.grid-connect { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.card--table { padding: 8px 24px 16px; }
.ctable__row {
  display: grid; grid-template-columns: 72px repeat(4, minmax(0, 1fr)); gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: stretch;
}
.ctable__row--head { padding: 14px 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ctable__store { font-size: 17px; font-weight: 700; padding-top: 8px; }
.cbox { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; min-width: 0; }
.cbox--ok { background: #FFFFFF; border: 1px solid var(--line); }
.cbox--auth { background: #FFFBEB; border: 2px solid #F59E0B; }
.cbox--none { background: #FFFFFF; border: 1px dashed var(--field-line); }
.cbox--na { background: #FAF8F5; border: 1px solid var(--rule); }
.cbox__sub { font-size: 12px; color: var(--ink-3); min-height: 18px; }
.cbadge {
  align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 7px;
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center;
}
.cbadge--ok { background: var(--ok-bg); color: var(--ok-ink); }
.cbadge--auth { background: var(--warn-bg); color: var(--warn-ink); }
.cbadge--none { background: #F5F5F4; color: var(--ink-2); }
.cbadge--na { background: transparent; color: #A8A29E; padding: 0; }
.cbtn { margin-top: 4px; min-height: 44px; border-radius: 9px; font-size: 14px; font-weight: 600; }
.cbtn--ok { background: #FFFFFF; border: 1px solid var(--field-line); color: var(--ink); }
.cbtn--ok:hover { background: #FAF8F5; }
.cbtn--auth { background: var(--accent); border: none; color: #FFFFFF; }
.cbtn--auth:hover { background: #9A3412; }
.cbtn--none { background: var(--ink); border: none; color: #FFFFFF; }
.ctable__note {
  display: flex; align-items: flex-start; gap: 10px; padding-top: 16px;
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
}
.ctable__note .ic { margin-top: 1px; }

.pcbox {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  background: #F0FDF4; border: 1px solid #BBF7D0;
}
.pcbox__icon {
  width: 44px; height: 44px; border-radius: 10px; background: #FFFFFF; color: var(--ok-ink);
  display: flex; align-items: center; justify-content: center;
}
.pcbox__icon .ic { width: 22px; height: 22px; }
.pcbox__text { display: flex; flex-direction: column; gap: 2px; }
.pcbox__text b { font-size: 15px; }
.pcbox__text span { font-size: 13px; color: var(--ok-ink); font-weight: 600; }
.pcdl { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.pcdl dt { color: var(--ink-2); }
.pcdl dd { margin: 0; }
.pcdl__ok { color: var(--ok-ink); font-weight: 600; }
.pc__new { margin-top: 8px; font-size: 14px; }

/* 연결 모달 */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(28, 25, 23, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal__box {
  width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #FFFFFF; border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 24px 48px rgba(28, 25, 23, 0.25);
}
.modal__head { display: flex; align-items: center; gap: 12px; }
.modal__title { margin: 0; font-size: 20px; font-weight: 700; }
.modal__close {
  margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: none;
  background: #F5F5F4; color: #44403C; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.modal__pane { display: flex; flex-direction: column; gap: 14px; }
.modal__pane--code { gap: 16px; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px; }
.steps__item { flex: 1 1 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.steps__dot {
  width: 24px; height: 24px; border-radius: 12px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--plan-bg); color: var(--ink-2);
}
.steps__item.is-active { font-weight: 700; color: var(--ink); }
.steps__item.is-active .steps__dot { background: var(--accent); color: #FFFFFF; }
.steps__item.is-past .steps__dot { background: var(--ok-bg); color: var(--ok-ink); }
.input--48 { height: 48px; }
.input--soft { font-size: 15px; background: var(--field-bg); }
.infobox {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--draft-bg); color: #1E3A8A; font-size: 14px; line-height: 1.5;
}
.otp { display: flex; gap: 8px; justify-content: space-between; }
.otp__cell {
  width: 60px; min-width: 0; flex: 0 1 60px; height: 64px; text-align: center;
  font-size: 26px; font-weight: 700; border: 1px solid var(--field-line); border-radius: 12px;
  color: var(--ink); background: #FFFFFF;
}
.otp__cell:not(:placeholder-shown) { border: 2px solid var(--ink); }
.otp__cell:focus { outline: none; border: 2px solid var(--accent-strong); background: var(--accent-bg); }
.otp__meta { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-2); }
.otp__left { color: var(--fail-ink); }

/* ---------------------------------------------------------------------------
 * 리뷰 답글 · SNS 발행 — 좌측 목록 + 우측 상세
 * ------------------------------------------------------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  background: #FFFFFF; color: #44403C; border: 1px solid var(--field-line);
}
.tab:hover { color: var(--ink); }
.tab.is-on { background: var(--ink); color: #FFFFFF; border-color: var(--ink); font-weight: 700; }
.tab__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--plan-bg); color: var(--ink-2);
}
.tab.is-on .tab__count { background: var(--accent); color: #FFFFFF; }

.split { flex-grow: 1; min-height: 0; display: flex; gap: 16px; align-items: flex-start; }
.split__list { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.split__list--320 { width: 320px; }
.split__caption { font-size: 14px; font-weight: 700; color: var(--ink-2); }

.ritem {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 16px 18px; border-radius: 14px;
  text-decoration: none; color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--line);
}
.ritem:hover { color: var(--ink); border-color: var(--field-line); }
.ritem.is-on { background: var(--accent-bg); border: 2px solid var(--accent-strong); }
.ritem__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ritem__meta b { font-weight: 700; color: var(--ink); }
.ritem__time { margin-left: auto; color: var(--ink-3); }
.ritem__text { font-size: 15px; line-height: 1.5; }
.stars { font-size: 15px; letter-spacing: 1px; color: #C2610A; }   /* 그림 글자 대비 3:1 이상 */
.stars--lg { font-size: 18px; }
.stars__empty { color: #958E87; }
.empty-box {
  padding: 40px 20px; border-radius: 14px; background: #FFFFFF; border: 1px dashed var(--field-line);
  text-align: center; font-size: 15px; color: var(--ink-2);
}

.detail {
  flex-grow: 1; min-width: 0; align-self: stretch;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px; display: flex; flex-direction: column; gap: 20px;
}
.detail--row { flex-direction: row; gap: 28px; }
.detail__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--plan-bg); font-size: 14px; font-weight: 600; display: flex; align-items: center; }
.tag--strong { font-weight: 700; }
.detail__when { margin-left: auto; font-size: 14px; color: var(--ink-3); }
.detail__quote { margin: 0; font-size: 20px; line-height: 1.6; font-weight: 500; }
.banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.banner--warn { background: var(--warn-bg); color: #78350F; }
.banner--ok { background: var(--ok-bg); color: #14532D; }

.draft { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.draft__head { display: flex; align-items: center; gap: 8px; }
.draft__label { font-size: 15px; font-weight: 700; }
.draft__tone { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.draft__area {
  flex-grow: 1; min-height: 220px; width: 100%; resize: vertical;
  border: 1px solid var(--field-line); border-radius: 12px; padding: 16px 18px;
  font-size: 16px; line-height: 1.7; color: var(--ink); background: var(--field-bg);
}
.draft__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 20px; }
.actions--bottom { margin-top: auto; }
.actions__main { margin-left: auto; }

/* SNS 목록 */
.sitem {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 14px;
  text-decoration: none; color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--line);
}
.sitem:hover { color: var(--ink); border-color: var(--field-line); }
.sitem.is-on { background: var(--accent-bg); border: 2px solid var(--accent-strong); }
.sitem__time { font-size: 22px; font-weight: 700; width: 64px; flex-shrink: 0; }
.sitem__body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.sitem__desc { font-size: 14px; color: #44403C; }

.chips { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.chip {
  height: 32px; padding: 0 12px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}

.post {
  width: 360px; flex-shrink: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; align-self: flex-start;
}
.post__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post__avatar {
  width: 32px; height: 32px; border-radius: 16px; background: var(--accent); color: #FFFFFF;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.post__name { font-size: 14px; font-weight: 700; }
.post__photo {
  height: 360px; background: #E9E3DA; color: var(--ink-2); font-size: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.post__photo svg { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.post__caption { padding: 14px; font-size: 14px; line-height: 1.6; white-space: pre-line; }

.detail__side { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.detail__heading { display: flex; align-items: center; gap: 10px; }
.detail__h2 { margin: 0; font-size: 20px; font-weight: 700; }
.block { display: flex; flex-direction: column; gap: 10px; }
.block__label { font-size: 15px; font-weight: 700; }
.field > label.block__label { font-size: 15px; font-weight: 700; }
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.choice {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px;
  font-size: 15px; font-weight: 600; background: #FFFFFF; border: 1px solid var(--field-line); color: var(--ink-2);
}
.choice.is-on { background: var(--accent-bg); border-color: var(--accent-strong); color: var(--ink); }
.choice__box {
  width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border: 1.5px solid #A8A29E;
}
.choice__box svg { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.choice.is-on .choice__box { background: var(--accent); border: none; }
.choice.is-on .choice__box svg { visibility: visible; }

.meeting {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px;
  background: #FAF8F5; border: 1px solid #EFEAE2;
}
.meeting__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.meeting__row { display: flex; gap: 12px; font-size: 14px; line-height: 1.55; }
.meeting__who { width: 64px; flex-shrink: 0; font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------------------------
 * 모바일 승인 (Mobile.dc.html)
 * ------------------------------------------------------------------------- */
.m { min-height: 100vh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); }
.m .ic { width: 20px; height: 20px; }
.m__head { padding: 20px 16px 12px; display: flex; align-items: center; gap: 10px; }
.m__logo {
  width: 32px; height: 32px; border-radius: 9px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.m__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.m__left { color: var(--accent); }
.m__pc { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.m__list { flex-grow: 1; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.mcard {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid var(--line);
}
.mcard.is-done { background: #F0FDF4; border-color: #BBF7D0; }
.mcard__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.mcard__meta b { color: var(--ink); }
.mcard__time { margin-left: auto; }
.mcard__text { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
.mcard__draft {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px;
  background: #FAF8F5; border: 1px solid #EFEAE2;
}
.mcard__draft-label { font-size: 12px; font-weight: 700; color: var(--draft-ink); }
.mcard__draft-text { font-size: 14px; line-height: 1.6; }
.mcard__btns { display: flex; gap: 8px; }
.mbtn {
  height: 48px; border-radius: 10px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.mbtn--ghost { flex: 1 1 0; background: #FFFFFF; border: 1px solid var(--field-line); color: var(--ink); }
.mbtn--ghost:hover { color: var(--ink); }
.mbtn--accent { flex: 2 1 0; background: var(--accent); border: none; color: #FFFFFF; font-weight: 700; }
.mcard__done { display: flex; align-items: center; gap: 8px; height: 44px; font-size: 14px; font-weight: 600; color: var(--ok-ink); }
.m__tabs {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #FFFFFF; border-top: 1px solid var(--line);
  padding: 6px 8px calc(20px + env(safe-area-inset-bottom, 0px));
}
.m__tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; font-size: 11px; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.m__tab.is-on { font-weight: 700; color: var(--accent); }

/* ---------------------------------------------------------------------------
 * 반응형 — 1024px 이하에서 좁아지고, 900px 이하에서는 좌측 패널을 머리말로 접는다
 * ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .split { flex-direction: column; align-items: stretch; }
  .split__list, .split__list--320 { width: 100%; }
  .detail--row { flex-direction: column; }
  .post { width: 100%; max-width: 360px; }
}

/* 1024px 이하 — 사이드바를 아이콘만 남기고 접는다 (DESIGN.md) */
@media (max-width: 1024px) {
  .side { width: 72px; padding: 24px 12px; align-items: center; }
  .side__name, .side__label, .side__brand-pick, .side__pc-sig, .side__pc-text { display: none; }
  .side__brand { padding: 0; }
  .side__link { width: 48px; padding: 0; justify-content: center; position: relative; }
  .side__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
  .side__dot { position: absolute; top: 8px; right: 8px; }
  .side__pc { padding: 12px; align-items: center; }
  .side__user { padding: 0; }
  .side__logout { font-size: 12px; }
  .page { padding: 24px 20px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-connect { grid-template-columns: minmax(0, 1fr); }
  .page__head { flex-wrap: wrap; align-items: flex-start; }
}

@media (max-width: 720px) {
  .side { display: none; }
  .page { padding: 20px 16px; }
  .page__tools { flex-wrap: wrap; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .todo { flex-wrap: wrap; }
  .todo__body { flex-basis: calc(100% - 64px); }
  .card--table { overflow-x: auto; }
  .ctable__row { min-width: 560px; }
  .actions__main { margin-left: 0; width: 100%; }
}

@media (max-width: 1100px) {
  .auth__aside { width: 380px; padding: 40px; }
  .auth__title { font-size: 30px; margin-top: 32px; }
}

@media (max-width: 900px) {
  .auth { flex-direction: column; min-height: 100vh; }
  .auth__aside {
    width: 100%;
    padding: 20px 20px 24px;
    gap: 14px;
  }
  .auth__title { font-size: 22px; margin: 4px 0 0; }
  .auth__points, .auth__note { display: none; }
  .auth__main { padding: 20px; align-items: flex-start; }
  .card--auth { padding: 24px; border-radius: 16px; }
}

/* ===========================================================================
 * SaaS 구조 이후 추가 — 관리자·설정·통계 화면과 실데이터 상태들 (같은 토큰 사용)
 * ========================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-3); }
.logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.modal-open { overflow: hidden; }

/* 알림 줄 */
.flash { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.flash--ok { background: var(--ok-bg); color: #14532D; }
.flash--err { background: var(--fail-bg); color: var(--fail-ink); }
.notice--ok { background: var(--ok-bg); color: #14532D; }
.empty-line { margin: 0; padding: 16px 0; font-size: 14px; color: var(--ink-2); }

/* 사이드바 — 고객 선택·구분선 */
.side__tenant { margin: 0; }
.side__tenant select.side__brand-pick { width: 100%; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.side__tenant option { color: var(--ink); background: #FFFFFF; }
.side__brand-pick--static { cursor: default; }
.side__sep { height: 1px; background: #3F3934; margin: 8px 6px; }

.dot--off { background: #A8A29E; }

/* 세그먼트 버튼을 링크로도 쓴다 */
a.seg__btn { display: inline-flex; align-items: center; text-decoration: none; }
a.seg__btn:hover { color: var(--ink); }
.seg__btn--off { display: inline-flex; align-items: center; color: #A8A29E; cursor: not-allowed; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 상태 배지 · 칸 — 추가 상태 */
.badge--approved { background: var(--ok-bg); color: var(--ok-ink); }
.badge--skipped { background: var(--plan-bg); color: var(--plan-ink); }
.badge--failed { background: var(--fail-bg); color: var(--fail-ink); }
.slot--approved { border-color: #86EFAC; }
.slot--failed { border-color: #FCA5A5; }
.cell--fail { background: var(--fail-bg); color: var(--fail-ink); }
.cell--pending { background: var(--draft-bg); color: var(--draft-ink); }
.cell--none { background: #FFFFFF; color: var(--ink-2); outline: 1px dashed var(--field-line); outline-offset: -1px; }
.cbox--fail { background: #FFF5F5; border: 2px solid #FCA5A5; }
.cbox--pending { background: #F8FAFF; border: 1px solid #BFDBFE; }
.cbadge--fail { background: var(--fail-bg); color: var(--fail-ink); }
.cbadge--pending { background: var(--draft-bg); color: var(--draft-ink); }
.cbtn--fail { background: var(--ink); border: none; color: #FFFFFF; }
.cbtn--pending { background: #FFFFFF; border: 1px solid var(--field-line); color: var(--ink); }
.cbtn--none:hover, .cbtn--fail:hover { background: #292524; }
.ctable { display: flex; flex-direction: column; }

.banner--info { background: var(--draft-bg); color: #1E3A8A; }
.banner--fail { background: var(--fail-bg); color: var(--fail-ink); }

.chips--left { justify-content: flex-start; margin: 0; }
.chip--positive { background: var(--ok-bg); border-color: #BBF7D0; color: var(--ok-ink); }
.chip--neutral { background: var(--plan-bg); color: var(--plan-ink); }
.chip--negative { background: var(--fail-bg); border-color: #FECACA; color: var(--fail-ink); }

.pcbox--warn { background: #FFFBEB; border-color: #FDE68A; }
.pcbox--warn .pcbox__text span, .pcbox--warn .pcbox__icon { color: var(--warn-ink); }

/* 연결 모달 추가 */
.modal__foot { display: flex; justify-content: space-between; gap: 12px; }
.btn--inline-danger { background: none; border: none; color: var(--fail-ink); font-size: 14px; font-weight: 600; min-height: 44px; padding: 0; }
.btn--inline-danger:hover { text-decoration: underline; }
.shared { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin: 0; }
.shared legend { font-size: 14px; font-weight: 600; padding: 0 4px; }
.shared__list { display: flex; flex-wrap: wrap; gap: 0 16px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #BFDBFE; border-top-color: var(--draft-ink);
  animation: spin 0.9s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* 지시창 */
.row-end { align-items: center; gap: 12px; }
.send-state { font-size: 13px; color: var(--ink-2); }
.log__time--wide { width: 72px; }

/* 폼 카드 (설정·관리자) */
.form-card { gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field--end { justify-content: flex-end; }
.hint-inline { font-weight: 400; color: var(--ink-3); font-size: 13px; }
fieldset.field { border: none; padding: 0; margin: 0; }
fieldset.field > legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.radio-row, .radio-col { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.radio-col { flex-direction: column; }
.radio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.radio input { width: 20px; height: 20px; accent-color: var(--accent); }
.times, .inline, .weights { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }
.weight { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.input--sm { height: 44px; width: auto; min-width: 96px; font-size: 15px; padding: 0 10px; }
.input--file { height: auto; padding: 10px; }
.input:disabled, .textarea:disabled, select:disabled { background: #F5F5F4; color: #A8A29E; cursor: not-allowed; }
.textarea--mono { font-variant-numeric: tabular-nums; }
.choice.is-off { opacity: 0.55; cursor: not-allowed; }
.choice { cursor: pointer; }
.lock { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--warn-bg); color: var(--warn-ink); font-size: 12px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.logo-row { display: flex; align-items: center; gap: 12px; }
.conn { display: flex; flex-direction: column; }
.conn__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.conn__row .hint { margin-top: 2px; }
.conn__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.paircode { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: 0.12em; }
.copy { user-select: all; word-break: break-all; font-size: 13px; background: #FFFFFF; padding: 2px 6px; border-radius: 6px; }
.backlink { font-size: 14px; font-weight: 600; text-decoration: none; }
.envlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.envlist li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--rule); font-size: 14px; }
.envlist li b { margin-left: auto; font-weight: 600; }
.grid-2--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 표 */
.table-wrap { width: 100%; overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th, .dtable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.dtable thead th { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.dtable tbody th { font-weight: 600; }
.dtable .num { text-align: right; }
.dtable a { font-weight: 600; text-decoration: none; }
.dtable--form td { padding: 6px 8px; }
.dtable--form .input--sm { width: 100%; }
.dtable .is-cur { background: var(--accent-bg); }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.yes { color: var(--ok-ink); font-weight: 700; }
.no { color: #A8A29E; }
.details { margin-top: 12px; }
.details summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* 에이전트 기록 */
.dir { padding: 12px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.dir__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.dir__text { margin: 0; font-size: 15px; }
.dir__result { margin: 0; font-size: 14px; color: var(--ink-2); }

/* 모바일 추가 */
.mbtn-form { flex: 2 1 0; display: flex; }
.mbtn-form .mbtn { flex: 1 1 auto; width: 100%; }
.mbtn--muted { flex: 2 1 0; background: var(--plan-bg); color: var(--ink-2); font-weight: 600; }
.mcard__note { margin: 0; font-size: 13px; color: var(--warn-ink); }
.m__flash { margin: 0 16px 12px; }

/* 통계 차트 — 한 차트 한 축, 선 2px, 점 8px, 막대 끝 4px 둥글림 */
.chart { gap: 12px; margin: 0; }
.chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart__grid { stroke: var(--rule); stroke-width: 1; }
.chart__tick { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--a { stroke: var(--accent); }
.chart__line--b { stroke: var(--draft-ink); }
.chart__dot { stroke: #FFFFFF; stroke-width: 2; }
.chart__dot--a { fill: var(--accent); }
.chart__dot--b { fill: var(--draft-ink); }
.chart__dot.is-hover { r: 6; }
.chart__bar { fill: var(--accent); }
.chart__bar.is-hover { fill: #9A3412; }
.chart__hit { fill: transparent; cursor: crosshair; }
.chart__direct { font-size: 12px; font-weight: 600; fill: var(--ink-2); }
.chart-tip { position: absolute; z-index: 40; pointer-events: none; white-space: pre-line;
  background: var(--ink); color: #FFFFFF; font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: 8px;
  font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px rgba(28, 25, 23, 0.2); }
.legend { display: inline-flex; gap: 14px; font-size: 13px; color: var(--ink-2); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 14px; height: 3px; border-radius: 2px; }
.legend__swatch--a { background: var(--accent); }
.legend__swatch--b { background: var(--draft-ink); }
.sent { display: flex; flex-direction: column; gap: 8px; }
.sent__row { display: grid; grid-template-columns: 40px 1fr 56px; align-items: center; gap: 10px; font-size: 14px; }
.sent__bar { height: 10px; background: var(--plan-bg); border-radius: 5px; overflow: hidden; }
.sent__fill { display: block; height: 100%; border-radius: 5px; }
.sent__fill--positive { background: var(--ok-ink); }
.sent__fill--neutral { background: #A8A29E; }
.sent__fill--negative { background: var(--fail-ink); }
.sent__val { text-align: right; color: var(--ink-2); }
.kwcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kwlist { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: kw; }
.kwlist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.kwlist li .num { color: var(--ink-3); }
.kwlist__empty { color: var(--ink-3); }

.auth--center { justify-content: center; }

@media (max-width: 1024px) {
  .grid-2--even, .form-grid, .form-grid--3, .kwcols { grid-template-columns: minmax(0, 1fr); }
  .side__tenant, .side__sep { display: none; }
}
@media (max-width: 720px) {
  .conn__row { flex-direction: column; align-items: flex-start; }
  .page__head { flex-direction: column; align-items: stretch; }
}

/* 휴대폰 폭 — 사이드바를 숨기지 않고 위쪽 가로 아이콘 줄로 바꾼다 (메뉴 이동이 끊기지 않게) */
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .side {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    width: 100%; height: auto; position: sticky; top: 0; z-index: 30;
    padding: 8px 12px; overflow-x: auto; overflow-y: hidden;
  }
  .side__brand { flex-shrink: 0; }
  .side__logo { width: 34px; height: 34px; }
  .side__menu { flex-direction: row; gap: 2px; }
  .side__link { width: 44px; height: 44px; flex-shrink: 0; }
  .side__sep { display: none; }
  .side__foot { margin-top: 0; margin-left: auto; flex-direction: row; flex-shrink: 0; }
  .side__pc { display: none; }
  .side__user { padding: 0; }
}

/* ===========================================================================
 * 회원가입 · 약관 · 온보딩 · 가입 신청
 * ========================================================================= */
a.brandmark { text-decoration: none; }
.brandmark--dark .brandmark__name { color: var(--ink); }
.auth__main--top { align-items: flex-start; padding-top: 48px; padding-bottom: 48px; }
.card--wide { width: 560px; }
.auth__alt { margin: 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.auth__alt a { font-weight: 600; }
.notice--err { background: var(--fail-bg); color: var(--fail-ink); }
.field--narrow { max-width: 160px; }
.agree { display: flex; flex-direction: column; gap: 2px; }
.agree a { font-weight: 600; }
/* 봇만 채우는 숨은 칸 — 화면·보조기기 모두에서 숨김 */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.legal { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px 48px; }
.legal__head { width: 100%; max-width: 760px; }
.legal__body { width: 100%; max-width: 760px; gap: 16px; }
.legal__text { white-space: pre-line; font-size: 15px; line-height: 1.75; color: var(--ink); }
.legal__foot { display: flex; justify-content: flex-end; }

.onboard { gap: 12px; border-color: #FDBA74; background: linear-gradient(0deg, #FFFFFF, #FFFFFF) padding-box; }
.onboard__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.onboard__step { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #FFFFFF; }
.onboard__step.is-next { border: 2px solid var(--accent-strong); background: var(--accent-bg); }
.onboard__step.is-done { background: #F0FDF4; border-color: #BBF7D0; }
.onboard__step .btn { align-self: flex-start; }
.onboard__dot { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--plan-bg); color: var(--ink-2); }
.onboard__step.is-next .onboard__dot { background: var(--accent); color: #FFFFFF; }
.onboard__step.is-done .onboard__dot { background: var(--ok-bg); color: var(--ok-ink); }
.onboard__body { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.onboard__desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.card__link-form { margin-left: auto; }
.card__link-form .btn--text { min-height: 44px; }

.pcdl--wide { grid-template-columns: 110px minmax(0, 1fr); }
.signup-card .actions { align-items: flex-start; }
.reject { position: relative; }
.reject > summary { list-style: none; cursor: pointer; }
.reject > summary::-webkit-details-marker { display: none; }
.reject__form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 280px; }
.reject__form label { font-size: 14px; font-weight: 600; }
.inline label { font-size: 14px; font-weight: 600; }

@media (max-width: 1024px) {
  .onboard__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--wide { width: 100%; }
}
@media (max-width: 600px) {
  .onboard__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
 * 플랫폼 관리자 화면 (design/Admin*.dc.html) — 관리자 전용 토큰
 *   사이드바 #0F1B2D · 활성 #1E3350 · 비활성 글자 #CBD5E1 · 배지 #FBBF24
 *   본문 #F4F5F7 · 카드 테두리 #E2E8F0 · 보조 글자 #475569 / #64748B
 * ========================================================================= */
.admin-app {
  --bg: #F4F5F7; --line: #E2E8F0; --rule: #F1F5F9; --field-line: #CBD5E1; --field-bg: #FAFBFC;
  --ink: #0F172A; --ink-2: #475569; --ink-3: #5E6D83;
  --side: #0F1B2D; --side-active: #1E3350; --side-ink: #CBD5E1; --side-dim: #94A3B8;
  background: var(--bg);
}
body:has(.admin-app) { background: #F4F5F7; }
.side--admin .side__link:hover { background: #16263D; }
.side__brandtext { display: flex; flex-direction: column; gap: 3px; }
.admin-badge {
  align-self: flex-start; height: 20px; padding: 0 7px; border-radius: 5px; background: #FBBF24; color: #1C1917;
  font-size: 11px; font-weight: 700; display: flex; align-items: center;
}
.side__count--muted { background: #334155; }
.side__dot--bad { background: #F87171; }
.side__view {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px;
  background: var(--side-active); color: #FFFFFF; text-decoration: none; font-size: 14px; font-weight: 600;
}
.side__view:hover { color: #FFFFFF; background: #2A4466; }

.btn--navy { background: #0F1B2D; border-color: #0F1B2D; color: #FFFFFF; font-weight: 700; }
.btn--navy:hover { background: #1E3350; color: #FFFFFF; }
.btn--soft { background: #FFF7ED; border-color: #FDBA74; color: #9A3412; font-weight: 700; }
.btn--soft:hover { color: #7C2D12; background: #FFEDD5; }
.input--search { width: 300px; max-width: 100%; height: 44px; }
.kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi__num--sm { font-size: 26px; }
.kpi--sm { padding: 16px 18px; gap: 4px; border-radius: 14px; }
.kpi--sm .kpi__num { font-size: 24px; }
.kpi__note--good { color: #15803D; font-weight: 600; }
.admin-app .kpi--hot .kpi__label, .admin-app .kpi--hot .kpi__note { color: #9A3412; }
.is-over { color: var(--fail-ink) !important; font-weight: 700; }
.is-good { color: #15803D; font-weight: 700; }
.is-bad { color: var(--fail-ink); font-weight: 700; }
.is-up { color: #15803D; font-weight: 600; }
.is-down { color: var(--fail-ink); font-weight: 600; }
.pill-count--red { background: #B91C1C; }
.grid-2--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-billing { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card__bottom { margin-top: auto; }
.card__title--sm { font-size: 16px; }

/* 조치 필요 · 서비스 상태 줄 */
.issue { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.issue__dot { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.issue__dot--red { background: #DC2626; }
.issue__dot--amber { background: #F59E0B; }
.issue__dot--gray { background: #94A3B8; }
.issue__dot--green { background: #16A34A; }
.issue__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.issue__who { font-size: 15px; font-weight: 600; color: var(--ink); }
.issue__who .muted { font-weight: 500; font-size: 13px; }
.issue__text { font-size: 14px; color: #334155; }
.issue__tag { flex-shrink: 0; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.issue__tag--red { background: #FEE2E2; color: #991B1B; }
.issue__tag--amber { background: #FEF3C7; color: #92400E; }
.issue__tag--gray { background: #F1F5F9; color: #475569; }
.issue__tag--green { background: #DCFCE7; color: #166534; }

.rate { display: flex; flex-direction: column; gap: 6px; }
.rate__head { display: flex; justify-content: space-between; font-size: 14px; }
.rate__head b { font-weight: 600; }
.rate__bar { height: 8px; border-radius: 4px; background: #F1F5F9; overflow: hidden; }
.rate__fill { height: 100%; border-radius: 4px; background: #16A34A; }
.rate__fill.is-bad { background: #DC2626; }
.rate__note { font-size: 12px; color: var(--ink-3); }
.banner--sm { font-size: 13px; line-height: 1.5; align-items: flex-start; }

.mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.mini-row__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.mini-row__body b { font-weight: 600; }
.mini-row__body .muted { font-size: 12px; }

.weekbars { height: 170px; display: flex; align-items: flex-end; gap: 10px; padding-top: 8px; }
.weekbars__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.weekbars__v { font-size: 11px; color: var(--ink-2); }
.weekbars__bar { width: 100%; border-radius: 6px 6px 2px 2px; background: #CBD5E1; }
.weekbars__bar.is-today { background: var(--accent); }
.weekbars__d { font-size: 12px; color: var(--ink-3); }

.svcgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.svc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); }
.svc__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.svc__body b { font-weight: 600; }
.svc__body .muted { font-size: 12px; }
.dtable__cap { text-align: left; padding: 14px 12px 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.errrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.errrow__time { width: 70px; flex-shrink: 0; }
.lv { flex-shrink: 0; width: 44px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.lv--e { background: #FEE2E2; color: #991B1B; }
.lv--w { background: #FEF3C7; color: #92400E; }

/* 가입 신청 */
.tabs--navy .tab.is-on { background: #0F1B2D; border-color: #0F1B2D; }
.split__list--460 { width: 460px; }
.ritem__shop { font-size: 16px; }
.badge--sg-pending { background: #FFEDD5; color: #9A3412; }
.badge--sg-approved { background: var(--ok-bg); color: var(--ok-ink); }
.badge--sg-rejected { background: #F1F5F9; color: #475569; }
.badge--sg-email_pending { background: var(--plan-bg); color: var(--plan-ink); }
.detail__h2--lg { font-size: 24px; }
.detail__heading .detail__when { margin-left: auto; }
.deflist { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px minmax(0, 1fr); gap: 14px 16px; font-size: 15px; }
.deflist dt { color: var(--ink-3); }
.deflist dd { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deflist--2 { grid-template-columns: 130px minmax(0, 1fr); }
.sg-form { display: flex; flex-direction: column; gap: 14px; }
.plancards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plancard { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--field-line); }
.plancard:has(input:checked) { background: var(--accent-bg); border: 2px solid var(--accent-strong); }
.plancard:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.plancard__name { font-size: 16px; font-weight: 700; color: var(--ink); }
.plancard__price { font-size: 14px; color: #334155; }
.plancard__desc { font-size: 12px; color: var(--ink-3); }

/* 고객 목록 + 상세 */
.admin-app .page:has(.tenants) { padding: 0; }
.tenants { display: flex; min-height: 100vh; }
.tlist { width: 320px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid var(--line); padding: 24px 16px;
  display: flex; flex-direction: column; gap: 12px; }
.tlist .input--search { width: 100%; }
.tlist__head { display: flex; align-items: center; justify-content: space-between; }
.tlist__title { margin: 0; font-size: 22px; font-weight: 700; }
.tlist__items { display: flex; flex-direction: column; gap: 4px; }
.fchip { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--field-line); background: #FFFFFF; color: #334155;
  font-size: 13px; display: inline-flex; align-items: center; text-decoration: none; }
.fchip.is-on { background: #0F1B2D; border-color: #0F1B2D; color: #FFFFFF; font-weight: 600; }
.titem { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.titem:hover { background: #F8FAFC; color: var(--ink); }
.titem.is-on { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent-strong); }
.titem__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.titem__body b { font-size: 15px; font-weight: 600; }
.titem__body .muted, .titem__last { font-size: 12px; }
.tdot { width: 9px; height: 9px; border-radius: 5px; flex-shrink: 0; }
.tdot--ok { background: #16A34A; }
.tdot--warn { background: #F59E0B; }
.tdot--bad { background: #DC2626; }
.tdot--idle { background: #94A3B8; }
.tdetail { flex-grow: 1; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.thead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.thead__info { display: flex; flex-direction: column; gap: 6px; }
.thead__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thead__btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.badge--th-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge--th-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge--th-bad { background: #FEE2E2; color: #991B1B; }
.badge--th-idle { background: #F1F5F9; color: #475569; }
.utabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.utab { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; font-size: 15px; color: var(--ink-2);
  text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.utab:hover { color: var(--ink); }
.utab.is-on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.grid-2--tenant { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.progress { height: 8px; border-radius: 4px; background: #F1F5F9; overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); }
.onb-count { font-size: 14px; font-weight: 700; color: var(--accent); margin-left: auto; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.check__box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--field-line); display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.check.is-done { color: var(--ink-3); font-weight: 400; text-decoration: line-through; }
.check.is-done .check__box { background: #16A34A; border-color: #16A34A; color: #FFFFFF; }
.act { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; padding: 7px 0; border-top: 1px solid var(--rule); align-items: flex-start; }
.act__time { width: 84px; flex-shrink: 0; color: var(--ink-3); }
.act__text { color: #1E293B; }
.who { flex-shrink: 0; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }
.who--system { background: #F1F5F9; color: #475569; }
.who--admin { background: #FEF3C7; color: #92400E; }
.who--owner { background: var(--draft-bg); color: var(--draft-ink); }
.who--staff { background: #F3E8FF; color: #6B21A8; }
.badge--acc-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge--acc-need_code { background: var(--warn-bg); color: var(--warn-ink); }
.badge--acc-fail { background: var(--fail-bg); color: var(--fail-ink); }
.badge--acc-pending, .badge--acc-saved { background: var(--draft-bg); color: var(--draft-ink); }
.badge--acc-none { background: #F1F5F9; color: #475569; }
.popover { position: relative; }
.popover > summary { list-style: none; cursor: pointer; }
.popover > summary::-webkit-details-marker { display: none; }
.popover__box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; padding: 14px; border-radius: 12px;
  background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); display: flex; flex-direction: column; gap: 8px; }
.popover__box .input--sm { width: 100%; }

/* 사용량·청구 */
.badge--bill-due { background: var(--draft-bg); color: var(--draft-ink); }
.badge--bill-trial { background: var(--warn-bg); color: var(--warn-ink); }
.badge--bill-free, .badge--bill-stop { background: #F1F5F9; color: #475569; }
.badge--bill-paid { background: var(--ok-bg); color: var(--ok-ink); }
.badge--bill-fail { background: #FEE2E2; color: #991B1B; }
.badge--wait-soft { background: var(--warn-bg); color: var(--warn-ink); }
.planbox { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #FAFBFC; }
.planbox__head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.planbox__head .muted { font-size: 12px; }
.field--tight { gap: 4px; font-size: 12px; color: var(--ink-2); }
.notice--sm { font-size: 13px; padding: 10px 12px; }
.seg--sm .seg__btn { height: 32px; font-size: 13px; }

/* 관리자 → 고객 화면 보기: 노란 띠 (design/AdminView.dc.html) */
.viewbar { position: sticky; top: 0; z-index: 40; min-height: 64px; padding: 8px 24px; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; background: #FBBF24; color: #1C1917; }
.viewbar .ic { width: 22px; height: 22px; }
.viewbar__text { font-size: 16px; }
.viewbar__note { font-size: 13px; color: #44403C; }
.viewbar__wait { margin-left: auto; font-size: 14px; font-weight: 600; }
.viewbar__form { margin: 0; }
.viewbar__form:first-of-type { margin-left: auto; }
.viewbar__wait + .viewbar__form { margin-left: 0; }
.viewbar__btn { min-height: 40px; padding: 0 14px; border-radius: 9px; background: #FFFFFF; border: 1px solid #1C1917; color: #1C1917;
  font-size: 14px; font-weight: 600; }
.viewbar__back { min-height: 40px; padding: 0 14px; border-radius: 9px; background: #1C1917; border: none; color: #FFFFFF;
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.viewbar__back .ic { width: 18px; height: 18px; }
.app--viewing .side { top: 64px; height: calc(100vh - 64px); }
.banner--notice.banner--info { background: #EFF6FF; color: #1E3A8A; }
.banner--notice.banner--warn { background: var(--warn-bg); color: #78350F; }
.banner--act { flex-wrap: wrap; }

.onboard__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1280px) {
  .kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3, .grid-billing, .grid-2--wide, .grid-2--tenant { grid-template-columns: minmax(0, 1fr); }
  .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__list--460 { width: 100%; }
  .deflist { grid-template-columns: 110px minmax(0, 1fr); }
  .onboard__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .tenants { flex-direction: column; }
  .tlist { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .tlist__items { max-height: 320px; overflow-y: auto; }
  .plancards { grid-template-columns: minmax(0, 1fr); }
  .side__brandtext .admin-badge, .side__view .side__label { display: none; }
  .side__view { justify-content: center; padding: 0; width: 48px; }
  .side__view .ic:last-child { display: none; }
  .app--viewing .side { top: 0; height: 100vh; }
  .viewbar { position: static; }
}
@media (max-width: 720px) {
  .kpis--5, .svcgrid { grid-template-columns: minmax(0, 1fr); }
  .input--search { width: 100%; }
  .popover__box { position: static; width: 100%; margin-top: 6px; }
  .tdetail { padding: 16px; }
  .onboard__steps { grid-template-columns: minmax(0, 1fr); }
}

/* 신고 권장 리뷰 — 배달앱별 게시 중단 요청 방법 */
.report-guide { border: 1px solid #FECACA; background: var(--fail-bg); color: var(--fail-ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.report-guide summary { cursor: pointer; }
.report-guide__body { margin: 10px 0 0; white-space: pre-line; color: var(--ink-2); }

/* 폰 알림(웹 푸시) 카드 */
.pushcard { margin: 0 16px 12px; padding: 12px 14px; border: 1px solid var(--line, #E7E5E4); border-radius: 14px; background: #FFFFFF; font-size: 14px; line-height: 1.5; }
.pushcard__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pushcard__text { flex: 1 1 200px; color: var(--ink-2); }
.pushcard__text b { color: var(--ink-1, #1C1917); }
.pushcard__guide { margin-top: 8px; color: var(--ink-2); }
.pushcard__guide summary { cursor: pointer; font-weight: 600; }
.pushcard__guide ol { margin: 8px 0; padding-left: 20px; }
.form-card .pushcard { margin: 0; }

.kakao-tpl { border-top: 1px solid var(--line); padding-top: 10px; }
.kakao-tpl summary { cursor: pointer; margin-bottom: 8px; }

/* 점장 담당 매장 */
.mgr-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.mgr-pick { border: 0; padding: 0; margin: 0; }
.mgr-pick legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.checkbox--sm { font-size: 13px; }

/* 요금제에 없는 기능 안내 */
.locked-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.locked-card > .ic { width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; }
.locked-card .card__title { margin: 0 0 4px; }

/* 주간 리포트 */
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.report-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.report-stat b { font-size: 22px; }
.report-h3 { margin: 4px 0 6px; font-size: 15px; font-weight: 700; }
.report-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; font-size: 14px; }
.report-todo { background: var(--accent-bg); border-radius: 12px; padding: 12px 16px; }
.row-warn td { background: #FFF7ED; }
@media (max-width: 640px) {
  .report-grid { grid-template-columns: 1fr; }
}

/* 요금제 화면 */
.seg__tag { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--accent-bg); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.plan-now { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.plan-now__main { display: flex; flex-direction: column; gap: 2px; }
.plan-now__label { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.plan-now__name { font-size: 26px; letter-spacing: -0.02em; }
.plan-now__meta { font-size: 14px; color: var(--ink-2); }
.plan-now__use { display: flex; gap: 12px 28px; flex-wrap: wrap; margin: 0; }
.plan-now__use dt { font-size: 12px; color: var(--ink-3); }
.plan-now__use dd { margin: 0; font-weight: 700; }
.plan-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; }
.plan-card--pick { border-color: #FDBA74; }
.plan-card.is-cur { border: 2px solid var(--accent); box-shadow: 0 2px 10px rgba(194, 65, 12, 0.10); }
.plan-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card__name { margin: 0; font-size: 18px; font-weight: 700; }
.plan-card__price { display: flex; align-items: baseline; gap: 4px; }
.plan-card__price b { font-size: 28px; letter-spacing: -0.02em; }
.plan-card__price span { color: var(--ink-3); font-size: 14px; }
.plan-card__sub { margin: 0; min-height: 20px; font-size: 13px; color: var(--ink-3); }
.plan-card__list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 14px; flex-grow: 1; }
.plan-card__list li { padding-left: 22px; position: relative; line-height: 1.45; }
.plan-card__list li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok-ink); font-weight: 700; }
.plan-card__cta { margin-top: 8px; }
.plan-card__cta form { margin: 0; }
.plan-card__note { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.4; }
.btn.is-static { cursor: default; pointer-events: none; }
.plan-table th[scope="row"] { font-weight: 500; }
.plan-cancel summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
@media (max-width: 1100px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-cards { grid-template-columns: 1fr; } .plan-now__name { font-size: 22px; } }

/* 매장 관리 */
.store-rename { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.store-rename .input { min-width: 0; flex: 1 1 160px; }
.store-rename .store-rename__label { flex: 0 1 100px; }
.store-archive { display: inline-block; }
.store-archive summary { list-style: none; }
.store-archive summary::-webkit-details-marker { display: none; }
.store-archive__form { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
tr.is-muted td { color: var(--ink-3); }

.planedit { border-top: 1px solid var(--line); padding: 10px 0; }
.planedit summary { cursor: pointer; margin-bottom: 8px; }
.badge--bill-internal { background: var(--plan-bg); color: var(--plan-ink); }

/* 화면 점검 (390px·PC) 뒤 보정 */
fieldset { min-width: 0; }                               /* 표가 든 fieldset 이 화면 밖으로 밀리지 않게 */
.card__link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; }
summary { min-height: 32px; padding: 6px 0; line-height: 1.45; cursor: pointer; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details:not(.store-archive) > summary::before { content: "▸"; display: inline-block; margin-right: 6px; font-size: 12px; color: var(--ink-3); transition: transform .15s; }
details[open]:not(.store-archive) > summary::before { transform: rotate(90deg); }
@media (max-width: 640px) {
  /* 좁은 화면에서는 표를 카드처럼 한 줄씩 */
  .dtable--stack thead { display: none; }
  .dtable--stack, .dtable--stack tbody, .dtable--stack tr, .dtable--stack td { display: block; width: 100%; }
  .dtable--stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .dtable--stack td { padding: 4px 0; border: 0; }
  .dtable--stack .cell-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .store-rename .input { flex: 1 1 100%; }
}

/* 도움말 [?] */
.helpbtn { position: relative; align-self: flex-start; margin-left: auto; flex-shrink: 0; }
.helpbtn:not(.is-in-head) { display: flex; justify-content: flex-end; }
details.helpbtn > summary::before { content: none; }
.helpbtn__btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--ink-2); }
.helpbtn__btn:hover, .helpbtn[open] .helpbtn__btn { border-color: var(--accent); color: var(--accent); }
.helpbtn__pop { position: absolute; right: 0; top: 44px; z-index: 40; width: min(340px, calc(100vw - 32px)); padding: 16px 18px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(28, 25, 23, 0.14); font-size: 14px; line-height: 1.55; }
.helpbtn__title { display: block; margin-bottom: 6px; font-size: 15px; }
.helpbtn__pop ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.helpbtn__more { display: inline-flex; min-height: 32px; align-items: center; margin-top: 8px; font-weight: 600; }
/* 좁은 화면: 제목 줄 오른쪽 위에 고정 */
.page__head { position: relative; }
.helpbtn.is-in-head { order: 99; }
@media (max-width: 900px) {
  .page__head:has(.helpbtn.is-in-head) { padding-right: 48px; }
  .helpbtn.is-in-head { position: absolute; top: 0; right: 0; margin: 0; }
}

/* 시작 설정 안내 */
.start-progress { height: 8px; border-radius: 99px; background: #EAE5DD; overflow: hidden; }
.start-progress span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.start-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.start-step { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; }
.start-step.is-next { border: 2px solid var(--accent); }
.start-step.is-done { background: #FAFAF9; }
.start-step__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--plan-bg); color: var(--ink); font-weight: 700; }
.start-step.is-next .start-step__num { background: var(--accent); color: #FFFFFF; }
.start-step.is-done .start-step__num { background: var(--ok-bg); color: var(--ok-ink); }
.start-step__body { flex: 1 1 auto; min-width: 0; }
.start-step__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.start-step__tip { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.start-step__go { flex-shrink: 0; }
@media (max-width: 640px) {
  .start-step { flex-wrap: wrap; }
  .start-step__go { width: 100%; }
}
.checkbox a { padding: 4px 0; }   /* 동의 문장 속 링크 — 누르는 높이 24px 이상 */
.card.plan-now { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
.plan-table td, .plan-table thead th:not(:first-child) { text-align: center; }
@media (max-width: 640px) { .card.plan-now { flex-direction: column; align-items: flex-start; } }