/* 브릭스사주 만세력 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=Noto+Sans+KR:wght@400;500;700;800&display=swap');
.brix-saju { --bs-ink:#1f1a2e; --bs-sub:#6b6580; --bs-line:#e6e1f0; --bs-accent:#6b3fa0; --bs-gold:#c9a24a;
	max-width: 760px; margin: 0 auto; color: var(--bs-ink); font-size: 16px; line-height: 1.6; }
.brix-saju * { box-sizing: border-box; }
.bs-form { background: #fff; border: 1px solid var(--bs-line); border-radius: 16px; padding: 22px; box-shadow: 0 6px 24px rgba(60,30,110,.06); }
.bs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bs-row.bs-col { flex-direction: column; align-items: stretch; }
.bs-label { width: 100%; font-weight: 700; font-size: 14px; color: var(--bs-sub); }
.bs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--bs-line); border-radius: 999px; cursor: pointer; background: #faf8fd; }
.bs-chip input { accent-color: var(--bs-accent); }
.bs-form select, .bs-form textarea { padding: 9px 10px; border: 1px solid var(--bs-line); border-radius: 10px; font-size: 15px; background: #fff; }
.bs-form textarea { width: 100%; resize: vertical; }
.bs-btn { display: block; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#6b3fa0,#3a2766); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.bs-btn:disabled { opacity: .6; cursor: default; }
.bs-note { margin: 10px 0 0; font-size: 12.5px; color: var(--bs-sub); text-align: center; }
.bs-result { margin-top: 26px; }
.bs-h { margin: 26px 0 10px; font-size: 19px; }
.bs-h small { font-weight: 400; font-size: 13px; color: var(--bs-sub); margin-left: 6px; }
.bs-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.bs-pillar { text-align: center; border: 1px solid var(--bs-line); border-radius: 14px; padding: 8px 6px; background: #fff; }
.bs-pillar:nth-child(2) { border-color: var(--bs-gold); box-shadow: 0 0 0 2px rgba(201,162,74,.25); }
.bs-plabel { font-size: 12.5px; color: var(--bs-sub); font-weight: 700; }
.bs-tg { font-size: 12.5px; color: var(--bs-accent); margin: 4px 0; }
.bs-gan { border-radius: 10px; padding: 8px 0 4px; margin: 4px 0; color: #fff; }
.bs-gan b { display: block; font-size: 30px; line-height: 1.1; font-family: "Noto Serif KR","Batang",serif; }
.bs-gan small { font-size: 11.5px; opacity: .9; }
.bs-unknown .bs-gan { background: #eee; color: #999; font-size: 26px; }
.bs-wood { background: #3f8f5a; } .bs-fire { background: #d1493f; } .bs-earth { background: #c08a2e; }
.bs-metal { background: #8a8f9c; } .bs-water { background: #2b3a67; }
.bs-elements { display: grid; gap: 6px; }
.bs-el { display: flex; align-items: center; gap: 10px; }
.bs-dot { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: serif; }
.bs-bar { flex: 1; height: 10px; background: #f0edf6; border-radius: 6px; overflow: hidden; }
.bs-bar i { display: block; height: 100%; border-radius: 6px; }
.bs-luck { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 6px; }
.bs-lp { min-width: 64px; text-align: center; border: 1px solid var(--bs-line); border-radius: 12px; padding: 6px 4px; background: #fff; position: relative; }
.bs-lp b { display: block; font-size: 20px; font-family: serif; }
.bs-lp small { display: block; font-size: 11px; color: var(--bs-sub); }
.bs-lp.bs-on { border-color: var(--bs-accent); background: #f4effb; }
.bs-lp em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--bs-accent); color: #fff; font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.bs-meta { margin-top: 12px; font-size: 14px; color: var(--bs-sub); }
.bs-ai { margin-top: 24px; }
.bs-ai-out { margin-top: 16px; }
.bs-ai-out h4 { margin: 18px 0 6px; color: var(--bs-accent); font-size: 16px; }
.bs-ai-out p { margin: 0 0 8px; }
.bs-cta { margin-top: 18px; padding: 14px; border-radius: 12px; background: #fbf6e9; border: 1px dashed var(--bs-gold); font-size: 14.5px; }
.bs-error { color: #b32d2e; }
@media (max-width: 520px) { .bs-gan b { font-size: 24px; } .bs-form { padding: 16px; } }

/* 주문 */
.bs-order-box { margin-top: 30px; padding: 20px; border: 1px solid var(--bs-gold); border-radius: 16px; background: #fffdf7; }
.bs-order-box .bs-h { margin-top: 0; }
.bs-desc { font-size: 14.5px; color: var(--bs-sub); }
.bs-order-form input[type=text], .bs-order-form input:not([type]), .bs-order-form input[type=email] { width: 100%; padding: 10px 12px; border: 1px solid var(--bs-line); border-radius: 10px; font-size: 15px; }
.bs-agree { display: block; font-size: 13.5px; margin: 6px 0 14px; line-height: 1.6; }
.bs-agree a { color: var(--bs-accent); }
.bs-btn.bs-gold { background: linear-gradient(135deg,#d6ae52,#a8802c); }
.bs-btn.bs-link { display: inline-block; width: auto; padding: 12px 20px; text-decoration: none; font-size: 15px; }
.bs-bank { background: #f7f3fc; border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.bs-bank p { margin: 4px 0; }
.bs-ok { color: #1a7f37; font-weight: 700; }
.bs-order .bs-h small { color: var(--bs-accent); font-weight: 700; }

/* ===== 랜딩 (첫 화면) ===== */
body.home { background: #f7f5fb; }
body.home, body.home .wp-site-blocks { font-family: 'Noto Sans KR', system-ui, sans-serif; }
body.home .wp-block-post-title { display: none; }
body.home main.wp-block-group, body.home main.wp-block-group > .wp-block-group { margin-top: 0 !important; padding-top: 0 !important; }
body.home .wp-block-post-content { margin-top: 0 !important; }
body.home header.wp-block-template-part { background: #150f33; }
body.home header .wp-block-site-title a, body.home header .wp-block-navigation a, body.home header .wp-block-navigation-item__content { color: #f1ecff !important; }
body.home header .wp-block-navigation__responsive-container-open { color: #fff; }
body.home .wp-block-post-content > * { max-width: 980px !important; }
body.home .wp-block-post-content > .bx-full, body.home .wp-block-post-content > .alignfull { max-width: none !important; }
.bx-full { margin-top: 0 !important; }
.bx-hero { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 88px 20px 96px;
	background: radial-gradient(120% 90% at 50% 0%, #4b2a8a 0%, #2a1a5c 45%, #150f33 100%); }
.bx-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: linear-gradient(transparent, #f7f5fb); }
.bx-stars { position: absolute; inset: 0; background-image:
	radial-gradient(2px 2px at 12% 22%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 70%, #fff6 50%, transparent 51%),
	radial-gradient(2px 2px at 78% 18%, #ffe9a8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 60%, #fff7 50%, transparent 51%),
	radial-gradient(2.5px 2.5px at 60% 35%, #ffe9a8aa 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 12%, #fff6 50%, transparent 51%),
	radial-gradient(1.5px 1.5px at 20% 88%, #fff5 50%, transparent 51%), radial-gradient(2px 2px at 70% 85%, #fff6 50%, transparent 51%); }
.bx-hero-in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.bx-badge { display: inline-block; padding: 6px 14px; border: 1px solid #ffffff40; border-radius: 999px; font-size: 13px; color: #e6dcff; background: #ffffff12; }
.bx-hero-sub { margin: 22px 0 4px; font-size: 18px; color: #d8ccf5; }
.bx-hero-title { margin: 0 0 18px; font-family: 'Gowun Batang', serif; font-size: clamp(32px, 6vw, 52px); line-height: 1.25; color: #fff; }
.bx-hero-desc { margin: 0 0 30px; font-size: 16.5px; line-height: 1.8; color: #d9d0ee; }
.bx-hero-note { margin-top: 14px; font-size: 13px; color: #bfb3df; }
.bx-cta { display: inline-block; padding: 16px 34px; border-radius: 14px; background: linear-gradient(135deg, #f0cf72, #c9a24a); color: #2a1a4d !important; font-weight: 800; font-size: 17px; text-decoration: none !important; box-shadow: 0 10px 30px rgba(201,162,74,.35); transition: transform .15s; }
.bx-cta:hover { transform: translateY(-2px); }
.bx-cta-sm { padding: 13px 22px; font-size: 15.5px; display: block; text-align: center; }
.bx-sec { max-width: 980px; margin: 64px auto 0 !important; padding: 0 20px; }
.bx-eyebrow { margin: 0; color: #6b3fa0; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.bx-h2 { margin: 6px 0 24px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: #1f1a2e; line-height: 1.35; }
.bx-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bx-topic { display: flex; flex-direction: column; gap: 4px; padding: 22px 18px; border-radius: 18px; background: #fff; border: 1px solid #ebe5f5; text-decoration: none !important; color: #1f1a2e !important; box-shadow: 0 6px 20px rgba(60,30,110,.06); transition: transform .15s, box-shadow .15s; }
.bx-topic:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60,30,110,.12); }
.bx-topic b { font-size: 17px; }
.bx-topic small { color: #7a7290; font-size: 13.5px; }
.bx-ico { font-size: 30px; margin-bottom: 6px; }
.bx-anchor { position: relative; top: -80px; }
body.home .brix-saju { margin-top: 28px !important; }
.bx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bx-step { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #ebe5f5; }
.bx-step span { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: #6b3fa0; color: #fff; font-weight: 800; margin-bottom: 10px; }
.bx-step b { display: block; font-size: 17px; margin-bottom: 6px; }
.bx-step p { margin: 0; color: #6b6580; font-size: 14.5px; line-height: 1.7; }
.bx-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.bx-plan { position: relative; padding: 28px 24px; border-radius: 20px; background: #fff; border: 1px solid #ebe5f5; display: flex; flex-direction: column; }
.bx-plan-best { border: 2px solid #c9a24a; background: linear-gradient(180deg, #fffaf0, #fff); box-shadow: 0 14px 34px rgba(201,162,74,.18); }
.bx-ribbon { position: absolute; top: -12px; right: 20px; background: #c9a24a; color: #fff; font-size: 12.5px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.bx-plan-name { margin: 0; font-weight: 700; color: #4a3a6a; }
.bx-price { margin: 6px 0 14px; font-size: 34px; font-weight: 800; color: #1f1a2e; }
.bx-plan ul { margin: 0 0 20px; padding-left: 0; list-style: none; flex: 1; }
.bx-plan li { padding: 7px 0 7px 26px; position: relative; font-size: 15px; border-bottom: 1px dashed #eee6f5; }
.bx-plan li::before { content: "✓"; position: absolute; left: 4px; color: #6b3fa0; font-weight: 800; }
.bx-btn-line { display: block; text-align: center; padding: 13px; border-radius: 14px; border: 1.5px solid #6b3fa0; color: #6b3fa0 !important; font-weight: 700; text-decoration: none !important; }
.bx-sample { position: relative; padding: 26px 26px 10px; border-radius: 20px; background: #fff; border: 1px solid #ebe5f5; max-height: 330px; overflow: hidden; }
.bx-sample h4 { margin: 14px 0 6px; color: #6b3fa0; font-size: 16px; }
.bx-sample p { margin: 0 0 8px; line-height: 1.85; color: #333; }
.bx-sample-tag { display: inline-block; font-size: 12.5px; color: #8a7a52; background: #fbf3df; padding: 3px 10px; border-radius: 8px; }
.bx-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(transparent, #fff); }
.bx-faq details { background: #fff; border: 1px solid #ebe5f5; border-radius: 14px; padding: 16px 20px; margin-bottom: 10px; }
.bx-faq summary { cursor: pointer; font-weight: 700; color: #1f1a2e; }
.bx-faq details p { margin: 10px 0 0; color: #5d5670; line-height: 1.8; }
.bx-faq a { color: #6b3fa0; }
body.home .bx-posts { max-width: 940px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bx-posts li { background: #fff; border: 1px solid #ebe5f5; border-radius: 16px; padding: 18px; list-style: none; margin: 0 !important; width: auto !important; }
@media (max-width: 760px) { body.home .bx-posts { grid-template-columns: 1fr; padding: 0 20px !important; } }
.bx-form-head { text-align: center; }
.bx-form-head .bx-h2 { margin-bottom: 4px; }
.bx-form-head p { margin: 0; color: #6b6580; }
.bx-posts a { color: #1f1a2e; font-weight: 700; text-decoration: none; }
.bx-posts .wp-block-latest-posts__post-excerpt { color: #6b6580; font-size: 14px; margin-top: 8px; }
.bx-final { max-width: 980px; margin: 70px auto 60px !important; padding: 48px 20px; text-align: center; border-radius: 24px; color: #fff;
	background: radial-gradient(120% 120% at 50% 0%, #4b2a8a, #1c1442); }
.bx-final h2 { margin: 0 0 8px; color: #fff; font-family: 'Gowun Batang', serif; font-size: clamp(24px, 4vw, 34px); }
.bx-final p { margin: 0 0 24px; color: #d9d0ee; }
@media (max-width: 760px) {
	.bx-topics { grid-template-columns: 1fr 1fr; }
	.bx-steps, .bx-plans { grid-template-columns: 1fr; }
	.bx-hero { padding: 64px 18px 80px; }
}

/* 상품 선택 */
.bs-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bs-prod { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px 40px; border: 1.5px solid #e6def3; border-radius: 14px; background: #fff; cursor: pointer; }
.bs-prod input { position: absolute; left: 14px; top: 17px; accent-color: #6b3fa0; }
.bs-prod b { font-size: 15px; }
.bs-prod .bs-pp { font-weight: 800; color: #6b3fa0; }
.bs-prod small { color: #7a7290; font-size: 12.5px; line-height: 1.5; }
.bs-prod.bs-on { border-color: #c9a24a; background: #fffaf0; box-shadow: 0 6px 18px rgba(201,162,74,.15); }
@media (max-width: 560px) { .bs-prods { grid-template-columns: 1fr; } }
.bx-plans-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .bx-plans-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bx-plans-4 { grid-template-columns: 1fr; } }
.bx-plan .bx-price { font-size: 28px; }

/* 0.6.0 */
.brix-saju .bs-free{background:linear-gradient(135deg,#fff4d6,#ffe9b0);border:1px solid #e7c46a;color:#5a4300;border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:14px;line-height:1.6}
.brix-saju .bs-note{font-size:12.5px;color:#7a7390;margin:-4px 0 10px;line-height:1.6}

/* 0.7.0 */
.bx-plans.bx-plans-5{grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1100px){.bx-plans.bx-plans-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.bx-plans.bx-plans-5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bx-plans.bx-plans-5{grid-template-columns:1fr}}
.bx-plans-5 .bx-cta,.bx-plans-5 .bx-btn-line{white-space:nowrap;font-size:15px;padding-left:10px;padding-right:10px}
.brix-saju .bs-mbti-row select{max-width:280px}

/* 결제 방법 (0.9.0) */
.bs-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bs-pay { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px 38px; border: 1.5px solid #e6def3; border-radius: 14px; background: #fff; cursor: pointer; }
.bs-pay input { position: absolute; left: 13px; top: 15px; accent-color: #6b3fa0; }
.bs-pay b { font-size: 15px; }
.bs-pay small { color: #7a7290; font-size: 12.5px; }
.bs-pay.bs-on { border-color: #f7d000; background: #fffbe0; }
.bs-pay-row[hidden] { display: none; }
@media (max-width: 560px) { .bs-pays { grid-template-columns: 1fr; } }
/* ===== 0.11.0 결과 화면 이야기형 ===== */
.bs-loading { text-align: center; padding: 34px 16px 30px; }
.bs-orb { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; background: conic-gradient(#f3d27a, #8b5cf6, #3a2766, #f3d27a); animation: bsSpin 1.4s linear infinite; box-shadow: 0 0 30px rgba(139,92,246,.35); }
@keyframes bsSpin { to { transform: rotate(360deg); } }
.bs-load-t { font-weight: 800; font-size: 18px; color: #3a2766; margin: 0 0 12px; }
.bs-loading ul { list-style: none; padding: 0; margin: 0 auto; max-width: 300px; text-align: left; }
.bs-loading li { color: #b4abc8; padding: 5px 0 5px 26px; position: relative; font-size: 14.5px; transition: color .3s; }
.bs-loading li::before { content: '○'; position: absolute; left: 4px; }
.bs-loading li.on { color: #3a2766; font-weight: 700; }
.bs-loading li.on::before { content: '✓'; color: #16a34a; }
.bs-story { margin-bottom: 18px; }
.bs-kicker { text-align: center; color: #7a6aa6; font-size: 14px; margin: 0 0 10px; letter-spacing: .5px; }
.bs-char { display: flex; gap: 16px; align-items: center; border-radius: 20px; padding: 20px 18px; color: #fff; background: linear-gradient(135deg,#4b2a8a,#241650); box-shadow: 0 10px 30px rgba(36,22,80,.25); }
.bs-ch-wood { background: linear-gradient(135deg,#2f7a4b,#173d29); } .bs-ch-fire { background: linear-gradient(135deg,#c2413a,#5c1a2a); } .bs-ch-earth { background: linear-gradient(135deg,#b07a1e,#5a3c0e); } .bs-ch-metal { background: linear-gradient(135deg,#6f7787,#2d3340); } .bs-ch-water { background: linear-gradient(135deg,#2b3a67,#111a35); }
.bs-char-ico { font-size: 52px; line-height: 1; width: 78px; height: 78px; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: 50%; flex: none; }
.bs-char-txt small { opacity: .8; font-size: 13px; }
.bs-char-txt h2 { margin: 2px 0 6px; font-size: 24px; line-height: 1.3; color: #fff !important; }
.bs-char-txt, .bs-char-txt p, .bs-char-txt small { color: #fff !important; }
.bs-char-txt h2 span { font-size: 15px; font-weight: 600; opacity: .85; }
.bs-char-txt p { margin: 0 0 10px; font-size: 15px; opacity: .95; }
.bs-chips span { display: inline-block; background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px; font-size: 13px; margin: 0 6px 6px 0; }
.bs-share-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.bs-share, .bs-gh-link { flex: 1 1 200px; text-align: center; border: 1.5px solid #e2d8f3; background: #fff; color: #4b2a8a; border-radius: 12px; padding: 11px 12px; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none; }
.bs-gh-link { border-color: #f5c2d6; color: #b4235a; }
.bs-sum { display: grid; gap: 10px; }
.bs-sum-i { background: #fff; border: 1px solid #ece4f8; border-radius: 16px; padding: 14px 16px; }
.bs-sum-i b { display: block; color: #3a2766; margin-bottom: 4px; }
.bs-sum-i p { margin: 0; line-height: 1.7; font-size: 15px; color: #3b3550; }
.bs-sum-i em { font-style: normal; font-weight: 800; color: #6b3fa0; background: linear-gradient(transparent 60%, #f3e6ff 60%); }
.bs-tease { margin-top: 12px; background: #fffaf0; border: 1.5px dashed #e6c36a; border-radius: 16px; padding: 14px 16px; }
.bs-tease p { margin: 0; line-height: 1.75; font-size: 15px; color: #4a3b1a; }
.bs-qs { margin: 18px 0; }
.bs-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bs-q { display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; border: 1.5px solid #ece4f8; border-radius: 16px; padding: 14px; cursor: pointer; text-decoration: none; color: inherit; font: inherit; transition: .15s; }
.bs-q:hover { border-color: #c9a24a; box-shadow: 0 6px 18px rgba(201,162,74,.18); }
.bs-q-ico { font-size: 22px; }
.bs-q b { font-size: 15.5px; color: #2b1d55; }
.bs-q small { color: #7a7290; font-size: 12.5px; line-height: 1.5; }
.bs-q-lock { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #a07a1e; }
.bs-q-gh { border-color: #f5c2d6; background: #fff7fa; }
.bs-q-gh .bs-q-lock { color: #b4235a; }
.bs-trust { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; }
.bs-trust span, .bs-trust a { font-size: 12.5px; background: #f4f0fa; color: #4a3f66; border-radius: 999px; padding: 5px 10px; text-decoration: none; }
.bs-trust a { background: #3a2766; color: #fff; font-weight: 700; }
.bs-detail { background: #fff; border: 1px solid #ece4f8; border-radius: 16px; padding: 4px 14px; margin: 0 0 18px; }
.bs-detail > summary { cursor: pointer; padding: 12px 2px; font-weight: 800; color: #3a2766; list-style: none; }
.bs-detail > summary::-webkit-details-marker { display: none; }
.bs-detail > summary::after { content: '펼치기 ▾'; float: right; font-size: 13px; color: #8a7fb0; font-weight: 600; }
.bs-detail[open] > summary::after { content: '접기 ▴'; }
.bs-detail > summary small { font-weight: 500; color: #8a7fb0; font-size: 12.5px; margin-left: 6px; }
.bs-tg .bs-plain { display: block; font-style: normal; font-size: 10.5px; color: #8a7fb0; margin-top: 1px; }
.bs-gloss { margin: 14px 0 10px; background: #faf8fd; border-radius: 12px; padding: 12px 14px; }
.bs-gloss h4 { margin: 0 0 6px; color: #3a2766; }
.bs-gloss ul { margin: 0; padding-left: 18px; }
.bs-gloss li { margin: 4px 0; font-size: 13.5px; line-height: 1.6; color: #4a445c; }
@media (max-width: 560px) { .bs-qgrid { grid-template-columns: 1fr; } .bs-char { flex-direction: column; text-align: center; } .bs-char-txt h2 { font-size: 21px; } }

/* ===== 궁합 페이지 ===== */
.bg-wrap { max-width: 760px; margin: 0 auto; }
.bg-people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bg-person { background: #fff; border: 1.5px solid #ece4f8; border-radius: 18px; padding: 14px; }
.bg-person h3 { margin: 0 0 8px; font-size: 16px; color: #3a2766; }
.bg-person.me h3::before { content: '🙋 '; } .bg-person.you h3::before { content: '💗 '; }
.bg-person .bs-row { margin-bottom: 8px; }
.bg-score { text-align: center; margin: 18px 0 10px; }
.bg-ring { width: 150px; height: 150px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#e2547f var(--p), #f1e8f5 0); }
.bg-ring div { width: 118px; height: 118px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.bg-ring b { font-size: 40px; color: #b4235a; line-height: 1; }
.bg-ring small { display: block; color: #8a7fb0; font-size: 13px; }
.bg-label { font-size: 20px; font-weight: 800; color: #3a2766; }
.bg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.bg-pair .bs-char { padding: 14px; gap: 10px; }
.bg-pair .bs-char-ico { width: 54px; height: 54px; font-size: 32px; }
.bg-pair .bs-char-txt h2 { font-size: 17px; }
.bg-part { background: #fff; border: 1px solid #ece4f8; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.bg-part-h { display: flex; justify-content: space-between; align-items: baseline; }
.bg-part-h b { color: #3a2766; } .bg-part-h small { color: #8a7fb0; }
.bg-bar { height: 8px; background: #f1e8f5; border-radius: 6px; overflow: hidden; margin: 6px 0 8px; }
.bg-bar i { display: block; height: 100%; background: linear-gradient(90deg,#f59ab8,#e2547f); border-radius: 6px; }
.bg-part p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #3b3550; }
@media (max-width: 600px) { .bg-people, .bg-pair { grid-template-columns: 1fr; } }