/* 20-pyeong-balcony-remodeling.html 전용 — 분할형 히어로 + 평면 다이어그램 */
:root {
  --color-primary: #2B5058;
  --color-secondary: #6E9C93;
  --color-accent: #D1A566;
  --color-bg: #F1F6F6;
  --color-surface: #FFFFFF;
  --color-text: #1B2C2E;
  --color-text-muted: #516364;
  --color-border: rgba(43, 80, 88, 0.16);
  --font-display: 'Jost', 'Gothic A1', sans-serif;
  --font-body: 'Gothic A1', sans-serif;
}

.split-plan { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 860px) { .split-plan { grid-template-columns: 1fr; } }
.plan-visual { border-radius: var(--radius-lg); background: var(--color-surface); border: 1px dashed var(--color-border); padding: var(--space-5); }
.plan-visual svg { width: 100%; height: auto; }

.stack-figures { max-width: 480px; margin: 0 auto; display: grid; gap: var(--space-4); }
.stack-figures figure { margin: 0; }
.stack-figures img { width: 100%; border-radius: var(--radius-md); display: block; }
.stack-figures figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }
.stack-figures .badge { display: block; text-align: center; font-size: var(--fs-sm); letter-spacing: 0.12em; font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-2); }