:root{
  --text:#111;
  --accent:#2a4b9b;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* 기본 */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Arial,sans-serif;
  color:var(--text);
  background:#f8f8f8;
  overflow-x:hidden;
}

/* 전체 레이아웃 */
.wrap{ max-width:1100px; margin:0 auto; padding:16px }

/* =========================
   공통 이미지 섹션(히어로/배너 등)
   ========================= */
.hero, .hero-section{
  margin:0 auto 12px;
  text-align:center;
  padding:0;
}
.hero-img{
  display:block;
  width:auto;           /* 원본 크기 유지 */
  max-width:100%;       /* 화면이 더 작을 때만 축소 */
  height:auto;          /* 비율 유지 */
  margin:0 auto;
}

/* =========================
   메뉴(탭)
   ========================= */
.subcats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px; margin:24px auto 8px; max-width:1100px;
}
@media (max-width:600px){ .subcats{ grid-template-columns:1fr; } }

.pill {
  position: relative;
  display: block;
  text-align: center;
  background: linear-gradient(145deg, #0b1b36, #162b56);
  color: #e8ecf7;
  padding: 18px 14px;
  font-weight: 800;
  font-size: 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 6px 14px rgba(0,0,0,0.25);
  transition: all 0.35s ease;
  overflow: hidden;
}
.pill::after{
  content:""; position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-25deg);
  transition:left .8s ease;
}
.pill:hover::after{ left:125% }
.pill:hover{
  background: linear-gradient(145deg, #1b3a70, #2e56a6);
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 18px rgba(46,86,166,0.35);
  transform: translateY(-2px);
}
.pill[aria-selected="true"]{
  border:2px solid #2e56a6;
  box-shadow:0 0 0 3px rgba(46,86,166,0.2);
}
.pill:focus-visible{
  outline:3px solid #2e56a6; outline-offset:3px;
}

/* 버튼 내 텍스트 */
.pill-main{
  display:block; font-size:28px; font-weight:900; color:#a7c8ff; letter-spacing:.5px;
}
.pill-sub{
  display:block; font-size:20px; font-weight:600; color:#d4dcff; letter-spacing:1px;
}

/* =========================
   탭 콘텐츠
   ========================= */
.content{
  background:#fff; box-shadow:var(--shadow);
  text-align:center; font-size:20px; font-weight:600;
  max-width:1100px; margin:0 auto;
  border-radius:12px;
  padding:0 20px;
  overflow:hidden;
}
.panel{ display:none; animation:fadeIn .4s ease; }
.panel.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* 시간표 이미지 */
.panel-img{
  display:block;
  width:100%;
  height:auto;
  margin:20px 0;
  border-radius:0;
  box-shadow:none;
}

/* 버튼 */
.apply-btn{
  display:inline-block; background:#000; color:var(--accent);
  font-size:18px; font-weight:700;
  padding:14px 60px; margin:14px 0 8px;
  text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,.1);
  transition:all .25s ease;
}
.apply-btn:hover{ background:var(--accent); color:#fff; transform:translateY(-2px) }


/* 모바일 */
@media (max-width:520px){
  .content{ font-size:clamp(16px,4vw,18px); padding:32px 16px 28px }
  .apply-btn{ display:block; width:100%; padding:14px 0; text-align:center }
}

/* --- 기존 코드 아래쪽에 추가 --- */

/* 하단 교육상담 문구 */
.contact {
  margin-top: 32px;
  font-size: 25px;
  color: #666;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.3px;
}