:root { --nav-ink:#f6f7f2; --nav-deep:#101712; --nav-accent:#50eb97; --nav-kakao:#f6d657; }
/* 고정 메뉴가 앵커 목적지를 가리지 않도록 모든 원페이지 메뉴 이동에 여백을 확보한다. */
html { scroll-padding-top:112px; }
/* 메뉴가 제목을 가리기 전에 섹션 번호와 제목을 함께 보여 준다. */
#about-title, #method-title, #philosophy-title, #programs-title, #history-title, #founder-title, #faq-title { scroll-margin-top:64px; }
/* 상담 섹션은 섹션 번호와 제목이 함께 보이도록 여백을 더 둔다. */
#contact-title { scroll-margin-top:100px; }
.site-navigation { position:fixed; inset:0 0 auto; z-index:50; color:var(--nav-ink); pointer-events:none; }
.site-navigation__bar { width:min(100% - 32px, 1240px); min-height:68px; margin:14px auto 0; padding:8px 12px 8px 18px; border:1px solid rgba(255,255,255,.2); background:rgba(16,23,18,.68); box-shadow:0 12px 30px rgba(0,0,0,.12); backdrop-filter:blur(14px); display:grid; grid-template-columns:minmax(135px,1fr) auto minmax(315px,1fr); align-items:center; gap:20px; pointer-events:auto; transition:background .2s ease, box-shadow .2s ease; }
.site-navigation.is-scrolled .site-navigation__bar { background:rgba(16,23,18,.95); box-shadow:0 12px 30px rgba(0,0,0,.26); }
.site-navigation__brand { color:#fff; font-size:12px; font-weight:700; letter-spacing:.07em; white-space:nowrap; }
.site-navigation__links { display:flex; align-items:center; justify-content:center; gap:16px; }
.site-navigation__links a { color:rgba(255,255,255,.82); font-size:12px; font-weight:600; white-space:nowrap; transition:color .18s ease; }
.site-navigation__links a:hover, .site-navigation__links a:focus-visible { color:var(--nav-accent); outline:none; }
.site-navigation__actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.site-navigation__cta { min-height:52px; padding:0 10px; display:inline-flex; align-items:center; justify-content:flex-start; gap:7px; border:1px solid rgba(255,255,255,.3); border-radius:6px; color:#fff; font-size:13px; font-weight:800; letter-spacing:-.035em; white-space:nowrap; transition:transform .18s ease, background .18s ease, color .18s ease; }
.site-navigation__cta:hover, .site-navigation__cta:focus-visible { transform:translateY(-1px); outline:none; }
.site-navigation__cta--kakao { color:var(--nav-kakao); }
.site-navigation__cta--ai { border-color:var(--nav-accent); background:var(--nav-accent); color:#101712; }
.site-navigation__cta--ai:hover, .site-navigation__cta--ai:focus-visible { background:#a0f4be; }
.header-cta-label { display:grid; gap:1px; min-width:0; line-height:1.12; }
.header-cta-label span:first-child { font-size:12px; }
.header-cta-label span:last-child { font-size:10px; font-weight:750; }
.header-kakao-orb { position:relative; flex:0 0 27px; width:27px; height:23px; border-radius:50%; background:var(--nav-kakao); }
.header-kakao-orb::after { content:""; position:absolute; bottom:-3px; left:4px; border-width:5px 5px 0 0; border-style:solid; border-color:var(--nav-kakao) transparent transparent transparent; }
.header-kakao-orb span { position:absolute; top:5px; left:6px; width:3px; height:3px; border-radius:50%; background:#101712; box-shadow:6px 0 0 #101712, 12px 0 0 #101712; }
.header-ai-robot { flex:0 0 38px; width:38px; height:38px; display:block; color:#17313a; }
.header-ai-robot svg { display:block; width:100%; height:100%; overflow:visible; }
.header-ai-robot .robot-head { fill:rgba(255,255,255,.26); stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.header-ai-robot .robot-detail { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.header-ai-robot .robot-node { fill:currentColor; }
.header-ai-robot text { fill:currentColor; font-family:Arial,sans-serif; font-size:16px; font-weight:900; letter-spacing:-1px; }
.header-cta-arrow { margin-left:auto; font-size:18px; font-weight:500; }
.site-navigation__menu-button, .site-navigation__mobile, .mobile-hero-actions { display:none; }
/* 기존 히어로의 로고는 새 상단 메뉴가 대신하므로 한 번만 표시한다. */
.hero-header { display:none !important; }
.faq-section { background:#e6eee8; color:#17313a; }
.faq-shell { padding-top:86px; padding-bottom:86px; }
.faq-kicker { margin:0 0 16px; color:#167b75; font-size:12px; font-weight:850; letter-spacing:.12em; }
.faq-title { margin:0; max-width:760px; font-size:clamp(2.35rem,7vw,4.8rem); font-weight:650; letter-spacing:-.075em; line-height:1.04; }
.faq-intro { max-width:620px; margin:20px 0 34px; color:#405a5b; font-size:15px; line-height:1.75; }
.faq-list { border-top:1px solid #aebfb8; }
.faq-item { border-bottom:1px solid #aebfb8; }
.faq-item summary { position:relative; min-height:68px; padding:21px 46px 20px 0; display:flex; align-items:center; cursor:pointer; color:#17313a; font-size:17px; font-weight:800; letter-spacing:-.04em; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:50%; color:#167b75; font-size:27px; font-weight:400; transform:translateY(-50%); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { max-width:740px; margin:0; padding:0 46px 23px 0; color:#405a5b; font-size:15px; line-height:1.75; }
.faq-contact-cta { min-height:48px; margin-top:28px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #17313a; border-radius:6px; background:#17313a; color:#fff; font-size:14px; font-weight:800; text-decoration:none; }
.faq-contact-cta:hover, .faq-contact-cta:focus-visible { background:#167b75; border-color:#167b75; }

@media (max-width:1050px) {
  html { scroll-padding-top:84px; }
  #about-title, #method-title, #philosophy-title, #programs-title, #history-title, #founder-title, #faq-title { scroll-margin-top:42px; }
  #contact-title { scroll-margin-top:64px; }
  .site-navigation__bar { width:calc(100% - 24px); min-height:58px; margin-top:10px; padding:9px 12px 9px 15px; grid-template-columns:1fr auto; gap:12px; }
  .site-navigation__brand { font-size:10.5px; }
  .site-navigation__links, .site-navigation__actions { display:none; }
  .site-navigation__menu-button { width:39px; height:38px; border:1px solid rgba(255,255,255,.36); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:.06em; cursor:pointer; }
  .site-navigation__menu-button:focus-visible { outline:2px solid var(--nav-accent); outline-offset:2px; }
  .site-navigation__mobile { width:calc(100% - 24px); margin:8px auto 0; padding:18px; border:1px solid rgba(255,255,255,.2); background:rgba(16,23,18,.98); box-shadow:0 18px 36px rgba(0,0,0,.28); display:block; pointer-events:auto; }
  .site-navigation__mobile[hidden] { display:none; }
  .site-navigation__mobile-links { display:grid; border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
  .site-navigation__mobile-links a { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.92); font-size:14px; font-weight:650; }
  .site-navigation__mobile-links a:last-child { border-bottom:0; }
  /* 메뉴를 열지 않아도 첫 화면에서 두 가지 핵심 행동을 바로 선택한다. */
  .mobile-hero-actions { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr); gap:8px; width:100%; margin:0 0 18px; }
  .mobile-hero-actions a { min-height:58px; padding:0 9px; display:flex; align-items:center; justify-content:flex-start; gap:7px; border:1px solid rgba(255,255,255,.45); border-radius:6px; font-size:13px; font-weight:900; letter-spacing:-.05em; line-height:1.15; text-decoration:none; }
  .mobile-hero-actions__kakao { color:var(--nav-kakao); background:rgba(16,23,18,.6); }
  .mobile-hero-actions__ai { border-color:var(--nav-accent) !important; color:#101712; background:var(--nav-accent); }
  .mobile-cta-label { display:grid; gap:1px; min-width:0; }
  .mobile-cta-label span:first-child { font-size:13px; }
  .mobile-cta-label span:last-child { font-size:11px; font-weight:800; }
  .mobile-kakao-orb { position:relative; flex:0 0 30px; width:30px; height:26px; border-radius:50%; background:var(--nav-kakao); }
  .mobile-kakao-orb::after { content:""; position:absolute; bottom:-3px; left:5px; border-width:5px 5px 0 0; border-style:solid; border-color:var(--nav-kakao) transparent transparent transparent; }
  .mobile-kakao-orb span { position:absolute; top:6px; left:7px; width:4px; height:4px; border-radius:50%; background:#101712; box-shadow:6px 0 0 #101712, 12px 0 0 #101712; }
  .mobile-ai-robot { flex:0 0 42px; width:42px; height:42px; display:block; color:#17313a; }
  .mobile-ai-robot svg { display:block; width:100%; height:100%; overflow:visible; }
  .mobile-ai-robot .robot-head { fill:rgba(255,255,255,.26); stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
  .mobile-ai-robot .robot-detail { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .mobile-ai-robot .robot-node { fill:currentColor; }
  .mobile-ai-robot text { fill:currentColor; font-family:Arial,sans-serif; font-size:16px; font-weight:900; letter-spacing:-1px; }
  .mobile-cta-arrow { margin-left:auto; font-size:20px; font-weight:500; }
  .faq-shell { padding-top:66px; padding-bottom:66px; }
  .faq-kicker { margin-bottom:12px; font-size:11px; }
  .faq-intro { margin:17px 0 25px; font-size:14px; }
  .faq-item summary { min-height:62px; padding:17px 36px 17px 0; font-size:15px; }
  .faq-item summary::after { right:2px; font-size:24px; }
  .faq-answer { padding:0 22px 20px 0; font-size:14px; }
  body.menu-open { overflow:hidden; }
}

@media (prefers-reduced-motion:reduce) { .site-navigation__bar, .site-navigation__cta { transition:none; } }