/* INSKY 2027 예비중1·예비고1 과정 전환 안내 — insky.kr/preseason
   톤: insky.kr 홈(종이 바탕 · 남색 잉크 · 빨간 포인트)과 통일. 모바일(문자 링크) 우선. */
:root{
  color-scheme: light;
  --paper:#F5F1E8; --paper-2:#EDE7DA; --card:#FFFDF8;
  --ink:#101B2D; --ink-2:#4A5262; --ink-3:#7A8090;
  --navy:#0D1B2A; --red:#B3122E; --red-2:#8E0E24; --pen:#E8414F;
  --line:#DCD5C6; --line-2:#C9C0AE;
  --acc:var(--red);               /* 예비중1 = 빨강, 예비고1 = 남색(아래 .high-page) */
  --acc-ink:#fff;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  --serif:'Noto Serif KR',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.high-page{--acc:var(--navy)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;
  letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.18;font-weight:800;text-wrap:balance}
p{margin:0}
.shell{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4.5vw,48px) 120px}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px}

/* 상단 바 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.02em;font-size:17px;text-decoration:none}
.brand-mark{width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:900;font-size:13px;position:relative;letter-spacing:-.04em}
.brand-mark::after{content:"";position:absolute;right:4px;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--pen)}
.brand-sub{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);font-weight:800;margin-left:4px}
.mini-nav{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--acc);
  border:1px solid currentColor;border-radius:999px;padding:4px 11px;letter-spacing:.02em}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* 과정 전환 탭 (예비중1 ↔ 예비고1) */
.ptabs{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.ptabs a{padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:800;text-decoration:none;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.ptabs a:hover{color:var(--ink)}
.ptabs a[aria-current="page"]{background:var(--ink);color:#fff}
/* 다른 과정 보기 카드 */
.cross{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 20px;margin-top:clamp(20px,3vw,28px);
  padding:clamp(22px,3vw,30px) clamp(22px,3.4vw,36px);border:1px solid var(--line);border-radius:8px;background:var(--card);
  text-decoration:none;color:inherit;transition:border-color .25s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.cross:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 20px 40px -28px rgba(16,27,45,.45)}
.cross-k{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.cross-t{grid-column:1;font-size:clamp(20px,2.6vw,26px);font-weight:900;letter-spacing:-.04em}
.cross-d{grid-column:1;font-size:14px;color:var(--ink-2)}
.cross i{grid-column:2;grid-row:1/4;font-style:normal;font-size:26px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;transition:transform .3s var(--ease)}
.cross:hover i{transform:translateX(4px)}

/* 히어로 */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(40px,7vw,88px) 0 clamp(40px,6vw,72px)}
.eyebrow{display:block;font-size:13px;font-weight:800;color:var(--acc);letter-spacing:.02em;margin-bottom:18px}
.hero h1{font-size:clamp(36px,6.4vw,66px);font-weight:900;letter-spacing:-.05em;line-height:1.12}
.hero h1 em{font-style:normal;color:var(--acc);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;background:var(--pen);opacity:.28;
  transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .5s}
.in .hero h1 em::after,.hero.in h1 em::after{transform:scaleX(1)}
.hero-lead{margin-top:24px;font-size:clamp(16px,1.9vw,18.5px);color:var(--ink-2);max-width:34em}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hero-pills span{font-size:14.5px;font-weight:800;padding:9px 14px;border:1px solid var(--line-2);background:var(--card);border-radius:4px}
.hero-pills span:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 히어로 비주얼: 전환 다이어그램(회전 링 + 4개 노드) */
.hero-visual{display:flex;justify-content:center}
.orbit{position:relative;width:min(100%,420px);aspect-ratio:1/1}
.orbit-ring{position:absolute;inset:9%;border-radius:50%;border:1.5px dashed var(--line-2);animation:spin 60s linear infinite}
.orbit::before{content:"";position:absolute;inset:22%;border-radius:50%;border:1px solid var(--line)}
.orb-center{position:absolute;inset:27%;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;text-align:center;
  box-shadow:0 30px 60px -28px rgba(13,27,42,.55)}
.high-page .orb-center{background:var(--ink)}
.orb-center small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.6)}
.orb-center strong{display:block;font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:-.04em;margin:6px 0 4px}
.orb-center b{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.orb-node{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:9px 13px;
  font-weight:900;font-size:16px;letter-spacing:-.02em;box-shadow:0 10px 24px -16px rgba(16,27,45,.35);animation:float 6s ease-in-out infinite}
.orb-node small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-3);font-weight:600}
.orb-node.n1{left:0;top:10%}
.orb-node.n2{right:0;top:18%;animation-delay:-1.5s}
.orb-node.n3{left:4%;bottom:12%;animation-delay:-3s}
.orb-node.n4{right:2%;bottom:6%;animation-delay:-4.5s;background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.orb-node.n4 small{color:rgba(255,255,255,.72)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 섹션 공통 */
.section{padding:clamp(52px,7vw,88px) 0;border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px 48px;align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--acc);font-weight:700;margin-bottom:14px}
.section-head h2{font-size:clamp(27px,4vw,42px);font-weight:900;letter-spacing:-.045em}
.section-intro{color:var(--ink-2);font-size:16px;max-width:36em}

/* 01 전환 보드 */
.shift-board{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.shift-side{padding:clamp(24px,3vw,36px);border:1px solid var(--line);background:var(--card);position:relative}
.shift-side.before{border-radius:6px 0 0 6px;color:var(--ink-2)}
.shift-side.after{border-radius:0 6px 6px 0;background:var(--ink);color:#fff;border-color:var(--ink)}
.shift-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;opacity:.7}
.shift-main{font-size:clamp(26px,3.4vw,36px);font-weight:900;letter-spacing:-.04em;margin-top:14px}
.shift-sub{font-size:14px;opacity:.75;margin-top:2px}
.shift-list{margin-top:22px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.3)}
.shift-list div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(127,127,127,.22);font-size:15px}
.shift-list span{opacity:.72}
.shift-list b{font-weight:800}
.shift-em{display:inline-block;margin-top:20px;font-size:13.5px;font-weight:800;color:#fff;background:var(--pen);padding:7px 12px;border-radius:4px}
.high-page .shift-em{background:var(--red)}
.shift-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--paper-2);border-block:1px solid var(--line)}
.shift-arrow::before{content:"";width:28px;height:28px;border-top:2.5px solid var(--acc);border-right:2.5px solid var(--acc);transform:rotate(45deg);
  animation:nudge 1.8s var(--ease) infinite}
.shift-arrow small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink-3);writing-mode:vertical-rl}
@keyframes nudge{0%,100%{transform:translateX(-4px) rotate(45deg)}50%{transform:translateX(4px) rotate(45deg)}}

/* 02 시스템 */
.system-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,36px);align-items:stretch}
.manifesto{background:var(--navy);color:#fff;border-radius:6px;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden}
.manifesto::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.quote{font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);font-weight:700;line-height:1.5;letter-spacing:-.03em}
.quote span{color:#FFB3BA;box-shadow:inset 0 -.32em 0 rgba(232,65,79,.35)}
.caption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.flow-card{padding:clamp(20px,2.4vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;background:var(--card);transition:background .25s}
.flow-card:hover{background:#fff}
.flow-card .num{position:absolute;top:18px;right:18px;font-family:var(--serif);font-size:28px;font-weight:800;color:var(--line-2)}
.flow-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--acc);margin-bottom:16px}
.flow-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-card h3{font-size:19px;font-weight:800}
.flow-card p{margin-top:6px;font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* 03 수업 방식 */
.class-mode{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(16px,2.4vw,24px)}
.mode-main{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:clamp(26px,3.6vw,40px);border-top:4px solid var(--acc)}
.mode-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acc);font-weight:700}
.mode-main h3{font-size:clamp(21px,2.6vw,27px);margin-top:12px}
.mode-main p{margin-top:12px;color:var(--ink-2)}
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px;border-top:1px solid var(--line)}
.step{padding:16px 10px 0 0;position:relative}
.step i{font-style:normal;font-family:var(--serif);font-size:24px;font-weight:800;color:var(--acc);display:block}
.step b{font-size:14.5px;font-weight:800}
.step::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--acc);transition:width .7s var(--ease)}
.in .step::before{width:100%}
.in .step:nth-child(2)::before{transition-delay:.15s}.in .step:nth-child(3)::before{transition-delay:.3s}.in .step:nth-child(4)::before{transition-delay:.45s}
.mode-alt{border:1px dashed var(--line-2);border-radius:6px;padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.mode-alt small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3)}
.mode-alt h3{font-size:19px;margin-top:10px}
.mode-alt p{margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.mode-alt strong{font-size:13px;font-weight:800;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}

/* 04 시간표 */
.schedule-wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(16px,2.4vw,24px)}
.schedule-aside{background:var(--acc);color:var(--acc-ink);border-radius:6px;padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.schedule-aside span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;opacity:.75}
.schedule-aside strong{display:block;font-family:var(--serif);font-size:clamp(30px,3.6vw,40px);font-weight:800;line-height:1.15;margin:12px 0}
.schedule-aside p{font-size:14.5px;opacity:.88}
.week-card{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:clamp(20px,3vw,30px)}
.week-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
.week-top h3{font-size:19px}
.week-top b{font-size:13px;color:var(--acc);font-weight:800}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.daybox{border:1px solid var(--line);border-radius:5px;padding:14px 8px;text-align:center;background:var(--paper);color:var(--ink-3)}
.daybox b{display:block;font-size:17px;color:var(--ink);font-weight:900}
.daybox time{display:block;font-size:12.5px;margin:6px 0 4px;line-height:1.35;font-variant-numeric:tabular-nums}
.daybox small{font-size:11px;font-weight:700}
.daybox.active{background:var(--acc);border-color:var(--acc);color:rgba(255,255,255,.85)}
.daybox.active b{color:#fff}
.daybox.alt{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.8)}
.daybox.alt b{color:#fff}
.high-page .daybox.active{background:var(--navy);border-color:var(--navy)}
.schedule-note{margin-top:16px;font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* 05 혜택 */
.benefit-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.ticket{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:clamp(24px,3vw,34px);overflow:hidden}
.ticket::before,.ticket::after{content:"";position:absolute;top:calc(100% - 64px);width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.ticket::before{left:-12px}.ticket::after{right:-12px}
.ticket-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acc);font-weight:700}
.ticket h3{font-size:19px;margin-top:10px}
.ticket .big{font-family:var(--serif);font-size:clamp(28px,3.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.25;margin-top:14px;color:var(--ink)}
.ticket p{margin-top:6px;color:var(--ink-2);font-size:15px}
.ticket .line{border-top:1.5px dashed var(--line-2);margin:22px 0 14px}
.ticket .mini{font-size:13px;color:var(--ink-3);font-weight:700}
.rule{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px;padding:16px 18px;border-left:3px solid var(--pen);background:var(--paper-2);font-size:14.5px;color:var(--ink-2)}
.rule strong{color:var(--ink)}

/* 06 FAQ */
.faq{border-top:1px solid var(--ink);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 2px;font-weight:800;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;font-weight:400;color:var(--acc);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 20px;color:var(--ink-2);max-width:62ch}

/* 상담·문의 (추가) */
.contact{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0}
.contact h2{font-size:clamp(25px,3.6vw,36px);font-weight:900;letter-spacing:-.045em}
.contact p.lead{margin-top:10px;color:var(--ink-2)}
.contact-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.cbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:14px 16px;border-radius:5px;font-weight:800;font-size:15.5px;
  text-decoration:none;border:1.5px solid var(--ink);transition:transform .15s,background .2s,color .2s}
.cbtn:active{transform:scale(.98)}
.cbtn.tel{background:var(--red);border-color:var(--red);color:#fff}
.cbtn.tel:hover{background:var(--red-2);border-color:var(--red-2)}
.cbtn.kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.cbtn.book{background:var(--card);color:var(--ink)}
.cbtn.book:hover{background:var(--ink);color:#fff}
.contact-meta{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:18px;font-size:14px;color:var(--ink-2)}
.contact-meta b{color:var(--ink)}

/* 마무리 */
.final{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;background:var(--navy);color:#fff;border-radius:8px;
  padding:clamp(30px,5vw,56px);margin-top:clamp(20px,3vw,32px);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:-80px;top:-80px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.final .small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.55)}
.final h2{font-size:clamp(25px,3.6vw,38px);font-weight:900;letter-spacing:-.045em;margin-top:14px}
.final p{margin-top:14px;color:rgba(255,255,255,.78)}
.final-badge{width:128px;height:128px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;text-align:center;position:relative}
.final-badge::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(255,255,255,.25);animation:spin 30s linear infinite}
.final-badge small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:rgba(255,255,255,.6)}
.final-badge b{display:block;font-family:var(--serif);font-size:34px;font-weight:800;line-height:1.2;color:#FFB3BA}

.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:28px 0 0;margin-top:40px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.footer strong{color:var(--ink)}

/* 하단 고정 CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px clamp(12px,3vw,20px) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.sticky.show{transform:none}
.sticky-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}
.sticky a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:5px;font-weight:800;font-size:14.5px;text-decoration:none;border:1.5px solid var(--ink);background:var(--card)}
.sticky a.s-benefit{background:var(--acc);border-color:var(--acc);color:#fff}
.sticky a.s-kakao{background:#FEE500;border-color:#FEE500;color:#191600}

/* 허브 대제목: 지금 안내를 보내는 이유(12월 과정 전환) */
.hub-hero h1.announce{font-size:clamp(34px,6.2vw,64px);line-height:1.18;letter-spacing:-.05em;margin-top:16px}
.hub-hero h1.announce .ln{display:block}
.hub-hero h1.announce b{font-weight:900;color:var(--ink);box-shadow:inset 0 -.18em 0 var(--paper-2)}
.hub-hero h1.announce em{font-style:normal;color:var(--red);position:relative;white-space:nowrap}
.hub-hero h1.announce em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.02em;height:.2em;background:var(--pen);opacity:.32;border-radius:2px;
  transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .55s}
.hub-hero.in h1.announce em::after{transform:scaleX(1)}
.mo .hub-hero h1.announce .ln{opacity:0;transform:translateY(.45em);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mo .hub-hero.in h1.announce .ln{opacity:1;transform:none}
.mo .hub-hero.in h1.announce .ln:nth-child(2){transition-delay:.14s}
.mo .hub-hero.in h1.announce .ln:nth-child(3){transition-delay:.28s}
.shift-pair{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.sp{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:5px;background:var(--card);border:1px solid var(--line-2);font-weight:900;font-size:clamp(16px,2vw,19px)}
.sp-from{color:var(--ink-3)}
.sp-to{color:var(--red)}
.sp.high .sp-to{color:var(--navy)}
.sp-arrow{width:26px;height:2px;background:currentColor;position:relative;color:var(--ink-2)}
.sp-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.mo .sp-arrow{animation:spnudge 2s var(--ease) infinite}
@keyframes spnudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
.sp-when{padding:10px 16px;border-radius:5px;background:var(--red);color:#fff;font-weight:900;font-size:clamp(16px,2vw,19px)}
.hub-hero p{margin-top:22px}

/* 허브(index) */
.hub-hero{padding:clamp(48px,8vw,96px) 0 clamp(28px,4vw,40px)}
.hub-hero h1{font-size:clamp(34px,6vw,60px);font-weight:900;letter-spacing:-.05em;margin-top:14px}
.hub-hero h1 em{font-style:normal;color:var(--red)}
.hub-hero p{margin-top:18px;color:var(--ink-2);font-size:17px;max-width:34em}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.hub-card{display:flex;flex-direction:column;justify-content:space-between;min-height:300px;text-decoration:none;color:inherit;border-radius:8px;
  padding:clamp(26px,3.6vw,40px);border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(16,27,45,.45)}
.hub-card.high{background:var(--navy);color:#fff;border-color:var(--navy)}
.hub-card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);font-weight:700}
.hub-card.high .tag{color:#FFB3BA}
.hub-card h2{font-size:clamp(34px,4.6vw,48px);font-weight:900;letter-spacing:-.05em;margin-top:12px}
.hub-card .from{font-size:14px;font-weight:700;opacity:.65;margin-top:4px}
.hub-card p{margin-top:16px;opacity:.82;line-height:1.65}
.hub-card .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.hub-card .meta span{font-size:13px;font-weight:800;padding:6px 10px;border:1px solid currentColor;border-radius:4px;opacity:.8}
.hub-card .go{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.3);font-weight:800}
.hub-card .go i{font-style:normal;transition:transform .3s var(--ease)}
.hub-card:hover .go i{transform:translateX(6px)}
.hub-card::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;border:1px solid currentColor;opacity:.08}

/* 등장 모션 */
.mo [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mo [data-rv].in{opacity:1;transform:none}
.mo [data-rv-kids]>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mo [data-rv-kids].in>*{opacity:1;transform:none}
.mo [data-rv-kids].in>*:nth-child(2){transition-delay:.08s}
.mo [data-rv-kids].in>*:nth-child(3){transition-delay:.16s}
.mo [data-rv-kids].in>*:nth-child(4){transition-delay:.24s}
.mo [data-rv-kids].in>*:nth-child(5){transition-delay:.32s}
.mo [data-rv-kids].in>*:nth-child(6){transition-delay:.4s}
.mo .hero h1 .ln{display:block;opacity:0;transform:translateY(.5em);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mo .hero.in h1 .ln{opacity:1;transform:none}
.mo .hero.in h1 .ln:nth-child(2){transition-delay:.12s}
.mo .hero.in h1 .ln:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sticky{transform:none}
}

/* 반응형 */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-visual{order:2}
  .section-head{grid-template-columns:1fr;align-items:start}
  .system-grid,.class-mode,.schedule-wrap{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mini-nav{display:none}
  .brand-sub{display:none}
  .topbar{gap:10px}
  .ptabs a{padding:6px 11px;font-size:13px}
  .shift-board{grid-template-columns:1fr}
  .shift-side.before{border-radius:6px 6px 0 0}
  .shift-side.after{border-radius:0 0 6px 6px}
  .shift-arrow{flex-direction:row;padding:10px 0;border-block:0;border-inline:1px solid var(--line)}
  .shift-arrow::before{transform:rotate(135deg);animation:nudgeY 1.8s var(--ease) infinite}
  .shift-arrow small{writing-mode:horizontal-tb}
  .flow{grid-template-columns:1fr}
  .process{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .week{grid-template-columns:repeat(5,minmax(58px,1fr));overflow-x:auto;padding-bottom:4px}
  .benefit-board,.hub-grid{grid-template-columns:1fr}
  .contact-actions{grid-template-columns:1fr}
  .final{grid-template-columns:1fr}
  .final-badge{width:104px;height:104px}
  .orbit{width:min(100%,340px)}
  .orb-node{font-size:14px;padding:7px 10px}
}
@keyframes nudgeY{0%,100%{transform:translateY(-3px) rotate(135deg)}50%{transform:translateY(3px) rotate(135deg)}}
@media (max-width:380px){ .sticky-in{grid-template-columns:1fr 1fr 1fr} .sticky a{font-size:13px} }

@media (max-width:420px){ .topbar .status{display:none} }