:root{--blue:#0074ff;--blue-deep:#0050c8;--navy:#0a1b33;--ink:#1c2533;--gray:#5b6b80;
--line:#dfe7f2;--tint:#eaf3ff;--bg:#fff;--cyan:#00c2ff;
--mono:'JetBrains Mono',monospace;--sans:'Pretendard Variable',Pretendard,-apple-system,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;font-weight:600}
.sec{padding:96px 0}
.sec h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:10px 0 14px}
.sec .lead{color:var(--gray);font-size:17px;max-width:640px}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.logo img{height:38px;width:38px;object-fit:contain}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:600;color:#33415c}
.nav-links a:hover,.nav-links a.act{color:var(--blue)}
.nav-cta{display:inline-block;background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:10px;transition:background .15s;white-space:nowrap}
.nav-cta:hover{background:var(--blue-deep)}
.menu-btn{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--navy)}
/* buttons */
.btn{display:inline-block;padding:14px 26px;border-radius:12px;font-weight:700;font-size:16px;transition:all .15s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--line);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
/* hero(index) */
.hero{background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%);border-bottom:1px solid var(--line);overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:88px 24px 96px}
.hero h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--navy)}
.hero h1 .hl{color:var(--blue)}
.hero p{margin:20px 0 30px;font-size:18px;color:var(--gray);max-width:480px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges{display:flex;gap:18px;margin-top:34px;flex-wrap:wrap}
.hero-badges span{font-family:var(--mono);font-size:12.5px;color:#41506a;background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:999px}
/* terminal */
.term{background:#0b1422;border-radius:16px;box-shadow:0 28px 60px -18px rgba(10,27,51,.45);overflow:hidden;font-family:var(--mono);font-size:13.5px;line-height:1.75}
.term-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#101c30;border-bottom:1px solid #1d2c45}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar em{font-style:normal;color:#5d7193;font-size:12px;margin-left:8px}
.term-body{padding:20px 22px;min-height:280px;color:#c8d6ec}
.t-prompt{color:#7fd1ff}.t-cmt{color:#5d7193}.t-kw{color:#7aa2ff}.t-str{color:#9ce8a8}.t-fn{color:#ffd479}.t-ok{color:#28c840}
.cursor{display:inline-block;width:8px;height:16px;background:#7fd1ff;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:-48px;position:relative;z-index:2;box-shadow:0 16px 40px -24px rgba(10,27,51,.25)}
.stat{background:#fff;padding:28px 24px;text-align:center}
.stat b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;color:var(--blue);letter-spacing:-.02em}
.stat span{font-size:13.5px;color:var(--gray);margin-top:4px;display:block}
/* tracks */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.track{border:1px solid var(--line);border-radius:16px;padding:28px 26px;background:#fff;transition:all .18s;position:relative;display:block}
.track:hover{border-color:var(--blue);box-shadow:0 14px 34px -18px rgba(0,116,255,.35);transform:translateY(-3px)}
.track .tno{font-family:var(--mono);font-size:12px;color:#9aa9c0;letter-spacing:.1em}
.track h3{font-size:19px;font-weight:800;margin:10px 0 8px;letter-spacing:-.01em}
.track p{font-size:14.5px;color:var(--gray)}
.track ul{margin-top:14px;list-style:none}
.track li{font-size:13.5px;color:#41506a;padding:4px 0 4px 18px;position:relative}
.track li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.55}
.track .more{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--blue)}
.track.featured{background:linear-gradient(150deg,var(--navy) 0%,#0d2c5e 70%,#0a4ba8 100%);border:0;color:#fff}
.track.featured .tno{color:#7fd1ff}
.track.featured p{color:#b9cae4}
.track.featured li{color:#dce8fa}
.track.featured li::before{background:var(--cyan);opacity:1}
.track.featured .more{color:var(--cyan)}
.track .tag{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:11px;background:var(--cyan);color:#04263d;font-weight:700;padding:4px 10px;border-radius:999px}
/* vibe */
.vibe{background:var(--navy);color:#fff}
.vibe .eyebrow{color:var(--cyan)}
.vibe h2{color:#fff}
.vibe .lead{color:#a9bcd8}
.vibe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.vstep{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 26px}
.vstep b{font-family:var(--mono);color:var(--cyan);font-size:13px;letter-spacing:.08em}
.vstep h3{font-size:18px;font-weight:700;margin:10px 0 8px}
.vstep p{font-size:14.5px;color:#a9bcd8}
.vibe-note{margin-top:36px;font-size:14px;color:#7e93b4;border-left:3px solid var(--cyan);padding-left:16px}
/* why */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.why{display:flex;gap:18px;border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff}
.why .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:17px}
.why h3{font-size:17.5px;font-weight:800;margin-bottom:6px}
.why p{font-size:14.5px;color:var(--gray)}
/* system (소수개별맞춤수업 소개) */
.system{margin-top:72px;padding-top:64px;border-top:1px solid var(--line)}
.system-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.sys-card{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;padding:0 0 24px;transition:all .18s}
.sys-card:hover{border-color:var(--blue);box-shadow:0 14px 34px -18px rgba(0,116,255,.35);transform:translateY(-3px)}
.sys-card svg{display:block;width:100%;height:auto;background:#fbfcfe;border-bottom:1px solid var(--line)}
.sys-card h3{font-size:17.5px;font-weight:800;margin:20px 24px 8px}
.sys-card p{font-size:14.5px;color:var(--gray);margin:0 24px}
/* cta */
.cta{background:linear-gradient(135deg,var(--blue) 0%,#0050c8 100%);border-radius:24px;color:#fff;padding:64px 56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cta h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#fff}
.cta p{margin-top:12px;color:#d6e6ff;font-size:16px}
.cta .phone{font-family:var(--mono);font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.01em;display:block;margin-bottom:14px}
.cta .btn{background:#fff;color:var(--blue);font-weight:800}
.cta .btn:hover{transform:translateY(-1px)}
.cta-side{text-align:right}
.cta-side small{display:block;color:#bcd6ff;font-size:13px;margin-top:14px}
/* location */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;align-items:start}
.loc-card{border:1px solid var(--line);border-radius:16px;padding:30px;background:#fff}
.loc-card dl{display:grid;grid-template-columns:88px 1fr;row-gap:14px;font-size:15px}
.loc-card dt{color:#9aa9c0;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding-top:2px}
.loc-card dd{color:var(--ink);font-weight:500}
.loc-card dd a{color:var(--blue);font-weight:700}
.hours{border:1px solid var(--line);border-radius:16px;padding:30px;background:var(--tint)}
.hours h3{font-size:16px;font-weight:800;margin-bottom:14px}
.hours table{width:100%;border-collapse:collapse;font-size:14.5px}
.hours td{padding:7px 0;border-bottom:1px dashed #cdddf2}
.hours td:last-child{text-align:right;font-family:var(--mono);font-size:13.5px;color:#33415c}
/* footer */
footer{border-top:1px solid var(--line);padding:44px 0;color:#8295ad;font-size:13.5px;margin-top:40px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot b{color:var(--ink);font-size:14.5px}
.foot .links{display:flex;gap:18px;font-weight:600;color:#41506a;flex-wrap:wrap}
.foot .links a:hover{color:var(--blue)}
/* page hero (서브페이지 공통) */
.page-hero{background:linear-gradient(180deg,#f5f9ff,#fff);border-bottom:1px solid var(--line);padding:64px 0 52px}
.page-hero h1{font-size:clamp(30px,4.4vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:10px}
.page-hero p{margin-top:12px;color:var(--gray);font-size:17px;max-width:640px}
.crumb{font-size:13px;color:#9aa9c0;margin-bottom:6px}
.crumb a{color:var(--blue);font-weight:600}
/* board */
.board-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:36px 0 18px;flex-wrap:wrap}
.board-search{display:flex;gap:8px}
.board-search input{border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:14.5px;font-family:var(--sans);width:240px}
.board-search button{border:0;background:var(--navy);color:#fff;border-radius:10px;padding:0 18px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.board{width:100%;border-collapse:collapse;border-top:2px solid var(--navy)}
.board th{font-size:13px;color:#41506a;padding:13px 10px;border-bottom:1px solid var(--line);background:#f8fafd;font-weight:700}
.board td{padding:15px 10px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
.board td.title{text-align:left;font-weight:600}
.board td.title a:hover{color:var(--blue);text-decoration:underline}
.board .num,.board .date,.board .hit,.board .writer{text-align:center;color:#8295ad;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;margin-right:8px;vertical-align:1px}
.badge.notice{background:var(--blue);color:#fff}
.badge.new{background:var(--cyan);color:#04263d}
.badge.wait{background:#eef2f8;color:#8295ad}
.badge.done{background:#e3f6e9;color:#1d9d4b}
.paging{display:flex;justify-content:center;gap:6px;margin:32px 0 8px}
.paging a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;font-size:13.5px;font-family:var(--mono);color:#41506a}
.paging a.cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.paging a:hover:not(.cur){border-color:var(--blue);color:var(--blue)}
.board-info{background:var(--tint);border:1px solid #cfe3ff;border-radius:14px;padding:18px 22px;font-size:14px;color:#33415c;margin-top:28px}
.board-info b{color:var(--blue)}
/* write form */
.write{border:1px solid var(--line);border-radius:16px;padding:30px;margin-top:40px;background:#fbfcfe}
.write h3{font-size:18px;font-weight:800;margin-bottom:18px}
.write .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.write input,.write textarea,.write select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14.5px;font-family:var(--sans);background:#fff}
.write textarea{min-height:140px;resize:vertical}
.write label{font-size:13px;font-weight:700;color:#41506a;display:block;margin-bottom:6px}
.write .note{font-size:12.5px;color:#8295ad;margin-top:12px}
/* course page */
.course-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:36px}
.course-meta div{background:#fff;padding:20px 22px}
.course-meta b{display:block;font-family:var(--mono);font-size:12px;color:#9aa9c0;letter-spacing:.08em;margin-bottom:5px}
.course-meta span{font-size:15px;font-weight:700;color:var(--navy)}
.road{margin-top:44px;display:grid;gap:14px}
.road-step{display:grid;grid-template-columns:120px 1fr;gap:22px;border:1px solid var(--line);border-radius:14px;padding:22px 26px;background:#fff;align-items:start}
.road-step .st{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue);padding-top:3px}
.road-step h4{font-size:16.5px;font-weight:800;margin-bottom:4px}
.road-step p{font-size:14.5px;color:var(--gray)}
.target-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.target{background:var(--tint);border-radius:14px;padding:22px 24px;font-size:14.5px;color:#33415c;font-weight:600}
.target::before{content:"✓";color:var(--blue);font-weight:800;margin-right:8px}
.course-cta{margin-top:64px;background:var(--navy);border-radius:20px;padding:44px 48px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.course-cta h3{font-size:22px;font-weight:800}
.course-cta p{color:#a9bcd8;font-size:14.5px;margin-top:6px}
.course-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:48px}
.course-nav a{font-size:13.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:9px 18px;color:#41506a}
.course-nav a:hover{border-color:var(--blue);color:var(--blue)}
.course-nav a.cur{background:var(--blue);border-color:var(--blue);color:#fff}
/* gallery (학원 이야기 이미지) */
.gal-wrap{max-width:908px}
.gal{display:grid;gap:22px;margin-top:36px}
.gal img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 44px -26px rgba(10,27,51,.3);opacity:0;transform:translateY(28px) scale(.985);transition:opacity .8s ease,transform .8s ease}
.gal img.on{opacity:1;transform:none}
/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv,.gal img{opacity:1;transform:none;transition:none}.cursor{animation:none}html{scroll-behavior:auto}}
@media (max-width:960px){
.hero-inner{grid-template-columns:1fr;gap:44px;padding:64px 24px 80px}
.stats,.course-meta{grid-template-columns:repeat(2,1fr)}
.tracks,.vibe-grid,.target-list,.system-cards{grid-template-columns:1fr 1fr}
.why-grid{grid-template-columns:1fr}
.cta{grid-template-columns:1fr;padding:48px 36px}
.cta-side{text-align:left}
.loc{grid-template-columns:1fr}
.nav-links{display:none}
.menu-btn{display:block}
.nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:8px 0}
.nav-links.open a{padding:14px 24px;border-top:1px solid var(--line)}
.write .row{grid-template-columns:1fr}
}
@media (max-width:600px){
.sec{padding:68px 0}
.tracks,.vibe-grid,.target-list,.system-cards{grid-template-columns:1fr}
.system{margin-top:52px;padding-top:48px}
.stats{margin-top:-32px}
.road-step{grid-template-columns:1fr;gap:8px}
.board th:nth-child(1),.board td:nth-child(1),.board th:nth-child(5),.board td:nth-child(5){display:none}
/* header: 로고·전화 한 줄 유지 */
.nav{height:60px;gap:8px}
.nav-links.open{top:60px}
.logo{font-size:14.5px;gap:7px}
.logo img{height:29px;width:29px}
.nav .wrap,.wrap.nav{padding:0 14px}
.nav>div:last-child{gap:8px!important}
.nav-cta{font-size:12px;padding:8px 10px;border-radius:8px}
.menu-btn{font-size:21px}
/* hero: 왼쪽 정렬 유지 + 좌우 여백 확보 */
.hero-inner{gap:36px;padding:56px 24px 64px}
.hero h1{font-size:clamp(29px,8vw,36px)}
.hero p{font-size:16px}
.hero-badges{gap:10px}
/* 서브페이지 히어로 */
.page-hero{padding:48px 0 40px}
.page-hero p{margin-top:12px;font-size:15.5px}
.sec .lead{font-size:15.5px}
/* 게시판·폼 여백 */
.board-tools{flex-direction:column;align-items:stretch}
.board-search{width:100%}
.board-search input{flex:1;width:auto}
.write{padding:22px 18px}
.cta{padding:40px 24px;text-align:center}
.cta-side{text-align:center}
.course-cta{padding:32px 24px;text-align:center;justify-content:center}
}
@media (max-width:390px){
.cta-label{display:none}
.logo{font-size:13.5px}
}
/* 무료 상담 팝업 스타일은 index.html에 인라인으로 있음 (CSS 캐시와 무관하게 동작) */