/* 호흡 패턴 선택 */
.breath-patterns {
    display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem;
}
.breath-btn {
    padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem;
    background: var(--bg); border: 1px solid var(--border);
}
.breath-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.breath-desc { text-align: center; color: var(--text-muted); margin-bottom: 2rem; }

/* 호흡 원형 */
.breath-area { display: flex; flex-direction: column; align-items: center; }
.breath-circle {
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(27,77,142,0.08); border: 4px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.5s ease; margin-bottom: 2rem;
}
.breath-circle.inhale {
    transform: scale(1.3);
    background: rgba(46,204,113,0.15); border-color: var(--secondary);
}
.breath-circle.exhale {
    transform: scale(0.85);
    background: rgba(52,152,219,0.15); border-color: var(--accent);
}
.breath-circle.hold {
    background: rgba(243,156,18,0.12); border-color: var(--warning);
}
.breath-inner { text-align: center; }
.breath-phase { display: block; font-size: 1.3rem; font-weight: 700; }
.breath-timer { display: block; font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }
.breath-controls { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.breath-cycles { font-size: 0.9rem; color: var(--text-muted); }