/* Excellor 사이트 공통 스타일
   색: 소개서 PDF에서 뽑은 초록·금색 */
:root {
  --forest: #1f3d2c;
  --forest-d: #14281d;
  --forest-m: #2c5240;
  --sage: #eef2ec;
  --sage-d: #dfe7dc;
  --gold: #a9853f;      /* 선, 점, 큰 글자에만. 흰 바탕 대비 3.3:1 */
  --nae: #8a6528;      /* 내신 프로그램 색. 흰 글자 대비 5:1 이상 */
  --nae-l: #f4ead6;
  --gold-t: #85662a;    /* 작은 금색 글자용. 흰 바탕 대비 5.3:1 */
  --gold-l: #d9bf86;
  --olive: #56653a;     /* 어법 */
  --olive-l: #eef0e2;
  --slate: #3c5263;     /* 구문 */
  --slate-l: #e6ecf0;
  --cream: #f7f2e8;     /* 따뜻한 섹션 배경 */
  --ink: #1b231e;
  --sub: #56605a;       /* 흰 바탕 대비 6.6:1 */
  --mute: #5f6862;      /* 흰 바탕 5.9:1, 연초록 바탕 5.1:1 (날짜, 보조 글자) */
  --line: #e3e8e1;
  --white: #fff;
  --r-lg: 28px; --r-md: 18px; --r-sm: 10px;
  --wrap: 1200px;
  /* 그림자는 주변광 + 직사광 두 겹, 초록 쪽으로 물들임 */
  --sh-1: 0 0 0 1px rgba(20,40,29,.04), 0 1px 3px rgba(20,40,29,.06), 0 4px 12px rgba(20,40,29,.06);
  --sh-2: 0 0 0 1px rgba(20,40,29,.04), 0 2px 6px rgba(20,40,29,.06), 0 16px 40px -12px rgba(20,40,29,.22);
  --sh-3: 0 0 0 1px rgba(20,40,29,.04), 0 6px 12px rgba(20,40,29,.08), 0 28px 64px -20px rgba(20,40,29,.32);
  --ease: cubic-bezier(.2, 0, 0, 1);
  /* 간격 단위 (4px 배수) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s14: 56px; --s16: 64px; --s20: 80px; --s24: 96px; --s30: 120px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-tap-highlight-color: rgba(31,61,44,.08); }
@media (pointer: fine) { html { overscroll-behavior: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; touch-action: manipulation; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* 브라우저가 그리는 부분도 팔레트로: 선택 영역, 입력 커서, 체크박스와 라디오, 스크롤바, 밑줄 */
::selection { background: var(--forest); color: #fff; }
html { caret-color: var(--forest); accent-color: var(--forest); scrollbar-color: #a9b6ad var(--sage); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { text-wrap: balance; }
.num-tab, time, .tel { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--forest); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.en { font-family: "Cormorant Garamond", "Times New Roman", serif; letter-spacing: 0; }
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* 글자 크기 체계: 참고한 학원 사이트(최선, 청담, 에이닷, 훈련도감) 실측 범위에 맞춤
   첫 제목 46px / 모바일 30px, 섹션 제목 36px / 모바일 26px (학원 사이트 29~40px)
   본문 17 / 16 / 14px (학원 사이트 14~16px 중심). 자간은 큰 글자일수록 좁게 */
.h-xl { font-size: 46px; line-height: 1.25; font-weight: 800; letter-spacing: -0.035em; }
.h-lg { font-size: 36px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.h-md { font-size: 24px; line-height: 1.4; font-weight: 700; letter-spacing: -0.025em; }
.t-lead { font-size: 17px; color: var(--sub); line-height: 1.7; max-width: 36em; }
.t-body { font-size: 16px; color: var(--sub); }
.t-sm { font-size: 14px; color: var(--sub); line-height: 1.6; }
.center { text-align: center; }
.center .t-lead { margin-left: auto; margin-right: auto; }

/* 버튼: 높이 48px(모바일 48px), 터치 영역 44px 이상 */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-forest { background: var(--forest); color: #fff; }
.btn-forest:hover { background: var(--forest-d); }
.btn-line { border: 1.5px solid var(--forest); color: var(--forest); }
.btn-line:hover { background: var(--forest); color: #fff; }
.btn-white { background: #fff; color: var(--forest); }
.btn .ico { width: 18px; height: 18px; }
.link-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--forest); }
.link-more i { width: 26px; height: 26px; border-radius: 50%; background: var(--forest); color: #fff; display: grid; place-items: center; }
.link-more i .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--sage); color: var(--forest); }
.pill.gold { background: #f4ecdb; color: #7d6129; }
.pill.solid { background: var(--forest); color: #fff; }

/* 공지 띠 */
.notice { background: var(--forest); color: #e9efe9; font-size: 14px; }
.notice .wrap { height: 44px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.notice b { color: var(--gold-l); font-weight: 700; }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.notice .x { position: absolute; right: 24px; opacity: .7; }

/* 헤더 */
.gnb { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.gnb .wrap { height: 84px; display: flex; align-items: center; gap: 28px; }
.util .btn, .util .partner { white-space: nowrap; }
.gnb { transition: box-shadow .25s var(--ease); }
.gnb.scrolled { box-shadow: var(--sh-1); }
/* 아래에서 살짝 올라오며 나타나는 요소. 스크립트가 없으면 그냥 보인다 */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img.e { height: 48px; }
.brand img.w { height: 18px; }
/* 주 메뉴: 로고와 오른쪽 버튼 사이 공간을 메뉴 여섯 개가 같은 간격으로 나눠 쓴다 */
.menu { --mx: 14px; display: flex; height: 100%; flex: 1; justify-content: space-evenly; }
.mi { position: relative; height: 100%; display: flex; }
.mi > a.top { display: flex; align-items: center; padding: 0 var(--mx); font-size: 17px; font-weight: 700; position: relative; white-space: nowrap; }
.mi > a.top::after { content: ""; position: absolute; left: var(--mx); right: var(--mx); bottom: -1px; height: 3px; background: var(--forest); transform: scaleX(0); transition: transform .2s var(--ease); }
.mi:hover > a.top::after, .mi:focus-within > a.top::after, .mi.on > a.top::after { transform: scaleX(1); }
.mi.on > a.top, .mi:hover > a.top { color: var(--forest); }
/* 하위 페이지 목록: 그 메뉴 바로 아래에 열리고, 글자는 위 메뉴 글자와 같은 선(--mx)에서 시작한다 */
.mi .dd { list-style: none; position: absolute; top: 100%; left: -1px; min-width: 100%; width: max-content; padding: 8px 0; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--sh-2); display: none; }
.mi:hover .dd, .mi:focus-within .dd { display: block; }
.mi .dd a { display: flex; align-items: center; min-height: 44px; padding: 0 calc(var(--mx) + 10px) 0 var(--mx); font-size: 15px; color: var(--sub); white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); }
.mi .dd a:hover, .mi .dd a:focus-visible { background: var(--sage); color: var(--forest); }
.mi .dd a.cur { color: var(--forest); font-weight: 700; }
.util { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.util .partner { color: var(--sub); display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; }
.brand { min-height: 44px; }
.util .partner .ico { width: 16px; height: 16px; }
.util .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; }
.drawer { display: none; }

/* 하위 페이지 머리 */
.subhead { background: var(--sage); padding: 72px 0 80px; position: relative; overflow: hidden; }
.subhead .crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sub); margin-bottom: 18px; }
.subhead .crumb .ico { width: 14px; height: 14px; }
.subhead .crumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; text-decoration: underline; text-underline-offset: 3px; }
.subhead .t-lead { max-width: 640px; margin-top: 16px; }
.subhead .art { position: absolute; right: max(40px, calc((100% - var(--wrap)) / 2 + 40px)); bottom: -40px; }

/* 섹션 */
.sec { padding: 104px 0; }
.sec.sage { background: var(--sage); }
.sec.forest { background: var(--forest); color: #fff; }
.sec.forest .t-lead, .sec.forest .t-body { color: #c5d2c8; }
.sec-head { margin-bottom: 56px; }
.sec-head .t-lead { margin-top: 16px; max-width: 640px; }
.sec-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* 우측 고정 버튼 */
.quickdock { position: fixed; right: 24px; bottom: 32px; z-index: 45; display: flex; flex-direction: column; gap: 8px; }
.quickdock a, .quickdock button { width: 80px; height: 80px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 700; box-shadow: var(--sh-2); }
.quickdock .q1 { background: var(--forest); color: #fff; }
.quickdock .q2 { background: #fff; color: var(--forest); border: 1px solid var(--line); }
.quickdock .top { height: 48px; background: #fff; border: 1px solid var(--line); color: var(--sub); }
/* 전화 상담 시트: PC는 우측 고정 버튼 옆, 모바일은 아래에서 올라오는 시트 */
.callsheet { position: fixed; right: 116px; bottom: 32px; z-index: 46; width: 340px; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-3); padding: var(--s6); overscroll-behavior: contain;
  /* 닫힘: 누른 버튼 쪽(오른쪽 아래)으로 조금 작아지며 사라짐. 열림보다 짧게 */
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); transform-origin: bottom right;
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s; }
.callsheet.open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s var(--ease); }
.callsheet .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.callsheet h2 { font-size: 18px; font-weight: 800; }
.callsheet p { font-size: 14px; color: var(--sub); margin-top: 2px; }
.callsheet .close { min-width: 44px; height: 44px; margin: -10px -10px 0 0; border-radius: var(--r-sm); font-size: 14px; color: var(--sub); }
.callsheet .close:hover { background: var(--sage); }
.callsheet a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 4px; border-top: 1px solid var(--line); font-size: 16px; }
.callsheet a small { color: var(--mute); font-size: 14px; margin-left: 6px; }
.callsheet a b { color: var(--forest); font-size: 17px; font-variant-numeric: tabular-nums; }
.scrim { display: none; }
.mcall { display: none; }

/* 푸터 */
.foot { background: var(--forest-d); color: #9fb0a5; font-size: 14px; padding: 64px 0 48px; }
.foot .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid #2a4033; margin-bottom: 28px; }
.foot .fbrand { display: flex; align-items: center; gap: 12px; }
.foot .fbrand img { height: 44px; }
.foot .fbrand span { font-family: "Cormorant Garamond", serif; color: var(--gold-l); font-size: 24px; font-weight: 700; letter-spacing: .12em; }
.foot .fl { display: flex; gap: 24px; flex-wrap: wrap; color: #dfe7e1; font-weight: 600; }
.foot .info { line-height: 1.9; }
.foot .info a { color: var(--gold-l); }
.foot .partner { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #3d5a49; color: #dfe7e1; padding: 10px 16px; border-radius: 999px; }

/* 반응형 */
/* 헤더 폭 구간: 로고 + 메뉴 + 오른쪽 버튼이 기준선(.wrap 안쪽) 안에 들어오도록 */
@media (max-width: 1239px) {
  .menu { --mx: 10px; } .mi > a.top { font-size: 16px; }
  .gnb .wrap { gap: 20px; }
}
/* 이보다 좁으면 메뉴 여섯 개가 같은 간격으로 한 줄에 안 들어가서 햄버거 메뉴로 바꾼다 */
@media (max-width: 1080px) {
  .menu, .util, .mega { display: none !important; }
  .burger { display: grid; }
  .drawer { display: block; position: fixed; inset: 84px 0 0; background: #fff; overflow-y: auto; overscroll-behavior: contain; padding: 8px 40px 40px; z-index: 49;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s; }
  .drawer.open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s var(--ease); }
  .drawer a.top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-size: 19px; font-weight: 800; border-top: 1px solid var(--line); }
  .drawer .subs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
  .drawer .subs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--sub); background: var(--sage); padding: 0 16px; border-radius: 999px; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .h-xl { font-size: 30px; letter-spacing: -0.03em; }
  .h-lg { font-size: 26px; letter-spacing: -0.03em; }
  .h-md { font-size: 20px; }
  .t-lead { font-size: 16px; }
  .btn { height: 48px; }
  .notice .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; font-size: 13px; text-align: center; }
  .gnb .wrap { height: 64px; }
  .brand img.e { height: 38px; } .brand img.w { height: 15px; }
  .menu, .util, .mega { display: none !important; }
  .burger { display: grid; }
  .drawer { inset: 64px 0 0; padding: 8px 20px 40px; }
  .drawer a.top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-size: 19px; font-weight: 800; border-top: 1px solid var(--line); }
  .drawer .subs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
  .drawer .subs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--sub); background: var(--sage); padding: 0 16px; border-radius: 999px; }
  .sec { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; }
  .sec-head.row { flex-direction: column; align-items: flex-start; }
  .subhead { padding: 44px 0 52px; }
  .subhead .art { display: none; }
        .quickdock { display: none !important; }
  .callsheet { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); z-index: 60; max-height: 80vh; overflow-y: auto;
    opacity: 1; transform: translateY(100%); transition: transform .2s var(--ease), visibility 0s linear .2s; }
  .callsheet.open { transform: none; transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s var(--ease); }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(20,40,29,.4); z-index: 59; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
  .scrim.open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s var(--ease); }
  .mcall { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--forest); color: #fff; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 17px; width: 100%; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .foot .top { flex-direction: column; }
}

.sec.cream { background: var(--cream); }
.sec.mist { background: var(--slate-l); }

/* Home, curriculum and student care */
.ex-hero { padding: clamp(48px, 7vw, 100px) 0; }
.ex-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); }
.ex-label { margin-bottom: 16px; color: var(--forest); font-weight: 700; }
.ex-hero .t-lead { margin: 22px 0 28px; max-width: 29em; }
.ex-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.ex-actions > a:last-child { text-decoration: underline; text-underline-offset: 4px; }
.ex-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 16px; background: var(--forest); border-radius: var(--r-lg); }
.ex-book img { display: block; width: 100%; height: auto; align-self: center; border-radius: 4px; }
.ex-book figcaption { grid-column: 1 / -1; color: white; font-size: 14px; }
.ex-hero + .quick { margin-top: 20px; }
.ex-jump { background: #fff; border-bottom: 1px solid var(--line); }
.ex-jump .wrap { display: flex; gap: 8px 24px; flex-wrap: wrap; padding-block: 10px; }
.ex-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--forest); }
body[data-page="curriculum"] section[id] { scroll-margin-top: 96px; }
.ex-grade { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: center; margin-bottom: 24px; }
.ex-grade b { font-size: 22px; color: var(--forest); }
.ex-grade figure { margin: 0; }
.ex-grade img { width: 100%; max-height: 160px; object-fit: contain; object-position: left; }
.ex-grade figcaption { font-size: 13px; color: var(--sub); }
#cycle .cnav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; text-align: left; }
#cycle .cyc[hidden] { display: none; }
@media (max-width: 760px) {
  .ex-split, .ex-grade { grid-template-columns: 1fr; }
  .ex-book { max-width: 420px; }
  .ex-jump .wrap { column-gap: 16px; }
  #cycle .cnav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); position: static; gap: 8px; margin-bottom: 16px; }
  #cycle .cnav button { font-size: 14px; }
}
.ex-mobile-cta { display: none; }
@media (max-width: 760px) {
  body:has(.ex-mobile-cta) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ex-mobile-cta { position: fixed; z-index: 20; bottom: calc(12px + env(safe-area-inset-bottom)); left: 16px; right: 16px; display: grid; place-items: center; min-height: 48px; border-radius: 8px; background: var(--forest); color: #fff; box-shadow: var(--sh-2); font-weight: 700; }
}
#cycle .cycle { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 28px; align-items: start; }
#cycle .cnav { list-style: none; padding: 0; margin: 0; }
#cycle .cnav button { padding: 10px; border-radius: 8px; }
#cycle .cnav button[aria-pressed="true"] { background: var(--sage); color: var(--forest); }
#cycle .cnav small { display: block; }
#cycle .cyc:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 22px; padding: 24px; background: var(--sage); border-radius: var(--r-lg); }
#cycle .cyc img { display: block; max-height: 320px; width: 100%; object-fit: contain; }
@media (max-width: 760px) {
  #cycle .cycle, #cycle .cyc:not([hidden]) { grid-template-columns: 1fr; }
  #cycle .cnav { display: grid; }
}