/* ============================================================
   아리아 에듀 — 공통 레이아웃
   색상은 themes.css 의 브랜드 토큰이 결정합니다.
   이 파일은 "구조"만 담당하므로 보통 건드릴 일이 없습니다.
   ============================================================ */
:root{
  --sidebar-w: 224px;
  --header-h:  76px;
  --nav-h:     74px;
  --pad:       56px;

  --font-kr:   "Pretendard","Pretendard Variable","Apple SD Gothic Neo",
               "Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif;
  --font-en:   Georgia,"Times New Roman",serif;
  --ease:      cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-kr);
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; text-align:left; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ══════════════ 앱 셸 ══════════════ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--header-h) 1fr;
  height:100vh; height:100dvh;
  overflow:hidden;
}

/* ══════════════ 헤더 ══════════════ */
.header{
  grid-column:1 / 3;
  display:flex; align-items:center; gap:18px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-right:24px;
}
.header__logo{
  width:var(--sidebar-w); height:100%; flex:none;
  display:flex; align-items:center; justify-content:center;
  padding:6px 10px; background:var(--logo-bg,transparent);
}
.header__logo img{ max-height:100%; width:auto; object-fit:contain; }
.header__link{
  font-size:16px; color:var(--ink); white-space:nowrap;
  transition:color .2s var(--ease);
}
.header__link:hover{ color:var(--accent-text); }
.header__link span{ font-size:12px; }

.header__menu-btn{ display:none; margin-left:auto; flex-direction:column; gap:5px; padding:6px; }
.header__menu-btn span{
  display:block; width:24px; height:2px; background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s;
}
.header__menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.header__menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.header__menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ══════════════ 사이드바 ══════════════ */
.sidebar{
  grid-column:1;
  background:var(--bg);
  border-right:1px solid var(--rail-line);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
.sidebar::-webkit-scrollbar{ width:0; }

.nav{ display:flex; flex-direction:column; flex:none; }
.nav__item{
  position:relative; display:block; width:100%; height:var(--nav-h);
  border-bottom:1px solid var(--border);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.nav__item:hover{ background:var(--bg-3); }
.nav__kr{
  position:absolute; left:24px; top:13px;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); transition:color .2s var(--ease);
}
.nav__en{
  position:absolute; right:14px; bottom:10px;
  font-family:var(--font-en); font-style:italic; font-size:23px; line-height:1;
  color:var(--ink-2); transition:color .2s var(--ease);
}
.nav__item:hover .nav__en{ color:var(--ink); }
.nav__item.is-active{ border-bottom-color:var(--accent); }
.nav__item.is-active .nav__kr,
.nav__item.is-active .nav__en{ color:var(--accent-text); }
.nav__item.is-active .nav__en{ font-weight:700; }

/* 대표번호 / 수업문의 */
.tag-pill{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:160px; height:34px;
  background:var(--accent); color:var(--on-accent);
  font-size:15px; font-weight:700; letter-spacing:-.02em;
  border-radius:999px;
  transition:transform .15s var(--ease), filter .2s var(--ease);
}
a.tag-pill:hover{ transform:translateY(-1px); filter:brightness(1.06); }

.contact-box{
  background:var(--panel); color:var(--on-panel);
  padding:14px 12px 16px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.contact-box__number{ font-size:19px; font-weight:500; letter-spacing:-.02em; color:var(--on-panel); }
.contact-box__number strong{ font-weight:800; }

.cta-box{
  padding:16px 12px 18px;
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.cta-box__icons{ display:flex; gap:18px; }
.icon-btn{ width:30px; height:30px; display:flex; align-items:center; justify-content:center;
           transition:transform .2s var(--ease); }
.icon-btn:hover{ transform:translateY(-2px); }
.icon-btn svg{ width:26px; height:26px; fill:var(--icon); color:var(--icon);
               transition:fill .2s var(--ease), color .2s var(--ease); }
.icon-btn:hover svg{ fill:var(--accent-text); color:var(--accent-text); }

.scrim{ position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.5); }

/* ══════════════ 콘텐츠 / 패널 ══════════════ */
.content{ grid-column:2; position:relative; min-height:0; overflow:hidden; }
.panel{ display:none; height:100%; overflow-y:auto; overflow-x:hidden; }
.panel.is-active{ display:block; animation:panelIn .45s var(--ease) both; }
@keyframes panelIn{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }

.placeholder-section{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:40px; text-align:center; color:var(--ink-3);
}
.placeholder-section p{ font-size:20px; font-weight:600; color:var(--ink-2); }
.placeholder-section span{ font-size:14px; }

.placeholder-block{
  padding:80px 40px; text-align:center; color:var(--ink-3);
  border:1px dashed var(--border);
}
.placeholder-block p{ font-size:18px; color:var(--ink-2); margin-bottom:6px; }

/* ══════════════ 히어로 ══════════════ */
/* 대문사진 크기: --hero-gap(사방 여백)을 키우면 사진이 작아집니다 */
.panel[data-panel="home"].is-active{ display:flex; align-items:center; justify-content:center; --hero-gap:clamp(24px,3.5vw,52px); }
.hero{ position:relative; flex:none; width:calc(100% - var(--hero-gap) * 2); height:calc(100% - var(--hero-gap) * 2);
       min-height:320px; overflow:hidden; background:var(--bg-2); }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .9s var(--ease);
  background-color:var(--bg-2);
  background-image:var(--slide-img,linear-gradient(135deg,var(--slide-color,#9a9a9a),#454545));
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero__slide.is-active{ opacity:1; }
@media (max-width:600px) and (orientation:portrait){
  .hero__slide[style*="--slide-img-m"]{ background-image:var(--slide-img-m); background-position:center bottom; }
}
.hero__slide span{ color:rgba(255,255,255,.72); font-size:14px; letter-spacing:.5px;
                   text-shadow:0 1px 10px rgba(0,0,0,.5); }

.hero__dots{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
             display:flex; align-items:center; gap:12px; z-index:2; }
.hero__dot{ width:13px; height:13px; border-radius:999px; background:rgba(255,255,255,.45);
            transition:width .35s var(--ease), background .3s var(--ease); }
.hero__dot:hover{ background:rgba(255,255,255,.8); }
.hero__dot.is-active{ width:46px; background:#fff; }

/* ══════════════ 소개 ══════════════ */
.program{ padding:56px var(--pad) 110px; max-width:1080px; margin:0 auto; }
.program__tabs{ display:flex; justify-content:center; gap:32px; margin-bottom:70px; }
.program__tab{
  min-width:160px; height:40px; padding:0 28px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--pill-off); color:var(--on-pill-off);
  font-size:16px; font-weight:700; letter-spacing:-.02em;
  transition:background .2s var(--ease), transform .15s var(--ease);
}
.program__tab:hover{ transform:translateY(-1px); }
.program__tab.is-active{ background:var(--accent); color:var(--on-accent); }
.program__panel{ display:none; }
.program__panel.is-active{ display:block; animation:panelIn .35s var(--ease) both; }

.program__title{ font-size:clamp(30px,3.6vw,50px); font-weight:800;
                 letter-spacing:-.04em; line-height:1.2; margin-bottom:26px; }
.program__lead{
  border-left:4px solid var(--accent); padding-left:16px;
  color:var(--ink-2); font-size:15.5px; line-height:1.85; white-space:pre-line;
}
.program__points{ display:flex; flex-direction:column; gap:78px; margin-top:78px; }
.program__points li{ font-size:clamp(16px,1.35vw,19px); color:var(--ink-2); letter-spacing:-.02em; }
.program__points li h4{ font-size:clamp(16px,1.35vw,19px); font-weight:800; color:var(--ink);
                         letter-spacing:-.02em; margin-bottom:12px; }
.program__points li p{ font-size:15px; line-height:1.85; color:var(--ink-2);
                        white-space:pre-line; padding-left:18px; }
.program__points--rich{ gap:48px; }

/* 원장 프로필 — 아래로 조금 긴 타원 */
/* 오른쪽 정렬, 글은 사진 왼쪽에 */
.program__profile{ margin-top:72px; display:flex; justify-content:flex-end; align-items:flex-end; gap:14px; }
.program__profile-img{
  width:100px; aspect-ratio:4/5; object-fit:cover; object-position:center top;
  border-radius:50%; background:#fff; border:1px solid var(--line);
}
.program__profile figcaption{ order:-1; display:flex; flex-direction:column; align-items:flex-end; gap:3px; letter-spacing:-.02em; }
.program__profile-role{ font-size:13px; color:var(--ink-2); }
.program__profile-name{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.1; }

/* ══════════════ 강점 카드 ══════════════ */
.ourway{ padding:56px var(--pad) 110px; max-width:1280px; margin:0 auto; }
.ourway__title{ font-size:clamp(30px,3.4vw,50px); font-weight:800;
                line-height:1.28; letter-spacing:-.035em; margin-bottom:26px; white-space:pre-line; }
.ourway__lead{ border-left:4px solid var(--accent); padding-left:16px;
               color:var(--ink-2); font-size:15px; line-height:1.85;
               margin-bottom:46px; white-space:pre-line; }
.ourway__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }

.feature-card{
  position:relative; aspect-ratio:16/9; min-height:230px; overflow:hidden;
  background:var(--bg-3);
  display:flex; align-items:center;
  padding:0 clamp(20px,3vw,44px); gap:clamp(14px,2.4vw,38px);
}
.feature-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--card-img,linear-gradient(135deg,var(--card-color,#555),#222));
  background-size:cover; background-position:center;
  transition:transform .7s var(--ease);
}
.feature-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2));
  transition:background .5s var(--ease);
}
.feature-card:hover::before,.feature-card.is-open::before{ transform:scale(1.06); }
.feature-card:hover::after,.feature-card.is-open::after{ background:rgba(0,0,0,.72); }

.feature-card__title{
  position:relative; z-index:2; flex:none; color:#fff;
  font-size:clamp(20px,2vw,30px); font-weight:700;
  line-height:1.35; letter-spacing:-.03em; white-space:pre-line;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.feature-card__detail{
  position:relative; z-index:2; color:#e6e6e6;
  font-size:clamp(12.5px,1.05vw,14.5px); line-height:1.75; white-space:pre-line;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.feature-card:hover .feature-card__detail,
.feature-card.is-open .feature-card__detail{ opacity:1; transform:none; }

.ourway__grid .feature-card:nth-child(3),
.ourway__grid .feature-card:nth-child(4){ flex-direction:row-reverse; }
.ourway__grid .feature-card:nth-child(3)::after,
.ourway__grid .feature-card:nth-child(4)::after{
  background:linear-gradient(270deg,rgba(0,0,0,.62),rgba(0,0,0,.2));
}
.ourway__grid .feature-card:nth-child(3):hover::after,
.ourway__grid .feature-card:nth-child(4):hover::after{ background:rgba(0,0,0,.72); }

/* ══════════════ 소식 (블로그 최신글) — 강점 페이지와 같은 틀 ══════════════ */
.notice{ padding:56px var(--pad) 110px; max-width:1280px; margin:0 auto; }
.notice__title{ font-size:clamp(30px,3.4vw,50px); font-weight:800;
                line-height:1.28; letter-spacing:-.035em; margin-bottom:26px; white-space:pre-line; word-break:keep-all; }
.notice__lead{ border-left:4px solid var(--accent); padding-left:16px;
               color:var(--ink-2); font-size:15px; line-height:1.85;
               margin-bottom:46px; white-space:pre-line; word-break:keep-all; }
.notice__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }

.post-card{ display:flex; flex-direction:column; background:var(--bg-3); }
.post-card__thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.post-card__thumb::before{
  content:""; position:absolute; inset:0;
  background-image:var(--thumb-img,linear-gradient(135deg,var(--accent-wash),var(--bg-3)));
  background-size:cover; background-position:center;
  transition:transform .7s var(--ease);
}
.post-card:hover .post-card__thumb::before{ transform:scale(1.06); }
.post-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 22px;
                  border-bottom:3px solid transparent; transition:border-color .3s var(--ease); flex:1; }
.post-card:hover .post-card__body{ border-bottom-color:var(--accent); }
.post-card__date{ font-size:13px; color:var(--ink-3); }
.post-card__title{
  font-size:15px; font-weight:700; line-height:1.6; letter-spacing:-.02em; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.notice__more{ display:flex; justify-content:center; margin-top:46px; }
.notice__more a{
  display:inline-flex; align-items:center; height:40px; padding:0 28px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-size:15px; font-weight:700; letter-spacing:-.02em;
  transition:transform .15s var(--ease);
}
.notice__more a:hover{ transform:translateY(-1px); }

@media (max-width:1180px){ .notice__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px){  .notice__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){  .notice__grid{ grid-template-columns:minmax(0,1fr); } }

/* ══════════════ 시간표 — 소개·강점 페이지와 같은 머리글 + 표 ══════════════ */
.sched{ padding:56px var(--pad) 110px; max-width:1080px; margin:0 auto; }
.sched__title{ font-size:clamp(30px,3.4vw,50px); font-weight:800;
               line-height:1.28; letter-spacing:-.035em; margin-bottom:26px; white-space:pre-line; word-break:keep-all; }
.sched__lead{ border-left:4px solid var(--accent); padding-left:16px;
              color:var(--ink-2); font-size:15px; line-height:1.85;
              margin-bottom:46px; white-space:pre-line; word-break:keep-all; }
.sched__h{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 0 16px; }
.sched-table-wrap + .sched__h{ margin-top:56px; }
.sched__foot{ margin-top:22px; font-size:13.5px; line-height:1.8; color:var(--ink-3); white-space:pre-line; }

.sched-table-wrap{ overflow-x:auto; }
.sched-table{ width:100%; border-collapse:collapse; font-size:15px; }
@media (max-width:520px){
  .sched-table{ font-size:14px; }
  .sched-table td:last-child{ white-space:nowrap; }
  .sched-table th,.sched-table td{ padding-left:9px; padding-right:9px; }
}
.sched-table th{ text-align:left; font-weight:700; font-size:13.5px; color:var(--ink-3);
                 padding:10px 14px; border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); }
.sched-table td{ padding:15px 14px; border-bottom:1px solid var(--line); color:var(--ink-2);
                 white-space:pre-line; vertical-align:middle; }
.sched-table .sched-table__key{ font-weight:800; color:var(--accent-text); white-space:nowrap;
                                border-right:1px solid var(--line); }
.sched-table .sched-table__name{ font-weight:700; color:var(--ink); }

/* ══════════════ 오시는 길 — 왼쪽 정보 + 오른쪽 네이버 지도 ══════════════ */
.visit{ padding:56px var(--pad) 110px; max-width:1280px; margin:0 auto; }
.visit__title{ font-size:clamp(30px,3.4vw,50px); font-weight:800;
               line-height:1.28; letter-spacing:-.035em; margin-bottom:40px; }
.visit__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,4vw,56px); align-items:stretch; }
.visit__rows{ border-top:1.5px solid var(--ink); }
.visit__row{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px; padding:22px 2px; border-bottom:1px solid var(--line); }
.visit__row dt{ font-size:14.5px; color:var(--ink-3); padding-top:2px; }
.visit__row dd{ font-size:17px; color:var(--ink); line-height:1.6; word-break:keep-all; white-space:pre-line; }
.visit__btn{
  display:inline-flex; align-items:center; height:44px; padding:0 26px; margin-top:32px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-size:15px; font-weight:700; letter-spacing:-.02em;
  transition:transform .15s var(--ease);
}
.visit__btn:hover{ transform:translateY(-1px); }
.visit__map{ position:relative; min-height:420px; background:var(--bg-3); overflow:hidden; }
.visit__map-fallback{ position:absolute; inset:0; z-index:1000; background:var(--bg-3); display:flex; flex-direction:column; align-items:center; justify-content:center;
                      gap:8px; padding:24px; text-align:center; color:var(--ink-2); }
.visit__map-fallback strong{ font-size:17px; color:var(--accent-text); }
.visit__map-fallback span{ font-size:14px; word-break:keep-all; }
@media (max-width:860px){
  .visit__grid{ grid-template-columns:minmax(0,1fr); }
  .visit__map{ min-height:320px; }
  .visit__row{ grid-template-columns:64px minmax(0,1fr); padding:18px 2px; }
  .visit__row dd{ font-size:16px; }
}

/* 소개 하단 인용문 — 흘림체 */
.program__quote{ margin-top:80px; text-align:center; color:var(--ink); white-space:pre-line; }
.program__quote-ko{ font-family:'Aria Pen','Gungsuh',serif; font-size:clamp(26px,2.6vw,34px);
                    line-height:1.45; letter-spacing:0; word-break:keep-all; }
.program__quote-en{ margin-top:14px; font-family:'Aria Script','Brush Script MT',cursive;
                    font-size:clamp(18px,1.7vw,22px); line-height:1.5; color:var(--ink-2); }
.program__quote-by{ display:block; margin-top:18px; font-style:normal;
                    font-family:'Aria Pen','Gungsuh',serif; font-size:24px; color:var(--accent-text); }
.program__quote + .program__profiles,
.program__quote + .program__profile{ margin-top:56px; }

@media (max-width:520px){
  .program__quote{ white-space:normal; }
  .program__quote-ko{ font-size:24px; }
  .program__quote-en{ font-size:17px; }
}

/* 프로필 여러 명 */
.program__profiles{ margin-top:72px; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:28px; }
.program__profiles .program__profile{ margin-top:0; }

/* ══════════════ 강좌 ══════════════ */
.curriculum{ padding:56px var(--pad) 110px; }
.curriculum-flow{ display:flex; align-items:flex-start; gap:clamp(14px,2.2vw,52px); }
.curriculum-col{ display:flex; flex-direction:column; justify-content:center; gap:14px;
                 min-width:118px; min-height:300px; flex:none; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 20px; border-radius:999px;
  background:var(--pill-off); color:var(--on-pill-off);
  font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
  transition:background .2s var(--ease), transform .15s var(--ease);
}
.pill:hover{ transform:translateY(-1px); }
.pill.is-active{ background:var(--accent); color:var(--on-accent); }

.book-wrap{ flex:1 1 0; min-width:0; }
.book-grid{ display:grid; grid-auto-rows:64px; gap:10px;
            grid-template-columns:repeat(var(--cols,5),minmax(0,158px)); }
.book-box{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:8px 10px; border:1.5px solid var(--ink); color:var(--ink);
  font-size:14.5px; letter-spacing:-.02em;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.book-box--path { border-color:var(--accent); }
.book-box--focus{ border-color:var(--accent); color:var(--accent-text); background:var(--accent-wash); }
.book-box--ghost{ border-color:var(--border); color:var(--ink-3); }

.book-legend{ display:flex; flex-wrap:wrap; gap:22px; margin-top:28px;
              font-size:13px; color:var(--ink-3); }
.book-legend i{ display:inline-block; width:18px; height:11px; margin-right:7px;
                border:1.5px solid currentColor; vertical-align:middle; }
.book-legend .lg-path{ color:var(--accent-text); }
.book-legend .lg-focus{ color:var(--accent-text); background:var(--accent-wash); }
.book-empty{ padding:28px 0; color:var(--ink-3); font-size:15px; min-width:280px; }

/* 강좌 하단 Q&A */
.curri-notes{ margin-top:64px; display:flex; flex-direction:column; gap:38px; max-width:900px; }
.curri-note h3{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; }
.curri-note p{ color:var(--ink-2); font-size:15.5px; line-height:1.8; white-space:pre-line; }

/* ══════════════ 반응형 ══════════════ */
@media (max-width:1180px){
  :root{ --pad:36px; }
  .ourway__grid{ grid-template-columns:1fr; }
  .ourway__grid .feature-card:nth-child(3),
  .ourway__grid .feature-card:nth-child(4){ flex-direction:row; }
  .ourway__grid .feature-card:nth-child(3)::after,
  .ourway__grid .feature-card:nth-child(4)::after{
    background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.2)); }
}

@media (max-width:860px){
  :root{ --header-h:62px; --pad:22px; }
  .app{ grid-template-columns:1fr; grid-template-rows:var(--header-h) 1fr; }
  .header{ grid-column:1; padding-right:16px; }
  .header__logo{ width:auto; max-width:190px; padding:6px; }
  .header__link{ display:none; }
  .header__menu-btn{ display:flex; }

  .sidebar{
    position:fixed; z-index:40; top:var(--header-h); left:0; bottom:0;
    width:min(300px,84vw);
    transform:translateX(-102%); transition:transform .32s var(--ease);
    box-shadow:0 0 40px rgba(0,0,0,.45);
  }
  .sidebar.is-open{ transform:none; }
  .content{ grid-column:1; grid-row:2; }

  .curriculum{ overflow-x:hidden; }
  .curriculum-flow{ flex-direction:column; gap:26px; }
  .curriculum-col{ flex-direction:row; flex-wrap:wrap; min-height:0; min-width:0; width:100%; }
  .book-wrap{ width:100%; overflow-x:auto; padding-bottom:8px; }
  .book-grid{ grid-template-columns:repeat(var(--cols,5),88px); grid-auto-rows:56px; gap:8px; }
  .book-box{ font-size:12.5px; padding:6px; }
  .book-legend{ margin-top:18px; gap:14px; }

  .program__tabs{ gap:14px; margin-bottom:46px; }
  .program__tab{ min-width:0; flex:1; max-width:200px; }
  .program__points{ gap:48px; margin-top:48px; }
}

@media (max-width:520px){
  .feature-card{ aspect-ratio:4/3; flex-direction:column !important;
                 align-items:flex-start; justify-content:center; gap:12px; padding:24px; }
  .hero__dots{ bottom:22px; }
  .panel[data-panel="home"].is-active{ --hero-gap:16px; }
  .hero{ height:min(calc(100% - 32px), 72vh); }   /* 휴대폰: 세로 길이 — 72vh 를 줄이면 더 작아집니다 */
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}