/* ============================================================
 * 24-beta.css — 베타 테스트 가이드 페이지 (프리미엄)
 * ============================================================ */
.gab-beta { padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 112px); background: var(--gab-gray-50); min-height: 80vh; }

/* 히어로 */
.gab-beta-hero { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.gab-beta-hero .gab-overline { margin-bottom: 18px; }
.gab-beta-hero .gab-display { margin: 0 0 20px; }
.gab-beta-hero .gab-lead { margin: 0 auto; max-width: 620px; }
.gab-beta-progress-wrap { margin-top: 36px; max-width: 480px; margin-left: auto; margin-right: auto; }
.gab-beta-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.gab-beta-progress-num { font-size: 15px; font-weight: 800; color: var(--gab-primary-600); font-variant-numeric: tabular-nums; }
.gab-beta-progress-bar { height: 8px; background: var(--gab-gray-200); border-radius: 999px; overflow: hidden; }
.gab-beta-progress-fill { height: 100%; width: 0; background: var(--gab-grad-brand); border-radius: 999px; transition: width .4s cubic-bezier(.32,.72,0,1); }

/* 섹션 */
.gab-beta-sec { margin-bottom: clamp(48px, 7vw, 88px); }
.gab-beta-sechead { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.gab-beta-sechead .gab-overline { margin-bottom: 14px; }
.gab-beta-sechead h2 { margin: 0 0 10px; }
.gab-beta-secsub { color: var(--gab-gray-500); font-size: 15px; margin: 0; }

/* 테스트 계정 */
.gab-beta-accounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.gab-beta-acc { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 18px; padding: 28px 24px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.gab-beta-acc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--acc); }
.gab-beta-acc:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(26,26,26,.25); }
.gab-beta-acc-icon { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 12%, #fff); color: var(--acc); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; }
.gab-beta-acc-role { font-size: 20px; font-weight: 800; color: var(--gab-gray-900); letter-spacing: -.02em; margin-bottom: 6px; }
.gab-beta-acc-role span { font-size: 12px; font-weight: 700; color: var(--gab-gray-400); text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
.gab-beta-acc-desc { font-size: 13px; color: var(--gab-gray-500); line-height: 1.55; margin: 0 0 18px; min-height: 40px; }
.gab-beta-acc-cred { background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.gab-beta-acc-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.gab-beta-acc-row + .gab-beta-acc-row { border-top: 1px solid var(--gab-gray-200); }
.gab-beta-acc-row > span { font-size: 11px; font-weight: 700; color: var(--gab-gray-400); width: 52px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }
.gab-beta-acc-row code { flex: 1; font-family: var(--gab-font-mono, monospace); font-size: 13px; font-weight: 700; color: var(--gab-gray-900); }
.gab-beta-copy { width: 30px; height: 30px; border: 1px solid var(--gab-gray-200); border-radius: 8px; background: #fff; color: var(--gab-gray-500); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .15s; }
.gab-beta-copy:hover { color: var(--acc); border-color: var(--acc); }
.gab-beta-acc-go { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--acc); text-decoration: none; }
.gab-beta-acc-go i { transition: transform .2s; }
.gab-beta-acc:hover .gab-beta-acc-go i { transform: translateX(4px); }
.gab-beta-note { margin-top: 22px; padding: 14px 18px; background: color-mix(in srgb, var(--gab-bronze-500) 8%, #fff); border: 1px solid color-mix(in srgb, var(--gab-bronze-500) 22%, #fff); border-radius: 12px; font-size: 13px; color: var(--gab-gray-600); display: flex; gap: 9px; align-items: flex-start; }
.gab-beta-note i { color: var(--gab-bronze-600); margin-top: 1px; }

/* 기능 카드 */
.gab-beta-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.gab-beta-fcard { text-align: left; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 24px 22px; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.gab-beta-fcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(26,26,26,.22); border-color: var(--gab-primary-300); }
.gab-beta-fcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gab-beta-fcard-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.gab-beta-fcard-badge { font-size: 11px; font-weight: 800; color: var(--gab-bronze-600); background: color-mix(in srgb, var(--gab-bronze-500) 12%, #fff); padding: 4px 9px; border-radius: 999px; letter-spacing: .02em; }
.gab-beta-fcard-title { font-size: 16px; font-weight: 800; color: var(--gab-gray-900); margin: 0 0 5px; letter-spacing: -.015em; }
.gab-beta-fcard-sub { font-size: 12.5px; color: var(--gab-gray-500); margin: 0 0 16px; flex: 1; }
.gab-beta-fcard-more { font-size: 12.5px; font-weight: 700; color: var(--gab-primary-600); display: inline-flex; align-items: center; gap: 6px; }
.gab-beta-fcard-more i { transition: transform .2s; }
.gab-beta-fcard:hover .gab-beta-fcard-more i { transform: translateX(4px); }

/* 체크리스트 */
.gab-beta-checktools { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
.gab-beta-btn-ghost { padding: 9px 18px; border: 1px solid var(--gab-gray-300); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 700; color: var(--gab-gray-700); cursor: pointer; transition: all .15s; }
.gab-beta-btn-ghost:hover { border-color: var(--gab-primary-500); color: var(--gab-primary-600); }
.gab-beta-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
.gab-beta-checkgroup { background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 16px; padding: 22px 22px 14px; }
.gab-beta-checkgroup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gab-gray-100); }
.gab-beta-checkgroup-head h4 { font-size: 15px; font-weight: 800; color: var(--gab-gray-900); margin: 0; letter-spacing: -.01em; }
.gab-beta-checkgroup-count { font-size: 12px; font-weight: 800; color: var(--gab-primary-600); background: var(--gab-primary-50); padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.gab-beta-check { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gab-beta-check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.gab-beta-check-box { width: 22px; height: 22px; border: 2px solid var(--gab-gray-300); border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; transition: all .18s; margin-top: 1px; }
.gab-beta-check-box i { opacity: 0; transform: scale(.5); transition: all .18s; }
.gab-beta-check.is-done .gab-beta-check-box { background: var(--gab-primary-600); border-color: var(--gab-primary-600); }
.gab-beta-check.is-done .gab-beta-check-box i { opacity: 1; transform: scale(1); }
.gab-beta-check-num { font-size: 11px; font-weight: 800; color: var(--gab-gray-300); font-variant-numeric: tabular-nums; margin-top: 3px; flex-shrink: 0; min-width: 20px; }
.gab-beta-check-txt { font-size: 13.5px; color: var(--gab-gray-700); line-height: 1.5; transition: color .18s; }
.gab-beta-check.is-done .gab-beta-check-txt { color: var(--gab-gray-400); text-decoration: line-through; text-decoration-color: var(--gab-gray-300); }

/* 모달 */
.gab-beta-modal-bd { position: fixed; inset: 0; z-index: 3000; background: rgba(10,18,32,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.gab-beta-modal-bd.is-open { opacity: 1; pointer-events: auto; }
.gab-beta-modal { background: #fff; border-radius: 22px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.32,.72,0,1); box-shadow: 0 32px 80px -24px rgba(10,18,32,.5); }
.gab-beta-modal-bd.is-open .gab-beta-modal { transform: translateY(0) scale(1); }
.gab-beta-modal-x { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--gab-gray-100); color: var(--gab-gray-600); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 2; transition: all .15s; }
.gab-beta-modal-x:hover { background: var(--gab-gray-200); }
.gab-beta-modal-body { padding: 32px; }
.gab-beta-modal-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; padding-right: 40px; }
.gab-beta-modal-icon { width: 56px; height: 56px; border-radius: 15px; background: var(--gab-grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.gab-beta-modal-badge { display: inline-block; font-size: 11px; font-weight: 800; color: var(--gab-bronze-600); background: color-mix(in srgb, var(--gab-bronze-500) 12%, #fff); padding: 3px 9px; border-radius: 999px; margin-bottom: 7px; }
.gab-beta-modal-head h3 { font-size: 21px; font-weight: 800; color: var(--gab-gray-900); margin: 0 0 4px; letter-spacing: -.02em; }
.gab-beta-modal-head p { font-size: 13.5px; color: var(--gab-gray-500); margin: 0; }
.gab-beta-modal-where { background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); border-radius: 11px; padding: 12px 15px; font-size: 13px; color: var(--gab-gray-600); margin-bottom: 24px; }
.gab-beta-modal-where i { color: var(--gab-primary-600); }
.gab-beta-modal-where b { color: var(--gab-gray-800); }
.gab-beta-modal-section { margin-bottom: 24px; }
.gab-beta-modal-section .gab-eyebrow { display: block; margin-bottom: 12px; }
.gab-beta-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gab-beta-modal-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gab-gray-700); line-height: 1.5; }
.gab-beta-modal-list i { color: var(--gab-primary-600); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.gab-beta-modal-how { background: color-mix(in srgb, var(--gab-primary-500) 5%, #fff); border: 1px solid var(--gab-primary-100); border-radius: 13px; padding: 16px 18px; }
.gab-beta-modal-how .gab-eyebrow { display: block; margin-bottom: 8px; color: var(--gab-primary-600); }
.gab-beta-modal-how p { font-size: 13.5px; color: var(--gab-gray-700); line-height: 1.6; margin: 0; }

/* 반응형 */
@media (max-width: 980px) {
	.gab-beta-features { grid-template-columns: repeat(2, 1fr); }
	.gab-beta-accounts { grid-template-columns: 1fr; }
	.gab-beta-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.gab-beta-features { grid-template-columns: 1fr; }
	.gab-beta-modal-body { padding: 24px 20px; }
}

/* RTL */
[dir="rtl"] .gab-beta-acc::before { left: auto; right: 0; }
[dir="rtl"] .gab-beta-check, [dir="rtl"] .gab-beta-modal-list li { text-align: right; }

/* ============================================================
 * 전역 베타 위젯 — 플로팅 버튼 + 모달
 * ============================================================ */
.gab-bw-fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 1100;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 20px 13px 17px; border: 0; border-radius: 999px;
	background: var(--gab-grad-brand); color: #fff; font-size: 14px; font-weight: 800;
	letter-spacing: -.01em; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(26,26,26,.5);
	transition: transform .2s, box-shadow .2s;
}
.gab-bw-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(26,26,26,.6); }
.gab-bw-fab > .bi-stars { font-size: 17px; color: var(--gab-bronze-300); }
.gab-bw-fab-dot { position: absolute; top: 10px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--gab-bronze-400); box-shadow: 0 0 0 0 rgba(203,170,120,.6); animation: gabBwPulse 2s infinite; }
@keyframes gabBwPulse { 0% { box-shadow: 0 0 0 0 rgba(203,170,120,.55); } 70% { box-shadow: 0 0 0 8px rgba(203,170,120,0); } 100% { box-shadow: 0 0 0 0 rgba(203,170,120,0); } }

/* 모달 */
.gab-bw-bd { position: fixed; inset: 0; z-index: 3100; background: rgba(10,18,32,.62); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .26s; }
.gab-bw-bd.is-open { opacity: 1; pointer-events: auto; }
.gab-bw { position: relative; background: var(--gab-gray-50); border-radius: 24px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(18px) scale(.97); transition: transform .32s cubic-bezier(.32,.72,0,1); box-shadow: 0 36px 90px -28px rgba(10,18,32,.55); }
.gab-bw-bd.is-open .gab-bw { transform: translateY(0) scale(1); }
.gab-bw-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 11px; background: rgba(255,255,255,.85); color: var(--gab-gray-600); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 5; transition: all .15s; }
.gab-bw-x:hover { background: #fff; color: var(--gab-gray-900); }
.gab-bw-view { padding: 32px 28px; }

/* 리스트 헤드 */
.gab-bw-head { text-align: center; margin-bottom: 22px; padding-right: 30px; padding-left: 30px; }
.gab-bw-head .gab-overline { margin-bottom: 12px; }
.gab-bw-head h2 { font-size: 23px; font-weight: 800; color: var(--gab-gray-900); margin: 0 0 8px; letter-spacing: -.02em; }
.gab-bw-head p { font-size: 13.5px; color: var(--gab-gray-500); margin: 0; line-height: 1.55; }

/* 테스트 계정 컴팩트 */
.gab-bw-accs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.gab-bw-acc { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 12px; padding: 10px 11px; }
.gab-bw-acc-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.gab-bw-acc > div { min-width: 0; flex: 1; }
.gab-bw-acc b { display: block; font-size: 12px; font-weight: 800; color: var(--gab-gray-800); }
.gab-bw-acc code { display: block; font-family: var(--gab-font-mono, monospace); font-size: 11px; color: var(--gab-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gab-bw-cp { width: 26px; height: 26px; border: 1px solid var(--gab-gray-200); border-radius: 7px; background: #fff; color: var(--gab-gray-400); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.gab-bw-cp:hover { color: var(--gab-primary-600); border-color: var(--gab-primary-400); }
.gab-bw-pw { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--gab-bronze-500) 8%, #fff); border: 1px solid color-mix(in srgb, var(--gab-bronze-500) 22%, #fff); border-radius: 11px; padding: 10px 13px; font-size: 12.5px; font-weight: 700; color: var(--gab-gray-700); }
.gab-bw-pw i { color: var(--gab-bronze-600); }
.gab-bw-pw code { font-family: var(--gab-font-mono, monospace); font-weight: 800; color: var(--gab-gray-900); flex: 1; }

/* 기능 그리드 */
.gab-bw-grid { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 16px; }
.gab-bw-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--gab-gray-200); border-radius: 14px; padding: 14px 15px; cursor: pointer; transition: all .18s; }
.gab-bw-card:hover { border-color: var(--gab-primary-300); box-shadow: 0 10px 26px -14px rgba(26,26,26,.25); transform: translateX(2px); }
.gab-bw-card-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--gab-primary-50); color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.gab-bw-card-body { flex: 1; min-width: 0; }
.gab-bw-card-body b { display: block; font-size: 14.5px; font-weight: 800; color: var(--gab-gray-900); letter-spacing: -.015em; }
.gab-bw-card-body small { font-size: 11.5px; color: var(--gab-gray-400); }
.gab-bw-card-tag { font-size: 10.5px; font-weight: 800; color: var(--gab-bronze-600); background: color-mix(in srgb, var(--gab-bronze-500) 12%, #fff); padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }
.gab-bw-card-arr { color: var(--gab-gray-300); font-size: 14px; flex-shrink: 0; }

/* 전체 가이드 링크 */
.gab-bw-full { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 13px; background: var(--gab-grad-brand); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: opacity .2s; }
.gab-bw-full:hover { opacity: .92; }
.gab-bw-full .bi-arrow-right { transition: transform .2s; }
.gab-bw-full:hover .bi-arrow-right { transform: translateX(4px); }

/* 상세 뷰 */
.gab-bw-back { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--gab-gray-500); font-size: 13.5px; font-weight: 700; cursor: pointer; margin-bottom: 18px; padding: 4px 2px; }
.gab-bw-back:hover { color: var(--gab-primary-600); }
.gab-bw-dhead { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.gab-bw-dic { width: 52px; height: 52px; border-radius: 14px; background: var(--gab-grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.gab-bw-dtag { display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--gab-bronze-600); background: color-mix(in srgb, var(--gab-bronze-500) 12%, #fff); padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }
.gab-bw-dhead h3 { font-size: 20px; font-weight: 800; color: var(--gab-gray-900); margin: 0 0 5px; letter-spacing: -.02em; }
.gab-bw-dwho { font-size: 12px; color: var(--gab-gray-500); font-weight: 600; }
.gab-bw-ddesc { font-size: 14px; color: var(--gab-gray-600); line-height: 1.6; margin: 0 0 16px; }
.gab-bw-dwhere { background: var(--gab-gray-100); border-radius: 11px; padding: 11px 14px; font-size: 12.5px; color: var(--gab-gray-600); margin-bottom: 22px; }
.gab-bw-dwhere i { color: var(--gab-primary-600); }
.gab-bw-dwhere b { color: var(--gab-gray-800); }
.gab-bw-dlabel { display: block; margin-bottom: 14px; }
.gab-bw-steps { list-style: none; margin: 0; padding: 0; counter-reset: bw; }
.gab-bw-steps li { display: flex; gap: 13px; align-items: flex-start; padding: 0 0 16px; position: relative; }
.gab-bw-steps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 4px; width: 2px; background: var(--gab-gray-200); }
.gab-bw-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--gab-primary-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; position: relative; z-index: 1; }
.gab-bw-steps li > span:last-child { font-size: 14px; color: var(--gab-gray-700); line-height: 1.5; padding-top: 4px; }

@media (max-width: 560px) {
	.gab-bw-fab { right: 16px; bottom: 80px; padding: 11px 16px 11px 14px; font-size: 13px; }
	.gab-bw-fab-txt { display: none; }
	.gab-bw-fab { border-radius: 50%; width: 52px; height: 52px; justify-content: center; padding: 0; }
	.gab-bw-fab > .bi-stars { font-size: 20px; }
	.gab-bw-accs { grid-template-columns: 1fr; }
	.gab-bw-view { padding: 26px 20px; }
}
[dir="rtl"] .gab-bw-fab { right: auto; left: 22px; }
[dir="rtl"] .gab-bw-card, [dir="rtl"] .gab-bw-steps li { text-align: right; }
[dir="rtl"] .gab-bw-steps li:not(:last-child)::before { left: auto; right: 13px; }

/* ===== 매뉴얼 상세뷰 (개요/단계/팁) ===== */
.gab-bw-dover { background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--gab-gray-700); margin-bottom: 14px; }
.gab-bw-dlabel-in { display: block; font-size: 11px; font-weight: 800; color: var(--gab-bronze-600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
/* 단계: 번호 + (제목 + 설명) */
.gab-bw-steps li { display: flex; gap: 13px; align-items: flex-start; padding: 0 0 18px; position: relative; }
.gab-bw-steps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--gab-gray-200); }
.gab-bw-step-c { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.gab-bw-step-c b { font-size: 14px; font-weight: 800; color: var(--gab-gray-900); letter-spacing: -.01em; }
.gab-bw-step-c span { font-size: 13px; color: var(--gab-gray-600); line-height: 1.55; }
/* 팁 */
.gab-bw-dtips { margin-top: 22px; background: color-mix(in srgb, var(--gab-bronze-500) 7%, #fff); border: 1px solid color-mix(in srgb, var(--gab-bronze-500) 20%, #fff); border-radius: 13px; padding: 16px 18px; }
.gab-bw-dtips .gab-bw-dlabel { color: var(--gab-bronze-600); }
.gab-bw-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gab-bw-tips li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--gab-gray-700); line-height: 1.5; }
.gab-bw-tips i { color: var(--gab-bronze-500); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.gab-bw-dlabel { display: block; margin-bottom: 12px; }

/* 드로어(모바일 메뉴) 열림 시 플로팅 버튼 숨김 (겹침 방지) */
body:has(.gab-drawer.is-open) .gab-bw-fab { opacity: 0; pointer-events: none; transform: scale(.9); }

/* ============================================================
 * 모바일 보강 (마지막 로드 — 캐스케이드 확실히 이김)
 * ============================================================ */
@media (max-width: 560px) {
	/* 브랜드로 찾기 → 앱처럼 3열 타일 (한 줄씩 X) */
	.gab-aw-makes-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
	.gab-aw-make { flex-direction: column !important; align-items: center !important; text-align: center; gap: 7px !important; padding: 14px 6px !important; border: 1px solid var(--gab-gray-200) !important; border-radius: 14px !important; }
	.gab-aw-make-logo { width: 38px !important; height: 38px !important; }
	.gab-aw-make-name { font-size: 11.5px !important; line-height: 1.25; }
	.gab-aw-make-count { display: none !important; }
}
/* 드로어(모바일 메뉴) — 무조건 최상위 + 불투명 배경 (메뉴 가림 방지) */
.gab-drawer { z-index: 1451 !important; background: #fff !important; }
.gab-drawer-overlay { z-index: 1450 !important; }
.gab-drawer-nav a { color: var(--gab-gray-800) !important; }
.gab-drawer-nav a i { color: var(--gab-primary-500) !important; }

/* 회원가입 서류 안내(notice) */
.gab-docup-notice { display: flex; gap: 9px; align-items: flex-start; background: color-mix(in srgb, var(--gab-bronze-500) 8%, #fff); border: 1px solid color-mix(in srgb, var(--gab-bronze-500) 22%, #fff); border-radius: 11px; padding: 11px 14px; font-size: 13px; color: var(--gab-gray-700); line-height: 1.5; margin-bottom: 14px; }
.gab-docup-notice i { color: var(--gab-bronze-600); margin-top: 2px; flex-shrink: 0; }

/* 네비 보조 라벨 (전용 표기) */
.gab-nav-sub { font-size: 10px; font-weight: 700; color: var(--gab-bronze-600); letter-spacing: 0; }

/* 찜 주문 안내 배너 (S3) */
.gab-fav-order-note { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--gab-primary-500) 5%, #fff); border: 1px solid var(--gab-primary-100); border-radius: 13px; padding: 14px 16px; margin-bottom: 16px; }
.gab-fav-order-note > i { color: var(--gab-primary-600); font-size: 20px; margin-top: 1px; }
.gab-fav-order-note b { display: block; font-size: 14px; color: var(--gab-gray-900); margin-bottom: 3px; }
.gab-fav-order-note span { font-size: 12.5px; color: var(--gab-gray-600); line-height: 1.55; }

/* S5: 모바일 — 브랜드 더보기(6개 초과 접기) */
@media (max-width: 560px) {
	.gab-aw-makes-grid.gab-makes-collapsed .gab-aw-make:nth-child(n+7) { display: none !important; }
	.gab-makes-more { grid-column: 1 / -1; margin-top: 4px; padding: 12px; border: 1px dashed var(--gab-gray-300); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; color: var(--gab-primary-600); display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
	/* S5: 메인 배송비 즉시견적 위젯 — 모바일 제거 */
	.gab-shipmini { display: none !important; }
}

/* ============================================================
 * 구매하기(Buy Request) — 해외 바이어 전용
 * ============================================================ */
.gab-buyreq-hero { background: linear-gradient(150deg, var(--gab-primary-800, #21201D), var(--gab-primary-600, #21201D)); }
.gab-buyreq-mine-list { display: flex; flex-direction: column; gap: 10px; }
.gab-buyreq-mine-empty { display: flex; align-items: center; gap: 8px; color: var(--gab-gray-500); font-size: 13.5px; padding: 18px 4px; }
.gab-buyreq-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--gab-gray-50); border: 1px solid var(--gab-gray-200); border-radius: 12px; padding: 13px 16px; }
.gab-buyreq-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gab-buyreq-item-main b { font-size: 14px; color: var(--gab-gray-900); font-weight: 800; }
.gab-buyreq-item-meta { font-size: 12px; color: var(--gab-gray-500); }
.gab-buyreq-status { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.gab-buyreq-status--open { background: color-mix(in srgb, var(--gab-bronze-500) 15%, #fff); color: var(--gab-bronze-600); }
.gab-buyreq-status--matched { background: color-mix(in srgb, #16A34A 15%, #fff); color: #15803D; }
.gab-buyreq-status--closed { background: var(--gab-gray-200); color: var(--gab-gray-600); }
@media (max-width: 640px) {
	.gab-buyreq-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}