/* Dala 다크 시스템 — DESIGN.md 토큰. 블랙 캔버스, 제로 엘리베이션, weight로 위계 만들지 않음 */
:root {
  --void: #000000;
  --fg: #ffffff;
  --muted: #9a9a9a;
  --subtle: #bdbdbd;
  --iris: #8052ff;
  --spark: #ffb829;
  --verdant: #15846e;
  --hairline: rgba(255, 255, 255, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--void); color: var(--fg); font-family: "Pretendard Variable", Pretendard, Inter, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; line-height: 1.5; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(100% - 3rem, 80rem); margin: 0 auto; }

/* 전면 배경 파티클 필드 — 콘텐츠 뒤 고정, 저채도 부유 */
#bg-field { position: fixed; z-index: -2; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 타이포 — 헤드라인 전부 weight 400 + 음수 자간, 굵기 대비 금지 */
h1, h2, h3, p { margin-top: 0; font-weight: 400; }
h2 { margin-bottom: 1rem; font-size: clamp(2.2rem, 4.5vw, 3.7rem); line-height: 1.1; letter-spacing: -.04em; }
h3 { line-height: 1.25; letter-spacing: -.01em; }
.overline { margin: 0 0 1.25rem; color: var(--spark); font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }

/* 헤더 — 블랙 위 반투명, 비활성 회색 → hover 흰색 */
#site-header { position: sticky; z-index: 10; top: 0; background: rgba(0, 0, 0, .78); backdrop-filter: blur(12px); }
.header-inner { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; }
.brand img { width: 2.1rem; height: 2.1rem; object-fit: contain; border-radius: 50%; background: #fff; }
.brand span { white-space: nowrap; }
#site-nav { display: flex; gap: clamp(.75rem, 2vw, 1.9rem); font-size: .83rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
#site-nav a { color: var(--muted); transition: color .2s ease; }
#site-nav a:hover { color: var(--fg); }
#nav-toggle { display: none; padding: .5rem; border: 0; background: transparent; cursor: pointer; }
#nav-toggle span { display: block; width: 1.4rem; height: 2px; margin: .24rem; background: var(--fg); }

/* 히어로 — 좌 타이포 / 우 범고래 constellation, 파티클이 유일한 이미지 */
#hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(52rem, calc(100vh - 4.75rem)); padding: clamp(6rem, 12vw, 9rem) 0; }
#hero-constellation { position: absolute; z-index: -1; top: 0; right: 0; width: min(58%, 46rem); height: 100%; }
.hero-content { position: relative; }
.hero-content h1 { max-width: 54rem; margin-bottom: 1.75rem; font-size: clamp(2.8rem, 7vw, 6.8rem); line-height: 1.08; letter-spacing: -.04em; }
.hero-content em { color: var(--spark); font-style: normal; }
.hero-copy { max-width: 33rem; margin-bottom: 2.5rem; color: var(--subtle); font-size: 1.05rem; }

/* 필 CTA — #8052ff 전용, 화면당 1개 */
.button { display: inline-flex; align-items: center; gap: 1.5rem; padding: 1rem 1.75rem; border-radius: 9999px; background: var(--iris); color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; transition: transform .2s ease, filter .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* 섹션 — 배경 전환 없이 여백으로만 구획 (제로 엘리베이션) */
section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.surface { background: transparent; }
.two-column, .faq-layout, .contact-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 8vw, 8rem); }

/* 강사 카드 — 배경·보더·그림자 없음, hairline은 목록 구분선만 */
.about-card h3 { margin-bottom: 1rem; font-size: 2rem; }
.about-card .accent { color: var(--iris); font-size: .72rem; font-weight: 600; letter-spacing: .2em; }
.about-card h3 span, .english { display: block; margin-top: .35rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .2em; }
.about-card > p:not(.accent) { color: var(--subtle); }
.about-card dl, .course-card dl { margin: 2rem 0 0; }
.about-card dl div, .course-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--hairline); }
.about-card dt, .course-card dt { color: var(--muted); font-size: .7rem; letter-spacing: .15em; }
.about-card dd, .course-card dd { margin: 0; font-size: .88rem; color: var(--subtle); text-align: right; }
.section-copy { max-width: 34rem; color: var(--muted); }

/* 카드 그리드 — 컨테이너 장식 없이 여백 구획 */
.card-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 3.5rem; }
.courses-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.course-card, .tour-card { border: 0; background: transparent; }
.card-number { color: var(--spark); font-size: .8rem; font-weight: 600; letter-spacing: .2em; }
.course-card h3 { margin-bottom: .25rem; font-size: 1.5rem; }
.course-card > p:not(.card-number):not(.english) { color: var(--muted); }
.tour-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tour-card h3 { margin: .5rem 0 .8rem; font-size: 2.1rem; }
.tour-card > p:not(.overline) { max-width: 26rem; color: var(--muted); }
.tour-card span { display: inline-block; margin-top: 1.5rem; padding: .45rem 1rem; border: 1px solid var(--hairline); border-radius: 9999px; color: var(--spark); font-size: .75rem; font-weight: 600; letter-spacing: .1em; }

/* FAQ 아코디언 */
.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item h3 { margin: 0; }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; border: 0; background: transparent; color: var(--fg); font-weight: 400; text-align: left; cursor: pointer; }
.faq-question span { color: var(--spark); font-size: 1.5rem; font-weight: 400; transition: transform .2s ease; }
.faq-question[aria-expanded="true"] span { transform: rotate(45deg); }
.faq-answer { padding: 0 1.5rem 1.25rem 0; color: var(--muted); }
.faq-answer p { margin: 0; }

/* 문의 — 배경 블록 없이 hairline 리스트 */
.contact-box > div > p:not(.overline) { color: var(--subtle); }
.contact-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.contact-list li, .contact-list a { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--hairline); }
.contact-list li > a { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
.contact-list a { transition: color .2s ease; }
.contact-list a:hover { color: var(--spark); }
.contact-list span { color: var(--spark); font-size: .75rem; font-weight: 600; letter-spacing: .12em; }

/* 푸터 */
footer { padding: 2.5rem 0; border-top: 1px solid var(--hairline); color: var(--muted); }
footer .container { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer strong { color: var(--fg); font-weight: 600; letter-spacing: .12em; }
footer span, footer small { font-size: .7rem; letter-spacing: .13em; }
footer small { margin-left: auto; }

@media (max-width: 700px) {
  #nav-toggle { display: block; }
  #site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; padding: 1.25rem; background: rgba(0, 0, 0, .96); border-bottom: 1px solid var(--hairline); }
  #site-nav.is-open { display: flex; }
  #site-nav a { padding: .45rem 0; }
  #hero { min-height: 42rem; }
  #hero-constellation { width: 100%; opacity: .5; }
  .two-column, .faq-layout, .contact-box { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-list li, .contact-list a { grid-template-columns: 5.75rem 1fr; }
  footer small { width: 100%; margin-left: 0; }
}