/* 우동마켓 구매대행 신청 (/korea-buy/)
 * 한국직송 등록 폼(/register-group-buy/?gb_tag=korea)과 같은 틀 · 같은 모양이다(2026-10-04 사용자 요청) — 값은 테마
 * page-register-group-buy.php 의 것을 옮겨 왔다: 800px 틀 · 가운데 제목 24px · 초록 한 줄 설명 · 흰 카드(32px · 16px 둥글기 · 그림자) ·
 * 번호 동그라미 26px + 줄(단계) · 복숭아색 AI 상자 · 칸 12px/#ddd/8px · 큰 단추 14px/16px/600.
 * 머리 아래 여백과 바깥 폭은 테마의 main.main-content 가 잡는다. PC 모양이 기본이고 768px 이하에서만 모바일로 덮는다 */
.ukb-wrap { max-width: 800px; margin: 40px 0; padding: 0 16px; color: #212529; }
.ukb-wrap [hidden] { display: none !important; }   /* flex 를 쓰는 요소에 hidden 이 안 먹는 함정 */
.ukb-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; text-align: center; }
.ukb-scope { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -2px 0 10px; text-align: center; }
.ukb-scope span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #eef4ff; color: #3b5bdb; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.ukb-scope .ukb-scope-fee { background: #fff4e6; color: #d9480f; }
.ukb-sub { margin: 0 0 20px; text-align: center; font-size: 14px; color: #2f9e44; line-height: 1.6; }
.ukb-card { background: #fff; padding: 32px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); margin: 0 0 20px; }
.ukb-center { text-align: center; }
.ukb-card h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }

/* 단계 줄 — 등록 폼의 .gb-stepper(번호 동그라미 + 이름 + 줄) */
.ukb-sec { display: flex; align-items: center; gap: 10px; margin: 30px 0 22px; color: var(--primary-color, #ff6f0f); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ukb-sec:first-child { margin-top: 0; }
.ukb-step { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-color, #ff6f0f); color: #fff; font-size: 13px; flex: none; }
.ukb-sec-bar { flex: 1; height: 2px; background: #e9ecef; border-radius: 1px; }

/* 한눈에 보는 조건 — 등록 폼의 노란 안내 상자 */

/* 한국 쇼핑몰 둘러보기 — 분류 한 줄에 칩. 📷 는 캡처가 필요한 곳 */
.ukb-shops { border: 1px solid #e9ecef; border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
.ukb-shops-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.ukb-shops-head::-webkit-details-marker { display: none; }
.ukb-shops-head b { font-size: 14px; color: #212529; }
.ukb-shops-toggle { flex: none; font-size: 12px; font-weight: 600; color: #868e96; }
.ukb-shops-toggle::after { content: "펼치기 ▾"; }
.ukb-shops[open] .ukb-shops-toggle::after { content: "접기 ▴"; }
.ukb-shops[open] .ukb-shops-head { margin-bottom: 6px; }
.ukb-shops-steps { list-style: decimal; margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: #495057; line-height: 1.6; }
.ukb-shops-how { margin: 10px 0 0; font-size: 12.5px; color: #495057; line-height: 1.6; }
.ukb-shops-how b { color: #212529; }
.ukb-shops-more { background: none; border: 0; padding: 0 0 0 6px; color: #3b5bdb; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.ukb-shops-steps li { list-style: inherit; margin: 0; }
.ukb-shops-steps b { color: #212529; }
.ukb-shops-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ukb-shop { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #dee2e6; border-radius: 999px; background: #fff; color: #343a40; padding: 6px 12px; font-size: 13px; font-weight: 600; text-decoration: none; }
.ukb-shop:hover { border-color: var(--primary-color, #ff6f0f); color: var(--primary-color, #ff6f0f); }
.ukb-shop-ico { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.ukb-shop--hot .ukb-shop-ico { background: #fff; }
.ukb-shop--shot { padding-right: 10px; }
.ukb-shop-cam { font-size: 12px; line-height: 1; opacity: 0.75; }
.ukb-shop--hot { border-color: var(--primary-color, #ff6f0f); background: var(--primary-color, #ff6f0f); color: #fff; }
.ukb-shop--hot:hover { color: #fff; filter: brightness(0.95); }
.ukb-shop-hot { flex: none; border-radius: 999px; background: rgba(255, 255, 255, 0.25); color: #fff; padding: 2px 7px; font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
/* 비로그인 — 견적까지 보고 신청할 때 로그인 */
.ukb-guest { margin-top: 18px; padding: 16px; border: 1px dashed #ffd8a8; border-radius: 12px; background: #fffaf5; text-align: center; }
.ukb-guest p { margin: 0 0 10px; font-size: 13px; color: #495057; line-height: 1.6; }
.ukb-guest .ukb-zone-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: #495057; }
.ukb-guest .ukb-zone-row label { flex: none; white-space: nowrap; font-weight: 600; }
.ukb-guest .ukb-zone-row select { width: auto; max-width: 100%; padding: 8px 10px; }
.ukb-hero-note { margin: -8px 0 16px; text-align: center; font-size: 13px; color: #868e96; }
.ukb-shot-note { margin: 8px 0 0; padding: 8px 12px; border: 1px solid #ffd8a8; border-radius: 10px; background: #fff4e6; font-size: 12.5px; color: #495057; line-height: 1.5; }
.ukb-shot-note b { color: #d9480f; }
.ukb-paste.is-pulse { animation: ukb-pulse 1s ease-in-out 3; }
@keyframes ukb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 111, 15, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(255, 111, 15, 0); } }
.ukb-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; position: relative; }
.ukb-paste { font-size: 12px; padding: 7px 12px; }

/* AI 도우미 상자 — 등록 폼의 .ai-autofill-banner */
.ukb-ai { background: linear-gradient(135deg, #fff4ec 0%, #fff8f5 100%); border: 1.5px solid #ffd3b3; border-radius: 16px; padding: 16px 20px; margin: 0 0 12px; position: relative; overflow: hidden; }
.ukb-ai::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: rgba(255, 111, 15, 0.06); border-radius: 50%; }
.ukb-ai-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ukb-ai-icon { font-size: 28px; flex: none; }
.ukb-ai-text strong { display: block; font-size: 15px; font-weight: 700; color: #e65f00; margin-bottom: 2px; }
.ukb-ai-text span { font-size: 12px; color: #888; line-height: 1.4; }
.ukb-ai textarea { position: relative; }
.ukb-ai-btns { display: flex; gap: 8px; margin-top: 10px; position: relative; }
.ukb-ai-btns .ukb-btn { flex: 1; }

/* 칸 · 이름표 — 등록 폼의 것(12px · #ddd · 8px · 14px / 이름표 600) */
.ukb-wrap textarea, .ukb-wrap input[type=text], .ukb-wrap input[type=url], .ukb-wrap input[type=tel], .ukb-wrap input[type=number], .ukb-wrap select {
  width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; background: #fff; color: #212529; font-family: inherit; }
.ukb-wrap textarea:focus, .ukb-wrap input:focus, .ukb-wrap select:focus { outline: none; border-color: var(--primary-color, #ff6f0f); }
.ukb-wrap label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #212529; }
.ukb-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 4px 0; }
.ukb-row label { flex: 1 1 140px; }
.ukb-short { max-width: 90px; } .ukb-mid { max-width: 180px; }
.ukb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.ukb-wide { grid-column: 1 / -1; }

/* 단추 — 등록 폼의 .ai-autofill-btn(작은 것) · .gb-btn(큰 것) */
.ukb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dee2e6; background: #fff; color: #495057; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.ukb-btn:disabled { opacity: .6; cursor: wait; }
.ukb-primary { background: var(--primary-color, #ff6f0f); border-color: var(--primary-color, #ff6f0f); color: #fff; box-shadow: 0 2px 8px rgba(255, 111, 15, 0.3); }
.ukb-primary:hover { background: #e65f00; border-color: #e65f00; color: #fff; }
.ukb-big { width: 100%; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; margin-top: 16px; box-shadow: none; box-sizing: border-box; }
.ukb-link { align-self: flex-start; border: 0; background: none; color: #868e96; padding: 4px 0; font-weight: 400; text-decoration: underline; box-shadow: none; }

.ukb-hint { font-size: 12px; font-weight: 400; color: #868e96; margin: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
.ukb-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ukb-warn { font-size: 13px; font-weight: 400; color: #c92a2a; background: #fff5f5; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.ukb-bad { color: #c92a2a; margin-top: 10px; font-size: 14px; }

/* 상품 카드 — 등록 폼의 회색 묶음(#f8f9fa · #e9ecef · 12px) */
.ukb-item { display: flex; gap: 14px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 16px; margin: 12px 0; }
.ukb-item img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; flex: none; background: #fff; }
.ukb-item-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ukb-spec { font-size: 12px; color: #495057; margin: 0; }

.ukb-notice { margin: 0 0 14px; padding: 12px 14px 12px 32px; background: #f8f9fa; border-left: 3px solid var(--primary-color, #ff6f0f); border-radius: 6px; font-size: 13px; color: #495057; line-height: 1.6; }
.ukb-notice li { margin: 4px 0; }
.ukb-consent { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14px !important; font-weight: 600 !important; }
.ukb-consent input { width: 20px; height: 20px; accent-color: var(--primary-color, #ff6f0f); cursor: pointer; }

/* 예상 견적 */
.ukb-est { background: #fff9f2; border: 1px solid #ffd8a8; border-radius: 12px; padding: 16px; margin: 16px 0 0; }
.ukb-est h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #e65f00; }
.ukb-est table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ukb-est td { padding: 6px 0; border-bottom: 1px solid #ffe8cc; }
.ukb-est-note { font-size: 12px; color: #d9480f; margin: 10px 0 0; line-height: 1.6; }
.ukb-busy { opacity: .5; }
.ukb-shotbox { margin: 8px 0; }
/* 캡처 붙여넣는 자리 — 눌러서 고르면(초점) 주황 테두리. 터치 화면에는 붙여넣기 단축키가 없어 숨긴다 */
.ukb-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px dashed #ced4da; border-radius: 10px; background: #fff; padding: 16px 12px; margin-bottom: 8px; text-align: center; cursor: pointer; font-size: 12px; color: #868e96; transition: border-color 0.15s, background 0.15s; }
.ukb-zone b { font-size: 13px; color: #495057; }
.ukb-zone:hover { border-color: #adb5bd; }
.ukb-zone:focus, .ukb-zone.ukb-over { outline: none; border-color: var(--primary-color, #ff6f0f); background: #fff9f4; }
.ukb-zone:focus b::after { content: ' — 지금 붙여넣으세요'; color: var(--primary-color, #ff6f0f); }
@media (hover: none), (pointer: coarse) { .ukb-zone { display: none; } }
.ukb-shotbox .ukb-hint, .ukb-shotbox .ukb-warn { margin: 6px 0 0; }
.ukb-room { font-size: 13px; color: #2b8a3e; background: #ebfbee; border: 1px solid #b2f2bb; border-radius: 8px; padding: 9px 11px; margin: 10px 0 0; line-height: 1.6; }
.ukb-room b { color: #2b8a3e; }
/* 개당 비용 — 묶어 담을수록 내려가는 걸 보여 준다(견적 응답값으로만 셈) */
.ukb-per { font-size: 13px; color: #495057; margin: 8px 0 0; line-height: 1.6; }
.ukb-per b { color: #e65f00; font-size: 15px; }
/* 미리 채움 띠 — 랜딩에서 묶음을 들고 들어온 사람에게 */
.ukb-pre { display: block; background: #fff4e6; border: 1px solid #ffd8a8; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: 13px; color: #495057; line-height: 1.6; }
.ukb-pre b { color: #d9480f; }
.ukb-pre-notice { display: block; margin-top: 4px; color: #868e96; font-size: 12px; }
.ukb-pre--guest { text-align: left; margin-bottom: 14px; }

/* 받은 견적 · 내 구매대행 */
/* 품목 안내 — 링크 칸 밑 한 줄 요약(접힘), 펼치면 목록 */
.ukb-guide { margin: 6px 0 0; }
.ukb-guide summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 500; color: #868e96; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
.ukb-guide summary::-webkit-details-marker { display: none; }
.ukb-guide-more::after { content: '자세히 ▾'; margin-left: 4px; color: #3b5bdb; font-weight: 600; white-space: nowrap; }
.ukb-guide[open] .ukb-guide-more::after { content: '접기 ▴'; }
.ukb-guide ul { margin: 6px 0 0; padding-left: 18px; }
.ukb-guide li { font-size: 12.5px; margin: 4px 0; line-height: 1.6; color: #495057; }
.ukb-quote table, .ukb-order table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ukb-quote td, .ukb-order td { padding: 6px 0; border-bottom: 1px solid #f1f3f5; }
.ukb-num { text-align: right; white-space: nowrap; }
.ukb-sum td { font-weight: 700; border-bottom: 0; }
.ukb-bank { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 12px 14px; margin: 10px 0; font-size: 14px; }
.ukb-bank p { margin: 4px 0; }
.ukb-copy { font-family: ui-monospace, monospace; background: #fff; border: 1px dashed #adb5bd; border-radius: 6px; padding: 1px 6px; cursor: copy; }
.ukb-copied { border-color: #2b8a3e; color: #2b8a3e; }
.ukb-order { border-top: 1px solid #f1f3f5; padding: 14px 0; }
.ukb-order:last-child { padding-bottom: 0; }
.ukb-order header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ukb-no { font-family: ui-monospace, monospace; }
.ukb-badge { background: #e7f5ff; color: #1864ab; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.ukb-st-cancelled .ukb-badge, .ukb-st-refunded .ukb-badge { background: #f1f3f5; color: #868e96; }
.ukb-total { margin-left: auto; font-weight: 700; }
.ukb-items-line { font-size: 13px; color: #495057; margin: 6px 0; }
.ukb-order footer { display: flex; gap: 8px; margin-top: 8px; }
.ukb-order summary { cursor: pointer; font-size: 13px; color: #495057; }

/* 한국직송으로 건너가는 한 줄 */
.ukb-cross { font-size: 13px; color: #495057; background: #edf2ff; border: 1px solid #dbe4ff; border-radius: 12px; padding: 12px 14px; margin: 0 0 20px; line-height: 1.6; text-align: center; }
.ukb-cross a, .ukb-room a { color: #364fc7; font-weight: 700; text-decoration: underline; }

/* 모바일 — 등록 폼과 같은 값(틀의 여백을 없애고 카드 안쪽을 줄인다) */
/* 소셜 로그인 창 — "로그인하고 신청하기"(비로그인) 클릭 시. 가운데 흰 상자, 테마 로그인 페이지와 같은 브랜드색 단추를 글자 달린 가로 단추로 */
.ukb-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); animation: ukb-fade 0.2s ease-out; }
.ukb-modal[hidden] { display: none; }
body.ukb-modal-open { overflow: hidden; }
.ukb-modal-box { position: relative; box-sizing: border-box; width: 100%; max-width: 400px; background: #fff; border-radius: 16px; padding: 28px 24px 22px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); text-align: center; animation: ukb-up 0.25s ease-out; }
.ukb-modal-box h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: #212529; }
.ukb-modal-sub { margin: 0 0 18px; font-size: 14px; color: #666; line-height: 1.5; word-break: keep-all; }
.ukb-modal-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; background: transparent; color: #868e96; font-size: 26px; line-height: 1; border-radius: 50%; cursor: pointer; }
.ukb-modal-close:hover { background: #f1f3f5; color: #212529; }
.ukb-social { display: flex; flex-direction: column; gap: 10px; }
.ukb-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 0.15s, background 0.2s; }
.ukb-social-btn:hover { transform: translateY(-1px); }
.ukb-social-btn svg { flex: none; }
.ukb-social--google { background: #fff; border-color: #dadce0; color: #3c4043; }
.ukb-social--google:hover { background: #f8f9fa; }
.ukb-social--kakao { background: #FEE500; color: #191919; }
.ukb-social--kakao:hover { background: #fdd835; }
.ukb-social--naver { background: #03C75A; color: #fff; }
.ukb-social--naver:hover { background: #02b351; }
.ukb-social--facebook { background: #1877F2; color: #fff; }
.ukb-social--facebook:hover { background: #166fe5; }
/* 이메일 로그인 — 소셜 단추와 같은 크기의 단추(글자 링크는 눈에 안 띈다, 2026-10-19 사용자 지적) */
.ukb-modal-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #adb5bd; font-size: 12px; }
.ukb-modal-or::before, .ukb-modal-or::after { content: ''; flex: 1; height: 1px; background: #e9ecef; }
.ukb-social--email { background: #fff; border-color: #ced4da; color: #343a40; }
.ukb-social--email:hover { background: #f8f9fa; border-color: var(--primary-color, #ff6f0f); color: var(--primary-color, #ff6f0f); }
.ukb-modal-alt { margin: 16px 0 0; font-size: 13px; color: #868e96; text-align: center; }
.ukb-modal-alt a { color: #495057; text-decoration: underline; text-underline-offset: 2px; }
.ukb-modal-alt a:hover { color: var(--primary-color, #ff6f0f); }
@keyframes ukb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ukb-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
  .ukb-wrap { margin: 10px auto; padding: 0; }
  .ukb-title { font-size: 20px; }
  .ukb-card { padding: 16px 12px; border-radius: 12px; }
  .ukb-grid { grid-template-columns: 1fr; }
  .ukb-item { padding: 12px; }
  .ukb-item img { width: 64px; height: 64px; }
  .ukb-ai { padding: 14px; }
  .ukb-ai-btns { flex-direction: column; }
  /* 한 줄로 — 긴 말은 접고 가운뎃점으로 잇는다(풀이는 3단계 확인 문구에 있다). 아주 좁으면 줄이 넘어간다 */
  .ukb-sub { font-size: 13px; margin-bottom: 14px; }
  .ukb-sub-more { display: none; }
  .ukb-cross { text-align: left; margin-bottom: 14px; }
  /* 칸의 글씨가 16px 보다 작으면 아이폰이 누를 때 화면을 확대한다 */
  .ukb-wrap textarea, .ukb-wrap input[type=text], .ukb-wrap input[type=url], .ukb-wrap input[type=tel], .ukb-wrap input[type=number], .ukb-wrap select { font-size: 16px; }
  /* 손가락으로 누르는 것은 44px 이상 */
  .ukb-btn { min-height: 44px; font-size: 14px; }
  .ukb-big { min-height: 52px; }
  .ukb-paste { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 10px 6px; white-space: nowrap; }
  /* 쇼핑몰은 옆으로 미는 한 줄 — 링크 칸이 화면 아래로 밀리지 않게 */
  .ukb-shops { padding: 12px 0 12px 12px; }
  .ukb-shops-head, .ukb-shops-steps, .ukb-shops-how { padding-right: 12px; }
  /* 두 줄로 쌓아 옆으로 민다 — 한 줄일 때 4~5개만 보이던 것이 8~10개 보인다(2026-10-20) */
  .ukb-shops-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; gap: 6px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ukb-shops-list::-webkit-scrollbar { display: none; }
  /* 오른쪽에 더 있다는 표시 — 끝에 붙어 다니는 흐림 + 화살표. 끝까지 밀면 사라진다(kb.js 가 is-end 를 붙인다) */
  .ukb-shops-list::after { content: "›"; grid-row: 1 / -1; position: sticky; right: 0; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; width: 56px; margin-left: -50px; padding-right: 10px; background: linear-gradient(to right, rgba(255,255,255,0), #fff 55%); color: var(--primary-color, #ff6f0f); font-size: 24px; font-weight: 700; line-height: 1; pointer-events: none; transition: opacity .15s; }
  .ukb-shops-list.is-end::after { opacity: 0; }
  .ukb-shops-list > .ukb-shop:last-of-type { margin-right: 12px; }
  .ukb-shop { flex: none; min-height: 40px; padding: 6px 14px; font-size: 14px; }
  /* 상품 카드 — 사진은 위에 작게, 칸은 폭을 다 쓴다. 판매가는 한 줄, 수량 · 종류는 반씩 */
  .ukb-item { flex-direction: column; gap: 10px; }
  .ukb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ukb-row label:first-child { grid-column: 1 / -1; }
  .ukb-short, .ukb-mid { max-width: none; }
  .ukb-remove { align-self: flex-end; min-height: 44px; padding: 8px 12px; margin: -6px -8px -8px 0; }
  .ukb-consent { min-height: 44px; }
  .ukb-consent input { width: 24px; height: 24px; flex: none; }
  .ukb-notice { padding: 10px 12px 10px 28px; }
  .ukb-est { padding: 14px 12px; }
  /* 내 구매대행 — 계좌 · Reference 는 눌러 복사하기 쉽게, 단추는 폭을 나눠 쓴다 */
  .ukb-copy { display: inline-block; padding: 6px 10px; margin: 2px 0; }
  .ukb-bank p { margin: 6px 0; line-height: 1.7; }
  .ukb-order footer .ukb-btn { flex: 1; }
  .ukb-order summary { padding: 8px 0; }
  .ukb-guide summary { padding: 4px 0; }
}

/* 진행 사례 띠(0043) — 폼 카드 위, 누구나 본다 */
.ukb-showcase { padding: 20px 24px; }
.ukb-showcase h2 { font-size: 16px; margin: 0 0 4px; }
.ukb-showcase-sub { margin: 0 0 12px; font-size: 12px; color: #868e96; }
.ukb-showcase-list { list-style: none; margin: 0; padding: 0; }
.ukb-showcase-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 1px solid #f1f3f5; font-size: 13px; }
.ukb-showcase-list li:first-child { border-top: 0; }
.ukb-showcase-name { font-weight: 600; color: #212529; }
.ukb-showcase-shop { font-size: 11px; color: #868e96; }
.ukb-showcase-meta { flex-basis: 100%; font-size: 12px; color: #495057; }
.ukb-showcase-more { margin: 8px 0 0; font-size: 12px; color: #868e96; text-align: right; }
.ukb-consent--share { display: block; margin-top: 6px; font-size: 13px; }
.ukb-consent-sub { font-size: 11px; color: #868e96; }
@media (min-width: 640px) { .ukb-showcase-meta { flex-basis: auto; margin-left: auto; text-align: right; } }

/* 링크 칸 — 오른쪽 아래 카운터 · 칸 밑 회색 규칙 한 줄(사실 띠를 대신한다, 2026-10-20) */
.ukb-links-wrap { position: relative; }
.ukb-links-wrap textarea { padding-bottom: 26px; }
.ukb-links-count { position: absolute; right: 10px; bottom: 8px; font-size: 11.5px; font-weight: 600; color: #adb5bd; pointer-events: none; }
.ukb-links-count.is-some { color: #495057; }
.ukb-links-count.is-over { color: #e03131; }
.ukb-links-note { margin: 6px 0 0; font-size: 12px; color: #868e96; line-height: 1.5; }
.ukb-est h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ukb-est-valid { font-size: 12px; font-weight: 500; color: #868e96; }

/* 식품 카드 — 구매대행으로 못 받는다는 안내 + 한국직송 제안 출구. 칸은 흐리게(2026-10-20) */
.ukb-food { margin: 0 0 8px; padding: 8px 12px; border: 1px solid #96f2d7; border-radius: 10px; background: #e6fcf5; font-size: 12.5px; color: #087f5b; line-height: 1.6; }
.ukb-food p { margin: 0 0 6px; }
.ukb-food b { color: #087f5b; }
.ukb-food-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ukb-food-no { padding: 6px 12px; font-size: 12.5px; font-weight: 700; border: 1.5px solid #0b7285; color: #0b7285; background: #fff; border-radius: 999px; }
.ukb-food-go { font-weight: 700; color: #0b7285; text-decoration: underline; }
.ukb-item--food .ukb-item-body > label, .ukb-item--food .ukb-row label:not(:last-child), .ukb-item--food .ukb-spec, .ukb-item--food .ukb-shotbox { opacity: 0.5; }

/* 내 구매대행 — 품목 링크(0045): 글자색 그대로, 점선 밑줄 + ↗ */
.ukb-item-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.ukb-item-link:hover { color: var(--primary-color, #ff6f0f); }
.ukb-food--ok { border-color: #ffd8a8; background: #fff4e6; color: #9c4a00; }
.ukb-food--ok b { color: #9c4a00; }