/* =====================================================================
공개몰 갈래 전용 — 목록(카테고리·검색·베스트·신상품) · 공급사관 · 공급사 목록 · 상품 상세 ·
셀러 혜택 · 대량견적 · 가입 2종 · 입점 안내 · 고객센터·공지 · 약관/개인정보.
10/4 디자인 C+B(대표님 «추천대로 진행») — 시안 C «한국 도매몰 정석형»: 단색 · 1px 선 · 모서리 0/4px · 그림자 0 ·
아이콘 칸 0 · 제목 위 알약 0 · 카드 안 카드 0 · 번호 동그라미 0 · 돌림색 0. 기준 문서 docs/디자인_기준_v2.md.
★site.css(공개몰 틀) 다음에 읽힌다. 틀(머리·메뉴·바닥·상품 카드 pcard)은 site.css·sellloop.css 소유, 여기서는 본문만.
★자바스크립트 없이 동작(CSP). 이미지 넘김은 라디오+라벨, 탭은 앵커.
===================================================================== */
/* ── 0. 공통 부품 ───────────────────────────────────────────────────── */
body.site main .btn.navy:hover { background: var(--navy-2); }
.note-bar a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* 구역 머리(site.css .s-sec 위에) — 폰 폭에서 오른쪽 단추가 제목을 찌그러뜨리지 않게 줄바꿈 */
.s-sec.pb-sec { flex-wrap: wrap; row-gap: 12px; }
.s-sec.pb-sec > div:first-child { flex: 1 1 auto; min-width: 0; }
/* 길잡이(홈 › …) */
.pb-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--g3); padding: 16px 0 12px; }
.pb-crumb a:hover { color: var(--blue); }
.pb-crumb i { font-style: normal; color: var(--g4); }
.pb-crumb b { color: var(--g1); font-weight: 600; }
/* 쪽 머리 — 위 2px 선 + 흰 바탕. 오른쪽 칸은 숫자 하나(.pb-stat) 또는 평면 그림(.has-art + img.pb-art) */
.pb-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 24px 28px;
background: #fff; border: 1px solid var(--g4); border-top: 2px solid var(--g1); }
.pb-hero > * { min-width: 0; }
.pb-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1.3; margin: 0 0 8px; word-break: keep-all; }
.pb-hero p { margin: 0; color: var(--g2); font-size: 14px; line-height: 1.7; max-width: 660px; word-break: keep-all; }
.pb-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* 쪽 머리 오른쪽 평면 그림(10/6 대표님 «이미지가 좀 있으면») — static/img/illust/*.svg(320×200 · 글자 없음 · 바탕 없음).
글
남색 바탕 머리에는 쓰지 않는다(그림이 남색 선이라 사라짐). 폰(≤860)에서는 글 아래 가운데 · .ph-hide 는 폰에서 숨김(양식·질문이 먼저인 화면) */
.pb-hero.has-art { grid-template-columns: minmax(0, 1fr) 300px; }
.pb-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.pb-hero > .pb-art { width: 300px; justify-self: end; }
/* 머리 글 칸 안 단계 줄(혜택·대량견적) — 머리 상자 안이라 바깥 테두리 없이 윗줄 하나 + 칸 사이 세로선(상자 안 상자 0) */
.pb-hero .pb-stepline { border: 0; border-top: 1px solid var(--g5); background: transparent; }
.pb-hero .pb-stepline li:first-child { padding-left: 0; }
/* 쪽 머리 오른쪽 숫자 한 칸 — 상자 없이 왼쪽 세로선 */
.pb-stat { min-width: 200px; padding: 2px 0 2px 28px; border-left: 1px solid var(--g5); }
.pb-stat small { display: block; font-size: 13px; color: var(--g2); font-weight: 600; }
.pb-stat b { display: block; font-size: 30px; font-weight: 800; color: var(--g1); letter-spacing: -.04em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pb-stat b i { font-style: normal; font-size: 14px; color: var(--g2); margin-left: 2px; }
.pb-stat .sub { display: block; font-size: 12px; color: var(--g3); }
/* 입점 안내 기본 조건 — 쪽 머리 바로 아래 한 줄 띠(칸 사이 세로선 · 위 2px 남색 선). 10/6 남색 머리 오른쪽 숫자 줄에서 옮김 */
.pb-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; background: #fff; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--g4); }
.pb-terms > div { padding: 14px 18px; min-width: 0; }
.pb-terms > div + div { border-left: 1px solid var(--g5); }
.pb-terms small { display: block; font-size: 12px; font-weight: 600; color: var(--g2); word-break: keep-all; }
.pb-terms b { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-terms b i { font-style: normal; font-size: 13px; margin-left: 2px; }
/* 마켓 로고 띠(10/6 대표님 «실제 마켓들 로고») — _parts/market_logos.html strip. 왼쪽 '연결할 수 있는 마켓' · 오른쪽 '준비 중'.
로고는 공식 파일 그대로(다시 칠하기·흑백·투명·늘이기 없음 — 높이만 맞춤), 흰 칸 · 모서리 0 · 그림자 0. 파일이 없으면 이름 글자만 굵게.
'준비 중'은 로고를 흐리게 하지 않고 묶음 제목·이름 글자만 회색 */
.pb-mk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); margin-top: 16px; background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.s-sec + .pb-mk { margin-top: 0; }
.pb-mk-g { min-width: 0; }
.pb-mk-g + .pb-mk-g { border-left: 1px solid var(--g5); }
body.site .pb-mk-g h2 { margin: 0; padding: 10px 14px; font-size: 13px; font-weight: 800; letter-spacing: -.02em; border-bottom: 1px solid var(--g5); }
body.site .pb-mk-g.later h2 { color: var(--g3); }
.pb-mk ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pb-mk li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px; min-width: 0; text-align: center; }
.pb-mk li + li { border-left: 1px solid var(--g5); }
.pb-mk img { display: block; height: 26px; width: auto; max-width: 112px; object-fit: contain; }
.pb-mk .two { display: flex; align-items: center; gap: 8px; }
.pb-mk li span { font-size: 12px; color: var(--g2); word-break: keep-all; }
.pb-mk li b { font-size: 15px; font-weight: 800; color: var(--g1); letter-spacing: -.03em; word-break: keep-all; }
.pb-mk .later li span, .pb-mk .later li b { color: var(--g3); }
/* 연결 전에 할 일(자동화 안내) — 한 줄 표 4칸(칸 사이 세로선). 번호는 CSS counter 로만(화면 글에 숫자를 쓰지 않는 화면) */
.pb-steps4 { list-style: none; margin: 0; padding: 0; counter-reset: s4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.pb-steps4 li { counter-increment: s4; padding: 16px 18px 18px; min-width: 0; word-break: keep-all; }
.pb-steps4 li + li { border-left: 1px solid var(--g5); }
.pb-steps4 b { display: block; font-size: 15px; font-weight: 800; color: var(--g1); letter-spacing: -.03em; margin-bottom: 6px; }
.pb-steps4 b::before { content: counter(s4) "."; color: var(--blue); margin-right: 3px; }
.pb-steps4 small { display: block; font-size: 13px; color: var(--g2); line-height: 1.65; }
/* 구역 머리 오른쪽 작은 평면 그림(입점 안내 '상세페이지 준비') — PC 만 */
.s-sec.pb-sec .pb-sec-art { flex: none; display: block; width: 176px; height: auto; aspect-ratio: 8 / 5; margin-left: auto; align-self: flex-end; }
.s-sec.pb-sec:has(> .pb-sec-art) { margin-top: 24px; } /* 그림 높이만큼 위가 비지 않게 */
/* 쪽 전체 빈 상태 그림(목록·MD 테마·공급사 목록) — .empty-box 맨 앞(sellloop.css 는 svg 태그만 숨김) */
.pb-empty-art { display: block; width: 160px; height: auto; aspect-ratio: 8 / 5; margin: 0 auto 12px; }
/* 단계 — 한 줄 표(칸 사이 세로선, 지금 단계는 위 3px 남색 줄). - 1. 글설명
*/
.pb-stepline { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
background: #fff; border: 1px solid var(--g4); }
.pb-stepline li { position: relative; padding: 11px 16px 12px; min-width: 0; word-break: keep-all; }
.pb-stepline li + li { border-left: 1px solid var(--g5); }
.pb-stepline b { display: block; font-size: 14px; font-weight: 700; color: var(--g2); }
.pb-stepline small { display: block; font-size: 12px; color: var(--g3); margin-top: 1px; }
.pb-stepline li.on b { color: var(--g1); font-weight: 800; }
.pb-stepline li.on::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--navy); }
.pb-stepline li.done b { color: var(--g3); }
/* 번호 글 목록(1. 2. 3.) — 동그라미 없음 */
.pb-ol { margin: 0; padding: 0; list-style: none; counter-reset: o; display: grid; gap: 8px; }
.pb-ol li { counter-increment: o; position: relative; padding-left: 22px; font-size: 14px; color: var(--g1); line-height: 1.6; word-break: keep-all; }
.pb-ol li::before { content: counter(o) "."; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--blue); }
.pb-ol li small { display: block; color: var(--g3); font-size: 12px; font-weight: 400; }
.pb-ol li.done { color: var(--g3); }
.pb-ol li.on { font-weight: 700; }
/* 점 목록 — 작은 남색 네모 */
.pb-ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pb-ul li { position: relative; padding-left: 14px; font-size: 14px; color: var(--g1); line-height: 1.7; word-break: keep-all; }
.pb-ul li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 4px; height: 4px; background: var(--navy); }
.pb-ul li.muted { color: var(--g3); } .pb-ul li.muted::before { background: var(--g4); }
/* 아래 권유 띠 — 남색 단색 */
.pb-cta { display: flex; align-items: center; gap: 24px; margin-top: 44px; padding: 24px 30px; background: var(--navy); color: #fff; }
.pb-cta > div:not(.acts) { flex: 1; min-width: 0; }
body.site .pb-cta h3 { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.04em; margin: 0 0 4px; word-break: keep-all; }
.pb-cta p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 14px; word-break: keep-all; }
.pb-cta .acts { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.pb-cta .btn { height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700; }
.pb-cta .btn.primary { background: #fff; border-color: #fff; color: var(--navy); }
.pb-cta .btn:not(.primary) { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.pb-cta .btn:not(.primary):hover { border-color: #fff; }
/* 표 구역(시안 C) — 위 2px 선 + 머리 줄 + 안은 줄로만. 카드 상자를 겹치지 않는다
제목
설명오른쪽 … 또는 …
*/
.pb-box { background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); min-width: 0; }
.pb-box.nv { border-top-color: var(--navy); }
.pb-box > .hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 46px; padding: 13px 14px 11px; border-bottom: 1px solid var(--g5); }
.pb-box > .hd h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
.pb-box > .hd .sub { font-size: 12px; color: var(--g3); }
.pb-box > .hd .r { margin-left: auto; font-size: 13px; color: var(--g2); }
.pb-box > .bd { padding: 14px; }
.pb-box > .bd > p { margin: 0 0 10px; font-size: 14px; color: var(--g2); line-height: 1.65; word-break: keep-all; }
.pb-box > .bd > :last-child { margin-bottom: 0; }
.pb-box > .btns { display: grid; gap: 6px; padding: 12px 0 14px; border-top: 1px solid var(--g5); } /* 좌우 0 — 상자에 옆선이 없어 단추를 표 줄 끝에 맞춘다 */
.pb-box > .btns .btn { width: 100%; height: 40px; }
.pb-box > .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--g5); font-size: 13px; color: var(--g3); }
.pb-box > .foot a { color: var(--g1); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g4); }
.pb-box > .foot a:hover { color: var(--blue); }
.pb-box > .pb-kv + .foot, .pb-box > .pb-kv + .btns { border-top: 0; }
.pb-box > .tbox { border: 0; }
.pb-box > .empty-box { padding: 24px 14px; }
/* 이름·값 표 — 회색 머리칸(시안 C «판매자 정보» 표) */
.pb-kv { margin: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.pb-kv dt, .pb-kv dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--g5); font-size: 13px; line-height: 1.55; }
.pb-kv dt { background: var(--g6); color: var(--g2); font-weight: 600; word-break: keep-all; }
.pb-kv dd { color: var(--g1); word-break: keep-all; overflow-wrap: anywhere; }
.pb-kv dd a { color: var(--blue); }
.pb-kv dd .muted { color: var(--g3); }
.pb-box > .pb-kv:last-child > :nth-last-child(-n+2) { border-bottom: 0; }
/* 우수 등급 표시(고리 3개 — 한 화면 한 번) */
.gr { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.gr .lp-ic.wide { width: 30px; height: 14px; }
/* 공급사코드 명판 — 굵은 글자 + 아래 남색 줄(이니셜 네모 대신) */
.sp-plate { display: inline-block; font-weight: 800; color: var(--navy); letter-spacing: .02em; line-height: 1.15; padding-bottom: 3px; border-bottom: 2px solid var(--navy); }
/* 상자 하나(폼 옆 안내 등) */
.pb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* 쪽 나눔 */
body.site .pager { gap: 4px; margin-top: 30px; flex-wrap: wrap; }
body.site .pager a, body.site .pager span { min-width: 36px; height: 36px; border-radius: 0; font-weight: 600; color: var(--g2); border-color: var(--g4); }
body.site .pager a:hover { border-color: var(--g3); color: var(--g1); }
body.site .pager .on { background: var(--navy); border-color: var(--navy); color: #fff; }
body.site .pager .gap { border: 0; background: transparent; min-width: 18px; }
body.site .pager .pv { padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; }
/* 빈 상태 */
.pb-empty { background: #fff; border: 1px solid var(--g4); }
.pb-empty .empty-box { padding: 48px 20px; }
.pb-empty .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
/* 찾기 칸 — 각진 1px 선 + 오른쪽 «찾기» 글자 단추(돋보기 없음) */
.pb-search { display: flex; align-items: stretch; height: 36px; border: 1px solid var(--g4); border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.pb-search:focus-within { border-color: var(--blue); }
body.site main .pb-search input { border: 0; outline: 0; box-shadow: none; background: transparent; height: 100%; min-width: 0; width: 180px; font-size: 13px; padding: 0 10px; border-radius: 0; }
.pb-search .btn { height: 100%; border: 0; border-left: 1px solid var(--g4); border-radius: 0; background: var(--g6); color: var(--g1); font-weight: 700; }
.pb-search .btn:hover { background: var(--g5); }
/* ── 1. 상품 목록(카테고리·검색·베스트·신상품) ────────────────────────── */
.pb-lhead { display: flex; align-items: flex-end; gap: 18px; padding: 6px 0 14px; border-bottom: 2px solid var(--g1); }
.pb-lhead > div { flex: 1; min-width: 0; }
.pb-lhead h1 { font-size: 26px; font-weight: 800; letter-spacing: -.045em; margin: 0 0 4px; word-break: keep-all; }
.pb-lhead p { margin: 0; color: var(--g3); font-size: 13px; word-break: keep-all; }
.pb-lhead .cnt { text-align: right; flex: none; }
.pb-lhead .cnt small { display: block; font-size: 12px; color: var(--g2); font-weight: 600; }
.pb-lhead .cnt b { font-size: 26px; font-weight: 800; color: var(--g1); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pb-lhead .cnt b i { font-style: normal; font-size: 14px; color: var(--g2); margin-left: 2px; }
.subcats { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 2px; }
.subcats a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--g4); background: #fff;
font-size: 13px; font-weight: 600; color: var(--g1); white-space: nowrap; }
.subcats a:hover { border-color: var(--g3); color: var(--blue); }
.subcats a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.subcats .n { font-size: 12px; font-weight: 500; color: var(--g3); }
.subcats a.on .n { color: var(--sky); }
.pb-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 16px; }
.pb-tools .sp { flex: 1; }
.pb-total { font-size: 14px; color: var(--g2); white-space: nowrap; }
.pb-total b { color: var(--g1); font-weight: 800; font-size: 15px; }
.pb-tools .note-bar { padding: 7px 12px; font-size: 13px; }
/* ── 2. 공급사 목록 — 칸이 맞닿은 격자(위 2px 선 · 칸 사이 1px 선). 칸 전체를 누른다 ──
auto-fit: 공급사가 칸 수보다 적으면 있는 칸이 줄을 채운다(빈 칸 위로 2px 선만 지나가지 않게). 넓으면 3칸 */
.pb-sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); border-top: 2px solid var(--g1); border-left: 1px solid var(--g5); }
.pb-scard { display: flex; flex-direction: column; gap: 12px; background: #fff; border-right: 1px solid var(--g5); border-bottom: 1px solid var(--g5); padding: 20px; color: inherit; min-width: 0; }
.pb-scard:hover { background: var(--g6); }
.pb-scard:hover .sp-plate { color: var(--blue); border-color: var(--blue); }
.pb-scard .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; }
.pb-scard .top .sp-plate { font-size: 20px; }
.pb-scard .top small { font-size: 13px; font-weight: 700; color: var(--g2); white-space: nowrap; }
.pb-scard .desc { margin: 0; font-size: 13px; color: var(--g2); line-height: 1.55; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.pb-scard .mt { margin: auto 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--g5); } /* 설명 줄이 없는 칸도 숫자 줄은 아래에 맞춘다 */
.pb-scard .mt > div:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; } /* 값 있는 칸만 보이므로 홀수 개면 마지막 칸이 줄을 채운다 */
.pb-scard .mt > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--g5); min-width: 0; font-size: 13px; }
.pb-scard .mt > div:nth-child(odd) { padding-right: 12px; }
.pb-scard .mt > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--g5); }
.pb-scard .mt small { font-size: 12px; color: var(--g3); white-space: nowrap; }
.pb-scard .mt b { color: var(--g1); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── 3. 공급사관 ─────────────────────────────────────────────────────── */
.sp-card { background: #fff; border: 1px solid var(--g4); border-top: 2px solid var(--navy); }
.sp-top { display: flex; align-items: center; gap: 24px; padding: 22px 26px; }
.sp-info { flex: 1; min-width: 0; }
.sp-info h1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--g2); letter-spacing: -.02em; }
.sp-info h1 .sp-plate { font-size: 28px; letter-spacing: .02em; }
.sp-info .grade { margin-top: 10px; font-size: 13px; }
.sp-info .intro { margin: 8px 0 10px; color: var(--g2); font-size: 14px; word-break: keep-all; }
.sp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; font-size: 13px; color: var(--g3); }
.sp-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sp-meta span + span::before { content: ""; width: 1px; height: 11px; background: var(--g4); margin: 0 12px; }
.sp-meta b { color: var(--g1); font-weight: 700; }
.sp-acts { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.sp-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--g4); } /* 거래 지표 4 + 무료배송 기준 — 지표는 이 띠 한 곳에만 */
.sp-metrics > div { padding: 16px 18px; min-width: 0; }
.sp-metrics > div + div { border-left: 1px solid var(--g5); }
.sp-metrics small { display: block; font-size: 13px; color: var(--g2); font-weight: 600; }
.sp-metrics b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.04em; color: var(--g1); margin: 3px 0 1px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-metrics b.sm { font-size: 16px; line-height: 1.9; }
.sp-metrics .good b { color: var(--ok); } .sp-metrics .warn b { color: var(--warn); }
.sp-metrics .hint { display: block; font-size: 12px; color: var(--g3); word-break: keep-all; }
/* 공급사관 메뉴 — 밑줄 탭 */
.sp-tabs { display: flex; gap: 0; margin: 24px 0 22px; border-bottom: 1px solid var(--g4); overflow-x: auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tabs a { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 13px 18px 12px; font-size: 14px; font-weight: 600; color: var(--g2); white-space: nowrap; flex: none; }
.sp-tabs a:first-child { padding-left: 4px; }
.sp-tabs a:hover { color: var(--g1); }
.sp-tabs a.on { color: var(--g1); font-weight: 800; }
.sp-tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--navy); }
.sp-tabs .n { font-size: 12px; font-weight: 600; color: var(--g3); }
.sp-tabs a.on .n { color: var(--blue); }
.sp-tabs + .s-sec { margin-top: 0; } /* 공급사 홈 첫 구역(주요 카테고리)은 탭 바로 아래 */
/* 공급사 카테고리 — 칸이 맞닿은 격자(글자만) */
.sp-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid var(--g1); border-left: 1px solid var(--g5); }
.sp-cats a { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 13px; background: #fff; border-right: 1px solid var(--g5); border-bottom: 1px solid var(--g5); min-width: 0; }
.sp-cats a:hover { background: var(--g6); }
.sp-cats a:hover b { color: var(--blue); }
.sp-cats b { font-size: 14px; font-weight: 700; color: var(--g1); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cats small { font-size: 13px; color: var(--g3); }
.sp-sechead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-sechead .more { font-size: 13px; font-weight: 500; color: var(--g2); white-space: nowrap; }
.sp-sechead .more:hover { color: var(--blue); }
.sp-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; padding: 10px; background: var(--g6); border: 1px solid var(--g4); }
body.site main .sp-filter .in { height: 36px; width: auto; min-width: 150px; }
.sp-filter .pb-search { flex: 1; min-width: 200px; }
body.site main .sp-filter .pb-search input { width: 100%; }
.sp-info2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.pb-grid2.one, .sp-info2.one { grid-template-columns: minmax(0, 1fr); } /* 칸이 하나뿐이면 전체 폭(오른쪽 빈칸 없음) */
/* ── 4. 상품 상세(시안 C) — 바깥 상자 없이 사진 1px 선 · 가격 위 2px 선 · 아래는 표 구역 ─────────── */
.pd { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 44px; }
body.site .pd { background: transparent; border: 0; padding: 0 0 8px; }
.gal input { position: absolute; opacity: 0; pointer-events: none; }
.gal-main { aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--g5); overflow: hidden; display: grid; place-items: center; color: var(--g3); }
.gal-main img { display: none; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gal-main .noimg { font-size: 13px; color: var(--g3); }
.gal-thumbs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.gal-thumbs label { width: 62px; height: 62px; border: 1px solid var(--g5); overflow: hidden; cursor: pointer; background: #fff; }
.gal-thumbs label img { width: 100%; height: 100%; object-fit: cover; }
#g1:checked ~ .gal-main .g1, #g2:checked ~ .gal-main .g2, #g3:checked ~ .gal-main .g3, #g4:checked ~ .gal-main .g4,
#g5:checked ~ .gal-main .g5, #g6:checked ~ .gal-main .g6, #g7:checked ~ .gal-main .g7, #g8:checked ~ .gal-main .g8,
#g9:checked ~ .gal-main .g9, #g10:checked ~ .gal-main .g10 { display: block; }
#g1:checked ~ .gal-thumbs .t1, #g2:checked ~ .gal-thumbs .t2, #g3:checked ~ .gal-thumbs .t3, #g4:checked ~ .gal-thumbs .t4,
#g5:checked ~ .gal-thumbs .t5, #g6:checked ~ .gal-thumbs .t6, #g7:checked ~ .gal-thumbs .t7, #g8:checked ~ .gal-thumbs .t8,
#g9:checked ~ .gal-thumbs .t9, #g10:checked ~ .gal-thumbs .t10 { border-color: var(--navy); }
.gal input:focus-visible ~ .gal-thumbs { outline: 2px solid var(--blue-line); outline-offset: 4px; }
.adult-lock { text-align: center; padding: 24px; font-size: 13px; color: var(--g3); }
.adult-lock b { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--danger); color: var(--danger); font-size: 20px; }
.pd-sup { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--g2); }
.pd-sup .code { font-weight: 800; color: var(--navy); letter-spacing: .01em; }
.pd-sup .go { margin-left: auto; font-size: 13px; color: var(--g2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g4); }
.pd-sup .go:hover { color: var(--blue); }
.pd-info h1 { font-size: 26px; line-height: 1.32; margin: 10px 0 8px; word-break: keep-all; }
.pd-code { color: var(--g3); font-size: 13px; display: flex; gap: 4px 0; flex-wrap: wrap; align-items: center; }
.pd-code > span + span::before { content: ""; display: inline-block; width: 1px; height: 11px; background: var(--g4); margin: 0 9px; vertical-align: -1px; }
.pd-code b { color: var(--g2); font-weight: 600; }
.pd-code .tg { color: var(--blue); font-weight: 600; }
.pd-code .badge { margin: 0; }
.pd-price .lbl { font-size: 13px; color: var(--g2); font-weight: 600; }
.pd-price .big { font-size: 30px; font-weight: 800; color: var(--blue); letter-spacing: -.04em; line-height: 1.3; }
.pd-price .consumer { font-size: 13px; color: var(--g3); } .pd-price .consumer s { color: var(--g3); }
.pd-price .lockv { font-size: 26px; font-weight: 800; color: var(--blue); margin: 2px 0 4px; letter-spacing: -.04em; }
.pd-price p { margin: 0 0 12px; }
.pd-price .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pd-price .top .r { text-align: right; padding-top: 2px; line-height: 1.5; white-space: nowrap; }
.pd-kv { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); font-size: 13px; }
body.site .pd-kv { gap: 0; } /* 칸 사이 틈 없이 줄 선을 한 줄로 잇는다(띄움은 값 칸 왼쪽 여백) */
.pd-kv dt, .pd-kv dd { padding: 9px 0; border-bottom: 1px solid var(--g5); margin: 0; }
.pd-kv dt { color: var(--g3); }
.pd-kv dd { color: var(--g1); padding-left: 14px; }
.lock { color: var(--g3); font-weight: 500; } .lock b { color: var(--g2); font-weight: 600; }
.pd-buy { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; margin-top: 18px; }
.pd-buy .full { grid-column: 1 / -1; }
.pd-buy .go { grid-column: 1 / -1; }
.pd-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pd-actions form { margin: 0; display: contents; }
.pd-actions .btn { width: 100%; height: 40px; font-size: 13px; padding: 0 8px; }
.pd-login { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.site .pd-login .btn { height: 50px; font-size: 15px; font-weight: 700; }
.pd-login .btn:not(.primary) { background: var(--navy); border-color: var(--navy); color: #fff; }
.pd-login .btn:not(.primary):hover { background: var(--navy-2); }
.opt-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.opt-list li { font-size: 13px; padding: 5px 10px; border: 1px solid var(--g4); background: #fff; color: var(--g1); }
.opt-list li.off { color: var(--g3); text-decoration: line-through; }
.pd-tabs { position: sticky; top: 0; z-index: 4; background: #fff; display: flex; gap: 0; border-bottom: 1px solid var(--g4); margin: 30px 0 0; overflow-x: auto; }
.pd-tabs a { padding: 14px 18px; font-weight: 600; color: var(--g2); border-bottom: 3px solid transparent; white-space: nowrap; }
body.site .pd-tabs a:first-child { padding-left: 4px; }
.pd-lower { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 28px; align-items: start; }
.pd-main { min-width: 0; }
.pd-aside { position: sticky; top: 130px; display: grid; gap: 14px; margin-top: 28px; }
.pd-aside .pb-box > .hd small { font-size: 13px; color: var(--g2); font-weight: 600; }
.pd-aside .pb-box > .hd .sp-plate { font-size: 21px; }
.pd-aside .pb-kv { grid-template-columns: 84px minmax(0, 1fr); }
.pd-aside .pb-kv dt, .pd-aside .pb-kv dd { padding: 8px 12px; font-size: 13px; }
/* 상세 구역 — 상자 없이 제목 + 2px 선 + 내용 */
body.site .pd-sec { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 28px; scroll-margin-top: 110px; }
body.site .pd-sec + .pd-sec { margin-top: 44px; }
body.site .pd-sec h2 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.pd-sec h3 { font-size: 14px; font-weight: 700; margin: 22px 0 8px; }
.pd-desc { overflow-x: auto; line-height: 1.7; min-height: 150px; padding: 24px 20px; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.pd-desc img { margin: 0 auto; height: auto; }
.pd-desc .muted { margin: 0; }
table.kvt { width: 100%; border-collapse: collapse; font-size: 13px; border-top: 2px solid var(--g1); }
.kvt th { width: 170px; text-align: left; background: var(--g6); color: var(--g2); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--g5); vertical-align: top; word-break: keep-all; }
.kvt td { padding: 11px 14px; border-bottom: 1px solid var(--g5); color: var(--g1); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.kvt tr:last-child th, .kvt tr:last-child td { border-bottom-color: var(--g4); }
.pd-sec .empty { padding: 0 0 12px; text-align: left; color: var(--g3); font-size: 13px; background: none; }
/* ── 5. 셀러 혜택 · 입점 안내 · 대량견적 ───────────────────────────────── */
/* 기능 칸 — 칸이 맞닿은 3줄 격자, 칸 전체를 누른다(«→» 글자 없음) */
.pb-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--g1); border-left: 1px solid var(--g5); }
.pb-feat { display: flex; flex-direction: column; gap: 6px; background: #fff; border-right: 1px solid var(--g5); border-bottom: 1px solid var(--g5); padding: 20px 22px; color: inherit; min-width: 0; }
a.pb-feat:hover { background: var(--g6); }
a.pb-feat:hover h3 { color: var(--blue); }
/* 한 줄 안내(셀러 혜택 '아직 없는 것') — 상자 없이 아래 1px 선 */
.pb-oneline { margin: 0; padding: 14px 4px; border-bottom: 1px solid var(--g4); font-size: 13px; color: var(--g2); word-break: keep-all; }
.pb-oneline b { color: var(--g1); font-weight: 800; margin-right: 10px; }
.pb-feat h3 { font-size: 16px; font-weight: 800; letter-spacing: -.04em; word-break: keep-all; }
.pb-feat p { margin: 0; font-size: 13px; color: var(--g2); line-height: 1.7; word-break: keep-all; }
.pb-feat p b { color: var(--warn); }
/* 입점 단계 — 한 줄 표(5칸, 칸 사이 세로선). 번호는 글자 «1.» */
.pb-flow5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.pb-flow5 li { padding: 16px 18px 18px; min-width: 0; }
.pb-flow5 li + li { border-left: 1px solid var(--g5); }
.pb-flow5 b { display: block; font-size: 15px; font-weight: 800; color: var(--g1); margin-bottom: 6px; letter-spacing: -.03em; }
.pb-flow5 b span { color: var(--blue); margin-right: 3px; }
.pb-flow5 p { margin: 0; font-size: 13px; color: var(--g2); line-height: 1.65; word-break: keep-all; }
/* 정산 계산식 — 한 줄 표(칸 사이 세로선 · 기호는 좁은 칸) */
.pb-calc { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--g5); }
.pb-calc > div { padding: 14px; min-width: 0; }
.pb-calc > span { display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--g3); border-left: 1px solid var(--g5); border-right: 1px solid var(--g5); background: var(--g6); }
.pb-calc small { display: block; font-size: 12px; color: var(--g2); font-weight: 600; line-height: 1.45; word-break: keep-all; }
.pb-calc b { display: block; font-size: 20px; font-weight: 800; color: var(--g1); letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pb-calc .hl b { color: var(--blue); }
.pb-calc .hl2 b { color: var(--navy); }
.pb-box > .pb-calc + .pb-ul { padding: 14px; }
.pb-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.pb-two > * { min-width: 0; }
.pb-aside { position: sticky; top: 74px; display: grid; gap: 16px; }
.pb-lock { text-align: center; padding: 40px 24px; background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.pb-lock h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.pb-lock p { margin: 0 auto; color: var(--g2); font-size: 14px; max-width: 460px; word-break: keep-all; }
.pb-lock .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.pb-pinfo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--g6); border: 1px solid var(--g5); margin-bottom: 14px; font-size: 13px; word-break: keep-all; }
.pb-pinfo small { color: var(--g2); font-size: 12px; font-weight: 600; }
/* ── 6. 가입 ─────────────────────────────────────────────────────────── */
.pb-jhead { padding: 20px 0 0; border-top: 2px solid var(--g1); }
.pb-jhead h1 { font-size: 26px; font-weight: 800; letter-spacing: -.045em; margin: 0 0 6px; }
.pb-jhead h1 small { font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.pb-jhead p { margin: 0; color: var(--g2); font-size: 14px; max-width: 760px; word-break: keep-all; line-height: 1.7; }
.pb-jhead p a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 가입 머리 + 오른쪽 평면 그림(10/6) — 제목·설명 오른쪽 220×138, 단계 줄은 아래 전체 폭. 폰에서는 그림 숨김(양식이 먼저) */
.pb-jhead.has-art { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto 1fr auto; column-gap: 24px; }
.pb-jhead.has-art > h1, .pb-jhead.has-art > p { grid-column: 1; }
.pb-jhead.has-art > p { align-self: start; }
.pb-jhead.has-art > .pb-art { grid-column: 2; grid-row: 1 / span 2; width: 220px; align-self: end; }
.pb-jhead.has-art > .pb-stepline { grid-column: 1 / -1; }
.pb-jgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 22px; }
.pb-jgrid > form { min-width: 0; }
.pb-jgrid .form { gap: 0; }
.form-sec > h3 small { font-weight: 500; color: var(--g3); font-size: 13px; }
body.site .form-sec { padding: 20px 22px; border-color: var(--g4); }
body.site .form-sec > h3 { font-size: 16px; font-weight: 800; margin-bottom: 16px; flex-wrap: wrap; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .fgrid .full { grid-column: 1 / -1; }
body.site main .in { height: 42px; border-radius: var(--r-sm); border-color: var(--g4); }
body.site main textarea.in { height: auto; padding-top: 10px; padding-bottom: 10px; }
body.site main .field label { font-size: 13px; font-weight: 700; color: var(--g1); }
.req { color: var(--danger); margin-left: 3px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { display: inline-flex; gap: 8px; align-items: center; margin: 0; height: 38px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--g4); background: #fff;
font-weight: 600; font-size: 13px; color: var(--g1); cursor: pointer; }
.checks label:hover { border-color: var(--g3); }
.checks label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-d); }
.checks input, .agree input { width: 17px; height: 17px; accent-color: var(--blue); margin: 0; flex: none; }
/* 동의 줄 — 양식 구역 안이라 상자 없이 위 1px 옅은 선으로만 나눈다(구역 제목 바로 아래 첫 줄은 선 없음) */
.agree { padding: 12px 0 0; border-top: 1px solid var(--g5); }
.form-sec > h3 + .agree { padding-top: 0; border-top: 0; }
.agree + .agree { margin-top: 12px; }
.agree label { display: flex; gap: 10px; align-items: center; font-weight: 700; margin: 0; cursor: pointer; font-size: 14px; color: var(--g1); }
.agree .sum { font-size: 13px; color: var(--g2); margin: 6px 0 0 27px; line-height: 1.65; }
.agree .sum a { color: var(--blue); font-weight: 600; }
.pb-submit { margin-top: 20px; } /* 제출 줄 — 상자 없이 단추와 안내 글만 */
.pb-submit .btn { height: 52px; font-size: 16px; }
.pb-submit p { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--g2); }
.pb-submit p a { color: var(--blue); }
/* ── 7. 고객센터 · 공지 · 약관 ─────────────────────────────────────────── */
/* 도움 칸 3개 — 맞닿은 한 줄(칸 사이 세로선) */
.pb-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; background: #fff; border: 1px solid var(--g4); }
.pb-help > div { padding: 18px 20px; min-width: 0; }
.pb-help > div + div { border-left: 1px solid var(--g5); }
.pb-help h3 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.pb-help p { margin: 0 0 10px; font-size: 13px; color: var(--g2); line-height: 1.6; word-break: keep-all; }
.pb-help .row { gap: 6px; }
.pb-ntable td { padding: 13px 16px; }
.pb-ntable .ttl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pb-ntable .ttl .badge { flex: none; min-width: 30px; } /* «중요»·«안내» 폭을 맞춰 제목 시작선을 한 줄로 */
.pb-ntable .ttl a { font-weight: 500; color: var(--g1); }
.pb-ntable .ttl a:hover { color: var(--blue); }
.pb-ntable .dt { color: var(--g3); font-size: 13px; white-space: nowrap; text-align: right; width: 130px; }
/* 공지 글 — 게시판 글 보기(위 2px 선 · 머리 줄 · 본문) */
.pb-article { max-width: 920px; margin: 0 auto; background: #fff; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); }
.pb-article .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px 0; font-size: 13px; color: var(--g3); }
.pb-article .meta .badge { margin: 0; }
.pb-article h1 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; margin: 6px 0 0; padding: 0 20px 16px; border-bottom: 1px solid var(--g5); word-break: keep-all; }
.notice-body { white-space: pre-wrap; line-height: 1.85; color: var(--g1); word-break: break-word; font-size: 14px; padding: 24px 20px 30px; }
.pb-article-nav { max-width: 920px; margin: 16px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pb-docwrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.pb-toc { position: sticky; top: 74px; background: #fff; border: 1px solid var(--g4); border-top: 2px solid var(--g1); padding: 12px 10px; max-height: calc(100vh - 90px); overflow-y: auto; }
.pb-toc h3 { font-size: 13px; font-weight: 800; color: var(--g1); margin: 2px 6px 8px; }
.pb-toc a { display: block; padding: 6px 8px; font-size: 13px; color: var(--g2); word-break: keep-all; }
.pb-toc a:hover { background: var(--g6); color: var(--blue); }
.pb-toc a.grp { margin-top: 8px; padding-top: 9px; font-weight: 800; color: var(--g1); border-top: 1px solid var(--g5); }
.pb-toc a.grp:first-of-type { margin-top: 0; padding-top: 6px; border-top: 0; }
.pb-toc .sub { padding-left: 14px; font-size: 13px; color: var(--g3); }
.doc { background: #fff; border: 1px solid var(--g4); border-top: 2px solid var(--g1); padding: 28px 34px; min-width: 0; }
.doc .doc-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 23px; font-weight: 800; letter-spacing: -.04em; margin: 24px 0 4px; padding-top: 6px; scroll-margin-top: 80px; }
.doc .doc-h small { font-size: 13px; font-weight: 500; color: var(--g3); letter-spacing: -.02em; }
.doc .doc-h.sep { margin-top: 44px; padding-top: 30px; border-top: 2px solid var(--g1); }
.doc h2 { font-size: 16px; font-weight: 800; margin: 28px 0 8px; line-height: 1.4; scroll-margin-top: 80px; }
.doc h3 { font-size: 15px; margin: 18px 0 4px; }
.doc p, .doc li { color: var(--g1); font-size: 14px; line-height: 1.85; word-break: keep-all; }
.doc ol, .doc ul { padding-left: 22px; margin: 6px 0; }
.doc .tbox { margin: 10px 0; }
.doc .lead { font-size: 14px; color: var(--g2); }
/* ── 8. 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
.sp-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-flow5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-flow5 li + li { border-left: 0; } .pb-flow5 li:not(:nth-child(3n+1)) { border-left: 1px solid var(--g5); } .pb-flow5 li:nth-child(n+4) { border-top: 1px solid var(--g5); }
.pb-calc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pb-calc > span { display: none; }
.pb-calc > div { border-bottom: 1px solid var(--g5); } .pb-calc > div:not(:nth-of-type(3n+1)) { border-left: 1px solid var(--g5); }
.pd-lower { grid-template-columns: 1fr; } .pd-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.pd { grid-template-columns: minmax(0, 1fr); gap: 24px; } body.site .pd { gap: 24px; } .pd > * { min-width: 0; }
.pb-hero { grid-template-columns: 1fr; }
.pb-hero.has-art { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; } .pb-hero > .pb-art { width: 240px; }
.pb-stat { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--g5); }
.pb-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-steps4 li:nth-child(odd) { border-left: 0; } .pb-steps4 li:nth-child(n+3) { border-top: 1px solid var(--g5); }
.pb-mk { grid-template-columns: 1fr; } .pb-mk-g + .pb-mk-g { border-left: 0; border-top: 1px solid var(--g5); }
.pb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-two, .pb-jgrid { grid-template-columns: 1fr; } .pb-aside { position: static; }
.pb-docwrap { grid-template-columns: 1fr; } .pb-toc { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.pb-toc h3 { flex-basis: 100%; } .pb-toc .sub { display: none; } .pb-toc a.grp { margin-top: 0; padding-top: 6px; border-top: 0; }
}
@media (max-width: 860px) {
.pb-crumb { padding: 12px 0 10px; font-size: 12px; }
.pb-hero { padding: 20px 16px; gap: 16px; } .pb-hero h1 { font-size: 22px; }
.pb-hero p { font-size: 14px; } .pb-acts { margin-top: 14px; } .pb-acts .btn { flex: 1 1 auto; }
.pb-hero.has-art { grid-template-columns: minmax(0, 1fr); } .pb-hero > .pb-art { width: 220px; justify-self: center; }
.pb-art.ph-hide, .pb-jhead > .pb-art, .s-sec.pb-sec .pb-sec-art { display: none; }
.pb-jhead.has-art { display: block; }
.pb-hero .pb-stepline li:first-child { padding-left: 12px; }
.pb-terms { grid-template-columns: minmax(0, 1fr); }
.pb-terms > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.pb-terms > div + div { border-left: 0; border-top: 1px solid var(--g5); }
.pb-terms b { margin-top: 0; font-size: 18px; }
.pb-mk ul { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-mk li { min-height: 60px; } .pb-mk li + li { border-left: 0; }
.pb-mk li:nth-child(even) { border-left: 1px solid var(--g5); } .pb-mk li:nth-child(n+3) { border-top: 1px solid var(--g5); }
.pb-mk img { height: 22px; max-width: 96px; } .pb-mk li b { font-size: 14px; }
.pb-steps4 { grid-template-columns: minmax(0, 1fr); }
.pb-steps4 li { padding: 13px 4px 14px; } .pb-steps4 li:nth-child(n) { border-left: 0; } .pb-steps4 li + li { border-top: 1px solid var(--g5); }
.pb-stat b { font-size: 24px; }
.pb-lhead { gap: 12px; flex-wrap: wrap; align-items: flex-start; } .pb-lhead h1 { font-size: 22px; }
.pb-lhead .cnt { text-align: left; } .pb-lhead .cnt b { font-size: 20px; }
.subcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .subcats::-webkit-scrollbar { display: none; }
.pb-tools .sp { display: none; } .pb-tools .note-bar { flex-basis: 100%; }
.pb-sgrid, .pb-feats, .pb-grid2, .sp-info2 { grid-template-columns: 1fr; }
.pb-help { grid-template-columns: 1fr; } .pb-help > div + div { border-left: 0; border-top: 1px solid var(--g5); }
.pb-search { flex: 1; } body.site main .pb-search input { width: 100%; }
.pb-tools .pb-search { flex-basis: 220px; } /* 등급 탭 옆에 끼어 찌그러지지 않게 — 좁으면 다음 줄 전체 폭 */
.pb-kv { grid-template-columns: 112px minmax(0, 1fr); } .pb-kv dt, .pb-kv dd { padding: 9px 10px; }
.sp-top { flex-direction: column; align-items: flex-start; padding: 18px 16px; gap: 14px; }
.sp-info h1 .sp-plate { font-size: 23px; }
.sp-meta { column-gap: 14px; } .sp-meta span + span::before { display: none; } /* 줄이 바뀌면 둘째 줄이 세로선으로 시작하지 않게 */
.sp-acts { width: 100%; } .sp-acts .btn { flex: 1; }
.sp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-metrics > div { padding: 12px 14px; } .sp-metrics b { font-size: 20px; }
.sp-metrics > div:nth-child(n) { border-left: 0; border-top: 1px solid var(--g5); } .sp-metrics > div:nth-child(-n+2) { border-top: 0; }
.sp-metrics > div:nth-child(2n) { border-left: 1px solid var(--g5); }
.sp-metrics > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sp-tabs { margin: 18px 0; } .sp-tabs a { padding: 12px 12px 11px; font-size: 14px; }
.sp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-cats a { padding: 12px; }
body.site main .sp-filter .in { flex: 1 1 140px; min-width: 0; }
.sp-info2 { gap: 28px; margin-top: 32px; }
.pd-info h1, body.site .pd-info h1 { font-size: 21px; } .pd-buy { grid-template-columns: 1fr; }
.pd-login { grid-template-columns: 1fr; } body.site .pd-price .big { font-size: 28px; }
body.site .pd-buy .go .btn { height: 50px; font-size: 15px; } .pd-tabs a, body.site .pd-tabs a { padding: 12px 10px; font-size: 14px; }
.pd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-aside { grid-template-columns: 1fr; }
.pd-desc { padding: 18px 4px; } .kvt th { width: 116px; padding: 10px; } .kvt td { padding: 10px; }
.pb-flow5 { grid-template-columns: 1fr; } .pb-flow5 li { padding: 13px 4px 14px; }
.pb-flow5 li:not(:nth-child(3n+1)), .pb-flow5 li + li { border-left: 0; } .pb-flow5 li + li { border-top: 1px solid var(--g5); }
.pb-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-calc > div:not(:nth-of-type(3n+1)) { border-left: 0; } .pb-calc > div:nth-of-type(even) { border-left: 1px solid var(--g5); }
.pb-calc > div:last-of-type { grid-column: 1 / -1; border-left: 0; } .pb-calc b { font-size: 18px; }
.pb-cta { flex-direction: column; align-items: flex-start; padding: 22px 18px; gap: 14px; } .pb-cta .acts, .pb-cta .acts .btn { width: 100%; }
.pb-jhead h1 { font-size: 22px; } .pb-jhead p { font-size: 14px; }
.pb-stepline { grid-auto-flow: row; grid-auto-columns: auto; } .pb-stepline li + li { border-left: 0; border-top: 1px solid var(--g5); }
.pb-stepline li { padding: 9px 12px; } .pb-stepline li.on::before { right: auto; bottom: -1px; width: 3px; height: auto; }
.fgrid { grid-template-columns: 1fr; }
body.site .form-sec { padding: 18px 14px; }
.doc { padding: 20px 16px; } .pb-article h1 { font-size: 19px; }
.doc .doc-h { font-size: 20px; }
.pb-ntable .dt { width: auto; }
}
/* 10/6 가입 화면 «준비할 것» 상자 아래 준비물 안내 링크(/guide/seller · /guide/partner) */
.pb-box-more { margin: 12px 0 0; font-size: 13px; }
.pb-box-more a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }