/* Existing Bear Music palette and layouts; shared fixes across public pages. */
:root { --gray-400: #716e68; --action-green: #087a38; }
html { scroll-padding-top: 88px; }
body { overflow-wrap: break-word; }
a, button { -webkit-tap-highlight-color: rgba(8,122,56,.16); }
:focus-visible { outline: 3px solid var(--action-green); outline-offset: 4px; }
::selection { color: #fff; background: var(--action-green); }
.skip-link { position: fixed; top: 8px; left: 16px; transform: translateY(-180%); z-index: 1000; background: #fff; color: #0f0f0f; padding: 12px 20px; border: 2px solid var(--action-green); border-radius: 8px; }
.skip-link:focus { transform: none; }
#main-content { min-width: 0; }
button { font-family: inherit; }
.nav a, #mobile-menu a { touch-action: manipulation; }
#mobile-menu { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
#mobile-menu-btn { min-width: 44px; min-height: 44px; }
.nav-links li:focus-within .nav-dropdown { display: block !important; }
.nav-dropdown::before { content: ''; position: absolute; height: 12px; top: -12px; left: 0; right: 0; border: 0; transform: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-dropdown a { display: flex; min-height: 44px; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; color: #0f0f0f; }
a[href*="talk.naver.com"] { background: var(--action-green) !important; color: #fff !important; }
a[href*="talk.naver.com"]:hover { opacity: 1; filter: brightness(.92); }
.footer-info a { display: inline-block; padding-block: 4px; text-underline-offset: 3px; }
.hero .hero-desc, .hero .hero-sub, .hero .hero-title-ko { color: #b7b4ae; }
.hero .info-label, .hero .stat-wide-text { color: #b7b4ae; }
.hero .info-value { color: #fff; }
.hero .info-badge { color: #70dfa0; }
.course-title { font-size: 40px; font-weight: 700; line-height: 1.25; letter-spacing: -.5px; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.course-summary { font-size: 16px; color: #b7b4ae; line-height: 1.8; margin: 0 0 24px; max-width: 46ch; }
.course-content { position: relative; z-index: 1; min-width: 0; }
.section-title { text-wrap: balance; }
.faq-q { width: 100%; text-align: left; border: 0; background: transparent; font-family: inherit; line-height: 1.6; cursor: pointer; }
.faq-q[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); }
.faq-a[hidden] { display: none !important; }
.quiz-toggle { width: 100%; border: 0; background: #fff; text-align: left; font: inherit; }
.quiz-toggle > span:first-child { display: flex; flex-direction: column; }
#quiz-question:focus { outline: none; }
#quiz-options button:disabled { cursor: wait; }
.tab-nav { scroll-margin-top: 80px; }
.tab-btn { min-height: 48px; }
.tab-btn[aria-selected="true"] { font-weight: 700; }
.directions-link { color: inherit; text-underline-offset: 3px; }
.group-banner-btn { background: var(--action-green) !important; }
.footer-copy { color: #716e68; }
.atelier-label, .atelier-floor-label { color: #b7b4ae; }
.atelier-feat span, .cta-banner .section-label { color: #b7b4ae !important; }
.section-dark .section-label, .section-dark .section-desc-white { color: #b7b4ae; }
:is(.hero, .section-dark, .ensemble-hero, .atelier-section, [style*="background:#0f0f0f"], [style*="background: #0f0f0f"])
:is([style*="color:#555"], [style*="color: #555"], [style*="color:#666"], [style*="color: #666"], [style*="color:#777"], [style*="color: #777"]) { color: #b7b4ae !important; }
.hero-label, .section-label, .instr-sub, .step-tag, .info-label, .prog-tag { font-size: 11px; }
#quiz-arrow { display: block; }
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none !important; }
  #mobile-menu-btn { display: flex; }
  #mobile-menu a { min-height: 44px; display: flex !important; align-items: center; }
  #mobile-menu a[href*="talk.naver.com"] { justify-content: center; }
  .course-title { font-size: 30px; }
  .course-summary { font-size: 15px; }
  .section-title { word-break: keep-all; }
  #quiz-options { grid-template-columns: 1fr !important; }
  #quiz-options button { font-size: 16px !important; }
  .tab-nav { overflow-x: auto; justify-content: flex-start; white-space: nowrap; }
  .tab-btn { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-dot, .hero-badge span, .section-alt a span { animation: none; }
  .nav a, .instr-card, .prog-card, .faq-arrow, #quiz-arrow, #quiz-progress { transition: none; }
}