/* ============================================================================
   SKY — site-v2.css
   공개 서브페이지 v2 공용 브랜드 시스템 (Wave A: about · faculty ·
   course-domestic · recruit)

   원칙
   1) 브랜드 토큰·헤더·푸터·여백의 호흡은 home.html(v4 확정분)에서 그대로 물려받는다.
      색(navy/blue/gold) · 타이포 위계 · floating pill header · 얇은 선 ·
      큰 사진 · 절제된 motion.
   2) 그러나 페이지 문법(콘텐츠를 읽는 방식)은 공유하지 않는다.
      이 파일은 "같은 SKY"만 보장하고, "다른 읽기 방식"은 각 페이지 <style>이 만든다.
   3) 🚫 메인의 P-00 SKY 히어로 · SYSTEM 연출 · 좌측 콘솔 레일은 여기에 없다.
   4) ※ 한글에 세리프 금지(윈도우에서 바탕체로 떨어진다).
      --serif 는 라틴·숫자 전용이며 스택 끝에 Pretendard 를 둬 사고를 막는다.
   ============================================================================ */

:root{
  --sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
         "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  /* 라틴 전용 스택 — generic(monospace) 앞에 Pretendard 를 반드시 둔다 */
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
         "Pretendard Variable", Pretendard, monospace;
  /* ※ 라틴·숫자 전용. 한글에 절대 쓰지 않는다. */
  /* 라틴 표시체 — 숫자·연도·영문 라벨. 워킹 버전(index-v2)이 쓰는 Space Grotesk 로 맞춘다.
     명조(Playfair)는 기사형 인상을 만들어 워킹 테마와 따로 놀았다. */
  --serif:"Space Grotesk", "Pretendard Variable", Pretendard,
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 표제용 서체 — 워킹 버전(index-v2)의 목소리로 맞춘다.
     한글 명조(Noto Serif KR)는 기사형 인상이 강해 워킹 테마와 따로 놀았다.
     Wanted Sans 는 획이 굵고 자간이 조여 큰 표제에서 또렷하다.
     ※ 폰트 링크와 이 토큰은 한 몸으로 움직인다 — 링크를 빼면 조용히 Pretendard 로 떨어진다.
     ※ 명조 600 을 산세리프 600 으로 그대로 옮기면 얇아 보인다. 표제는 700~800 을 쓴다. */
  --kser:"Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard,
         "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 0815 — home.html 0814 팔레트를 그대로 물려받는다(값 하나까지 동일).
     파르스름한 SaaS 회색을 버리고 학원 실물 색으로: canvas = 따뜻한 종이,
     brand = 본원 파란 타공 외벽, gold = 인포데스크 자격증 액자.
     ※ 여기 값을 홈과 다르게 만지는 순간 두 사이트처럼 보인다. 홈이 기준이다. */
  --canvas:#eef4fb;      /* 지면 — 아주 옅은 하늘. 흰 판이 떠 보이게 하는 바탕 */
  --canvas-2:#f6fafd;
  --panel:#ffffff;       /* 본문 판은 순백 — 글을 길게 읽는 자리라 가장 밝게 */
  --line:#d4e2f0;
  --line-soft:#e5eef7;
  --ink:#0e2a41;         /* 딥네이비. 워킹 버전 헤드라인과 같은 값 */
  --ink-2:#3d566e;
  --muted:#5f758c;       /* canvas 위 4.9:1 — 작은 글씨도 AA */
  --muted-2:#6d8299;
  --brand:#0b6ea8;       /* 링크·강조. 흰 바탕 5.5:1 로 AA 를 넘긴다 */
  --brand-2:#084d78;     /* hover — 한 단계 더 깊게 */
  --brand-soft:#e2f1fb;
  --sky:#2ea6e3;         /* 장식·그라디언트 전용. 글자색으로 쓰지 않는다 */
  --sky-2:#0f83cc;
  --tint:#e3eff9;        /* hover 바닥 — 웜 그레이를 대체한다 */
  --navy:#083b60;        /* 채운 버튼·내비 CTA */
  /* 예전 gold(자격증 액자)는 베이지 테마의 잔상이라 딥스카이로 통합했다.
     토큰 이름은 27페이지가 참조 중이라 유지한다 — 값만 바뀐다. */
  --gold:#0a5c94;
  --gold-soft:#dbeefb;
  --live:#0e7a4a;        /* LIVE·모집중 — 의미색이라 초록을 지킨다 */
  --gap:12px;

  /* ── 타입 스케일 (0815 신설) ───────────────────────────────────────────
     이전엔 눈금이 없었다. 실측 결과 27페이지에서 제목 크기가 h1 6종 · h2 15종 ·
     h3 14종, 합쳐서 35종이었다. about 의 h2(42px)가 notice 의 h1(46px)과 거의
     같아서, 사용자는 "이 글자가 얼마나 중요한가"를 페이지마다 다시 배워야 했다.
     그게 "정돈 안 된 느낌"의 정체다.

     ※ 표제를 한 종류로 밀어붙이지 않는다. 기존 46 / 54~58 갈림이 우연이 아니라
        "읽는 페이지 / 쓰는 페이지"와 이미 맞아 있었다 — 그 구분은 뜻이 있으니 살린다.
        · --t-hero : 읽으러 오는 페이지(학원소개·강사진·교육과정·시설·언론…) 14개
        · --t-page : 하러 오는 페이지(입시안내·채용·공지·수강료·상담·FAQ…) 13개
     ※ 페이지 CSS 에 px 를 새로 적지 말고 반드시 이 토큰을 참조할 것. */
  --t-hero:clamp(29px,3.6vw,50px);   /* 표제형 페이지 제목 */
  --t-page:clamp(26px,3.1vw,42px);   /* 도구·행동형 페이지 제목 */
  --t-sec: clamp(21px,2.4vw,32px);   /* 장 제목(h2) */
  --t-sub: clamp(17px,1.5vw,21px);   /* 소제목(h3) */
  --t-card:16px;                     /* 카드 제목 */

  /* 굵은 rule 바로 아래 오는 지표 스트립(advisors .avcolo · employ-system .espro)의 공통 값.
     페이지마다 제각각 쓰지 말고 이 토큰을 참조할 것. */
  --strip-pt:20px;      /* rule 과 첫 글자 사이 */
  --strip-div-top:10px; /* 세로 divider 를 rule 에서 띄우는 양 */
  --strip-div-bot:8px;
  /* 모서리 — 워킹 버전은 각지지 않는다. 2px 는 종이(신문) 감각이라 테마와 어긋났다.
     ※ 알약(999px)·원형(50%) 은 "모서리"가 아니라 형태라 그대로 둔다. */
  --r:8px;
  --r-card:14px;   /* 사진·큰 카드 */
  --r-pill:999px;  /* 버튼·태그 */
  /* 그림자는 캔버스 색을 따라간다 — 파란 지면 위에서 갈색 그림자는 때처럼 보인다 */
  --shadow:0 1px 0 rgba(10,40,70,.04), 0 18px 34px -26px rgba(10,60,110,.34);
  --shadow-l:0 30px 60px -38px rgba(10,60,110,.40);
  --shadow-sm:0 8px 26px -16px rgba(10,60,110,.30);
  --ease:cubic-bezier(.22,.7,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --navh:58px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
/* ※ height:auto 필수. <img width height> 속성은 presentational hint 로 height 를 고정해
   버려서, CSS 의 aspect-ratio 가 무시되고 원본 비율만큼 세로로 늘어난다(초상 4/5 가 750px 로). */
img{max-width:100%; height:auto; display:block}
/* 문단 마지막 줄에 한두 어절만 떨어지는 것(orphan)은 브라우저에 맡긴다.
   미지원 브라우저는 기존 줄바꿈 그대로 — 점진 향상이라 깨질 위험이 없다.
   제목은 줄 길이를 고르게(balance), 본문은 끝줄을 지키게(pretty). */
p,li,dd,dt,figcaption,blockquote,summary{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
/* ── 리드·서브헤드는 balance ────────────────────────────────────────────
   한글은 word-break:keep-all 이라 띄어쓰기에서만 끊긴다. 선택지가 적어
   text-wrap:pretty 로는 끝줄 한두 어절이 남는 걸 못 막는다(실측: 550/142 → 그대로).
   balance 는 줄 수를 늘리지 않고 폭만 고르게 편다(550/142 → 382/310).
   본문 전체가 아니라 2~4줄짜리 리드·서브헤드에만 건다 — 긴 문단은 pretty 유지.
   ※ [class$="..."] 는 class="stg__lead" 를, [class*="... "] 는 class="stg__lead rv" 를 잡는다.
      둘 다 있어야 한다. rail__dot 같은 건 어느 쪽에도 걸리지 않는다. */
.lead,
[class$="__lead"],[class*="__lead "],
[class$="__hl"],  [class*="__hl "],
[class$="__deck"],[class*="__deck "],
[class$="__d"],   [class*="__d "]{text-wrap:balance}
/* ── 측정폭 상한 ──────────────────────────────────────────────────────
   한글은 한 줄 55~60자를 넘기면 다음 줄 첫 글자를 찾기 어려워진다.
   1440 에서 고지문·설명문이 컨테이너 전폭(1300px 안팎 = 100자 이상)을 쓰고 있었다.
   박스·여백·글자 크기는 그대로 두고 글줄 길이만 묶는다.
   em 기준이라 각 요소의 폰트 크기를 따라간다(13px → 약 754px ≈ 58자).
   상한이므로 이미 좁은 칩·라벨에는 아무 영향이 없다. */
/* ※ 0815 — 원래 여기에 손으로 고른 클래스 목록이 있었는데, 실제 문단을 대부분
   못 잡고 있었다. 컨테이너를 1400 으로 통일한 뒤 실측하니 글줄이 85~98자였다
   (푸터 법정표기 .fbox__biz 는 전 페이지에서 85자). 목록이 아니라 일반 규칙으로 간다.
   · 선택자 특이도를 낮게(0,0,2) 둔다 — 페이지가 의도적으로 더 넓게 쓰려 하면 그쪽이 이긴다.
   · max 라서 이미 좁은 칸·칩에는 아무 영향이 없다.
   · em 기준이라 각 요소의 글자 크기를 따라간다(15px → 870px ≈ 58자). */
main p, main dd, main blockquote, main figcaption{max-width:58em}
/* 0816 · 각주·고지·상자 안 글은 상한 없음 — 상자가 폭을 정한다 */
[class*="note"],.warn,.priv,.alcap,.alrec__n,.prov__n,.hist__n,
.cfex,main .d,.alfx__v p,.tusum dd,.fbox__biz{max-width:none}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
h1,h2,h3,h4,h5,p,ul,ol,figure,dl,dd,blockquote,fieldset{margin:0}
ul,ol{padding:0; list-style:none}
fieldset{border:0; padding:0; min-width:0}
table{border-collapse:collapse}
::selection{background:var(--brand); color:#fff}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:8px; top:8px; z-index:99; background:#fff; padding:8px 12px;
  border:1px solid var(--brand); border-radius:var(--r)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------------------------------------------------------------------------
   레이아웃 — 좌우 gutter 는 home 과 같은 호흡(모바일 14 / 태블릿 24 / 데스크 44)
   --------------------------------------------------------------------------- */
.wrap{position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:0 24px}
@media (min-width:1180px){ .wrap{padding:0 44px} }
@media (max-width:760px){ .wrap{padding:0 14px} }
.wrap--n{max-width:1080px}   /* 에디토리얼 지면 */
.wrap--w{max-width:1560px}   /* 도구·명부 */

/* ---------------------------------------------------------------------------
   서브페이지 = 한 장의 종이 (.sheet)
   0815: 27장을 통으로 놓고 보니 판이 있는 페이지와 없는 페이지가 반반이었다.
   학원소개·공지사항·제휴대학·언론보도·갤러리는 종이 위에 얹혀 정돈돼 보이는데,
   교육과정 5개·체험교실·취업지원·오시는 길·입시안내·대학별분석은 캔버스에 글이
   직접 떠 있었다. 페이지를 넘길 때마다 종이가 있다 없다 하는 것 —
   그게 "생짜 배경에 글만" 이고 "난잡함" 의 정체였다. 판은 전 페이지 공통으로 깐다.
   ※ overflow:hidden 금지 — 좌측 stage rail·목차가 position:sticky 라 죽는다.
      전폭 사진(.bleed)은 --sheetpad 만큼만 음수 마진을 줘 판 안에서 정확히 끝낸다.
   ※ home.html 은 자체 .wrap(1520px)을 인라인으로 갖고 있고 .pgtop 도 없다 — 무관.
   --------------------------------------------------------------------------- */
.wrap.pgtop{max-width:1280px}   /* 1400 은 1440 화면에서 좌우 20px 밖에 안 남는다 */
.sheet{--sheetpad:clamp(20px,3.2vw,52px);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:var(--sheetpad)}
/* 판 위에 같은 색 판을 또 깔면 테두리만 두 겹으로 남아 얼룩이 된다.
   페이지가 이미 갖고 있던 최상위 판은 껍데기를 벗기고 여백만 남긴다. */
.sheet>.paper{background:none; border:0; border-radius:0; box-shadow:none; padding:0; overflow:visible}

/* ---------------------------------------------------------------------------
   플로팅 알약 헤더 — home.html 확정분 그대로
   --------------------------------------------------------------------------- */
/* ※ width:max-content 필수.
   position:fixed + left:50% 는 "왼쪽 50% 지점부터 오른쪽 끝까지"를 가용 폭으로 잡는다
   (1440 이면 720px). transform 은 그림만 가운데로 옮길 뿐 이 계산을 되돌리지 않는다.
   그래서 알약이 720px 로 갇히고, 부족분을 flex 가 첫 아이템(로고)부터 깎아
   1440 이하에서 로고가 1px 로 뭉개졌다. max-content 로 내용만큼 잡고 max-width 로만 제한한다. */
.navbar{
  position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:6px;
  width:max-content; max-width:calc(100vw - 20px);
  /* 워킹 테마 — 각진 2px 는 종이(신문) 감각이라 바꿨다. 8px 라운드 + 흰 유리판. */
  padding:5px 6px 5px 12px; border-radius:var(--r);
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  box-shadow:0 10px 30px -20px rgba(10,60,110,.55);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
/* 실물 로고 원본(358×195). 흰 배경 PNG 라 밝은 알약 위에서 multiply 로 흰 판을 지운다. */
/* 로고는 브랜드 자산이라 어떤 경우에도 비율이 눌리면 안 된다.
   flex:none 으로 감싼 a 가 줄지 않게 하고, 전역 img{max-width:100%} 가
   줄어든 a 폭으로 그림을 잘라 누르지 못하게 max-width 를 푼다. */
.navbar>a:first-child{flex:none; display:flex; align-items:center}
.navbar__logo{height:27px; width:auto; max-width:none; flex:none; mix-blend-mode:multiply}
.navbar__sep{width:1px; height:16px; background:var(--line); margin:0 4px}
.navbar__links{display:flex; gap:2px}
.nvi{position:relative}
/* hover 는 파란 칩(brand-soft)에서 웜 그레이(tint)로 — 종이 위에서 파랑이 튄다.
   현재 위치 표시만 파랑을 남겨 "지금 여기"가 유일한 파란 점이 되게 한다. */
.navbar__links>.nvi>a{display:block; padding:6px 10px; border-radius:var(--r);
  font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.navbar__links>.nvi>a:hover{background:var(--tint); color:var(--ink)}
.navbar__links>.nvi>a[aria-current="page"]{color:var(--brand-2); background:var(--brand-soft)}
.mega{position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,6px);
  /* 행 수는 build.mjs 가 항목 수에 맞춰 --mrows 로 넣는다(4개→2×2, 5개→3+2, 8개→4+4) */
  display:grid; grid-template-rows:repeat(var(--mrows,3),auto); grid-auto-flow:column;
  grid-auto-columns:minmax(178px,auto); gap:3px 8px; padding:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 26px 64px -34px rgba(10,60,110,.5);
  opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s,transform .2s}
.nvi:hover .mega,.nvi:focus-within .mega{opacity:1; visibility:visible; transform:translate(-50%,0)}
.mega::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}
.mega a{display:block; padding:11px 13px; border-radius:var(--r); font-size:13.5px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink-2); white-space:nowrap; border:1px solid transparent;
  transition:background .16s,color .16s,border-color .16s}
.mega a:hover,.mega a:focus-visible{background:var(--tint); color:var(--ink); border-color:var(--line)}
.mega a.cur{color:var(--brand-2); font-weight:800; background:var(--brand-soft)}
.navbar__tel{font:600 13px/1 var(--mono); color:var(--ink-2); padding:6px 8px;
  letter-spacing:-.01em; white-space:nowrap}
.navbar__tel:hover{color:var(--brand-2)}
/* 재원생·강사 전용이라 조용한 텍스트 링크로 둔다(채운 버튼은 화면당 하나 = 상담 신청) */
.navbar__lms{font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2);
  padding:6px 9px; border-radius:var(--r); white-space:nowrap; transition:color .16s,background .16s}
.navbar__lms:hover{color:var(--ink); background:var(--tint)}
@media (max-width:980px){ .navbar__lms{display:none} }
.navbar__cta{background:var(--navy); color:#fff; font-size:13.5px; font-weight:700;
  padding:8px 14px; border-radius:var(--r); white-space:nowrap;
  transition:background .16s var(--ease-out), transform .16s var(--ease-out)}
.navbar__cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .navbar__cta:hover{background:var(--brand-2)} }
@media (max-width:760px){
  /* 모바일은 좌우 10px 로 늘려 쓴다 — width:max-content 를 풀어야 left/right 가 먹는다 */
  .navbar{left:10px; right:10px; transform:none; width:auto; max-width:none; padding:5px 6px 5px 11px}
  .navbar__links,.navbar__sep{display:none}
  .navbar__tel{margin-left:auto}
}
.navbar__burger{display:none; width:34px; height:34px; flex:none; border:0; background:transparent;
  align-items:center; justify-content:center; cursor:pointer; border-radius:9px}
.navbar__burger:hover{background:var(--brand-soft)}
.navbar__burger i{display:block; position:relative; width:17px; height:1.6px; background:var(--ink);
  border-radius:var(--r); transition:transform .22s, opacity .18s}
.navbar__burger i::before,.navbar__burger i::after{content:""; position:absolute; left:0; width:17px;
  height:1.6px; background:var(--ink); border-radius:var(--r); transition:transform .22s}
.navbar__burger i::before{top:-5.5px} .navbar__burger i::after{top:5.5px}
body.msopen .navbar__burger i{background:transparent}
body.msopen .navbar__burger i::before{transform:translateY(5.5px) rotate(45deg)}
body.msopen .navbar__burger i::after{transform:translateY(-5.5px) rotate(-45deg)}

.msheet{position:fixed; inset:0; z-index:45; display:none; overflow-y:auto;
  background:var(--canvas); padding:74px 16px 34px; opacity:0; transition:opacity .2s}
.msheet.on{display:block}
.msheet.show{opacity:1}
.msgrp{border-top:1px solid var(--line); padding:14px 2px 4px}
.msgrp:first-child{border-top:0}
.msgrp>b{display:block; font-size:12px; font-weight:700; letter-spacing:-.01em;
  color:var(--muted-2); margin-bottom:8px}
.msgrp>div{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px}
.msgrp a{display:block; padding:12px; border-radius:var(--r); background:var(--panel);
  border:1px solid var(--line-soft); font-size:14px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); min-height:44px}
.msgrp a:active{background:var(--brand-soft); border-color:var(--brand)}
.mscta{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px}
.mscta a{display:flex; align-items:center; justify-content:center; min-height:50px;
  border-radius:var(--r); font-size:14.5px; font-weight:700}
.mscta a:first-child{border:1px solid var(--line); background:var(--panel); color:var(--ink)}
.mscta a:last-child{background:var(--brand); color:#fff}
.mslms{display:block; margin-top:8px; text-align:center; padding:13px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel); font-size:13.5px; font-weight:600; color:var(--ink-2)}
@media (max-width:760px){ .navbar__burger{display:flex} }
@media (min-width:761px){ .msheet{display:none!important} }

/* ---------------------------------------------------------------------------
   버튼 · 링크
   --------------------------------------------------------------------------- */
/* 채운 버튼은 네이비 — 파랑(brand)은 링크·강조 전용으로 남긴다(home 과 동일).
   화면당 채운 버튼은 하나가 원칙. */
/* ── 버튼 — 워킹 버전(index-v2)의 알약 문법 ─────────────────────────────
   역할을 셋으로만 나눈다. 한 화면에 --b 는 하나만 둔다.
     .btn--b  Primary   채운 딥스카이. "지금 하는 행동" 하나
     .btn--o  Secondary 흰 판 + 얇은 선. 대안 경로
     .btn--g  Ghost     선 없음. 목록 안 부수적 이동
   높이는 셋 다 같다(패딩 13/24 · 폰트 14) — 나란히 놓았을 때 밑줄이 맞아야 한다. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-pill);
  font-size:14px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease)}
.btn--b{background:var(--sky-2); color:#fff; box-shadow:0 10px 24px -12px rgba(15,131,204,.75)}
.btn--b:hover{background:var(--gold); transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(10,92,148,.7)}
.btn--o{border-color:var(--line); color:var(--ink); background:var(--panel)}
.btn--o:hover{border-color:var(--sky-2); color:var(--brand); transform:translateY(-2px)}
.btn--g{border-color:transparent; color:var(--brand); background:transparent; padding-inline:12px}
.btn--g:hover{background:var(--brand-soft); color:var(--brand-2)}
.btn--s{padding:9px 16px; font-size:13px}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none}}
.tlink{color:var(--brand); font-weight:700; border-bottom:1px solid rgba(11,87,208,.3)}
.tlink:hover{border-bottom-color:var(--brand)}

/* ---------------------------------------------------------------------------
   페이지 상단 공통 — 빵부스러기 한 줄만 공유한다.
   ※ 제목 블록은 페이지마다 다르다(문법이 다르므로 공유하지 않는다).
   --------------------------------------------------------------------------- */
.pgtop{padding-top:calc(var(--navh) + 18px)}
/* ※ 27장 전 페이지 최상단에 한글이 라틴 라벨 옷을 입고 있었다 —
   mono + uppercase + .14em 은 HOME·FAQ 같은 영문 코드명용이라, "교육과정"·"수강료 안내"
   가 `교 육 과 정` 처럼 낱자로 벌어졌다. 라틴 부분(HOME)은 4글자뿐이라 자간을 줄여도
   표식성이 유지된다. 서체를 sans 로 되돌리고 자간만 아주 얕게 남긴다. */
.crumb{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font:700 12px/1 var(--sans); letter-spacing:0; color:var(--muted-2)}
.crumb>a:first-child{letter-spacing:.08em}   /* HOME 만 라틴 표식으로 */
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal; opacity:.55}
.crumb b{color:var(--ink-2); font-weight:700}

/* 얇은 선 — 이 사이트의 가장 흔한 구분자 */
.hr{height:1px; background:var(--line); border:0; margin:0}

/* 킥커 라벨 (라틴 전용) */
.kick{display:inline-block; font:700 10.5px/1 var(--mono); letter-spacing:.24em;
  text-transform:uppercase; color:var(--brand)}
.kick--m{color:var(--muted-2)}
/* 한글 라벨용. 모노 서체에 자간 .24em 을 한글에 그대로 주면 글자가 흩어진다. */
.kick--ko{font:700 11.5px/1 var(--sans); letter-spacing:.02em; text-transform:none}

/* ---------------------------------------------------------------------------
   compact access — 옛 학원사이트식 세로 quick rail(전화/카톡/수강료/오시는길/상담)
   을 걷어낸 자리. 상담 신청 하나를 주 액션으로 두고 카카오만 곁에 둔다.
   수강료·오시는길은 헤더 메가메뉴 · 모바일 시트 · 푸터 유틸에 그대로 살아 있다.
   --------------------------------------------------------------------------- */
.acc{position:fixed; right:14px; bottom:14px; z-index:44; display:flex; align-items:center; gap:8px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s}
.acc.on{opacity:1; visibility:visible; transform:none}
.acc__k{width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#FEE500; box-shadow:0 12px 26px -14px rgba(10,60,110,.55)}
.acc__k svg{width:24px; height:24px}
.acc__a{display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 18px;
  border-radius:999px; background:var(--navy); color:#fff; font-size:14px; font-weight:700;
  letter-spacing:-.02em; box-shadow:0 14px 30px -16px rgba(15,37,71,.9)}
.acc__a:hover{background:var(--brand-2)}
.acc__a svg{width:16px; height:16px}
@media (max-width:760px){ .acc{right:12px; bottom:12px} .acc__a{padding:0 16px} }

/* ---------------------------------------------------------------------------
   context CTA — 페이지 성격에 따라 두 형태만 쓴다.
   ※ 예전의 거대한 다크 CTA 밴드(+영상)를 매 페이지에 반복하지 않는다.
   · .ccta      정보 페이지용 — 한 줄 문장 + 링크. 지면 흐름을 끊지 않는다.
   · .ccta--act 행동 페이지용 — 흰 판 위 짧은 액션 블록.
   --------------------------------------------------------------------------- */
.ccta{display:flex; align-items:center; justify-content:space-between; gap:14px 26px; flex-wrap:wrap;
  padding:clamp(16px,2vw,22px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ccta__t{font-size:clamp(15px,1.5vw,18px); font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.ccta__t s{display:block; text-decoration:none; margin-top:5px; font-size:13.5px; font-weight:500;
  letter-spacing:-.02em; color:var(--muted)}
.ccta__a{display:flex; gap:8px; flex-wrap:wrap}
/* 0815: 종이(.sheet)를 전 페이지에 깔면서 이 블록이 판 위의 같은 색 판이 됐다 —
   면은 사라지고 테두리·그림자만 두 겹 남는다. CTA 는 지면이 끝나고 나오는 다른 성격의
   블록이므로, 반대로 캔버스색으로 눌러 종이에 파인 띠로 읽히게 한다. */
.ccta--act{padding:clamp(20px,2.4vw,28px) clamp(18px,2.4vw,30px); background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--r)}

/* ---------------------------------------------------------------------------
   공용 푸터 — 0815 home 의 "명함 박스"(.fbox)로 교체.
   가로로 한 판. 위=브랜드+버튼 / 가운데=대표·연락처·교육그룹 / 유틸=페이지 링크·채널 /
   아래=법정 표기. 괘선 네 줄로 끊어 스크롤 끝에서 눈이 한 번에 훑고 멈춘다.

   ※ home 의 .fbox 는 배경이 쿨그레이 그라디언트(#f8fafc→#eef2f7)로 하드코딩돼
      있는데, 그건 옛 팔레트 시절의 잔재다. 웜 캔버스 위에서는 파랗게 뜨므로
      여기서는 토큰(웜)으로 옮겼다. home 도 같이 맞추면 완전히 동일해진다.
   ※ 명함 실물의 개인 휴대폰(010…)은 웹 공개 대상이 아니라 싣지 않는다.
   --------------------------------------------------------------------------- */
.sfoot{margin-top:clamp(26px,3vw,44px); padding:0 0 26px}
/* 0815 재판단 — 웜 박스를 웜 종이 위에 올렸더니 실선 하나로만 구분돼 바닥이
   흐지부지 사라졌다("하단이 밋밋하다"). home 의 쿨그레이 박스는 옛 팔레트 잔재가
   아니라 **의도적인 착지점**이었다 — 스크롤 끝에서 눈이 걸려 멈추게 하는 유일한 대비.
   home 값을 그대로 쓴다(둥근 16px 포함). 사이트에서 유일하게 둥근 판이라 "끝"으로 읽힌다. */
.fbox{background:linear-gradient(170deg,#f8fafc,#eef2f7); border:1px solid var(--line);
  border-radius:16px; padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px) clamp(16px,1.8vw,22px);
  box-shadow:0 24px 56px -40px rgba(12,38,84,.55)}
.fbox__top{display:flex; align-items:center; justify-content:space-between; gap:16px 24px;
  flex-wrap:wrap; padding-bottom:clamp(14px,1.8vw,20px); border-bottom:1px solid var(--line)}
.fbox__brand{display:flex; align-items:center; gap:13px; min-width:0}
.fbox__brand img{width:46px; height:auto; mix-blend-mode:multiply}
.fbox__brand b{display:block; font:700 12px/1 var(--mono); letter-spacing:.16em; color:var(--brand-2)}
.fbox__brand span{display:block; margin-top:6px; font-size:16px; font-weight:800; letter-spacing:-.04em}
.fbox__cta{display:flex; gap:8px; flex-wrap:wrap}

/* 연락처 한 줄 — 서브페이지는 세로 2열 프로필 대신 가로 한 줄로 눕힌다.
   ※ 대표 프로필(.fbox__nm/__sub)·교육그룹 목록(.fbox__ac)의 CSS 는 여기 없다.
      그건 home.html 인라인에만 있는 "전체판"이다. 서브에서 되살릴 일이 생기면
      home 에서 가져올 것 — 여기에 죽은 규칙으로 남겨 두지 않는다. */
.fbox__row{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px clamp(20px,2.6vw,38px);
  padding:clamp(15px,1.9vw,20px) 0}
.fbox__row>div{display:flex; align-items:baseline; gap:9px; min-width:0}
.fbox__row dt{flex:none; font:700 10px/1.6 var(--mono); letter-spacing:.14em; color:var(--muted-2)}
.fbox__row dd{margin:0; min-width:0; font-size:13.5px; font-weight:700;
  letter-spacing:-.02em; line-height:1.55}
.fbox__row dd span{margin-left:8px; font-size:12.5px; font-weight:500; color:var(--muted)}
.fbox__row a:hover{color:var(--brand)}
@media (max-width:760px){ .fbox__row{flex-direction:column; gap:9px} }

/* 유틸 — 페이지별 푸터 링크 + 공식 채널. home 에는 없지만 서브페이지는
   여기가 사이트 안을 계속 돌아다니는 마지막 출구라 지우지 않는다. */
.fbox__util{padding:clamp(13px,1.6vw,17px) 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px}
.foot__nav{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px}
.foot__nav a{color:var(--ink-2); font-weight:600}
.foot__nav a:hover{color:var(--brand)}
.foot__ch{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--muted)}
.foot__ch a:hover{color:var(--brand)}
/* ※ 법정표기 문단에 글줄 폭 상한(58em)과 윗 괘선이 같이 걸려 있어, 선이 문단 폭까지만
   그어지고 중간에 끊겨 있었다 — 27장 전 페이지 푸터에서 "만들다 만" 것으로 보이던 자리.
   선은 바깥 칸이 긋고, 글줄 폭 상한은 문단에만 남긴다. */
.fbox__law{padding-top:clamp(15px,1.8vw,20px); border-top:1px solid var(--line)}
.fbox__biz{font-size:11px; line-height:1.8; color:var(--muted-2); letter-spacing:-.01em}

/* ---------------------------------------------------------------------------
   가로 레일 스크롤 어포던스
   390 처럼 좁은 폭에서 칩 레일의 마지막 항목이 화면 끝에 걸려 잘릴 때,
   "여기서 끝"이 아니라 "옆으로 더 있다"를 알려 준다.
   · 오른쪽 끝 30px 만 캔버스색으로 아주 옅게 덮는다(글자를 지우지 않는 세기).
   · 끝까지 밀면 사라진다. 스크롤 여지가 없으면 아예 뜨지 않는다.
   ※ 두 줄 wrap·구조 변경 없음 — 순수하게 가장자리 표시만.
   position 은 각 레일이 이미 sticky 로 잡고 있어 여기서 강제하지 않는다.
   --------------------------------------------------------------------------- */
.xr::after{content:""; position:absolute; top:0; right:0; bottom:1px; width:30px;
  pointer-events:none; z-index:2;
  background:linear-gradient(90deg, rgba(238,244,251,0), rgba(238,244,251,.94));
  opacity:0; transition:opacity .22s var(--ease)}
.xr.xr--on::after{opacity:1}
@media (prefers-reduced-motion:reduce){ .xr::after{transition:none} }

/* ---------------------------------------------------------------------------
   등장 모션 — home 과 동일하게 절제한다(16px, 620ms, 1회)
   --------------------------------------------------------------------------- */
.js .rv{opacity:0; transform:translateY(16px)}
.js .rv.in{opacity:1; transform:none;
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--d,0) * 65ms)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .rv.in{opacity:1; transform:none; transition:none}
  .acc{transition:none}
}

/* ---------------------------------------------------------------------------
   신청 폼 조각 — 무료 상담(apply)과 체험교실(experience)이 함께 쓴다.
   두 지면에 같은 규칙을 두 벌 두면 한쪽만 고쳐지는 일이 생겨서 여기로 모았다.
   --------------------------------------------------------------------------- */
/* 선택 칩 (체크박스) */
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts label{margin:0; cursor:pointer; position:relative}
.opts input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.opts span{display:inline-block; padding:9px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  font-size:13.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink-2); background:var(--panel);
  transition:.18s var(--ease)}
.opts label:hover span{border-color:var(--brand); color:var(--brand)}
.opts input:checked+span{background:var(--brand); border-color:var(--brand); color:#fff}
.opts input:focus-visible+span{outline:2px solid var(--brand); outline-offset:2px}

/* 동의 앞에 붙는 고지문. 접어 두되 한 번 펼치면 표처럼 읽히게 한다. */
.pnote{margin-bottom:13px; border:1px solid var(--line); border-radius:var(--r); background:var(--canvas-2)}
.pnote summary{padding:11px 14px; font-size:13px; font-weight:700; color:var(--ink-2);
  letter-spacing:-.02em; cursor:pointer}
.pnote summary::marker{color:var(--muted-2)}
.pnote[open] summary{border-bottom:1px solid var(--line)}
.pnote dl{padding:4px 14px 12px}
.pnote dl>div{display:grid; grid-template-columns:78px minmax(0,1fr); gap:0 12px;
  padding:9px 0; border-bottom:1px solid var(--line-soft)}
.pnote dl>div:last-child{border-bottom:0}
.pnote dt{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:-.02em}
.pnote dd{margin:0; font-size:12.5px; line-height:1.7; color:var(--ink-2); letter-spacing:-.02em}
@media (max-width:560px){ .pnote dl>div{grid-template-columns:minmax(0,1fr); gap:4px} }

/* ===== 폰에서 입력칸 글자 크기 =====
   iOS 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확 키운다.
   상담 신청·로그인처럼 실제로 손으로 적는 화면에서 매번 화면이 튀었다.
   폰 크기에서만 16px 로 올린다 — 데스크톱 글자 크기와 칸 높이는 그대로다. */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size:16px !important; }
}

/* ======================================================================
   0918 모바일 전수 감수 — 공용 마감 (세부페이지 33쪽이 이 파일 하나를 쓴다)
   전부 폰·태블릿 구간 안에서만 동작하며 데스크톱 배치는 손대지 않는다.
   ====================================================================== */

/* ── ① 가로로 미는 줄(단계 레일 · 강사 분야 · 시설 탭) ──────────────────
   마지막 항목 글자가 화면 끝에서 뚝 잘려 '교육 공…' 처럼 반 토막으로 보였다.
   끝을 흐리게 풀고, 스와이프하면 항목이 딱 맞게 서게 한다(scroll-snap).
   가로로 밀 수 있다는 사실은 그대로 보여 준다 — 글자만 어색하게 자르지 않는다. */
/* 0918 — 가로 탭 끝 페이드는 되돌렸다. 칩이 흰 알약이고 지면도 흰색이라
   페이드가 "잘린 것"과 눈으로 구분되지 않았다(실측 캡처 확인).
   대신 각 페이지에서 nowrap+스크롤을 데스크톱과 같은 flex-wrap:wrap 으로 돌려 전부 보이게 했다. */

/* ── ② 오른쪽 아래 상담 버튼이 본문을 덮던 것 ───────────────────────────
   폰에서는 읽는 동안 비켜 준다(내리는 중 숨김 · 손을 멈추면 복귀 · 푸터에서 숨김).
   그리고 페이지 맨 아래에 버튼 높이만큼 자리를 비워 둔다 —
   마지막 문단이 버튼에 가려진 채로 끝나지 않게 하려는 것이다. */
@media (max-width:760px){
  /* 0918 — 알약이 카드 본문 위에 그대로 얹혀 글자를 가리고 있었다(수강료 06 상담·관리 실측).
     폰에서는 떠 있는 알약을 걷고 화면 맨 아래에 붙는 "막대"로 바꾼다.
     · 불투명 바탕 + 윗 실선 → 카드 위에 얹힌 것이 아니라 화면 기구물로 읽힌다
     · 문서 끝에 막대 높이만큼 자리를 비워 둬 마지막 문단이 가린 채 끝나지 않는다
     · 내리는 중에는 숨고, 손을 멈추면 돌아오고, 푸터에 닿으면 사라진다(읽는 동안 방해 0) */
  .acc{
    left:0; right:0; bottom:0; gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:var(--panel); border-top:1px solid var(--line);
    box-shadow:0 -14px 30px -24px rgba(10,60,110,.5);
    transform:translateY(100%);
  }
  .acc.on{ transform:none }
  .acc__k{ width:42px; height:42px; flex:0 0 auto; box-shadow:none }
  .acc__k svg{ width:21px; height:21px }
  .acc__a{ flex:1 1 auto; justify-content:center; height:42px; padding:0 14px; font-size:14px; box-shadow:none }
  .acc.acc-away, .acc.acc-hide{ opacity:0 !important; visibility:hidden !important; transform:translateY(100%) !important }
  /* 막대가 차지하는 만큼 문서 끝을 비운다 */
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)) }
}

/* ── ③ 의미 단위는 쪼개지 않는다 ────────────────────────────────────────
   전화번호·날짜·숫자+단위가 두 줄로 나뉘면 정보가 아니라 잡음이 된다.
   (전역 word-break 같은 거친 방법은 쓰지 않고, 해당 성격의 값에만 건다) */
.navbar__tel, .acc__a, .mscta a, a[href^="tel:"], time, .wbn__d{ white-space:nowrap }

/* ── 표제 줄간격 기준선 (0918) ─────────────────────────────────────────
   실측: 390px 에서 표제 줄간격이 1.15 ~ 1.65 로 흩어져 있었다. 같은 `.ccta` 마감
   블록의 h3 가 6페이지에서 1.6, `/home` 카드 제목이 1.65, 게시판 `.wbn__hd h2` 가 1.6.
   원인은 페이지 CSS 가 font-size·weight 만 적고 line-height 를 안 적어서
   `body{line-height:1.6}` 을 그대로 물려받은 것이다. 본문 기준 1.6 은 두 줄짜리
   굵은 명조 표제에서 눈에 띄게 헐렁하다.
   상속은 특이도와 무관하게 "규칙이 하나라도 있으면" 지므로, 여기 기준선을 두면
   줄간격을 직접 적어 둔 페이지(1.16·1.2·1.4…)는 그대로 자기 값을 지키고
   안 적은 것들만 제자리로 온다. 크기·굵기·자간은 건드리지 않는다. */
h1,h2{line-height:1.18}
h3,h4{line-height:1.28}