/* ════════════════════════════════════════════════════════════════
   FLOWERN admin.css · v1.0
   ───────────────────────────────────────────────────────────────
   docs/DESIGN.md v1.0 기준 — 모든 어드민 페이지 공통 CSS
   · 클래스 컨벤션:  ro-*  (컴포넌트), roo-* (내부 요소), is-* (상태)
   · 라운딩: 끝만 살짝 둥근 (4~16px), pill은 토글/아바타/점배지만
   · 입력: 라인 디자인 (흰 배경 + 1px 테두리, focus 시 테두리만)
   · 16px 기준 + clamp 반응형
   · ⚠️ 메인 컬러 #e85a8c 는 임시 (대표님 컨펌 필요)
   ════════════════════════════════════════════════════════════════ */


/* ═══════════ ① TOKENS (Foundation) ═══════════ */
:root {
  /* Color · 브랜드 (그린 — Claude Design 결과 적용) */
  --c-point:        #5a8d4e;
  --c-point-deep:   #426a39;
  --c-point-soft:   #e8f0e3;
  --c-point-tint:   #f4f8f1;
  --c-point-wash:   #fafcf9;   /* 가장 연한 초록 — 손이 닿은 칸처럼 살짝만 비칠 때 */

  /* Color · 브랜드 alias (Claude Design 호환 — 동일 값) */
  --c-primary:       var(--c-point);
  --c-primary-deep:  var(--c-point-deep);
  --c-primary-soft:  var(--c-point-soft);
  --c-primary-tint:  var(--c-point-tint);
  --c-accent-soft:   #faf0db;       /* 사슴 마스코트 그라데이션 */

  /* Color · 회계/비용 톤 */
  --c-cost:          #a66b2c;       /* 회계 비용 (오렌지 브라운) */
  --c-cost-soft:     #f5e6d4;

  /* Color · 텍스트 */
  --c-text:         #2a2628;
  --c-text-soft:    #4a4144;
  --c-muted:        #8a8285;

  /* Color · 라인/배경 */
  --c-line:         #ece8ea;
  --c-line-soft:    #f4f0f2;
  --c-bg:           #ffffff;
  --c-bg-soft:      #faf7f8;
  --c-cream:        #fbf9f5;
  --c-beige:        #f5ead7;

  /* Color · 시맨틱 */
  --c-info:         #5a8dc8;
  --c-info-soft:    #e3edf6;
  --c-success:      #4e8d5a;
  --c-success-soft: #e0f0e3;
  --c-warn:         #d97757;
  --c-warn-soft:    #fbeae0;
  --c-danger:       #c84a3a;
  --c-danger-soft:  #f8e3e0;
  --c-gold:         #e0b568;
  --c-gold-soft:    #faf0db;
  --c-purple:       #7c5cc7;
  --c-purple-soft:  #ede8fa;

  /* Color · 한국식 등락 (빨강 상승, 파랑 하락) */
  --c-info-deep:    #3a7ba8;   /* 연한 바탕 위 진한 글자 (뱃지 · 칩) */
  --c-warn-deep:    #8a4a30;
  --c-gold-deep:    #8a6520;
  --c-purple-deep:  #5a3eaa;
  --c-up:    #d34a3a;
  --c-down:  #4a7ba8;

  /* Typography · 본문 기본 16px (2026-09-10 확정) — 표 본문도 이 기본값을 쓴다 */
  --fs-2xs:  12px;   /* 캡션, 매우 작은 라벨 */
  --fs-xs:   13px;   /* 헬퍼 텍스트, 작은 배지 */
  --fs-sm:   14px;   /* 부가 설명, 작은 버튼 텍스트 */
  --fs-md:   15px;   /* 라벨, 폼 필드 텍스트 */
  --fs-ctrl: var(--fs-md);   /* 버튼 · 입력칸 · 칩 · 선택 칸 글자 — 이 한 줄로 전체 조절 (대표 9/30 「글자가 작다」, 14→15) */
  --fs-base: 16px;   /* ⭐ 본문 기본 · 표 본문 */
  --fs-lg:   18px;   /* 카드 타이틀, h3 */
  --fs-xl:   23px;   /* KPI 숫자 */
  --fs-2xl:  28px;   /* 페이지 타이틀, h1 */
  --fs-3xl:  32px;   /* 큰 제목 (대시보드 등) */

  /* Letter spacing (자간) */
  --ls-tight:   -0.04em;   /* 큰 제목, KPI 숫자 */
  --ls-base:    -0.02em;   /* 본문 default */
  --ls-loose:    0.02em;   /* uppercase 라벨, KPI head */

  /* Line height */
  --lh-tight:   1.1;       /* 큰 숫자, KPI */
  --lh-base:    1.5;       /* 본문 default */
  --lh-relaxed: 1.7;       /* 긴 설명 */

  /* Spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --pad-card: 24px;   /* 카드 안쪽 여백 (머리 · 몸통 · 발 모두) */
  --w-search: 260px;  /* 목록 위 검색칸 폭 */
  --w-ord-table: 1160px;          /* 주문 표 최소 폭 (이보다 좁으면 옆으로 스크롤) */
  --w-ord-table-compact: 880px;   /* 칸이 적은 주문 표 */
  /* 상담실 3칸 */
  --w-chat-list: 340px;   /* 왼쪽 상담 목록 */
  --w-chat-side: 440px;   /* 오른쪽 고객 · 주문 (정보가 다 보여야 상담이 된다) */
  --h-topbar: 60px;   /* 상단바 높이 */
  --h-chat: calc(100vh - var(--h-topbar));   /* 상담실은 상단바 아래 화면 전체 (대표 10/6 「제목 필요 없고 크게」) */
  /* 팝업 폭 기준 4단계 (대표 10/2 「기준 잡아서 크게, 넓게 보기 편하게」) */
  --w-modal-sm: 560px;    /* 짧은 입력 하나 */
  --w-modal:    800px;    /* 기본 입력 팝업 */
  --w-modal-lg: 1200px;   /* 두 칸 입력 · 표 · 미리보기 */
  --w-modal-xl: 1440px;   /* 주문 상세처럼 단계 · 탭이 있는 큰 팝업 */
  /* 계산서 미리보기 — 홈택스 전자(세금)계산서 양식: 공급자 빨강 · 공급받는자 파랑 */
  --c-taxdoc-sup:      #d0413a;
  --c-taxdoc-sup-soft: #fdf2f1;
  --c-taxdoc-buy:      #2c5fc7;
  --c-taxdoc-buy-soft: #eff4fd;
  --h-taxdoc-row: 40px;
  --w-taxdoc-v:   40px;   /* 세로 글씨 칸 (공급자 · 공급받는자) */
  --w-taxdoc-k:   92px;   /* 이름 칸 */
  --w-taxdoc-d:   52px;   /* 월 · 일 · 규격 · 수량 */
  --w-taxdoc-m:   132px;  /* 금액 칸 */

  /* Radius — 끝만 살짝 둥근 */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;     /* 기본 버튼/인풋 ⭐ */
  --r-lg:  10px;
  --r-xl:  12px;     /* 카드 */
  --r-2xl: 16px;     /* 큰 카드/모달 */
  --r-pill: 999px;   /* 토글, 아바타, 점배지만 */

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(0,0,0,.03);
  --sh-sm: 0 4px 12px rgba(0,0,0,.05);
  --sh-md: 0 8px 20px rgba(90,141,78,.08);
  --sh-lg: 0 16px 40px rgba(0,0,0,.10);

  /* Motion */
  --tr-fast:   .15s ease;
  --tr-base:   .25s ease;
  --tr-spring: .4s cubic-bezier(.16, 1, .3, 1);

  /* Z-Index */
  --z-sticky:    20;
  --z-dropdown:  50;
  --z-modal:    100;
  --z-toast:    200;
  --z-tooltip:  300;

  /* Layout */
  --w-sidebar:           240px;
  --w-sidebar-collapsed:  64px;
  --h-header:             64px;
  /* 칸·버튼 높이 기준 (대표 9/29 「버튼 높이·입력칸 일관성」, 「2px씩 올려」): 입력칸 = 기본 버튼 = 42, 표 안 작은 버튼 34, 큰 버튼 50 */
  --h-ctrl-xs: 30px;
  --h-ctrl-sm: 34px;
  --h-ctrl:    42px;
  --h-ctrl-lg: 50px;
  --w-page-max:         none;      /* 본문은 메뉴를 접든 펴든 남는 가로폭을 다 쓴다 */

  /* Font */
  --ff-base:  'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-serif: 'Cormorant Garamond', 'Nanum Myeongjo', serif;
  --ff-mono:  'SF Mono', Monaco, Consolas, monospace;
}


/* ═══════════ ② RESET ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--c-text);
  background: var(--c-bg-soft);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; }
p { margin: 0; }


/* ═══════════ ③ ro-app / ro-main (앱 골격) ═══════════ */
.ro-app {
  display: grid;
  grid-template-columns: var(--w-sidebar) minmax(0, 1fr);   /* 본문이 표 때문에 창보다 넓어지지 않게 */
  min-height: 100vh;
}
.ro-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* ═══════════ ④ Sidebar (admin-layout.js 가 주입) ═══════════ */
.ro-sidebar {
  background: var(--c-bg);
  border-right: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.roo-sb-brand { padding: 22px 22px 18px; }
.roo-sb-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.roo-sb-logo-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--c-point); }
.roo-sb-logo-text {
  font-family: var(--ff-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-point-deep);
  line-height: 1;
}
.roo-sb-tagline {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 500;
}
.roo-sb-menu { flex: 1; padding: var(--sp-3) 0; }
.roo-sb-section {
  padding: var(--sp-4) 22px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
}
.roo-sb-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: all var(--tr-fast);
}
.roo-sb-item:hover {
  background: var(--c-point-tint);
  color: var(--c-point-deep);
}
.roo-sb-item.is-active {
  background: var(--c-point-soft);
  color: var(--c-point-deep);
  font-weight: 700;
}
.roo-sb-item-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--c-muted);
}
.roo-sb-item.is-active .roo-sb-item-icon { color: var(--c-point-deep); }
.roo-sb-item-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }


/* ═══════════ ⑤ Header (배경 없음, 투명) ═══════════ */
.ro-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--h-header);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
}
.roo-h-toggle {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-soft);
  flex-shrink: 0;
}
.roo-h-toggle:hover { background: var(--c-bg-soft); }

.roo-h-search {
  flex: 1;
  max-width: 480px;
  margin-left: auto;
  position: relative;
}
.roo-h-search-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-4) 0 42px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-text);
  transition: border-color var(--tr-fast);
}
.roo-h-search-input::placeholder { color: var(--c-muted); }
.roo-h-search-input:focus { outline: none; border-color: var(--c-point); }
.roo-h-search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}

.roo-h-bell {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-soft);
  flex-shrink: 0;
}
.roo-h-bell:hover { background: var(--c-bg-soft); }
.roo-h-bell-dot {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--c-danger);
  color: #fff;
  border: 2px solid var(--c-bg-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.roo-h-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background var(--tr-fast);
}
.roo-h-user:hover { background: var(--c-bg-soft); }
.roo-h-user-avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--c-point-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--c-point-deep);
  overflow: hidden;
  flex-shrink: 0;
}
.roo-h-user-info { display: flex; flex-direction: column; align-items: flex-start; }
.roo-h-user-name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); line-height: 1.2; }
.roo-h-user-role { font-size: var(--fs-2xs); color: var(--c-muted); line-height: 1.2; }


/* ═══════════ ⑥ ro-page (캐노니컬 레이아웃) ═══════════ */
.ro-page {
  flex: 1;
  padding: var(--sp-10) var(--sp-8) var(--sp-12);
  max-width: var(--w-page-max);
  width: 100%;
}
.ro-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.roo-page-title-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
/* 제목이 스크립트로 정해지는 화면: 정해지기 전까지 자리만 잡아 두고 글자를 보이지 않게 (제목이 바뀌며 깜빡이지 않도록) */
.roo-page-title[data-pending] { visibility: hidden; }
.roo-page-title {
  font-size: var(--fs-2xl);
  line-height: 1.2;
}
.roo-page-subtitle {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
  font-weight: 400;
}
.roo-page-title-wrap { flex: 1 1 380px; min-width: 0; }
.roo-page-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;           /* 좁아지면 통째로 다음 줄로. 버튼이 하나씩 세로로 쌓이지 않게 */
}
[hidden] { display: none !important; }   /* 숨김은 항상 숨김 — display 를 지정한 카드도 예외 없이 */
.ro-page { min-width: 0; }
.ro-page-body { display: flex; flex-direction: column; gap: var(--sp-8); }
/* 화면 세로 리듬 — 카드·표·숫자 줄이 서로 붙지 않게. 페이지마다 따로 주지 않는다.
   카드를 div 로 한 번 감싼 화면도 같은 간격이 되게 한 단계 더 받는다.
   :has(> .ro-card) 로 「카드를 담은 감싸개」에만 준다. 칩 줄(.ro-tabs)·버튼 줄처럼
   가로로 늘어놓는 곳에 margin 이 붙으면 줄 높이가 늘어나 칸이 커지므로 건드리지 않는다 */
.ro-page > * + *,
.ro-page > section > * + *,
.ro-page > div:has(> .ro-card):not(.sp-grid):not(.ro-row) > * + *,
.ro-page > section > div:has(> .ro-card):not(.sp-grid):not(.ro-row) > * + * { margin-top: var(--sp-6); }
/* 페이지 안에 놓인 팝업 덮개는 위 간격 규칙에서 뺀다 — 안 빼면 덮개가 24px 내려가 상단바 위가 하얗게 뜬다 (대표 10/2) */
.ro-page .ro-modal-bg { margin: 0; }
/* 가로로 늘어놓는 곳(카드 격자·숫자 줄)에는 세로 여백을 주지 않는다.
   여백이 붙으면 둘째 칸부터 아래로 밀리고 첫 칸만 늘어나 아래가 빈다 (gap 이 이미 간격을 맡는다) */
.sp-grid > * + *,
.ro-row > * + *,
.sp-card-metrics > * + *,
.sp-card-stats > * + *,
.roo-detail-facts > * + * { margin-top: 0; }
.ro-page > .roo-subtabs + * { margin-top: var(--sp-5); }

/* ── 밑줄 탭 (본문 맨 위 · 상세 팝업 공용) ──
   <a> 로도 <button> 으로도 같은 모양이어야 한다. 버튼의 기본 테두리·바탕·글꼴을 지운다.
   누를 때 검은 네모가 남지 않게 하고, 키보드로 옮길 때만 테두리를 보여 준다 */
.roo-subtabs {
  display: flex; gap: 30px; align-items: center;
  margin: -8px 0 26px;
  padding: 0 2px;
  overflow-x: auto; white-space: nowrap;
  cursor: default;   /* 탭 사이 빈 자리에 글자 커서(I자)가 뜨지 않게 */
}
.roo-subtab {
  appearance: none; -webkit-appearance: none;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none;
  font-family: inherit; font-size: var(--fs-md); font-weight: 400; line-height: 1.4;
  padding: 12px 2px 11px; margin: 0;
  color: var(--c-muted); text-decoration: none; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.roo-subtab:hover { color: var(--c-text); }
.roo-subtab:disabled { opacity: .4; cursor: default; }
.roo-subtab:disabled { opacity: .4; cursor: default; }
.roo-subtab.is-active { color: var(--c-point-deep); border-bottom-color: var(--c-point); font-weight: 500; }
.roo-subtab:focus { outline: none; }
/* 탭 줄이 overflow 로 잘려 초점 테두리가 세로선 조각으로 보였다 (대표 9/28) — 고른 탭은 밑줄로 충분하다 */
.roo-subtab:focus-visible { outline: none; }
/* 글을 넣는 칸이 아니면 커서 자리(세로 막대)를 그리지 않는다 */
.roo-subtab, .ro-btn, .ro-tab, .roo-modal-close, .sp-card-foot-btn, .sp-balance-action { caret-color: transparent; }

/* ── 별점 매기기 (주문 상세의 꽃집 평가) ──
   별을 누르면 바로 저장된다. 매긴 별은 금색, 나머지는 흐리게 */
.roo-rate { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.roo-rate-stars { display: flex; gap: 2px; }
.roo-star {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  width: 28px; height: 28px; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-line); caret-color: transparent; transition: color .12s ease;
}
.roo-star svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.roo-star:hover, .roo-star.is-on { color: #f2b90c; }
.roo-star:focus { outline: none; }
.roo-rate-note { font-size: var(--fs-sm); color: var(--c-muted); }

/* 글자 커서(I자)는 글을 넣는 칸에서만 보인다.
   화면·팝업의 보통 자리에서 I자가 떠서 세로 막대처럼 보이지 않게 */
.ro-page, .ro-modal, .ro-card, .roo-detail-head, .roo-modal-head { cursor: default; }
.ro-input, .ro-textarea, .ro-select, input, textarea, select, [contenteditable="true"] { cursor: auto; }
.ro-select, select, input[type="checkbox"], input[type="radio"], input[type="date"], input[type="file"] { cursor: pointer; }

/* 눌렀을 때 브라우저 기본 검은 네모가 남지 않게 (키보드로 옮길 때만 보여 준다) */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.roo-modal-close:focus:not(:focus-visible),
.ro-tab:focus:not(:focus-visible) { outline: none; }


/* ═══════════ ⑦ ro-row / ro-stack / ro-flex (Layout) ═══════════ */
.ro-row {
  display: grid;
  gap: 14px;
}
.ro-row-2 { grid-template-columns: repeat(2, 1fr); }
.ro-row-3 { grid-template-columns: repeat(3, 1fr); }
.ro-row-4 { grid-template-columns: repeat(4, 1fr); }
.ro-row-5 { grid-template-columns: repeat(5, 1fr); }
.ro-row > * { min-width: 0; }   /* 숫자 카드가 칸보다 길어도 표 밖으로 밀려 나가지 않게 */
.ro-row-main-side  { grid-template-columns: minmax(0, 1fr) 280px; }
.ro-row-3-side     { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 280px; }
.ro-row-form-2     { grid-template-columns: 1fr 1fr; }
.ro-row-form-3     { grid-template-columns: 1fr 1fr 1fr; }
.ro-row-form-side  { grid-template-columns: minmax(0, 1fr) 320px; }

.ro-stack    { display: flex; flex-direction: column; gap: 14px; }
.ro-stack-1  { gap: var(--sp-1); }
.ro-stack-2  { gap: var(--sp-2); }
.ro-stack-3  { gap: var(--sp-3); }
.ro-stack-4  { gap: var(--sp-4); }
.ro-stack-5  { gap: var(--sp-5); }
.ro-stack-6  { gap: var(--sp-6); }
.ro-stack-8  { gap: var(--sp-8); }   /* 서로 다른 묶음 사이 (예: 요청사항 탭의 보내는 분 문구 ↔ 특이사항) */

.ro-flex          { display: flex; align-items: center; gap: var(--sp-3); }
.ro-flex-2        { gap: var(--sp-2); }
.ro-flex-4        { gap: var(--sp-4); }
.ro-flex-between  { justify-content: space-between; }
.ro-flex-end      { justify-content: flex-end; }
.ro-flex-center   { justify-content: center; }
.ro-flex-start    { align-items: flex-start; }
.ro-flex-wrap     { flex-wrap: wrap; }
.ro-flex-col      { flex-direction: column; align-items: stretch; }
.roo-flex-1       { flex: 1; min-width: 0; }


/* ═══════════ ⑧ ro-card ═══════════ */
.ro-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.ro-card-flush { padding: 0; }
.ro-card-pad   { padding: var(--pad-card); }
.ro-card-elevated { box-shadow: var(--sh-sm); }
.ro-card-clickable { cursor: pointer; transition: all var(--tr-fast); }
.ro-card-clickable:hover { border-color: var(--c-point); }

.roo-card-head {
  padding: var(--pad-card) var(--pad-card) var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.roo-card-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.roo-card-subtitle {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 500;
  margin-top: 2px;
}
.roo-card-link {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--tr-fast);
}
.roo-card-link:hover { color: var(--c-point-deep); }
.roo-card-link::after { content: ' ›'; }

/* head 내부: 좌측 titles wrap (title + sub 묶음) */
.roo-card-titles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
/* sub: subtitle alias (둘 다 동일) */
.roo-card-sub {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 500;
  line-height: var(--lh-base);
}

/* head 내부: 우측 액션 영역 (버튼·셀렉트 모음) */
.roo-card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-left: auto;
}

.roo-card-body { padding: 0 var(--pad-card) var(--pad-card); }

/* foot: 푸터 액션 (저장·취소 등) */
.roo-card-foot {
  padding: 14px var(--pad-card);
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}


/* ═══════════ ⑨ ro-stat (KPI) ═══════════ */
.ro-stat {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all var(--tr-base);
}
.ro-stat:hover { border-color: var(--c-point); box-shadow: var(--sh-md); }
/* 누르면 목록을 거르는 숫자 칸 (data-filter). 고른 칸은 테두리로 표시 */
.ro-stat[data-filter] { cursor: pointer; }
.ro-stat.is-active { border-color: var(--c-point); box-shadow: inset 0 0 0 1px var(--c-point); }
/* 숫자 칸은 이름표 / 숫자 / 설명을 줄 바꿔 세로로 쌓는다.
   화면에서 .roo-stat-info 로 감싸는 것을 잊어도 같은 모양이 되게 (아이콘이 있을 때만 가로) */
.ro-stat:not(:has(> .roo-stat-icon)) { display: grid; gap: 2px; align-items: start; }

.roo-stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  background: var(--c-point-soft);
  color: var(--c-point);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.roo-stat-icon-info    { background: var(--c-info-soft);    color: var(--c-info); }
.roo-stat-icon-warn    { background: var(--c-warn-soft);    color: var(--c-warn); }
.roo-stat-icon-danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.roo-stat-icon-gold    { background: var(--c-gold-soft);    color: var(--c-gold); }
.roo-stat-icon-purple  { background: var(--c-purple-soft);  color: var(--c-purple); }
.roo-stat-icon-success { background: var(--c-success-soft); color: var(--c-success); }

.roo-stat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.roo-stat-label {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 500;
  line-height: 1.3;
}
.roo-stat-num {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--c-text);
  line-height: 1.2;
}
.roo-stat-num small {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-left: 1px;
}
.roo-stat-trend {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 500;
  margin-top: 4px;
}
.roo-stat-trend strong { font-weight: 700; }
.roo-stat-trend-up   strong { color: var(--c-up); }
.roo-stat-trend-down strong { color: var(--c-down); }


/* ═══════════ ⑩ ro-btn ═══════════ */
.ro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-ctrl);   /* 높이는 여백이 아니라 기준값으로 — 테두리가 있어도 같은 높이 */
  padding: 0 16px;
  line-height: 1;
  background: transparent;
  color: var(--c-text);
  border-radius: var(--r-md);
  font-size: var(--fs-ctrl);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--tr-fast);
  white-space: nowrap;
  border: none;
}
.ro-btn:disabled { opacity: .5; cursor: not-allowed; }

.ro-btn-primary { background: var(--c-point); color: #fff; }
.ro-btn-primary:hover:not(:disabled) { background: var(--c-point-deep); }

.ro-btn-outline {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.ro-btn-outline:hover:not(:disabled) { border-color: var(--c-point); color: var(--c-point-deep); }
.ro-btn-dashed { width: 100%; border: 1px dashed var(--c-line); background: transparent; color: var(--c-muted); font-weight: 600; }   /* 목록 끝 「+ 추가」 */
.ro-btn-dashed:hover:not(:disabled) { border-color: var(--c-point); color: var(--c-point-deep); background: var(--c-point-tint); }

.ro-btn-ghost { background: var(--c-bg-soft); color: var(--c-text); }
.ro-btn-ghost:hover:not(:disabled) { background: var(--c-point-soft); color: var(--c-point-deep); }

.ro-btn-warn   { background: var(--c-warn);   color: #fff; }
.ro-btn-warn:hover:not(:disabled)   { filter: brightness(.92); }
.ro-btn-danger { background: var(--c-danger); color: #fff; }
.ro-btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.ro-btn-info   { background: var(--c-info);   color: #fff; }
.ro-btn-info:hover:not(:disabled)   { filter: brightness(.92); }

.ro-btn-xs { height: var(--h-ctrl-xs); padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.ro-btn-sm { height: var(--h-ctrl-sm); padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.ro-btn-lg { height: var(--h-ctrl-lg); padding: 0 24px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.ro-btn-block { width: 100%; }
.ro-btn-icon {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: var(--r-sm);
  color: var(--c-muted);
}
.ro-btn-icon:hover:not(:disabled) { background: var(--c-bg-soft); color: var(--c-point-deep); }


/* ═══════════ ⑪ ro-badge ═══════════ */
.ro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.5;
}
.ro-badge-success { background: var(--c-success-soft); color: var(--c-success); }
.ro-badge-info    { background: var(--c-info-soft);    color: var(--c-info-deep); }
.ro-badge-warn    { background: var(--c-warn-soft);    color: var(--c-warn-deep); }
.ro-badge-danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.ro-badge-gold    { background: var(--c-gold-soft);    color: var(--c-gold-deep); }
.ro-badge-purple  { background: var(--c-purple-soft);  color: var(--c-purple-deep); }
.ro-badge-point   { background: var(--c-point-soft);   color: var(--c-point-deep); }
.ro-badge-default { background: var(--c-bg-soft);      color: var(--c-text-soft); }


/* ═══════════ ⑫ ro-input / ro-select / ro-textarea (라인 디자인) ═══════════ */
.ro-input,
.ro-select,
.ro-textarea {
  padding: 0 var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-ctrl);
  color: var(--c-text);
  transition: border-color var(--tr-fast);
  width: 100%;
}
.ro-input,
.ro-select { height: var(--h-ctrl); }
.ro-textarea {
  padding: 10px var(--sp-3);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.6;
}
.ro-input::placeholder,
.ro-textarea::placeholder { color: var(--c-muted); }
.ro-input:focus,
.ro-select:focus,
.ro-textarea:focus {
  outline: none;
  border-color: var(--c-point);
}

.ro-select {
  padding-right: 32px;
  appearance: none;
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8285' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  font-weight: 600;
}

.ro-input-sm,
.ro-select-sm { height: var(--h-ctrl-sm); padding: 0 var(--sp-2); font-size: var(--fs-xs); padding-right: 28px; }
.ro-input-lg,
.ro-select-lg { height: var(--h-ctrl-lg); padding: 0 var(--sp-4); font-size: var(--fs-md); }
.ro-input-auto,
.ro-select-auto { width: auto; }
.roo-card-actions > .ro-select { width: auto; min-width: 140px; }

.ro-input-search {
  width: var(--w-search);
  max-width: 100%;
  flex: none;
  padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8285' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}

.ro-input.is-error,
.ro-select.is-error,
.ro-textarea.is-error { border-color: var(--c-danger); }


/* ═══════════ ⑬ ro-field (Form group) ═══════════ */
.ro-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ro-field-row { flex-direction: row; align-items: center; }

.roo-field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-soft);
}
.roo-field-label-required::after { content: ' *'; color: var(--c-danger); }

.roo-field-help { font-size: var(--fs-xs); color: var(--c-muted); }
/* 설정 칸 밑 작은 글씨 「설정 방법 보기」 — 누르면 설명서 팝업 (help-popup.js) */
.roo-help-link { display: inline; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--c-point-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.roo-help-link:hover { color: var(--c-text); }
.roo-help-body { font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text-soft); }
.roo-help-body > p { margin: 0 0 16px; }
.roo-help-steps { margin: 0; padding-left: 20px; display: grid; gap: 16px; }
.roo-help-steps b { color: var(--c-text); }
.roo-help-steps p { margin: 4px 0 0; }
.roo-field-error { font-size: var(--fs-xs); color: var(--c-danger); font-weight: 500; }


/* ═══════════ ⑭ ro-checkbox / ro-radio ═══════════ */
.ro-checkbox,
.ro-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
}
.ro-checkbox input,
.ro-radio input {
  width: 16px; height: 16px;
  accent-color: var(--c-point);
  cursor: pointer;
}


/* ═══════════ ⑮ ro-toggle ═══════════ */
.ro-toggle {
  position: relative;
  display: inline-block;
  width: 40px; height: 22px;
  cursor: pointer;
}
.ro-toggle input { opacity: 0; width: 0; height: 0; }
.roo-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--c-line);
  border-radius: var(--r-pill);
  transition: background var(--tr-fast);
}
.roo-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: var(--r-pill);
  transition: transform var(--tr-fast);
}
.ro-toggle input:checked + .roo-toggle-slider { background: var(--c-point); }
.ro-toggle input:checked + .roo-toggle-slider::before { transform: translateX(18px); }


/* ═══════════ ⑯ ro-tabs ═══════════ */
.ro-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;   /* 칩 사이 분류 글자(입금 · 발행)가 위로 붙지 않게 */
}
/* 칩 줄 안 분류 글자 — 앞 묶음과 떼어 둔다 */
.ro-tabs > .text-muted { margin: 0 2px 0 12px; }
/* 탭 = 알약 칩. 고른 칩은 진한 초록 채움. data-tone="warn|gold|purple|info|success|danger" 면 상태색 칩 */
.ro-tab {
  padding: 7px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-text-soft);
  font-size: var(--fs-ctrl);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--tr-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ro-tab:hover { border-color: var(--c-point); color: var(--c-point-deep); }
.ro-tab.is-active {
  background: var(--c-point-deep);
  border-color: var(--c-point-deep);
  color: #fff;
}
.roo-tab-count {
  font-size: var(--fs-2xs);
  opacity: .7;
  font-weight: 500;
}
.ro-tab.is-active .roo-tab-count { color: inherit; }
.ro-tabs .roo-tab-sep { width: 12px; }
.ro-tabs .roo-tab-br { flex-basis: 100%; height: 0; }
.ro-table .roo-w-ck { width: 44px; }   /* 칩 줄 바꿈 — 주문 단계 / 입금 · 발행 */
.ro-tab[data-tone] { border-color: transparent; }
.ro-tab[data-tone].is-active { box-shadow: inset 0 0 0 2px var(--c-point-deep); background: none; }
.ro-tab[data-tone="warn"]    { background: var(--c-warn-soft);    color: var(--c-warn-deep); }
.ro-tab[data-tone="gold"]    { background: var(--c-gold-soft);    color: var(--c-gold-deep); }
.ro-tab[data-tone="purple"]  { background: var(--c-purple-soft);  color: var(--c-purple-deep); }
.ro-tab[data-tone="info"]    { background: var(--c-info-soft);    color: var(--c-info-deep); }
.ro-tab[data-tone="success"] { background: var(--c-success-soft); color: var(--c-success); }
.ro-tab[data-tone="danger"]  { background: var(--c-danger-soft);  color: var(--c-danger); }
.ro-tab[data-tone="cost"]    { background: var(--c-cost-soft);    color: var(--c-cost); }
.ro-tab[data-tone="warn"].is-active    { background: var(--c-warn-soft); }
.ro-tab[data-tone="gold"].is-active    { background: var(--c-gold-soft); }
.ro-tab[data-tone="purple"].is-active  { background: var(--c-purple-soft); }
.ro-tab[data-tone="info"].is-active    { background: var(--c-info-soft); }
.ro-tab[data-tone="success"].is-active { background: var(--c-success-soft); }
.ro-tab[data-tone="danger"].is-active  { background: var(--c-danger-soft); }


/* 표 안 상품 칸: 사진 + 이름을 한 칸에 (별도 사진 열을 두지 않는다) */
.roo-prod-cell { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.roo-prod-cell > div { min-width: 0; }
.roo-prod-thumb {
  position: relative;
  width: var(--thumb, 44px); height: var(--thumb, 44px);
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.roo-prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.roo-prod-meta { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; }
.roo-prod-amt { margin-left: auto; font-weight: 600; font-feature-settings: 'tnum'; white-space: nowrap; }
.roo-prod-cell.is-lg { --thumb: 56px; align-items: center; font-size: var(--fs-base); }   /* 주문 박스 머리: 한 단계 크게 */
.roo-prod-cell.is-lg .roo-prod-amt { font-size: var(--fs-lg); font-weight: 800; }
button.roo-prod-cell { width: 100%; padding: 12px 8px; align-items: center; text-align: left; font-size: inherit; }   /* 줄 자체가 버튼 */
button.roo-prod-cell:hover { background: var(--c-point-soft); }
.roo-prod-thumb > i { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--c-point-deep); color: #fff; font-style: normal; font-size: var(--fs-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }   /* 담긴 개수 */
/* 이름 첫 글자 동그라미 (직원 · 고객) */
.roo-avatar { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--c-point-soft); color: var(--c-point-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
/* 표 안 막대 */
.ro-meter { width: 120px; height: 8px; vertical-align: middle; }
.ro-meter::-webkit-meter-bar { background: var(--c-bg-soft); border: 0; border-radius: 4px; }
.ro-meter::-webkit-meter-optimum-value { background: var(--c-point); border-radius: 4px; }
.ro-meter::-moz-meter-bar { background: var(--c-point); border-radius: 4px; }
/* 줄 목록: 줄 사이 옅은 선 하나 (새 주문 요약, 상품 창) */
.roo-lines > * { padding: 12px 0; }
.roo-lines > * + * { border-top: 1px solid var(--c-line-soft); }
/* 합계 줄 */
.roo-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-4); border-top: 2px solid var(--c-text); }
.roo-total b { font-size: var(--fs-xl); font-feature-settings: 'tnum'; }

/* ═══════════ ⑰ ro-table — 노션 격자 (주문 화면과 같은 틀) ═══════════ */
/* 표를 바로 감싼 카드는 틀(테두리·배경)을 벗고, 머리는 표 위의 제목 줄이 된다 */
.ro-card:has(> .ro-table-wrap) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.ro-card:has(> .ro-table-wrap) > .roo-card-head { padding: 0 2px 10px; align-items: baseline; }
.ro-card:has(> .ro-table-wrap) > .roo-card-head .roo-card-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
.ro-card:has(> .ro-table-wrap) > .roo-card-head .roo-card-sub,
.ro-card:has(> .ro-table-wrap) > .roo-card-head .roo-card-subtitle { font-size: var(--fs-xs); }
.ro-card:has(> .ro-table-wrap) > .roo-card-foot { border-top: 0; padding: 12px 2px 0; }
/* 입력 칸 박스도 같다 — 박스의 대표 제목 · 설명은 박스 밖(위)에 두고, 박스에는 내용과 저장 줄만 (대표 2026-10-09 「제목은 박스 밖에」).
   머리 + 본문으로 된 카드만 해당. :where 로 무게를 낮춰, 화면마다 따로 잡은 카드(로그인 등)는 그대로 둔다 */
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-head { padding: 0 2px 10px; align-items: baseline; }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-head .roo-card-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-head .roo-card-sub,
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-head .roo-card-subtitle { font-size: var(--fs-xs); }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-body { padding: var(--pad-card); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-body:has(+ .roo-card-foot) { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* 주문 줄 박스(대시보드의 「바로 처리할 주문」 등)도 제목은 밖에 */
.ro-card.roo-ord:where(:has(> .roo-card-head)) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.ro-card.roo-ord:where(:has(> .roo-card-head)) > .roo-card-head { padding: 0 2px 10px; align-items: baseline; }
.ro-card.roo-ord:where(:has(> .roo-card-head)) > .roo-card-head .roo-card-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
.ro-card.roo-ord:where(:has(> .roo-card-head)) > .roo-card-head .roo-card-sub { font-size: var(--fs-xs); }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body)) > .roo-card-foot { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0 0 var(--r-xl) var(--r-xl); }
/* 박스 안에 또 박스 금지 (대표 2026-10-09): 내용이 이미 테두리 있는 입력 표(.roo-kvf)면 바깥 박스의 틀을 벗긴다 — 입력 표가 곧 박스. 저장 줄은 표 박스처럼 그 아래에 */
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body > :is(.roo-kvf, .roo-items))) > .roo-card-body { padding: 0; background: transparent; border: 0; border-radius: 0; }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body > :is(.roo-kvf, .roo-items))) > .roo-card-foot { background: transparent; border: 0; border-radius: 0; padding: 12px 2px 0; }
.ro-card:where(:has(> .roo-card-head):has(> .roo-card-body > :is(.roo-kvf, .roo-items))) > .roo-card-body > :not(.roo-kvf, .roo-items) { margin-left: 2px; margin-right: 2px; }
.ro-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.ro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.ro-table thead th {
  text-align: left;
  padding: 13px 16px;
  color: var(--c-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line-soft);
  white-space: nowrap;
  background: var(--c-bg-soft);
}
.ro-table thead th.roo-table-num    { text-align: right; }
.ro-table thead th.roo-table-center { text-align: center; }
.ro-table tbody td {
  padding: 16px;
  line-height: var(--lh-base);
  border-bottom: 1px solid var(--c-line-soft);
  border-right: 1px solid var(--c-line-soft);
  vertical-align: top;
}
.ro-table thead th:last-child, .ro-table tbody td:last-child { border-right: 0; }
.ro-table tbody td.roo-table-num    { text-align: right; font-feature-settings: 'tnum'; }
.ro-table tbody td.roo-table-center { text-align: center; }
/* 가운데 칸(배지·버튼 묶음)은 줄바꿈 없이 한 줄로 */
.ro-table tbody td.roo-table-center { white-space: nowrap; }
.ro-table tbody td.roo-table-center > .ro-btn + .ro-btn { margin-left: 4px; }
.ro-table tbody tr            { transition: background var(--tr-fast); }
.ro-table tbody tr:hover td { background: var(--c-cream); }
.ro-table tbody tr:last-child td { border-bottom: none; }


/* ═══════════ ⑱ ro-modal ═══════════ */
.ro-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.ro-modal-bg.is-open { display: flex; }
/* 닫을 수 없는 창 (첫 로그인 비밀번호 바꾸기) — 뒤 화면을 가리고 가운데에 띄운다 */
.roo-force-bg { position: fixed; inset: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(42, 38, 40, .6); }
.roo-force-bg:has(> .roo-login-wrap) { align-items: flex-start; overflow-y: auto; }   /* 로그인 틀(첫 로그인 · 약관 동의): 화면보다 길면 스크롤 */
.roo-force-bg > .roo-login-wrap { max-width: 520px; margin: auto; padding: clamp(28px, 4vw, 44px); background: #fff; border-radius: var(--r-2xl); box-shadow: 0 16px 50px rgba(120, 80, 40, 0.18); }   /* 첫 로그인 창 바탕은 흰색 (대표 10/8) */
.roo-force-bg .roo-auth-foot { margin-top: var(--sp-6); padding-top: 0; border-top: 0; }   /* 첫 로그인 창의 로그아웃: 색 없는 글자, 버튼에서 더 떨어뜨린다 (대표 10/8) */
.roo-force-bg .roo-auth-foot a { color: var(--c-muted); font-weight: 400; }
.roo-login-wrap .ro-field > .ro-textarea[readonly] { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-soft); background: var(--c-bg-soft); }   /* 약관 글: 체크 아래에 조금 보인다 */
/* 플로가 맞아 주는 첫 화면 머리: 위에 동동 뜬 플로 얼굴과 작은 꽃, 아래에 큰 인사말 (대표 10/8) */
.roo-hello { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
.roo-hello-face { position: relative; width: 124px; height: 124px; margin: 8px 0 20px; animation: roo-bob 3.2s ease-in-out infinite; }
.roo-hello-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 28px rgba(90, 141, 78, .22); }
.roo-hello-face::before { content: ''; position: absolute; inset: -14px -34px; pointer-events: none; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f6b8c4'%3E%3Ccircle cx='20' cy='9' r='8'/%3E%3Ccircle cx='30.5' cy='16.6' r='8'/%3E%3Ccircle cx='26.5' cy='29' r='8'/%3E%3Ccircle cx='13.5' cy='29' r='8'/%3E%3Ccircle cx='9.5' cy='16.6' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23f5d76e'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fde9a8'%3E%3Ccircle cx='20' cy='9' r='8'/%3E%3Ccircle cx='30.5' cy='16.6' r='8'/%3E%3Ccircle cx='26.5' cy='29' r='8'/%3E%3Ccircle cx='13.5' cy='29' r='8'/%3E%3Ccircle cx='9.5' cy='16.6' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23f2b84b'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f6b8c4'%3E%3Ccircle cx='20' cy='9' r='8'/%3E%3Ccircle cx='30.5' cy='16.6' r='8'/%3E%3Ccircle cx='26.5' cy='29' r='8'/%3E%3Ccircle cx='13.5' cy='29' r='8'/%3E%3Ccircle cx='9.5' cy='16.6' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23f5d76e'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 34C6 16 18 6 34 6C34 22 24 34 6 34Z' fill='%239cc58a'/%3E%3C/svg%3E");
  background-size: 34px, 24px, 18px, 20px; background-position: left 0 top 18px, right 2px bottom 14px, right 14px top 0, left 16px bottom 0; }
@keyframes roo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .roo-hello-face { animation: none; } }
.roo-hello strong { display: block; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--c-text); word-break: keep-all; }
.roo-hello span { display: block; margin-top: 10px; font-size: var(--fs-md); color: var(--c-muted); word-break: keep-all; }
@media (max-width: 480px) { .roo-hello strong { font-size: 27px; } }
.roo-hello-note { padding: 14px 16px; border-radius: var(--r-md); background: var(--c-point-soft); color: var(--c-point-deep); font-size: var(--fs-sm); line-height: 1.6; word-break: keep-all; }   /* 첫 로그인 안내 한 줄 (알림 표시 허용) */
/* 약관 동의 묶음: 전체 동의 + 약관마다 체크와 「보기」 */
.roo-agree { display: flex; flex-direction: column; gap: 0; margin: 6px 0 14px; }   /* 묶음 상자 없이 줄만 (대표 10/8: 다 박스라 답답, 간격도 좁게) */
.roo-agree-all { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--c-line-soft); font-weight: 700; }
.roo-agree-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 4px; }
.roo-agree-see { flex-shrink: 0; border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-xs); color: var(--c-muted); text-decoration: underline; cursor: pointer; }
/* 약관 글 상자: 「내용 보기」를 누르면 아래로 펼쳐지고 다시 누르면 닫힌다 */
.roo-agree-fold { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .25s ease, margin-top .25s ease; }
.roo-agree-fold.is-open { grid-template-rows: 1fr; margin-top: 6px; }
.roo-agree-fold > div { min-height: 0; overflow: hidden; }
.roo-agree-fold .ro-textarea { display: block; width: 100%; margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); background: var(--c-bg-soft); }
.roo-agree .ro-checkbox { font-size: var(--fs-sm); line-height: 22px; }   /* 약관 낱개 줄: 작게 · 촘촘하게 */
.roo-agree .roo-agree-all { font-size: var(--fs-md); line-height: 24px; }   /* 전체 동의만 크게 */
.ro-modal {
  background: var(--c-bg);
  border-radius: var(--r-2xl);
  width: 100%;
  max-width: var(--w-modal);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
}
.ro-modal-sm { max-width: var(--w-modal-sm); }
.ro-modal-lg { max-width: var(--w-modal-lg); }
.roo-modal-head {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.roo-modal-title {
  font-size: var(--fs-lg);
  font-weight: 800;
}
.roo-modal-close {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  font-size: 20px;
}
.roo-modal-close:hover { background: var(--c-bg-soft); color: var(--c-text); }
.roo-modal-close svg { width: 18px; height: 18px; }
.roo-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.roo-modal-foot {
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  border-top: 1px solid var(--c-line);
}

/* 사진 올리기 칸 (상품, 카테고리, 배송완료 사진 공용) */
.roo-img-uploader { border: 2px dashed var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; cursor: pointer; transition: all var(--tr-fast); background: var(--c-bg-soft); position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.roo-img-uploader:hover { border-color: var(--c-point); background: var(--c-point-tint); }
.roo-img-uploader.is-dragover { border-color: var(--c-point); background: var(--c-point-soft); }
.roo-img-uploader input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.roo-img-uploader svg { margin: 0 auto 6px; }
.roo-img-uploader em { display: block; font-size: 28px; font-style: normal; opacity: .5; margin-bottom: 6px; }
.roo-img-uploader p { margin: 0; }   /* 사진 자리 가운데 아이콘 (image-picker.js) */
.roo-img-preview { position: relative; display: inline-block; }
.roo-img-preview img { max-width: 200px; max-height: 200px; border-radius: var(--r-md); border: 1px solid var(--c-line); display: block; }
.roo-img-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--c-text); color: #fff; border: 2px solid var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); cursor: pointer; }

/* ═══════════ ⑱-2 상세 팝업 틀 (2026-09-11 확정: 주문 상세부터) ═══════════
   위: 제목 + 닫기 → 진행 단계(단계마다 처리 일시) → 밑줄 탭 → 칸 나눈 표 → 아래 버튼.
   보기 모드가 기본이고, 수정 모드(.is-edit)에서는 값 칸이 곧 입력칸이 된다 (안쪽 네모 없음). */
.roo-pop > .roo-modal-head { border-bottom: 0; padding: 20px 20px 4px 28px; }
.roo-pop > .roo-modal-head .roo-modal-title { font-size: var(--fs-xl); font-weight: 700; font-feature-settings: 'tnum'; }
.roo-pop > .roo-modal-body { padding: 16px 28px 28px; }
.roo-pop > .roo-modal-foot { padding: 14px 28px; align-items: center; }
/* 주문 상세처럼 단계와 탭이 있는 큰 팝업 */
/* 목록에서 줄을 눌러 여는 큰 상세는 가운데 팝업이 아니라 오른쪽에서 밀려 나오는 옆 패널 (대표 10/8).
   · 화면 높이 전체 + 화면 폭의 70%. 왼쪽에 목록이 남아 어디서 열었는지 보인다
   · 닫기는 바깥(어두운 자리) 누르기 · ✕ · Esc (admin-chrome.js)
   · 좁은 화면(모바일)은 가로 전체를 채우고 오른쪽 위 ✕ 로 닫는다 */
/* 열릴 때도 닫힐 때도 밀려서 움직인다 (대표 10/8 「닫힐 때 뚝 사라짐」).
   닫는 코드는 화면마다 is-open 만 떼므로, 움직임은 CSS 가 맡는다: 사라지는 것(display)을 움직임이 끝난 뒤로 미룬다 (allow-discrete) */
.ro-modal-bg:has(> .roo-pop-xl) { justify-content: flex-end; align-items: stretch; padding: 0; background: rgba(42, 38, 40, .22); opacity: 0; transition: opacity .24s ease, display .24s allow-discrete; }
.ro-modal-bg.is-open:has(> .roo-pop-xl) { opacity: 1; }
/* 닫히는 동안(그리고 혹시 움직임이 멈춰도) 뒤 화면을 가로막지 않게 */
.ro-modal-bg:has(> .roo-pop-xl):not(.is-open) { pointer-events: none; }
.ro-modal-bg:has(> .roo-pop-xl) > .roo-pop-xl { transform: translateX(100%); transition: transform .24s ease; }
.ro-modal-bg.is-open:has(> .roo-pop-xl) > .roo-pop-xl { transform: none; }
@starting-style {
  .ro-modal-bg.is-open:has(> .roo-pop-xl) { opacity: 0; }
  .ro-modal-bg.is-open:has(> .roo-pop-xl) > .roo-pop-xl { transform: translateX(100%); }
}
/* 폭은 화면의 70% (대표 10/8). 화면이 작은 노트북에서는 너무 좁아지지 않게 960 까지는 지킨다 */
.roo-pop-xl { width: max(70vw, min(960px, calc(100vw - 72px))); max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: var(--r-2xl) 0 0 var(--r-2xl); box-shadow: -12px 0 40px rgba(42, 38, 40, .16); }
@media (prefers-reduced-motion: reduce) { .ro-modal-bg:has(> .roo-pop-xl), .ro-modal-bg:has(> .roo-pop-xl) > .roo-pop-xl { transition: none; } }
@media (max-width: 768px) { .roo-pop-xl { width: 100vw; border-radius: 0; } }
.roo-pop-xl > .roo-modal-head { padding-bottom: 0; }
.roo-pop-xl > .roo-modal-body { padding-top: 24px; }
.roo-pop-note { margin-right: auto; font-size: var(--fs-sm); color: var(--c-muted); }
.roo-pop [hidden] { display: none !important; }

/* ── 상세 팝업 맨 위 명함 (파트너·고객 공용) ──
   그림 자리 + 이름(옆에 등급) + 자주 보는 정보 몇 줄. 밑에 밑줄 탭(.roo-subtabs)이 붙는다.
   만드는 코드는 admin-chrome.js 의 setDetailHead() 한 곳에만 둔다 */
.roo-detail-head { display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.roo-detail-logo {
  width: 64px; height: 64px; flex: none; border-radius: var(--r-lg);
  background: var(--c-bg-soft); color: var(--c-text-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; overflow: hidden;
}
.roo-detail-logo img { width: 100%; height: 100%; object-fit: cover; }
.roo-detail-id { flex: 1; min-width: 0; }
.roo-detail-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; }
/* 명함의 정보칸 — 한 칸 = 이름표(위) + 값(아래).
   칸을 줄로 나눠 붙어 읽히지 않게 한다: 칸 사이 가로 32 / 세로 16, 이름표와 값 사이는 4 */
.roo-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-8);
  margin: var(--sp-5) 0 0;
}
.roo-detail-facts > div { display: grid; gap: 4px; min-width: 0; }
.roo-detail-facts dt { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.3; }
.roo-detail-facts dd { margin: 0; font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .roo-detail-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 명함이 제목 자리를 대신하므로 그 위 빈 여백을 두지 않는다 */
.roo-pop > .roo-detail-head + .roo-subtabs { margin: 0 var(--sp-6); padding: 0; }
/* 팝업은 세로 flex — 내용이 길 때 머리(명함)·탭·바닥이 눌리지 않게 한다 */
.ro-modal > .roo-modal-head, .ro-modal > .roo-detail-head, .ro-modal > .roo-subtabs,
.ro-modal > .roo-steps, .ro-modal > .roo-modal-foot { flex: none; }
.ro-modal > .roo-modal-body { flex: 1 1 auto; min-height: 0; }
.roo-pop > .roo-detail-head ~ .roo-modal-body { padding-top: var(--sp-6); }
@media (max-width: 560px) {
  .roo-detail-head { gap: var(--sp-4); }
  .roo-detail-logo { width: 48px; height: 48px; font-size: var(--fs-base); }
  .roo-detail-name { font-size: var(--fs-lg); }
}

/* 진행 단계: 지난 단계 초록 체크, 지금 단계 진한 초록 고리, 남은 단계 빈 동그라미 */
.roo-steps { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 18px 28px 20px; }
.roo-step { position: relative; text-align: center; }
.roo-step::after { content: ''; position: absolute; top: 10px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: var(--c-line); }
.roo-step:last-child::after { display: none; }
.roo-step.is-done::after { background: var(--c-point); }
/* 입금 · 발행 점은 주문 단계가 아니다 — 앞 점과 선으로 잇지 않고 간격만 둔다 (대표 9/28) */
.roo-step:has(+ .roo-step.is-apart)::after, .roo-step.is-apart::after { display: none; }
.roo-step.is-apart { margin: 0 18px; }
.roo-step.is-apart:not(.is-done) .roo-step-dot { box-shadow: inset 0 0 0 2px var(--c-line); }
.roo-step-dot { width: 22px; height: 22px; margin: 0 auto 8px; border-radius: 50%; background: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c-line); display: flex; align-items: center; justify-content: center; }
.roo-step-dot svg { width: 12px; height: 12px; }
.roo-step.is-done .roo-step-dot { background: var(--c-point); box-shadow: none; }
.roo-step.is-now .roo-step-dot { box-shadow: inset 0 0 0 7px var(--c-point-deep); }
.roo-step-name { font-size: var(--fs-sm); color: var(--c-muted); }
.roo-step-time { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 2px; min-height: 16px; font-feature-settings: 'tnum'; }
.roo-step.is-done .roo-step-name { color: var(--c-text); }
.roo-step.is-done .roo-step-time { color: var(--c-text-soft); }
.roo-step.is-now .roo-step-name, .roo-step.is-now .roo-step-time { color: var(--c-point-deep); }
.roo-step.is-now .roo-step-name { font-weight: 700; }

/* 밑줄 탭 */
.roo-ptabs { display: flex; padding: 0 28px; border-bottom: 1px solid var(--c-line); }
.roo-ptab { font: inherit; font-size: var(--fs-base); border: 0; background: transparent; color: var(--c-muted); padding: 12px 4px; margin-right: 22px; border-bottom: 2px solid transparent; cursor: pointer; }
.roo-ptab:hover { color: var(--c-text); }
.roo-ptab:focus { outline: none; }
.roo-ptab.is-on { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-text); }
.roo-ppane { display: none; flex-direction: column; gap: 26px; }
.roo-ppane.is-on { display: flex; }
.roo-sec-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-md); font-weight: 600; margin: 0 2px 10px; }

/* 칸 나눈 표: 목록 표(.ro-table)와 같은 선과 바탕 */
.roo-kv { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.roo-kv col.k { width: 120px; }
.roo-kv col.w-act { width: 120px; }
.roo-kv col.w-when { width: 130px; }
.roo-kv col.w-who { width: 160px; }
.roo-kv col.w-what { width: 130px; }
.roo-kv th { text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); background: var(--c-bg-soft); padding: 13px 16px; line-height: 24px; vertical-align: top; border-bottom: 1px solid var(--c-line-soft); border-right: 1px solid var(--c-line-soft); white-space: nowrap; }
.roo-kv td { padding: 0; border-bottom: 1px solid var(--c-line-soft); border-right: 1px solid var(--c-line-soft); font-size: var(--fs-base); color: var(--c-text); vertical-align: top; }
.roo-kv tr > :last-child { border-right: 0; }
.roo-kv tr:last-child > * { border-bottom: 0; }
.roo-kv-v { display: block; padding: 13px 16px; line-height: 24px; overflow-wrap: anywhere; font-feature-settings: 'tnum'; }
.roo-kv-v.is-empty { color: var(--c-muted); }
.roo-kv-v.is-pre { white-space: pre-line; }

/* 값 칸 = 입력칸. 보기 모드에선 글자처럼, 수정 모드에서 누른 칸만 바탕이 옅은 회색 */
.roo-cell { display: block; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 13px 16px; line-height: 24px; cursor: default; resize: none; font-feature-settings: 'tnum'; }
.roo-cell:disabled { opacity: 1; color: inherit; -webkit-text-fill-color: currentColor; }
.roo-cell::placeholder { color: var(--c-muted); }
select.roo-cell { appearance: none; -webkit-appearance: none; }
textarea.roo-cell { min-height: 76px; }
/* 칸 셀렉트의 펼침 목록 (roo-select.js) — 누른 칸이 그대로 아래로 늘어난 모양: 칸과 같은 폭, 칸 바로 아래에 붙고 위 테두리 · 위 모서리가 없다 */
.roo-selmenu { position: fixed; z-index: var(--z-toast); display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 12px 24px rgba(42, 38, 40, .10); overflow: hidden; }
.roo-selmenu.is-up { border-top: 1px solid var(--c-line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: 0 -12px 24px rgba(42, 38, 40, .10); }
.roo-sellist { overflow-y: auto; min-height: 0; padding: 4px 0; }
.roo-selopt { padding: 10px 16px; line-height: 24px; font-size: var(--fs-base); color: var(--c-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roo-selopt.is-at { background: var(--c-bg-soft); }
.roo-selopt.is-on { color: var(--c-point-deep); font-weight: 600; }
.roo-selopt.is-off { color: var(--c-muted); cursor: default; }
.roo-selfind { flex: none; border: 0; outline: 0; padding: 12px 16px; font: inherit; font-size: var(--fs-base); color: var(--c-text); background: var(--c-bg-soft); }
.roo-kv td.is-selopen, .ro-table tbody td.is-selopen { background: var(--c-line-soft); }
.roo-cell-row { display: flex; align-items: center; }
.roo-cell-row .roo-cell { width: auto; flex: 1; min-width: 0; }
.roo-cell-row .roo-cell.is-time { flex: 0 0 72px; padding-right: 0; }
.roo-cell-row select.roo-cell { flex: 1; padding-left: 6px; }
.roo-cell-row > .roo-agency { margin-left: 16px; flex-shrink: 0; }
.roo-cell-row > .roo-agency + select.roo-cell { padding-left: 8px; }
.roo-kv .roo-cell-row > .ro-btn, .roo-kv .roo-cell-row > .roo-modal-close { margin: 8px; flex-shrink: 0; }
.roo-kv td > .roo-cell-row + .roo-cell-row { border-top: 1px solid var(--c-line-soft); }
.roo-cell-row .roo-cell[type="time"] { flex-basis: 150px; }   /* 시각은 적어도 되고 골라도 된다 */
.ro-card:has(.roo-drop) { overflow: visible; }   /* 찾기 목록이 카드 밖으로 펼쳐지게 */
/* 찾기 목록 (칸 아래로 펼쳐짐) */
*:has(> .roo-drop) { position: relative; }
.roo-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-md); z-index: 20; max-height: 280px; overflow-y: auto; }
.roo-drop > * { padding: 10px 14px; }
.roo-drop > [data-pick] { cursor: pointer; }
.roo-drop > [data-pick]:hover { background: var(--c-bg-soft); }
.roo-drop em { font-style: normal; font-size: var(--fs-xs); color: var(--c-muted); margin-left: 6px; }
.roo-drop small, .roo-drop > :not([data-pick]) { display: block; font-size: var(--fs-sm); color: var(--c-muted); }
.roo-pop:not(.is-edit) .roo-cell.is-time.is-blank { display: none; }
.roo-pop:not(.is-edit) .roo-cell.is-time.is-blank + select.roo-cell { padding-left: 16px; }
.is-edit .roo-kv td.is-ed { cursor: text; }
.is-edit .roo-kv td.is-ed .roo-cell { cursor: text; }
.is-edit .roo-kv td.is-ed select.roo-cell { cursor: pointer; }
/* 고칠 수 있는 셀렉트 칸은 오른쪽에 내려가는 화살표 (공용 .ro-select 와 같은 그림, 대표 9/28) */
.is-edit .roo-kv td.is-ed select.roo-cell:not(:disabled) {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8285' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.is-edit .roo-kv td.is-ed:hover { background: var(--c-bg-soft); }
.is-edit .roo-kv td.is-ed:focus-within { background: var(--c-line-soft); }
.is-edit .roo-kv td.is-lock { color: var(--c-muted); }

.roo-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ro-table .roo-w-alert-when { width: 30%; }   /* 웹 · 앱 알림 설정의 「상황」 칸 */
.ro-table .roo-w-manage { width: 124px; }   /* 관리 칸 = 표 칸 셀렉트 하나 */
.ro-table .roo-w-cat { width: 180px; }
.ro-table .roo-w-price { width: 164px; min-width: 164px; }   /* 가격 칸은 모두 같은 폭 (대표 10/8: 좁고 칸마다 달랐다). 가장 긴 머리글 「꽃집 발주가(월평균)」 이 한 줄에 들어가는 폭 */
/* ── 다른 화면 위에 주문 상세만 겹쳐 띄우기 (알림 → 주문 상세, 대표 10/9). 바깥: .roo-peek, 안쪽 화면: html.is-embed (창과 알림 글만 보인다) ── */
.roo-peek { position: fixed; inset: 0; z-index: var(--z-toast); background: rgba(42, 38, 40, .22); }
.roo-peek > .ro-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.roo-peek > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
html.is-embed, html.is-embed body { background: transparent; }
html.is-embed body { visibility: hidden; }
html.is-embed .ro-modal-bg, html.is-embed .ro-toast-stack { visibility: visible; }
html.is-embed .ro-modal-bg.is-open { background: transparent; }
/* ── 항목 목록 (item-list.js) — 항목을 추가하고 고치고 지우는 자리의 공용 UI (대표 10/10 A안). 한 줄 = 항목 하나, 오른쪽 끝에 연필 · × ── */
.roo-items { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); overflow: hidden; }
.roo-items-row { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: 0; border-bottom: 1px solid var(--c-line-soft); background: none; font: inherit; color: inherit; text-align: left; }
.roo-items-row:last-child { border-bottom: 0; }
.roo-items-main { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.roo-items-main b { font-weight: 600; }
.roo-items-sub { font-size: var(--fs-sm); color: var(--c-muted); white-space: pre-line; }
/* 입력 표(.roo-kvf)의 칸 안에 놓인 항목 목록은 테두리를 벗는다 (박스 안 박스 금지) */
.roo-kvf .roo-items { border: 0; border-radius: 0; background: none; }
.roo-kvf .roo-items .roo-items-row:not(.is-edit) { padding-left: 0; }
.roo-items-row > .ro-toggle, .roo-items-row > .ro-btn { flex: none; }
.roo-items-row.is-child { padding-left: var(--sp-10); }
.roo-items-thumb { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; background: var(--c-bg-soft); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); }
.roo-items-row > .ro-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); }
.roo-items-tgname { font-size: var(--fs-xs); color: var(--c-muted); }
a.roo-items-ic { text-decoration: none; }
.roo-items-row.is-pick { cursor: pointer; }
.roo-items-row.is-pick:hover { background: var(--c-point-wash); }
.roo-items-ic:disabled { opacity: .35; cursor: default; background: none; }
.roo-items-main .ro-badge { vertical-align: 1px; }
.roo-items-ic { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-muted); cursor: pointer; }
.roo-items-ic:hover { background: var(--c-bg-soft); color: var(--c-text); }
.roo-items-ic svg, .roo-items-row.is-add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.roo-items-row.is-add { padding-left: var(--sp-4); color: var(--c-point-deep); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
.roo-items-row.is-add:hover { background: var(--c-point-wash); }
.roo-items-row.is-edit { display: block; padding: var(--sp-4); background: var(--c-bg-soft); }
.roo-items-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.roo-items-grid > .is-wide { grid-column: 1 / -1; }
.roo-items-acts { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
@media (max-width: 560px) { .roo-items-grid { grid-template-columns: minmax(0, 1fr); } }
.ro-table[data-cols="log"] th, .ro-table[data-cols="log"] td { white-space: nowrap; }   /* 기록 표(발송 기록): 짧은 칸은 한 줄로 두고 마지막 「내용」 칸만 줄을 바꾼다 (대표 10/9: 칸이 좁아 글자가 세로로 쌓였다) */
.ro-table[data-cols="log"] td:last-child { width: 100%; white-space: normal; word-break: break-all; color: var(--c-text-soft); }
.ro-table[data-cols="many"] .roo-w-price { width: 128px; min-width: 128px; }   /* 가격 칸이 넷 이상이고 머리글이 짧은 표(쇼핑몰 상품): 가격 칸을 줄여 상품명 · 카테고리에 자리를 준다 (대표 10/8: 상품명이 줄바꿈됨) */
.roo-prod-name { flex: 1; min-width: 0; }
.roo-prod-name .roo-cell { padding: 0; font-weight: 700; }
.roo-prod-name .roo-cell:hover { background: var(--c-bg-soft); }
.roo-prod-name .roo-cell:focus { background: var(--c-line-soft); }
/* 사진 칸: 누르면 바꾸기 */
button.roo-prod-thumb { padding: 0; border: 0; cursor: pointer; position: relative; }
.roo-prod-pick:hover { box-shadow: inset 0 0 0 2px var(--c-point); }
.roo-prod-pick .roo-prod-add { font-size: var(--fs-2xs); color: var(--c-muted); }
.roo-prod-pick.is-busy { opacity: .5; pointer-events: none; }

/* 목록 표에서 바로 고치는 칸 (상품 목록 가격, 이름, 카테고리) */
.ro-table tbody td.is-ed { padding: 0; }
.ro-table tbody td.is-ed .roo-cell { padding: 16px; cursor: text; text-align: right; }
.ro-table tbody td.is-ed select.roo-cell { text-align: left; cursor: pointer; padding-right: 34px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8285' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.ro-table tbody tr:hover td.is-ed:hover { background: var(--c-bg-soft); }
.ro-table tbody td.is-ed:focus-within { background: var(--c-line-soft) !important; }
.ro-table tbody td.is-ed.is-saved { background: var(--c-point-tint) !important; transition: background .3s; }

/* 상세 표 안 상품 / 복사 / 사진 */
.roo-kv-prod { display: flex; gap: 14px; align-items: center; padding: 12px 16px; }
.roo-kv-prod img, .roo-kv-prod i { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--c-bg-soft); object-fit: cover; flex-shrink: 0; }
.roo-kv-prod small { display: block; color: var(--c-muted); font-size: var(--fs-sm); }
.roo-copy { font: inherit; font-size: var(--fs-2xs); color: var(--c-text-soft); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 6px; padding: 3px 9px; margin-right: 14px; flex-shrink: 0; cursor: pointer; }
.roo-copy:hover { background: var(--c-bg-soft); }
.is-edit .roo-copy { display: none; }
.roo-kv-photos { display: flex; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.roo-kv-photos a { display: block; width: 92px; height: 116px; border-radius: 8px; background: var(--c-bg-soft); overflow: hidden; color: var(--c-text-soft); font-size: var(--fs-xs); text-align: center; line-height: 116px; }
.roo-kv-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 입력 팝업: 칸 나눈 표에 바로 입력 (주문 상세 수정 모드와 같은 모양).
   .ro-field(라벨 + 입력) 를 그대로 두고, 감싼 곳(form 등)에 .roo-kvf 만 붙이면 표가 된다 */
/* 두 칸짜리 줄이 있는 입력 팝업은 넓게 */
.roo-pop:has(.roo-kvf .ro-form-2), .roo-pop:has(.roo-kvf .ro-row) { max-width: var(--w-modal-lg); }
/* 넓은 팝업(주문 표가 들어가는 상세)은 위 규칙보다 우선 */
.roo-pop-xl:has(.roo-kvf .ro-form-2), .roo-pop-xl:has(.roo-kvf .ro-row) { max-width: var(--w-modal-xl); }
/* 계산서 미리보기 — 홈택스 전자(세금)계산서 양식 그대로 (대표 10/2). 표 여러 장을 위아래로 붙여 한 장처럼 */
.roo-taxdoc { font-size: var(--fs-sm); color: var(--c-text); }
.roo-taxdoc table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.roo-taxdoc table + table { margin-top: -1px; }
.roo-taxdoc th, .roo-taxdoc td { border: 1px solid var(--c-text-soft); padding: 6px 10px; height: var(--h-taxdoc-row); vertical-align: middle; overflow-wrap: anywhere; line-height: 1.4; }
.roo-taxdoc th { font-weight: 600; text-align: center; background: var(--c-bg-soft); color: var(--c-text-soft); }
.roo-taxdoc td { font-feature-settings: 'tnum'; }
.roo-taxdoc td.r { text-align: right; }
.roo-taxdoc td.c { text-align: center; }
.roo-taxdoc .is-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: .3em; text-align: center; height: 64px; }
.roo-taxdoc .is-muted { color: var(--c-muted); }
.roo-taxdoc .is-sup { border-color: var(--c-taxdoc-sup); }
.roo-taxdoc th.is-sup { color: var(--c-taxdoc-sup); background: var(--c-taxdoc-sup-soft); }
.roo-taxdoc .is-buy { border-color: var(--c-taxdoc-buy); }
.roo-taxdoc th.is-buy { color: var(--c-taxdoc-buy); background: var(--c-taxdoc-buy-soft); }
.roo-taxdoc th.is-v { line-height: 1.6; padding: 6px 0; }
.roo-taxdoc col.is-v { width: var(--w-taxdoc-v); }
.roo-taxdoc col.is-k { width: var(--w-taxdoc-k); }
.roo-taxdoc col.is-d { width: var(--w-taxdoc-d); }
.roo-taxdoc col.is-m { width: var(--w-taxdoc-m); }
.roo-kvf { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); }
.roo-kvf + .roo-kvf { margin-top: 20px; }
.roo-kvf .ro-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0; align-items: stretch; border-bottom: 1px solid var(--c-line-soft); margin-bottom: -1px; }
.roo-kvf .ro-field > .roo-field-label { grid-column: 1; grid-row: 1 / span 8; margin: 0; padding: 13px 16px; line-height: 24px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); background: var(--c-bg-soft); border-right: 1px solid var(--c-line-soft); }
.roo-kvf .ro-field > :not(.roo-field-label):not(.ro-badge) { grid-column: 2; min-width: 0; padding: 13px 16px; line-height: 24px; }
.roo-kvf .ro-field > label:not(.roo-field-label) { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.roo-kvf .ro-field > .ro-badge { grid-column: 2; justify-self: start; align-self: center; margin: 13px 16px; }
.roo-kvf .ro-field:not(:has(> .roo-field-label)) > * { grid-column: 1 / -1; }
.roo-kvf .ro-field > .roo-field-help, .roo-kvf .ro-field > .roo-field-error, .roo-kvf .ro-field > .text-xs { padding: 0 16px 12px; margin-top: -8px; line-height: 1.5; font-size: var(--fs-xs); }
.roo-kvf .ro-field > .roo-img-uploader { margin: 12px 16px; }
.roo-kvf .ro-field > .ro-input, .roo-kvf .ro-field > .ro-select, .roo-kvf .ro-field > .ro-textarea,
/* 화면 바탕(회색) 위에 바로 놓인 입력 표: 이름표 칸이 바탕과 같은 회색이라 구분이 안 됐다 (대표 10/9) → 흰 바탕 + 세로 선으로 구분. 창(흰 바탕) 안의 입력 표는 회색 그대로 */
.roo-card-body > .roo-kvf .ro-field > .roo-field-label { background: var(--c-bg); border-right: 1px solid var(--c-line-soft); }
.roo-kvf .ro-input, .roo-kvf .ro-select, .roo-kvf .ro-textarea { display: block; width: 100%; height: auto; min-height: 50px; border: 0; border-radius: 0; background-color: transparent; padding: 13px 16px; font-size: var(--fs-base); font-weight: 400; line-height: 24px; }
.roo-kvf .ro-select, .roo-kvf select.ro-input { padding-right: 36px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8285' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
.roo-kvf .ro-textarea, .roo-kvf textarea.ro-input { min-height: 88px; }
/* 손이 닿은 칸·고르고 있는 칸은 회색이 아니라 연한 초록으로 (브랜드 색) */
.roo-kvf .ro-input:hover, .roo-kvf .ro-select:hover, .roo-kvf .ro-textarea:hover { background-color: var(--c-point-wash); }
.roo-kvf .ro-input:focus, .roo-kvf .ro-select:focus, .roo-kvf .ro-textarea:focus { background-color: var(--c-point-tint); border: 0; }
.roo-kvf .ro-input:disabled, .roo-kvf .ro-select:disabled { color: var(--c-muted); background-color: transparent; }
.roo-kvf .ro-row, .roo-kvf .ro-form-2 { display: grid; gap: 0; border-bottom: 1px solid var(--c-line-soft); margin-bottom: -1px; }
.roo-kvf .ro-form-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.roo-kvf .ro-row > .ro-field, .roo-kvf .ro-form-2 > .ro-field { border-bottom: 0; margin-bottom: 0; }
.roo-kvf .ro-row > .ro-field + .ro-field, .roo-kvf .ro-form-2 > .ro-field + .ro-field { border-left: 1px solid var(--c-line-soft); }
.roo-kvf .ro-field > .roo-cell-row { padding: 0 12px 0 0; gap: 8px; }
.roo-kvf + .text-xs, .roo-kvf + .roo-field-help { margin-top: 10px; }
.roo-kvf > .roo-field-help, .roo-kvf > .text-xs, .roo-kvf > p { margin: 0; padding: 10px 16px; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; border-bottom: 1px solid var(--c-line-soft); margin-bottom: -1px; }
.roo-kvf-t { margin: 0; padding: 11px 16px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line-soft); margin-bottom: -1px; }

/* 파트너가 고친 내용 (본사가 확인할 것) */
.roo-kv.is-chg th, .roo-kv.is-chg td { background: #fbf6e9; }
.roo-kv.is-chg .is-old { color: var(--c-muted); text-decoration: line-through; }
.roo-kv.is-chg td.is-act { text-align: right; padding: 8px 12px; vertical-align: middle; }

/* 기록 표 머리줄 */
.roo-kv.is-log th { white-space: nowrap; }
.roo-kv.is-log .roo-kv-v { padding: 12px 16px; }


/* ═══════════ ⑲ ro-pager ═══════════ */
.ro-pager {
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
}
.roo-pager-btn {
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  color: var(--c-text-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--tr-fast);
}
.roo-pager-btn:hover { border-color: var(--c-point); color: var(--c-point-deep); }
.roo-pager-btn.is-active {
  background: var(--c-point);
  border-color: var(--c-point);
  color: #fff;
}


/* ═══════════ ⑳ ro-empty / ro-loading / ro-error ═══════════ */
.ro-empty {
  padding: var(--sp-10) 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.roo-empty-icon {
  width: 64px; height: 64px;
  color: var(--c-muted);
}
.roo-empty-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
}
.roo-empty-text {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.ro-loading {
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.roo-loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--c-line);
  border-top-color: var(--c-point);
  border-radius: var(--r-pill);
  animation: ro-spin 0.6s linear infinite;
}
.roo-loading-text {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
@keyframes ro-spin { to { transform: rotate(360deg); } }

.ro-skeleton {
  background: linear-gradient(90deg, var(--c-line-soft) 25%, var(--c-line) 50%, var(--c-line-soft) 75%);
  background-size: 200% 100%;
  border-radius: var(--r-md);
  animation: ro-shimmer 1.4s ease-in-out infinite;
}
.roo-skeleton-text { height: 12px; margin-bottom: var(--sp-2); }
.roo-skeleton-card { height: 120px; }
@keyframes ro-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ro-error {
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.roo-error-icon { color: var(--c-danger); font-size: 32px; }
.roo-error-title { font-size: var(--fs-lg); font-weight: 700; }
.roo-error-text { font-size: var(--fs-sm); color: var(--c-muted); }


/* ═══════════ ㉑ Utilities ═══════════ */
.fw-medium { font-weight: 500; }
.fw-semi   { font-weight: 600; }
.fw-bold   { font-weight: 700; }
.fw-extra  { font-weight: 800; }

.text-muted { color: var(--c-muted); }
.text-soft  { color: var(--c-text-soft); }
.text-success { color: var(--c-success); }
.text-warn    { color: var(--c-warn); }
.text-danger  { color: var(--c-danger); }
.text-info    { color: var(--c-info); }
.text-gold    { color: var(--c-gold); }
.text-point   { color: var(--c-point-deep); }
.text-xs    { font-size: var(--fs-xs); }
.text-sm    { font-size: var(--fs-sm); }
.text-mono  { font-family: var(--ff-mono); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-up   { color: var(--c-up); }
.text-down { color: var(--c-down); }
.roo-pre { white-space: pre-wrap; }
.is-dim  { opacity: .5; }            /* 뺀 줄 · 비활성 */
.is-full { grid-column: 1 / -1; }    /* 격자 한 줄 전부 (빈 상태 · 오류) */
/* 값으로 정해지는 길이 (진행률 막대 등): 인라인엔 --w · --h 값만, 모양은 여기 */
[style*="--w"] { width: var(--w); }
[style*="--h"] { height: var(--h); }
/* 안내 상자 */
.roo-note { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-info); border-radius: var(--r-lg); background: var(--c-info-soft); font-size: var(--fs-sm); line-height: 1.6; }
.roo-note.is-warn { border-color: var(--c-warn); background: var(--c-warn-soft); }
.roo-note a { text-decoration: underline; }
/* 로그인 · 가입 아래 줄 */
.roo-auth-foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.roo-auth-foot a { color: var(--c-point-deep); font-weight: 600; }
.roo-auth-foot span { margin: 0 var(--sp-2); color: var(--c-line); }


/* ═══════════ ㉒ Responsive ═══════════ */
@media (max-width: 1280px) {
  .ro-row-5 { grid-template-columns: repeat(3, 1fr); }
  .ro-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .ro-row-2,
  .ro-row-3,
  .ro-row-4,
  .ro-row-5,
  .ro-row-main-side,
  .ro-row-3-side,
  .ro-row-form-2,
  .ro-row-form-3,
  .ro-row-form-side { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ro-app { grid-template-columns: 1fr; }
  .ro-sidebar { display: none; }
  .ro-sidebar.is-open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--w-sidebar);
    z-index: var(--z-modal);
    box-shadow: var(--sh-lg);
  }
  .roo-h-toggle { display: flex; }
}
@media (max-width: 600px) {
  .ro-page { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .roo-page-title { font-size: var(--fs-xl); }
  .ro-modal { max-height: 100vh; border-radius: var(--r-xl) var(--r-xl) 0 0; align-self: flex-end; }
  /* 옆 패널은 모바일에서 화면 전체 (모서리 없음, 위에서 아래까지) */
  .ro-modal.roo-pop-xl { border-radius: 0; align-self: stretch; }
}
/* 좁은 화면: 「이름 · 값 · 이름 · 값」 네 칸 표는 값이 세로로 찌그러진다 → 한 줄에 「이름 · 값」 하나씩 (기록 · 변경 표는 그대로) */
@media (max-width: 768px) {
  .roo-kv:not(.is-log):not(.is-chg), .roo-kv:not(.is-log):not(.is-chg) > tbody { display: block; }
  .roo-kv:not(.is-log):not(.is-chg) > colgroup { display: none; }
  .roo-kv:not(.is-log):not(.is-chg) tr { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .roo-kv:not(.is-log):not(.is-chg) tr:last-child > * { border-bottom: 1px solid var(--c-line-soft); }
  .roo-kv:not(.is-log):not(.is-chg) tr:last-child > :nth-last-child(-n+2) { border-bottom: 0; }
  .roo-kv:not(.is-log):not(.is-chg) tr > td { border-right: 0; }
  .roo-pop > .roo-modal-body { padding-left: 16px; padding-right: 16px; }
}


/* ═══════════ ㉓ Toast (선택, 공용) ═══════════ */
.ro-toast-stack {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.ro-toast {
  background: var(--c-text);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-lg);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 480px;
}
.ro-toast-success { background: var(--c-success); }
.ro-toast-warn    { background: var(--c-warn); }
.ro-toast-danger  { background: var(--c-danger); }

/* ═══════════════════════════════════════════════════════════════
   sp-* 비즈니스 카드 (공급사 + 파트너 회원 공통)
   ─ 카드 그리드 + 큰 예치금 박스 + 충전 버튼 + 진행바 + 미니 KPI
   ═══════════════════════════════════════════════════════════════ */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }   /* 카드 목록은 한 줄 3개 (꽃집 · 파트너 · 공급사, 대표 9/30) */

.sp-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); margin-bottom: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); flex-wrap: wrap; }
.sp-toolbar > b { font-size: var(--fs-sm); color: var(--c-text-soft); }
.sp-toolbar > strong { font-size: var(--fs-sm); color: var(--c-point-deep); margin-right: var(--sp-2); }
.sp-toolbar > input[inputmode="numeric"] { width: 120px; text-align: right; }

/* 카드 한 장 — 여백은 클래스로 (화면에서 인라인 style 로 주지 않는다) */
.sp-card { padding: var(--sp-5); cursor: pointer; position: relative; }
/* 맨 아래 요소의 아래 여백은 지운다 (카드 여백과 겹쳐 빈 공간이 생긴다) */
.sp-card > :last-child { margin-bottom: 0; }

.sp-card-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
/* 로고 자리: 브랜드 그림이 들어갈 곳. 등급 색을 여기 칠하지 않는다 (등급은 이름 옆 배지로 한 번만) */
.sp-card-logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--r-md); background: var(--c-bg-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-base); color: var(--c-text-soft); overflow: hidden; }
.sp-card-logo img { width: 100%; height: 100%; object-fit: cover; }

.sp-card-headinfo { flex: 1; min-width: 0; }
.sp-card-name { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--c-text); line-height: 1.3; }
.sp-card-name > .ro-badge, .sp-card-name > .sp-pill { flex: none; }
/* 이름이 길면 줄을 바꾸지 않고 … 으로 줄인다 */
.sp-card-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-card-meta { display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; }

/* 상태 알림표 — 공용 .ro-badge 와 같은 모양. 점은 켜짐/꺼짐일 때만 */
.sp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.sp-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sp-pill.is-live   { background: var(--c-success-soft); color: var(--c-success); }
.sp-pill.is-paused { background: var(--c-bg-soft); color: var(--c-text-soft); }
.sp-pill.is-error  { background: var(--c-warn-soft); color: var(--c-warn-deep); }
.sp-pill.no-dot::before { display: none; }

/* 예치금 잔액 — 큰 색면을 쓰지 않는다. 모자란 것은 옆의 작은 알림표로 알린다 */
.sp-balance { background: var(--c-bg-soft); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.sp-balance-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.sp-balance-label { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.sp-balance-value { font-size: 24px; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; line-height: 1; }
.sp-balance-value.is-text { font-size: var(--fs-base); }
.sp-balance-value small { font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-soft); margin-left: 2px; }

.sp-balance-action { background: var(--c-bg); border: 1px solid var(--c-line); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text); padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; white-space: nowrap; transition: all var(--tr-fast); }
.sp-balance-action:hover { background: var(--c-point-soft); color: var(--c-point-deep); border-color: var(--c-point); }

.sp-balance-gauge { height: 4px; background: var(--c-line-soft); border-radius: 99px; overflow: hidden; margin-top: var(--sp-4); }
.sp-balance-gauge-fill { height: 100%; background: var(--c-point); border-radius: 99px; transition: width 600ms ease; }
.sp-balance.is-low .sp-balance-gauge-fill,
.sp-balance.is-critical .sp-balance-gauge-fill { background: var(--c-warn); }
.sp-balance-gauge-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; margin-top: 6px; }
.sp-balance-gauge-meta strong { color: var(--c-text-soft); font-weight: 500; }

/* 숫자 네 칸 */
/* 숫자 칸 — 칸이 몇 개든 카드 폭을 고르게 나눈다 (3칸일 때 빈자리가 남지 않게) */
.sp-card-metrics { display: flex; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-4); }
.sp-card-metric { flex: 1 1 0; min-width: 0; padding: var(--sp-3) var(--sp-4); text-align: center; border-right: 1px solid var(--c-line-soft); }
.sp-card-metric:last-child { border-right: 0; }
.sp-card-metric-label { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card-metric-value { font-size: var(--fs-md); font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; line-height: 1; }
.sp-card-metric-value small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); margin-left: 1px; }

/* 카드 맨 아래 줄 */
.sp-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); font-size: var(--fs-xs); color: var(--c-text-soft); }
.sp-card-foot-actions { display: flex; gap: 6px; }
.sp-card-foot-btn { background: transparent; border: 1px solid var(--c-line); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-soft); padding: 5px 11px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; }
.sp-card-foot-btn:hover { background: var(--c-bg-soft); color: var(--c-text); }

/* 최근 주문·연결 수 한 줄 — 상자를 겹치지 않는다 (박스 안 박스 금지) */
.sp-shop-count { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-4); }
.sp-shop-count strong { color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-shop-count-link { color: var(--c-point-deep); text-decoration: none; white-space: nowrap; }

/* API·연락 줄 */
.sp-card-api { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); font-size: var(--fs-xs); }
.sp-card-api-left { display: flex; align-items: center; gap: 6px; color: var(--c-muted); min-width: 0; }
.sp-card-api-left a { color: var(--c-point-deep); text-decoration: none; }
.sp-card-api-status { display: inline-flex; align-items: center; gap: 4px; }
.sp-card-api-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.sp-card-api-status.is-ok::before { background: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-soft); }
.sp-card-api-status.is-warn::before { background: var(--c-warn); box-shadow: 0 0 0 3px var(--c-warn-soft); }
.sp-card-api-status.is-off::before { background: var(--c-muted); }
.sp-card-api-status.is-ok { color: var(--c-success); }
.sp-card-api-status.is-warn { color: var(--c-warn); }
.sp-card-api-status.is-off { color: var(--c-muted); }
.sp-card-api-actions { display: flex; gap: 6px; }
/* 이름 아래 한 줄 설명 (공급사: 정산 방식·수수료) */
.sp-card-en { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; }

@media (max-width: 1280px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sp-grid { grid-template-columns: 1fr; } }

/* ═══════════ ㉔ roo-ord — 주문 줄 (주문 목록·대시보드 공용) ═══════════ */
/* 발주사 칩: 꽃집 이름 앞, 발주사마다 색 (공용으로 옮길 때 빠졌던 것 원래대로) */
.roo-agency { display: inline-block; font-size: var(--fs-2xs); line-height: 1.5; border-radius: 5px; padding: 1px 6px; margin-right: 5px; white-space: nowrap; vertical-align: 1px; font-weight: 600; }
.roo-agency[data-ag="꽃비"] { background: var(--c-success-soft); color: var(--c-success); }
.roo-agency[data-ag="아리랑"] { background: var(--c-purple-soft); color: var(--c-purple-deep); }
.roo-agency[data-ag="따르릉"] { background: var(--c-gold-soft); color: var(--c-gold-deep); }
.roo-agency[data-ag="플라워엔"] { background: var(--c-point-soft); color: var(--c-point-deep); }
.roo-agency:not([data-ag="꽃비"]):not([data-ag="아리랑"]):not([data-ag="따르릉"]):not([data-ag="플라워엔"]) { background: var(--c-bg-soft); color: var(--c-text-soft); }
/* 주문 화면에서 쓰던 줄 디자인을 공용으로 옮겼다. 같은 모양을 두 곳에서 쓰기 때문에 정의는 여기 한 곳뿐 */
.roo-ord { --st-unpaid: var(--c-danger-soft); --st-unpaid-t: var(--c-danger); --st-recv: var(--c-warn-soft); --st-recv-t: var(--c-warn-deep); --st-wait: var(--c-gold-soft); --st-wait-t: var(--c-gold-deep);
  --st-resv: var(--c-purple-soft); --st-resv-t: var(--c-purple-deep); --st-ship: var(--c-info-soft); --st-ship-t: var(--c-info-deep);
  --st-done: var(--c-success-soft); --st-done-t: var(--c-success); --st-canc: var(--c-danger-soft); --st-canc-t: var(--c-danger);
  --st-conf: var(--c-cost-soft); --st-conf-t: var(--c-cost); }
.roo-ord-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.roo-ord > .ro-tabs { margin-bottom: var(--sp-4); }
/* 주문 단계 흐름 — 동그라미(건수) + 이름, 사이는 화살표. 누르면 그 단계만 걸러 본다 (대표 10/7 시안 B안)
   전체 · 취소는 흐름 밖이라 화살표 없이 간격(.roo-flow-gap)으로만 뗀다. 색은 주문 단계 색(--st-*) 그대로 */
.roo-flow-wrap { margin-bottom: var(--sp-4); }
.roo-flow-wrap > .ro-tabs { margin-top: var(--sp-4); }
/* 상자 없이 바탕 위에 바로 놓는다 (대표 10/7 「박스 안에 넣을 필요 없음, 칸 배경색도 필요 없음」). 폭은 달력과 같고 크기는 화면 폭을 따라 조금 커지고 줄어든다 */
.roo-flow { --flow-dot: clamp(40px, 2.6vw, 48px); display: flex; align-items: stretch; width: 100%; }
.roo-flow-step { --t-soft: var(--c-point-soft); --t-deep: var(--c-point-deep); flex: 1 1 0; min-width: 0; padding: 2px 4px; border: 0; background: none; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.roo-flow-step[data-g="recv"] { --t-soft: var(--st-recv); --t-deep: var(--st-recv-t); }
.roo-flow-step[data-g="wait"] { --t-soft: var(--st-wait); --t-deep: var(--st-wait-t); }
.roo-flow-step[data-g="conf"] { --t-soft: var(--st-conf); --t-deep: var(--st-conf-t); }
.roo-flow-step[data-g="resv"] { --t-soft: var(--st-resv); --t-deep: var(--st-resv-t); }
.roo-flow-step[data-g="ship"] { --t-soft: var(--st-ship); --t-deep: var(--st-ship-t); }
.roo-flow-step[data-g="done"] { --t-soft: var(--st-done); --t-deep: var(--st-done-t); }
.roo-flow-step[data-g="canc"] { --t-soft: var(--st-canc); --t-deep: var(--st-canc-t); }
.roo-flow-step[data-g="unpaid"] { --t-soft: var(--st-unpaid); --t-deep: var(--st-unpaid-t); }
.roo-flow-dot { width: var(--flow-dot); height: var(--flow-dot); border-radius: 50%; background: var(--t-soft); color: var(--t-deep); display: grid; place-items: center; font-size: var(--fs-base); font-weight: 700; font-feature-settings: 'tnum'; transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast); }
.roo-flow-name { font-size: var(--fs-sm); color: var(--c-text-soft); white-space: nowrap; }
/* 동그라미마다 연한 회색 테두리 — 0건(흰 동그라미)도 바탕에 묻히지 않게 (대표 10/7) */
.roo-flow-dot { box-shadow: inset 0 0 0 1px var(--c-line); }
.roo-flow-step.is-zero .roo-flow-dot { background: var(--c-bg); color: var(--c-muted); }
.roo-flow-step:hover .roo-flow-dot { box-shadow: inset 0 0 0 1px var(--c-line), 0 0 0 4px var(--t-soft); }
.roo-flow-step.is-active .roo-flow-dot { box-shadow: none; }
.roo-flow-step.is-active .roo-flow-dot { background: var(--t-deep); color: #fff; }
.roo-flow-step.is-active .roo-flow-name { color: var(--t-deep); font-weight: 700; }
.roo-flow-arr { flex: none; width: clamp(16px, 2vw, 32px); display: grid; place-items: center; padding-bottom: 28px; font-size: var(--fs-xl); line-height: 1; color: var(--c-muted); }
.roo-flow-gap { flex: none; width: clamp(8px, 1.6vw, 28px); }
/* 좁은 화면: 한 줄에 다 못 들어가므로 네 칸씩 두 줄, 화살표는 뺀다 */
@media (max-width: 720px) {
  .roo-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 14px 4px; }
  .roo-flow-arr, .roo-flow-gap { display: none; }
}
.roo-ord-bar .ro-btn-ghost, .roo-ord-lsthead .ro-btn-ghost { background: var(--c-bg); border: 1px solid var(--c-line); }
.roo-ord-nav { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-base); font-weight: 600; color: var(--c-text); }
.roo-ord-nav i { font-style: normal; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-muted); cursor: pointer; border-radius: var(--r-sm); }
.roo-ord-nav i:hover { color: var(--c-text); background: var(--c-bg); }
.roo-ord-seg { --seg-h: var(--h-ctrl); display: inline-flex; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 3px; }
.roo-ord-bar > .roo-ord-seg { margin-left: auto; }
.roo-ord-seg > * { height: calc(var(--seg-h) - 8px); display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; font-size: var(--fs-ctrl); color: var(--c-muted); cursor: pointer; border-radius: var(--r-sm); }   /* 바깥 테두리 · 안 여백 포함 = 버튼 높이 */
.roo-ord-seg > * svg { width: 13px; height: 13px; margin-right: 4px; }
.roo-ord-seg > .on { background: var(--c-point-soft); color: var(--c-point-deep); font-weight: 700; }
.roo-ord-seg.is-block { --seg-h: var(--h-ctrl-lg); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }   /* 한 줄을 꽉 채우는 큰 칸 (결제 방법) */
.roo-ord .is-unpaid { background: var(--st-unpaid); color: var(--st-unpaid-t); }
.roo-ord .is-recv { background: var(--st-recv); color: var(--st-recv-t); }
.roo-ord .is-wait { background: var(--st-wait); color: var(--st-wait-t); }
.roo-ord .is-resv { background: var(--st-resv); color: var(--st-resv-t); }
.roo-ord .is-ship { background: var(--st-ship); color: var(--st-ship-t); }
.roo-ord .is-done { background: var(--st-done); color: var(--st-done-t); }
.roo-ord .is-canc { background: var(--st-canc); color: var(--st-canc-t); }
.roo-ord .is-conf { background: var(--st-conf); color: var(--st-conf-t); }
.roo-ord-cal { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-5); }
.roo-ord-cal .hd { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--c-bg-soft); }
.roo-ord-cal .hd span { padding: 11px 12px; font-size: var(--fs-sm); color: var(--c-muted); text-align: center; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line-soft); }
.roo-ord-cal .hd span:last-child { border-right: 0; }
.roo-ord-cal .hd span.sun { color: var(--c-danger); }
.roo-ord-cal .hd span.sat { color: var(--c-info); }
.roo-ord-cal .gd { display: grid; grid-template-columns: repeat(7, 1fr); }
.roo-ord-cal .dc { min-height: 104px; padding: 8px 8px 6px; border-right: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); cursor: pointer; }
.roo-ord-cal .dc:nth-child(7n) { border-right: 0; }
.roo-ord-cal .dc.sel { background: var(--c-point-tint); }
.roo-ord-cal .dc .n { font-size: var(--fs-sm); color: var(--c-muted); display: block; margin-bottom: 6px; }
.roo-ord-cal .dc.today { box-shadow: inset 0 0 0 2px var(--c-point-deep); }
.roo-ord-cal .dc.today .n { color: #fff; font-weight: 700; background: var(--c-point-deep); border-radius: 999px; width: 22px; height: 22px; line-height: 22px; text-align: center; }
.roo-ord-cal .dc.adj { background: var(--c-cream); cursor: pointer; }   /* 누르면 그 달로 넘어간다 */
.roo-ord-cal .dc.adj .n { color: #c2bfc0; }
.roo-ord-cal .dc.adj .pill { opacity: .42; }
.roo-ord-cal .dc.wk { min-height: 300px; }
.roo-ord .roo-ord-cal .pill { border-radius: 7px; padding: 5px 8px; font-size: var(--fs-xs); line-height: 1.3; margin-bottom: 4px; color: var(--c-text); font-weight: 600; cursor: pointer; }
.roo-ord .roo-ord-cal .pill small { display: block; font-size: var(--fs-2xs); color: var(--c-text-soft); font-weight: 500; }
.roo-ord-cal .more { font-size: var(--fs-2xs); color: var(--c-muted); }
.roo-ord-lsthead { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 2px 10px; font-size: var(--fs-md); }
.roo-ord-lsthead span { color: var(--c-muted); font-size: var(--fs-sm); }
.roo-ord-lsthead u { cursor: pointer; }
.roo-ord .ro-table { min-width: var(--w-ord-table); table-layout: fixed; }
/* 칸이 적은 표(계산서 발행 6칸)는 좁은 창에서도 옆으로 밀리지 않게 */
.roo-ord .ro-table.is-compact { min-width: var(--w-ord-table-compact); }
/* 칸 폭 — 쇼핑몰 · 본사 어느 화면에서 봐도 같은 폭이 되게, 상품 칸 하나만 남는 폭을 가져간다 (대표 10/7: 두 화면 폭이 달라 보임, 주문번호 칸은 줄임)
   전에는 고정 폭과 % 를 섞고 남는 폭을 모든 칸이 나눠 가져서 화면 폭에 따라 칸마다 조금씩 달라졌다 */
.roo-ord .ro-table col.c-no { width: 108px; } .roo-ord .ro-table col.c-who { width: 28%; } .roo-ord .ro-table col.c-owner { width: 150px; }
.roo-ord .ro-table col.c-item { width: auto; } .roo-ord .ro-table col.c-amt { width: 156px; } .roo-ord .ro-table col.c-shop { width: 212px; }
.roo-ord .ro-table .no { font-size: var(--fs-base); font-feature-settings: 'tnum'; color: var(--c-text); display: block; margin-bottom: 7px; white-space: nowrap; }
.roo-ord .ro-table select.st { font: inherit; font-size: var(--fs-sm); border: 1px solid transparent; border-radius: var(--r-md); padding: 6px 6px; width: 100%; min-width: 96px; cursor: pointer; }
.roo-ord .ro-table select.st:disabled { cursor: default; opacity: 1; }
/* 주문번호 칸은 좁게 (대표 10/7 「주문번호 쪽 폭이 넓다」): 안쪽 여백을 줄이고 상태 셀렉트는 칸 폭에 맞춘다 */
.roo-ord .ro-table thead th:first-child, .roo-ord .ro-table tbody td:first-child { padding-left: 12px; padding-right: 10px; }
.roo-ord .ro-table tbody td:first-child select.st { min-width: 0; }
.roo-ord .ro-table .memo { display: block; width: 100%; margin-top: 7px; font: inherit; font-size: var(--fs-xs); color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 6px 8px; outline: 0; }
.roo-ord .ro-table .memo:focus { border-color: var(--c-point); }
.roo-ord .ro-table .memo::placeholder { color: var(--c-muted); }
.roo-ord .ro-table .memosv { display: block; font-size: var(--fs-2xs); color: var(--c-muted); height: 14px; margin-top: 2px; opacity: 0; transition: opacity .2s; }
.roo-ord .ro-table .memosv.on { opacity: 1; color: var(--c-point-deep); }
.ro-table .sub { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 2px; }
.ro-table tbody tr[data-dep] { cursor: pointer; }
.ro-table tbody tr.is-picked > td { background: var(--c-line-soft); }   /* 무통장 입금: 고른 입금 줄 */
.roo-ord .ro-table .when { display: block; white-space: nowrap; margin-bottom: 6px; }
.roo-ord .ro-table .when b { font-weight: 600; }
/* 배송일: 오늘 빨강 · 내일 파랑 · 끝난 주문(배송완료·취소)은 옅은 회색 */
.roo-ord .ro-table .when.is-today b { color: var(--c-danger); }
.roo-ord .ro-table .when.is-tmr b { color: var(--c-info); }
.roo-ord .ro-table .when.is-settled { color: var(--c-muted); }
.roo-ord .ro-table .when.is-settled b { color: var(--c-muted); font-weight: 500; }
.roo-ord .ro-table .dtag { font-style: normal; display: inline-block; white-space: nowrap; font-size: var(--fs-2xs); border-radius: 5px; padding: 1px 6px; margin-left: 5px; vertical-align: 1px; }
.roo-ord .ro-table .when.is-today .dtag { color: var(--c-danger); background: var(--c-danger-soft); }
.roo-ord .ro-table .when.is-tmr .dtag { color: var(--c-info-deep); background: var(--c-info-soft); }
.roo-ord .ro-table .who { font-weight: 600; font-size: var(--fs-base); display: block; word-break: keep-all; line-height: 1.35; }
.roo-ord .ro-table .tel { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 2px; white-space: nowrap; }
.roo-ord .ro-table .addr { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 5px; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.45; }
.roo-ord .ro-table .partner { display: block; font-size: var(--fs-xs); color: var(--c-point-deep); background: var(--c-point-soft); border-radius: 6px; padding: 2px 7px; margin-bottom: 5px; width: fit-content; white-space: nowrap; }
.roo-ord .ro-table .who2 { display: block; font-size: var(--fs-md); color: var(--c-text); }
.roo-ord .ro-table .prod { display: flex; gap: 10px; align-items: flex-start; }
.roo-ord .ro-table .pimg { width: 52px; height: 52px; border-radius: var(--r-md); flex-shrink: 0; background: var(--c-bg-soft); object-fit: cover; display: block; }
.roo-ord .ro-table .ptxt { min-width: 0; }
.roo-ord .ro-table .item { color: var(--c-text); font-weight: 500; }
.roo-ord .ro-table .r { text-align: right; font-feature-settings: 'tnum'; }
.roo-ord .ro-table .none { color: var(--c-muted); }
.roo-ord .ro-table .shopname { display: block; font-size: var(--fs-md); color: var(--c-text); margin-bottom: 7px; }
.roo-ord .ro-table .phs { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.roo-ord .ro-table .thumb { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-bg-soft); border: 1px dashed var(--c-line); flex-shrink: 0; cursor: pointer; object-fit: cover; display: block; }
.roo-ord .ro-table .thumb.has { border: 0; }
.roo-ord .ro-table .recv { font-size: var(--fs-xs); color: var(--c-text-soft); display: block; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.roo-ord .ro-table .phbtns { display: flex; gap: 3px; }
.roo-ord .ro-table .phb { font-size: var(--fs-2xs); padding: 3px 7px; border-radius: 6px; background: var(--c-bg-soft); border: 1px solid var(--c-line-soft); color: var(--c-muted); white-space: nowrap; cursor: pointer; }
.roo-ord .ro-table .phb.on { background: var(--c-success-soft); border-color: transparent; color: var(--c-success); }
.roo-ord .ro-table .clickable { cursor: pointer; }
.roo-ord-empty { padding: 44px; text-align: center; color: var(--c-muted); }
/* 회계 기업 정산: 「주문 N건」을 펼친 줄 — 표 안의 표로 보이지 않게, 윗줄에 이어지는 한 구역으로 (대표 9/28)
   안쪽 표는 테두리·모서리·바탕 없이 바깥 표 끝선에 붙이고, 구역 전체를 연한 바탕으로 묶는다 */
.ro-table tbody tr[data-sub-row] > td { padding: 0; background: var(--c-bg-soft); }
.ro-table tbody tr[data-sub-row]:hover > td { background: var(--c-bg-soft); }
tr[data-sub-row] .ro-table-wrap { border: 0; border-radius: 0; background: transparent; }
tr[data-sub-row] .ro-table thead th { background: transparent; font-size: var(--fs-xs); }
tr[data-sub-row] .ro-table tbody td { background: transparent; }
tr[data-sub-row] .ro-table tbody tr:last-child td { border-bottom: 1px solid var(--c-line-soft); }
tr[data-sub-row] [data-sub-foot] { padding: 12px 16px 14px; }
/* 금액 위 입금 여부 배지 */
.roo-ord .ro-table .pay { display: block; margin: 0 0 6px; }
.roo-ord .ro-table .pay:empty { display: none; }
.ro-table .amt { white-space: nowrap; }   /* 결제 방식 이름표 + 금액은 한 줄 */
/* 주문번호 칸 앞 선택 칸(회계 기업 정산에서 펼친 주문) — 번호와 한 줄에 */
.roo-ord .ro-table td:first-child > .ro-checkbox:first-child { float: left; margin: 2px 8px 0 0; }

/* 상세 팝업(고객·파트너·꽃집) 안의 주문 내역 — 주문 목록과 같은 줄, 폭만 팝업에 맞춘다 */
/* 발주처 서버(로그인 필요)에 있는 사진은 못 그린다 — 자리에 「열기」 링크로 새 창에서 연다 */
.roo-ord .ro-table a.thumb { display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); color: var(--c-muted); text-decoration: none; }
.roo-ord .ro-table a.thumb:hover { color: var(--c-text); border-color: var(--c-text-soft); }
/* 보기 전용 — 상태는 고르는 칸이 아니라 알약으로 */
.roo-ord .ro-table span.st { display: inline-block; font-size: var(--fs-sm); border-radius: var(--r-md); padding: 5px 10px; }
/* 보기 전용 표: 사진이 있는 자리만 누를 수 있다 (올리기는 주문 목록에서) */
.roo-ord .ro-table a.no { text-decoration: none; }
.roo-ord .ro-table a.no:hover { text-decoration: underline; }


/* ═══════════ 플로 (AI 직원 채팅) ═══════════
   모든 페이지 오른쪽 아래에 떠 있다. admin-layout.js 가 flo-chat.js 를 불러 붙인다.
   본사 직원에게만 보인다 (파트너·꽃집 화면에는 붙지 않는다). */

/* 부르는 자리 — 얼굴만 동그랗게 떠 있는다 (글자·테두리 없이) */
.ro-flo-fab {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-dropdown);
  width: 72px; height: 72px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: var(--c-point-soft);
  /* 흰 화면 위에 떠 있는 게 보이도록 — 그림자와 얇은 흰 테 */
  box-shadow: 0 8px 24px rgba(42, 38, 40, .20), 0 2px 6px rgba(42, 38, 40, .12), 0 0 0 3px #fff;
  cursor: pointer;
  transition: transform var(--tr-spring), box-shadow var(--tr-base);
}
.ro-flo-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px rgba(42, 38, 40, .26), 0 2px 6px rgba(42, 38, 40, .12), 0 0 0 3px #fff;
}
.ro-flo-fab.is-hidden { display: none; }

/* 채팅창을 닫아 둔 사이에 플로가 답하면 한 줄만 띄운다 (누르면 열린다) */
.ro-flo-bubble {
  position: fixed; right: calc(var(--sp-6) + 8px); bottom: calc(var(--sp-6) + 84px);
  z-index: var(--z-dropdown);
  display: none; max-width: 260px;
  padding: var(--sp-3) var(--sp-4);
  border: 0; border-radius: var(--r-xl) var(--r-xl) var(--r-xs) var(--r-xl);
  background: var(--c-point); color: #fff;
  font-family: var(--ff-base); font-size: var(--fs-sm); line-height: var(--lh-base);
  letter-spacing: var(--ls-base); text-align: left;
  box-shadow: 0 8px 24px rgba(42, 38, 40, .22);
  cursor: pointer;
}
.ro-flo-bubble.is-on { display: block; animation: floPop .35s cubic-bezier(.16, 1, .3, 1); }
.ro-flo-bubble::after {
  content: ''; position: absolute; right: 18px; bottom: -6px;
  width: 12px; height: 12px; background: var(--c-point);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@keyframes floPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 머리말의 「새로 시작」 — 하던 말을 지우고 처음부터 */
.roo-flo-new {
  flex: none; border: 0; background: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-family: var(--ff-base); font-size: var(--fs-xs); color: var(--c-muted);
}
.roo-flo-new:hover { color: var(--c-text); background: var(--c-bg); }

/* 플로 얼굴 — 크기는 붙는 자리에서 정한다 (클래스는 하나) */
.roo-flo-face { flex: none; border-radius: 30%; object-fit: cover; background: var(--c-point-tint); }
.ro-flo-fab   .roo-flo-face { width: 100%; height: 100%; border-radius: var(--r-pill); }
.roo-flo-head .roo-flo-face { width: 56px; height: 56px; }

.ro-flo-panel {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-dropdown);
  display: none; flex-direction: column;
  width: 420px; max-width: calc(100vw - var(--sp-8)); height: 620px; max-height: calc(100vh - var(--sp-12));
  background: var(--c-bg); border-radius: var(--r-2xl); box-shadow: var(--sh-lg);
  overflow: hidden;
}
.ro-flo-panel.is-open { display: flex; }

.roo-flo-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-point-tint);
}
.roo-flo-who { flex: 1; min-width: 0; }
.roo-flo-name { font-size: var(--fs-lg); letter-spacing: var(--ls-base); color: var(--c-text); }
/* 플로 지금 상태 — 이름 밑 도트 + 한마디 (색은 data-state 로) */
.roo-flo-state { display: flex; align-items: center; gap: var(--sp-2); margin-top: 3px;
                 font-size: var(--fs-xs); color: var(--c-muted); }
.roo-flo-dot   { flex: none; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-success); }
.roo-flo-state[data-state="work"]  .roo-flo-dot { animation: floPulse 1.2s ease-in-out infinite; }
.roo-flo-state[data-state="ask"]   .roo-flo-dot { background: var(--c-gold); }
.roo-flo-state[data-state="error"] .roo-flo-dot { background: var(--c-danger); }
.roo-flo-state[data-state="off"]   .roo-flo-dot { background: var(--c-muted); }
.roo-flo-state[data-state="rest"]  .roo-flo-dot { background: var(--c-purple); }   /* 퇴근 — 밤빛, 고장이 아니다 */
@keyframes floPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.roo-flo-x {
  border: 0; background: none; cursor: pointer; padding: var(--sp-2);
  color: var(--c-muted); font-size: var(--fs-lg); line-height: 1; border-radius: var(--r-sm);
}
.roo-flo-x:hover { color: var(--c-text); background: var(--c-bg); }

.roo-flo-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
/* 칸이 창 높이에 맞춰 찌그러지면 넘치지 않아 스크롤이 안 생기고 아래가 잘린다 — 제 키대로 두고 채팅창이 스크롤된다 */
.roo-flo-body > * { flex-shrink: 0; }
.roo-flo-hello { color: var(--c-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.roo-flo-hello b { display: block; color: var(--c-text); font-size: var(--fs-base); font-weight: 400; margin-bottom: var(--sp-2); }

.roo-flo-msg { max-width: 88%; font-size: var(--fs-sm); line-height: var(--lh-relaxed); white-space: pre-wrap; word-break: break-word; }
.roo-flo-msg.is-user {
  align-self: flex-end; background: var(--c-point-soft); color: var(--c-text);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl) var(--r-xs) var(--r-xl) var(--r-xl);
}
.roo-flo-msg.is-flo { align-self: flex-start; color: var(--c-text); max-width: 100%; }
.roo-flo-msg.is-error { color: var(--c-danger); }
/* 플로는 표 대신 번호 목록으로 답한다. 그래도 표가 오면 가로로 밀어 본다 (잘림 방지) */
.roo-flo-tw { overflow-x: auto; margin: var(--sp-3) 0; }
.roo-flo-msg table { border-collapse: collapse; font-size: var(--fs-xs); }
.roo-flo-msg th, .roo-flo-msg td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); text-align: left; white-space: nowrap; }
.roo-flo-msg th { background: var(--c-bg-soft); font-weight: 500; }

/* 찾은 주문 — 글로 읽는 것보다 눈에 띄게 칸으로 (FLOWERN 어드민은 칸·선 격자) */
.roo-flo-ords { display: flex; flex-direction: column; gap: var(--sp-2); }
.roo-flo-ord {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.roo-flo-ord-no {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-point-soft); color: var(--c-point-deep);
  font-size: var(--fs-sm); letter-spacing: 0;
}
.roo-flo-ord-main { flex: 1; min-width: 0; }
.roo-flo-ord-top  { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.roo-flo-ord-code { font-size: var(--fs-base); color: var(--c-text); }
.roo-flo-ord-name { font-size: var(--fs-sm); color: var(--c-text); }
.roo-flo-ord-addr { font-size: var(--fs-sm); color: var(--c-text-soft); margin-top: 2px; }
.roo-flo-ord-meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-2); }

.roo-flo-wait { align-self: flex-start; display: flex; gap: 5px; padding: var(--sp-2) 0; }
.roo-flo-wait span { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--c-muted); opacity: .4; animation: floBlink 1.2s infinite; }
.roo-flo-wait span:nth-child(2) { animation-delay: .2s; }
.roo-flo-wait span:nth-child(3) { animation-delay: .4s; }
@keyframes floBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .9; } }

/* 승인 카드 — 고치기 전에 반드시 뜬다 */
.roo-flo-card { background: var(--c-bg-soft); border-radius: var(--r-xl); padding: var(--sp-5); }
.roo-flo-card-title { font-size: var(--fs-base); color: var(--c-text); margin-bottom: var(--sp-4); }
.roo-flo-card-line { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: var(--lh-relaxed); }
.roo-flo-card-btns { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.roo-flo-card-btns .ro-btn { flex: 1; }
.roo-flo-card.is-done { opacity: .55; }
.roo-flo-card.is-done .roo-flo-card-btns { display: none; }
.roo-flo-card-result { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.roo-flo-card .ro-select { width: 100%; margin-top: var(--sp-4); }   /* 바로 주문 등록 확인 카드의 결제 방법 */
.roo-flo-draft-foot .roo-flo-card-btns { margin-top: 0; }

.roo-flo-foot { padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--c-bg); }
.roo-flo-form { display: flex; align-items: flex-end; gap: var(--sp-2); }
.roo-flo-text {
  flex: 1; resize: none; max-height: 120px;
  font-family: var(--ff-base); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--c-text);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-bg); outline: none;
}
.roo-flo-text:focus { border-color: var(--c-point); }
.roo-flo-send {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-lg);
  background: var(--c-point); color: #fff; cursor: pointer; font-size: var(--fs-base);
}
.roo-flo-send:hover { background: var(--c-point-deep); }
.roo-flo-send:disabled { background: var(--c-line); cursor: default; }

@media (max-width: 640px) {
  .ro-flo-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .ro-flo-fab { right: var(--sp-4); bottom: var(--sp-4); }
}


/* 플로 돈 카드 — 서버가 대시보드와 똑같이 계산한 숫자. AI 가 옮기지 않는다 */
.roo-flo-money { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg); overflow: hidden; }
.roo-flo-money-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--c-bg-soft);
  font-size: var(--fs-base); color: var(--c-text);
}
.roo-flo-money-head span { font-size: var(--fs-xs); color: var(--c-muted); }
.roo-flo-money-row {
  display: grid; grid-template-columns: 1fr auto 56px; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line-soft);
}
.roo-flo-money-k { font-size: var(--fs-sm); color: var(--c-text-soft); }
.roo-flo-money-v { font-size: var(--fs-base); color: var(--c-text); font-variant-numeric: tabular-nums; text-align: right; }
.roo-flo-money-x { font-size: var(--fs-xs); color: var(--c-muted); text-align: right; }

/* 쇼핑몰 화면의 플로 — 이름 옆에 어느 구역인지 */
.roo-flo-where { margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--c-point-deep); }

/* 사진 붙이기 — 버튼 · 붙여넣기 · 끌어다 놓기 */
.roo-flo-clip {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg); color: var(--c-text-soft); cursor: pointer;
}
.roo-flo-clip:hover { color: var(--c-point-deep); border-color: var(--c-point); }
.roo-flo-att { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.roo-flo-att[hidden] { display: none; }
.roo-flo-att img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--c-line); }
.roo-flo-att-name { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--c-muted); }
.roo-flo-att-x { border: 0; background: none; color: var(--c-muted); cursor: pointer; padding: var(--sp-2); font-size: var(--fs-sm); }
.ro-flo-panel.is-drop .roo-flo-body { outline: 2px dashed var(--c-point); outline-offset: -8px; }

/* 사진·링크로 만든 주문서 초안 — 채워 넣기 전에 한눈에 확인 */
.roo-flo-draft { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg); overflow: hidden; }
.roo-flo-draft-head { padding: var(--sp-3) var(--sp-4); background: var(--c-bg-soft); font-size: var(--fs-base); color: var(--c-text); }
.roo-flo-draft-head span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted); }
.roo-flo-draft-one { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line-soft); }
.roo-flo-draft-title { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text); }
.roo-flo-draft-row { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-relaxed); }
.roo-flo-draft-k { color: var(--c-muted); }
.roo-flo-draft-v { color: var(--c-text-soft); word-break: break-word; }
.roo-flo-draft-v.is-empty { color: var(--c-warn); }
.roo-flo-draft-notes { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line-soft); background: var(--c-warn-soft); }
.roo-flo-draft-note { font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--c-text-soft); }
.roo-flo-draft-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line-soft); }
.roo-flo-draft-foot .ro-btn { width: 100%; }
/* 회원 고르기 — 번호 칸을 누르거나 입력창에 번호만 쳐서 고른다 */
.roo-flo-draft-one > .ro-input + .roo-flo-ords { margin-top: var(--sp-3); }
.roo-flo-ord[data-pick], .roo-flo-ord[data-choose] { cursor: pointer; }
.roo-flo-ord[data-pick]:hover, .roo-flo-ord[data-pick]:focus-visible,
.roo-flo-ord[data-choose]:hover, .roo-flo-ord[data-choose]:focus-visible { border-color: var(--c-point); outline: none; }
.roo-flo-draft-title + .roo-flo-ords { margin-bottom: var(--sp-3); }

/* ── 새 주문(수기 주문): 카드 · 표 · 버튼 · 고르는 칸은 모두 공용. 여기엔 이 화면에만 있는 배치만 (대표 9/30 「공용으로」) ── */
.roo-mo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; }
.roo-mo-layout > * { min-width: 0; }   /* 옆으로 넘기는 상품 줄이 화면 폭을 밀어내지 않게 */
@media (max-width: 1180px) { .roo-mo-layout { grid-template-columns: minmax(0, 1fr); } }
.roo-mo-sum { position: sticky; top: 24px; }
.roo-mo-sheetbar { display: none; }
/* 좁은 화면(한 줄 배치): 요약은 아래에 붙는 줄 — 누르면 위로 펼쳐진다 (대표 9/30) */
@media (max-width: 1180px) {
  .roo-mo-sum { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; }
  .roo-mo-sum > .ro-card { border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.08); border-bottom: 0; }
  .roo-mo-sheetbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .roo-mo-sheetbar-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: var(--h-ctrl); padding: 0 4px; background: none; border: 0; font: inherit; color: var(--c-text); cursor: pointer; text-align: left; }
  .roo-mo-sheetbar-t span { font-size: var(--fs-sm); color: var(--c-text-soft); }
  .roo-mo-sheetbar-t b { font-size: var(--fs-lg); font-feature-settings: 'tnum'; }
  .roo-mo-sheetbar-t svg { width: 18px; height: 18px; margin-left: auto; color: var(--c-muted); transition: transform var(--tr-fast); }
  .roo-mo-sum.is-open .roo-mo-sheetbar-t svg { transform: rotate(180deg); }
  .roo-mo-sum-body { display: none; max-height: 70vh; overflow-y: auto; }
  .roo-mo-sum-body > .roo-card-head { display: none; }   /* 건수 · 합계는 아래 줄에 이미 보인다 */
  .roo-mo-sum.is-open .roo-mo-sum-body { display: block; }
  .roo-mo-sum.is-open #sum-bar-go { display: none; }   /* 펼치면 안쪽 큰 「주문 접수」 하나만 */
  .roo-mo-layout { padding-bottom: 80px; }   /* 아래 줄에 마지막 칸이 가리지 않게 */
}
/* 상품 고르기: 옆으로 넘기는 상품 줄 (카드 여백까지 끝까지) */
.roo-mo-strip { display: flex; gap: 12px; overflow-x: auto; margin: 0 calc(-1 * var(--pad-card)); padding: 2px var(--pad-card) 10px; scroll-snap-type: x proximity; scroll-padding: 0 var(--pad-card); }
.roo-mo-prod { --thumb: 148px; flex: 0 0 var(--thumb); display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: var(--fs-md); scroll-snap-align: start; }
.roo-mo-prod b { font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.roo-mo-prod em { font-style: normal; color: var(--c-text-soft); font-feature-settings: 'tnum'; }
.roo-mo-prod:hover img { opacity: .85; }   /* 담긴 표시는 숫자 동그라미만 — 테두리 선은 쓰지 않는다 (대표 9/30) */

/* ═══════════ ㉓ 페이지 푸터 · 날짜 버튼 (옛 admin-chrome.css) ═══════════ */
/* 페이지 푸터 (저작권 등) */
.roo-page-credit {
  margin-top: var(--sp-8);
  padding: var(--sp-4) 0;
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--c-muted);
  border-top: 1px solid var(--c-line-soft);
}

/* 작은 데이트픽/필터 버튼 (admin.css ro-btn 와 동일 모양) */
.ro-datepick {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  cursor: pointer;
  white-space: nowrap;
}
.ro-datepick:hover { border-color: var(--c-point); color: var(--c-point-deep); }

/* 한국식 등락 색 도움 클래스 */
.is-up   { color: var(--c-up); }
.is-down { color: var(--c-down); }

/* ═══════════ ㉔ 화면별 (공용으로 못 만드는 배치만. 부품은 위 공용) ═══════════ */

/* ── 화면: accounting ── */
/* 페이지 고유: 손익 요약 줄 */
.ac-pl-row { display: grid; grid-template-columns: 1fr 160px 80px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line-soft); align-items: center; }
.ac-pl-row.is-section { font-weight: 700; background: var(--c-bg-soft); margin: 0 calc(-1 * var(--pad-card)); padding: 12px var(--pad-card); border-bottom: 1px solid var(--c-line); }
.ac-pl-row.is-indent { padding-left: 20px; }
.ac-pl-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ac-pl-pct { text-align: right; font-size: var(--fs-xs); color: var(--c-muted); }

/* ── 화면: sales-stats ── */
/* 페이지 고유: 표 안 막대(meter), 순위 */
.st-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-bg-soft); font-size: var(--fs-xs); font-weight: 700; }
.st-rank.is-top { background: var(--c-point-tint); color: var(--c-point-deep); }

/* ── 화면: dashboard ── */
/* 페이지 고유: 표 안 막대, 공지 줄, 빈 칸 안내 */
.db-notices { display: flex; flex-direction: column; gap: 10px; }
.db-notice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
/* 중요 공지는 붉은 바탕, 보통 공지는 초록 바탕 */
.db-notice.is-important { background: var(--c-danger-soft); border-color: transparent; }
.db-notice.is-important .ro-badge { background: var(--c-danger); color: #fff; }
.db-notice.is-important .db-notice-title { color: var(--c-danger); }
.db-notice.is-important .db-notice-date { color: var(--c-danger); }
.db-notice.is-normal { background: var(--c-point-soft); border-color: transparent; }
.db-notice.is-normal .db-notice-title { color: var(--c-point-deep); }
.db-notice.is-normal .db-notice-date { color: var(--c-point-deep); }
.db-notice:hover { box-shadow: var(--sh-sm); }
.db-notice-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-notice-date { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.db-notice-meta { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 10px; }
/* 공지 끄기: 테두리 없이 X 글자만, 조금 크게 */
.db-notice-x { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border: 0; background: none; padding: 0; margin-left: 2px; font-size: 20px; line-height: 1; color: var(--c-muted); cursor: pointer; opacity: .7; }
.db-notice-x:hover { opacity: 1; }
.db-notice.is-important .db-notice-x { color: var(--c-danger); }
.db-notice.is-normal .db-notice-x { color: var(--c-point-deep); }
.db-todo-num { font-size: var(--fs-lg); font-weight: 700; font-feature-settings: 'tnum'; }
.db-todo-num.is-zero { color: var(--c-muted); font-weight: 400; }

/* ── 화면: cancels ── */
.cn-who { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; }
.cn-pay { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; }

/* ── 화면: products ── */
.roo-price-strike {
text-decoration: line-through;
color: var(--c-muted);
font-size: var(--fs-xs);
font-weight: 500;
margin-right: 6px;
}
.roo-stock-warn { color: var(--c-warn); font-weight: 700; }
.roo-stock-empty { color: var(--c-danger); font-weight: 700; }

/* ── 화면: partner-products ── */
/* 파트너 가격 (네이버 스마트스토어 방식): 본사 판매가 / 추가금 / 내 판매가 — 한 칸에 하나씩 */
.pp-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-cell small { display: block; font-size: var(--fs-xs); margin-top: 2px; color: var(--c-muted); }
/* 정가(소비자가)는 문구 없이 취소선으로만 */
.pp-cell small.pp-orig { text-decoration: line-through; }
.pp-cell.is-up { color: var(--c-up); }
.pp-cell.is-down { color: var(--c-down); }
.pp-cell.is-none { color: var(--c-line); }
/* 금액 앞 오르내림 (▲ 5%) */
.pp-cell i { font-style: normal; font-size: var(--fs-xs); margin-right: 6px; }
.pp-cell i.is-up { color: var(--c-up); } .pp-cell i.is-down { color: var(--c-down); }
.pp-cell.is-up b, .pp-cell.is-down b { font-weight: 400; margin-left: 3px; }
.pp-cell.is-up, .pp-cell.is-down { color: var(--c-muted); }
.pp-cell.is-up b { color: var(--c-up); }
.pp-cell.is-down b { color: var(--c-down); }
/* 내 판매가 — 이 화면의 결론값이라 가장 진하게 */
.pp-cell.is-final { color: var(--c-text); font-weight: 600; font-size: var(--fs-md); }
.pp-cell.is-final small { font-weight: 400; }
.pp-cell.is-base { color: var(--c-text-soft); }
/* 추가금: 밑줄 입력칸 하나 (테두리 박스 없음) */
.pp-in { display: inline-flex; align-items: center; gap: 4px; border-bottom: 1.5px solid var(--c-line); transition: border-color .15s ease; }
.pp-in:focus-within, .pp-in.is-override { border-color: var(--c-point); }
.pp-in input { width: 72px; border: 0; outline: 0; background: transparent; text-align: right; font: inherit; font-size: var(--fs-sm); padding: 4px 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pp-in input::-webkit-outer-spin-button, .pp-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-in input::placeholder { color: var(--c-muted); }
.pp-in em { font-style: normal; color: var(--c-muted); font-size: var(--fs-xs); }
/* 판매중 · 판매중지: 상태는 공용 상태 상자(.ro-badge), 바꾸는 버튼은 맨 끝 칸의 공용 버튼 — 따로 만든 알약 모양(.pp-toggle)은 없앰 (대표 10/7) */
tr.is-off td { color: var(--c-muted); }

/* ── 화면: categories (카테고리 목록은 공용 표) ── */
.ro-table tr.is-child td:first-child { padding-left: 48px; }
.ro-table tr.is-child td:first-child b::before { content: '↳ '; color: var(--c-muted); font-weight: 400; }
.ro-table tr[data-edit] { cursor: pointer; }
/* ── 화면: site-info ── */
/* 페이지 고유: 주소 앞머리, 색 고르기, 검색 결과 미리보기 */
.si-slug { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; }
.si-slug-pre { color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; }
.si-color { display: grid; grid-template-columns: 44px minmax(0, 160px); gap: 8px; align-items: center; }
.si-color input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); cursor: pointer; }
.si-serp { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 14px 16px; background: var(--c-bg); max-width: 640px; }
.si-serp-url { font-size: var(--fs-xs); color: var(--c-muted); }
.si-serp-title { font-size: var(--fs-lg); color: #1a0dab; margin: 2px 0 4px; }
.si-serp-desc { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }

/* ── 화면: site-editor ── */
/* 페이지 고유: 왼쪽 페이지 목록 + 오른쪽 코드 */
.se-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 640px; }
.se-list { border-right: 1px solid var(--c-line); padding: 8px 0; }
.se-group { font-size: var(--fs-xs); color: var(--c-muted); padding: 12px 16px 6px; }
.se-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 16px; font-size: var(--fs-sm); cursor: pointer; }
.se-item:hover { background: var(--c-bg-soft); }
.se-item.is-active { background: var(--c-primary-soft); color: var(--c-primary-deep); font-weight: 600; }
.se-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); flex: none; }
.se-main { display: flex; flex-direction: column; min-width: 0; }
.se-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--c-line); }
.se-tabs { display: flex; gap: 4px; }
.se-tab { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-muted); cursor: pointer; font-family: inherit; }
.se-tab.is-active { background: var(--c-text); color: #fff; }
.se-code { flex: 1; width: 100%; min-height: 520px; border: 0; outline: 0; resize: vertical; padding: 16px; font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.6; tab-size: 2; white-space: pre; overflow: auto; background: #fbfbfa; color: var(--c-text); }
.se-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--c-line); }
.se-vars { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7; min-width: 0; }
@media (max-width: 900px) { .se-wrap { grid-template-columns: minmax(0, 1fr); } .se-list { border-right: 0; border-bottom: 1px solid var(--c-line); } }

/* ── 화면: login · signup — 앱(플라워엔 플로)과 같은 구성 (대표 2026-10-09)
      모든 너비: 흰 바탕에 인사말 · 큰 제목 → 밑줄 입력 칸 → 큰 버튼.
      PC(901 이상) : 화면을 반으로 나눠 왼쪽에 그림, 오른쪽에 내용.
      폰 너비(900 이하): 화면 전체가 흰 바탕. 회원가입은 위에 상단바(뒤로 · 화면 이름)가 붙고, 화면이 바뀔 때 옆에서 밀려 들어온다 ── */
body:has(> .roo-login-page) { font-family: var(--ff-base); min-height: 100vh; margin: 0; background: var(--c-bg); overflow-x: hidden; }
.roo-login-page { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; min-height: 100dvh; padding: 0; }
.roo-login-page a, .roo-login-page button, .roo-login-page label { -webkit-tap-highlight-color: transparent; }   /* 폰에서 누를 때 뜨는 파란 덧칠 없애기 */
.roo-login-wrap { width: 100%; }
.roo-login-page > .roo-login-wrap { max-width: 560px; margin: auto 0 0; padding: 32px 20px 0; }   /* 폰: 양옆 20 (앱과 같은 여백) */
.roo-login-page > .roo-login-copy { display: block; margin-bottom: auto; padding: 10px 0 24px; text-align: center; font-size: var(--fs-2xs); color: var(--c-muted); }   /* 저작권 줄: 내용 바로 아래 */
.roo-login-brand { text-align: left; margin-bottom: 28px; }
.roo-login-brand-name { font-size: 32px; font-weight: 700; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.15; }
.roo-login-brand-tag { color: var(--c-muted); font-size: 16px; margin-top: 10px; }
.roo-login-wrap .ro-input-lg { font-size: var(--fs-md); padding: 14px 16px; }
.roo-login-wrap .ro-btn-lg { font-size: var(--fs-md); padding: 16px; font-weight: 700; }
.roo-login-wrap .roo-field-label { font-size: var(--fs-sm); }
.roo-login-title { display: none; }
.roo-login-page.is-app .roo-login-brand, .roo-login-wrap > .roo-auth-foot, .roo-login-wrap > .roo-page-credit { display: none; }
.roo-login-view { display: none; }
.roo-login-view.is-on { display: block; }
.roo-login-vtitle { margin: 0 0 var(--sp-2); font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; color: var(--c-text); }
.roo-login-vsub { margin: 0 0 var(--sp-5); font-size: 16px; color: var(--c-muted); }
.roo-login-vtitle + .ro-stack { margin-top: 22px; }
.roo-login-foot { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); }
.roo-login-foot a { color: var(--c-point-deep); font-weight: 600; }
.roo-login-back { align-self: center; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); }
.roo-pw { position: relative; display: block; }
.roo-pw > .ro-input { width: 100%; padding-right: 44px; }
.roo-pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 6px; color: var(--c-muted); cursor: pointer; line-height: 0; }
.roo-pw-eye svg { width: 22px; height: 22px; }

/* 인사말 = 앱 로그인 화면 그대로: 동동 뜬 플로 얼굴 + 꽃 셋 · 잎 하나 → 큰 글씨 → 한 줄 안내 → 28 띄우고 입력 칸 */
.roo-login-page .roo-hello { display: flex; margin-bottom: 28px; }
.roo-login-page .roo-hello-face { width: 174px; height: 174px; margin: 20px 0 32px; }
.roo-login-page .roo-hello-face::before { inset: -20px -48px; background-size: 48px, 34px, 25px, 28px; background-position: left 0 top 25px, right 3px bottom 20px, right 20px top 0, left 22px bottom 0; }
.roo-login-page .roo-hello strong { font-size: 27px; line-height: 1.15; letter-spacing: -0.02em; }
.roo-login-page .roo-hello span { margin-top: 10px; font-size: 15px; }
/* 로그인 칸 사이 간격 = 앱과 같은 값: 이름표와 칸은 붙이고, 칸 14, 줄 16, 버튼 사이 10 */
.roo-login-page [data-view="login"] .ro-stack { gap: 16px; }
.roo-login-page [data-view="login"] .ro-field + .ro-field { margin-top: -2px; }
/* 체크 칸: 20 · 모서리 6 · 켜면 초록 바탕에 흰 체크 (앱과 같은 모양) */
.roo-login-page .ro-checkbox { gap: 10px; font-size: var(--fs-sm); color: var(--c-text-soft); }
.roo-login-page .ro-checkbox input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid #bdb6b9; border-radius: 6px; background: #fff center / 13px no-repeat; cursor: pointer; }
.roo-login-page .ro-checkbox input:checked { border-color: var(--c-point); background-color: var(--c-point); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }
/* 입력 칸: 아래쪽 줄만. 적는 중인 칸은 초록 굵은 줄 (앱과 같은 모양). 글자 16 = 폰이 입력할 때 화면을 확대하지 않는 크기 */
.roo-login-page .ro-input:not([type="file"]), .roo-login-page .ro-select { height: 46px; padding: 0 2px; border: 0; border-bottom: 1.2px solid #cfc8cb; border-radius: 0; background-color: transparent; font-size: 16px; box-shadow: none; }
.roo-login-page .roo-pw > .ro-input { padding-right: 44px; }
.roo-login-page .ro-input:not([type="file"]):focus, .roo-login-page .ro-select:focus { border-bottom: 2px solid var(--c-point); }
.roo-login-page .ro-input::placeholder { color: #c4bdc0; }
.roo-login-page .roo-field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.roo-login-page .ro-field { gap: 0; }
.roo-login-page .ro-stack { gap: 22px; }
.roo-login-page .ro-row-form-2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }   /* 한 줄에 한 칸 (넓은 PC 에서만 두 칸) */
/* 로그인 상태 유지 · 비밀번호 재설정 한 줄, 큰 버튼 둘 */
.roo-login-page .roo-login-opt { display: flex; justify-content: space-between; align-items: center; }
.roo-login-page .roo-login-reset { display: inline; font-size: var(--fs-sm); color: var(--c-muted); }
.roo-login-page .ro-btn-lg { height: 56px; padding: 0 20px; border-radius: 10px; font-size: 16px; font-weight: 700; }
.roo-login-page .roo-login-join { display: inline-flex; margin-top: -6px; background: var(--c-bg); border: 1px solid var(--c-line); color: var(--c-text); }

/* ── 회원가입 (signup.html) = 앱 회원가입 그대로: 고르는 화면(큰 제목 + 칸 둘) → 고르면 그 가입 화면만 ── */
.roo-login-page:not(.is-app) > .roo-login-wrap { display: flex; flex: 1 0 auto; flex-direction: column; max-width: 820px; margin: 0; padding: 20px 20px 40px; }   /* 상단바 아래 남는 높이를 채운다 */
.roo-login-page:not(.is-app) > .roo-login-copy { display: none; }   /* 저작권 줄은 로그인 화면에만 (앱과 같게) */
/* 고르는 칸 둘은 제목 아래 남는 자리의 세로 가운데에 둔다 (대표 10/9) */
.roo-login-page[data-step="pick"] .roo-join-pick { margin-top: auto; }
.roo-login-page[data-step="pick"] #join-foot { margin-bottom: auto; }
/* 칸 둘이 「제목 아래 ~ 화면 바닥」의 정확히 가운데에 오게: 아래쪽 여백을 없애고, 칸 아래의 「이미 계정이…」 줄(높이 + 간격)만큼 칸 위에도 같은 자리를 둔다 */
.roo-login-page[data-step="pick"]:not(.is-app) > .roo-login-wrap { padding-bottom: 0; }
.roo-login-page[data-step="pick"] .roo-join-pick { padding-top: 42px; }
.roo-login-page .roo-join-pick { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 20px; padding-top: 24px; }
.roo-login-page .roo-join-opt { height: 170px; min-height: 0; padding: 18px; border: 0; border-radius: 20px; box-shadow: none; }
.roo-login-page .roo-join-opt[data-pick="partner"] { background: #f2f7ef; }
.roo-login-page .roo-join-opt[data-pick="florist"] { background: #fdf3ed; }
.roo-login-page .roo-join-opt strong { font-size: 22px; letter-spacing: -0.03em; }
.roo-login-page .roo-join-opt em { margin-top: 6px; max-width: none; font-size: 14px; }
.roo-login-page .roo-join-opt > span { position: absolute; left: 18px; top: 18px; display: block; max-width: calc(100% - 188px); }   /* 글은 항상 왼쪽 위 (버튼은 내용을 가운데에 두려 해서 자리를 직접 잡는다) */
.roo-login-page .roo-join-opt img { right: 6px; bottom: 6px; width: 164px; max-width: none; height: 150px; object-fit: contain; object-position: right bottom; }
.roo-join-back { display: none; }
.roo-join-sec { margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--c-text); }
.roo-join-sec:first-child { margin-top: 0; }
.roo-login-page .roo-img-uploader { padding: var(--sp-5) var(--sp-4); margin-top: 8px; }
.roo-login-page [data-doc-pick] [data-role="preview"] { margin-top: 8px; }
/* 가입 칸 묶음: 상자 없이 흰 바탕에 그대로 */
.roo-login-wrap > .ro-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.roo-login-wrap > .ro-card > .roo-card-head { padding: 0 0 22px; border: 0; }
.roo-login-wrap > .ro-card > .roo-card-head .roo-card-title { display: none; }   /* 위의 큰 제목과 같은 말이라 뺀다 */
.roo-login-wrap > .ro-card > .roo-card-body { padding: 0; border: 0; border-radius: 0; background: none; }   /* 로그인 · 회원가입은 박스 없이 (공용 박스 규칙의 테두리가 들어오지 않게) */
.roo-login-wrap > .ro-card > .roo-card-foot { border: 0; border-radius: 0; background: none; }
.roo-login-wrap form .roo-auth-foot { margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--fs-sm); }
/* 상단바: 왼쪽 위 뒤로 가기 + 그 화면의 이름. 앱의 공용 상단바와 같은 모양 (높이 52 · 제목 17 굵게).
   화면 위에 고정된 띠가 아니라 그 화면의 맨 윗줄이다 → 화면이 밀려 들어올 때 같이 움직인다 (대표 10/9) */
.roo-app-bar { display: flex; align-items: center; align-self: stretch; flex: none; height: 52px; background: var(--c-bg); }
.roo-app-bar[hidden] { display: none; }
.roo-app-bar-back { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: 2px; color: var(--c-text); }
.roo-app-bar-back svg { width: 22px; height: 22px; }
.roo-app-bar-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); }
/* 로그인에서 넘어간 화면(비밀번호 재설정): 상단바 아래 위쪽부터 놓고, 저작권 줄은 뺀다 */
.roo-app-bar:not([hidden]) + .roo-login-wrap { margin-top: 0; padding-top: 24px; }
.roo-app-bar:not([hidden]) ~ .roo-login-copy { display: none; }
[data-view="reset"] .roo-login-vtitle { display: none; }   /* 화면 이름은 상단바에 있다 */
/* 가입 화면(고른 뒤)에서는 화면 이름이 상단바에 있다 → 아래에는 한 줄 안내만 */
.roo-login-page[data-step="form"] .roo-login-brand-name { display: none; }
.roo-login-page[data-step="form"] .roo-login-brand { display: none; }   /* 가입 화면에는 안내 글 없이 바로 칸부터 (대표 10/9) */
.roo-login-page[data-step="form"] .roo-login-brand-tag { margin-top: 0; font-size: var(--fs-sm); }
.roo-login-art { display: none; }

/* ── 푸시 화면 (대표 10/9: 「모바일 화면이 반만 있는 느낌」) ──
   로그인 → 회원가입 · 비밀번호 재설정 → 가입 화면으로 넘어갈 때, 앞 화면은 그대로 있고 새 화면이 오른쪽에서 밀려 들어와 덮는다.
   뒤로 가면 지금 화면이 오른쪽으로 빠지고 앞 화면이 드러난다. PC 에서는 오른쪽 절반 안에서만 움직인다 (왼쪽 그림은 가만히).
   화면 전환 기능이 없는 브라우저에서는 움직임 없이 바로 바뀐다 */
.roo-login-page { view-transition-name: roo-panel; background: var(--c-bg); }
.roo-login-art { view-transition-name: roo-art; }
::view-transition-old(roo-panel), ::view-transition-new(roo-panel) { mix-blend-mode: normal; animation: none; }
::view-transition-new(roo-panel) { animation: roo-vt-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; box-shadow: -14px 0 36px rgba(42, 38, 40, 0.12); }
html:active-view-transition-type(back)::view-transition-new(roo-panel) { animation: none; z-index: 0; box-shadow: none; }
html:active-view-transition-type(back)::view-transition-old(roo-panel) { animation: roo-vt-out 0.32s cubic-bezier(0.5, 0, 0.9, 0.4) both; z-index: 1; }
::view-transition-old(roo-art) { display: none; }
::view-transition-new(roo-art) { animation: none; }
::view-transition-group(roo-art) { z-index: 2; }
@keyframes roo-vt-in { from { transform: translateX(var(--roo-vt-shift, 100%)); } to { transform: none; } }
@keyframes roo-vt-out { from { transform: none; } to { transform: translateX(var(--roo-vt-shift, 100%)); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-new(roo-panel), ::view-transition-old(roo-panel) { animation: none !important; } }

@media (min-width: 901px) {
  /* 화면을 반으로: 왼쪽 절반은 그림(스크롤해도 고정), 오른쪽 절반이 내용 */
  .roo-login-page { padding-left: 50vw; }
  .roo-login-art { display: block; position: fixed; left: 0; top: 0; z-index: 1; width: 50vw; height: 100vh; background: #f8efe1 url('assets/login-bg-pc.png') left center / cover no-repeat; }
  html:has(.roo-login-page) { --roo-vt-shift: 50%; }   /* 화면 틀은 화면 전체 폭이고 내용은 오른쪽 절반 → 절반만 밀면 오른쪽 끝에서 들어온다 */
  .roo-login-page > .roo-login-wrap { max-width: clamp(456px, 31vw, 560px); padding: 48px 48px 0; }
  .roo-login-page > .roo-login-copy { padding-bottom: 32px; }
  /* 로그인: 인사말과 플로를 크게 */
  .roo-login-page .roo-hello-face { width: 216px; height: 216px; margin: 24px 0 40px; }
  .roo-login-page .roo-hello-face::before { inset: -24px -58px; background-size: 58px, 42px, 31px, 34px; background-position: left 0 top 30px, right 4px bottom 24px, right 24px top 0, left 26px bottom 0; }
  .roo-login-page .roo-hello strong { font-size: 34px; line-height: 1.2; }
  .roo-login-page .roo-hello span { margin-top: 12px; font-size: 16px; }
  /* 회원가입: 오른쪽 절반을 넓게 쓴다. 고르는 화면의 큰 제목은 가운데 · 크게, 칸 둘은 그 아래 남는 자리의 세로 가운데 */
  .roo-login-page:not(.is-app) > .roo-login-wrap { max-width: 820px; padding: clamp(20px, 6vh, 72px) clamp(40px, 4.5vw, 80px) 64px; }
  .roo-app-bar { padding-left: 10px; }
  .roo-login-page[data-step="form"]:not(.is-app) > .roo-login-wrap { padding-top: 28px; }   /* 안내 글이 없으니 상단바 아래 바로 칸이 시작한다 */
  .roo-login-page .roo-login-brand-name { font-size: 40px; }
  .roo-login-page[data-step="pick"] .roo-login-brand { text-align: center; margin-bottom: 0; }
  .roo-login-page[data-step="pick"] .roo-login-brand-name { font-size: 46px; }
  .roo-login-page[data-step="pick"] .roo-login-brand-tag { font-size: 18px; }
  .roo-login-page .roo-join-pick { gap: 18px; margin-bottom: 24px; }
  .roo-login-page[data-step="pick"] .roo-join-pick { padding-top: 46px; }
  .roo-login-page[data-step="pick"]:not(.is-app) > .roo-login-wrap { padding-bottom: 0; }
  .roo-login-page .roo-join-opt { height: 220px; padding: 24px; }
  .roo-login-page .roo-join-opt strong { font-size: 24px; }
  .roo-login-page .roo-join-opt em { font-size: 15px; }
  .roo-login-page .roo-join-opt > span { left: 24px; top: 24px; max-width: calc(100% - 234px); }
  .roo-login-page .roo-join-opt img { right: 10px; bottom: 10px; width: 210px; height: 190px; }
}
@media (min-width: 1280px) {
  /* 넓은 화면: 가입 칸은 한 줄에 두 칸, 고르는 칸 둘은 가로로 나란히 크게 (글은 위, 그림은 아래에 크게) */
  .roo-login-page:not(.is-app) .ro-row-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
  .roo-login-page .roo-join-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roo-login-page .roo-join-opt { height: clamp(300px, 46vh, 460px); padding: 28px; }
  .roo-login-page .roo-join-opt strong { font-size: 26px; }
  .roo-login-page .roo-join-opt em { font-size: 16px; }
  .roo-login-page .roo-join-opt > span { left: 28px; top: 28px; right: 28px; max-width: none; }
  .roo-login-page .roo-join-opt img { width: 78%; max-width: 280px; height: calc(100% - 132px); }
}
@media (max-width: 1279px) {
  /* 세로로 쌓이는 너비: 고르는 칸 둘이 제목 아래 남는 높이를 나눠 채운다 — 화면이 길면 칸 · 글 · 그림이 같이 커진다 (대표 10/9 「빈 공간 활용 · 박스 비율」) */
  .roo-login-page[data-step="pick"] .roo-join-pick { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 22px); margin: 0; padding: clamp(24px, 4vh, 44px) 0 0; }
  .roo-login-page[data-step="pick"] .roo-join-opt { flex: 1 1 170px; height: auto; min-height: 170px; max-height: min(460px, 68vw); padding: clamp(18px, 3vh, 30px); }
  .roo-login-page[data-step="pick"] .roo-join-opt strong { font-size: clamp(22px, 3.2vh, 30px); }
  .roo-login-page[data-step="pick"] .roo-join-opt em { font-size: clamp(14px, 1.9vh, 17px); }
  .roo-login-page[data-step="pick"] .roo-join-opt > span { left: clamp(18px, 3vh, 30px); top: clamp(18px, 3vh, 30px); max-width: 46%; }
  .roo-login-page[data-step="pick"] .roo-join-opt img { right: 8px; bottom: 8px; width: 54%; height: calc(100% - 16px); }
  .roo-login-page[data-step="pick"] #join-foot { margin: 0; padding: clamp(18px, 3vh, 30px) 0 clamp(20px, 4vh, 40px); }
}

/* ── 화면: dev-phone (개발자 › 폰 알림 연결) — 읽을 앱 · 항목 표의 칸 폭 ── */
.dp-rules { table-layout: fixed; width: 100%; min-width: 0; }
.dp-rules col.c-app { width: 24%; } .dp-rules col.c-name { width: 18%; } .dp-rules col.c-kind { width: 170px; } .dp-rules col.c-del { width: 84px; }
.dp-rules td > .ro-input, .dp-rules td > .ro-select { width: 100%; }

/* ── 화면: signup 가입 종류 고르기 (판매 파트너 · 제작 꽃집) — 흰 바탕 칸 둘. 글은 왼쪽 위, 그림은 오른쪽 아래. 고른 칸은 초록 테두리 ── */
.roo-join-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.roo-join-opt { position: relative; display: block; min-height: 168px; padding: var(--sp-4); text-align: left; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-2xl); cursor: pointer; font: inherit; color: inherit; }
.roo-join-opt:hover { border-color: var(--c-point); }
.roo-join-opt.is-on { border-color: var(--c-point); box-shadow: 0 0 0 1px var(--c-point); }
.roo-join-opt strong { display: block; font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); }
.roo-join-opt em { display: block; margin-top: var(--sp-1); max-width: 55%; font-style: normal; font-size: var(--fs-sm); color: var(--c-muted); word-break: keep-all; }
.roo-join-opt img { position: absolute; right: 8px; bottom: 8px; width: 48%; max-width: 132px; height: auto; }
@media (max-width: 480px) { .roo-join-pick { grid-template-columns: minmax(0, 1fr); } }

/* ── 화면: notifications ── */
.nt-body-cell { font-size: var(--fs-xs); color: var(--c-text-soft); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 화면: notification-templates ── */
.tpl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.tpl-name { font-weight: 800; font-size: var(--fs-base); color: var(--c-text); }
.tpl-row { display: flex; gap: 12px; align-items: center; font-size: var(--fs-xs); margin: 8px 0; }
.tpl-row label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.tpl-field { margin-bottom: 10px; }
.tpl-field label { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; margin-bottom: 4px; }
.tpl-field input, .tpl-field textarea { font-size: var(--fs-xs); }
.tpl-help { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 4px; line-height: 1.5; }
.tpl-help code { background: var(--c-bg-soft); padding: 1px 4px; border-radius: 3px; font-size: var(--fs-2xs); }

/* ── 화면: coupons (쿠폰) ── */
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.cp-coupon { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-deep)); color: white; padding: var(--sp-4); position: relative; }
.cp-coupon.t-percent { background: linear-gradient(135deg, #F4AEB8, #E48A98); }
.cp-coupon.t-fixed { background: linear-gradient(135deg, #7FAF8E, #5E8E6E); }
.cp-coupon.t-ship { background: linear-gradient(135deg, #6A9BB8, #4A7B98); }
.cp-coupon.t-vip { background: linear-gradient(135deg, #2a1a0e, #4a3220); border: 1px solid #C9A86A; }
.cp-coupon::before, .cp-coupon::after { content: ''; position: absolute; bottom: -10px; width: 20px; height: 20px; background: var(--c-bg-page); border-radius: 50%; }
.cp-coupon::before { left: -10px; }
.cp-coupon::after { right: -10px; }
.cp-amount { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.cp-amount-unit { font-size: var(--fs-base); font-weight: 700; }
.cp-name { font-size: var(--fs-sm); font-weight: 800; margin-top: 8px; }
.cp-cond { font-size: var(--fs-2xs); opacity: 0.85; margin-top: 4px; }
.cp-tag { display: inline-block; padding: 2px 8px; background: rgba(255,255,255,0.2); border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; margin-top: 8px; }
.cp-body { padding: var(--sp-3) var(--sp-4); padding-top: 24px; }
.cp-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: var(--fs-2xs); border-bottom: 1px dashed var(--c-line-soft); }
.cp-row:last-child { border-bottom: 0; }
.cp-row-l { color: var(--c-muted); }
.cp-row-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-progress-bar { width: 100%; height: 4px; background: var(--c-line-soft); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.cp-progress-fill { height: 100%; background: var(--c-success); }
.cp-add-card { background: var(--c-bg); border: 2px dashed var(--c-line); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; cursor: pointer; color: var(--c-muted); transition: all var(--tr-fast); }
.cp-add-card em { font-size: 32px; font-style: normal; }
.cp-add-card:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }

/* ── 화면: events (이벤트) ── */
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ev-cover { aspect-ratio: 16/9; position: relative; display: flex; align-items: flex-end; padding: var(--sp-4); color: white; overflow: hidden; }
.ev-cover.t-mom { background: linear-gradient(135deg, #E8C5D6, #C99BBC, #A87AA0); }
.ev-cover.t-quiz { background: linear-gradient(135deg, #2a1a0e, #4a3220, #6a5236); }
.ev-cover.t-stamp { background: linear-gradient(135deg, #ABCFC0, #7FAF8E, #5E8E6E); }
.ev-cover.t-roulette { background: linear-gradient(135deg, #F4AEB8, #E48A98, #C66978); }
.ev-cover.t-buy { background: linear-gradient(135deg, #6A9BB8, #4A7B98, #2F5C78); }
.ev-cover.t-share { background: linear-gradient(135deg, #FFD7B0, #E8B888, #C8985E); }
.ev-cover-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.18; background-size: cover; }
.ev-cover-bg svg { width: 100%; height: 100%; }
.ev-cover-content { position: relative; z-index: 1; width: 100%; }
.ev-status-pill { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,0.22); backdrop-filter: blur(6px); font-size: var(--fs-2xs); font-weight: 800; margin-bottom: 8px; letter-spacing: 0.04em; }
.ev-status-pill.is-live::before { content: '●'; color: #FF5252; margin-right: 4px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.ev-title { font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; }
.ev-subtitle { font-size: var(--fs-2xs); opacity: 0.85; margin-top: 4px; }
.ev-body { padding: var(--sp-3) var(--sp-4); }
.ev-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px dashed var(--c-line-soft); }
.ev-meta-l { font-size: var(--fs-2xs); color: var(--c-muted); text-transform: uppercase; font-weight: 700; }
.ev-meta-v { font-size: var(--fs-xs); font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ev-mech { font-size: var(--fs-2xs); color: var(--c-muted); margin-bottom: 12px; line-height: 1.5; }
.ev-mech b { color: var(--c-text); font-weight: 700; }
.ev-progress { font-size: var(--fs-2xs); color: var(--c-muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.ev-bar { height: 6px; background: var(--c-bg-soft); border-radius: 3px; overflow: hidden; }
.ev-bar-fill { height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-deep)); border-radius: 3px; }
.ev-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: var(--sp-3); border-top: 1px solid var(--c-line-soft); background: var(--c-bg-soft); }
.ev-stat { text-align: center; }
.ev-stat-n { font-size: var(--fs-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.ev-stat-l { font-size: var(--fs-2xs); color: var(--c-muted); text-transform: uppercase; margin-top: 2px; font-weight: 700; }
.ev-add { background: var(--c-bg); border: 2px dashed var(--c-line); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 380px; cursor: pointer; color: var(--c-muted); transition: all var(--tr-fast); }
.ev-add:hover { border-color: var(--c-primary); color: var(--c-primary-deep); background: var(--c-primary-tint); }
.ev-add-icon { font-size: 36px; }

/* ── 화면: options (옵션) ── */
.op-card-title { font-weight: 800; font-size: var(--fs-md); color: var(--c-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-card-meta { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.op-cat-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.op-val-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--c-line-soft); }
.op-val-row:last-of-type { border-bottom: 0; }
.op-val-row.is-default { background: var(--c-primary-tint); border-radius: var(--r-md); padding-left: 10px; padding-right: 10px; }
.op-val-name { font-size: var(--fs-xs); font-weight: 600; color: var(--c-text); }
.op-val-sub { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 2px; }
.op-val-default { font-size: var(--fs-2xs); color: var(--c-primary-deep); font-weight: 700; margin-left: 6px; }
.op-val-price { font-size: var(--fs-2xs); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-width: 70px; }
.op-val-price.is-pos { color: var(--c-success); }
.op-val-price.is-neg { color: var(--c-danger); }
.op-val-price.is-zero { color: var(--c-muted); }
.roo-card-body > .ro-btn-dashed { margin-top: 8px; }

/* ── 화면: supplier-detail (공급사 상세) ── */
.sd-head {
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 20px;
align-items: center;
}
.sd-logo {
width: 88px; height: 88px;
border-radius: 18px;
background: linear-gradient(135deg, #6E8FC9 0%, #4E6BA8 100%);
display: flex; align-items: center; justify-content: center;
font-size: 38px; font-weight: 700; color: #fff;
}
.sd-info h1 { margin: 0 0 6px; font-size: var(--fs-xl); font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-2xs); color: var(--c-muted); }
.sd-meta strong { color: var(--c-text); font-weight: 600; }
.sd-card-title { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.sd-def { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; font-size: var(--fs-xs); }
.sd-def dt { color: var(--c-muted); font-weight: 600; }
.sd-def dd { margin: 0; color: var(--c-text); font-weight: 600; word-break: break-all; }
.sd-def dd.is-empty { color: var(--c-muted); font-weight: 400; font-style: italic; }

/* ── 화면: banners (배너) ── */
.bn-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-3); }
.bn-list { padding: var(--sp-3); display: flex; flex-direction: column; gap: 10px; }
.bn-item { display: grid; grid-template-columns: 28px 200px 1fr 90px 80px 80px 80px; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--c-line); border-radius: var(--r-lg); transition: var(--tr-fast); }
.bn-item:hover { background: var(--c-bg-soft); border-color: var(--c-primary); }
.bn-item.is-active { border-left: 3px solid var(--c-success); background: var(--c-bg-soft); padding-left: 8px; }
.bn-item.is-paused { opacity: 0.55; }
.bn-handle { color: var(--c-muted); cursor: grab; text-align: center; font-size: var(--fs-sm); font-weight: 800; }
.bn-thumb { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; position: relative; }
.bn-thumb-bg { position: absolute; inset: 0; display: flex; align-items: center; padding: 12px; color: white; }
.bn-thumb.t-mom { background: linear-gradient(135deg, #E8C5D6, #C99BBC, #A87AA0); }
.bn-thumb.t-vip { background: linear-gradient(135deg, #2a1a0e, #4a3220); border: 1px solid #C9A86A; }
.bn-thumb.t-spring { background: linear-gradient(135deg, #FFD7B0, #E8B888, #C8985E); }
.bn-thumb.t-newin { background: linear-gradient(135deg, #ABCFC0, #7FAF8E); }
.bn-thumb.t-blue { background: linear-gradient(135deg, #6A9BB8, #4A7B98); }
.bn-thumb.t-pink { background: linear-gradient(135deg, #F4AEB8, #E48A98); }
.bn-thumb-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bn-thumb-title { font-weight: 800; font-size: var(--fs-2xs); line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.bn-thumb-cta { font-size: var(--fs-2xs); opacity: 0.85; margin-top: 2px; }
.bn-info-name { font-size: var(--fs-xs); font-weight: 800; line-height: 1.3; }
.bn-info-meta { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.bn-info-meta span { display: flex; align-items: center; gap: 3px; }
.bn-period { font-size: var(--fs-2xs); }
.bn-period-d { font-weight: 700; font-variant-numeric: tabular-nums; }
.bn-period-r { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 1px; }
.bn-stat { text-align: right; font-size: var(--fs-2xs); }
.bn-stat-n { font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.bn-stat-l { font-size: var(--fs-2xs); color: var(--c-muted); text-transform: uppercase; }
.bn-toggle { width: 36px; height: 20px; background: var(--c-line); border-radius: 10px; position: relative; cursor: pointer; flex-shrink: 0; }
.bn-toggle::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: var(--tr-fast); }
.bn-toggle.is-on { background: var(--c-success); }
.bn-toggle.is-on::before { transform: translateX(16px); }
.bn-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.bn-add { padding: var(--sp-3); }
/* preview */
.bn-preview { position: sticky; top: 16px; }
.bn-preview-h { font-size: var(--fs-xs); font-weight: 800; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.bn-mobile-frame { width: 240px; height: 420px; margin: 0 auto; border-radius: 28px; background: #1a1a1a; padding: 8px; }
.bn-mobile-screen { width: 100%; height: 100%; border-radius: 20px; background: #f5f3ee; overflow: hidden; position: relative; }
.bn-app-header { padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e8e3da; }
.bn-app-logo { font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0.04em; }
.bn-mob-hero { aspect-ratio: 16/10; background: linear-gradient(135deg, #E8C5D6, #C99BBC, #A87AA0); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: white; }
.bn-mob-hero-title { font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; }
.bn-mob-note { padding: 12px; text-align: center; }
.bn-mob-hero-cta { display: inline-block; margin-top: 6px; padding: 3px 10px; background: white; color: #1a1a1a; border-radius: 14px; font-size: var(--fs-2xs); font-weight: 700; }
.bn-rules { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); background: var(--c-bg-soft); font-size: var(--fs-2xs); color: var(--c-muted); line-height: 1.6; border-radius: var(--r-md); margin-top: 14px; border: 1px solid var(--c-line); }
.bn-rules b { color: var(--c-text); }

/* ── 화면: inquiries (문의) ── */

/* ── 화면: shop-settings (쇼핑몰 설정 · 알림톡 미리보기) ── */
/* 페이지 고유: 알림톡 문구 팝업 = 왼쪽 입력 + 오른쪽 미리보기 */
/* 미리보기가 붙는 팝업은 넓게 */
.ro-modal.roo-pop:has(.tp-wrap) { max-width: var(--w-modal-lg); }
.tp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.tp-prev { position: sticky; top: 0; }
.tp-prev-t { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); margin-bottom: 8px; }
.tp-talk { background: #b2c7d9; border-radius: var(--r-lg); padding: 14px 12px; }
.tp-ch { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: #33414d; margin-bottom: 6px; }
.tp-bubble { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tp-head { background: #fae100; color: #3c1e1e; font-size: var(--fs-xs); font-weight: 700; padding: 7px 12px; border-radius: 12px 12px 0 0; }
.tp-img { display: block; width: 100%; }
.tp-emph-box { padding: 12px 12px 0; }
.tp-emph-sub { font-size: var(--fs-xs); color: var(--c-muted); }
.tp-emph-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.tp-text { padding: 12px; font-size: var(--fs-sm); line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.tp-var { background: var(--c-point-soft); color: var(--c-point-deep); border-radius: 3px; padding: 0 2px; }
.tp-btn { border-top: 1px solid var(--c-line); padding: 10px; text-align: center; font-size: var(--fs-sm); color: var(--c-text); }
.tp-bubble > *:last-child, #tp-prev-btns .tp-btn:last-child { border-radius: 0 0 12px 12px; }
/* 아이템 리스트 — 헤더, 큰 항목, 「이름 : 값」 표 */
.tp-item-box { padding: 12px 12px 0; }
.tp-item-header { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
.tp-hl { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tp-hl-txt { flex: 1; min-width: 0; }
.tp-hl-title { font-size: var(--fs-sm); font-weight: 600; }
.tp-hl-desc { font-size: var(--fs-xs); color: var(--c-muted); }
.tp-hl-img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; }
.tp-item-row { display: flex; gap: 10px; font-size: var(--fs-xs); line-height: 1.7; }
.tp-item-row:first-child { margin-top: 10px; }
.tp-item-k { width: 72px; flex: none; color: var(--c-muted); }
.tp-item-v { flex: 1; min-width: 0; text-align: right; word-break: break-all; }
.tp-item-sum { display: flex; gap: 10px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; margin-top: 8px; }
.tp-extra { padding: 0 12px 12px; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; white-space: pre-wrap; }
.tp-ad { padding: 0 12px 12px; font-size: var(--fs-xs); color: #6b7a86; line-height: 1.5; }
.tp-btn-ac { background: #fae100; color: #3c1e1e; font-weight: 600; }
/* 아직 안 적은 자리 — 무엇이 들어가는지만 흐리게 */
.is-ph { color: #9aa5ad; font-weight: 400; }
/* 지금 적고 있는 칸이 미리보기 어디인지 */
/* 지금 적고 있는 칸이 미리보기 어디인지 */
[data-pp-target].is-on { background: var(--c-point-soft); box-shadow: 0 0 0 2px var(--c-point-deep); border-radius: 4px; }
.ro-field[data-pp].is-on > .roo-field-label, .ro-row[data-pp].is-on > .ro-field > .roo-field-label { color: var(--c-point-deep); }
.tp-hl-imgwrap { flex: none; }
.tp-img-ph { display: flex; align-items: center; justify-content: center; background: #eef1f3; color: #9aa5ad; font-size: var(--fs-xs); }
#tp-prev-img-ph { aspect-ratio: 2 / 1; }
.tp-hl-img.tp-img-ph { flex: none; }
/* 표 한 줄: 이름 · 값 · 빼기 */
.tp-item-edit { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-2); }
/* 칸 밑 한 줄: 왼쪽은 그 칸의 규칙, 오른쪽은 지금 쓴 글자 수 */
.tp-help { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.tp-help-n { flex: none; font-variant-numeric: tabular-nums; }
.tp-help-n.is-over { color: var(--c-danger); font-weight: 600; }
.et-frame { border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; padding: 8px; max-height: 560px; overflow: auto; }
/* 직원이 볼 메뉴 고르기 — 자리잡기만, 모양은 공용 .ro-checkbox */
.st-menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3) var(--sp-5); }
.st-menu-list { font-size: var(--fs-sm); color: var(--c-text-soft); }
@media (max-width: 1100px) { .tp-wrap { grid-template-columns: minmax(0, 1fr); } .tp-prev { position: static; max-width: 320px; } }

/* ── 화면: shops-pool (꽃집 풀) ── */
/* ── KPI strip ── */
.roo-stat-label svg { width: 13px; height: 13px; }
.ro-stat[data-tone="ari"] .roo-stat-num { color: #C76B4F; }
.ro-stat[data-tone="bee"] .roo-stat-num { color: #5A8FA8; }
.ro-stat[data-tone="warn"] .roo-stat-num { color: var(--c-warn); }
.ro-stat[data-tone="block"] .roo-stat-num { color: var(--c-danger); }
/* ── Filter bar ── */
.sp-filterbar {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-3); margin-bottom: var(--sp-3);
background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg);
flex-wrap: wrap;
}
.sp-filterbar-search { flex: 1; min-width: 240px; position: relative; }
.sp-filterbar-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--c-muted); }
.sp-filterbar-search input {
width: 100%; padding: 8px 12px 8px 32px; font-size: var(--fs-xs);
border: 1px solid var(--c-line); border-radius: var(--r-md);
background: var(--c-bg-soft); transition: all var(--tr-fast);
}
.sp-filterbar-search input:focus { outline: none; border-color: var(--c-primary); background: var(--c-bg); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.ro-card.is-blocked::after {
content: '차단'; position: absolute; top: 12px; right: 12px;
background: var(--c-danger); color: #fff; font-size: var(--fs-2xs); font-weight: 700;
padding: 3px 9px; border-radius: var(--r-pill);
}
.sp-card-fav {
position: absolute; top: 12px; right: 12px;
background: transparent; border: 0; cursor: pointer; padding: 4px;
color: var(--c-line); transition: all var(--tr-fast);
}
.sp-card-fav:hover { color: #E8C77A; }
.sp-card-fav.is-on { color: #E8C77A; }
.sp-card-fav svg { width: 18px; height: 18px; fill: currentColor; }
.sp-src-tag {
font-size: var(--fs-2xs); font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill);
letter-spacing: 0.02em;
}
.sp-src-tag.is-ari { background: #FCEAE2; color: #8C3F25; }
.sp-src-tag.is-bee { background: #DCEAF1; color: #2C5872; }
.sp-src-tag.is-jkt { background: #E8E0F5; color: #5A4280; }
.sp-src-tag.is-direct { background: var(--c-success-soft); color: var(--c-success); }
.sp-stat-val { font-size: var(--fs-md); font-weight: 800; color: var(--c-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.sp-stat-val.is-good { color: var(--c-success); }
.sp-stat-val.is-warn { color: var(--c-warn); }
.sp-stat-val.is-bad { color: var(--c-danger); }
.sp-stat-lbl { font-size: var(--fs-2xs); color: var(--c-muted); font-weight: 600; margin-top: 4px; letter-spacing: 0.02em; }
/* ── View toggle ── */
.sp-view-toggle { display: flex; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
/* ── Table view ── */
.ro-table thead th {
background: var(--c-bg-soft); padding: 10px 12px;
font-size: var(--fs-2xs); font-weight: 700; color: var(--c-muted);
letter-spacing: 0.04em; text-transform: uppercase;
border-bottom: 1px solid var(--c-line); text-align: left;
}
/* ── Empty state ── */
.ro-empty svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: 0.4; }
/* ── Result count ── */
.sp-result-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 0 4px; margin-bottom: var(--sp-2); font-size: var(--fs-2xs); color: var(--c-muted);
}

/* ── 화면: shops-contract (계약 꽃집) ── */
/* Layout: full width content with right-slide filter drawer */
.sc-layout { display: block; }
/* Filter drawer (right slide-in) */
.sc-filters {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
background: var(--c-bg);
border-left: 1px solid var(--c-line);
box-shadow: -8px 0 32px rgba(58, 47, 37, 0.08);
padding: 0;
overflow-y: auto;
z-index: 70;
transform: translateX(100%);
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.sc-filters.is-open { transform: translateX(0); }
.sc-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-line-soft); position: sticky; top: 0; background: var(--c-bg); z-index: 2; }
.sc-filters-head h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.sc-filters-head-active-count { background: var(--c-primary); color: #fff; font-size: var(--fs-2xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); }
.sc-filters-close { background: transparent; border: 0; width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-muted); }
.sc-filters-close:hover { background: var(--c-bg-soft); color: var(--c-text); }
.sc-filters-body { padding: 16px 20px; flex: 1; }
.sc-filters-foot { padding: 12px 20px; border-top: 1px solid var(--c-line-soft); display: flex; gap: 8px; background: var(--c-bg-soft); position: sticky; bottom: 0; }
.sc-filters-foot .ro-btn { flex: 1; }
/* Backdrop scrim */
.sc-filter-scrim {
position: fixed;
inset: 0;
background: rgba(58, 47, 37, 0.32);
backdrop-filter: blur(2px);
z-index: 69;
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
.sc-filter-scrim.is-open { opacity: 1; pointer-events: auto; }
/* Filter toggle button (in toolbar) */
.sc-filter-btn {
position: relative;
height: 32px;
padding: 0 14px;
border-radius: var(--r-md);
background: var(--c-bg);
border: 1px solid var(--c-line);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--c-text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.sc-filter-btn-count { background: var(--c-primary); color: #fff; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); margin-left: 2px; }
/* Active filter chips strip */
.sc-active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); padding: 0 2px; }
.sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 12px; background: var(--c-primary-tint); color: var(--c-primary-deep); border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600; border: 1px solid var(--c-primary-soft); }
.sc-chip-x { background: transparent; border: 0; color: var(--c-primary-deep); cursor: pointer; padding: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.6; }
.sc-chip-x:hover { opacity: 1; }
.sc-chip-clear { background: transparent; border: 0; color: var(--c-text-soft); font-size: var(--fs-2xs); cursor: pointer; padding: 4px 8px; text-decoration: underline; }
.sc-chip-clear:hover { color: var(--c-danger); }
.sc-filters-title { font-size: var(--fs-2xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.sc-filter-group { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line-soft); }
.sc-filter-group:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.sc-filter-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--c-text-soft); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.sc-filter-label-count { font-size: var(--fs-2xs); color: var(--c-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sc-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-2xs); color: var(--c-text); cursor: pointer; }
.sc-check input { margin: 0; }
.sc-check-count { margin-left: auto; font-size: var(--fs-2xs); color: var(--c-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
/* KPI strip */
.sc-kpi-label { font-size: var(--fs-2xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.ro-stat.is-warn .roo-stat-num { color: var(--c-cost); }
.ro-stat.is-danger .roo-stat-num { color: var(--c-danger); }
/* Toolbar */
.sc-toolbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.sc-filters-close svg { width: 16px; height: 16px; }
/* Card */
/* Table */
.ro-table thead th { text-align: left; font-weight: 600; color: var(--c-muted); padding: 10px 12px; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); font-size: var(--fs-2xs); letter-spacing: 0.02em; white-space: nowrap; }
/* Shop name cell */
.sc-shop-cell { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.sc-shop-name-en { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: var(--fs-2xs); color: var(--c-muted); font-weight: 500; }
.sc-shop-meta-dot::before { content: '·'; margin-right: 6px; color: var(--c-line); }
/* Tier badge */
.sc-tier { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; }
/* Status pill */
.sc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; }
/* Contract progress */
.sc-contract { min-width: 140px; }
.sc-contract-label { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--c-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.sc-contract-bar { height: 4px; background: var(--c-line-soft); border-radius: var(--r-sm); overflow: hidden; }
.sc-contract-bar-fill { height: 100%; background: var(--c-primary); border-radius: var(--r-sm); }
.sc-contract-bar-fill.is-warn { background: var(--c-warn); }
.sc-contract-bar-fill.is-danger { background: var(--c-danger); }
.sc-contract-period { font-size: var(--fs-2xs); color: var(--c-text-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Rating */
.sc-rating { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--c-gold); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.sc-rating-count { font-size: var(--fs-2xs); color: var(--c-muted); font-weight: 500; }
/* Sparkline */
.sc-spark { display: flex; align-items: end; gap: 2px; height: 24px; min-width: 80px; }
.sc-spark-bar { flex: 1; background: linear-gradient(to top, var(--c-primary), var(--c-primary-soft)); border-radius: 1px; }
/* Action buttons */
.sc-act { display: flex; gap: 4px; justify-content: flex-end; }
/* Pager */
.sc-pager-info { font-size: var(--fs-2xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.sc-pager-pages { display: flex; gap: 2px; }
.sc-pager-pages button { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-bg); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; color: var(--c-text-soft); }
.sc-pager-pages button.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* Card grid view (alternate) */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.sc-grid-card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 16px; cursor: pointer; transition: all var(--tr-fast); }
.sc-grid-card:hover { border-color: var(--c-primary); box-shadow: 0 4px 16px rgba(127,175,142,0.12); transform: translateY(-1px); }
.sc-grid-card-head { display: flex; align-items: start; gap: 12px; margin-bottom: 12px; }
.sc-grid-card-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); margin-bottom: 12px; }
.sc-grid-card-stat-label { font-size: var(--fs-2xs); color: var(--c-muted); font-weight: 500; }
.sc-grid-card-stat-value { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.sc-grid-card-foot { display: flex; gap: 6px; align-items: center; }
#filter-toggle.has-active { background: var(--c-point-tint); border-color: var(--c-point); color: var(--c-point-deep); }
.sc-shop-cell { min-width: 220px; }
.sc-grid-card-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; padding: 10px 0; margin: 12px 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); }
@media (max-width: 768px) { .sc-filters { width: 100%; } }

/* ═══════════ 상담실: 3칸 (상담 목록 · 대화 · 고객/주문) — _docs/상담실_설계.md ═══════════
   고른 줄은 바탕색으로만 표시한다 (왼쪽 색 막대 없음). 내부 메모는 노란 바탕, 전화 기록은 점선 */
.roo-chat { display: grid; grid-template-columns: var(--w-chat-list) minmax(0, 1fr) var(--w-chat-side); height: var(--h-chat); min-height: 560px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; }
.roo-chat-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.roo-chat-col + .roo-chat-col { border-left: 1px solid var(--c-line); }
.roo-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.roo-chat-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--pad-card); }
.roo-chat-bar.is-head { border-bottom: 1px solid var(--c-line); }
.roo-chat-bar > strong { font-size: var(--fs-lg); font-weight: 700; white-space: nowrap; }
.roo-chat-bar > .ro-input-search, .roo-chat-bar > .ro-btn-primary { width: 100%; }
.roo-chat-bar > .ro-tabs { margin: 0; }
.roo-chat-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-3) var(--pad-card); cursor: pointer; }
.roo-chat-item:hover { background: var(--c-bg-soft); }
.roo-chat-item.is-active { background: var(--c-point-tint); }
.roo-chat-name { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.roo-chat-name > span:first-child, .roo-chat-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roo-chat-prev { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.roo-chat-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.roo-chat-when { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.roo-chat-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-point); color: #fff; font-size: var(--fs-2xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.roo-chat-thread { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--pad-card); background: var(--c-bg-soft); }
.roo-chat-thread > .roo-ord-empty { margin: auto; }
.roo-chat-day, .roo-chat-sys { align-self: center; font-size: var(--fs-xs); color: var(--c-muted); }
.roo-chat-day { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 3px 12px; }
.roo-chat-msg { max-width: 72%; display: flex; flex-direction: column; gap: 4px; align-self: flex-start; }
.roo-chat-msg > p { margin: 0; padding: 11px 14px; border-radius: var(--r-lg); background: var(--c-bg); border: 1px solid var(--c-line); white-space: pre-line; overflow-wrap: anywhere; }
.roo-chat-msg > small { font-size: var(--fs-xs); color: var(--c-muted); }
.roo-chat-msg u[data-order] { cursor: pointer; color: var(--c-point-deep); }   /* 문자에 나온 발주번호와 맞는 주문 (본사 상담실) */
.roo-chat-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-soft); }   /* 입금 문자 아래: 맞는 주문 · 입금 처리 (입금 확인 앱) */
.roo-chat-act > div { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.roo-chat-msg.is-me, .roo-chat-msg.is-memo, .roo-chat-msg.is-call { align-self: flex-end; align-items: flex-end; }
.roo-chat-msg.is-me > p { background: var(--c-point-soft); border-color: var(--c-point-soft); }
.roo-chat-msg.is-memo > p { background: var(--c-gold-soft); border-color: var(--c-gold-soft); }
.roo-chat-msg.is-call > p { border-style: dashed; border-color: var(--c-text-soft); }
.roo-chat-compose { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--pad-card) var(--sp-4); border-top: 1px solid var(--c-line); }
.roo-chat-compose > .ro-textarea { width: 100%; resize: none; }
.roo-chat-compose > .ro-flex { width: 100%; }
.roo-chat-side { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--pad-card); }
.roo-chat-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.roo-chat-box.is-active { border-color: var(--c-point); }
.roo-chat-box[data-order] { cursor: pointer; }
.roo-chat-box[data-order]:hover { background: var(--c-bg-soft); }
.roo-chat-col > .roo-subtabs { flex: none; margin: 0; padding: 0 var(--pad-card); border-bottom: 1px solid var(--c-line); }
.roo-chat-box > .roo-prod-cell { color: inherit; text-decoration: none; }
.roo-chat-box > .ro-btn { align-self: flex-end; }
.roo-chat-past { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 9px 0; font-size: var(--fs-sm); cursor: pointer; }
/* 누르면 열리는 표 줄 (상담 탭) */
.ro-table tr.clickable { cursor: pointer; }
.roo-chat-past > span:last-child { color: var(--c-muted); font-size: var(--fs-xs); white-space: nowrap; }
/* 화면 전체를 쓰는 페이지: 바깥 여백 · 테두리 없이 상단바 아래를 꽉 채운다 */
.ro-page.is-flush { padding: 0; max-width: none; }
.ro-page.is-flush > .roo-chat { border: 0; border-radius: 0; }
@media (max-width: 1500px) { .roo-chat { --w-chat-list: 300px; --w-chat-side: 380px; } }
@media (max-width: 1280px) { .roo-chat { --w-chat-list: 270px; --w-chat-side: 320px; } }
@media (max-width: 1100px) { .roo-chat { grid-template-columns: var(--w-chat-list) minmax(0, 1fr); } .roo-chat-col.is-side { display: none; } }

/* 다른 화면의 팝업을 이 자리에서 그대로 보여 주는 틀 (상담실 → 주문 상세) */
.roo-frame { width: 100%; height: 100%; border: 0; display: block; border-radius: inherit; }
.ro-modal:has(> .roo-frame) { overflow: hidden; }
/* 틀 안에서 열린 화면(?embed=1): 메뉴 · 목록은 감추고 팝업만 꽉 채운다 */
body.is-embed { background: var(--c-bg); }
body.is-embed > nav, body.is-embed > header, body.is-embed > .ro-page, body.is-embed .ro-flo-fab { display: none; }
body.is-embed .ro-modal-bg { background: transparent; padding: 0; }
body.is-embed .ro-modal-bg > .roo-pop-xl { width: 100%; max-width: none; height: 100vh; border-radius: 0; box-shadow: none; transition: none; }
body.is-embed .ro-modal-bg:has(> .roo-pop-xl) { transition: none; }
/* 누르면 그 화면으로 가는 알림 글 (새 문자 알림) */
.ro-toast.is-link { cursor: pointer; }