/* ============================================
   공부스튜디오 — 공통 스타일
   무채색 + 올리브 그린 포인트
   ============================================ */

@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
/* KoPub Batang 과 Freesentation 은 Google Fonts 에 없습니다. 원래 주소는 둘 다 400 을 뱉습니다.
   그래서 제목이 OS 기본 명조로 떨어지고 있었습니다. 실제로 받아지는 글꼴로 바꿉니다.
   두 이름은 스택 맨 앞에 그대로 두었으니, 내 컴퓨터에 깔려 있으면 그게 먼저 쓰입니다. */

:root {
  /* Colors — 무채색 팔레트 */
  --ink-900: #0A0A0A;
  --ink-800: #171717;
  --ink-700: #262626;
  --ink-600: #404040;
  --ink-500: #737373;
  --ink-400: #A3A3A3;
  --ink-300: #D4D4D4;
  --ink-200: #E5E5E5;
  --ink-100: #F5F5F5;
  --ink-50:  #FAFAFA;
  --paper:   #FFFFFF;

  /* Accent — 로고 도트 컬러 기반 딥 그린 */
  --olive-900: #1E5A3D;
  --olive-700: #2E8B60;
  --olive-500: #3FA372;
  --olive-300: #8FC7AC;
  --olive-100: #E5F1EB;

  /* Fonts */
  --font-sans: 'Freesentation', 'Wanted Sans Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  /* 제목 글씨체. 원장님 요청으로 명조 → 고딕으로 바꿉니다.
     페이지 곳곳이 --font-serif 를 참조하고 있어 이름은 그대로 두고 값만 바꿨습니다. */
  --font-display: 'Wanted Sans Variable', 'Freesentation', -apple-system, BlinkMacSystemFont,
                  'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-serif: var(--font-display);

  /* Sizing */
  --nav-h: 72px;
  --page-pad: clamp(24px, 4vw, 80px);
  --section-gap: clamp(80px, 12vh, 160px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

body {
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================
   GNB — 상단 네비게이션
   ============================================ */

.gnb {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}

.gnb.scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--ink-200);
}

.gnb.on-dark {
  color: var(--paper);
}

.gnb.on-dark.scrolled {
  color: var(--ink-900);
}

.gnb__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.gnb__logo-mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.gnb__menu {
  display: flex;
  gap: clamp(14px, 2.4vw, 36px);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 720px) { .gnb__menu { font-size: 13px; gap: 13px; } }
@media (max-width: 420px) { .gnb__menu { font-size: 12px; gap: 10px; } }

.gnb__menu a {
  position: relative;
  padding: 6px 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.gnb__menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.gnb__menu a:hover { opacity: 1; }
.gnb__menu a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gnb__menu a.active { opacity: 1; }
.gnb__menu a.active::after { transform: scaleX(1); }

/* ============================================
   Typography utilities
   ============================================ */

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.section-num {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-500);
  letter-spacing: 0.08em;
}

/* ============================================
   Reveal on scroll
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-stagger.in > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }

/* ============================================
   Buttons / CTA
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--paper);
  transition: all 0.35s var(--ease-out);
  cursor: pointer;
}

.btn:hover {
  background: var(--olive-700);
  border-color: var(--olive-700);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}

.btn--ghost:hover {
  background: var(--ink-900);
  color: var(--paper);
}

.btn__arrow {
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ============================================
   운영시간 — 실제 운영시간표
   프로그램마다 값이 다릅니다. 각 페이지의 표에 직접 적혀 있습니다.
   ============================================ */

.hours { background: var(--ink-50); }

.hours__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(32px, 6vw, 96px);
}

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-200);
}

.hours__row dt {
  font-size: 15px;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}

.hours__row dd {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink-900);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hours__note {
  margin-top: 28px;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.7;
}

@media (max-width: 820px) {
  .hours__grid { grid-template-columns: 1fr; gap: 0; }
}

/* CTA 밴드 — 버튼 아래 한 줄 안내 (어두운 배경) */
.cta-band__hint {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================
   공간 — 숫자 대신 이름
   원장님 요청 : 대형 시설과 숫자로 겨루지 않습니다.
   .space__stats 에 is-names 를 붙이면 숫자가 빠지고 이름이 커집니다.
   ============================================ */
.space__stats.is-names .space__stat .num { display: none; }
.space__stats.is-names .space__stat .label {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink-900);
  line-height: 1.2;
}
.space__stats.is-names .space__stat .label .ko {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.space__stats.is-names .space__stat .desc { margin-top: 16px; }

/* ============================================
   FAQ
   ============================================ */
.faq { padding: calc(var(--nav-h) + clamp(56px, 9vh, 110px)) var(--page-pad) var(--section-gap); }
.faq__switch { display: flex; gap: 8px; margin: 28px 0 56px; }
.faq__switch a {
  padding: 11px 20px; border: 1px solid var(--ink-200);
  font-size: 14px; font-weight: 500; transition: all .3s var(--ease-out);
}
.faq__switch a:hover { border-color: var(--ink-900); }
.faq__switch a.on { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.faq__list { border-top: 1px solid var(--ink-900); }
.faq__item {
  display: grid; grid-template-columns: 64px 1fr; gap: 0 24px;
  padding: 34px 0; border-bottom: 1px solid var(--ink-200);
}
.faq__n {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--ink-500); letter-spacing: .08em; padding-top: 7px;
}
.faq__q {
  font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.45; margin: 0 0 12px;
}
.faq__a { font-size: 15px; line-height: 1.9; color: var(--ink-700); }
@media (max-width: 560px) {
  .faq__item { grid-template-columns: 1fr; gap: 0; }
  .faq__n { display: none; }
}

/* ============================================
   아래 세 덩어리는 중고등·초등 페이지의 <style> 에서 옮겨 온 것입니다.
   FAQ 등 새 페이지도 같은 모양을 쓰기 위해 공통으로 뺐습니다.
   (원본에도 같은 규칙이 남아 있지만 값이 같아 충돌하지 않습니다)
   ============================================ */

.section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 64px;
}
.section-head .num {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.section-head .title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.section-head .title-en {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 20px;
  font-weight: 500;
}


/* ============================================
   CTA
   ============================================ */
.cta-band {
  background: var(--ink-900);
  color: var(--paper);
  padding: clamp(80px, 12vh, 140px) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-band__copy {
  max-width: 46ch;
}
.cta-band__eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-300);
  margin-bottom: 24px;
}
.cta-band__headline {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.cta-band__sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
}
.cta-band__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--paper);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.35s var(--ease-out);
}
.cta-btn:hover {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--paper);
}
.cta-btn--primary {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--paper);
}
.cta-btn--primary:hover {
  background: var(--olive-700);
  border-color: var(--olive-700);
  color: var(--paper);
}
.cta-btn svg { transition: transform 0.35s var(--ease-out); }
.cta-btn:hover svg { transform: translateX(6px); }

/* Decorative watermark */
.cta-band::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 340px; height: 340px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  z-index: 0;
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 30%;
  width: 240px; height: 240px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%;
  z-index: 0;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  padding: 80px var(--page-pad) 48px;
  background: var(--paper);
  border-top: 1px solid var(--ink-200);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 60px;
  margin-bottom: 60px;
}
.site-footer__brand img {
  width: 180px;
  margin-bottom: 20px;
}
.site-footer__brand p {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.7;
}
.site-footer h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 20px;
}
.site-footer ul { list-style: none; }
.site-footer ul li {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 2;
}
.site-footer ul li a {
  transition: color 0.2s;
}
.site-footer ul li a:hover { color: var(--olive-700); }
.site-footer .pending-inline {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  background: var(--ink-100);
  color: var(--ink-500);
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}
.site-footer__map {
  height: 180px;
  background: var(--ink-100);
  display: grid;
  place-items: center;
  color: var(--ink-500);
  font-size: 13px;
  letter-spacing: 0.1em;
  position: relative;
  overflow: hidden;
}
.site-footer__map::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ink-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-200) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
}
.site-footer__map span {
  position: relative;
  padding: 8px 18px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
}
.site-footer__bottom {
  padding-top: 32px;
  border-top: 1px solid var(--ink-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.site-footer__bottom .biz {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .intro-block { grid-template-columns: 1fr; }
  .care__grid { grid-template-columns: 1fr; }
  .care__item:nth-child(odd) { border-right: none; padding-right: 0; }
  .care__item:nth-child(even) { padding-left: 0; }
  .space__stats { grid-template-columns: 1fr; gap: 24px; }
  .space__gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 200px;
    height: auto;
  }
  .space__gallery .g-item:nth-child(1) { grid-row: 1; grid-column: 1 / span 2; }
  .space__gallery .g-item:nth-child(2) { /* 두 칸 차지 해제 — 사진 5장을 모두 보이게 */ }
  .membership__grid { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   CTA 강조
   등록안내(신규)와 재원생예약(기존)은 성격이 다른 두 사람을 위한 버튼입니다.
   메뉴와 같은 모양이면 묻히므로 상단바에서 버튼으로 올립니다.
   상단바는 이미 화면에 고정되어 있어, 따로 띄우지 않아도 늘 보입니다.
   ============================================ */
.gnb__menu a.gnb-cta { padding: 10px 18px; font-weight: 600; letter-spacing: 0; }
.gnb__menu a.gnb-cta::after { display: none; }
.gnb__menu a.gnb-cta--fill {
  background: var(--ink-900); color: var(--paper); opacity: 1;
  transition: background .3s var(--ease-out);
}
.gnb__menu a.gnb-cta--fill:hover { background: var(--olive-700); }
.gnb__menu a.gnb-cta--line { border: 1px solid var(--ink-300); opacity: 1; }
.gnb__menu a.gnb-cta--line:hover { border-color: var(--ink-900); }
/* 어두운 히어로 위에서는 색을 뒤집습니다 */
.gnb.on-dark:not(.scrolled) .gnb__menu a.gnb-cta--fill { background: var(--paper); color: var(--ink-900); }
.gnb.on-dark:not(.scrolled) .gnb__menu a.gnb-cta--line { border-color: rgba(255,255,255,.55); }

/* 모바일 — 상단에 다섯 개는 안 들어갑니다. 아래에 고정 바를 둡니다. */
.mobilebar { display: none; }
@media (max-width: 720px) {
  .gnb__menu a.gnb-cta { display: none; }
  .mobilebar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    border-top: 1px solid var(--ink-200);
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobilebar a {
    padding: 17px 8px; text-align: center;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  }
  .mobilebar a.primary { background: var(--ink-900); color: var(--paper); }
  body { padding-bottom: 58px; }
  /* 모바일에서는 상단바가 반투명하면 뒤 글자가 비쳐 지저분합니다 */
  .gnb.scrolled { background: rgba(255,255,255,.97); }
}