/* 애드부스트 — 디자인 정본
   ★ 2026-09-02, 대표 지시: "차라리 경쟁사를 배껴라" — 그로스코어(growthcore.co.kr) 실측 UI를
     따른다. 그로스코어는 Ant Design 기반 엔터프라이즈 대시보드다(청록빛 도는 중립 그레이,
     화이트 사이드바, 블루 액센트, 촘촘한 표 레이아웃). 독자 디자인을 고안하지 않고 검증된
     레퍼런스를 그대로 따라간다. 구조(좌측 사이드바)는 유지하되 톤을 라이트로 되돌렸다. */

:root{
  --bg:oklch(0.97 0.003 265);
  --surface:#fff;
  --surface-2:oklch(0.975 0.003 265);
  --surface-3:oklch(0.96 0.004 265);
  --ink:oklch(0.22 0.012 265);
  --ink-2:oklch(0.46 0.010 265);
  --muted:oklch(0.58 0.010 265);
  --line:oklch(0.91 0.005 265);
  --line-soft:oklch(0.95 0.004 265);

  --brand:oklch(0.55 0.19 258);
  --brand-ink:#fff;
  --brand-dark:oklch(0.46 0.18 258);
  --brand-soft:oklch(0.94 0.02 258);
  --brand-bd:oklch(0.82 0.05 258);
  --row-hover:oklch(0.975 0.008 258);

  --ok:oklch(0.55 0.13 155);
  --ok-dot:oklch(0.60 0.15 155);
  --ok-soft:oklch(0.94 0.03 155);
  --ok-bd:oklch(0.82 0.06 155);

  --warn:oklch(0.60 0.12 75);
  --warn-ink:oklch(0.32 0.03 75);
  --warn-soft:oklch(0.94 0.03 82);
  --warn-bd:oklch(0.82 0.05 78);

  --crit:oklch(0.55 0.19 25);
  --crit-soft:oklch(0.94 0.03 25);
  --crit-bd:oklch(0.82 0.06 28);

  /* 사이드바(rail)도 어두운 톤이 아니라 화이트 — 그로스코어 사이드바 실측 그대로. */
  --ft-bg:#fff;
  --ft-fg:oklch(0.30 0.012 265);
  --ft-dim:oklch(0.55 0.010 265);
  --ft-label:oklch(0.55 0.010 265);
  --ft-line:oklch(0.91 0.005 265);

  --radius:6px; --radius-sm:4px;
  --shadow:0 1px 2px oklch(0.2 0.02 265/.06), 0 2px 8px oklch(0.2 0.02 265/.06);
  --sans:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;
  --logo-ink:var(--brand);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:600}
h1{letter-spacing:-.04em;font-weight:700}
h2{letter-spacing:-.03em}
h3,h4{letter-spacing:-.02em}
p{margin:0 0 12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.narrow{max-width:820px;margin:0 auto;padding:0 40px}
@media(max-width:860px){.wrap,.narrow{padding:0 20px}}

/* mono 마이크로 라벨 — 핸드오프 전반에서 섹션 눈금 역할을 한다 */
.mlabel{display:block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.13em;color:oklch(0.47 0.012 265);line-height:1}

/* ── 좌측 레일 — 소셜부스트(가로 topbar)와 구조 자체를 다르게 간다: 도매 대시보드처럼
     세로 고정 사이드바 하나로 브랜드·메뉴·로그인을 전부 묶는다. ─────────────── */
.app-shell{display:flex;align-items:stretch;min-height:100vh}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.rail{
  width:232px;flex:none;background:var(--ft-bg);border-right:1px solid var(--ft-line);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:22px;padding:22px 16px;
}
.logo{font-size:20px;font-weight:700;letter-spacing:-.04em;white-space:nowrap;color:var(--ft-fg);display:flex;align-items:center;padding:0 4px}
.logo span{color:var(--brand)}
.logo img{height:75px;width:auto;display:block}
.rail .gnb{display:flex;flex-direction:column;gap:2px}
.gnb a{font-size:14px;font-weight:600;color:var(--ft-fg);white-space:nowrap;padding:11px 12px;
  border-left:3px solid transparent;border-radius:0 6px 6px 0}
.gnb a:hover{color:var(--ink);background:oklch(0.84 0.014 265)}
.gnb a.on{color:var(--brand);font-weight:700;background:var(--brand-soft);border-left-color:var(--brand)}
.topright{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--ft-line)}
.topright .btn{width:100%}
.bal{font-size:13px;color:var(--ft-dim)}
.bal b{font-family:var(--mono);font-size:14px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.menu{position:relative}
.menu>button{display:flex;align-items:center;gap:5px;width:100%}
.topbar .btn,.rail .btn{background:transparent;border-color:var(--ft-line);color:var(--ft-fg)}
.rail .btn:hover{background:oklch(0.84 0.014 265);border-color:oklch(0.7 0.014 265);color:var(--ink)}
.rail .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.rail .btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.dropdown{position:absolute;left:0;bottom:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);min-width:200px;padding:5px;display:none;box-shadow:var(--shadow)}
.menu.open .dropdown{display:block}
.dropdown a{display:block;padding:9px 12px;font-size:14px;color:var(--ink-2);border-left:none;border-radius:var(--radius-sm)}
.dropdown a:hover{background:var(--row-hover);color:var(--ink)}
.dropdown hr{border:none;border-top:1px solid var(--line-soft);margin:5px 3px}
.dropdown .tag{margin-left:5px}
@media(max-width:860px){
  /* ★ 좁은 화면에서는 세로 레일을 유지할 공간이 없어 가로 바로 되돌린다. */
  .app-shell{flex-direction:column}
  .rail{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 20px}
  .rail .gnb{flex-direction:row;order:3;width:100%;overflow-x:auto;scrollbar-width:none}
  .rail .gnb::-webkit-scrollbar{display:none}
  .gnb a{border-left:none;border-bottom:2px solid transparent;border-radius:0}
  .gnb a.on{border-left:none;border-bottom-color:var(--brand)}
  .topright{flex-direction:row;margin-top:0;margin-left:auto;padding-top:0;border-top:none;width:auto}
  .topright .btn{width:auto}
}

/* ── 버튼 ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;
  font-size:14px;font-weight:500;padding:11px 18px;border:1px solid oklch(0.87 0.006 265);
  background:var(--surface);color:oklch(0.26 0.014 265);cursor:pointer;white-space:nowrap;transition:.12s}
.btn:hover{background:var(--surface-2);border-color:oklch(0.8 0.008 265)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.lg{font-size:15px;font-weight:600;padding:16px 30px}
.btn.full{width:100%}
.btn.sm{font-size:13px;padding:9px 17px}
.btn:disabled{background:var(--line);border-color:var(--line);color:oklch(0.62 0.012 265);cursor:not-allowed}
.btn:disabled:hover{background:var(--line);border-color:var(--line)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand);padding:0 0 2px;font-size:13px}
.btn.ghost:hover{background:transparent;color:var(--brand-dark);border-color:transparent}
.btn.danger{color:var(--crit);border-color:var(--line)}

/* ── 카드·섹션 ──────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);padding:24px 26px}
.card+.card{margin-top:14px}
.sec{padding:76px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:16px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.sec-head h2{font-size:27px;line-height:1.2}
.sec-head p{margin:10px 0 0;font-size:14px;line-height:1;color:var(--muted)}
.page-head{padding:34px 0 0;margin-bottom:36px}
.page-head h1{font-size:40px;line-height:1.15}
.page-head p{margin:12px 0 0;font-size:15px;line-height:1.7;color:oklch(0.48 0.012 265);max-width:72ch}
.crumb{font-size:12px;line-height:1;color:oklch(0.55 0.012 265);margin-bottom:20px}
.crumb a:hover{color:var(--ink)}
@media(max-width:860px){
  .sec{padding-top:48px}
  .sec-head h2{font-size:22px}
  .page-head h1{font-size:28px}
}

/* ── 상품 격자 — 헤어라인(gap:1px) 방식 ─── */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sec-head+.grid{border-top:none}
.prod{background:var(--surface);padding:26px;display:flex;flex-direction:column;transition:.12s}
.prod:hover{background:oklch(0.94 0.004 258)}
.prod .plat{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  color:oklch(0.55 0.012 265);line-height:1}
.prod h3{font-size:18px;font-weight:600;line-height:1.4;margin-top:16px}
.prod .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.prod .price{margin-top:auto;padding-top:16px;border-top:1px solid oklch(0.94 0.004 265);
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.prod .tags+.price{margin-top:26px}
.prod .price b{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.prod .price em{font-style:normal;font-size:13px;color:oklch(0.52 0.012 265);margin-left:3px}
.prod .price>span{font-family:var(--mono);font-size:11px;color:oklch(0.56 0.012 265);
  text-align:right;line-height:1;white-space:nowrap}

/* 등급·속성 태그 — 모서리 0, 테두리 있는 칩 */
.tag{display:inline-block;font-size:11px;font-weight:500;line-height:1;padding:4px 7px;
  background:oklch(0.94 0.004 265);color:oklch(0.4 0.012 265);border:1px solid oklch(0.89 0.006 265)}
.tag.b{background:oklch(0.94 0.025 258);color:oklch(0.36 0.13 258);border-color:oklch(0.87 0.04 258)}
.tag.o{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-bd)}
.tag.w{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-bd)}
.tag.c{background:var(--crit-soft);color:var(--crit);border-color:var(--crit-bd)}

/* ── 탭·필터 ───────────────────────────── */
.tabs{display:flex;gap:2px;overflow-x:auto;margin-bottom:22px;scrollbar-width:none;
  border-bottom:1px solid oklch(0.89 0.005 265)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font-family:inherit;font-size:14px;font-weight:400;padding:13px 17px;
  border:none;border-bottom:2px solid transparent;background:transparent;
  color:oklch(0.52 0.012 265);cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}

/* ── 표 ─────────────────────────────────── */
.tablebox{background:var(--surface);border:1px solid var(--line);overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{text-align:left;padding:15px 24px;border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  color:oklch(0.47 0.012 265);background:var(--surface-2);white-space:nowrap;padding:12px 24px;
  border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--row-hover)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.mid,th.mid{text-align:center}
.tgroup td{background:oklch(0.94 0.004 265);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.12em;color:oklch(0.34 0.014 265);padding:14px 24px;
  border-top:1px solid oklch(0.91 0.005 265);border-bottom:1px solid oklch(0.91 0.005 265)}
.tgroup:hover td{background:oklch(0.94 0.004 265)}

/* ── 폼 ─────────────────────────────────── */
.field{margin-bottom:23px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:9px;color:oklch(0.29 0.014 265)}
.field .hint,.hint{font-size:12px;line-height:1.55;color:oklch(0.54 0.012 265);margin-top:7px}
input[type=text],input[type=number],input[type=password],input[type=email],select,textarea{
  width:100%;font-family:inherit;font-size:14px;padding:12px 13px;border:1px solid oklch(0.86 0.006 265);
  background:var(--surface);color:var(--ink)}
input[type=number]{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;height:18px}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:oklch(0.89 0.006 265)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  margin-top:-8px;border-radius:50%;background:var(--brand);border:3px solid #fff;
  box-shadow:0 1px 3px oklch(0.2 0.02 265/.4);cursor:pointer}
input[type=range]::-moz-range-track{height:3px;background:oklch(0.89 0.006 265)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand);
  border:3px solid #fff;cursor:pointer}
textarea{min-height:110px;resize:vertical;line-height:1.7}

/* ── 고지·알림 ──────────────────────────── */
.notice{border:1px solid var(--line);background:var(--surface);padding:22px 24px;font-size:14px;margin-bottom:14px}
.notice.warn{background:var(--warn-soft);border-color:var(--warn-bd)}
.notice.crit{background:var(--crit-soft);border-color:var(--crit-bd)}
.notice.ok{background:var(--ok-soft);border-color:var(--ok-bd)}
.notice .t{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:11px;color:var(--ink)}
.notice.warn .t{color:oklch(0.28 0.03 62)} .notice.crit .t{color:var(--crit)} .notice.ok .t{color:var(--ok)}
.notice p{line-height:1.75;color:var(--ink-2)}
.notice.warn p,.notice.warn li{color:oklch(0.32 0.026 62)}
.notice p:last-child{margin-bottom:0}
.notice ul{margin:0;padding-left:18px;line-height:1.75}
.notice li{margin-bottom:6px}
.notice .mlabel{margin-bottom:14px}

/* ── 동의 박스 (주문 핵심) — 호박색 전면 테두리 ── */
.consent{border:1px solid var(--warn-bd);background:var(--warn-soft);margin-bottom:16px}
.consent .hd{padding:16px 26px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;
  align-items:center;gap:10px;border-bottom:1px solid oklch(0.88 0.03 78);color:oklch(0.28 0.03 62)}
.consent .hd .req{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  color:var(--crit);background:var(--surface);border:1px solid var(--crit-bd);padding:4px 7px}
.consent .bd{padding:24px 26px}
.consent ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:13px;counter-reset:cs}
.consent li{margin:0;display:flex;gap:11px;align-items:baseline;font-size:14px;line-height:1.7;
  color:oklch(0.3 0.028 62);counter-increment:cs}
.consent li::before{content:"0" counter(cs);font-family:var(--mono);font-size:11px;font-weight:600;
  line-height:1.5;color:var(--warn);flex:none}
.consent li b{font-weight:600;color:oklch(0.24 0.03 62)}
.consent .agree{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;background:var(--surface);
  border:1px solid var(--warn-bd);cursor:pointer}
.consent .agree input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--brand);flex:none;cursor:pointer}
.consent .agree span{font-size:13px;font-weight:500;line-height:1.6;color:oklch(0.26 0.02 62)}
.consent .agree:has(input:checked){border-color:oklch(0.8 0.06 258);background:oklch(0.94 0.022 258)}
.consent .ver{font-family:var(--mono);font-size:11px;line-height:1;color:oklch(0.46 0.04 62);
  margin-top:20px;padding-top:15px;border-top:1px solid oklch(0.88 0.03 78)}

/* ── 요약 패널 ──────────────────────────── */
.sum{background:var(--surface);border-top:1px solid oklch(0.92 0.005 265);padding:19px 0 0;margin-bottom:23px}
.sum .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;padding:5px 0;color:var(--ink-2)}
.sum .row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px}
.sum .row.total{border-top:1px solid oklch(0.92 0.005 265);margin-top:6px;padding-top:11px;font-size:14px;font-weight:600;color:var(--ink)}
.sum .row.total .v{font-size:26px;font-weight:600;letter-spacing:-.025em}
.sum .row.dim{color:var(--muted);font-size:12px}
.sum .row.dim .v{font-size:12px;font-weight:400}

/* ── 통계 카드 — 헤어라인 격자 ──────────── */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:24px}
.stat{background:var(--surface);padding:19px 20px}
.stat .k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  color:oklch(0.5 0.012 265);line-height:1;margin-bottom:12px}
.stat .v{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4}
.stat.hero{background:var(--brand-soft)}
.stat.hero .v{color:var(--brand)}

/* ── 2단 레이아웃 ───────────────────────── */
.cols{display:grid;gap:40px;grid-template-columns:1fr 424px;align-items:start}
@media(max-width:1180px){.cols{grid-template-columns:1fr 380px;gap:32px}}
@media(max-width:900px){
  .cols{grid-template-columns:1fr;gap:28px}
  /* ★ 예전엔 order:-1 로 요약 카드를 폼보다 먼저 띄웠는데, 값이 전부 "-"인 빈 카드가
     맨 위로 올라와 처음엔 왜 버튼이 안 눌리는지 헷갈리게 했다. 자연스러운 순서(폼 → 요약)로 둔다. */
  .sticky{position:static}
}
.sticky{position:sticky;top:86px}

/* ── 사이드 메뉴 (파트너·관리자) ────────── */
.shell{display:grid;gap:40px;grid-template-columns:236px 1fr;align-items:start;padding:34px 0 92px}
@media(max-width:860px){.shell{grid-template-columns:1fr;gap:24px;padding:24px 0 60px}}
.side{background:var(--surface);border:1px solid var(--line);padding:6px}
.side .grp{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  color:oklch(0.5 0.012 265);padding:16px 14px 8px}
.side a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;
  font-size:14px;color:var(--ink-2);font-weight:500}
.side a:hover{background:var(--row-hover);color:var(--ink)}
.side a.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.side .cnt{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--crit);color:#fff;padding:2px 6px}

/* ── 상태 배지 ──────────────────────────── */
.st{display:inline-block;font-size:11px;font-weight:500;line-height:1;padding:4px 7px;
  white-space:nowrap;border:1px solid var(--line)}
.st-wait{background:var(--surface-3);color:var(--muted);border-color:oklch(0.89 0.006 265)}
.st-run{background:oklch(0.94 0.025 258);color:oklch(0.36 0.13 258);border-color:oklch(0.87 0.04 258)}
.st-done{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-bd)}
.st-part{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-bd)}
.st-fail{background:var(--crit-soft);color:var(--crit);border-color:var(--crit-bd)}

/* ── 진행바 ─────────────────────────────── */
.bar{height:4px;background:oklch(0.92 0.005 265);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--brand)}

/* ── 스텝 — 헤어라인 격자 ───────────────── */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sec-head+.steps{border-top:none}
.step{background:var(--surface);padding:28px 26px 32px}
.step .n{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--brand);line-height:1}
.step h4{font-size:17px;font-weight:600;margin:16px 0 0;line-height:1.4}
.step p{font-size:13px;line-height:1.75;color:oklch(0.46 0.012 265);margin:9px 0 0}

/* ── 번호 매긴 안내 목록 (이용안내) ─────── */
.guidelist{background:var(--surface);border:1px solid var(--line)}
.guidelist .g{padding:28px 32px;border-bottom:1px solid var(--line-soft);
  display:grid;grid-template-columns:52px 1fr;gap:22px;align-items:start}
.guidelist .g:last-child{border-bottom:none}
.guidelist .no{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;
  color:var(--brand);padding-top:4px;line-height:1}
.guidelist h3{font-size:19px;font-weight:600;line-height:1.35;margin:0}
.guidelist p{font-size:14px;line-height:1.8;color:var(--ink-2);margin:10px 0 0;max-width:62ch;text-wrap:pretty}
.guidelist .note{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--muted);margin-top:12px}
@media(max-width:860px){.guidelist .g{padding:22px 20px;grid-template-columns:40px 1fr;gap:16px}
  .guidelist h3{font-size:17px}}

/* ── 금액·수량 칩 (충전 빠른선택 등) ──────── */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{font-family:inherit;font-size:12px;font-weight:500;padding:9px 13px;
  border:1px solid var(--line);background:oklch(0.94 0.004 265);color:oklch(0.31 0.014 265);
  cursor:pointer;font-variant-numeric:tabular-nums}
.chips button:hover{border-color:var(--brand);color:var(--brand)}
.chips button.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

/* ── 히어로 (홈) — 좌 카피 / 우 가격예시 2단 ── */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.08fr 0.92fr;gap:0;align-items:stretch}
.hero-l{padding:92px 64px 88px 0}
.hero-r{border-left:1px solid oklch(0.93 0.005 265);padding:92px 0 88px 64px;
  display:flex;flex-direction:column;justify-content:center}
.hero .live{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--brand-bd);
  background:var(--brand-soft);padding:6px 11px}
.hero .live i{width:5px;height:5px;border-radius:50%;background:var(--ok-dot);display:block}
.hero .live span{font-size:11px;font-weight:500;line-height:1;color:oklch(0.36 0.05 258)}
.hero h1{font-size:60px;line-height:1.13;letter-spacing:-.045em;margin:26px 0 0;text-wrap:balance}
.hero p.lead{font-size:17px;line-height:1.75;color:var(--ink-2);margin:24px 0 0;max-width:44ch;text-wrap:pretty}
.hero .cta{display:flex;gap:9px;margin-top:36px;flex-wrap:wrap}
.hero .facts{display:flex;flex-wrap:wrap;gap:34px;margin-top:52px;padding-top:26px;
  border-top:1px solid oklch(0.93 0.005 265)}
.hero .facts b{display:block;font-family:var(--mono);font-size:25px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hero .facts em{display:block;font-style:normal;font-size:12px;line-height:1;color:oklch(0.52 0.012 265);margin-top:8px}
.hero .exlist{margin-top:22px;border:1px solid oklch(0.91 0.005 265)}
.hero .ex{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;
  border-bottom:1px solid var(--line-soft);background:var(--surface)}
.hero .ex:hover{background:oklch(0.94 0.004 258)}
.hero .ex .nm{display:block;font-size:14px;font-weight:500;line-height:1.3}
.hero .ex .mn{display:block;font-size:11px;line-height:1;color:oklch(0.56 0.012 265);margin-top:5px}
.hero .ex .pr{text-align:right;flex:none;font-family:var(--mono);font-size:20px;font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hero .ex .pr em{font-style:normal;font-family:var(--sans);font-size:12px;font-weight:400;
  color:oklch(0.54 0.012 265);margin-left:3px;letter-spacing:0}
.hero .exmore{display:block;width:100%;background:oklch(0.94 0.003 265);border:none;padding:15px;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--brand);cursor:pointer;text-align:center}
.hero .exmore:hover{background:var(--brand-soft)}
.hero .exnote{font-size:12px;line-height:1.7;color:oklch(0.54 0.012 265);margin:16px 0 0;text-wrap:pretty}
@media(max-width:1180px){.hero h1{font-size:48px}.hero-l{padding-right:44px}.hero-r{padding-left:44px}}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .hero p.lead{font-size:15px}
  .hero-l{padding:44px 0 36px}
  .hero-r{border-left:none;border-top:1px solid oklch(0.93 0.005 265);padding:32px 0 48px}
  .hero .facts{gap:24px;margin-top:36px}
  .hero .facts b{font-size:21px}
}

/* ── 푸터 — 진한 배경 ───────────────────── */
/* ★ margin-top 을 0 으로 두면 본문이 어디서 끝나든 상관없이 푸터 배경이 바로 붙는다.
   본문 쪽 wrap 마다 padding-bottom 을 챙겨야 했는데 몇 화면이 빠뜨렸다 —
   여기 하나로 모든 화면에 여백을 보장한다. */
footer.ft{background:var(--ft-bg);color:var(--ft-fg);margin-top:40px}
footer.ft .wrap{padding-top:56px}
.ft-grid{display:grid;gap:40px;grid-template-columns:1.2fr 1fr 1fr 1fr;padding-bottom:40px}
@media(max-width:860px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:28px}
  .ft-grid>div:first-child{grid-column:span 2}
}
.ft .logo{color:var(--ink);font-size:18px;letter-spacing:-.035em}
.ft .logo span{color:var(--ink)}
.ft h5{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  color:var(--ft-label);margin:0 0 16px}
.ft a{display:block;font-size:13px;line-height:1;color:var(--ft-fg);padding:5px 0}
.ft a:hover{color:var(--ink);text-decoration:underline}
.ft .biz{font-size:13px;color:var(--ft-dim);line-height:1.7}
.ft .biz b{color:var(--ft-fg);font-weight:500}
.ft .dom{font-family:var(--mono);font-size:13px;font-weight:600;color:oklch(0.82 0.008 265);margin-top:8px}
.ft-bot{border-top:1px solid var(--ft-line);padding:24px 0 52px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  font-size:12px;line-height:1.9;color:var(--ft-dim)}
@media(max-width:860px){.ft-bot{grid-template-columns:1fr;gap:20px}}
.ft-bot b{color:var(--ft-fg);font-weight:500}
.ft-bot a,.ft-bot .hi{color:oklch(0.84 0.02 258);font-weight:400}
.ft-bot p{margin:0}
.ft-bot p+p{margin-top:12px}

/* ── 프로토타입 배너 — 핸드오프 상단 진한 띠 ── */
.demo{background:oklch(0.19 0.014 265);border-bottom:1px solid oklch(0.29 0.016 265);
  color:oklch(0.62 0.012 265);font-size:11px;font-weight:400;text-align:center;padding:9px 20px}
.demo b{font-family:var(--mono);font-weight:600;letter-spacing:.15em;color:oklch(0.78 0.09 258);margin-right:10px}
.demo button{font-family:inherit;font-size:11px;font-weight:500;margin-left:8px;padding:4px 10px;
  border:1px solid oklch(0.34 0.016 265);background:transparent;cursor:pointer;color:oklch(0.76 0.012 265)}
.demo button:hover{background:oklch(0.25 0.014 265);color:#fff}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--muted)}
.hi{color:var(--brand);font-weight:500}
.right{text-align:right}
.mb0{margin-bottom:0}
.mt24{margin-top:24px}
hr.sep{border:none;border-top:1px solid var(--line);margin:32px 0}

/* ── 수량 프리셋 선택 ───────────────────── */
.qtypick{display:flex;flex-wrap:wrap;gap:5px}
.qtypick button{font-family:inherit;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 11px;border:1px solid var(--line);background:oklch(0.94 0.004 265);
  color:oklch(0.31 0.014 265);cursor:pointer;transition:.12s;flex:1 1 96px}
.qtypick button:hover{border-color:var(--brand)}
.qtypick button b{font-family:var(--mono);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.qtypick button span{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.qtypick button.on{background:var(--brand-soft);border-color:var(--brand)}
.qtypick button.on b,.qtypick button.on span{color:var(--brand)}
.qtypick button em{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em;
  background:var(--ink);color:#fff;padding:2px 6px;white-space:nowrap}
.qtypick button.on em{background:var(--brand)}

/* ── 주문 확인사항 안의 정책 안내 (동의 대상 아님) ─── */
.policynote{background:var(--ok-soft);border:1px solid var(--ok-bd);padding:15px 17px;margin:0 0 14px}
.policynote p{font-size:13px;margin:0 0 9px;line-height:1.7;color:oklch(0.3 0.03 155)}
.policynote p:last-child{margin-bottom:0}
.policynote b{color:var(--ok);font-weight:600}

/* ── 자동응답 위젯 ──────────────────────── */
#helpbot{position:fixed;right:20px;bottom:20px;z-index:200;font-size:14px}
.bot-fab{display:flex;align-items:center;gap:9px;font-family:inherit;font-size:13px;font-weight:600;
  padding:13px 18px;border:1px solid var(--brand);background:var(--brand);
  color:var(--brand-ink);cursor:pointer;box-shadow:0 4px 14px oklch(0.2 0.02 265/.22)}
.bot-fab .i{display:grid;place-items:center;width:20px;height:20px;
  background:rgba(255,255,255,.22);font-family:var(--mono);font-size:12px;font-weight:600}
.bot-fab:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
@media(max-width:520px){.bot-fab .t{display:none}.bot-fab{padding:14px}}

.bot-panel{position:absolute;right:0;bottom:60px;width:min(400px,calc(100vw - 40px));
  background:var(--surface);border:1px solid oklch(0.88 0.006 265);
  box-shadow:0 10px 34px oklch(0.2 0.02 265/.22);display:flex;flex-direction:column;max-height:70vh}
/* display:flex 가 브라우저 기본 [hidden]{display:none} 을 덮어쓰므로 명시한다 */
.bot-panel[hidden]{display:none}
.bot-panel header{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:15px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.bot-panel header b{font-size:14px;font-weight:600;display:block}
.bot-panel header span{font-size:12px;color:var(--muted)}
.bot-x{background:none;border:none;font-size:15px;color:var(--muted);cursor:pointer;padding:4px}
.bot-body{padding:16px 18px;overflow-y:auto;flex:1}
.bot-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.bot-chips button{font-family:inherit;font-size:12px;padding:7px 11px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;text-align:left}
.bot-chips button:hover{border-color:var(--brand);color:var(--brand)}
.bot-a{border:1px solid var(--line);padding:15px 17px;margin-bottom:10px;background:var(--surface-2)}
.bot-a h4{font-size:14px;font-weight:600;margin-bottom:9px}
.bot-a p{font-size:13px;margin:0 0 8px;line-height:1.7}
.bot-a ul,.bot-a ol{font-size:13px;margin:0 0 8px;padding-left:19px;line-height:1.75}
.bot-a code{font-family:var(--mono);font-size:12px}
.bot-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.bot-none{text-align:center;padding:16px 8px}
.bot-none p{font-size:13px;margin-bottom:9px}
.bot-more{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;padding:8px 0}
.bot-more a{color:var(--brand);font-weight:500}
.bot-panel footer{display:flex;gap:7px;padding:13px 15px;border-top:1px solid var(--line)}
.bot-input{flex:1;font-size:13px;padding:10px 12px}
.typepick{display:flex;flex-wrap:wrap;gap:7px}
.typepick button{font-family:inherit;font-size:14px;font-weight:500;padding:11px 17px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.typepick button:hover{border-color:var(--brand);color:var(--brand)}
.typepick button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.bot-ask{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:13px 15px;
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:10px}
.bot-ask span{font-size:13px;font-weight:500;flex:1;min-width:130px}
.bot-related{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:4px}
.bot-related p{font-size:12px;margin-bottom:9px}
.bot-esc{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:15px;text-align:center}
.bot-esc p{font-size:13px;margin-bottom:8px}

/* ── FAQ 아코디언 ───────────────────────── */
.faq{background:var(--surface);border:1px solid var(--line)}
.faq details,details.relitem{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:none}
details.relitem{border:1px solid var(--line);margin-bottom:8px;background:var(--surface)}
.faq summary,details.relitem summary{cursor:pointer;padding:17px 24px;font-size:15px;font-weight:500;
  list-style:none;display:flex;gap:9px;align-items:center;letter-spacing:-.015em}
.faq summary::-webkit-details-marker,details.relitem summary::-webkit-details-marker{display:none}
.faq summary::after,details.relitem summary::after{content:'+';margin-left:auto;
  font-family:var(--mono);font-size:16px;color:var(--muted);font-weight:400}
.faq details[open] summary::after,details.relitem[open] summary::after{content:'−'}
.faq summary:hover,details.relitem summary:hover{background:var(--row-hover)}
.fa{padding:0 24px 20px;font-size:14px;color:var(--ink-2);line-height:1.8}
.fa p{margin:0 0 11px}
.fa ul,.fa ol{margin:0 0 11px;padding-left:20px}
.fa li{margin-bottom:6px}
.fa b{color:var(--ink);font-weight:600}

/* ── 인기상품 띠 ────────────────────────── */
.hotband{background:var(--brand-soft);border-bottom:1px solid var(--brand-bd);padding:26px 0 28px}
.hb-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.hb-head h2{font-size:16px;font-weight:600;letter-spacing:-.02em}
.hb-head span{font-size:12px}
/* ★ 6개가 화면 폭보다 넓어 잘려 보이던 걸 자동으로 옆으로 흐르는 롤링 배너로 바꿨다.
   .hb-track 을 내용 그대로 두 번 이어붙이고 -50% 만큼 옮기면 이음매 없이 반복된다. */
.hb-row{overflow:hidden;background:var(--line);border:1px solid var(--line)}
.hb-track{display:flex;gap:1px;width:max-content;animation:hbroll 34s linear infinite}
.hb-row:hover .hb-track{animation-play-state:paused}
@keyframes hbroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hb{flex:1 0 auto;min-width:196px;display:flex;align-items:center;gap:12px;
  padding:14px 17px;background:var(--surface);transition:.12s}
.hb:hover{background:oklch(0.94 0.004 258)}
.hb .rk{display:grid;place-items:center;width:20px;height:20px;flex:none;
  background:var(--surface-3);color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600}
.hb-track .hb:nth-child(1) .rk,.hb-track .hb:nth-child(2) .rk,.hb-track .hb:nth-child(3) .rk{background:var(--brand);color:#fff}
.hb .nm{font-size:13px;font-weight:500;line-height:1.35;flex:1;min-width:0}
.hb .pr{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:16px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.hb .pr em{display:block;font-style:normal;font-family:var(--sans);font-size:10px;
  font-weight:400;color:var(--muted);letter-spacing:0;margin-top:5px}
@media(max-width:600px){.hb{min-width:170px}}
@media(prefers-reduced-motion:reduce){.hb-track{animation:none}.hb-row{overflow-x:auto}}
.notenav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

/* ── 로고 시안 검토 페이지 ──────────────── */
.mk{width:1em;height:1em;display:block}
.lock{display:inline-flex;align-items:center;gap:9px;color:var(--brand);font-size:19px;white-space:nowrap}
.lock .mk{font-size:1.35em}
.wm{font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.wm b{color:var(--brand)}
.wm.en{letter-spacing:-.02em}
.wm.stack{display:inline-flex;flex-direction:column;gap:2px;line-height:1.05}
.wm.stack em{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.22em;color:var(--muted)}

.logogrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lgcard{background:var(--surface);padding:24px;text-align:center}
.lgcard .big{font-size:64px;color:var(--brand);display:grid;place-items:center;height:88px;margin-bottom:16px}
.lgcard b{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.lgcard p{font-size:13px;line-height:1.7;color:var(--muted);margin:0;text-align:left}

td.dk{background:oklch(0.21 0.014 265)}
td.dk .wm{color:oklch(0.92 0.006 265)}
td.dk .wm b,td.dk .lock{color:oklch(0.78 0.09 258)}
td.dk .wm.stack em{color:oklch(0.66 0.012 265)}

.favrow{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);padding:24px}
.favrow>div{text-align:center}
.favrow span{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:8px;letter-spacing:.08em}
.fav{color:var(--brand);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-soft)}
.f16{width:16px;height:16px;font-size:16px}
.f32{width:32px;height:32px;font-size:32px}

.monorow{display:flex;gap:20px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);padding:24px}
.mono1{font-size:48px;color:var(--ink)}
.mono1 .mk rect,.mono1 .mk path,.mono1 .mk circle,.mono1 .mk polyline{opacity:1!important}
.mono1.filled{--logo-ink:#fff}