/* band-order — 오픈오다 파트너센터와 같은 모양으로 새로 짠 CSS (SPEC_openoda.md 의 실측값).
   오픈오다 CSS 를 가져온 것이 아니다. */
:root {
  --text: #191F28; --title: #15171F; --ink: #3B3F4E; --sub: #6F7384; --faint: #9CA0B0;
  --line: #E8EAF1; --soft: #F4F5F8; --chip: #EEEFF4;
  --primary: #5C6CFF; --primary-weak: #E7EAFF; --primary-ink: #3742BE;
  --red: #E5484D; --green: #12A150; --kakao: #FEE500;
  --r: 10px; --r-lg: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px; line-height: 24px; color: var(--text); background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1 { font-size: 21px; line-height: 28px; font-weight: 700; color: var(--title); margin: 0; letter-spacing: -0.025em; }
h2 { font-size: 17px; font-weight: 700; color: var(--title); margin: 0; }
.sub { color: var(--sub); font-size: 13px; }
.faint { color: var(--faint); font-size: 12px; }
.red { color: var(--red); } .green { color: var(--green); }

/* ── 파트너센터 틀 ─────────────────────────────────────────── */
/* 오픈오다 실측(2026-09-27): 바탕 #F8F8FB · 왼쪽 막대 흰색 80px(접힘)/216px(펼침, 기본) · 메뉴 44×36 모서리 10
   아이콘 20 #6F7384 · 선택 #E7EAFF/#5C6CFF 700 · 묶음 이름 12px 500 · 본문 칸 padding 24, 최대 1280 가운데 */
.shell { display: flex; min-height: 100vh; background: #F8F8FB; }
/* 왼쪽 메뉴 — 오픈오다 실측: 펼침 216 / 접힘 80, 흰 바탕, 테두리 없음 */
.side { width: 80px; flex: none; background: #fff; position: sticky; top: 0; height: 100vh; display: flex;
  flex-direction: column; z-index: 40; letter-spacing: -0.14px; }
.side.open { width: 216px; }
.side-top { border-bottom: 1px solid var(--soft); }
.logo-row { display: flex; align-items: center; height: 53px; padding: 8px 0 8px 15px; border-bottom: 1px solid var(--soft); }
.side.open .logo-row { padding: 8px 15px 8px 16px; }
.pc-logo { display: none; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--title); letter-spacing: -0.4px; }
.side.open .pc-logo { display: flex; }
.pc-mark { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #818EFF, #5C6CFF); }
.sb-toggle { width: 44px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--sub); cursor: pointer; padding: 0; flex: none; }
.side.open .sb-toggle { margin-left: auto; }
.brand-blk { margin: 8px 15px; }
.side .brand-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: 10px; width: 40px; }
.side.open .brand-row { width: 100%; }
.brand-mk { width: 24px; height: 24px; border-radius: 8px; background: var(--primary); color: #fff; display: grid;
  place-items: center; font-size: 13px; line-height: 18.2px; font-weight: 700; flex: none; }
.brand-row .nm { flex: 1; min-width: 0; font-size: 14px; line-height: 18.2px; font-weight: 700; color: var(--title);
  overflow: hidden; text-overflow: ellipsis; }
.brand-row .caret { color: var(--sub); display: flex; }
.side .nav { flex: 1; overflow-y: auto; padding: 8px 4px 12px 15px; display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: #D4D7E0 transparent; }
.side.open .nav { padding: 8px 15px 12px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 12px; }
.side .grp { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: -0.12px; color: var(--sub);
  padding: 0 0 4px; margin: 0 0 -2px -8px; width: 60px; text-align: center; white-space: nowrap; }
.side.open .grp { margin-left: 0; width: auto; text-align: left; }
.side a.m { position: relative; display: flex; align-items: center; gap: 8px; width: 44px; height: 36px; padding: 0 12px;
  border-radius: 10px; font-size: 14px; line-height: 21.7px; font-weight: 500; color: var(--sub); flex: none; }
.side.open a.m { width: 100%; }
.side a.m svg { flex: none; }
.side a.m:hover, .sb-toggle:hover, .side .brand-row:hover { background: var(--soft); }
.side a.m.on { background: var(--primary-weak); color: var(--primary); font-weight: 700; }
.side .lbl { display: none; white-space: nowrap; }
.side.open .lbl { display: inline-flex; align-items: center; gap: 4px; }
.side .beta { font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: -0.12px; }
.side .badge { position: absolute; top: 2px; right: 2px; }
.side.open .badge { position: static; margin-left: auto; }
.nav-sep { position: relative; padding-top: 12px; }
.nav-sep::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--soft); }
.side-foot { padding: 0 12px 12px; position: relative; }
.profile summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px;
  cursor: pointer; min-height: 46px; }
.profile summary::-webkit-details-marker { display: none; }
.profile summary:hover { background: var(--soft); }
.avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--line); color: var(--ink); display: grid;
  place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.side.open .profile .lbl { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.profile .lbl b { font-size: 14px; line-height: 18.2px; font-weight: 700; color: var(--title); }
.profile .lbl small { font-size: 12px; line-height: 15.6px; font-weight: 500; color: var(--sub); }
.profile .pop { position: absolute; bottom: 64px; left: 12px; background: #fff; border-radius: 14px; padding: 6px; min-width: 170px;
  box-shadow: 0 8px 30px rgba(20,24,40,.14); display: flex; flex-direction: column; z-index: 50; }
.profile .pop a { padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); }
.profile .pop a:hover { background: var(--soft); }
.main { flex: 1; min-width: 0; padding: 24px 24px 60px; }
.main > .wrap { max-width: 1280px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding-left: 4px; min-height: 46px; }
.top .grow { flex: 1; }
.top .ttl { display: flex; flex-direction: column; margin-right: auto; }
.top .eyebrow { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); }
.top .eyebrow:empty { display: none; }
.top a.eyebrow:hover { color: var(--primary); }
.top .ttl + .grow { display: none; }
.top .btn { height: 40px; border-radius: 14px; padding: 0 16px; font-weight: 700; }

/* ── 카드·버튼·입력 ─────────────────────────────────────────── */
.card { background: #fff; border-radius: 22px; padding: 20px 24px; margin-bottom: 14px; }
.card h2 { margin-bottom: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px;
  border-radius: 14px; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--soft); color: var(--ink); white-space: nowrap; }
.btn.ghost { background: none; color: var(--sub); }
.btn.ghost:hover { background: var(--soft); }

/* 가게 목록 카드 (오픈오다 `가게 관리 › 가게 목록`) */
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.store-card { display: flex; flex-direction: column; background: #fff; border-radius: 22px; padding: 20px; color: var(--ink);
  transition: box-shadow .15s; }
.store-card:hover { box-shadow: 0 6px 24px rgba(20,24,40,.07); }
.store-card .top2 { display: flex; gap: 8px; align-items: flex-start; height: 50px; }
.store-card .logo { width: 50px; height: 50px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: var(--soft); color: var(--faint); font-size: 20px; font-weight: 800; flex: none; }
.store-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.store-card .st { margin-left: auto; }
.store-card .nm { font-size: 16px; line-height: 25.6px; font-weight: 700; color: var(--title); margin-top: 10px; }
.store-card .bottom { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--sub); }
.store-card .url { flex: 1; font-size: 12px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-card .meta { font-size: 12px; color: var(--faint); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.st-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 13px;
  line-height: 18.2px; font-weight: 700; white-space: nowrap; background: #F2FBF6; color: #1F6B4A; }
.st-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-badge.off { background: var(--soft); color: var(--sub); }
@media (max-width: 1100px) { .store-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .store-grid { grid-template-columns: 1fr; } }
.btn:hover { filter: brightness(.97); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.weak { background: var(--primary-weak); color: var(--primary); }
.btn.danger { background: #FDECEC; color: var(--red); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.block { width: 100%; height: 48px; font-size: 16px; }
input[type=text], input[type=password], input[type=number], input[type=tel], select, textarea {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 15px; color: var(--text); background: #fff; }
textarea { height: auto; min-height: 84px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-weak); border-color: var(--primary); }
label.f { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
label.f .req { color: var(--red); }
.help { font-size: 12px; color: var(--sub); margin-top: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.msg { background: var(--primary-weak); color: var(--primary-ink); border-radius: var(--r); padding: 10px 14px;
  font-size: 14px; margin-bottom: 12px; }
.err { background: #FDECEC; color: var(--red); border-radius: var(--r); padding: 10px 14px; font-size: 14px;
  margin-bottom: 12px; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--chip); color: var(--sub); }
.chip.on { background: var(--primary-weak); color: var(--primary-ink); }
.chip.ok { background: #E6F6EC; color: var(--green); }
.chip.no { background: #FDECEC; color: var(--red); }
.new { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--primary-weak);
  color: var(--primary-ink); font-size: 11px; font-weight: 700; }

/* 탭(상태 탭) */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs a { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.utabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; }
.utabs a { padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; }
.utabs a.on { color: var(--primary); border-color: var(--primary); }

/* 표 */
.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-lg); overflow: hidden; font-size: 14px; }
.tbl th { background: #FAFBFC; color: var(--sub); font-weight: 600; font-size: 12px; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td > b, .chip { white-space: nowrap; }
.tbl .thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--soft); display: block; }
.pname { font-weight: 600; color: var(--title); }
.pdesc { font-size: 12px; color: var(--faint); max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { text-align: center; color: var(--sub); padding: 48px 0; font-size: 14px; }

/* 선택하면 아래 떠 있는 검은 막대 */
/* 일괄 처리 띠 — 오픈오다 실측(2026-09-29): 짙은 남색 한 줄, 흰 드롭다운, 아이콘 단추, 노랑 초기화 · 빨강 삭제 */
.bulk { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #111827; color: #fff;
  border-radius: 16px; padding: 12px 16px; display: none; align-items: center; gap: 8px; box-shadow: 0 12px 32px rgba(15,23,42,.3);
  z-index: 50; font-size: 14px; white-space: nowrap; max-width: calc(100vw - 24px); overflow-x: auto; }
.bulk.on { display: flex; }
.bulk .bk-n { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 0 6px 0 4px; flex: none; }
.bulk .bk-n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.bulk .bk { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 12px;
  background: #1F2937; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none; }
.bulk .bk:hover { background: #283447; }
.bulk .bk svg { opacity: .9; }
.bulk .bk select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bulk .bk.warn { background: #3A3218; color: #FACC15; }
.bulk .bk.warn:hover { background: #473d1c; }
.bulk .bk.del { background: #4A1D2A; color: #FDA4AF; }
.bulk .bk.del:hover { background: #5a2333; }
.bulk .bk-sel { height: 38px; width: auto; min-width: 150px; padding: 0 34px 0 14px; border: 0; border-radius: 12px; background-color: #fff;
  color: #111827; font-size: 13px; font-weight: 600; flex: none; }

/* 홈 현황 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 14px; }
.stats > div { padding: 16px 4px 4px; }
.stats .lbl { font-size: 13px; color: var(--sub); }
.stats .big { font-size: 26px; font-weight: 700; color: var(--title); margin: 4px 0; }
.stats .big small { font-size: 14px; font-weight: 500; margin-left: 2px; }
.shop { text-align: center; }
.shop .live { color: var(--green); font-size: 13px; font-weight: 600; margin-left: 6px; }
.shop .live.off { color: var(--faint); }

/* 가게 설정 — 왼쪽 세로 목록 */
.settings { display: flex; gap: 18px; align-items: flex-start; }
.settings nav { width: 200px; flex: none; background: #fff; border-radius: var(--r-lg); padding: 8px; }
.settings nav a { display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: var(--r);
  font-size: 14px; font-weight: 500; color: var(--ink); }
.settings nav a.on { background: var(--line); color: var(--title); font-weight: 700; }
.settings nav a.soon { color: var(--faint); }
.settings .body { flex: 1; min-width: 0; }
.row-set { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row-set:last-child { border-bottom: 0; }
.row-set .v { color: var(--sub); font-size: 14px; }

/* 결제 수단 고르기 */
.pick { display: flex; gap: 10px; margin: 8px 0 4px; }
.pick label { flex: 1; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; }
.pick label:has(input:checked) { border-color: var(--primary); background: #F7F8FF; }
.pick input { margin-right: 6px; accent-color: var(--primary); }
.pick b { font-size: 15px; }
.pick .sub { display: block; margin-top: 4px; }
.box { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 16px 16px; margin-top: 12px; }
.box[hidden] { display: none; }

/* ── 손님 가게 (앱처럼 가운데 좁게) ───────────────────────────── */
.store-bg { background: var(--soft); min-height: 100vh; }
.app { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; padding-bottom: 150px; }
.app-head { padding: 22px 18px 12px; text-align: center; }
.app-head .logo { width: 72px; height: 72px; border-radius: 18px; background: var(--primary-weak); color: var(--primary);
  display: grid; place-items: center; font-size: 28px; font-weight: 800; margin: 0 auto 10px; }
.app-tabs { display: flex; border-bottom: 1px solid var(--line); }
.app-tabs a { flex: 1; text-align: center; padding: 11px 0; font-size: 15px; font-weight: 700; color: var(--faint);
  border-bottom: 2px solid transparent; }
.app-tabs a.on { color: var(--title); border-color: var(--primary); }
.item { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.item img, .item .noimg { width: 92px; height: 92px; border-radius: 10px; object-fit: cover; background: var(--soft); flex: none; }
.item .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .nm { font-size: 15px; font-weight: 600; color: var(--title); }
.item .ds { font-size: 12px; color: var(--sub); margin-top: 2px; }
.item .pr { font-size: 17px; font-weight: 700; margin-top: auto; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qty button { width: 32px; height: 32px; border: 0; background: var(--soft); font-size: 16px; cursor: pointer; }
.qty input { width: 40px; height: 32px; border: 0; text-align: center; border-radius: 0; padding: 0; font-size: 14px; }
.soldout { color: var(--red); font-size: 13px; font-weight: 700; }
.form-sec { padding: 18px; }
.fixed-cta { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px;
  background: #fff; border-top: 1px solid var(--line); padding: 12px 18px 16px; }
.fixed-cta .sum { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.fixed-cta .sum b { font-size: 18px; }
.charge { white-space: pre-line; background: var(--soft); border-radius: var(--r-lg); padding: 16px; font-size: 15px; line-height: 1.7; }
.closed { background: #FFF6E5; color: #9A6200; border-radius: var(--r); padding: 10px 14px; margin: 0 18px 12px; font-size: 14px; }
.powered { text-align: center; color: var(--faint); font-size: 11px; padding: 24px 0; }

/* 로그인 */
.login { max-width: 380px; margin: 12vh auto 0; padding: 0 18px; text-align: center; }
.login .logo { width: 64px; height: 64px; border-radius: 18px; background: var(--primary); color: #fff; display: grid;
  place-items: center; font-size: 26px; font-weight: 800; margin: 0 auto 14px; }
.login form { text-align: left; margin-top: 22px; }

/* ── 파트너센터 전 메뉴 (오픈오다 구성) ─────────────────────── */
input[type=date], input[type=datetime-local], input[type=search], input[type=email] {
  height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; font-size: 14px; color: var(--text); background: #fff; }
.badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red);
  color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.mini { height: 30px !important; font-size: 13px !important; padding: 0 8px !important; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.chk input, .ck, .ock { accent-color: var(--primary); width: 16px; height: 16px; }
.chk.sm { font-size: 12px; }
.rng { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rng input { width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip, .vopts .chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.lnk { color: var(--primary); font-size: 13px; font-weight: 600; margin-top: auto; }
.btn.warn { background: #FFF4E5; color: #B25E00; }
.btn.kakao { background: var(--kakao); color: #191919; }
@media print { .noprint { display: none !important; } }

/* 필터 카드 (주문·링크 주문서·활동·현금영수증) */
.filt { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filt > div { flex: 1; min-width: 160px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.row .lbl { width: 84px; flex: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.seg { display: inline-flex; background: var(--soft); border-radius: var(--r); padding: 3px; }
.seg label { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px;
  font-weight: 600; color: var(--sub); cursor: pointer; }
.seg input { display: none; }
.seg label:has(input:checked) { background: #fff; color: var(--title); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pager { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.pager select { width: auto; height: 32px; font-size: 13px; }
.pager a { min-width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; font-size: 13px; }
.pager a.on { background: var(--primary); color: #fff; }
.tbl.vt td { vertical-align: top; }
.tbl tr.cx td { opacity: .45; }
.memo summary { cursor: pointer; list-style: none; }
.memo textarea { min-height: 56px; margin-top: 6px; font-size: 13px; }

/* 홈 */
.dot-lg { width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: #fff; display: grid; place-items: center;
  font-size: 20px; font-weight: 800; flex: none; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.chart { width: 100%; height: 190px; display: block; margin-top: 10px; }
.chart .ax { font-size: 11px; fill: var(--faint); }
.sysnote { background: var(--soft); border-radius: var(--r); padding: 10px 14px; margin-top: 12px; font-size: 14px; }
.sysnote summary { cursor: pointer; }

/* 카드 격자 (가게 관리 팁 · 공급업체) */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.grid-cards.four { grid-template-columns: repeat(4, 1fr); }
.grid-cards .card { margin: 0; }
.tip { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.tip:hover, .sup:hover { box-shadow: 0 4px 16px rgba(20,24,40,.07); }

/* 보관함 (왼쪽 목록 + 오른쪽 표) */
.repo { display: flex; gap: 14px; align-items: flex-start; }
.repo > nav { width: 220px; flex: none; padding: 8px; }
.repo > nav a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--ink); }
.repo > nav a.on { background: var(--line); color: var(--title); }

/* 모달 (상품 등록 · 주문서 · 카탈로그) */
dialog.modal { border: 0; border-radius: 16px; padding: 0; width: min(760px, 96vw); max-height: 92vh; color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.modal::backdrop { background: rgba(15,18,30,.45); }
dialog.modal > form { display: flex; flex-direction: column; max-height: 92vh; }
.modal .mh { display: flex; align-items: center; padding: 18px 22px 10px; }
.modal .mh h2 { flex: 1; }
.modal .x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--sub); cursor: pointer; }
.modal .mb { padding: 4px 22px 18px; overflow-y: auto; flex: 1; }
.modal .mf { display: flex; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--line); }
.modal.inline .mb { padding-top: 0; }
.mtabs { display: flex; gap: 20px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.mtabs a { padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; cursor: pointer; }
.mtabs a.on { color: var(--primary); border-color: var(--primary); }
.sub-card { border: 1px solid var(--line); margin: 12px 0 0; padding: 16px; }
.sub-card h3 { font-size: 15px; margin: 0; }
.imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.imgs > div { position: relative; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--soft); }
.imgs img { width: 100%; height: 100%; object-fit: cover; }
.imgs button { position: absolute; bottom: 2px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
  border-radius: 6px; padding: 1px 5px; cursor: pointer; }
.imgs label { width: 88px; height: 88px; border: 1.5px dashed var(--line); border-radius: 10px; display: grid; place-items: center;
  color: var(--faint); font-size: 26px; cursor: pointer; }
.rte-bar { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0; padding: 4px; margin-top: 10px; background: #FAFBFC; }
.rte-bar button, .rte-bar .btnlike { border: 0; background: none; min-width: 30px; height: 28px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink); display: inline-grid; place-items: center; padding: 0 6px; }
.rte-bar button:hover, .rte-bar .btnlike:hover { background: var(--soft); }
.rte { min-height: 220px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r);
  padding: 12px; font-size: 14px; }
.rte img { max-width: 100%; }

/* 가게 설정 — 스위치 · 테마 · 미리보기 폰 */
.sw-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sw-row:last-child { border-bottom: 0; }
.sw-row > div { flex: 1; }
.sw { position: relative; width: 44px; height: 26px; flex: none; cursor: pointer; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw i { position: absolute; inset: 0; border-radius: 13px; background: #D4D7E0; transition: .15s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .15s; }
.sw input:checked + i { background: var(--primary); }
.sw input:checked + i::after { left: 21px; }
.themes { display: flex; flex-wrap: wrap; gap: 10px; }
.themes label { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; width: 64px; }
.themes input { display: none; }
.themes span { width: 36px; height: 36px; border-radius: 50%; outline: 2px solid transparent; outline-offset: 2px; }
.themes label:has(input:checked) span { outline-color: var(--title); }
.themes small { font-size: 11px; color: var(--sub); }
img.pv { display: block; max-width: 96px; max-height: 96px; border-radius: 12px; margin-top: 8px; object-fit: cover; }
img.pv.wide { max-width: 100%; max-height: 140px; width: 100%; }
img.pv[hidden] { display: none; }
.phone-pv { width: 300px; flex: none; position: sticky; top: 16px; }
.phone-pv iframe { width: 300px; height: 600px; border: 8px solid #1F2230; border-radius: 30px; background: #fff; }
@media (max-width: 1200px) { .phone-pv { display: none; } }

/* 주문서 출력 */
.receipt { max-width: 380px; margin: 16px auto; padding: 18px; border: 1px dashed #bbb; font-size: 13px; page-break-after: always; }

/* ── 손님 가게 (오픈오다 고객 화면 구성) ─────────────────────── */
.store-bg { display: flex; justify-content: center; }
.snav { width: 220px; flex: none; position: sticky; top: 0; height: 100vh; padding: 20px 12px; }
.snav .shead { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 16px; }
.snav .shead img { width: 100%; border-radius: 12px; margin-bottom: 8px; }
.snav a { display: flex; height: 40px; align-items: center; padding: 0 12px; border-radius: var(--r); font-size: 15px; font-weight: 600; color: var(--ink); }
.snav a.on { background: #fff; color: var(--primary); }
.snav .me { margin-top: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.app { flex: 1; max-width: 480px; margin: 0; }
.store-bg.pv .app { max-width: none; padding-bottom: 20px; }
.app-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: #fff; border-bottom: 1px solid var(--line); }
.app-top .brand { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.logo-sm { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.cart { position: relative; font-size: 20px; }
.cart span { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cart span[hidden] { display: none; }
.bnav { display: none; }
.searchbar { display: flex; gap: 8px; align-items: center; padding: 12px 16px 4px; }
.searchbar input { height: 40px; background: var(--soft); border-color: transparent; }
.lay { display: flex; gap: 2px; background: var(--soft); border-radius: var(--r); padding: 3px; flex: none; }
.lay a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--faint); font-size: 14px; }
.lay a.on { background: #fff; color: var(--title); }
.catbar { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; scrollbar-width: none; }
.catbar .chip { flex: none; padding: 5px 12px; font-size: 13px; }
.item .pic { position: relative; flex: none; display: block; }
.item .pic img, .item .pic .noimg { display: block; }
.item .low { position: absolute; left: 6px; top: 6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 1px 6px; }
.item .badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.item .badges .chip { font-size: 11px; padding: 1px 7px; }
.item .foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.item .foot .pr { margin: 0; }
.vopts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.items.image { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 12px 16px; }
.items.image .item { flex-direction: column; padding: 0; border: 0; gap: 8px; }
.items.image .item .pic img, .items.image .item .pic .noimg { width: 100%; height: auto; aspect-ratio: 1; }
.items.image .item .foot { flex-wrap: wrap; }
.items.image .empty { grid-column: 1 / -1; }
.post { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.post p { margin: 8px 0 0; font-size: 15px; }
.post img { max-width: 100%; border-radius: 10px; margin-top: 8px; }
.gallery { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--soft); }
.gallery img, .gallery .noimg { flex: none; width: 100%; aspect-ratio: 1; object-fit: cover; scroll-snap-align: start; }
.gallery .cnt { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
  border-radius: 999px; padding: 2px 10px; }
.details { padding: 8px 18px 20px; font-size: 15px; line-height: 1.7; border-top: 8px solid var(--soft); }
.details img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.dayhead { padding: 18px 18px 6px; font-weight: 700; color: var(--title); }
.ocard { margin: 0 16px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; font-size: 14px; }
.login-bg { min-height: 100vh; background: var(--soft); padding-top: 1px; }
.login-bg .login { background: #fff; border-radius: 20px; padding: 28px 22px; margin-top: 8vh; }

@media (min-width: 901px) {   /* 넓은 화면은 왼쪽 메뉴가 있어 가운데 고정이면 가게 칸과 어긋난다 */
  .store-bg .fixed-cta { position: sticky; left: auto; transform: none; }
  .store-bg .app { padding-bottom: 20px; }
}
@media (max-width: 900px) {
  .snav { display: none; }
  .app { max-width: 480px; margin: 0 auto; }
  .bnav { display: flex; position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px;
    background: #fff; border-top: 1px solid var(--line); z-index: 30; }
  .bnav a { flex: 1; text-align: center; padding: 10px 0 14px; font-size: 12px; font-weight: 600; color: var(--sub); }
  .fixed-cta { bottom: 50px; }
}
.mnav { display: none; }
@media (max-width: 760px) {
  .side { position: fixed; left: 0; top: 0; width: 232px; transform: translateX(-100%); transition: transform .15s; }
  .side.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .main { padding: 16px 16px 90px; }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); z-index: 30; }
  .mnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 12px; font-size: 11px;
    font-weight: 600; color: var(--sub); }
  .mnav a.on { color: var(--primary); }
  .grid2, .stats { grid-template-columns: 1fr; }
  .settings { flex-direction: column; }
  .settings nav { width: 100%; }
  .tbl { display: block; overflow-x: auto; }
  .grid-cards.four { grid-template-columns: 1fr 1fr; }
  .repo { flex-direction: column; } .repo > nav { width: 100%; }
  .filt > div { min-width: 100%; }
}

/* 가게 하나 머리말 — ← 뒤로 · 가게 관리 / 가게 이름 · 오른쪽 ● 운영 중 ⌄ (오픈오다 실측) */
.head-back { width: 36px; height: 36px; margin: 0 -4px 0 -8px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--sub); flex: none; }
.head-back:hover { background: var(--soft); color: var(--title); }
.st-dd { position: relative; }
.st-btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 6px 8px; border-radius: 10px;
  font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; }
.st-btn::-webkit-details-marker { display: none; }
.st-btn:hover { background: var(--soft); }
.st-dot { width: 10px; height: 10px; border-radius: 999px; background: #2FA370; flex: none; }
.st-dot.off { background: var(--faint); }
.st-dd .pop { position: absolute; right: 0; top: 42px; background: #fff; border-radius: 14px; padding: 6px; min-width: 140px;
  box-shadow: 0 8px 30px rgba(20,24,40,.14); display: flex; flex-direction: column; z-index: 20; }
.st-dd .pop button { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 14px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--ink); text-align: left; }
.st-dd .pop button:hover:not(:disabled) { background: var(--soft); }
.st-dd .pop button:disabled { color: var(--primary); font-weight: 700; cursor: default; }

/* 브랜드 줄 ⌃⌄ — 본사 ↔ 가게 전환 목록 */
.brand-dd { position: relative; }
.brand-dd > summary { list-style: none; cursor: pointer; }
.brand-dd > summary::-webkit-details-marker { display: none; }
.brand-dd .pop { position: absolute; left: 0; top: 42px; min-width: 220px; max-height: 60vh; overflow-y: auto; background: #fff;
  border-radius: 14px; padding: 6px; box-shadow: 0 8px 30px rgba(20,24,40,.14); display: flex; flex-direction: column; z-index: 60; }
.brand-dd .pop a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--ink); white-space: nowrap; }
.brand-dd .pop a:hover { background: var(--soft); }
.brand-dd .pop a.on { background: var(--primary-weak); color: var(--primary); }


/* 가게 하나 화면 — 오픈오다 실측(hub): 주소 칸 · 추천 카드 4 · 자주 쓰는 메뉴 | 가게 설정 */
.hubwrap { display: flex; flex-direction: column; gap: 24px; }
.slink { display: flex; align-items: center; gap: 8px; background: #EEEFF4; border-radius: 10px; padding: 6px 6px 6px 12px; min-height: 42px; }
.slink a { flex: 1; display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 500; color: var(--sub); min-width: 0; }
.slink .btn { background: #fff; height: 30px; border-radius: 10px; padding: 0 12px; font-size: 13px; }
.panel { background: #fff; border-radius: 22px; padding: 20px; }
.recs { display: flex; flex-direction: column; gap: 12px; }
.recs[hidden] { display: none; }
.recs-head { display: flex; align-items: center; gap: 8px; }
.recs-head b { font-size: 16px; font-weight: 700; color: var(--ink); flex: 1; }
.rec-badge { color: var(--primary); display: flex; }
.icon-btn { width: 30px; height: 30px; border-radius: 10px; border: 0; background: none; display: grid; place-items: center; color: var(--sub); cursor: pointer; }
.icon-btn:hover { background: var(--soft); }
.recgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rec { display: flex; flex-direction: column; gap: 10px; background: #F7F8FF; border-radius: 14px; padding: 16px; }
.rec:hover { background: #F0F2FF; }
.tile, .hub-tile { width: 36px; height: 36px; border-radius: 16px; background: var(--primary-weak); color: var(--primary-ink); display: grid; place-items: center; flex: none; }
.hub-tile.off { background: var(--soft); color: var(--sub); }
.rec .tx, .hub-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rec .nm, .hub-tx .nm { font-size: 16px; line-height: 23px; font-weight: 700; color: var(--title); }
.rec .ds, .hub-tx .ds { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); }
.rec .go { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--sub); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 10px; }
.col-h { font-size: 18px; line-height: 25px; font-weight: 700; color: var(--title); padding-left: 4px; }
.menu-grid { display: grid; gap: 10px; }
.hub { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 22px; padding: 20px; color: var(--sub); }
.hub .hub-tx { flex: 1; gap: 2px; }
.hub form { margin: 0; }
.hub .btn.sm { height: 30px; border-radius: 10px; padding: 0 12px; font-size: 13px; background: #EEEFF4; }
a.hub:hover { box-shadow: 0 6px 24px rgba(20,24,40,.06); }
.setrows { background: #fff; border-radius: 22px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.setrow { display: flex; align-items: center; gap: 24px; padding: 12px; border-radius: 10px; color: var(--sub); }
.setrow:hover { background: var(--soft); }
.setrow .lb { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.setrow .sum { flex: 1; text-align: right; font-size: 14px; font-weight: 500; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-row { display: flex; justify-content: flex-end; }
.del-row .btn { color: var(--faint); height: 30px; font-size: 13px; }
@media (max-width: 1100px) { .recgrid { grid-template-columns: 1fr 1fr; } .cols { grid-template-columns: minmax(0, 1fr); } }


/* 홈 — 오픈오다 실측: 인사말 · 시스템 공지 막대 · 현황(가게 선택·기간) · 영업 카드 · 주간/월간 */
.home-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-left: 4px; flex-wrap: wrap; }
.hero { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.hero-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.greet { font-size: 21px; font-weight: 700; }
.greet b { font-weight: 800; color: var(--primary-ink); }
.notice { width: min(520px, 100%); background: var(--primary-weak); color: var(--primary-ink); border-radius: 14px; padding: 8px 12px; }
.notice-head { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.notice-head::-webkit-details-marker { display: none; }
.notice-pill { background: var(--primary); color: #fff; border-radius: 6px; padding: 2px 6px; font-size: 12px; font-weight: 700; }
.notice-title { flex: 1; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-body { white-space: pre-line; font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 8px; }
.main .panel { padding: 16px; margin-bottom: 14px; }
.p-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; margin: -16px -16px 0; border-bottom: 1px solid var(--soft); flex-wrap: wrap; }
.p-head h2 { font-size: 18px; margin: 0; }
.p-head .spacer { flex: 1; }
.cap-muted { font-size: 12px; font-weight: 500; color: var(--sub); }
.dd-btn, .dr-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; border-radius: 14px; background: var(--soft); font-size: 14px; font-weight: 500; }
.dd-btn { padding: 0 12px; color: var(--ink); }
.dr-btn { padding: 0 14px 0 12px; gap: 8px; color: var(--title); }
.p-head .btn.sm { height: 30px; border-radius: 10px; font-size: 13px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--soft); margin: 0 -16px -16px; border-radius: 0 0 22px 22px; overflow: hidden; }
.stat { background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.st-lbl { font-size: 13px; font-weight: 700; color: var(--sub); }
.st-val { font-size: 26px; line-height: 34px; font-weight: 700; color: var(--title); }
.st-val small { font-size: 14px; font-weight: 400; margin-left: 2px; }
.st-cap { font-size: 12px; font-weight: 500; color: var(--sub); }
.st-cap.red { color: var(--red); }
.panel.biz { display: flex; align-items: center; gap: 12px; }
.biz-info { flex: 1; }
.biz-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--title); }
.biz-sub { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--sub); }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-grid .panel { margin: 0; }
.legend { display: inline-flex; gap: 12px; font-size: 12px; font-weight: 500; color: var(--sub); }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.leg-bar, .leg-line { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--primary-weak); }
.leg-line { height: 3px; background: #1F6B4A; }
@media (max-width: 900px) { .stats4 { grid-template-columns: 1fr 1fr; } .chart-grid { grid-template-columns: 1fr; } }


/* ── 오픈오다 목록형 화면(주문 관리 등) — 실측: 흰 머리 막대 65 · 탭 47 · 본문 p16 · 카드 r8 그림자 · slate 팔레트 ── */
:root { --s50: #F8FAFC; --s100: #F1F5F9; --s200: #E2E8F0; --s300: #CAD5E2; --s400: #90A1B9; --s500: #62748E;
  --s600: #45556C; --s700: #314158; --s800: #1D293D; --s900: #0F172B; --ind: #4F39F6; }
.main.legacy { padding: 0; }
.main.legacy > .wrap { max-width: none; }
.main.legacy > .wrap > .msg, .main.legacy > .wrap > .err { margin: 12px 16px 0; }
.lg-head { position: sticky; top: 0; z-index: 20; height: 65px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #fff; border-bottom: 1px solid var(--s200); }
.lg-head h1 { font-size: 20px; font-weight: 700; color: #191919; }
.lg-acts { display: flex; gap: 8px; align-items: center; }
.lg-tabs { position: sticky; top: 65px; z-index: 19; background: #fff; border-bottom: 1px solid var(--s200); padding: 0 24px; }
.lg-tabs nav { display: flex; gap: 16px; }
.lg-tabs a { padding: 12px; font-size: 14px; font-weight: 500; color: var(--s500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lg-tabs a:hover { color: var(--s700); }
.lg-tabs a.on { color: var(--ind); border-color: var(--ind); }
.lg-body { padding: 16px; }
.pc-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); margin-bottom: 16px; overflow: hidden; }
.pc-pad { padding: 16px; }
.pc-label { display: block; font-size: 14px; font-weight: 700; color: var(--s700); margin-bottom: 6px; }
.pc-label .ind { color: var(--ind); margin-left: 4px; }
.pc-label .hint { margin-left: 4px; font-weight: 400; color: var(--s400); }
.pc-field { width: 100%; height: 42px; padding: 10px 16px; border: 1px solid var(--s300); border-radius: 6px; background: #fff; font: inherit;
  font-size: 14px; color: var(--s800); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
select.pc-field { height: 40px; padding: 0 12px; }
.pc-field:focus { outline: 2px solid #C6D2FF; border-color: var(--ind); }
.pc-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--primary); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pc-btn-primary.big { height: 42px; padding: 0 24px; }
.pc-btn-primary:hover { filter: brightness(.95); }
.pc-btn-white { height: 42px; padding: 10px 16px; border: 1px solid var(--s300); border-radius: 8px; background: #fff; font: inherit; font-size: 14px;
  font-weight: 500; color: var(--s700); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pc-btn-white:hover { background: var(--s50); }
.pc-btn-white.on { border-color: var(--ind); color: var(--ind); background: #EEF2FF; }
.lg-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.lg-row .pc-label { margin: 0; }
.pc-segs { display: inline-flex; border: 1px solid var(--s300); border-radius: 8px; overflow: hidden; }
.pc-segs label { padding: 4px 12px; font-size: 14px; font-weight: 500; color: var(--s600); cursor: pointer; background: #fff; }
.pc-segs input { display: none; }
.pc-segs label:has(input:checked) { background: var(--primary); color: #fff; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 512px; margin-bottom: 12px; }
.lg-flex { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.lg-flex .grow { flex: 1; min-width: 200px; }
.dr-edit input { border: 0; background: none; font: inherit; font-size: 14px; color: var(--title); width: 124px; padding: 0; }
.lg-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; }
.lg-grid5 .span2 { grid-column: span 2; }
.lg-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.lg-bar .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip { display: inline-flex; align-items: center; height: 38px; padding: 8px 16px; border: 1px solid var(--s200); border-radius: 8px; background: #fff;
  font-size: 14px; font-weight: 500; color: var(--s700); white-space: nowrap; }
.pc-chip:hover { background: var(--s50); }
.pc-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tools { display: flex; align-items: center; gap: 8px; border: 1px solid var(--s200); background: var(--s50); border-radius: 8px; padding: 6px; }
.tools select { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--s700); padding: 6px 8px; height: auto; width: auto; }
.tools label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--s500); padding: 0 4px; cursor: pointer; white-space: nowrap; }
.tools .vbar { width: 1px; height: 24px; background: var(--s300); }
.tools .xl, .tools .cp { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; padding: 4px 8px; cursor: pointer; }
.tools .xl { color: #008236; } .tools .cp { color: #155DFC; }
.lg-pager { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--s600); }
.lg-pager select { width: auto; height: 32px; padding: 0 8px; font-size: 14px; border-color: var(--s300); border-radius: 6px; }
.lg-pager b { color: var(--s900); }
.lg-pager .spacer { flex: 1; }
.pg-btn { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--s300); border-radius: 6px; background: #fff;
  font-size: 13px; color: var(--s600); }
.pg-btn.off { opacity: .45; pointer-events: none; }
.pg-now { min-width: 40px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--s300); border-radius: 6px; background: #fff; }
.ox { overflow-x: auto; }
.lg-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.lg-tbl thead tr { background: linear-gradient(to right, var(--s50), var(--s100)); }
.lg-tbl th { padding: 12px 16px; text-align: left; font-size: 14px; font-weight: 700; color: var(--s700); border-right: 1px solid var(--s200);
  border-bottom: 1px solid var(--s200); white-space: nowrap; }
.lg-tbl tr.sub th { padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--s600); border-bottom-width: 2px; }
.lg-tbl th.c, .lg-tbl td.c { text-align: center; } .lg-tbl .r { text-align: right; } .lg-tbl th.nb { border-right: 0; }
.lg-tbl th.ck, .lg-tbl td.ck { width: 48px; padding: 12px 16px; }
.lg-tbl th.amt { line-height: 1.25; } .lg-tbl th.amt span { display: block; font-size: 12px; font-weight: 400; color: var(--s400); }
.lg-tbl th.amt b { display: block; font-size: 14px; }
.lg-tbl td { padding: 16px; border-bottom: 1px solid var(--s200); vertical-align: middle; color: var(--s700); }
.lg-tbl tbody tr:hover { background: var(--s50); }
.lg-tbl tr.cx td { opacity: .6; }
.lg-tbl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ind); cursor: pointer; }
.lg-tbl .shop { font-size: 16px; font-weight: 600; color: var(--s900); }
.lg-tbl tr:hover .shop { color: var(--ind); }
.lg-tbl .strong { font-weight: 600; color: var(--s900); }
.rcv { display: flex; gap: 4px; flex-wrap: wrap; }
.b-pick { border: 1px solid #BEDBFF; background: #DBEAFE; color: #193CB8; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 700; }
.b-pick.dlv { border-color: #B9F8CF; background: #DCFCE7; color: #016630; }
.b-date { border: 1px solid #F3E8FF; background: #FAF5FF; color: #8200DB; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 700; }
.ident { margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; color: var(--s900); }
.phone { margin-top: 2px; font-size: 14px; color: var(--s600); }
.addr { font-size: 12px; color: var(--s500); margin-top: 2px; max-width: 220px; }
.ono { font-size: 20px; line-height: 1.25; font-weight: 800; color: var(--ind); }
.ocode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--s400); }
.odt { padding-top: 2px; font-size: 14px; color: var(--s500); }
.cust { display: flex; flex-direction: column; } .cust b { font-size: 14px; color: var(--s900); } .cust span { margin-top: 2px; font-size: 12px; color: var(--s500); }
.items { white-space: pre-line; font-size: 16px; line-height: 1.625; color: var(--s700); }
.req { font-size: 12px; color: var(--s500); margin-top: 4px; }
.amt .a1 { font-size: 14px; font-weight: 500; color: var(--s500); } .amt .a2 { font-size: 14px; color: var(--s300); }
.amt .a3 { margin-top: 2px; font-size: 16px; font-weight: 700; color: #F54900; } .amt small { font-size: 12px; font-weight: 400; }
.paycol, .stcol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.b-meth { border: 1px solid var(--s200); background: var(--s100); color: var(--s600); border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; }
.b-pay { border: 1px solid; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.b-pay.pending { background: #FEF9C2; color: #894B00; border-color: #FFF085; }
.b-pay.paid { background: #DCFCE7; color: #016630; border-color: #B9F8CF; }
.b-pay.failed, .b-pay.cancelled { background: #FFE2E2; color: #9F0712; border-color: #FFC9C9; }
.paycol .mini-in { width: 110px; height: 28px; padding: 0 8px; font-size: 12px; border: 1px solid var(--s300); border-radius: 6px; }
.b-act { border: 1px solid #C6D2FF; background: #EEF2FF; color: var(--ind); border-radius: 4px; padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
select.b-st { appearance: none; width: auto; height: auto; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700;
  text-align: center; cursor: pointer; background: var(--s200); color: var(--s700); box-shadow: inset 0 0 0 1px rgba(69,85,108,.2); }
.b-st.ORDERED { background: #DBEAFE; color: #193CB8; } .b-st.PREPARING { background: #FEF9C2; color: #894B00; }
.b-st.READY { background: #F3E8FF; color: #6E11B0; } .b-st.DONE { background: #DCFCE7; color: #016630; }
.stcol .memo summary { list-style: none; display: flex; gap: 4px; cursor: pointer; }
.stcol .memo summary::-webkit-details-marker { display: none; }
.b-mini { border: 1px solid var(--s200); background: #fff; color: var(--s500); border-radius: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.b-mini.on { border-color: #C6D2FF; background: #EEF2FF; color: var(--ind); }
.stcol .memo textarea { width: 200px; margin-top: 6px; font-size: 12px; }
.lg-empty { text-align: center; color: var(--s500); padding: 48px 0; }
.lg-cap { padding: 12px 16px; font-weight: 700; color: var(--s800); border-bottom: 1px solid var(--s200); }
.lg-foot { padding: 12px 16px; font-size: 12px; color: var(--s500); }
@media (max-width: 1100px) { .lg-grid5 { grid-template-columns: 1fr 1fr; } .lg-grid5 .span2 { grid-column: span 2; } }


/* 상품 관리 — 오픈오다 실측: 위 필터 줄(5칸) · 상태칩 + 오른쪽 단추 · 표 */
.lg-filter { display: grid; grid-template-columns: 1fr 1fr 1fr repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; margin-bottom: 16px; }
.lg-filter .pc-btn-white, .lg-filter .pc-btn-primary.big { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; }
.lg-acts.wrap { flex-wrap: wrap; } .lg-acts form { margin: 0; }
.pc-btn-primary.mid, .pc-btn-white.mid, .pc-btn-warn.mid { height: 38px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pc-btn-white.mid { font-weight: 500; }
.pc-btn-warn { border: 1px solid #FFD230; background: #fff; color: #BB4D00; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pc-btn-warn:hover { background: #FFFBEB; }
a.pc-btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lg-tbl.prod td { padding: 12px 16px; }
.pcell { display: flex; gap: 12px; align-items: center; cursor: pointer; min-width: 260px; }
.pcell img, .pcell .noimg { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--s100); flex: none; }
.pn { font-size: 15px; font-weight: 600; color: var(--s900); }
.pcell:hover .pn { color: var(--ind); }
.pd { font-size: 12px; color: var(--s400); max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp { font-size: 12px; color: var(--s500); }
.b-new { background: #EEF2FF; color: var(--ind); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.b-warn { margin-left: 6px; background: #FFE2E2; color: #9F0712; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
.b-cat { background: var(--s100); color: var(--s600); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.lg-tbl .muted { font-size: 12px; color: var(--s400); }
.lg-tbl .price { color: var(--s900); }
.lg-tbl .sold { font-size: 15px; font-weight: 700; color: var(--ind); }
.b-pst { display: inline-block; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; background: var(--s200); color: var(--s700); }
.b-pst.SELLING { background: #DCFCE7; color: #016630; } .b-pst.COMING_SOON { background: #FEF9C2; color: #894B00; }
.b-pst.SOLD_OUT { background: #FFE2E2; color: #9F0712; } .b-pst.HIDDEN { background: var(--s100); color: var(--s500); }
.b-share { border: 0; background: none; color: var(--s500); cursor: pointer; padding: 6px; border-radius: 6px; }
.b-share:hover { background: var(--s100); color: var(--ind); }
@media (max-width: 1100px) { .lg-filter { grid-template-columns: 1fr 1fr; } }


/* 링크 주문서 — 오픈오다 실측: 머리(ⓘ · 링크 카테고리 · 새 주문서) · 탭 3 · 조회 기간 줄 + 필터 접기 · 빈 화면 */
.with-i { display: inline-flex; align-items: center; gap: 6px; }
.qi { color: var(--s400); display: inline-flex; cursor: help; }
.pc-btn-white.sm { height: 34px; padding: 6px 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.pc-btn-white:disabled { opacity: .55; cursor: not-allowed; }
.pc-btn-primary.sq { width: 34px; height: 34px; padding: 0; }
.fl-card { display: flex; flex-direction: column; gap: 12px; }
.fl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fl-row .pc-label { margin: 0 6px 0 0; }
.fl-row .spacer { flex: 1; }
.fl-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr 34px; gap: 8px; align-items: center; }
.fl-row2[hidden] { display: none; }
.fl-row2 .pc-field { height: 34px; padding: 0 12px; }
.lg-emptyc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 0; color: var(--s300); }
.lg-emptyc p { margin: 8px 0 0; font-size: 14px; color: var(--s600); }
.lg-emptyc span { font-size: 12px; color: var(--s400); }
.lg-tbl .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--s500); }
.lnk2:hover { color: var(--ind); }
a.b-mini { display: inline-block; }
.ono.sm { font-size: 16px; }


/* 매출 집계 — 오픈오다 실측: 넓은 v2 화면(최대 폭 없음) · 조회 카드 · 파란 안내 막대 · 알약 탭 · 카드 3 · 표 카드 */
.main.full > .wrap { max-width: none; }
.btn.ghost2 { background: var(--soft); color: var(--ink); height: 30px; font-size: 13px; }
.ss-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ss-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-row .spacer { flex: 1; }
.ss-lbl { font-size: 13px; font-weight: 500; color: var(--ink); }
.pill-seg { display: inline-flex; gap: 2px; background: var(--soft); border-radius: 12px; padding: 3px; }
.pill-seg button, .pill-seg label { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--sub); padding: 5px 9px;
  border-radius: 9px; cursor: pointer; }
.pill-seg .on { background: #fff; color: var(--title); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pill-seg input { display: none; }
.infobar { display: flex; align-items: center; gap: 8px; background: #F0F7FF; color: #0B4A8F; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.infobar svg { color: #1570EF; flex: none; }
.pill-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.pill-tabs a { padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--sub); }
.pill-tabs a.on { background: var(--line); color: var(--title); font-weight: 700; }
.ss-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 0; color: var(--line); }
.ss-empty p { margin: 0; font-size: 15px; color: var(--sub); }
.ss-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.ss-stats.two { grid-template-columns: 1fr 1fr; }
.ss-stats .panel { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.ss-stats .k { font-size: 13px; font-weight: 500; color: var(--ink); }
.ss-stats .v { font-size: 18px; font-weight: 700; color: var(--title); }
.ss-stats .v.pri { color: var(--primary-ink); }
.ss-stats .c { font-size: 12px; color: var(--faint); }
.main .panel.ss-sect { padding: 0; margin-bottom: 16px; overflow: hidden; }
.ss-sect h3 { margin: 0; padding: 14px 16px 10px; font-size: 14px; font-weight: 700; color: var(--title); }
.ss-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ss-tbl th { background: #F9FAFB; color: var(--ink); font-weight: 500; text-align: left; padding: 9px 16px; }
.ss-tbl td { padding: 11px 16px; border-top: 1px solid var(--soft); color: var(--ink); }
.ss-tbl .r { text-align: right; }
.ss-tbl tr.sum td { font-weight: 700; color: var(--title); }
.ss-foot { margin: 0; padding: 10px 16px 14px; font-size: 12px; color: var(--faint); }
.ss-note { font-size: 13px; color: var(--ink); margin-bottom: 16px; }
.ss-note ul { margin: 6px 0 0; padding-left: 18px; color: var(--sub); line-height: 1.8; }
.ss-total { display: flex; justify-content: space-between; font-size: 14px; }
.dr-btn.dr-edit input { border: 0; background: none; font: inherit; font-size: 14px; color: var(--title); width: 124px; padding: 0; height: auto; }


/* 배송 관리 — 오픈오다 실측: 가게 · 상태 · 조회 기간 알약 칩, 오른쪽 검색 알약 */
.dd-btn.strong { font-weight: 700; color: var(--title); }
.search-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; width: 212px; padding: 0 10px; border-radius: 12px; background: var(--soft); color: var(--ink); }
.search-pill input { border: 0; background: none; height: 34px; padding: 0; font-size: 13px; }
.search-pill input:focus { outline: 0; }
.ss-tbl.dl td { vertical-align: top; }
.ss-tbl .mini { height: 30px; font-size: 13px; }

/* 고객 목록 — 오픈오다 실측(2026-09-27): 필터 칸 패딩 16 · 줄 사이 12 · 라벨 13/700 흐린 글자
   · 가게 칩(고른 것은 #E7EAFF/#3742BE 700) · 검색 알약 260 · 기간 칩 묶음 r14 p4 안쪽 칩 28 r10
   · 동의 카드: 주황 동그라미 48 · 제목 18/700 · 안내 상자 396 #FBFBFD r14 p16 · [동의합니다] 40 r14 */
.cust-filters.panel { padding: 16px; gap: 12px; }
.ss-lbl.b { font-weight: 700; color: var(--sub); line-height: 18px; }
.cust-filters .dd-btn.weak { background: var(--primary-weak); color: var(--primary-ink); font-weight: 700; }
.cust-filters .dd-btn b { font-weight: 700; color: var(--title); }
.cust-filters .dd-btn { color: var(--sub); }
.cust-filters .search-pill { width: 260px; border-radius: 14px; padding: 0 12px; }
.cust-filters .search-pill input { font-size: 14px; font-weight: 500; color: var(--title); }
.cust-filters .pill-seg { border-radius: 14px; padding: 4px; gap: 0; }
.cust-filters .pill-seg button { height: 28px; padding: 0 10px; border-radius: 10px; }
.cust-filters button.dr-btn { border: 0; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.dr-btn .dr-ph { color: var(--sub); }
.cust-consent.panel { padding: 16px; }
.cust-consent form { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; margin: 0; }
.cust-consent .disc-icon { width: 48px; height: 48px; border-radius: 50%; background: #FFF6DB; color: #B54708; display: grid; place-items: center; }
.cust-consent h3 { margin: 0; font-size: 18px; line-height: 25.2px; font-weight: 700; color: var(--title); }
.cust-consent .disc-box { width: min(396px, 100%); box-sizing: border-box; background: #FBFBFD; border-radius: 14px; padding: 16px;
  font-size: 14px; font-weight: 500; line-height: 21.7px; color: var(--sub); }
.cust-consent .disc-box p { margin: 0 0 8px; }
.cust-consent .disc-box ul { margin: 0; padding-left: 18px; list-style: disc; }
.cust-consent .disc-box li + li { margin-top: 4px; }
.cust-consent .btn.primary { height: 40px; border-radius: 14px; padding: 0 16px; font-size: 14px; font-weight: 700; }
@media (max-width: 720px) { .cust-filters .search-pill { width: 100%; } .cust-filters .ss-row .spacer { display: none; } }
.cust-filters .dd-btn, .cust-filters .pill-seg button, .cust-filters .dr-btn, .cust-filters .search-pill input,
.cust-consent .disc-box, .cust-consent .btn { letter-spacing: -0.01em; }
.cust-consent h3 { letter-spacing: -0.02em; }

/* 고객 목록 표 — 오픈오다 실측(2026-09-27, 동의 뒤)
   통계 카드 둘(r22 p16, 이름 12/500 · 숫자 21/700, 오늘 접속은 #5C6CFF) · 표 칸 패딩 8
   · 머리칸 60 높이 #F4F5F8 13/700, 첫·끝 칸만 r14, 아래 흰 8px 띠(머리와 몸 사이 틈) · 정렬 아이콘 13 #9CA0B0(고른 칸 #15171F)
   · 몸칸 54 높이 p12 16 14/500 · 식별번호 14/600 #3742BE · 포인트·총금액 700 · 노쇼 0 은 흐리게
   · 동의 칩 13/700 #FBFBFD r8 p3 8 · 메모 30×30 r10 #9CA0B0 · [차단] 46×30 13/700 #B42318 on #FEE4E2 r10
   · 아래 띠: [20개씩] 32 r14 #EEEFF4 14/700 · '전체 N명 중' 12/500 · 쪽 단추 32×32 r10 13/700(지금 쪽 #EEEFF4) */
.cust-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.cust-stats .panel { padding: 16px; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cust-stats .k { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); letter-spacing: -0.01em; }
.cust-stats .v { font-size: 21px; line-height: 28px; font-weight: 700; color: var(--title); letter-spacing: -0.025em; }
.cust-stats .v.pri { color: var(--primary); }
.cust-stats .v small { font-size: 14px; font-weight: 500; color: var(--sub); margin-left: 1px; letter-spacing: -0.01em; }
.main .panel.cust-table { padding: 8px; margin-bottom: 20px; }
.cu-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.cu-tbl th { height: 60px; padding: 0 16px; background: var(--soft); border-bottom: 8px solid #fff; font-size: 13px; font-weight: 700;
  color: var(--ink); text-align: left; white-space: nowrap; }
.cu-tbl th:first-child { border-radius: 14px 0 0 14px; }
.cu-tbl th:last-child { border-radius: 0 14px 14px 0; }
.cu-tbl th.r, .cu-tbl td.r { text-align: right; }
.cu-tbl th.c, .cu-tbl td.c { text-align: center; }
.cu-tbl th a { display: inline-flex; align-items: center; gap: 1px; color: inherit; }
.cu-tbl th a svg { color: var(--faint); }
.cu-tbl th a.on svg { color: var(--title); }
.cu-tbl th a .up svg { transform: rotate(180deg); }
.cu-tbl td { height: 54px; padding: 12px 16px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em; white-space: nowrap; }
.cu-tbl tbody tr:hover td { background: #FBFBFD; }
.cu-tbl td:first-child { border-radius: 14px 0 0 14px; }
.cu-tbl td:last-child { border-radius: 0 14px 14px 0; }
.cu-tbl td.id { font-weight: 600; color: var(--primary-ink); }
.cu-tbl .nick { font-weight: 700; color: var(--title); }
.cu-tbl td.strong { font-weight: 700; color: var(--title); }
.cu-tbl td.zero { color: var(--faint); }
.cu-tbl tr.blocked td { color: var(--faint); }
.cu-flag { font-size: 12px; font-weight: 700; color: #B42318; margin-left: 4px; }
.cu-ico.has { color: var(--primary); }   /* 메모가 있으면 연필만 파랗게 — 표 줄 높이는 오픈오다와 같게 둔다 */
.cu-agree { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 3px 8px; box-sizing: border-box; border-radius: 8px;
  background: #FBFBFD; font-size: 13px; font-weight: 700; color: var(--sub); }
.cu-agree::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cu-agree.on { background: var(--primary-weak); color: var(--primary-ink); }
.cu-tbl .mg-in { display: flex; align-items: center; gap: 6px; }
.cu-tbl .mg-in form { margin: 0; }
.cu-ico { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--faint); cursor: pointer; }
.cu-ico:hover { background: var(--soft); color: var(--title); }
.cu-block { height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: #FEE4E2; color: #B42318; font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; }
.cu-block.off { background: var(--chip); color: var(--sub); }
.cu-pager { display: flex; align-items: center; gap: 4px; padding: 12px 0; }
.cu-pager .spacer { flex: 1; }
.cu-size { position: relative; display: inline-flex; align-items: center; height: 32px; border-radius: 14px; background: var(--chip); color: var(--ink); }
.cu-size select { appearance: none; border: 0; background: none; height: 32px; padding: 0 30px 0 12px; font: inherit; font-size: 14px;
  font-weight: 700; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; width: auto; }
.cu-size svg { position: absolute; right: 10px; pointer-events: none; }
.cu-range { margin-left: 12px; font-size: 12px; font-weight: 500; color: var(--sub); letter-spacing: -0.01em; }
.cu-pg { min-width: 32px; height: 32px; padding: 0 8px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--sub); }
.cu-pg.on { background: var(--chip); color: var(--ink); }
.cu-pg.off { opacity: .4; pointer-events: none; }
/* 고객 메모 창 — 480 폭 r22 · 머리 p16 20 12 제목 21/700 · 몸 p20 칸 #F4F5F8 r14 p12 14 · 발 p16 20 20 단추 88×40 r14 */
dialog.cu-modal { width: min(480px, 94vw); border-radius: 22px; box-shadow: 0 20px 60px rgba(20,26,33,.18); }
dialog.cu-modal::backdrop { background: rgba(20,26,33,.45); }
.cu-modal .cm-h { display: flex; align-items: center; padding: 16px 20px 12px; }
.cu-modal .cm-h h3 { flex: 1; margin: 0; font-size: 21px; line-height: 28px; font-weight: 700; color: var(--title); letter-spacing: -0.025em; }
.cu-modal .cm-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 14px; background: none; color: var(--sub); cursor: pointer; }
.cu-modal .cm-b { padding: 20px; }
.cu-modal textarea { width: 100%; box-sizing: border-box; min-height: 198px; border: 0; border-radius: 14px; background: var(--soft);
  padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 500; line-height: 21.7px; color: var(--title); resize: vertical; }
.cu-modal .cm-hint { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--faint); }
.cu-modal .cm-f { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 20px; }
.cu-modal .cm-f .btn { width: 88px; height: 40px; border-radius: 14px; font-size: 14px; font-weight: 700; }
@media (max-width: 720px) { .cust-stats { grid-template-columns: 1fr; } }
.cu-tbl { table-layout: fixed; min-width: 1198px; }
.cu-tbl th, .cu-tbl td { overflow: hidden; text-overflow: ellipsis; }
.cust-stats { gap: 12px; }
/* 실측 대조로 맞춘 자투리: 필터 아래 20 · 숫자 줄 28(‘명’ 이 줄을 키우지 않게) · 동의 칩 점 6 · 개수 고르기 95 폭 */
.main form.cust-filters.panel { margin-bottom: 20px; }
.cust-stats .v { display: flex; align-items: baseline; height: 28px; }
.cust-stats .v small { line-height: 1; }
.cu-agree { gap: 6px; }
.cu-agree::before { width: 6px; height: 6px; }
.cu-size select { padding-right: 34px; }

/* 공급업체 — 오픈오다 실측(2026-09-27): 제목 옆 ⓘ 36 r14 · 검색 알약 260×36 #EEEFF4 · 카드 격자 minmax(280,1fr) 사이 12
   · 카드 흰 r22 p20 세로 사이 10: 위(로고 50 높이 · [팔로우 신청] 30 r10 13/700) → 이름 16/700 + 인증(12/700 #5C6CFF on #F7F8FF r6)
   → 가게 줄(14/500 흐린, 가게 아이콘 14) → 칩(12 r6 #FBFBFD, 첫 칩 700 진하게) → 소개 14/500 → 아래 단추 둘(30 r10 13/700 #F4F5F8) */
.ttl .help-i { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 14px; color: var(--sub); margin-left: 4px; vertical-align: middle; }
.ttl .help-i:hover { background: var(--soft); color: var(--title); }
.sup-search { margin: 0 0 20px; }
.sup-search .search-pill { width: 260px; border-radius: 14px; padding: 0 12px; background: var(--chip); }
.sup-search .search-pill input { font-size: 14px; font-weight: 500; color: var(--title); letter-spacing: -0.01em; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sup-card { background: #fff; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.sup-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sup-logo { height: 50px; display: flex; align-items: center; border-radius: 14px; }
.sup-logo .brand-mk { width: 50px; height: 50px; border-radius: 14px; font-size: 20px; }
.sup-info { display: flex; flex-direction: column; gap: 6px; }
.sup-body { display: flex; flex-direction: column; gap: 2px; }
.sup-name { display: flex; align-items: center; gap: 8px; }
.sup-name .nm { font-size: 16px; line-height: 26px; font-weight: 700; color: var(--title); letter-spacing: -0.01em; }
.certified { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 6px; background: #F7F8FF; color: var(--primary);
  font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: -0.01em; }
.sup-sub { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--sub); letter-spacing: -0.01em; }
.sup-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sup-tags .tag { display: inline-flex; align-items: center; height: 24px; padding: 3px 8px; box-sizing: border-box; border-radius: 6px; background: #FBFBFD;
  font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); letter-spacing: -0.01em; white-space: nowrap; }
.sup-tags .tag.b { font-weight: 700; color: var(--title); }
.sup-intro { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.sup-act { display: flex; gap: 8px; margin-top: auto; }
.sup-act .sup-btn { flex: 1; }
.sup-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--soft); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sup-btn.off { color: var(--faint); }
.sup-btn.pri { background: var(--primary); color: #fff; }
.sup-btn.on { background: var(--primary-weak); color: var(--primary-ink); cursor: default; }
.sup-btn.wait { background: var(--chip); color: var(--sub); cursor: default; }
.top .ttl.row { flex-direction: row; align-items: center; }

/* 본사 상품 보관함 — 담기 연결 토큰 · 판매가 바로 적기 */
.pick-link { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pick-link .pl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-link code { background: var(--soft); border-radius: 8px; padding: 4px 8px; font-size: 13px; user-select: all; }
.price-in { width: 110px; height: 32px; text-align: right; font-weight: 700; border-radius: 10px; }
.price-in.empty { background: #FFF6DB; border-color: #F5C26B; }
.price-in.saved { background: #E6F6EC; border-color: #34A853; }
.price-in.bad { border-color: #D92D20; }
.cat-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cat-in { height: 32px; width: 120px; border-radius: 10px; font-size: 13px; }
.cat-in.empty { background: #FFF6DB; border-color: #F5C26B; }
.cat-in.saved { background: #E6F6EC; border-color: #34A853; }
.price-in.sm { width: 90px; }
.price-in.faintin { font-weight: 500; color: var(--sub); }
.gc-add { display: flex; gap: 8px; margin-bottom: 12px; }
.gc-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.gc-row { display: flex; align-items: center; gap: 6px; margin: 0; }
.gc-row input[type=text] { flex: 1; height: 34px; }

/* ── 상품 등록 창 — 오픈오다 실측(2026-09-27). 이 창만 오픈오다처럼 slate·indigo 색을 쓴다 ─────────────
   창 768 r12 · 머리 p16 제목 20/700 · 탭 3등분 46 높이 14/700(고른 탭 #4F46E5 밑줄) · 몸 #F8FAFC p16
   · 단락 흰 r12 p20 테두리 #CBD5E1, 제목 16/700 밑줄 8 · 라벨 14/700 #334155 · 칸 42 높이 r8 p10 16
   · 사진 칸 161 정사각 r8 점선 2px · 도구막대 단추 30 r10, 칸막이 1×16 · 아래: 상태 고르기(오른쪽 반) · [취소][저장하기] 반반 */
dialog.om { width: min(768px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 12px; color: #1E293B;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); overflow: hidden; }
dialog.om[open] { display: flex; flex-direction: column; }
dialog.om::backdrop { background: rgba(15,23,42,.5); }
dialog.om > form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.om-h { display: flex; align-items: center; padding: 16px; background: #fff; }
.om-h h2 { flex: 1; margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: #1E293B; }
.om-x { border: 0; background: none; font-size: 24px; line-height: 1; color: #64748B; cursor: pointer; padding: 4px; }
.om-tabs { display: flex; border-bottom: 1px solid #E2E8F0; background: #fff; }
.om-tabs button { flex: 1; height: 46px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px;
  font-weight: 700; color: #64748B; cursor: pointer; }
.om-tabs button.on { color: #4F46E5; border-bottom-color: #4F46E5; }
.om-b { flex: 1; min-height: 0; overflow-y: auto; background: #F8FAFC; padding: 16px; }
.om-s { background: #fff; border: 1px solid #CBD5E1; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.om-s h3 { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid #F1F5F9; font-size: 16px; line-height: 24px; font-weight: 700; color: #1E293B; }
.om-sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid #F1F5F9; margin-bottom: 16px; }
.om-sh h3 { border: 0; margin: 0; }
.om-s h3 i, .om-s label i { font-style: normal; color: #EF4444; }
.om-s h4 { margin: 20px 0 10px; font-size: 16px; font-weight: 700; color: #1E293B; }
.om-sbtn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 6px 10px; border: 1px solid #CBD5E1; border-radius: 8px;
  background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; }
.om-sbtn.soft { background: #EEF2FF; border-color: #EEF2FF; color: #4F46E5; }
.om-s label:not(.om-ck):not(.om-store):not(.om-im) { display: block; margin: 16px 0 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: #334155; }
.om-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.om-g2 > div > label:first-child { margin-top: 0 !important; }
.om-g2 > div:nth-child(n+3) > label:first-child { margin-top: 16px !important; }
.om-s input[type=text], .om-s input[type=number], .om-s input[type=date], .om-s input[type=datetime-local], .om-s select, .om-s textarea {
  width: 100%; box-sizing: border-box; height: 42px; padding: 10px 16px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff;
  font: inherit; font-size: 14px; color: #1E293B; }
.om-s textarea { height: auto; min-height: 62px; resize: vertical; }
.om-s input:focus, .om-s select:focus, .om-s textarea:focus { outline: 2px solid #C7D2FE; border-color: #6366F1; }
.om-help { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: #94A3B8; }
.om-help.in { margin-left: 24px; }
.om-help.green { color: #16A34A; font-weight: 600; }
.om-help strong { color: #475569; }
.om-ck { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; font-weight: 700; color: #334155; cursor: pointer; }
.om-ck input { width: 16px; height: 16px; margin: 0; accent-color: #4F46E5; }
.om-ck.dim { color: #64748B; font-size: 12px; margin: 0; cursor: default; }
.om-imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.om-im { position: relative; width: 161px; height: 161px; border-radius: 8px; overflow: hidden; background: #F1F5F9; cursor: grab; }
.om-im img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.om-im .rep { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 6px; background: #4F46E5; color: #fff; font-size: 11px; font-weight: 700; }
.om-ia { position: absolute; right: 6px; top: 6px; display: none; gap: 4px; }
.om-im:hover .om-ia { display: flex; }
.om-ia button { border: 0; border-radius: 6px; background: rgba(15,23,42,.65); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 6px; cursor: pointer; }
.om-im.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; border: 2px dashed #CBD5E1;
  box-sizing: border-box; font-size: 12px; font-weight: 600; color: #94A3B8; cursor: pointer; }
.om-im.add b { font-size: 34px; font-weight: 300; line-height: 1; }
.om-imgfoot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: #94A3B8; }
.om-store { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid #C7D2FE; border-radius: 8px; background: #EEF2FF;
  font-size: 14px; font-weight: 600; color: #1E293B; cursor: pointer; }
.om-store input { width: 16px; height: 16px; margin: 0; accent-color: #4F46E5; }
.om-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid #E2E8F0; border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; }
.om-bar button, .om-bar label { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 16px;
  color: #3B3F4E; cursor: pointer; display: inline-grid; place-items: center; box-sizing: border-box; }
.om-bar button.w { padding: 0 10px; font-size: 14px; }
.om-bar button.faint { color: #6F7384; }
.om-bar button:hover, .om-bar label:hover { background: #F1F5F9; }
.om-bar > span { width: 1px; height: 16px; background: #D3D6E0; margin: 0 4px; }
.om-bar .sp { flex: 1; }
.om-bar .it { font-style: italic; }
.om-rte { min-height: 180px; max-height: 420px; overflow-y: auto; padding: 12px; border: 1px solid #E2E8F0; border-radius: 0 0 8px 8px; background: #FBFBFD;
  font-size: 14px; line-height: 1.7; outline: 0; }
.om-rte img { max-width: 100%; }
.om-mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.om-mode select { width: 140px !important; height: 36px !important; padding: 0 10px !important; font-size: 12px !important; font-weight: 700; color: #334155 !important; }
.om-mode .sp { flex: 1; }
.om-sub { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #F1F5F9; }
.om-sub button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 700; color: #64748B; cursor: pointer; }
.om-sub button.on { background: #fff; color: #1E293B; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.om-in { display: flex; align-items: center; gap: 6px; }
.om-in input { height: 50px !important; font-size: 18px !important; font-weight: 700; }
.om-in span { font-size: 14px; font-weight: 500; color: #64748B; }
.om-in.sm input { height: 38px !important; font-size: 14px !important; }
.om-apply { flex: none; width: 70px; height: 50px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; font: inherit; font-size: 12px;
  font-weight: 700; line-height: 1.3; color: #334155; cursor: pointer; }
.om-in.sm .om-apply { width: 67px; height: 46px; }
.om-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.om-t th { height: 41px; padding: 0 10px; text-align: left; font-size: 12px; font-weight: 700; color: #64748B; border-bottom: 1px solid #E2E8F0; }
.om-t td { height: 59px; padding: 0 10px; border-bottom: 1px solid #F1F5F9; }
.om-t .left { background: rgba(238,242,255,.3); color: #4F46E5; font-weight: 700; }
.om-t td.nm { font-weight: 700; }
.om-t input[type=number], .om-t input[type=text] { height: 34px !important; padding: 4px 10px !important; border-radius: 4px !important; }
.om-t input[type=checkbox] { width: 20px; height: 20px; accent-color: #4F46E5; }
.om-t.sm th { height: 33px; }
.om-t.sm td { height: 47px; }
.om-addopt { width: 100%; height: 50px; margin: 12px 0; border: 2px dashed #C7D2FE; border-radius: 12px; background: #EEF2FF; font: inherit; font-size: 14px;
  font-weight: 700; color: #4F46E5; cursor: pointer; }
.om-opt { border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px; margin-bottom: 12px; background: #fff; }
.om-oh { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.om-oh input { width: 282px !important; }
.om-oh button { width: 32px; height: 32px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; cursor: pointer; color: #475569; }
.om-oh i { width: 1px; height: 16px; background: #E2E8F0; margin: 0 4px; }
.om-oh .del { width: auto; height: 30px; padding: 0 10px; margin-left: auto; font-size: 12px; font-weight: 700; color: #DC2626; border-color: #FECACA; background: #FEF2F2; }
.om-opt small { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #475569; }
.om-opt details { margin-top: 12px; }
.om-opt summary { list-style: none; display: flex; justify-content: space-between; height: 34px; align-items: center; padding: 0 12px; border-radius: 8px;
  background: #F8FAFC; font-size: 12px; font-weight: 700; color: #334155; cursor: pointer; }
.om-date { margin-top: 16px; padding: 12px; border-radius: 8px; background: #F8FAFC; }
.om-date b { display: block; margin-bottom: 8px; font-size: 14px; color: #334155; }
.om-date small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: #64748B; }
.om-date input { height: 38px !important; }
.om-f { background: #fff; border-top: 1px solid #E2E8F0; padding: 12px 16px 16px; }
.om-st { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.om-st select { width: 50%; height: 40px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; }
.om-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.om-btns button { height: 44px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.om-cancel { border: 1px solid #CBD5E1; background: #fff; color: #334155; }
.om-save { border: 0; background: #4F46E5; color: #fff; }
.om-save:hover { background: #4338CA; }
.om-ctx { position: fixed; z-index: 10; display: flex; flex-direction: column; min-width: 150px; padding: 4px; border: 1px solid #E2E8F0; border-radius: 8px;
  background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.om-ctx button { border: 0; background: none; padding: 8px 10px; text-align: left; font: inherit; font-size: 13px; border-radius: 6px; cursor: pointer; }
.om-ctx button:hover { background: #F1F5F9; }
@media (max-width: 640px) {
  .om-g2 { grid-template-columns: 1fr; }
  .om-im { width: calc(50% - 4px); height: auto; aspect-ratio: 1; }
  .om-oh input { width: 100% !important; }
}
/* 이 창 안의 hidden 은 display 를 준 칸도 확실히 숨긴다(옵션별 설정 단추가 단일 상품에서 보이던 것) */
#pform [hidden] { display: none !important; }
.po-shops td { padding-top: 0 !important; font-size: 12px; border-top: 0 !important; }

/* 가게 설정 › 상품 보이기 — 오픈오다 실측(2026-09-28). 단락 카드·알약·그림 카드·스위치 줄 */
.settings .body:has(.st-sec) { background: none; padding: 0; box-shadow: none; }
.st-h { margin: 0 0 16px; font-size: 21px; line-height: 28px; font-weight: 700; color: var(--title); letter-spacing: -0.025em; }
.st-sec { background: #fff; border-radius: 22px; padding: 16px 20px 20px; margin-bottom: 16px; }
.st-t { display: block; margin-bottom: 16px; font-size: 18px; line-height: 25px; font-weight: 700; color: var(--title); letter-spacing: -0.02em; }
.st-s { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.st-help { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--sub); }
.st-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.st-seg input, .st-lay input { position: absolute; opacity: 0; pointer-events: none; }
.st-seg span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 14px; background: var(--soft);
  font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; letter-spacing: -0.01em; }
.st-seg input:checked + span { background: #262936; color: #fff; }
.st-lay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.st-lay label { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; border-radius: 18px; background: var(--soft);
  border: 2px solid transparent; cursor: pointer; }
.st-lay input:checked ~ .pic { background: #fff; }
.st-lay label:has(input:checked) { background: var(--primary-weak); border-color: #C7CDFF; }
.st-lay em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink); padding-left: 4px; }
.st-lay label:has(input:checked) em { color: var(--primary); font-weight: 700; }
.st-lay .pic { display: grid; gap: 6px; height: 110px; padding: 12px; border-radius: 12px; background: #fff; box-sizing: border-box; }
.st-lay .pic i { display: block; background: #E8EAF1; border-radius: 6px; }
.st-lay .pic.list { grid-template-columns: 30px 1fr; grid-auto-rows: 12px; align-content: start; }
.st-lay .pic.list .sq { grid-row: span 2; height: 30px; }
.st-lay .pic.list .ln.s { width: 60%; }
.st-lay .pic.image { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 6px 6px; }
.st-lay .pic.option { grid-template-columns: 30px 1fr; grid-auto-rows: 8px; align-content: start; }
.st-lay .pic.option .sq { grid-row: span 3; height: 30px; }
.st-lay .pic.option .ln.s { grid-column: 1 / 3; width: 70%; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin-top: 10px; border-radius: 16px; background: #FBFBFD; }
.st-row b { font-size: 16px; font-weight: 700; color: var(--title); }
.st-row p { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
.st-row.col { flex-direction: column; align-items: stretch; }
.st-rh { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-row small { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.st-num { display: flex; align-items: center; width: min(280px, 100%); height: 40px; margin-top: 6px; padding: 0 16px; border-radius: 14px; background: var(--soft); box-sizing: border-box; }
.st-num input { flex: 1; border: 0; background: none; height: 38px; padding: 0; font-size: 14px; color: var(--title); }
.st-num span { font-size: 14px; color: var(--sub); }
@media (max-width: 720px) { .st-lay { grid-template-columns: 1fr; } }
/* 본사 공급업체 신청 목록 — 이미 승인된 줄의 '승인' 은 단추가 아니라 상태다 */
.chip.state { cursor: default; border: 0; }

/* 가게 만들기 창 — 오픈오다 실측(2026-09-28) */
dialog.ns { width: min(480px, 94vw); padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 20px 60px rgba(20,26,33,.18); }
dialog.ns::backdrop { background: rgba(20,26,33,.45); }
dialog.ns form { margin: 0; }
.ns-h { display: flex; align-items: center; gap: 8px; padding: 18px 20px 10px; }
.ns-h b { font-size: 18px; line-height: 25px; font-weight: 700; color: var(--title); letter-spacing: -0.02em; }
.ns-h span { font-size: 12px; font-weight: 500; color: var(--sub); }
.ns-h i { flex: 1; }
.ns-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 14px; background: none; color: var(--sub); cursor: pointer; }
.ns-bar { height: 4px; margin: 6px 20px 0; background: var(--soft); border-radius: 2px; overflow: hidden; }
.ns-bar i { display: block; width: 50%; height: 100%; background: var(--primary); transition: width .2s; }
.ns-b { padding: 8px 20px 20px; }
.ns-b > label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.ns-b label em { font-style: normal; color: #B42318; }
.ns-b input[type=text] { width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--soft);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--title); }
.ns-slug { display: flex; gap: 8px; align-items: center; }
.ns-slug > span { display: flex; align-items: center; height: 40px; padding-left: 14px; border-radius: 14px 0 0 14px; background: var(--soft);
  font-size: 14px; font-weight: 500; color: var(--sub); white-space: nowrap; margin-right: -8px; }
.ns-slug input { flex: 1; min-width: 0; border-radius: 0 14px 14px 0 !important; }
.ns-slug.addr input { border-radius: 14px !important; }
.ns-btn { flex: none; width: 83px; height: 40px; border: 0; border-radius: 14px; background: var(--soft); font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); cursor: pointer; }
#ns-a2 { margin-top: 8px; }
.ns-help { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--sub); }
.ns-help.good { color: #1F6B4A; }
.ns-help.bad { color: #B42318; }
.ns-note { margin: 12px 0 0; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); }
.ns-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.ns-f.three { justify-content: stretch; }
.ns-f.three button { flex: 1; }
.ns-next { min-width: 88px; height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--soft); color: var(--faint);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ns-next.on { background: var(--primary); color: #fff; }
.ns-next:disabled { cursor: default; }
.ns-ghost { height: 48px; border: 0; border-radius: 14px; background: var(--soft); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ns-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ns-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ns-pick span { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 68px; padding: 0 12px; border-radius: 14px; background: var(--soft);
  border: 2px solid transparent; box-sizing: border-box; cursor: pointer; }
.ns-pick b { font-size: 14px; font-weight: 700; color: var(--title); }
.ns-pick small { font-size: 12px; font-weight: 500; color: var(--sub); }
.ns-pick input:checked + span { background: #F7F8FF; border-color: #C7CDFF; }
.ns-pick input:checked + span b { color: var(--primary); }

/* 마이 페이지 — 오픈오다 실측(2026-09-28): 가운데 640 폭 카드, 사이 12 */
.mp { display: flex; flex-direction: column; gap: 12px; width: min(640px, 100%); margin: 0 auto; }
.mp-c { background: #fff; border-radius: 22px; overflow: hidden; }
.mp-c header { padding: 14px 16px; border-bottom: 1px solid var(--soft); }
.mp-c h3 { margin: 0; font-size: 14px; line-height: 22px; font-weight: 700; color: var(--title); }
.mp-b { padding: 16px; display: flex; flex-direction: column; margin: 0; }
.mp-b label { display: block; margin: 14px 0 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink); }
.mp-b input[type=text], .mp-b input[type=tel], .mp-b input[type=password], .mp-b textarea {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--soft);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--title); margin-bottom: 8px; }
.mp-b textarea { height: 88px; padding: 10px 14px; resize: vertical; }
.mp-me { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--soft); }
.mp-av { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-weak);
  color: var(--primary); font-size: 24px; font-weight: 800; }
.mp-me p { margin: 0; }
.mp-me .nm { font-size: 18px; line-height: 25px; font-weight: 700; color: var(--title); }
.mp-me .rl { font-size: 14px; font-weight: 600; color: var(--primary-ink); }
.mp-me .sub { font-size: 14px; font-weight: 500; color: var(--sub); }
.mp-row { display: flex; gap: 8px; }
.mp-row .zip { width: 128px !important; flex: none; }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 0; border-radius: 14px;
  background: var(--soft); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; }
.mp-btn.wide { width: 100%; box-sizing: border-box; margin-top: 10px; }
.mp-save { width: 100%; height: 40px; margin-top: 12px; border: 0; border-radius: 14px; background: var(--primary); color: #fff; font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.mp-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.mp-line .t { margin: 0; font-size: 14px; font-weight: 700; color: var(--title); }
.mp-line .d { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--sub); }
.mp-line.sm { font-size: 14px; color: var(--ink); border-top: 1px solid var(--soft); }
.mp-soon { flex: none; padding: 3px 8px; border-radius: 8px; background: var(--soft); font-size: 12px; font-weight: 700; color: var(--faint); }
.mp-note { margin: 8px 0 0; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--faint); }
.mp-note.c { text-align: center; color: var(--sub); }
.mp-note .pri { color: var(--primary-ink); }
.mp-txt { margin: 0 0 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--sub); }
.mp-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px; background: #F2FBF6; color: #1F6B4A;
  font-size: 13px; font-weight: 700; margin-left: 6px; }
.mp-chip.off { background: var(--soft); color: var(--sub); }
.mp-shop { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 14px; margin-bottom: 8px; border-radius: 14px;
  background: #FBFBFD; color: var(--ink); }
.mp-shop b { font-size: 14px; font-weight: 700; color: var(--title); }
.mp-pw summary { cursor: pointer; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--soft);
  font-size: 14px; font-weight: 700; color: var(--ink); list-style: none; }
.mp-pw form { margin-top: 6px; }

/* ── 모바일(≤760) 오픈오다 모바일 실측(2026-09-28, 폭 386) ───────────────────────── */
.m-only { display: none; }
@media (max-width: 760px) {
  .m-only { display: block; }
  .d-only { display: none !important; }
  /* 홈 가게 카드: 가운데 정렬, 버튼은 아래 */
  .panel.biz { flex-direction: column; text-align: center; gap: 10px; }
  .panel.biz .biz-name { justify-content: center; }
  /* 고객 목록: 라벨 없이 칩을 넓게, 표 대신 카드 */
  .cust-filters .ss-lbl { display: none; }
  .cust-filters .ss-row { gap: 8px; }
  .cust-filters .dd-btn.weak { flex: 1 1 100%; justify-content: space-between; }
  .cust-filters .search-pill { width: 100% !important; order: 3; }
  .main .panel.cust-table { display: none; }
  .cust-stats { grid-template-columns: 1fr 1fr !important; }
  .cu-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .cu-card { background: #fff; border-radius: 22px; padding: 16px; }
  .cu-card.blocked { opacity: .6; }
  .cc-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .cc-h .id { color: var(--primary-ink); font-size: 14px; }
  .cc-h .nick { font-weight: 700; color: var(--title); }
  .cc-h .sp { flex: 1; }
  .cc-h .dt { font-size: 12px; color: var(--faint); }
  .cc-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 0; }
  .cc-g dt { font-size: 12px; color: var(--sub); }
  .cc-g dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--title); }
  .cc-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
  .cc-f form { margin: 0; }
  .cc-btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--soft);
    font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
  /* 주문 관리: 조회 조건 접기 · 날짜 단추 2칸 · 필터 한 줄씩 */
  #ff .ff-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--soft); cursor: pointer; }
  #ff .ff-h b { font-size: 14px; color: var(--title); }
  #ff.fold > :not(.ff-h) { display: none !important; }
  #ff.fold .ff-h { margin: 0; padding: 0; border: 0; }
  #ff.fold .car { transform: rotate(180deg); }
  #ff .presets { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  #ff .lg-grid5 { grid-template-columns: 1fr !important; }
  #ff .lg-grid5 .span2 { grid-column: auto; }
  #ff .lg-flex { flex-direction: column; align-items: stretch; }
  #ff .lg-flex > div { width: auto !important; }
  /* 상품 관리: 위쪽 세 단추 · 필터 한 줄씩 · 아래 단추 셋 한 줄 */
  .m-acts { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .m-acts a { justify-content: center; height: 44px; }
  .lg-filter { grid-template-columns: 1fr 1fr 1fr !important; }
  .lg-filter > div { grid-column: 1 / -1; }
  /* 가게 목록: 버튼 둘을 제목 아래 반반 */
  .top.st-top { flex-wrap: wrap; }
  .top.st-top .ttl { flex: 1 1 100%; }
  .top.st-top .btn { flex: 1; }
}
@media (max-width: 760px) { .top.st-top .btn.ghost { background: var(--soft); color: var(--ink); } }

/* 상품 보관함 — 오픈오다 실측(2026-09-28): '보관함 선택' 라벨 + 칩 200×36 r14 #E7EAFF · 검색 알약 · 점선 원 빈 화면 · 선택 창 */
.rp-i { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: -4px; cursor: help; }
.rp-bar { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 18px; }
.rp-pick { display: flex; flex-direction: column; gap: 6px; }
.rp-lbl { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); }
.rp-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 200px; height: 36px; padding: 0 12px;
  border: 0; border-radius: 14px; background: #E7EAFF; color: var(--primary); font-size: 14px; cursor: pointer; }
.rp-chip b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-q { flex: 1; min-width: 0; }
.rp-q .search-pill { width: 100%; }
.rp-p { display: flex; gap: 12px; align-items: center; }
.rp-acts { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.rp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--line); }
.rp-empty p { margin: 0; font-size: 14px; color: var(--sub); }
.rp-list { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 2px; }
.rp-list a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink); font-size: 14px; }
.rp-list a b { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-list a.on { background: #E7EAFF; color: var(--primary); } .rp-list a.on b { font-weight: 700; }
.rp-list a:hover:not(.on) { background: var(--soft); }
.rp-list .n { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: #fff; font-size: 11px; color: var(--sub); }
.rp-list .grp { margin: 10px 12px 4px; font-size: 12px; color: var(--sub); }
.rp-new { margin-top: 8px; height: 46px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--sub); font-size: 14px; font-weight: 500; cursor: pointer; }
.rp-newf { display: flex; gap: 6px; margin-top: 8px; } .rp-newf input { flex: 1; height: 40px; }
@media (max-width: 760px) {
  .rp-bar { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 0; }
  .rp-lbl { display: none; }
  .rp-chip { width: 100%; height: 38px; }
  dialog.rp-modal { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; }
}
.top:has(.rp-i) .ttl { margin-right: 0; }
.top .rp-i { margin-right: auto; }
.rp-newf[hidden], .rp-new[hidden] { display: none; }

/* 링크 주문서 모바일 — 오픈오다 실측(390폭): '조회 기간' 한 줄 · 기간 단추 넷 · 날짜 칩 · [필터 접기] 폭 가득 · 가게/상태 한 줄씩 · 검색칸+단추 */
@media (max-width: 760px) {
  .lg-head { flex-wrap: wrap; }
  .fl-row .pc-label { flex-basis: 100%; margin: 0 0 2px; }
  .fl-row > button[name=rng] { flex: 1; }
  .fl-row .spacer { display: none; }
  .fl-row > button[type=button] { flex-basis: 100%; height: 36px; }
  .fl-row2 { grid-template-columns: 1fr 40px; }
  .fl-row2 select { grid-column: 1 / -1; height: 40px; }
  .fl-row2 input.pc-field, .fl-row2 .sq { height: 40px; }
}
/* 매출 집계 모바일 — 오픈오다는 라벨 없이 분기 · 날짜 칩 · 결제일/주문일 + 가게 · [집계] */
@media (max-width: 760px) {
  .ss-form .ss-lbl { display: none; }
  .ss-form .dr-edit input { width: 112px; font-size: 13px; }
  .ss-form .spacer { flex-basis: 100%; height: 0; }
}
/* 모바일 필터 공통 — 검색 알약은 폭 가득, 칩 줄은 줄바꿈 없이 옆으로 밀기(오픈오다 배송 관리 실측) */
@media (max-width: 760px) {
  .ss-form .search-pill { width: 100%; height: 40px; }
  .ss-form .pill-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .ss-form .pill-seg::-webkit-scrollbar { display: none; }
  .ss-form .pill-seg > * { white-space: nowrap; flex: none; }
}

/* 권한 관리 — 매니저 추가 창(오픈오다 480 r22 · 라벨 13/700 · 칸 40 r14 #F4F5F8 · 역할 라디오 두 줄) */
.pm-b { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.pm-b > label { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--title); } .pm-b > label em { color: var(--danger, #e5484d); font-style: normal; }
.pm-b input[type=text], .pm-b input[type=password] { height: 40px; border: 0; border-radius: 14px; background: #F4F5F8; padding: 0 12px; font-size: 14px; }
.pm-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #EEF6FF; color: #1f6fd1; font-size: 13px; }
.pm-roles { display: flex; flex-direction: column; gap: 4px; }
.pm-roles label { display: flex; gap: 8px; align-items: flex-start; padding: 4px; cursor: pointer; }
.pm-roles input { margin-top: 3px; accent-color: var(--primary); }
.pm-roles span { display: flex; flex-direction: column; } .pm-roles b { font-size: 14px; font-weight: 500; color: var(--title); }
.pm-roles small { font-size: 12px; color: var(--sub); }
.pm-help { margin: 8px 0 0; font-size: 12px; color: var(--sub); }

/* 활동 내역 — 오픈오다 af-* 실측 */
.af-filters { margin-bottom: 16px; }
.af-act { position: relative; padding-right: 10px; }
.af-act select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; color: inherit; padding: 0 4px 0 0; height: 34px; cursor: pointer; }
.af-act select:focus { outline: 0; }
.af-day { margin: 16px 0 8px; font-size: 13px; line-height: 18px; font-weight: 700; color: #9CA0B0; }
.af-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; padding: 14px; border-radius: 14px; background: #fff; }
.af-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.af-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-badge { display: inline-flex; align-items: center; height: 22px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.af-badge.amber { background: #FEF3C6; color: #BB4D00; } .af-badge.green { background: #DCFCE7; color: #008236; }
.af-badge.red { background: #FFE2E2; color: #C10007; } .af-badge.blue { background: #E7EAFF; color: var(--primary); }
.af-target { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--title); overflow-wrap: anywhere; }
.af-actor { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--sub); }
.af-time { font-size: 12px; line-height: 18px; font-weight: 500; color: #9CA0B0; font-variant-numeric: tabular-nums; }

/* 알림 내역 — 오픈오다 nt-* 실측 */
.nt-q { width: 260px; }
.nt-help { margin: 12px 4px; font-size: 12px; color: var(--sub); }
.nt-panel { padding: 8px; }
.nt-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.nt-tbl th { height: 46px; padding: 0 14px; background: var(--soft); font-size: 13px; font-weight: 700; color: var(--title); text-align: left; white-space: nowrap; }
.nt-tbl th:first-child { border-radius: 12px 0 0 12px; } .nt-tbl th:last-child { border-radius: 0 12px 12px 0; }
.nt-tbl td { padding: 20px 14px; vertical-align: top; border-bottom: 1px solid var(--soft); color: var(--ink); }
.nt-tbl tr:last-child td { border-bottom: 0; }
.nt-tbl .c { text-align: center; } .nt-tbl .ev, .nt-card .ev { font-weight: 700; color: var(--title); }
.nt-tbl .dt { white-space: nowrap; }
.nt-ch, .nt-st { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nt-ch { background: #EAF8EF; color: #16A34A; } .nt-ch.own { background: #E7EAFF; color: var(--primary); }
.nt-st { background: var(--soft); color: var(--ink); }
.nt-ch::before, .nt-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nt-st::before { background: #9CA0B0; } .nt-st.no { background: #FFE2E2; color: #C10007; } .nt-st.no::before { background: currentColor; }
.nt-body { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.nt-body p { margin: 0; } .nt-body b { color: var(--title); }
.nt-no { font-weight: 700; color: var(--primary); }
.nt-msg { color: var(--sub); font-size: 13px; white-space: pre-line; } .nt-why { color: #C10007; font-size: 12px; }
.nt-card { margin-bottom: 8px; padding: 14px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.nt-h { display: flex; align-items: center; gap: 6px; } .nt-h .sp { flex: 1; } .nt-h .dt { font-size: 12px; color: #9CA0B0; }
.nt-card .nt-body { min-width: 0; gap: 6px; }
.nt-f { font-size: 12px; color: #9CA0B0; }
@media (max-width: 760px) { .nt-q { width: 100%; } }

/* 파트너 포인트 — 오픈오다 실측 */
.dd-btn.pt-store { background: #E7EAFF; color: var(--primary); }
.pt-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 16px 0; }
.pt-bal, .pt-req { padding: 20px; }
.pt-bh { display: flex; align-items: center; } .pt-bh .cap { flex: 1; font-size: 14px; font-weight: 500; color: var(--sub); }
.pt-gear { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: #9CA0B0; cursor: help; }
.pt-bal .amt { margin-top: 6px; display: flex; align-items: baseline; gap: 3px; }
.pt-bal .amt b { font-size: 26px; line-height: 34px; font-weight: 700; color: #3742BE; font-variant-numeric: tabular-nums; }
.pt-bal .amt small { font-size: 16px; font-weight: 700; color: var(--sub); }
.pt-low { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 8px; border-radius: 999px; background: #FFF6DB; color: #B54708; font-size: 13px; font-weight: 700; }
.pt-btns { display: flex; gap: 8px; margin-top: 16px; }
.pt-b { height: 30px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.pt-b.pri { background: var(--primary); color: #fff; }
.pt-req .ttl2 { display: block; font-size: 14px; font-weight: 700; color: var(--title); margin-bottom: 8px; }
.pt-none { margin: 0; padding: 12px 0; font-size: 14px; font-weight: 500; color: #9CA0B0; }
.pt-rq { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; } .pt-rq .d { color: var(--sub); flex: 1; }
.pt-tabs a { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; }
.pt-tabs a.on { background: #E8EAF1; }
@media (max-width: 760px) { .pt-grid { grid-template-columns: 1fr; } .dd-btn.pt-store { width: 100%; justify-content: space-between; } }

/* 가이드 — 오픈오다 실측: 목차 판 + 본문 판 */
.gd { display: grid; grid-template-columns: 256px 1fr; gap: 12px; align-items: start; }
.gd-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.gd-q { width: 100%; margin-bottom: 8px; }
.gd-cat[hidden], .gd-d[hidden], .gd-doc[hidden], .gd-hello[hidden] { display: none; }
.gd-c { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 6px; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--title); cursor: pointer; text-align: left; }
.gd-c svg { color: var(--sub); transform: rotate(-90deg); transition: transform .15s; } .gd-cat.open .gd-c svg { transform: none; }
.gd-c span { flex: 1; } .gd-c em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--sub); }
.gd-docs { display: none; flex-direction: column; padding-left: 22px; } .gd-cat.open .gd-docs { display: flex; }
.gd-d { height: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-d:hover { background: var(--soft); } .gd-d.on { background: #E7EAFF; color: var(--primary); font-weight: 700; }
.gd-body { padding: 28px; min-height: 190px; }
.gd-hello { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 0; text-align: center; }
.gd-hello span { font-size: 32px; } .gd-hello b { font-size: 16px; color: var(--title); } .gd-hello p { margin: 0; font-size: 13px; color: var(--sub); }
.gd-crumb { font-size: 12px; font-weight: 500; color: var(--sub); }
.gd-doc h2 { margin: 4px 0 16px; font-size: 21px; font-weight: 700; color: var(--title); }
.gd-doc ol { margin: 0; padding-left: 20px; line-height: 2; color: var(--ink); font-size: 15px; }
@media (max-width: 760px) { .gd { grid-template-columns: 1fr; } .gd-body { padding: 20px; } }

/* 가게 화면 모바일 — 오픈오다 실측(390폭): 추천은 한 줄 목록(294×71~89 r14 p14, 아이콘 · 글 · ›) · 자주 쓰는 메뉴는 2칸 타일(아이콘 위, 이름 · 설명 아래) */
@media (max-width: 760px) {
  .recgrid { grid-template-columns: 1fr; gap: 8px; }
  .rec { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
  .rec .go { margin: 0; align-self: center; font-size: 0; }
  .menu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .hub { flex-wrap: wrap; align-items: flex-start; gap: 10px 6px; padding: 12px; border-radius: 16px; }
  .hub .hub-tile { margin-right: auto; }
  .hub .hub-tx { order: 3; flex-basis: 100%; }
}
.sc-tbl .pname, .sc-tbl .pdesc { display: block; } .sc-tbl td { vertical-align: middle; }
.panel.ox { overflow-x: auto; }
@media (max-width: 760px) { .sc-tbl .pdesc { display: none; } .sc-tbl .rp-p { min-width: 200px; } }

/* 가게 설정 틀 — 오픈오다 실측: 메뉴는 판 없이 폭 200(← 36×36 · 줄 36 r10), 제목은 본문 칸 맨 위 */
.settings nav { background: none; padding: 0; display: flex; flex-direction: column; gap: 0; }
.settings nav a.st-back { width: 36px; height: 36px; padding: 0; justify-content: center; margin: 0 0 8px; color: var(--ink); }
.settings nav a:not(.st-back) { font-size: 14px; }
.st-top2 { margin: 0 0 16px; padding-left: 0; min-height: 0; }
.m-only-f { display: none !important; }
@media (max-width: 760px) {
  .settings nav { display: none; }
  .m-only-f { display: inline-flex !important; }
  .st-top2 .ttl .eyebrow { display: block !important; }
  .st-top2 h1 { font-size: 18px; }
}
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-main > .body { width: 100%; }
@media (max-width: 760px) {
  .cat-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cat-bar > * { flex: none; white-space: nowrap; }
  .pick-link .pl-row { flex-wrap: wrap; } .pick-link code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 760px) { .bs-top { flex-wrap: wrap; } .bs-top .ttl { flex-basis: 100%; } }

/* 본사 로고(포크 K) — 이름 첫 글자 칸을 그림으로 */
.brand-mk.img, .dot-lg.img { background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; padding: 0; }
.brand-mk.img img, .dot-lg.img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 본사 보관함 — 공급가 아래 마진(배송비까지). 손해면 빨강 */
.mg { font-size: 11px; font-weight: 700; color: #047857; margin-top: 3px; white-space: nowrap; }
.mg.bad { color: #dc2626; } .mg.none { color: var(--faint); font-weight: 500; }

/* 업체가 보는 본사 상품 보관함 — 박스 정보 · 상세 보기 창 · 모바일은 카드로 (2026-09-28) */
.sc-open { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sc-tags { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.sc-more { font-size: 12px; font-weight: 600; color: var(--primary); }
.sc-price .sc-box { font-size: 12px; color: var(--sub); margin-top: 2px; white-space: nowrap; }
.sc-price .sc-box b { color: var(--title); }
.sc-modal { width: min(560px, 96vw); }
.sc-body { max-height: 78vh; overflow-y: auto; padding: 0 20px 20px; }
.sc-gal { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.sc-gal img { width: 180px; height: 180px; object-fit: cover; border-radius: 12px; flex: none; background: var(--soft); }
.sc-sum { padding: 10px 0 12px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.sc-det { padding-top: 12px; font-size: 14px; line-height: 1.7; }
.sc-det img { max-width: 100%; height: auto; display: block; margin: 6px auto; border-radius: 8px; }
@media (max-width: 760px) {
  .sc-tbl, .sc-tbl tbody { display: block; }
  .sc-tbl tr:first-child { display: none; }
  .sc-tbl tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
  .sc-tbl td { display: block; padding: 0; border: 0; }
  .sc-tbl td:nth-child(2) { grid-column: 2 / 4; }
  .sc-tbl td.sc-price { grid-column: 2; text-align: left; }
  .sc-tbl td:nth-child(4), .sc-tbl td:nth-child(5):empty { display: none; }
  .sc-tbl td:nth-child(5) { grid-column: 2 / 4; font-size: 12px; }
  .sc-tbl td:last-child { grid-column: 3; grid-row: 2; }
  .sc-gal img { width: 140px; height: 140px; }
}

/* 업체 바로 발주 (2026-09-28) — 두 가지 쓰는 법 안내 · 발주 칸 · 발주 카드 */
.two-way { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.two-way > div { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub); line-height: 1.6; }
.two-way b { color: var(--title); }
.sc-q { white-space: nowrap; }
.sc-q input { width: 64px; height: 34px; padding: 0 8px; text-align: right; font-size: 14px; }
.sc-q span { font-size: 12px; color: var(--sub); margin-left: 4px; }
.po-sum { font-size: 14px; font-weight: 700; color: var(--primary-ink); }
.po-modal { width: min(520px, 96vw); }
.po-body { padding: 0 20px 12px; }
.po-line { display: grid; grid-template-columns: 1fr auto 110px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--soft); font-size: 14px; }
.po-line b { text-align: right; }
.po-line.tot { border-bottom: 0; font-weight: 700; } .po-line.tot b { color: var(--primary-ink); font-size: 16px; }
.po-card { margin-bottom: 12px; }
.po-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .po-h .spacer { flex: 1; }
.po-st { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--sub); }
.po-st.pending { background: #FEF9C2; color: #894B00; } .po-st.paid { background: #DBEAFE; color: #193CB8; }
.po-st.shipped { background: #DCFCE7; color: #016630; }
.po-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--ink); }
.po-f form { margin: 0; } .po-f > span:first-child { flex: 1; min-width: 200px; }
.po-ship { display: flex; gap: 6px; } .po-ship select, .po-ship input { height: 32px; font-size: 13px; width: auto; }
@media (max-width: 760px) { .two-way { grid-template-columns: 1fr; } .sc-tbl td.sc-q { grid-column: 2; }
  .po-line { grid-template-columns: 1fr auto; } .po-line > span:first-child { grid-column: 1 / -1; font-weight: 600; } .po-line.tot > span:nth-child(2) { display: none; } }

/* 본사 세금계산서(/boss/tax) */
.tx-sum { display: flex; gap: 10px; flex-wrap: wrap; }
.tx-sum > div, .tx-sum > form { background: #fff; border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.tx-sum span { font-size: 12px; color: var(--sub); }
.tx-sum b { font-size: 18px; }
.tx-sum em { font-style: normal; font-size: 13px; color: var(--primary-ink); font-weight: 700; }
.tx-mode select { height: 34px; border-radius: 10px; border: 1px solid var(--line); padding: 0 8px; margin-top: 4px; }
.tx-month { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.tx-month input { height: 34px; border-radius: 10px; border: 1px solid var(--line); padding: 0 8px; }
.tx-list { padding: 0; }
.tx-row { display: grid; grid-template-columns: 1.3fr 1.4fr .9fr 1.4fr; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #F4F5F8; }
.tx-row:last-child { border-bottom: 0; }
.tx-row.void { opacity: .55; }
.tx-who, .tx-amt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.tx-who b { font-size: 14px; }
.tx-item { font-size: 13px; }
.tx-amt { text-align: right; }
.tx-amt b { font-size: 15px; }
.tx-warn { color: #E5484D; font-size: 12px; font-weight: 700; }
.tx-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.tx-issue { display: flex; gap: 6px; }
.tx-issue input { width: 130px; height: 32px; border-radius: 10px; border: 1px solid var(--line); padding: 0 8px; font-size: 12px; }
.tx-box { margin-top: 12px; padding: 14px 16px; }
.tx-box summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tx-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tx-add input, .tx-add select, .tx-biz input { height: 36px; border-radius: 10px; border: 1px solid var(--line); padding: 0 10px; font-size: 13px; }
.tx-add input[name=item] { flex: 1; min-width: 180px; }
.tx-biz { display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)) auto; gap: 6px; align-items: center; margin-top: 8px; }
.tx-biz .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-biz.empty input[name=biz_no] { border-color: #E5484D; }
.mp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) {
  .tx-row { grid-template-columns: 1fr auto; }
  .tx-item { grid-column: 1 / -1; order: 3; }
  .tx-act { grid-column: 1 / -1; order: 4; justify-content: flex-start; }
  .tx-month { margin-left: 0; }
  .tx-biz { grid-template-columns: 1fr 1fr; }
  .tx-biz .nm { grid-column: 1 / -1; }
}
/* 상품 보관함 — 가져온 곳·담은 날 */
.rp-q { display: flex; gap: 8px; align-items: center; }
.rp-src { height: 40px; border-radius: 14px; border: 0; background: #F4F5F8; padding: 0 12px; font-size: 13px; max-width: 200px; }
.rp-from { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--faint); }
/* 업체 보관함 — 보기 방식(리스트 ☰ / 이미지 ▦). 이미지형은 표 줄을 카드로 바꾼다(PC 여러 칸 · 모바일 2칸). */
.rp-bar .sc-lay { display: inline-flex; background: #F4F5F8; border-radius: 14px; padding: 3px; align-self: flex-end; flex: none; }
.sc-lay button { border: 0; background: none; height: 34px; padding: 0 12px; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 600; color: var(--sub); cursor: pointer; white-space: nowrap; }
.sc-lay button.on { background: #fff; color: var(--title); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sc-grid .sc-tbl { display: block; }
.sc-grid .sc-tbl tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sc-grid .sc-tbl tr:first-child { display: none; }
.sc-grid .sc-tbl tr { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.sc-grid .sc-tbl tr td { display: block; padding: 0; border: 0; text-align: left; }
.sc-grid .sc-tbl tr td:first-child { position: absolute; top: 16px; left: 16px; z-index: 1; }
.sc-grid .sc-tbl tr td:nth-child(2) { order: 1; }
.sc-grid .sc-tbl .rp-p { flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; width: 100%; }
.sc-grid .sc-tbl .rp-p .thumb { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.sc-grid .sc-tbl .pname { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-grid .sc-tbl .pdesc { display: none; }
.sc-grid .sc-tbl tr td.sc-price { order: 2; }
.sc-grid .sc-tbl tr td:nth-child(4) { order: 3; font-size: 12px; color: var(--sub); }
.sc-grid .sc-tbl tr td:nth-child(4)::before { content: "권장 판매가 "; }
.sc-grid .sc-tbl tr td:nth-child(5) { order: 4; font-size: 12px; }
.sc-grid .sc-tbl tr td:nth-child(5):empty { display: none; }
.sc-grid .sc-tbl tr td.sc-q { order: 5; display: flex; align-items: center; }
.sc-grid .sc-tbl tr td.sc-q input { flex: 1; width: auto; }
.sc-grid .sc-tbl tr td:last-child { order: 6; }
.sc-grid .sc-tbl tr td:last-child:empty { display: none; }
@media (max-width: 760px) {
  .rp-bar .sc-lay { align-self: flex-start; }
  .sc-grid .sc-tbl tbody { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-grid .sc-tbl tr { padding: 8px; }
  .sc-grid .sc-tbl tr td:first-child { top: 14px; left: 14px; }
}
.sc-grid .sc-tbl tr td.nosug { display: none; }
/* 가게 설정 › 카카오 알림톡 — 오픈오다 판 모양 */
.at-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 17px; margin: 0 0 12px; }
.at-h .sub { font-size: 13px; font-weight: 500; }
.at-q { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--sub); border-radius: 50%; font-size: 11px; color: var(--sub); cursor: help; }
.at-box { background: #F9FAFB; border-radius: 16px; padding: 16px 18px; }
.at-sw { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.at-body { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.at-box.off .at-body { opacity: .45; pointer-events: none; }
.at-lbl { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--sub); }
.at-lbl.sm { font-size: 13px; color: var(--title); }
.at-ck { font-size: 14px; }
.at-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-sel select { height: 34px; border-radius: 12px; border: 0; background: #EEF0F4; padding: 0 10px; font: inherit; font-size: 13px; }
.at-ph { display: block; max-width: 220px; margin-bottom: 6px; }
.at-add { align-self: flex-start; }
.at-note { margin: 10px 2px 0; font-size: 12px; color: var(--sub); }
.at-note a { color: var(--primary); }
.at-card { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.at-card textarea { width: 100%; background: #F4F5F8; border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 14px; resize: vertical; }
.at-tok { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.at-tok button { border: 0; background: #EEF0FF; color: var(--primary-ink); border-radius: 10px; height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* 파트너 앱 '홈 화면에 추가' 띠(_install.html) — 오픈오다처럼 아래쪽 흰 카드 */
.pwa-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 200;
  width: min(460px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff;
  border-radius: 18px; box-shadow: 0 6px 24px rgba(15, 23, 42, .16); }
.pwa-bar[hidden] { display: none; }
.pwa-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.pwa-t { flex: 1; min-width: 0; }
.pwa-t b { display: block; font-size: 14px; color: var(--title); }
.pwa-t p { margin: 2px 0 0; font-size: 12px; color: var(--sub); }
.pwa-go { flex: none; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-size: 14px; font-weight: 700; padding: 8px 16px; cursor: pointer; }
.pwa-x { flex: none; border: 0; background: none; font-size: 16px; color: var(--sub); cursor: pointer; padding: 4px; }
@media (max-width: 760px) { .pwa-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* 가게 설정 단락 카드 공통 — 오픈오다 실측(2026-09-28): 단락 흰 r22 p16/20 · 제목 18/700 · 설명 14/500 · 라벨 13/700
   · 칸 40 r14 #F4F5F8 · 도움말 12/500 · 스위치 줄 #FBFBFD r16 p16(제목 16/700 · 설명 12/500 · 스위치 오른쪽) · 받는 방법 알약 52 */
.st-sec > h2 { margin: 0 0 16px; font-size: 18px; line-height: 25px; font-weight: 700; color: var(--title); letter-spacing: -0.02em; }
.st-sec > h2 + .sub { margin: -10px 0 14px; font-size: 14px; font-weight: 500; color: var(--sub); }
.st-sec label.f { font-size: 13px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.st-sec > label.f:first-of-type, .st-sec > h2 + label.f { margin-top: 0; }
.st-sec input[type=text], .st-sec input[type=number], .st-sec input[type=password], .st-sec input[type=tel], .st-sec input[type=url],
.st-sec select, .st-sec textarea { height: 40px; border: 0; border-radius: 14px; background: #F4F5F8; padding: 0 12px; font-size: 14px; font-weight: 500;
  color: var(--title); box-sizing: border-box; }
.st-sec input:not([type=checkbox]):not([type=radio]):not([type=file]), .st-sec select, .st-sec textarea { width: 100%; }
.st-sec textarea { height: auto; min-height: 89px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.st-sec input:focus, .st-sec select:focus, .st-sec textarea:focus { outline: 2px solid #C7CDFF; }
.st-sec input.mini, .st-sec select.mini { width: 280px; max-width: 100%; }
.st-sec select[style*="width"] { width: auto !important; min-width: 80px; }
.st-sec .help { font-size: 12px; font-weight: 500; color: var(--sub); margin-top: 6px; }
.st-sec .help.good { color: #16A34A; } .st-sec .help.bad { color: #B42318; }
.st-sec .sw-row { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px; margin-top: 10px;
  border: 0; border-radius: 16px; background: #FBFBFD; }
.st-sec .sw-row:first-of-type { margin-top: 0; }
.st-sec .sw-row > div > b { font-size: 16px; font-weight: 700; color: var(--title); }
.st-sec .sw-row > div > .sub { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--sub); }
.st-sec .sw-row input.mini { margin-top: 0; }
.st-sec .pick { gap: 8px; margin: 0; }
.st-sec .pick label { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 16px; border: 0; border-radius: 14px;
  background: var(--soft); text-align: center; }
.st-sec .pick input { position: absolute; opacity: 0; pointer-events: none; }
.st-sec .pick b { font-size: 15px; font-weight: 700; color: var(--ink); }
.st-sec .pick .sub { font-size: 12px; color: var(--sub); }
.st-sec .pick label:has(input:checked) { background: #262936; }
.st-sec .pick label:has(input:checked) b { color: #fff; } .st-sec .pick label:has(input:checked) .sub { color: #C9CCD8; }
.st-sec .box { border: 0; border-radius: 16px; background: #FBFBFD; padding: 4px 16px 16px; }
.st-sec .rng { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-sec .rng input, .st-sec .rng select { width: auto; }
.st-sec label.chk { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.st-sec label.chk input { accent-color: var(--primary); width: 16px; height: 16px; }
.st-rp { margin: 6px 0 0; font-size: 12px; color: var(--sub); }
.st-row .st-num { width: min(280px, 100%); }
.st-row small + .st-num { margin-top: 6px; }
/* 가게 소개 — 주소 칸 + [중복 확인], 사진 칸 */
.st-slug { display: flex; gap: 8px; align-items: center; }
.st-slug span { flex: none; font-size: 14px; font-weight: 500; color: var(--sub); }
.st-slug input { flex: 1; min-width: 0; }
.st-btn { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--soft); font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.st-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-imgs label.f { margin-top: 0; }
.st-pic { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--soft); cursor: pointer; color: var(--sub); font-size: 24px; }
.st-pic.cover { width: 200px; height: 100px; } .st-pic.logo { width: 200px; height: 48px; }
.st-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-pic.logo img { object-fit: contain; background: #fff; }
.st-pic img:not([hidden]) + span { display: none; }
.st-pic input { position: absolute; opacity: 0; pointer-events: none; }
.st-sec .themes { gap: 8px; } .st-sec .themes label { width: auto; min-width: 40px; }
.st-sec .themes span { width: 32px; height: 32px; }
@media (max-width: 760px) {
  .st-imgs { grid-template-columns: 1fr; }
  .st-slug { flex-wrap: wrap; } .st-slug span { flex-basis: 100%; }
  .st-sec .pick { flex-direction: column; }
}

/* 카테고리 — 오픈오다 실측: 줄 카드 56 r22 · 이름 18/700 · 눈 · ⋮ · 아래 추가 48 #E7EAFF · 오른쪽 미리보기 */
.ct-top .head-back { align-self: flex-start; margin-top: 4px; }
.ct-top h1 { display: flex; align-items: center; gap: 6px; }
.ct-wrap { display: flex; gap: 24px; align-items: flex-start; }
.ct-main { flex: 1; min-width: 0; max-width: 880px; }
.ct-head, .ct-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 80px 56px 40px; align-items: center; gap: 8px; }
.ct-head { padding: 0 12px 8px; font-size: 13px; font-weight: 700; color: var(--sub); }
.ct-head .r, .ct-row .r { text-align: right; } .ct-head .c { text-align: center; }
.ct-row { min-height: 56px; margin-bottom: 8px; padding: 0 12px; border-radius: 22px; background: #fff; }
.ct-row[hidden] { display: none; }
.ct-row.drag { opacity: .5; } .ct-row[draggable=true] .ct-grip { cursor: grab; }
.ct-grip { display: grid; place-items: center; width: 40px; height: 40px; color: #9CA0B0; }
.ct-nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ct-nm b, .ct-nm input { font-size: 18px; font-weight: 700; color: var(--title); }
.ct-nm input { width: 100%; height: 40px; border: 0; background: none; padding: 0 6px; margin-left: -6px; border-radius: 10px; }
.ct-nm input:hover:not([readonly]), .ct-nm input:focus { background: var(--soft); outline: 0; }
.ct-nm small { font-size: 12px; font-weight: 500; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-n { font-size: 14px; font-weight: 500; color: var(--ink); }
.ct-eye { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.ct-eye:hover:not(:disabled) { background: var(--soft); }
.ct-eye .e0 { display: none; } .ct-row.off .ct-eye .e0 { display: block; } .ct-row.off .ct-eye .e1 { display: none; }
.ct-row.off .ct-eye { color: #B42318; } .ct-row.off .ct-nm input { color: var(--sub); }
.ct-more { position: relative; } .ct-more summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; cursor: pointer; color: var(--sub); }
.ct-more summary::-webkit-details-marker { display: none; } .ct-more summary:hover { background: var(--soft); }
.ct-more .pop { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 120px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 8px 30px rgba(20,26,33,.15); }
.ct-more .pop button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px; cursor: pointer; }
.ct-more .pop button:hover { background: var(--soft); } .ct-more .pop .red { color: #B42318; }
.ct-new { margin-bottom: 8px; } .ct-new[hidden] { display: none; }
.ct-new input { width: 100%; height: 56px; border: 2px solid #C7CDFF; border-radius: 22px; background: #fff; padding: 0 20px; font-size: 16px; font-weight: 700; box-sizing: border-box; }
.ct-add { width: 100%; height: 48px; border: 0; border-radius: 16px; background: #E7EAFF; color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer; }
.ct-help { margin: 12px 4px; font-size: 12px; color: var(--sub); } .ct-help span { color: var(--primary); font-weight: 700; }
.ct-wrap .phone-pv .pv-t { display: block; margin-bottom: 10px; text-align: center; font-size: 18px; font-weight: 700; color: var(--title); }
@media (max-width: 760px) {
  .ct-head, .ct-row { grid-template-columns: 36px minmax(0, 1fr) 40px 44px 36px; gap: 4px; }
  .ct-nm small { display: none; } .ct-nm b, .ct-nm input { font-size: 16px; }
  .ct-top .btn.primary { display: none; }
}
.ct-top { max-width: 880px; }

/* 공지·소식 — 글 카드 · 글쓰기 창(제목 줄 [소식|공지] 알약) */
.fd-card { margin-bottom: 8px; padding: 16px 20px; border-radius: 22px; background: #fff; }
.fd-h { display: flex; align-items: center; gap: 8px; } .fd-h .sp { flex: 1; } .fd-h b { font-size: 16px; font-weight: 700; color: var(--title); }
.fd-k { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 700; background: #E7EAFF; color: var(--primary); }
.fd-k.notice { background: #FFE2E2; color: #C10007; }
.fd-pin { font-size: 12px; color: var(--sub); } .fd-d { font-size: 12px; color: #9CA0B0; }
.fd-b { margin: 10px 0 0; white-space: pre-line; font-size: 14px; line-height: 1.6; color: var(--ink); }
.fd-img { display: block; max-width: 240px; margin-top: 10px; border-radius: 12px; }
.fd-prod { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 14px; background: var(--soft); font-size: 13px; color: var(--sub); }
.fd-prod img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .fd-prod b { color: var(--title); }
.fd-mh { gap: 10px; } .fd-mh h3 { flex: none !important; } .fd-mh .sp { flex: 1; }
.fd-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--soft); }
.fd-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fd-seg span { display: inline-block; padding: 4px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--sub); cursor: pointer; }
.fd-seg input:checked + span { background: #fff; color: var(--title); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pm-b .fd-sel, .pm-b .fd-ta, .fd-imgrow input { width: 100%; border: 0; border-radius: 14px; background: #F4F5F8; padding: 0 12px; font-size: 14px; box-sizing: border-box; }
.pm-b .fd-sel, .fd-imgrow input { height: 40px; } .pm-b .fd-ta { padding: 10px 12px; min-height: 150px; resize: vertical; line-height: 1.6; }
.fd-imgrow { display: flex; gap: 6px; align-items: center; } .fd-imgrow .btn { flex: none; }
.fd-card .ct-more .pop form { margin: 0; } .fd-card .ct-more .pop form button { color: #B42318; }
/* 손님 소식 글 밑 연결 상품 */
.post-prod { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 14px; background: #F4F5F8; color: inherit; text-decoration: none; }
.post-prod img { width: 48px; height: 48px; margin: 0; border-radius: 10px; object-fit: cover; }
.post-prod span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .post-prod b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-prod small { font-size: 13px; color: var(--sub); } .post-prod em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--primary); }

/* 상품 진열 — 오픈오다 '가게 상품 진열 관리' 두 칸 */
.ps { display: flex; flex-direction: column; gap: 12px; }
.ps-h { display: flex; align-items: center; gap: 8px; } .ps-h h1 { margin: 0; font-size: 21px; font-weight: 700; color: var(--title); }
.ps-shop { font-size: 14px; color: var(--sub); } .ps-mode { font-size: 14px; font-weight: 500; color: var(--primary); }
.ps-bar select { height: 32px; min-width: 200px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 10px; font-size: 13px; }
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-col { display: flex; flex-direction: column; min-height: 480px; border-radius: 18px; background: #fff; overflow: hidden; }
.ps-ch { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; } .ps-ch b { flex: none; font-size: 15px; color: var(--title); }
.ps-ch .search-pill { flex: 1; width: auto; height: 32px; }
.ps-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.ps-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0 14px 10px; border-bottom: 1px solid var(--soft); }
.ps-tools .sp { flex: 1; }
.ps-tools button { height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; color: var(--ink); cursor: pointer; }
.ps-tools button:hover { background: var(--soft); } .ps-tools select { height: 26px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; }
.ps-list { flex: 1; margin: 0; padding: 6px; list-style: none; overflow-y: auto; max-height: 60vh; background: #F7F8FB; }
.ps-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: 10px; background: #fff; font-size: 13px; color: var(--ink); cursor: pointer; }
.ps-list li.on { background: #E7EAFF; } .ps-list li.hidden span { color: var(--sub); }
.ps-list li em { width: 22px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--primary); text-align: right; }
.ps-list li img, .ps-list li i { width: 32px; height: 32px; flex: none; border-radius: 8px; object-fit: cover; background: var(--soft); }
.ps-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-list li small { font-size: 11px; color: #B42318; } .ps-list li input { pointer-events: none; }
.ps-empty { margin: 0; padding: 40px 20px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--sub); background: #F7F8FB; flex: 1; }
.ps-empty[hidden] { display: none; }
.ps-f { display: flex; align-items: center; gap: 8px; } .ps-f p { flex: 1; margin: 0; font-size: 12px; color: var(--sub); }
@media (max-width: 760px) { .ps-ch { flex-wrap: wrap; } .ps-ch .search-pill { flex-basis: 100%; order: 3; } .ps-cols { grid-template-columns: minmax(0, 1fr); } .ps-col { min-height: 300px; } .ps-f { flex-wrap: wrap; } .ps-f p { flex-basis: 100%; } }
.ps-bar select, .ps-tools select { width: auto; }

/* 후기 — 스위치 줄(누르면 바로 켜고 끔) · 평균 별점 · 카드 */
.rv-on { padding: 8px; } .rv-on .st-row { margin: 0; background: #fff; }
.rv-sw { margin: 0; }
.sw-btn { position: relative; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: #D4D7E0; cursor: pointer; }
.sw-btn i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .15s; }
.sw-btn.on { background: var(--primary); } .sw-btn.on i { left: 21px; }
.rv-sum { display: flex; align-items: center; gap: 10px; margin: 4px 4px 10px; font-size: 13px; color: var(--sub); }
.rv-avg { font-size: 18px; font-weight: 700; color: #F5A623; }
.rv-star { color: #F5A623; letter-spacing: 1px; } .rv-star i { font-style: normal; color: #E3E5EC; }
.rv-card form { margin: 0; } .rv-card.off { opacity: .6; }

/* 본사 목록 틀(boss/list.html) — 오픈오다 브랜드 화면처럼 */
.lg-tabs.bl-tabs { position: static; background: none; padding: 0; margin: -4px 0 14px; }
.dd-btn.bl-on { background: #E7EAFF; color: var(--primary); }
.bl-n { font-size: 13px; color: var(--sub); white-space: nowrap; }
.bl-shop { font-weight: 700; color: var(--primary); }
.bl-tbl td { padding: 14px; vertical-align: middle; } .bl-tbl td.ev { white-space: nowrap; }
.bl-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.bl-card dl div { display: flex; flex-direction: column; min-width: 0; } .bl-card dt { font-size: 11px; color: #9CA0B0; }
.bl-card dd { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
/* 링크 카테고리 · 상품 소분류 관리 창 */
dialog.lm { width: min(480px, 94vw); }
.lm .cm-h { gap: 8px; } .lm .cm-h h3 { flex: none; } .lm .cm-h .sp { flex: 1; } .lm-n { font-size: 13px; font-weight: 700; color: var(--primary); }
.lm-tools { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 12px; border-bottom: 1px solid var(--soft); }
.lm-tools .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .lm-tools .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-tools .g2:has(> [hidden]) { grid-template-columns: 1fr; }
.lm-tools button { height: 30px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; color: var(--ink); cursor: pointer; }
.lm-tools button[hidden] { display: none; } .lm-tools .red { color: #B42318; }
.lm-head { display: flex; justify-content: space-between; margin: 12px 20px 0; padding: 8px 12px; border-radius: 10px; background: var(--soft); font-size: 12px; font-weight: 700; color: var(--sub); }
.lm-head [hidden] { display: none; }
.lm-list { max-height: 46vh; overflow-y: auto; padding: 6px 20px; }
.lm-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--soft); }
.lm-row.on { background: #F7F8FF; } .lm-row.child { padding-left: 28px; }
.lm-row .nm { flex: 1; height: 34px; border: 0; border-radius: 10px; background: #F4F5F8; padding: 0 10px; font-size: 14px; }
.lm-empty { margin: 0; padding: 36px 0; text-align: center; font-size: 13px; color: var(--sub); }
.lm-add { display: block; width: calc(100% - 40px); margin: 8px 20px 0; height: 40px; border: 1px dashed #C7CDFF; border-radius: 12px; background: #fff; color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer; }
.lm-msg { min-height: 18px; margin: 6px 20px 0; font-size: 12px; color: var(--primary); }
.catbar.sub { margin-top: -4px; } .catbar.sub .chip { font-size: 12px; }

/* 세금계산서 장부 */
.tb-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
.tb-sum .panel { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.tb-sum .k { font-size: 13px; font-weight: 700; color: var(--sub); } .tb-sum .v { font-size: 24px; font-weight: 700; color: var(--title); }
.tb-sum .v small { font-size: 14px; margin-left: 2px; color: var(--sub); } .tb-sum .v.red { color: #B42318; } .tb-sum .v.green { color: #047857; }
.tb-sum .s { font-size: 12px; color: var(--sub); }
.tb-tbl .r { text-align: right; } .tb-tbl .strong { font-weight: 700; color: var(--title); } .tb-tbl .red { color: #B42318; }
.tb-tbl tr.stmt td { color: var(--sub); } .tb-tbl .ev a { color: var(--primary); font-weight: 700; }
.tb-d { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tb-d.sale { background: #E7EAFF; color: var(--primary); } .tb-d.buy { background: #FEF3C6; color: #BB4D00; }
.tb-memo { max-width: 220px; font-size: 12px; } .tb-act { white-space: nowrap; } .tb-act form { display: inline; margin: 0; }
.tb-act .red { color: #B42318; }
.tb-h { margin: 20px 4px 10px; font-size: 18px; font-weight: 700; color: var(--title); }
.tb-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tb-g2 > div { display: flex; flex-direction: column; gap: 6px; }
.tb-g2 > div > label { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--title); } .tb-g2.in { gap: 6px; }
.pm-b input[type=text], .pm-b input[type=date] { width: 100%; }
.pm-b .st-seg { margin-top: 4px; }
@media (max-width: 760px) { .tb-sum { grid-template-columns: 1fr; } .tb-g2 { grid-template-columns: 1fr; } }

/* 세금계산서 원버튼 체크 */
.tk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.tk-cards .panel { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; color: inherit; text-decoration: none; border: 2px solid transparent; }
.tk-cards .panel.on { border-color: #C7CDFF; }
.tk-cards .k { font-size: 13px; font-weight: 700; color: var(--sub); } .tk-cards .v { font-size: 26px; font-weight: 700; color: var(--title); }
.tk-cards .v.red { color: #B42318; } .tk-cards .v small { font-size: 14px; margin-left: 2px; color: var(--sub); } .tk-cards .s { font-size: 12px; color: var(--sub); }
.tk { min-width: 96px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid #F3B4AE; background: #FFF5F4; color: #B42318; }
.tk.on { border-color: #A7E3C0; background: #EAF8EF; color: #047857; }
.tk:disabled { opacity: .5; }
.tk-tbl tr.wait td { background: #FFFBFA; } .tk-tbl .c { text-align: center; }
.tk-card.wait { border: 1.5px solid #F3B4AE; }
.tk-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.tk-part { display: flex; flex-direction: column; gap: 8px; padding: 16px; color: inherit; text-decoration: none; }
.tk-part .h { display: flex; align-items: center; gap: 8px; } .tk-part .h .sp { flex: 1; } .tk-part .h b { font-size: 15px; color: var(--title); }
.tk-part .w { font-size: 12px; font-weight: 700; color: #B42318; } .tk-part .ok { font-size: 12px; font-weight: 700; color: #047857; }
.tk-part .it { display: flex; flex-wrap: wrap; gap: 4px; } .tk-part .it span { padding: 2px 8px; border-radius: 999px; background: var(--soft); font-size: 12px; color: var(--ink); }
.tk-part .f { font-size: 12px; color: var(--sub); }
.tk-vat { margin-top: 20px; } .tk-vat summary { cursor: pointer; padding: 8px 4px; font-size: 15px; font-weight: 700; color: var(--title); }
.tk-tbl .sum td, .tb-tbl tr.sum td { border-top: 2px solid var(--line); font-weight: 700; }
.tk-done { display: flex !important; align-items: center; gap: 8px; margin-top: 14px !important; padding: 10px 12px; border-radius: 12px; background: #EAF8EF; font-size: 14px !important; }
.tk-more { margin-top: 12px; } .tk-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sub); }
@media (max-width: 760px) { .tk-cards { grid-template-columns: 1fr 1fr; } }
.sc-opt { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 2px 0; } .sc-opt em { font-style: normal; font-size: 12px; color: var(--sub); margin-right: 4px; white-space: nowrap; }
#pu-test[hidden] { display: none; }

/* 주문서 — 픽업 장소 안내 */
.co-pk { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--soft, #F4F5F8); font-size: 14px; line-height: 1.5; }
.co-pk[hidden] { display: none; }
.co-pk b { display: block; font-size: 13px; color: var(--sub); margin-bottom: 2px; }

/* 기기별 알림 설정(_push_prefs.html) */
.pu-prefs { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pu-prefs[hidden] { display: none; }
.pu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.pu-l { font-weight: 600; }
.pu-l .faint { font-weight: 400; font-size: 12px; }
.pu-v { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-v select { height: 34px; width: auto; border-radius: 10px; font-size: 13px; }