/* beautypang 가이드 섹션 공통 스타일
 * 5개 도구(BMI·운동·임신·배란·체성분)에 일괄 적용
 * 도구별 색은 페이지에서 --guide-accent 변수로 override
 */

/* 한국어 줄맞춤 (전역) — 어절 단위 줄바꿈 + 제목 줄 균형 */
body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }

:root {
  --guide-accent: #2563eb;          /* 기본 (블루) */
  --guide-accent-dark: #1d4ed8;
  --guide-accent-soft: #dbeafe;
}

.guide-wrap { margin-top: 56px; }
.guide-intro-text { font-size: 15px; color: #475569; line-height: 1.75; max-width: 720px; margin: 0 auto 28px; text-align: center; }
.guide-intro-text b { color: #0f172a; }

/* 핵심 통계 박스 */
.guide-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 640px) { .guide-stats { grid-template-columns: 1fr; } }
.guide-stat { padding: 24px 20px; background: linear-gradient(135deg, var(--guide-accent) 0%, var(--guide-accent-dark) 100%); color: #fff; border-radius: 16px; text-align: center; position: relative; overflow: hidden; }
.guide-stat::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.08); border-radius: 50%; }
.guide-stat .stat-num { font-size: 32px; font-weight: 900; letter-spacing: -1px; line-height: 1; margin-bottom: 8px; position: relative; }
.guide-stat .stat-num small { font-size: 17px; font-weight: 700; opacity: 0.85; margin-left: 2px; }
.guide-stat .stat-label { font-size: 12px; opacity: 0.9; font-weight: 600; position: relative; line-height: 1.5; }
.guide-stat .stat-label b { color: #fff; font-weight: 800; }

/* 카드 그리드 */
.guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 720px) { .guide-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .guide-cards { grid-template-columns: 1fr; } }
.guide-card { padding: 20px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; transition: all 0.2s; position: relative; }
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(37,99,235,0.12); border-color: var(--guide-accent); }
.guide-card .gc-icon { font-size: 26px; line-height: 1; margin-bottom: 10px; display: block; }
.guide-card .gc-num { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--guide-accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.guide-card .gc-title { font-size: 14.5px; font-weight: 800; color: #0f172a; margin: 0 0 4px; line-height: 1.4; }
.guide-card .gc-key { font-size: 13px; font-weight: 700; color: var(--guide-accent); margin: 0 0 8px; }
.guide-card .gc-desc { font-size: 12.5px; color: #475569; line-height: 1.65; margin: 0; }
.guide-card .gc-personal { font-size: 12px; font-weight: 700; color: var(--guide-accent); background: var(--guide-accent-soft); padding: 6px 10px; border-radius: 8px; margin: 6px 0 8px; line-height: 1.4; }
.guide-card .gc-personal b { color: var(--guide-accent-dark); font-weight: 900; font-size: 13px; }
.guide-card .gc-personal .pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--guide-accent); margin-right: 4px; animation: guidepulse 1.4s ease-in-out infinite; }
.guide-card.highlight { border-color: var(--guide-accent); box-shadow: 0 0 0 3px var(--guide-accent-soft); }
.guide-card.highlight::after { content: '⭐ 추천'; position: absolute; top: -10px; left: 16px; padding: 3px 10px; background: var(--guide-accent); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; }
@keyframes guidepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }

/* 마무리 박스 */
.guide-outro { padding: 20px 22px; background: linear-gradient(135deg, var(--guide-accent-soft) 0%, #f8fafc 100%); border-radius: 14px; font-size: 14px; color: #0f172a; line-height: 1.75; text-align: center; }
.guide-outro b { color: var(--guide-accent-dark); }
.guide-outro .cta-tag { display: inline-block; margin-top: 10px; padding: 6px 14px; background: var(--guide-accent); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; }

/* 도구별 변주 (특화 시각화 — 추후 도구마다 옵션) */
.guide-bar { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px 20px; margin-bottom: 28px; }
.guide-bar h4 { font-size: 14px; margin: 0 0 14px; color: #0f172a; font-weight: 800; }
.guide-bar .gauge { position: relative; height: 38px; background: linear-gradient(90deg, #3b82f6 0%, #16a34a 25%, #16a34a 50%, #f97316 75%, #dc2626 100%); border-radius: 8px; overflow: hidden; }
.guide-bar .gauge-marker { position: absolute; top: -6px; bottom: -6px; width: 4px; background: #0f172a; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: left 0.3s; }
.guide-bar .gauge-marker::after { content: attr(data-label); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #0f172a; white-space: nowrap; }
.guide-bar .gauge-labels { display: flex; justify-content: space-between; margin-top: 28px; font-size: 11px; color: #64748b; font-weight: 600; }

/* 관련 계산기 정적 링크 (SEO — HTML에 직접 존재해야 크롤러가 링크 그래프를 본다) */
.bp-static-links { max-width: 960px; margin: 48px auto 32px; padding: 0 20px; }
.bp-static-links h2 { font-size: 15px; font-weight: 800; color: #475569; margin: 0 0 14px; letter-spacing: -0.2px; }
.bp-static-links-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-static-links-row a { display: inline-block; padding: 9px 15px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 13px; font-weight: 600; color: #475569; text-decoration: none; transition: all 0.15s ease; }
.bp-static-links-row a:hover { background: #2563eb; border-color: #2563eb; color: #fff; }