:root {
  --forest: #244c3a;
  --leaf: #8aaa6a;
  --sprout: #dce8c9;
  --sun: #f1cf86;
  --blossom: #efb5a5;
  --cream: #fbf7ee;
  --line: rgba(36, 76, 58, .18);
  --display: 'DM Serif Display', serif;
  --sans: 'Noto Sans KR', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }
body { margin: 0; background: var(--cream); color: var(--forest); font-family: var(--sans); line-height: 1.6; }
.skip-link { left: -999px; position: absolute; }
.skip-link:focus { background: white; left: 1rem; padding: .5rem; top: 1rem; z-index: 99; }
.site-header { align-items: center; backdrop-filter: blur(12px); background: rgba(251,247,238,.9); border-bottom: 1px solid var(--line); display: flex; height: 84px; justify-content: space-between; padding: 0 clamp(1.25rem,5vw,5rem); position: sticky; top: 0; z-index: 10; }
.brand { align-items: center; color: var(--forest); display: flex; font-size: .61rem; font-weight: 700; gap: .55rem; letter-spacing: .12em; line-height: 1.15; text-decoration: none; }
.brand-mark { align-items: center; border: 1px solid var(--forest); border-radius: 50% 50% 50% 12%; display: grid; font-family: var(--display); font-size: 1.35rem; height: 2.15rem; justify-content: center; letter-spacing: 0; transform: rotate(-12deg); width: 2.15rem; }
.main-nav { display: flex; font-size: .67rem; font-weight: 700; gap: clamp(1.25rem,3vw,3.4rem); letter-spacing: .12em; }
.main-nav a,.text-link { color: var(--forest); text-decoration: none; }
.main-nav a:hover,.text-link:hover { color: var(--leaf); }
.header-cta,.button { align-items: center; display: inline-flex; font-size: .72rem; font-weight: 700; gap: 1.2rem; justify-content: center; letter-spacing: .05em; text-decoration: none; }
.header-cta { background: var(--forest); color: white; padding: .72rem 1.2rem; }
.menu-button { background: transparent; border: 0; color: var(--forest); display: none; font: 700 .72rem var(--sans); letter-spacing: .08em; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 84px); overflow: hidden; padding: clamp(3.75rem,9vw,9rem) clamp(1.25rem,9vw,10rem) 2rem; position: relative; }
.eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .16em; margin: 0 0 1rem; }
.hero-copy { align-self: center; position: relative; z-index: 1; }
.hero h1,.section h2,.contact-section h2 { font-family: var(--display); font-size: clamp(3.6rem,7.4vw,7.1rem); font-weight: 400; letter-spacing: -.05em; line-height: .93; margin: 0; }
.hero h1 em,.story-intro em,.contact-section em { color: #c77461; }
.hero-description { font-size: clamp(.92rem,1.2vw,1.05rem); line-height: 1.9; margin: 2.15rem 0 2.4rem; }
.hero-actions { align-items: center; display: flex; gap: 2rem; }
.button { background: white; border: 1px solid var(--forest); color: var(--forest); padding: 1rem 1.25rem; }
.button-primary,.button-dark { background: var(--forest); color: white; }
.button span { font-size: 1rem; }
.hero-art { background: var(--sprout); min-height: 430px; overflow: hidden; position: relative; }
.hero-cube { display: none; }
.mobile-program-cubes { display: none; }
.hero-art:before { background: var(--leaf); border-radius: 100% 0 100% 0; content: ''; height: 54%; position: absolute; right: 10%; top: 7%; transform: rotate(25deg); width: 34%; }
.hero-art:after { background: var(--sun); border-radius: 50%; bottom: 13%; content: ''; height: 23%; left: 13%; position: absolute; width: 23%; }
.hero-orbit { border: 1px solid rgba(36,76,58,.5); border-radius: 50%; position: absolute; z-index: 1; }
.orbit-one { height: 55%; left: 16%; top: 23%; transform: rotate(-30deg); width: 33%; }
.orbit-two { height: 33%; right: 13%; top: 40%; transform: rotate(46deg); width: 67%; }
.hero-note { color: var(--forest); font: 8rem var(--display); line-height: 1; position: absolute; right: 19%; top: 24%; z-index: 2; }
.hero-note.note-small { bottom: 18%; font-size: 3.2rem; left: 23%; right: auto; top: auto; }
.hero-art p { bottom: 1rem; font-size: .61rem; font-weight: 700; letter-spacing: .15em; line-height: 1.25; margin: 0; position: absolute; right: 1.4rem; text-align: right; z-index: 2; }
.hero-footer { align-self: end; border-top: 1px solid var(--line); display: flex; font-size: .58rem; font-weight: 700; grid-column: 1/-1; justify-content: space-between; letter-spacing: .12em; margin-top: 3rem; padding-top: 1rem; }
.section { padding: clamp(5rem,10vw,10rem) clamp(1.25rem,9vw,10rem); }
.section-heading { max-width: 570px; }
.section h2,.contact-section h2 { font-size: clamp(2.75rem,5vw,5.1rem); line-height: .98; }
.section-heading > p:last-child { font-size: .95rem; margin-top: 1.8rem; }
.program-section { background: white; }.program-section .section-heading { max-width: 900px; }
.program-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; margin-top: 4.3rem; }
.program-card { display: flex; flex-direction: column; min-height: 520px; padding: 2rem; position: relative; }
.junior-card { background: var(--sprout); }.adult-card { background: #f7e7bb; }
.program-index { font-family: var(--display); font-size: 1.2rem; }
.card-label { font-size: .65rem; font-weight: 700; letter-spacing: .14em; margin: 4.5rem 0 1rem; }
.program-card h3 { font-family: var(--display); font-size: clamp(2.2rem,3.3vw,3.6rem); font-weight: 400; line-height: 1.05; margin: 0; }
.program-card ul { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 2.2rem 0; padding: 0; }
.program-card li { border: 1px solid rgba(36,76,58,.55); font-size: .62rem; font-weight: 700; letter-spacing: .05em; padding: .28rem .55rem; }
.card-link { color: var(--forest); font-size: .75rem; font-weight: 700; margin-top: auto; text-decoration: none; }.card-link span { font-size: 1.1rem; margin-left: .5rem; }
.press-section { background: #f2eadb; }.press-heading em { color: #c77461; }.press-feature-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3,1fr); margin-top: 4rem; }.press-feature { background: white; display: flex; flex-direction: column; overflow: hidden; }.press-feature img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }.press-feature-main,.press-feature-photo,.press-feature-trophy { grid-column: auto; min-height: 0; }.press-feature-main img { object-position: center; }.press-feature div { padding: 1.35rem 1.35rem 1.55rem; }.press-feature span { color: #bd715f; font-size: .61rem; font-weight: 700; letter-spacing: .13em; }.press-feature h3 { font-family: var(--display); font-size: clamp(1.45rem,2vw,2rem); font-weight: 400; line-height: 1.15; margin: .65rem 0; }.press-feature p { color: #5e6f61; font-size: .78rem; margin: 0; }.press-links { border-top: 1px solid var(--line); display: grid; margin-top: 4rem; }.press-links > p { font-size: .65rem; font-weight: 700; letter-spacing: .14em; margin: 1.3rem 0; }.press-links a { align-items: center; border-top: 1px solid var(--line); color: var(--forest); display: flex; font-size: clamp(.83rem,1.25vw,1rem); justify-content: space-between; padding: 1.2rem 0; text-decoration: none; }.press-links a:hover { color: #c77461; }.press-links span { font-size: .7rem; font-weight: 700; white-space: nowrap; }.press-links .press-blog-link { background: var(--forest); color: white; justify-content: center; gap: 1rem; margin-top: 1.5rem; padding: 1rem; width: fit-content; }
.press-feature-grid { gap: 1rem; grid-template-columns: repeat(4,1fr); }.press-feature img { aspect-ratio: 1 / 1; }.press-feature-main,.press-feature-photo,.press-feature-trophy,.press-feature-competition { grid-column: auto; min-height: 0; }.press-feature-competition img { object-position: center top; }.press-feature div { padding: 1.2rem 1.1rem 1.35rem; }.press-feature span { font-size: .57rem; letter-spacing: .1em; }.press-feature h3 { font-size: clamp(1.2rem,1.6vw,1.65rem); }.press-feature p { font-size: .72rem; }
.story-section { background: var(--forest); color: var(--cream); }.story-section .eyebrow { color: var(--sun); }.story-intro { max-width: 650px; }.story-intro p:last-of-type { color: #d6e4d2; font-size: .95rem; margin-top: 1.8rem; }
.story-grid { display: grid; gap: 1.25rem; grid-template-columns: 1.08fr .92fr; grid-template-rows: 260px 260px; margin-top: 4rem; }
.story-photo { align-items: end; background: #183d2d; background-position: center; background-repeat: no-repeat; background-size: contain; display: flex; margin: 0; overflow: hidden; padding: 1.5rem; position: relative; }.photo-one { background-image: url('assets/images/%EC%A0%84%EA%B5%AD%ED%95%99%EC%83%9D%EC%9D%8C%EC%95%85%EC%BD%A9%EC%BF%A0%EB%A5%B4.jpg'); grid-row: span 2; }.photo-two { background-image: url('assets/images/%ED%8A%B8%EB%A1%9C%ED%94%BC.jpg'); }.photo-three { background-image: url('assets/awards/%ED%95%9C%EA%B5%AD%EC%86%8C%EB%B9%84%EC%9E%90%EC%82%B0%EC%97%85%ED%8F%89%EA%B0%80_%EC%9D%8C%EC%95%85%EB%B6%80%EB%AC%B8%EC%9A%B0%EC%88%98_20206.jpg'); }.story-photo:after { background: linear-gradient(transparent 40%,rgba(0,0,0,.46)); content: ''; inset: 0; position: absolute; }.story-photo figcaption { color: white; font-size: .66rem; font-weight:700; letter-spacing: .1em; z-index: 1; }.story-photo figcaption span { font-size: .72rem; font-weight: 400; letter-spacing: 0; }.photo-notice { color: #c2d3bd; font-size: .67rem; margin: 1rem 0 0; }
.story-video { background: #183d2d; grid-row: span 2; }.story-video video { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.story-grid { grid-template-columns: 1.16fr 1.16fr .82fr .82fr; grid-template-rows: 220px 220px 220px; }.story-video:not(.story-archive-video) { grid-column: 1 / span 2; grid-row: 1 / span 3; }.story-group { grid-column: 3 / span 2; grid-row: 1; }.story-stage { grid-column: 3; grid-row: 2; }.story-trophy { grid-column: 3; grid-row: 3; }.story-archive-video { grid-column: 4; grid-row: 2 / span 2; }
.story-photo { background-image: none; isolation: isolate; }.story-photo::before { background: center / cover var(--story-image) no-repeat; content: ''; filter: blur(18px); inset: -24px; opacity: .52; position: absolute; transform: scale(1.08); z-index: 0; }.story-photo::after { z-index: 2; }.story-photo figcaption { z-index: 3; }.story-image,.story-video video { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; z-index: 1; }.story-video { --story-image: url('assets/strory/%EC%97%B0%EC%A3%BC%ED%9A%8C%EC%82%AC%EC%A7%84.jpg'); }.story-archive-video { --story-image: url('assets/strory/%EC%A0%84%EA%B5%AD%ED%95%99%EC%83%9D%EC%9D%8C%EC%95%85%EC%BD%A9%EC%BF%A0%EB%A5%B4.jpg'); }.story-recital { --story-image: url('assets/strory/%EC%97%B0%EC%A3%BC%ED%9A%8C%EC%82%AC%EC%A7%84.jpg'); }.story-group { --story-image: url('assets/strory/%EB%8B%A8%EC%B2%B4%EC%82%AC%EC%A7%84.jpg'); }.story-stage { --story-image: url('assets/strory/%EC%A0%84%EA%B5%AD%ED%95%99%EC%83%9D%EC%9D%8C%EC%95%85%EC%BD%A9%EC%BF%A0%EB%A5%B4.jpg'); }.story-trophy { --story-image: url('assets/strory/%ED%8A%B8%EB%A1%9C%ED%94%BC.jpg'); }
.story-video:not(.story-archive-video) video { object-fit: cover; }
.tuition-section { background: #eaf0df; }.tuition-box { background: white; margin-top: 4rem; padding: clamp(2rem,5vw,5rem); }.tuition-placeholder { max-width: 560px; }.tuition-placeholder > span { color: #c77461; font-size: .62rem; font-weight: 700; letter-spacing: .14em; }.tuition-placeholder h3 { font-family: var(--display); font-size: clamp(2.4rem,4vw,4rem); font-weight: 400; line-height: 1.05; margin: 1.2rem 0; }.tuition-placeholder p { font-size: .9rem; margin-bottom: 2rem; }.tuition-footnote { border-top: 1px solid var(--line); color: #627766; font-size: .68rem; margin: 4.5rem 0 0; padding-top: 1rem; }
.contact-section { background: var(--sun); display: grid; gap: clamp(3rem,9vw,10rem); grid-template-columns: 1fr 1fr; padding: clamp(5rem,10vw,10rem); }.contact-copy > p:last-child { font-size: .95rem; margin-top: 1.8rem; }.location-card { background: var(--cream); margin-top: 2.4rem; max-width: 560px; overflow: hidden; }.location-map { display: block; overflow: hidden; position: relative; text-decoration: none; }.location-map img { display: block; height: auto; width: 100%; }.location-map span { background: rgba(255,255,255,.92); color: var(--forest); font-size: .68rem; font-weight: 700; left: 1rem; padding: .55rem .65rem; position: absolute; text-decoration: none; top: 1rem; }.location-details { display: flex; flex-direction: column; gap: .28rem; padding: 1.1rem 1.2rem; }.location-details strong { font-size: .75rem; letter-spacing: .07em; }.location-details span { font-size: .72rem; }.location-details a { color: var(--forest); font-size: .7rem; font-weight: 700; margin-top: .35rem; text-decoration: none; }.contact-actions { align-self: center; border-top: 1px solid var(--line); }.contact-button { align-items: center; border-bottom: 1px solid var(--line); color: var(--forest); display: grid; gap: .5rem; grid-template-columns: 2.5rem 1fr auto; min-height: 78px; text-decoration: none; }.contact-button span { font: 1.15rem var(--display); }.contact-button strong { font-size: .88rem; }.contact-button small { color: #5e6650; font-size: .66rem; grid-column: 2; line-height: 1; margin-top: -1.5rem; }.contact-button b { font-size: 1.15rem; }.primary-contact { background: var(--forest); border: 0; color: white; margin: 1rem 0; padding: 0 1rem; }.primary-contact small { color: #d6e4d2; }.contact-pending { cursor: default; opacity: .65; pointer-events: none; }.mobile-quick-actions { display: none; }
.site-footer { align-items: end; background: var(--forest); color: #cde0c9; display: grid; font-size: .6rem; gap: 2rem; grid-template-columns: 1fr auto auto; padding: 3rem clamp(1.25rem,5vw,5rem); }.footer-brand { color: white; }.footer-brand .brand-mark { border-color: white; }.site-footer p { margin: 0; }

.contact-section { display: block; }.contact-header { align-items: end; display: grid; gap: clamp(3rem,9vw,10rem); grid-template-columns: 1fr 1fr; }.contact-description { font-size: .95rem; line-height: 1.9; margin: 0 0 .25rem; }.contact-detail-grid { align-items: start; display: grid; gap: clamp(3rem,9vw,10rem); grid-template-columns: 1fr 1fr; margin-top: 4rem; }.contact-detail-grid .location-card { margin-top: 0; }.contact-detail-grid .contact-actions { align-self: start; }

@media (max-width: 760px) { section[id] { scroll-margin-top: 82px; }.section h2,.contact-section h2 { line-height: 1.08; }.hero h1 { line-height: 1; } body { padding-bottom: 60px; }.site-header { height: 70px; }.header-cta { display: none; }.menu-button { display: block; }.main-nav { background: var(--cream); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 1rem; left: 0; padding: 1.25rem; position: absolute; right: 0; top: 70px; }.main-nav.open { display: flex; }.hero { gap: 3rem; grid-template-columns: 1fr; min-height: auto; padding-top: 4.2rem; }.hero-art { min-height: 340px; order: -1; }.hero-footer { font-size: .52rem; }.contact-section,.press-feature-grid { grid-template-columns: 1fr; }.program-grid { grid-auto-columns: calc(100% - 4rem); grid-auto-flow: column; grid-template-columns: none; margin-right: -1.25rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; scrollbar-width: none; }.program-grid::-webkit-scrollbar { display: none; }.program-card { min-height: 440px; scroll-snap-align: start; }.story-grid { grid-template-columns: 1fr; grid-template-rows: 300px 200px 200px; }.photo-one,.story-video { grid-row: auto; }.site-footer { gap: 1rem; grid-template-columns: 1fr; }.contact-button { min-height: 72px; }.hero h1 { font-size: 4rem; }.press-links a { gap: 1rem; }.mobile-quick-actions { background: var(--forest); bottom: 0; display: grid; grid-template-columns: repeat(3,1fr); left: 0; position: fixed; right: 0; z-index: 20; }.mobile-quick-actions a { color: white; font-size: .67rem; font-weight: 700; padding: 1.05rem .35rem; text-align: center; text-decoration: none; }.mobile-quick-actions a + a { border-left: 1px solid rgba(255,255,255,.25); } }

@media (max-width: 760px) { .contact-section { padding: 4.5rem 1.25rem; }.contact-section h2 { font-size: clamp(2.5rem, 10.5vw, 3.25rem); line-height: 1.05; }.contact-header,.contact-detail-grid { gap: 2.5rem; grid-template-columns: 1fr; }.contact-detail-grid { margin-top: 3rem; } }
@media (max-width: 760px) { .story-grid { grid-template-columns: 1fr; grid-template-rows: auto 200px 200px 200px 200px; }.story-video,.story-group,.story-stage,.story-trophy,.story-archive-video { grid-column: auto; grid-row: auto; }.story-video:not(.story-archive-video) { aspect-ratio: 16 / 10; grid-column: auto; grid-row: auto; } }

/* Mobile is intentionally composed as a compact, touch-first version rather than a reduced desktop layout. */
@media (max-width: 760px) {
  .hero { align-content: start; gap: 1.2rem; min-height: calc(100svh - 70px); padding: 1.35rem 1.25rem 1.5rem; }
  .hero-copy { align-self: auto; }
  .hero .eyebrow { margin-bottom: .55rem; }
  .hero h1 { font-size: clamp(3rem, 13vw, 4.15rem); line-height: .98; }
  .hero-description { font-size: .82rem; line-height: 1.7; margin: .8rem 0 1rem; }
  .hero-actions { gap: 1rem; }
  .hero-actions .button { padding: .8rem .95rem; }
  .hero-actions .text-link { font-size: .78rem; }
  .hero-art { aspect-ratio: 1 / .86; background: var(--cream); display: grid; gap: 4px; grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr .75fr; min-height: 0; order: 0; overflow: hidden; padding: 4px; }
  .hero-art::before,.hero-art::after,.hero-art .hero-orbit,.hero-art .hero-note,.hero-art > p { display: none; }
  .hero-cube { display: block; overflow: hidden; position: relative; }
  .cube-one { background: center 42% / cover url('assets/strory/%EB%8B%A8%EC%B2%B4%EC%82%AC%EC%A7%84.jpg') no-repeat; grid-column: 1 / -1; }
  .cube-two { background: center / cover url('assets/strory/%EC%A0%84%EA%B5%AD%ED%95%99%EC%83%9D%EC%9D%8C%EC%95%85%EC%BD%A9%EC%BF%A0%EB%A5%B4.jpg') no-repeat; }
  .cube-three { background: center / cover url('assets/strory/%ED%8A%B8%EB%A1%9C%ED%94%BC.jpg') no-repeat; }
  .hero-footer { display: none; }
  .section { padding: 4.5rem 1.25rem; }
  .section-heading > p:last-child { font-size: .84rem; margin-top: 1.15rem; }
  .program-grid { margin-top: 2.25rem; }
  .program-card { min-height: 390px; padding: 1.5rem; }
  .program-card h3 { font-size: 2.35rem; }
  .press-feature-grid { gap: 1rem; margin-top: 2.25rem; }
  .press-links { margin-top: 2.75rem; }
  .story-grid { margin-top: 2.5rem; }
  .story-intro p:last-of-type { font-size: .84rem; margin-top: 1.2rem; }
  .contact-detail-grid { margin-top: 2.5rem; }
}

@media (max-width: 760px) {
  .hero { display: block; min-height: 0; padding: 1.25rem 1.25rem 1.5rem; }
  .hero h1 { font-size: clamp(2.65rem, 11vw, 3.45rem); }
  .hero-description { display: none; }
  .hero-actions { display: none; }
  .hero-art { display: none; }
  .mobile-program-cubes { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; grid-template-rows: 205px 170px; margin-top: 1.15rem; }
  .mobile-course-art { background: var(--sprout); grid-column: 1 / -1; overflow: hidden; position: relative; }
  .mobile-course-art::before { background: var(--leaf); border-radius: 100% 0 100% 0; content: ''; height: 84%; position: absolute; right: 18%; top: 8%; transform: rotate(32deg); width: 25%; }
  .mobile-course-art::after { border: 1px solid rgba(36,76,58,.48); border-radius: 50%; content: ''; height: 82%; left: 24%; position: absolute; top: 9%; transform: rotate(-34deg); width: 34%; }
  .mobile-course-art span { color: var(--forest); font: 5.1rem var(--display); left: 39%; line-height: 1; position: absolute; top: 20%; z-index: 1; }
  .mobile-course-art i { color: var(--forest); font: 3rem var(--display); font-style: normal; left: 15%; line-height: 1; position: absolute; top: 59%; z-index: 1; }
  .mobile-course-art b { bottom: .85rem; font-size: .45rem; letter-spacing: .13em; line-height: 1.3; position: absolute; right: .85rem; text-align: right; z-index: 1; }
  .mobile-course-card { color: var(--forest); display: flex; flex-direction: column; padding: 1rem .8rem; text-decoration: none; }
  .mobile-junior { background: var(--sprout); }.mobile-adult { background: #f7e7bb; }
  .mobile-course-card small { font-size: .52rem; font-weight: 700; letter-spacing: .1em; }.mobile-course-card strong { font-family: var(--display); font-size: clamp(1.28rem, 5vw, 1.75rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; margin-top: auto; }.mobile-course-card em { font-size: .42rem; font-style: normal; font-weight: 700; letter-spacing: .04em; line-height: 1.55; margin-top: .6rem; }
  .program-section { display: none; }
  .mobile-quick-actions { background: var(--cream); border-top: 1px solid rgba(36,76,58,.22); box-shadow: 0 -8px 22px rgba(0,0,0,.14); }
  .mobile-quick-actions a { color: var(--forest); }
  .mobile-quick-actions a + a { border-left-color: rgba(36,76,58,.2); }
}