/* =====================================================================
   SELLLOOP B2B 공개몰 공통 틀 — 10/4 디자인 C+B(대표님 «추천대로 진행»)
   자리(배치)는 10/3 대표님 «온채널처럼 배너·팝업·사이드 배너» 그대로: 큰 슬라이드 · 오른쪽 배너 3장 · 좌우 날개 · 팝업(오늘 하루 보지 않기).
   모양은 시안 C «한국 도매몰 정석형»(docs/디자인_시안_1004/C_kmall): 단색 · 1px 선 · 각진 모서리 · 그림자 없음 · 장난감 그림 없음.
   ★sellloop.css 다음에 읽는다(공개몰 부분만 덮어씀). 색·모서리 변수는 sellloop.css :root. 기준 문서 docs/디자인_기준_v2.md.
   ===================================================================== */
/* 글꼴 Pretendard 는 sellloop.css 맨 위(@font-face) — 모든 화면 공통 */

:root {
  /* 공개몰 화면 CSS 가 쓰는 이름 → sellloop.css 색표로(보라·그림자 없음) */
  --s-blue: var(--blue); --s-blue-2: var(--blue-d); --s-violet: var(--navy); --s-ink: var(--g1); --s-text: var(--g1); --s-sub: var(--g3);
  --s-line: var(--g5); --s-band: var(--g6); --s-red: var(--danger); --s-green: var(--ok); --s-shadow: none;
  --s-w: 1200px;
}
body.site { background: #fff; font-family: Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; color: var(--g1); letter-spacing: -.012em; }
body.site .wrap { max-width: calc(var(--s-w) + 32px); padding: 0 16px; }
body.site h1, body.site h2, body.site h3 { color: var(--g1); letter-spacing: -.045em; }

/* ── 맨 위 띠 ─────────────────────────────────────────────── */
.s-top { border-bottom: 1px solid var(--g5); font-size: 12px; color: var(--g2); background: #fff; }
.s-top .wrap { display: flex; align-items: center; height: 34px; gap: 14px; }
.s-top a:hover { color: var(--blue); }
.s-top .l { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.s-top .l a + a::before, .s-top .r a + a::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--g4); margin: 0 10px 0 0; vertical-align: middle; }
.s-top .r { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.s-top .r .new { color: var(--blue); font-weight: 700; }
.s-roll { position: relative; height: 20px; overflow: hidden; flex: 1; min-width: 0; }
.s-roll > * { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-roll > *:first-child { opacity: 1; transform: none; }                 /* 스크립트 없으면 첫 줄만 */
.s-roll.js > * { opacity: 0; transform: translateY(8px); } .s-roll.js > .on { opacity: 1; transform: none; }
.s-roll .tag { font-size: 12px; font-weight: 700; color: var(--danger); background: none; padding: 0; }
/* 로그인 줄(10/5 대표님 «첫 페이지에 셀러 로그인/공급사 로그인 딱 구분 · 메인에서도 로그아웃») — _parts/public.html · web/deps.site_logins
   로그인 전 = [셀러 로그인] 남색 단추 + [공급사 로그인] 남색 테두리 단추 나란히(모서리 4px · 그림자 없음).
   로그인 뒤 = 포털마다 한 묶음(.s-acct): 이름 · 센터 · 로그아웃(글자 단추). 둘 다 로그인하면 두 묶음(.both). 칸 사이는 위 띠와 같은 1px 세로선. */
.s-top .s-login { display: flex; align-items: center; gap: 6px; margin: 0 4px; }
.s-top .r .s-login a::before { content: none; }
.s-top .s-login a { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--navy); border-radius: var(--r-sm); background: #fff; color: var(--navy); font-weight: 700; }
.s-top .s-login a:hover { background: var(--g6); color: var(--navy); }
.s-top .s-login a.sl-seller { background: var(--navy); color: #fff; }
.s-top .s-login a.sl-seller:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.s-top .s-acct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s-top .s-acct .nm { display: inline-flex; align-items: baseline; gap: 3px; min-width: 0; color: var(--g2); }
.s-top .s-acct .nm b { color: var(--g1); font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }   /* 긴 상호는 이름만 줄이고 '님(셀러)'는 남긴다 */
.s-top .s-acct > a { color: var(--g1); font-weight: 700; }
.s-top .s-acct form { display: flex; align-items: center; margin: 0; }
.s-top .s-acct button { border: 0; background: none; padding: 0; font: inherit; color: var(--g2); cursor: pointer; }
.s-top .s-acct button:hover { color: var(--blue); }
.s-top .r > .s-acct::before, .s-top .r > .s-acct + a::before, .s-top .s-acct > a::before, .s-top .s-acct > form::before {
  content: ""; display: inline-block; flex: none; width: 1px; height: 10px; background: var(--g4); margin: 0 10px 0 0; vertical-align: middle; }
.s-top .r > .s-acct::before { margin-right: 0; }                     /* 묶음 앞 세로선은 칸 사이 간격(gap)이 띄운다 */
.s-top .r .s-other { color: var(--navy); font-weight: 700; }          /* 한쪽만 로그인: 다른 쪽 로그인 글자 링크(셀러만 → 공급사 로그인 · 공급사만 → 셀러 로그인) */
@media (max-width: 1180px) {                                          /* 셀러·공급사 둘 다 로그인한 좁은 PC: 왼쪽 글·오늘의 신상품을 접어 한 줄에 */
  .s-top.both .l, .s-top.both .r .new { display: none; }
  .s-top.both .r > .new + .s-acct::before { display: none; }
  .s-top.both .s-acct .nm b { max-width: 100px; }
}
@media (max-width: 860px) {                                           /* 폰: 넘치지 않게(가로 스크롤 0) — 오늘의 신상품·고객센터는 메뉴 줄·바닥에 있음 */
  .s-top .r { gap: 8px; min-width: 0; }
  .s-top .r .new, .s-top .r .cs { display: none; }
  .s-top .r > .new + .s-acct::before { display: none; }
  .s-top .s-login { margin: 0; }
  .s-top .s-acct { gap: 8px; }
  .s-top .s-acct .nm b { max-width: 84px; }
  .s-top.both .s-acct .nm, .s-top.both .s-acct > a::before { display: none; }   /* 둘 다 로그인: 이름을 접고 '셀러 센터 | 셀러 로그아웃 | 공급사 센터 | 공급사 로그아웃' */
  .s-top .s-acct ~ .pg { display: none; }                             /* 로그인한 폰: «공급사 입점»은 바닥 «공급사 입점 안내»로 — 다른 쪽 로그인 자리 */
}
@media (max-width: 330px) {                                           /* 아주 좁은 폰(갤럭시 폴드 접은 화면 280px 등) — 10/5 실측: 윗줄이 288px 넘으면 끝 글자가 잘렸다 */
  .s-top .r .pg { display: none; }                                    /* 로그인 전 '공급사 입점'도 바닥으로(윗줄 288 → 215px) */
  .s-top .s-acct .nm, .s-top .s-acct > a::before { display: none; }   /* 한쪽만 로그인: 이름도 접는다('셀러 센터 | 로그아웃 | 공급사 로그인') */
  .s-top.both .s-acct .lo { display: none; }                          /* 둘 다 로그인: '셀러 '·'공급사 ' 앞말을 접는다(센터 글자 바로 뒤라 구분됨) */
}

/* ── 머리(로고·검색·바로가기 4개) ───────────────────────────────── */
.s-head .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 36px; height: 104px; }
.s-logo img { height: 34px; width: auto; }
.s-logo em { display: block; font-style: normal; font-size: 12px; color: var(--g3); margin-top: 4px; white-space: nowrap; letter-spacing: -.04em; }
.s-search { max-width: 520px; width: 100%; }
.s-search form { display: flex; align-items: stretch; height: 46px; border: 2px solid var(--blue); border-radius: 0; padding: 0; background: #fff; }
.s-search .scope { display: flex; align-items: center; font-weight: 700; font-size: 13px; padding: 0 14px; color: var(--g1); white-space: nowrap; }
.s-search .bar { width: 1px; background: var(--g5); }
.s-search input { flex: 1; border: 0; outline: 0; height: 100%; padding: 0 12px; font-size: 14px; background: transparent; min-width: 0; }
.s-search input::placeholder { color: #9AA0AA; }
.s-search button { flex: none; width: 76px; border: 0; border-radius: 0; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.s-search button:hover { background: var(--blue-d); }
.s-sub { display: flex; align-items: center; gap: 12px; margin-top: 7px; font-size: 12px; }      /* 검색창 아래 줄: 태그 · 오른쪽 '등록 상품 N개'(시안 C) */
.s-sub:empty { display: none; }
.s-tags { display: flex; gap: 12px; padding-left: 2px; font-size: 12px; color: var(--g3); flex-wrap: wrap; }
.s-tags a:hover { color: var(--blue); }
.s-count { margin: 0 0 0 auto; color: var(--g2); white-space: nowrap; }
.s-count b { color: var(--g1); font-weight: 800; }

/* 머리 오른쪽 바로가기(마이페이지·주문관리·관심상품·장바구니) — 셀루프 면 아이콘(ic.mark) */
.s-icons { justify-self: end; display: flex; gap: 22px; }
.s-icons a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--g2); position: relative; white-space: nowrap; }
.s-icons .lp-ic { width: 22px; height: 22px; }
.s-icons a:hover { color: var(--blue); }
.s-icons .cart-n { position: absolute; right: -8px; top: -6px; min-width: 18px; height: 18px; border-radius: 0; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }

/* ── 메뉴 줄 — 아래 2px 남색 줄 · 전체 카테고리 = 파랑 단색 칸 ─────────────── */
.s-gnb { border-top: 1px solid var(--g5); border-bottom: 2px solid var(--navy); background: #fff; position: sticky; top: 0; z-index: 30; }
.s-gnb .wrap { display: flex; align-items: center; height: 50px; gap: 0; }
.s-gnb .allcat { display: flex; align-items: center; gap: 9px; width: 190px; height: 50px; padding: 0 18px; border-radius: 0; background: var(--blue); color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; --icl: #fff; --icl2: #BFD0F7; }
.s-gnb .allcat .lp-ic { width: 17px; height: 17px; }
.s-gnb .allcat:hover { background: var(--blue-d); }
.s-gnb nav { display: flex; align-items: center; height: 100%; margin-left: 14px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.s-gnb nav::-webkit-scrollbar { display: none; }
.s-gnb nav a { position: relative; display: flex; align-items: center; height: 100%; padding: 0 16px; font-weight: 700; font-size: 15px; color: var(--g1); white-space: nowrap; }
.s-gnb nav a:hover, .s-gnb nav a.on { color: var(--blue); }
.s-gnb nav a.sub { font-weight: 500; font-size: 14px; color: var(--g2); }
.s-gnb nav a.sub:hover, .s-gnb nav a.sub.on { color: var(--blue); }
.s-gnb nav a:not(.sub) + a.sub { margin-left: 13px; }
.s-gnb nav a:not(.sub) + a.sub::before { content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--g4); }
.s-gnb .quote { margin-left: auto; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--blue); color: var(--blue); border-radius: var(--r-sm); font-weight: 600; font-size: 13px; white-space: nowrap; background: #fff; }
.s-gnb .quote:hover { background: var(--blue-soft); }

/* ── 배너 색 — 10/5 디자인 (나): 배너마다 바탕 1색 + 강조 1색(--bn-ac, 큰 슬라이드 제목 마지막 줄). 단색만(그라데이션·보라 없음).
   키 이름은 DB 값이라 그대로, 색을 키 뜻대로(관리자 이름 services/banners.THEMES · 기준 docs/디자인_기준_v2.md 6절).
   blue 파랑 · navy 남색 = 흰 글자 / sky 하늘 · mint 민트 · coral 코랄 · pink 연분홍 · lemon 노랑 · white 흰색 = 남색 글자(.dark) */
.bn-th-blue  { background: #2563EB; --bn-bg: #2563EB; --bn-ac: #FFFFFF; }   /* --bn-bg = 상품 사진 칸 테두리(겹친 사진 사이 틈을 바탕색으로) */
.bn-th-sky   { background: #E3F0FF; --bn-bg: #E3F0FF; --bn-ac: #2563EB; }
.bn-th-navy  { background: #0F1F45; --bn-bg: #0F1F45; --bn-ac: #FFD84A; }
.bn-th-mint  { background: #DDF4EC; --bn-bg: #DDF4EC; --bn-ac: #0B7A55; }
.bn-th-coral { background: #FFE6DD; --bn-bg: #FFE6DD; --bn-ac: #E8562F; }
.bn-th-pink  { background: #FCE8EE; --bn-bg: #FCE8EE; --bn-ac: #C2416B; }
.bn-th-lemon { background: #FFD84A; --bn-bg: #FFD84A; --bn-ac: #0F1F45; }
.bn-th-white { background: #fff; border: 1px solid var(--g4); --bn-bg: #fff; --bn-ac: #2563EB; }
[class*="bn-th-"] { color: #fff; }
[class*="bn-th-"].dark { color: var(--navy); }
.bn-badge { display: none; }          /* 제목 위 알약 없음 — 큰 슬라이드의 «꼬리표»는 아래 탭 이름으로만 쓴다 */

/* 메인 큰 슬라이드 — 위: 그림 칸 · 아래: 탭 줄(꼬리표 이름) */
.s-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-top: 18px; }
.s-hero.solo { grid-template-columns: 1fr; }
.bn-slider { position: relative; height: 388px; overflow: hidden; background: var(--blue); }
.bn-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.bn-slider.has-tabs .bn-stage { bottom: 42px; }
.bn-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 52px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.bn-slide.on { opacity: 1; visibility: visible; }
.bn-copy { position: relative; z-index: 2; max-width: 440px; display: flex; flex-direction: column; align-items: flex-start; }
.bn-title { font-size: 38px; line-height: 1.22; font-weight: 800; letter-spacing: -.05em; word-break: keep-all; }
.bn-title .bn-t1 { font-weight: 500; }                                            /* 두 줄 제목: 앞줄 가는 글자 */
.bn-title .bn-t2 { font-style: normal; font-weight: 800; color: var(--bn-ac, inherit); }   /* 마지막 줄 굵은 강조색 */
.bn-sub { margin: 14px 0 0; font-size: 15px; opacity: .9; line-height: 1.55; word-break: keep-all; }
.bn-btn { display: inline-flex; align-items: center; margin-top: 26px; height: 46px; padding: 0 22px; border-radius: 0; background: #fff; color: var(--navy); font-weight: 700; font-size: 15px; }
.dark .bn-btn { background: var(--navy); color: #fff; }
.bn-slide:hover .bn-btn { text-decoration: underline; text-underline-offset: 3px; }
.bn-art { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 400px; height: 312px; object-fit: contain; z-index: 1; }
/* 기본 그림 자리 = 판매 중 상품 사진 — 흰 둥근 칸(모서리 12px). 흰 바탕 사진이라 누끼 없이도 상품만 떠 보인다(그림자 없음).
   ★10/5 검사 뒤: 칸끼리·그림과 사진이 서로 덮지 않는다(사이는 배너 바탕색). 그림이 없는 장 = 큰 1장 + 오른쪽 작은 2장 모음(가운데),
   그림이 있는 장 = 위에 그림 + 아래 사진 3장 한 줄(같은 폭). 두 모양 모두 오른쪽 칸 폭 안(약 290px)이라 넘길 때 크기가 크게 튀지 않는다. */
.bn-photos { position: absolute; right: 48px; top: 50%; margin-top: -96px; width: 292px; height: 192px; z-index: 1; }   /* 그림 칸(조절 칸 위) 가운데 */
.bn-photos img { position: absolute; box-sizing: border-box; padding: 8px; background: #fff; border-radius: 12px; object-fit: contain; }
.bn-th-white .bn-photos img { border: 1px solid var(--g4); }                                                 /* 흰 바탕 배너: 칸을 1px 선으로 */
.bn-photos .p1 { left: 0; top: 0; width: 192px; height: 192px; }
.bn-photos .p2 { left: 200px; top: 0; width: 92px; height: 92px; }
.bn-photos .p3 { left: 200px; top: 100px; width: 92px; height: 92px; }
@media (min-width: 1300px) {                                                  /* 넓은 화면: 글 칸(440px) 오른쪽이 넉넉해 모음을 조금 크게 */
  .bn-photos { width: 328px; height: 216px; margin-top: -108px; }
  .bn-photos .p1 { width: 216px; height: 216px; }
  .bn-photos .p2, .bn-photos .p3 { left: 224px; width: 104px; height: 104px; } .bn-photos .p3 { top: 112px; }
}
/* 서비스 안내 평면 그림(static/img/illust/*.svg, 320×200 · 글자 없음) — 사진이 없으면 오른쪽 가운데에 크게 */
.bn-slide .bn-il { position: absolute; right: 40px; top: 50%; margin-top: -100px; width: 320px; height: 200px; object-fit: contain; z-index: 1; }
@media (min-width: 861px) {
  .bn-slide.has-il.has-ph .bn-il { top: 16px; margin-top: 0; width: 276px; height: 172px; }                 /* 그림 16~188px */
  .bn-slide.has-il .bn-photos { top: 200px; margin-top: 0; right: 40px; width: 276px; height: 84px; }       /* 사진 200~284px · 조절 칸(300px~) 위 */
  .bn-slide.has-il .bn-photos img { top: 0; width: 84px; height: 84px; padding: 6px; }
  .bn-slide.has-il .bn-photos .p1 { left: 0; } .bn-slide.has-il .bn-photos .p2 { left: 96px; } .bn-slide.has-il .bn-photos .p3 { left: 192px; }
}
.bn-ctrl { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; height: 30px; background: rgba(15, 31, 69, .72); color: #fff; font-size: 12.5px; }
.bn-ctrl .bn-count { padding: 0 10px; } .bn-ctrl b { font-weight: 800; }
.bn-ctrl button { width: 30px; height: 30px; border: 0; border-left: 1px solid rgba(255, 255, 255, .18); border-radius: 0; background: transparent; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.bn-ctrl button:hover { background: rgba(255, 255, 255, .14); }
.bn-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--g4); border-top: 0; }
.bn-tabs button { position: relative; border: 0; border-radius: 0; background: transparent; padding: 0 6px; font-size: 13px; color: var(--g2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-tabs button + button { border-left: 1px solid var(--g5); }
.bn-tabs button:hover { color: var(--g1); }
.bn-tabs button.on { color: var(--g1); font-weight: 700; }
.bn-tabs button.on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--navy); }

/* 오른쪽 작은 배너(세로 3장) */
.bn-sides { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; height: 388px; }
.bn-side { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; overflow: hidden; min-width: 0; }
.bn-side strong { display: block; margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -.045em; word-break: keep-all; text-wrap: balance; }
.bn-side p { margin: 0; font-size: 12.5px; opacity: .85; word-break: keep-all; text-wrap: balance; }   /* 한 낱말만 다음 줄로 떨어지지 않게 */
.bn-side img { width: 72px; height: 56px; object-fit: contain; flex: none; }
.bn-side .bn-photos { position: static; display: block; flex: none; width: auto; height: auto; margin: 0; }    /* 상품 사진 1장 — 흰 둥근 칸(12px), 겹침 없음 */
.bn-side .bn-photos img { position: static; display: block; width: 72px; height: 72px; padding: 6px; border-radius: 12px; background: #fff; object-fit: contain; }
a.bn-side:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* 가로 띠 */
.bn-strip { position: relative; display: flex; align-items: center; gap: 24px; margin: 40px 0 8px; padding: 22px 30px; border-radius: 0; overflow: hidden; min-height: 110px; }
.bn-strip .bn-copy { gap: 6px; max-width: none; flex: 1; }
.bn-strip strong { font-size: 22px; font-weight: 800; letter-spacing: -.045em; word-break: keep-all; }
.bn-strip p { margin: 0; opacity: .88; font-size: 13.5px; }
.bn-strip img { width: 140px; height: 100px; object-fit: contain; }
.bn-strip img.bn-il { flex: none; width: 176px; height: 110px; margin: -12px 0; }          /* 평면 그림(320×200) — 띠 높이는 그대로 */
.bn-strip .bn-btn { margin: 0; height: 42px; flex: none; }

/* 좌우 날개(넓은 화면만) */
.s-wing { position: fixed; top: 236px; width: 92px; z-index: 20; display: none; flex-direction: column; gap: 8px; }
.s-wing.l { left: calc(50% - (var(--s-w) / 2) - 104px); }
.s-wing.r { right: calc(50% - (var(--s-w) / 2) - 104px); }
@media (min-width: 1430px) { .s-wing { display: flex; } }            /* 본문 1200 + 양쪽 날개 92+12 */
.bn-wing { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 14px 11px 15px; border-radius: 0; font-size: 12px; line-height: 1.45; }
.bn-wing img { width: 100%; height: 50px; object-fit: contain; margin-bottom: 6px; }
.bn-wing strong { font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -.045em; word-break: keep-all; }
.bn-wing p { margin: 0; font-size: 12px; opacity: .88; line-height: 1.45; word-break: keep-all; }
a.bn-wing:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* 빠른 메뉴(오른쪽 날개 아래) */
.s-quick { background: #fff; border: 1px solid var(--g4); text-align: center; }
.s-quick > div, .s-quick > a { display: block; padding: 9px 6px; border-bottom: 1px solid var(--g5); font-size: 12px; font-weight: 600; color: var(--g2); }
.s-quick > a { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.s-quick > a:hover { color: var(--blue); }
.s-quick > :last-child { border-bottom: 0; }
.s-quick > a.top { background: var(--navy); color: #fff; font-weight: 700; --icl: #fff; --icl2: var(--sky); }
.s-quick .lp-ic { width: 18px; height: 18px; }
.s-quick .rc { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; color: var(--g1); }
.s-quick .rc a { width: 62px; height: 62px; border: 1px solid var(--g5); overflow: hidden; display: grid; place-items: center; font-size: 11px; color: var(--g3); background: #fff; }
.s-quick .rc img { width: 100%; height: 100%; object-fit: cover; }
.s-quick .rc small { font-weight: 400; color: var(--g3); }

/* 팝업 — 각진 1겹 상자 · 아래 «오늘 하루 보지 않기 | 닫기»
   10/5 대표님 «셀루프 자동화프로그램 안내 팝업»: 최대 3장(.bn-pops 묶음 — _parts/banners.html popup). 자리는 그대로 오른쪽 아래 한 곳,
   PC·폰 모두 한 번에 한 장 — 아직 안 닫은 첫 장만 보이고, 닫으면(hidden) 다음 장이 그 자리에 뜬다(site.js 는 장마다 hidden 만 바꿈).
   10/5 검사: 왼쪽으로 나란히 놓으니 PC 에서 큰 배너 글·카테고리 줄·공지사항란을 덮었다(1장일 때의 옛 가림을 넘지 않게 한 장씩). */
.bn-pops { position: fixed; right: 24px; bottom: 24px; z-index: 60; }
.bn-pops > .bn-pop:not([hidden]) ~ .bn-pop { display: none; }
.bn-pop { position: relative; width: 340px; overflow: hidden; background: #fff; border: 1px solid var(--g3); border-radius: 0; }
.bn-pop[hidden] { display: none; }
.bn-pop-art { position: relative; min-height: 176px; padding: 22px 22px 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; overflow: hidden; }
.bn-pop-art strong { position: relative; z-index: 2; font-size: 23px; font-weight: 800; line-height: 1.25; letter-spacing: -.045em; max-width: 190px; word-break: keep-all; }
.bn-pop-art img { position: absolute; right: 48px; top: 14px; width: 120px; height: 94px; object-fit: contain; z-index: 1; }
.bn-pop-art.noart { min-height: 0; padding: 26px 48px 20px 22px; }      /* 그림 없는 팝업 — 제목 칸만(빈 색 면 없이) */
.bn-pop-art.noart strong { max-width: none; }
.bn-pop-x { position: absolute; right: 0; top: 0; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 0; background: rgba(15, 31, 69, .55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.bn-pop-body { padding: 16px 20px 14px; }
.bn-pop-body p { margin: 0 0 14px; font-size: 13.5px; color: var(--g2); line-height: 1.6; word-break: keep-all; }
.bn-pop-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }   /* 설명 «|» 줄 — 앞 4px 남색 네모(공개 안내 .pb-ul 과 같은 표) */
.bn-pop-list li { position: relative; padding-left: 12px; font-size: 13.5px; color: var(--g2); line-height: 1.5; word-break: keep-all; }
.bn-pop-list li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 4px; height: 4px; background: var(--navy); }
.bn-pop-cta { display: grid; place-items: center; height: 46px; border-radius: 0; background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; }
.bn-pop-cta:hover { background: var(--navy-2); }
.bn-pop-foot { display: flex; border-top: 1px solid var(--g5); }
.bn-pop-foot button { flex: 1; border: 0; background: none; font-size: 12.5px; color: var(--g2); cursor: pointer; padding: 10px 0; }
.bn-pop-foot button + button { border-left: 1px solid var(--g5); }
.bn-pop-foot button:hover { color: var(--g1); background: var(--g6); }

/* ── 본문 칸 ─────────────────────────────────────────────── */
/* 상품 숫자 띠 — 칸 없는 한 줄, 칸 사이 세로선(아이콘 칸 없음) */
.s-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border: 1px solid var(--g4); background: #fff; }
.s-stats > div { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.s-stats > div + div { border-left: 1px solid var(--g5); }
.s-stats .ic { display: none; }
.s-stats small { display: block; font-size: 12.5px; font-weight: 600; color: var(--g2); }
.s-stats b { font-size: 24px; font-weight: 800; color: var(--g1); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.s-stats b i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--g2); margin-left: 2px; }
.s-stats .note { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--g5); padding: 8px 20px; font-size: 12px; color: var(--g3); }

/* 카테고리 줄 — 위 2px 선 + 칸 사이 1px 선. 아이콘은 상품 사진이 없을 때만 셀루프 분류 아이콘(ic.cat) */
/* 10/6: 판매중 0개 묶음은 숨겨 칸 수가 바뀐다 — PC 칸 수 = 보이는 아이콘 + '전체 보기'(home.html 이 --n 을 넣음, 없으면 12) */
.s-cats { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 0; margin-top: 28px; border-top: 2px solid var(--g1); border-left: 1px solid var(--g5); }
.s-cats a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 13px; border-right: 1px solid var(--g5); border-bottom: 1px solid var(--g5); font-size: 13px; font-weight: 600; color: var(--g1); text-align: center; word-break: keep-all; min-width: 0; }
.s-cats .ic { width: 30px; height: 30px; display: grid; place-items: center; font-size: 30px; }
.s-cats .ic img { width: 30px; height: 30px; object-fit: cover; }
.s-cats a:hover { color: var(--blue); background: #F8F9FB; }

.s-sec { display: flex; align-items: flex-end; justify-content: space-between; margin: 44px 0 12px; gap: 16px; }
.s-sec h2 { font-size: 20px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
.s-sec h2 .pill { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 700; color: var(--danger); }
.s-sec p { margin: 3px 0 0; font-size: 12.5px; color: var(--g3); }
.s-sec > a { font-size: 12.5px; font-weight: 500; color: var(--g2); white-space: nowrap; }
.s-sec > a:hover { color: var(--blue); }

/* 상품 카드(_parts/pcard.html) — 사진에만 1px 선(sellloop.css .pcard). 공개몰은 5줄 */
body.site .pgrid { grid-template-columns: repeat(5, 1fr); gap: 28px 20px; }

/* 추천 공급사 탭 */
.s-tabs { display: inline-flex; gap: 0; padding: 0; border-radius: 0; background: none; border: 1px solid var(--g4); }
.s-tabs button { border: 0; border-radius: 0; background: #fff; height: 34px; padding: 0 14px; font-weight: 700; font-size: 13px; color: var(--g2); cursor: pointer; }
.s-tabs button + button { border-left: 1px solid var(--g4); }
.s-tabs button.on { background: var(--navy); color: #fff; }
.s-pane[hidden] { display: none; }
.s-supbar { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 18px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--g4); border-radius: 0; font-size: 13px; color: var(--g2); flex-wrap: wrap; }
.s-supbar b { color: var(--g1); }
.s-supbar .lp-ic.wide { width: 34px; height: 16px; }
.s-supbar a { margin-left: auto; color: var(--g2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g4); }
.s-supbar a:hover { color: var(--blue); }

/* 바닥 — 밝은 회색(시안 C) */
body.site .footer { margin-top: 60px; padding: 0 0 36px; background: var(--g6); color: var(--g3); border-top: 1px solid var(--g4); }
body.site .footer .wrap { flex-direction: column; gap: 0; }
.s-fnav { display: flex; gap: 6px 22px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid var(--g5); }
.s-fnav a { color: var(--g2); font-size: 12.5px; } .s-fnav a.b { color: var(--g1); font-weight: 700; }
.s-fnav a:hover { color: var(--blue); }
.s-fbody { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-top: 24px; }
.s-fbody img { height: 20px; width: auto; margin-bottom: 12px; }
.s-fbody p { margin: 0 0 4px; color: var(--g3); font-size: 12px; }
.s-fbody .s-biz { line-height: 1.8; margin-bottom: 8px; }           /* 사업자 정보 줄(시안 C) — 칸 사이 «|» */
.s-biz span { white-space: nowrap; }
.s-biz span + span::before { content: "|"; margin: 0 8px; color: var(--g4); }
.s-fbody .tbd { font-style: normal; color: #A3A8B1; }                  /* 아직 받지 못한 값 자리 */
.s-fcs { min-width: 260px; }
.s-fcs small { color: var(--g2); font-size: 12px; font-weight: 700; }
.s-fcs .lk { margin: 6px 0 6px; font-size: 14px; }                    /* 고객센터 = 보통 글자 링크(전화번호처럼 크게 쓰지 않음) */
.s-fcs .lk a { color: var(--g1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g4); }
.s-fcs .lk a + a::before { content: "·"; display: inline-block; margin: 0 8px; color: var(--g3); text-decoration: none; }
.s-fcs .lk a:hover { color: var(--blue); }

/* 오류 화면(error.html 이 공개몰 틀을 쓸 때) — 상자·큰 번호 없이 한 줄 + 링크 */
.s-err { padding: 72px 0 40px; text-align: center; }
body.site .s-err h1 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--g3); letter-spacing: 0; }
.s-err .t { margin: 0; font-size: 24px; font-weight: 800; color: var(--g1); letter-spacing: -.045em; word-break: keep-all; }
.s-err .m { margin: 10px 0 0; font-size: 14px; color: var(--g2); word-break: keep-all; }
.s-err .go { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; }

/* 관리자 목록 작은 미리보기 */
.bn-thumb { width: 120px; height: 52px; border-radius: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 10px; overflow: hidden; font-size: 11px; font-weight: 800; }
.bn-thumb img { width: 46px; height: 40px; object-fit: contain; order: 2; }
.bn-preview { max-width: 980px; } .bn-preview-side { max-width: 320px; } .bn-preview-side .bn-sides { height: auto; grid-template-rows: none; }
.bn-preview-side .bn-side { min-height: 112px; } .bn-preview-wing_left, .bn-preview-wing_right { max-width: 120px; }
.bn-preview .bn-strip { margin: 0; }
/* 관리자 «배너 사진 후보» 썸네일 — 글자·워터마크를 볼 수 있게 72px, 누르면 원본(새 창) */
.bn-cand { display: block; flex: none; width: 72px; height: 72px; border: 1px solid var(--g4); background: #fff; }
.bn-cand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bn-cand:hover { border-color: var(--blue); }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .s-head .wrap { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; }
  .s-hero { grid-template-columns: 1fr; } .bn-sides { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); height: auto; } .bn-side { min-height: 96px; }
  .s-cats { grid-template-columns: repeat(var(--n6, 6), minmax(0, 1fr)); } body.site .pgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) { .s-gnb nav a { padding: 0 11px; } }   /* 861~930px 에서 메뉴 끝 '고객센터'가 '대량견적 문의' 단추 앞에서 잘리던 것 */
@media (max-width: 860px) {
  .s-top .l, .s-roll { display: none; } .s-top .wrap { justify-content: flex-end; }
  .s-head .wrap { grid-template-columns: 1fr auto; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .s-search { grid-column: 1 / -1; grid-row: 2; max-width: none; } .s-tags { display: none; } .s-count { margin-left: 0; }
  .s-search form { height: 42px; } .s-search .scope { padding: 0 10px; font-size: 12.5px; } .s-search input { font-size: 13px; padding: 0 10px; } .s-search button { width: 60px; font-size: 14px; }
  .s-logo img { height: 26px; } .s-logo em { display: none; } .s-icons { gap: 14px; } .s-icons a { font-size: 0; gap: 0; }
  .s-gnb .wrap { padding: 0; height: 46px; } .s-gnb .allcat { width: auto; height: 46px; padding: 0 14px; font-size: 13.5px; } .s-gnb nav { margin-left: 2px; }
  .s-gnb nav a { padding: 0 11px; font-size: 14px; } .s-gnb nav a.sub, .s-gnb .quote { display: none; }
  /* 가로로 넘기는 줄(메뉴 줄·상품 상세 탭) — 오른쪽 끝에 흰 덮개(반투명 3단 45%·82%·100%, 그라데이션 아님): 끝 글자가 반쯤 잘려 깨져 보이지 않고
     넘길 수 있다는 표시가 된다. 끝까지 넘기면 덮개가 마지막 칸 뒤 여백이 된다(sticky). 누르기는 통과(pointer-events: none). */
  .s-gnb nav::after, body.site .pd-tabs::after { content: ""; position: sticky; right: 0; flex: none; align-self: stretch; width: 40px; margin-left: auto;
    border-left: 12px solid rgba(255, 255, 255, .45); border-right: 12px solid #fff; background: rgba(255, 255, 255, .82); background-clip: padding-box; pointer-events: none; }
  .bn-slider { height: 300px; } .bn-slide { padding: 24px 20px 0; align-items: flex-start; }
  .bn-copy { max-width: 100%; }
  .bn-title { font-size: 25px; } .bn-btn { height: 40px; padding: 0 16px; font-size: 13.5px; margin-top: 16px; }
  .bn-sub { font-size: 13px; margin-top: 8px; max-width: 64%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bn-art { width: min(116px, 34%); height: 92px; right: 10px; top: auto; bottom: 50px; transform: none; }   /* 조절 칸(1/6 ‹ ❚❚ ›, 아래 10px·높이 30px) 위로 · 설명 글(폭 64%) 오른쪽으로 */
  /* 폰: 상품 사진 2장을 나란히(겹침 없음 · 10/5 검사 «봉투 사진이 둘째·셋째를 덮음») — 조절 칸 위 · 단추 오른쪽 */
  .bn-photos { right: 10px; top: auto; bottom: 48px; width: 156px; height: 74px; margin-top: 0; }
  .bn-photos img { padding: 5px; }
  .bn-photos .p1, .bn-photos .p2 { top: 0; width: 74px; height: 74px; }
  .bn-photos .p1 { left: 0; } .bn-photos .p2 { left: 82px; } .bn-photos .p3 { display: none; }
  .bn-slide .bn-il { width: min(150px, 40%); height: 94px; right: 10px; top: auto; bottom: 50px; margin-top: 0; }   /* 폰: 사진이 없을 때만 그림(.bn-art 자리) */
  .bn-slide.has-ph .bn-il { display: none; }
  .bn-strip img.bn-il { display: none; }
  .bn-slide.has-ph .bn-sub { max-width: 58%; }
  .bn-ctrl { right: 10px; bottom: 10px; }
  .bn-tabs { grid-auto-columns: minmax(84px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .bn-sides { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .bn-side { flex: 0 0 80%; min-height: 82px; padding: 0 14px; } .bn-side strong { font-size: 15.5px; }
  .bn-side .bn-photos img { width: 58px; height: 58px; padding: 4px; }
  .s-stats { grid-template-columns: repeat(2, 1fr); } .s-stats > div:nth-child(3) { border-left: 0; } .s-stats > div:nth-child(n+3) { border-top: 1px solid var(--g5); }
  .s-stats > div { padding: 12px 14px; } .s-stats b { font-size: 20px; }
  .s-cats { grid-template-columns: repeat(var(--n4, 4), minmax(0, 1fr)); } .s-cats a { font-size: 12px; padding: 12px 2px; } .s-cats .ic { width: 26px; height: 26px; font-size: 26px; }
  body.site .pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .bn-strip { flex-wrap: wrap; padding: 20px; } .bn-strip strong { font-size: 18px; } .bn-strip img { display: none; }
  /* 폰 팝업 = 아래에서 올라온 카드(10/6 대표님 «PC 에서는 잘 뜨는데 모바일에는 잘 안 보이더라» — 10/5 판은 제목 한 줄 얇은 띠라
     팝업인지 모르고 지나쳤다). 글·목록·단추를 PC 와 같이 다 보여 주고, 뒤 화면을 어둡게 해 팝업인 줄 알게 한다(떠 있을 때만 — :has).
     '오늘 하루 보지 않기 | 닫기'를 누르면 사라지고 다음 장이 같은 자리에 뜬다(한 번에 한 장 — 위 .bn-pops 규칙 그대로). */
  .bn-pops { left: 0; right: 0; bottom: 0; }
  .bn-pops:has(> .bn-pop:not([hidden]):not(.preview))::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(15, 23, 42, .45); }
  .bn-pop:not(.preview) { width: auto; max-width: none; max-height: 82vh; overflow-y: auto; border: 0; border-top: 3px solid var(--navy); box-shadow: 0 -8px 24px rgba(15, 23, 42, .18); }
  .bn-pop:not(.preview)[hidden] { display: none; }
  .bn-pop:not(.preview) .bn-pop-art, .bn-pop:not(.preview) .bn-pop-art.noart { min-height: 0; padding: 22px 52px 16px 20px; }
  .bn-pop:not(.preview) .bn-pop-art strong { max-width: none; font-size: 21px; line-height: 1.3; }
  .bn-pop:not(.preview) .bn-pop-art img { display: none; }
  .bn-pop:not(.preview) .bn-pop-x { width: 44px; height: 44px; font-size: 22px; }
  .bn-pop:not(.preview) .bn-pop-body { padding: 16px 20px 14px; }
  .bn-pop:not(.preview) .bn-pop-body p, .bn-pop:not(.preview) .bn-pop-list li { font-size: 14.5px; }
  .bn-pop:not(.preview) .bn-pop-cta { height: 50px; font-size: 16px; }
  .bn-pop:not(.preview) .bn-pop-foot button { padding: 14px 0; font-size: 14px; }
  .s-sec { margin-top: 32px; flex-wrap: wrap; } .s-sec h2 { font-size: 18px; }
  .s-sec p { word-break: keep-all; }                                  /* 부제가 낱말 가운데서 끊기지 않게(추천 공급사 줄 — 오른쪽 탭은 좁으면 다음 줄로) */
}

/* 마진 계산기(/tools/margin) */
.mc-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 8px; }
.mc-card { background: #fff; border: 1px solid var(--g4); border-radius: 0; padding: 24px 26px; }
.mc-card h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.mc-result { background: #fff; border-top: 2px solid var(--g1); display: flex; flex-direction: column; justify-content: center; }
.mc-big { font-size: 40px; font-weight: 800; color: var(--blue); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.mc-plus { color: var(--ok); } .mc-minus { color: var(--danger); }
.mc-art { display: block; width: 240px; height: 150px; object-fit: contain; margin: 0 auto 10px; }   /* 빈 결과 평면 그림 illust/margin.svg(10/6) */
.mc-mk { display: flex; align-items: center; gap: 8px; } .mc-logo { display: block; height: 20px; width: auto; max-width: 96px; object-fit: contain; }   /* 결과 머리 마켓 로고(파일이 있을 때만) */
@media (max-width: 860px) { .mc-wrap { grid-template-columns: 1fr; } .mc-card { padding: 20px; } .mc-big { font-size: 32px; } .mc-art { width: 200px; height: 125px; } }

/* ── 상품 상세 — 상자 1겹·각진 모서리·그림자 없음(시안 C). 화면 class 는 public.css ─────────── */
body.site .pd { border-radius: 0; padding: 28px; gap: 44px; box-shadow: none; }
body.site .gal-main { border-radius: 0; background: #fff; border-color: var(--g5); }
body.site .gal-main img { background: #fff; }
body.site .gal-thumbs label { width: 72px; height: 72px; border-radius: 0; border-width: 1px; }
body.site .pd-info h1 { font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1.3; }
body.site .pd-sup .badge.navy { background: none; color: var(--navy); }
body.site .pd-price { margin: 18px 0 16px; padding: 16px 0; border: 0; border-top: 2px solid var(--g1); border-bottom: 1px solid var(--g4); border-radius: 0; background: none; }
body.site .pd-price .big { font-size: 30px; font-weight: 800; color: var(--blue); letter-spacing: -.04em; }
body.site .pd-price .lockv { color: var(--blue); }
body.site .pd-kv { font-size: 13.5px; }
body.site .pd-kv dt { color: var(--g3); font-weight: 500; }
body.site .pd-buy { gap: 12px; }
body.site .pd-buy .go { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.site .pd-buy .go .btn { height: 52px; border-radius: var(--r-sm); font-size: 16px; font-weight: 700; }
body.site .pd-buy .go .btn:not(.primary) { border: 1px solid var(--blue); color: var(--blue); }
body.site .pd-buy .go .btn.primary { background: var(--blue); border: 1px solid var(--blue); }
body.site .pd-actions .btn, body.site .pd-login .btn { border-radius: var(--r-sm); }
body.site .pd-tabs { background: #fff; border: 0; border-bottom: 1px solid var(--g4); border-radius: 0; padding: 0; top: 52px; margin-top: 36px; gap: 0; }
body.site .pd-tabs a { padding: 15px 22px 14px; font-size: 15px; font-weight: 600; color: var(--g2); margin-bottom: -1px; }
body.site .pd-tabs a:hover { color: var(--g1); border-color: var(--navy); }
body.site .pd-sec { border-radius: 0; padding: 28px 30px; box-shadow: none; }
body.site .pd-sec h2 { font-size: 18px; font-weight: 800; }
body.site .kvt th { background: var(--g6); color: var(--g2); }

/* ── 공급사관·목록 ──────────────────────────────────────────── */
body.site .store-card { border-radius: 0; box-shadow: none; }
body.site .store-logo { background: none; color: var(--navy); border-radius: 0; }
body.site .store-metrics { background: #fff; }
body.site .store-metrics b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--g1); }
body.site .store-banner { border-radius: 0; background: var(--navy); border: 0; color: #fff; position: relative; overflow: hidden; }
body.site .store-banner h2 { color: #fff; font-weight: 800; }
body.site .store-banner p { color: rgba(255, 255, 255, .85); }
body.site .store-banner .btn { background: #fff; color: var(--navy); border: 0; font-weight: 700; }
body.site .tabs a.on { color: var(--g1); border-color: var(--navy); }
body.site .crumb { padding-top: 20px; }
body.site .sec-h h2 { font-size: 20px; font-weight: 800; }

/* ── 자주 묻는 질문(/faq — public/faq.html) — 분류마다 위 2px 선, 질문 줄 사이 1px 선. 질문은 <details>(스크립트 없음) ── */
.faq-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.faq-toc a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--g4); border-radius: var(--r-sm); font-size: 13px; color: var(--g2); background: #fff; }
.faq-toc a:hover { border-color: var(--blue); color: var(--blue); }
.faq-sec { margin-top: 36px; border-top: 2px solid var(--g1); scroll-margin-top: 64px; }
body.site .faq-sec h2 { margin: 0; padding: 14px 0 12px; font-size: 18px; font-weight: 800; border-bottom: 1px solid var(--g4); }
.faq-q { border-bottom: 1px solid var(--g5); }
.faq-q summary { position: relative; display: block; padding: 15px 40px 15px 22px; font-size: 15px; font-weight: 600; color: var(--g1); cursor: pointer; list-style: none; word-break: keep-all; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before { content: "Q"; position: absolute; left: 2px; top: 15px; font-weight: 800; color: var(--blue); }
.faq-q summary::after { content: "+"; position: absolute; right: 8px; top: 13px; font-size: 18px; font-weight: 400; color: var(--g3); }
.faq-q[open] summary::after { content: "−"; }
.faq-q summary:hover { color: var(--blue); }
.faq-a { padding: 0 8px 18px 22px; }
.faq-a p { margin: 0 0 8px; font-size: 14px; line-height: 1.75; color: var(--g2); word-break: keep-all; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.faq-a .faq-note { color: var(--g3); font-size: 13px; }
.faq-a .faq-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 860px) {
  .faq-q summary { padding: 13px 32px 13px 20px; font-size: 14px; } .faq-q summary::before { top: 13px; } .faq-q summary::after { top: 11px; right: 4px; }
  .faq-a { padding: 0 4px 16px 20px; } .faq-a p { font-size: 13.5px; }
}

/* 가입 폼 봇 덫 칸(10/6 — join_seller·join_partner) — 사람에게는 보이지 않는다. 채워지면 서버가 가입을 받지 않는다(routers/public_pages) */
.hp-trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }