/* =====================================================================
   SELLLOOP B2B 디자인 기본 — 10/4 디자인 C+B(대표님 «추천대로 진행»)
   바탕 = 시안 C «한국 도매몰 정석형»(각진 단색 · 회색 머리줄 표 · 밑줄 탭 · 상태는 글자색 · 숫자는 크고 굵게),
   고리 아이콘(시안 B)은 로고·마켓 연동·우수 등급 몇 곳에만. 기준 문서 docs/디자인_기준_v2.md.
   규칙: 그라데이션 0 · 그림자·떠오르기·유리 효과 0(1px 선) · 모서리 0 과 4px 두 가지 · 카드 안 카드 0 · 알약 배지 0.
   공개몰 · 셀러 · 공급사 · 관리자 · 개발자 공통.
   ===================================================================== */
/* 글꼴 — Pretendard(OFL, 서버에 직접 둠 /static/fonts · 외부 글꼴 CDN 금지 CSP). 10/3 대표님 «글자폰트도 촌스럽다» */
@font-face { font-family: "Pretendard"; font-weight: 45 920; font-style: normal; font-display: swap;
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations"), url("/static/fonts/PretendardVariable.woff2") format("woff2"); }

/* ── 색표(로고 B 두 색 + 회색 6단계 + 뜻 있는 색 3) · 모서리 · 그림자 ─────────────── */
:root {
  /* 로고 B 두 색 — 넓은 면은 이 둘만(단색) */
  --navy: #0F1F45; --navy-2: #1A2C5B; --navy-3: #22396F;
  --blue: #2563EB; --blue-d: #1D4FCF; --blue-soft: #EEF3FD; --blue-line: #C7D6F5; --sky: #8FB0F5;
  /* 회색 6단계 — g1 글자 · g2 보조 글자 · g3 흐린 글자 · g4 선 · g5 옅은 선 · g6 머리줄·바탕 */
  --g1: #15191F; --g2: #4B525D; --g3: #7C828D; --g4: #D6D9DE; --g5: #E9EBEE; --g6: #F2F3F5;
  /* 뜻 있을 때만 — 완료(초록) · 주의(주황) · 위험·요청(빨강) · 날개 배너 노랑 */
  --ok: #0B8A55; --ok-soft: #EAF6F0; --warn: #E2620D; --warn-soft: #FDF1E8; --danger: #E1352D; --danger-soft: #FCEDEC;
  --yellow: #FFD84A;
  /* 예전 이름(화면 CSS 가 쓰는 것) → 위 색표로 */
  --text: var(--g1); --text-2: var(--g2); --muted: var(--g3); --muted-2: var(--g3);
  --line: var(--g4); --line-2: var(--g5); --bg: var(--g6); --card: #fff;
  /* 모서리 두 가지: 0(구역·카드·표·배너) · 4px(단추·입력칸·작은 단추형 칸) · 그림자 없음 */
  --r: 0; --r-sm: 4px; --shadow: none;
  --side: 236px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.55 Pretendard, "Pretendard Variable", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; color: var(--g1); }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .right { text-align: right; } .center { text-align: center; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mb16 { margin-bottom: 16px; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .grow { flex: 1; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); }

/* ── 아이콘(_parts/icons.html mark()·cat() — 시안 B 면 아이콘) ─────────────────
   색은 --icl(주색)·--icl2(둘째 색)·--gap(겹침 틈 = 바탕색). 크기는 글자 크기(1em) — 부모에서 font-size 나 width 로. */
.lp-ic { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -.15em; overflow: visible; }
.lp-ic.wide { width: 2.125em; }
.lp-ic .lp-m { fill: var(--icl, #0F1F45); stroke: none; }
.lp-ic .lp-a { fill: var(--icl2, #2563EB); stroke: none; }
.lp-ic .lp-s { fill: none; stroke: var(--icl, #0F1F45); stroke-width: 2.2; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 8; }
.lp-ic .lp-sa { fill: none; stroke: var(--icl2, #2563EB); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.lp-ic .lp-l { fill: none; stroke: var(--icl, #0F1F45); stroke-width: 2; }
.lp-ic .lp-l2 { fill: none; stroke: var(--icl2, #2563EB); stroke-width: 2; }
.lp-ic .lp-g { fill: none; stroke: var(--gap, #fff); stroke-linecap: butt; }
.lp-ic .lp-w { fill: var(--icl, #0F1F45); stroke: var(--gap, #fff); stroke-width: 1.3; }
.lp-ic .w2 { stroke-width: 2; } .lp-ic .w22 { stroke-width: 2.2; } .lp-ic .w24 { stroke-width: 2.4; } .lp-ic .w4 { stroke-width: 4; } .lp-ic .w46 { stroke-width: 4.6; }
/* 예전 아이콘 칸 — ic.ui() 가 10/4 부터 빈 글자라 칸만 남는다. 비었으면 칸째 숨긴다(영역 화면이 템플릿을 고치기 전까지의 안전장치) */
.ki, .ci, .ki:empty, .ci:empty, .pi:empty, .ti:empty, .ml-i:empty, .m-ico:empty, .mg-av:empty, .qi:empty, .ix:empty, .dic:empty, .er-ic:empty,
.mk-tg-ic:empty, .mk-ipbox-ic:empty, .lst-formula-ic:empty, .sh-hello-ic:empty { display: none !important; }
/* 단계 목록의 «끝난 단계» 칸 — 예전엔 체크 아이콘, 이제 글자 ✓ */
.done > .n:empty::before, .done > a > .n:empty::before, .done > .no:empty::before { content: "\2713"; }
/* 분양몰 폰 머리 — 장바구니 아이콘이 빠진 동안 글자 «장바구니»를 보인다(분양몰 갈래가 ic.mark 로 바꾸면 저절로 안 걸림) */
@media (max-width: 640px) { .ml-head .ml-cart .ml-i:not(:has(svg)) ~ .t { display: inline; } }

/* ── 공개몰 상단 (10/3 첫판 — 지금 틀은 site.css 의 s-top·s-head·s-gnb. 남은 class 는 같은 규칙으로만 맞춤) ── */
.topbar { background: var(--navy); color: #DCE3F2; font-size: 13px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar b { color: #fff; font-weight: 600; } .topbar nav a { margin-left: 22px; color: #DCE3F2; } .topbar nav a:hover { color: #fff; }
.header { background: #fff; border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; gap: 34px; height: 92px; }
.brand { display: flex; flex-direction: column; gap: 3px; min-width: 236px; }
.brand img { height: 38px; width: auto; } .brand em { font-style: normal; font-size: 12px; color: var(--muted); }
.search { flex: 1; display: flex; align-items: center; border: 2px solid var(--blue); border-radius: 0; height: 48px; padding: 0 0 0 16px; background: #fff; }
.search input { flex: 1; border: 0; outline: 0; height: 100%; background: transparent; }
.search button { width: 76px; height: 100%; border: 0; border-radius: 0; background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; font-weight: 700; }
.uicons { display: flex; gap: 22px; } .uicons a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--text-2); }
.gnb { background: #fff; border-bottom: 2px solid var(--navy); }
.gnb .wrap { display: flex; align-items: center; height: 52px; }
.gnb .allcat { background: var(--blue); color: #fff; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 24px; font-weight: 700; margin-right: 28px; }
.gnb .menu a { margin-right: 34px; font-weight: 600; font-size: 15px; } .gnb .menu a.on, .gnb .menu a:hover { color: var(--blue); }
.gnb .apply { margin-left: auto; border: 1px solid var(--blue); color: var(--blue); font-weight: 600; padding: 7px 14px; border-radius: var(--r-sm); }
.footer { background: var(--g6); color: var(--g3); margin-top: 64px; padding: 40px 0 48px; font-size: 13px; border-top: 1px solid var(--line); }
.footer .wrap { display: flex; justify-content: space-between; gap: 24px; } .footer img { height: 24px; width: auto; margin-bottom: 12px; }
.footer nav a { margin-left: 22px; color: var(--g2); }
.crumb { font-size: 13px; color: var(--muted); padding: 18px 0 10px; } .crumb b { color: var(--text); }

/* ── 공개몰 본문(10/3 첫판 class — 같은 규칙으로만 맞춤) ─────────────────────── */
.hero { display: grid; grid-template-columns: 2.3fr 1fr; gap: 16px; padding: 20px 0; }
.hero .main { border-radius: 0; padding: 40px 44px; background: var(--blue-soft); border: 1px solid var(--blue-line); }
.hero .eyebrow { display: none; }
.hero h1 { font-size: 36px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.04em; } .hero h1 b { color: var(--blue); }
.hero p { color: var(--g2); font-size: 15px; margin: 0 0 22px; }
.hero .side { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 22px; }
.stat-line { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-2); color: var(--g2); }
.stat-line b { color: var(--g1); }
.cats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 2px solid var(--g1); border-left: 1px solid var(--line-2); }
.cats a { background: #fff; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 14px 4px; text-align: center; font-size: 13px; color: var(--text-2); }
.cats a:hover { color: var(--blue); }
.cats .ic { width: 28px; height: 28px; margin: 0 auto 8px; display: grid; place-items: center; font-size: 28px; }
.promo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.promo a { border-radius: 0; padding: 20px; min-height: 120px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 6px; }
.promo .tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--blue); }
.promo strong { font-size: 17px; color: var(--g1); } .promo span { color: var(--g2); font-size: 13px; margin-top: auto; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 12px; }
.sec-h h2 { font-size: 20px; font-weight: 800; } .sec-h small { color: var(--muted); margin-left: 10px; font-size: 13px; } .sec-h a { font-size: 13px; color: var(--g2); }
.pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 18px; }
/* 상품 카드 — 사진에만 1px 선, 카드 상자 없음(시안 C) */
.pcard { background: transparent; border: 0; border-radius: 0; display: flex; flex-direction: column; min-width: 0; }
.pcard .thumb { aspect-ratio: 1/1; background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); position: relative; overflow: hidden; }
.pcard:hover .thumb { border-color: var(--g3); }
.pcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard .thumb .noimg { font-size: 12px; color: var(--g3); }
.pcard .badge-on { position: absolute; left: 0; top: 0; margin: 0; padding: 0 7px; height: 24px; line-height: 24px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; }
.pcard .body { padding: 10px 0 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pcard .name { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.pcard .code { order: -1; font-size: 12px; color: var(--g3); }
.pcard .price { font-size: 16px; font-weight: 800; color: var(--blue); letter-spacing: -.03em; margin-top: 3px; } .pcard .price small { font-size: 12px; color: var(--g3); font-weight: 500; margin-left: 4px; }
.pcard .consumer { font-size: 12px; color: var(--g3); text-decoration: line-through; }
.pcard .login-need { font-size: 12px; color: var(--g3); margin-top: 3px; } .pcard .login-need b { color: var(--blue); font-size: 14px; font-weight: 800; margin-left: 4px; }
/* 상품 태그 — 상자 없는 글자색 라벨(«·»로 나눔) */
.chips { display: flex; gap: 0; flex-wrap: wrap; } .chip { font-size: 12px; font-weight: 700; padding: 0; border-radius: 0; background: none; color: var(--blue); border: 0; }
.chip + .chip::before { content: "\00B7"; margin: 0 5px; color: var(--g4); font-weight: 400; }

/* 공급사관(10/3 첫판 class) */
.store-card { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--navy); border-radius: 0; overflow: hidden; }
.store-top { display: flex; gap: 20px; align-items: center; padding: 22px 24px; }
.store-logo { width: auto; height: auto; border-radius: 0; background: none; color: var(--navy); font-weight: 800; font-size: 22px; letter-spacing: .02em; padding-bottom: 4px; border-bottom: 2px solid var(--navy); }
.store-top h1 { font-size: 24px; display: flex; gap: 10px; align-items: center; }
.store-metrics { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: #fff; }
.store-metrics div { padding: 16px 20px; border-right: 1px solid var(--line-2); } .store-metrics div:last-child { border-right: 0; }
.store-metrics small { display: block; color: var(--muted); font-size: 12px; } .store-metrics b { font-size: 20px; color: var(--g1); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 24px 0 16px; }
.tabs a { padding: 12px 18px; font-weight: 600; color: var(--text-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--g1); font-weight: 800; border-color: var(--navy); }

/* ── 포털 공통 틀(셀러·공급사·관리자·개발자) — 남색 왼쪽 메뉴(대표님 캡처본) · 흰 윗줄 ───────── */
.portal { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; background: var(--navy); }      /* 왼쪽 칸 메뉴 아래도 남색 */
.pmain { min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.pbody { padding: 20px 24px 60px; background: var(--bg); }

/* 왼쪽 메뉴 — 글자만(아이콘 없음) · 선택 칸은 파랑 단색.
   10/4 줄 간격 줄임: PC 1440×900 에서 셀러(23줄·7묶음)·관리자(25줄·7묶음) 메뉴가 끝까지 보이게(예전엔 1231·1301px 라 아래가 잘림).
   메뉴 줄 = 위아래 4px + 글자 줄 17px · 묶음 머리 = 위 2+5px(개발 서버 안내 띠 29px 가 위에 있어도 관리자 메뉴 끝이 900 안). 글자 13px 는 시안 C 왼쪽 메뉴와 같다. */
.sidebar { background: var(--navy); color: #C5CEE3; padding: 10px 0 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  --icl: #fff; --icl2: var(--sky); --gap: var(--navy); }
.sidebar .logo { display: block; padding: 2px 20px 0; } .sidebar .logo img { height: 26px; width: auto; }
.sidebar .pname { display: block; margin: 4px 20px; padding: 0; background: none; border-radius: 0; font-size: 12px; line-height: 1.4; font-weight: 700; color: var(--sky); letter-spacing: 0; }
.sidebar .grp { margin: 2px 0 0; padding: 5px 20px 2px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; line-height: 1.25; font-weight: 700; color: #8C9BC2; letter-spacing: 0; }
.sidebar a { display: flex; align-items: center; gap: 8px; padding: 4px 20px 4px 28px; margin: 0; border-radius: 0; font-size: 13px; line-height: 17px; font-weight: 500; color: #C5CEE3; }
.sidebar .pname + a { padding-left: 20px; font-weight: 700; color: #fff; }        /* 첫 줄 «홈·대시보드·거래 현황» */
.sidebar a:hover { background: var(--navy-2); color: #fff; --gap: var(--navy-2); }
.sidebar a.on { background: var(--blue); color: #fff; font-weight: 700; --gap: var(--blue); }
.sidebar a .lb { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar a .mi { width: 17px; height: 17px; order: 2; }                          /* 마켓 연동 고리 표시(글자 뒤) */
.sidebar .cnt { margin-left: auto; order: 3; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 0; padding: 0 6px; line-height: 17px; }
.sidebar a.on .cnt { background: #fff; color: var(--blue); }
/* 10/5 밤: 관리자 포털만 메뉴 줄 위아래 3px — 최고관리자 메뉴 27줄(7묶음)이 PC 1440×900 에 다 들어가게(4px 이면 끝이 944px, 개발 서버 띠 포함).
   폰(760px 아래 칩 한 줄)은 아래 폰 규칙 그대로 */
@media (min-width: 761px) { .portal-admin .sidebar a { padding-top: 3px; padding-bottom: 3px; } }

/* 윗줄 */
.ptop { height: 58px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; gap: 12px; position: sticky; top: 0; z-index: 5; }
.ptop .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ptop .crumbs i { font-style: normal; color: var(--g4); } .ptop .crumbs b { color: var(--g1); font-weight: 700; }
.ptop > .badge { margin: 0; }
.ptop > .badge.navy { color: var(--g3); font-weight: 700; letter-spacing: .02em; }
.psearch { flex: 1; max-width: 400px; display: flex; align-items: stretch; height: 34px; margin-left: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.psearch:focus-within { border-color: var(--blue); }
.psearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 10px; font-size: 13px; }
.psearch button { flex: none; border: 0; border-left: 1px solid var(--line); background: var(--g6); padding: 0 14px; font-size: 12.5px; font-weight: 700; color: var(--g2); cursor: pointer; }
.psearch button:hover { color: var(--g1); }
.ptop .who { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--text-2); font-size: 13px; }
.ptop .who .me { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ptop .who .me b { color: var(--g1); font-weight: 700; }
.ptop .who form { margin: 0; }

/* 쪽 머리 */
.ptitle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.ptitle h1 { font-size: 22px; font-weight: 800; letter-spacing: -.045em; } .ptitle p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.ptitle .acts, .ptitle .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 카드(바깥 1겹) — 안쪽은 줄과 여백으로만 나눈다 ─────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 16px 18px; }
.card h3 { font-size: 15px; font-weight: 800; letter-spacing: -.04em; margin-bottom: 10px; } .card + .card { margin-top: 16px; }
/* 카드 머리 — div.card-h > h3 + span.sub + div.r(오른쪽 단추). 제목 앞 아이콘 칸(.ci)은 없앰 */
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h3 { margin: 0; font-size: 15px; }
.card-h .sub { font-size: 12px; color: var(--muted); }
.card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card:not(.flush) > .card-h:first-child { margin: -16px -18px 14px; padding: 11px 18px; min-height: 46px; border-bottom: 1px solid var(--line-2); }
.card.flush { padding: 0; overflow: hidden; } .card.flush > .card-h { margin: 0; padding: 11px 18px; min-height: 46px; border-bottom: 1px solid var(--line-2); }
.card.flush > .tbox, .card.flush > table.t { border: 0; border-radius: 0; }
/* 카드 안 카드·양식 묶음 → 테두리 없이 윗줄 하나 */
.card .card, .card .form-sec { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 14px 0 0; background: transparent; }
.card .card > .card-h:first-child { margin: 0 0 10px; padding: 0; min-height: 0; border: 0; }
.card .tbox { border-left: 0; border-right: 0; }
.card .note-bar { border: 0; background: transparent; padding: 8px 0; }

/* ── 숫자 칸 — 카드 없는 «숫자 한 줄 띠»(칸 사이 세로선) · 아이콘 칸·위 색띠·바로가기 글자 없음 ──
   a.kpi(.k-amber 주의 · .k-red 위험·요청 · .k-green 완료) > small + b + div.sub. 0건이면 기본색. */
.kpi { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 14px 18px; color: inherit; min-width: 0; }
.kpi small { display: block; color: var(--g2); font-size: 13px; font-weight: 700; }
.kpi b { display: block; margin-top: 4px; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--g1); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kpi b small, .kpi b i { display: inline; margin-left: 2px; padding: 0; font-size: 14px; font-weight: 700; color: inherit; font-style: normal; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi .act { display: none; }
a.kpi:hover { background: #F8F9FB; } a.kpi:hover small { color: var(--blue); }
.kpi.alert b, .kpi.k-red b { color: var(--danger); } .kpi.good b, .kpi.k-green b { color: var(--ok); } .kpi.k-amber b { color: var(--warn); }
.grid:has(> .kpi) { gap: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.grid:has(> .kpi) > * { min-width: 0; }
.grid:has(> .kpi) > .kpi { border: 0; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); margin: -1px 0 0 -1px; }

/* ── 표 — 회색 머리줄 · 얇은 선 · 숫자 크게 ─────────────────────────────── */
table.t { width: 100%; border-collapse: collapse; background: #fff; }
.t th { text-align: left; font-size: 12px; color: var(--g2); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--g6); white-space: nowrap; }
.t td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.t tr:hover td { background: #FAFBFC; } .t .num { text-align: right; font-variant-numeric: tabular-nums; } .t td.num { font-weight: 700; }
.t tr.hl td { background: #FFF8EC; }
.tbox { background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: auto; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
/* 표 안 작은 사진·두 줄 글 */
.thumb-sm { width: 40px; height: 40px; border-radius: 0; object-fit: cover; background: var(--g6); border: 1px solid var(--line-2); flex: none; }
.cell2 { display: flex; align-items: center; gap: 10px; min-width: 0; } .cell2 > div { min-width: 0; }
.cell2 b { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.cell2 small { display: block; color: var(--muted); font-size: 12px; }

/* ── 상태 표시 — 알약 대신 글자색 라벨 ───────────────────────────────── */
.badge { display: inline-block; margin: 0 2px; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--g2); white-space: nowrap; vertical-align: baseline; }
.badge.blue { color: var(--blue); } .badge.green { color: var(--ok); } .badge.orange { color: var(--warn); } .badge.red { color: var(--danger); }
.pcard .badge.badge-on { color: #fff; }   /* 10/5: 사진 위 «베스트»·«품절» 띠 — .badge.red 가 뒤에 있어 빨강 바탕에 빨강 글자가 되던 것 */
.badge.navy { color: var(--navy); font-weight: 800; } .badge.violet, .badge.teal { color: var(--g2); }
.badge.test { color: var(--g3); }          /* 시험 자료 표시는 회색 글자(기준 v2 5절) — 주황은 «처리 필요» 경고에만 */

/* ── 단추·입력 ─────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--g1); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--g3); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn.primary:hover { background: var(--blue-d); border-color: var(--blue-d); }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; } .btn.navy:hover { background: var(--navy-2); }
.btn.danger { background: #fff; color: var(--danger); border-color: #EBB4B0; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; } .btn.lg { height: 46px; padding: 0 20px; font-size: 15px; font-weight: 700; } .btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn > svg { width: 16px; height: 16px; flex: none; } .btn.sm > svg { width: 14px; height: 14px; }
.form { display: grid; gap: 14px; } .field > label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }   /* 10/3: 칸 안 칩·체크 label 은 블록이 아니게(디자인 갈래 요청) */
.hint, .field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.in, select.in, textarea.in { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 11px; background: #fff; outline: 0; }
textarea.in { height: auto; min-height: 96px; padding: 10px 11px; resize: vertical; }
.in:focus { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filters .in { height: 34px; width: auto; min-width: 140px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pill.on { background: var(--navy); color: #fff; border-color: var(--navy); } .pill .n { font-size: 11px; opacity: .8; }
.msg { padding: 11px 14px; border-radius: 0; margin-bottom: 14px; font-weight: 600; border: 1px solid transparent; }
.msg.ok { background: var(--ok-soft); color: #0A6B43; border-color: #BFE3D1; } .msg.err { background: var(--danger-soft); color: #A8221C; border-color: #F2C4C1; }
.msg.info { background: var(--blue-soft); color: var(--blue-d); border-color: var(--blue-line); }
.testbar { background: #FFF4D6; color: #8A4B00; font-size: 12px; text-align: center; padding: 6px; font-weight: 600; border-bottom: 1px solid #F3DFA6; }
.pager { display: flex; gap: 4px; justify-content: center; margin-top: 16px; }
.pager a, .pager span { min-width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: 13px; }
.pager .on { background: var(--navy); color: #fff; border-color: var(--navy); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 14px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* 도구 줄(필터·일괄 단추) — 기존 .filters 와 같이 씀 · 탭(.seg)은 밑줄 탭 */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .sp { flex: 1; }
.seg { display: inline-flex; gap: 0; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.seg a { padding: 8px 12px 7px; margin-bottom: -1px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: var(--g2); white-space: nowrap; }
.seg a:hover { color: var(--g1); }
.seg a.on { background: none; color: var(--g1); font-weight: 800; border-bottom-color: var(--navy); }
.seg a .n { margin-left: 3px; color: var(--muted); font-weight: 600; } .seg a.on .n { color: var(--blue); }

/* 주문 흐름 — 바깥 1겹 한 줄 표, 칸 사이 세로선(번호 동그라미·› 원 없음) · div.flow > a(.on/.warn) > small + b + span */
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.flow > * { position: relative; display: block; min-width: 0; margin: -1px 0 0 -1px; padding: 12px 14px; border: 0; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); border-radius: 0; background: transparent; text-align: left; color: inherit; }
.flow > * small { display: block; font-size: 12px; color: var(--g2); font-weight: 600; }
.flow > * b { display: block; font-size: 22px; font-weight: 800; color: var(--g1); letter-spacing: -.03em; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.flow > * span { font-size: 12px; color: var(--muted); }
.flow > .on b { color: var(--blue); } .flow > .warn b { color: var(--warn); }
.flow > a:hover { background: #F8F9FB; }
.card .flow { border-left: 0; border-right: 0; }

/* 안내 띠·빈 상태 — 상자 1겹, 아이콘 없음. 카드 안에서는 상자 없이 글만 */
.note-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 0; background: #F8F9FB; border: 1px solid var(--line-2); font-size: 13px; color: var(--g2); }
/* 바탕은 색표(--warn-soft·--danger-soft, .msg 와 같음). 글자는 더 진한 주황·빨강 — --warn·--danger 그대로면 13px 글자가 연한 바탕에서 흐려 읽기 어렵다 */
.note-bar.warn { background: var(--warn-soft); border-color: #F3D8C3; color: #A8480A; } .note-bar.err { background: var(--danger-soft); border-color: #F2C4C1; color: #A8221C; }
/* 카드 안 주의·위험 띠도 상자 없이 글만(카드 안 카드 금지 · 규칙 4) — 위 .note-bar.warn·err 바탕이 .card .note-bar 를 덮던 것 */
.card .note-bar.warn, .card .note-bar.err { background: transparent; border: 0; }
.note-bar > svg { display: none; }
.empty-box { padding: 36px 20px; text-align: center; color: var(--muted); } .empty-box > svg { display: none; }
.empty-box b { display: block; color: var(--text-2); font-size: 15px; margin-bottom: 4px; }

/* 양식 묶음 — 번호는 동그라미 대신 «1.» 글자 */
.form-sec { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 18px 20px; }
.form-sec + .form-sec { margin-top: 16px; }
.form-sec > h3 { font-size: 15px; font-weight: 800; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); display: flex; align-items: baseline; gap: 6px; }
.form-sec > h3 .n { width: auto; height: auto; border-radius: 0; background: none; color: var(--blue); font-size: 15px; display: inline; }
.form-sec > h3 .n:not(:empty)::after { content: "."; }
.form-sec > h3 .n:empty { display: none; }
.form-actions { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--line); }

/* 로그인(10/3 첫판 class — 지금 화면은 auth.css) */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { background: var(--navy); color: #DCE3F2; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side img { height: 40px; width: auto; } .auth-side h2 { color: #fff; font-size: 32px; line-height: 1.3; margin: 0 0 14px; } .auth-side h2 b { color: var(--sky); }
.auth-form { display: grid; place-items: center; padding: 40px; background: #fff; }
.auth-form .box { width: 100%; max-width: 380px; } .auth-form h1 { font-size: 24px; margin-bottom: 6px; }
.testacc { margin-top: 22px; border: 1px solid #F3DFA6; background: #FFF9E8; border-radius: 0; padding: 14px 16px; font-size: 13px; color: #8A4B00; }
.testacc code { background: #fff; border: 1px solid #F3DFA6; padding: 1px 6px; border-radius: var(--r-sm); color: #6B3A00; }

/* ── 좁은 화면 ─────────────────────────────────────────────────── */
body { font-feature-settings: "tnum" 1; }
.nowrap { white-space: nowrap; }
.t td, .t th { word-break: keep-all; }                     /* 좁은 칸에서 «완 료»처럼 한 글자씩 세로로 끊기지 않게(넘치면 .tbox 가 가로로 밀림) */
.hero h1, .sec-h h2, .promo strong, .ptitle h1, .ptitle p { word-break: keep-all; }
.grid > .card + .card { margin-top: 0; }
@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); } .cats { grid-template-columns: repeat(6, 1fr); } .g4, .g5 { grid-template-columns: repeat(2, 1fr); } .hero { grid-template-columns: 1fr; } .promo { grid-template-columns: repeat(2, 1fr); } .store-metrics { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; } .psearch { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; } .header .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; } .brand { min-width: 0; }
  .uicons { display: none; } .gnb .menu { display: none; } .pgrid { grid-template-columns: repeat(2, 1fr); } .cats { grid-template-columns: repeat(4, 1fr); }
  .portal { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; }
  .grid.g4:has(> .kpi), .grid.g5:has(> .kpi) { grid-template-columns: repeat(2, 1fr); }      /* 숫자 띠는 폰에서 두 칸씩 */
  .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } .topbar nav { display: none; } .hero h1 { font-size: 28px; } .promo { grid-template-columns: 1fr; }
  .ptop { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  .ptop .who { margin-left: 0; flex-wrap: wrap; gap: 8px; }
  .ptop .crumbs span, .ptop .crumbs i { display: none; } .ptop .who .me { display: none; }
  .gnb .allcat, .gnb .apply { white-space: nowrap; padding: 0 12px; font-size: 13px; }
  .gnb .allcat { margin-right: 8px; }
  .pbody { padding: 16px 14px 48px; }
  .footer .wrap { flex-direction: column; }                  /* 공개몰 아래띠 링크가 «개인정보처/리방침»처럼 끊기던 것 */
  .footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .footer nav a { margin-left: 0; white-space: nowrap; }
  .cats a { word-break: keep-all; font-size: 12px; padding: 14px 2px; }
  /* 포털 왼쪽 메뉴 → 폰에서는 위쪽 칩 «한 줄»(옆으로 밀어 봄). 메뉴가 첫 화면을 다 차지하던 것 →
     10/4: 칩 묶음도 17~25개가 5줄(약 240px)로 쌓여 본문이 화면 가운데서 시작해 한 줄 가로 밀기로 바꿈. 지금 화면 이름은 윗줄 경로에 보인다 */
  .sidebar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar a, .sidebar .pname + a { flex: 0 0 auto; padding: 6px 10px; font-size: 12.5px; font-weight: 500; border-radius: var(--r-sm); background: var(--navy-2); white-space: nowrap; }
  .sidebar a.on { background: var(--blue); }
  .sidebar a.logo { flex: 0 0 auto; background: transparent; padding: 0 6px 0 2px; border-radius: 0; }
  .sidebar a.logo img { height: 18px; }
  .sidebar .pname, .sidebar .grp { display: none; }
  .sidebar .cnt { margin-left: 4px; }
  .sidebar a .mi { width: 14px; height: 14px; }
  .card-h .r { margin-left: 0; width: 100%; }
  /* 폰 폭 가로 넘침(주문 상세·분양몰·관리자 홈 등 6화면) — 격자 칸이 안의 표 너비만큼 커지지 않게 하고, 표는 제자리에서 가로로 민다 */
  .grid > *, .adm-cols > *, .sl-sum > *, .sl-head > * { min-width: 0; }
  .card { overflow-wrap: break-word; }
  :not(.tbox) > table.t { display: block; overflow-x: auto; max-width: 100%; }
  .tbox > table.t:has(tr > :nth-child(5)) { min-width: 640px; }   /* 칸이 5개 넘는 표만 — 칸이 세로로 길게 찌그러지지 않게 */
}