/* 동북권 ICT이노베이션스퀘어 메인 - main.css (css/common.css → css/layout.css 다음에 로드)
   - 이미지: images/main (히어로·퀵메뉴·교육과정·팝업존·시설예약·협력기관 로고)
   - Swiper CSS는 index.html에서 사이트 안 lib/swiper 폴더 파일로 불러옵니다 */
/* ===================== HERO ===================== */
#hero{
  --hdr:calc(44px + var(--header-h));   /* 로그인 줄 44 + 로고 · 메뉴 줄 */
  --hero-h:clamp(440px,28.6vw,620px);   /* 1920 × 1080 첫 화면에 퀵메뉴까지 보이게 줄임 (사용자 지시, 2026-11-05 : 1920 기준 634 → 549) */
  position:relative;z-index:30;height:calc(var(--hdr) + var(--hero-h));
  background:#f7fcff;border-bottom:1px solid #d9dfe7;overflow-x:clip;
}
@supports not (overflow:clip){ #hero{overflow:hidden;} }
.hero-swiper.swiper{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hero-swiper .swiper-slide{position:relative;height:100%;background:var(--slide-bg,#f7fcff);}   /* 마우스 모양은 기본 화살표 (서브와 같게, 사용자 지시 — 손바닥 grab 커서 뺌) */

/* content frame = var(--container) (보이는 내용 폭 1500px + 양쪽 여백) */
.hero-frame{position:absolute;left:0;right:0;top:var(--hdr);height:var(--hero-h);max-width:var(--container);margin:0 auto;}
.hero-text{position:absolute;z-index:1;left:40px;top:21%;max-width:calc(100% - 80px);}   /* 글자를 그림 위로 (그림 왼쪽 위 흰 선 장식이 작은 제목 위를 지나가지 않게) */
/* 글자 : 슬라이드가 바뀔 때마다(첫 화면 포함) 작은 제목 → 큰 제목 → 설명 순서로 0.15초씩 차례로 스르륵 (바로 시작 — 사용자 : 늦게 나오면 로딩이 느린 느낌) (사용자 지시)
   - CSS 애니메이션이라 Swiper 가 켜진 뒤(.swiper-initialized)에만 재생 → 스크립트가 없으면 글자가 그냥 보임 / 움직임 줄이기 설정이면 효과 없음 */
@keyframes hero-text-fade{from{opacity:0;}}
@keyframes hero-text-rise{from{translate:0 18px;}}
.hero-swiper.swiper-initialized .swiper-slide-active .hero-text > *{animation:hero-text-fade 1.1s ease-out backwards,hero-text-rise 1.6s cubic-bezier(.22,1,.36,1) backwards;}   /* 부드럽게 (사용자 지시 : 딱딱함 → 더 스무스) — 흐림 → 선명은 1.1초 천천히, 올라오는 움직임은 1.6초 동안 끝에서 아주 길게 감속 · 거리 18px (두 움직임을 나눠 겹치게) */
/* 슬라이드가 켜지기 전 : 글자를 숨겨 두어 깜빡임 없앰 (스크립트가 켜진 html.js 일 때만, 3초 안에 안 켜지면 그냥 보임) */
.js .hero-swiper:not(.swiper-initialized) .hero-text > *{opacity:0;animation:hero-text-show 0s 3s forwards;}
@keyframes hero-text-show{to{opacity:1;}}
.hero-swiper .swiper-slide-active .hero-text > :nth-child(1){animation-delay:.05s,.05s;}
.hero-swiper .swiper-slide-active .hero-text > :nth-child(2){animation-delay:.2s,.2s;}
.hero-swiper .swiper-slide-active .hero-text > :nth-child(3){animation-delay:.35s,.35s;}
.hero-swiper .swiper-slide-active .hero-text > :nth-child(4){animation-delay:.5s,.5s;}
.hero-kicker{color:#1f63e6;font-size:clamp(14px,.94vw,18px);font-weight:600;margin:0 0 clamp(10px,.9vw,18px);letter-spacing:-.2px;}
.hero-title{font-family:var(--font-title);color:#111;font-size:clamp(34px,2.92vw,56px);line-height:1.3;font-weight:400;letter-spacing:-.5px;margin:0;}
.hero-title .hl{color:var(--primary);}
.hero-sub{margin:clamp(14px,1.2vw,24px) 0 0;color:#555;font-size:clamp(15px,1.1vw,21px);font-weight:500;letter-spacing:-.3px;}

/* 그림 : 슬라이드마다 이미지 한 장 (images/main/main_hero001.png 1260x860 · main_hero002.png 1390x860 — 2026-11-10 사용자 지시로 잘라 낸 수정본(옛 _crop)을 기본 파일명으로 덮어씀, 원본에서 왼쪽 빈 곳 · 옅은 선 장식 · 흐린 차트를 잘라 낸 파일, 세로 860 고정 · 가로는 이미지마다 다름, 오른쪽 · 아래 기준, 사용자 지시 2026-11-05)
   - 예전보다 1.2 배 크게 (사용자 : 그림이 조금 작음), 손 · 소매는 전처럼 히어로 선 밖으로 나옴 */
.hero-visual{
  --vh:calc(var(--hero-h) * .98);
  position:absolute;right:calc(40px - var(--vh) * .0387);bottom:calc(var(--vh) * -.1019);height:calc(var(--vh) * .9505);pointer-events:none;
}
.hero-visual img{display:block;width:auto;height:100%;max-width:none;}   /* 칸 폭 = 이미지 폭 (세로 맞춤) */
/* 좁은 PC(1150px 이하) : 글자 · 조작 버튼과 겹치지 않게 예전 크기 */
@media (max-width:1150px){ .hero-visual{right:calc(40px - var(--vh) * .0226);bottom:calc(var(--vh) * -.0849);height:calc(var(--vh) * .7921);} }

/* small floating motion on some icons */
@media (prefers-reduced-motion:reduce){ .hero-swiper.swiper-initialized .swiper-slide-active .hero-text > *{animation:none;} .js .hero-swiper:not(.swiper-initialized) .hero-text > *{opacity:1;animation:none;} }

/* controls:  <  01 ---- 03  >  (pause) */
.hero-controls{position:absolute;left:0;right:0;top:calc(var(--hdr) + var(--hero-h) * .735);z-index:5;pointer-events:none;}
.hero-controls-inner{max-width:var(--container);margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:22px;}
.hero-controls button{pointer-events:auto;}
.hero-arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#111;border-radius:50%;transition:background .2s,color .2s;}
.hero-arrow:hover{background:rgba(5,62,165,.08);color:var(--primary);}
.hero-arrow img{width:18px;height:18px;}
.hero-controls .hero-pager{position:static;width:auto;bottom:auto;left:auto;top:auto;transform:none;display:flex;align-items:center;gap:14px;font-size:clamp(16px, 15.39px + 0.163vw, 18px);font-weight:500;color:#111;--p:0;}
.hero-pager .line{position:relative;display:block;width:clamp(48px,3.6vw,68px);height:1px;background:#c9cfd8;}
.hero-pager .line::after{content:'';position:absolute;left:0;top:-.5px;height:2px;width:calc(var(--p,0) * 100%);background:#111;}
.hero-play{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;margin-left:4px;transition:background .2s,transform .2s;}
.hero-play:hover{background:var(--primary);transform:scale(1.06);}
.hero-play img{width:14px;height:14px;}
.hero-play .i-play{display:none;}
.hero-play.is-paused .i-play{display:block;}
.hero-play.is-paused .i-pause{display:none;}
.hero-arrow:focus-visible,.hero-play:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}

/* tablet / mobile: text on top, illustration below (still overflowing the bottom line) */
@media(max-width:1000px){
  #hero{--hdr:76px;--txt-h:210px;height:auto;}
  .hero-swiper.swiper{position:relative;inset:auto;height:auto;}
  .hero-swiper .swiper-slide{height:auto;}
  .hero-frame{position:relative;left:auto;right:auto;top:auto;height:auto;padding-top:calc(var(--hdr) + 34px);}
  .hero-text{position:relative;left:auto;top:auto;max-width:none;padding:0 40px;min-height:var(--txt-h);}
  .hero-title,.hero-sub{word-break:keep-all;}
  .hero-controls-inner{gap:14px;}
  .hero-arrow{width:28px;height:28px;}
  .hero-arrow img{width:15px;height:15px;}
  .hero-controls .hero-pager{font-size:clamp(15px, 14.69px + 0.082vw, 16px);gap:10px;}
  .hero-pager .line{width:40px;}
  .hero-play{width:32px;height:32px;margin-left:2px;}
  .hero-play img{width:12px;height:12px;}
  .hero-visual{position:relative;right:auto;bottom:auto;height:auto;width:min(92vw,620px);aspect-ratio:1390/860;margin:calc(66px + min(92vw,620px) * .0507) auto calc(min(92vw,620px) * -.0667);}   /* 그림 칸 = 화면 폭 92%, 최대 620px / 위 여백 + 아래 음수 여백으로 소매가 선 밖으로 나옴 */
  .hero-visual img{position:absolute;right:0;bottom:0;}
  .hero-controls{top:calc(var(--hdr) + 34px + var(--txt-h) + 8px);}
  .hero-title{font-size:clamp(30px,5.4vw,44px);}
  .hero-kicker{font-size:clamp(15px, 14.69px + 0.082vw, 16px);}
  .hero-sub{font-size:clamp(16px, 15.54px + 0.122vw, 17.5px);}
}
@media(max-width:640px){
  #hero{--txt-h:196px;}
  .hero-text{padding:0 20px;}
  .hero-controls-inner{padding:0 20px;gap:10px;}
  .hero-arrow{width:26px;height:26px;}
  .hero-arrow img{width:14px;height:14px;}
  .hero-controls .hero-pager{font-size:clamp(14px, 13.69px + 0.082vw, 15px);gap:8px;}
  .hero-pager .line{width:32px;}
  .hero-play{width:28px;height:28px;}
  .hero-play img{width:10px;height:10px;}
  .hero-title{font-size:clamp(30px, 27.7px + 0.612vw, 37.5px);}
  .hero-sub{font-size:clamp(12px, 3.8vw, 14px);}   /* 320px 화면에서도 한 줄 */
}

/* ===================== QUICK MENU ===================== */
#quick{position:relative;z-index:20;padding:clamp(28px, 22.49px + 1.469vw, 46px) 0;background:#fff;}
.quick-grid{
  max-width:var(--container);margin:0 auto;padding:0 40px;
  --cols:6;--g:18px;display:flex;flex-wrap:wrap;gap:var(--g);
}
.quick-grid > *{width:calc((100% - var(--g) * (var(--cols) - 1)) / var(--cols));}
.quick-item{
  background:#fff;border-radius:20px;border:none;
  padding:22px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;   /* 정사각형(세로 222px) → 내용 높이만큼 (사용자 지시, 2026-11-05) */
  box-shadow:0 22px 44px -14px rgba(5,62,165,0);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.quick-item:hover{box-shadow:0 22px 44px -14px rgba(5,62,165,.35);transform:translateY(-6px);}
.quick-icon{
  width:clamp(40px, 33.88px + 1.633vw, 60px);height:clamp(40px, 33.88px + 1.633vw, 60px);border-radius:16px;background:none;
  display:flex;align-items:center;justify-content:center;
}
.quick-icon img{display:block;width:100%;height:auto;}   /* SVG 아이콘 PC 60px (모바일 40px) */
.quick-item span{font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:700;color:var(--ink);}

@media(max-width:1150px){
  #quick{padding-top:clamp(44px, 38.19px + 1.548vw, 56px);}   /* 반응형 : 히어로 아래 위쪽 여백 넓게 (사용자 지시, 모바일 28 → 44px) */
  .quick-grid{--cols:3;--g:12px;padding:0 20px;}
  .quick-item{gap:10px;}
}
@media(max-width:640px){
  .quick-grid{--g:10px;}
  .quick-item{padding:16px 6px;gap:8px;}
  .quick-item span:not(.quick-icon){font-size:clamp(14px, 13.69px + 0.082vw, 15px);}   /* 모바일 : 메뉴 이름 한 줄 (사용자 지시 — "행사·프로그램" 2줄 방지) */
}
@media(max-width:450px){
  .quick-item{padding-left:4px;padding-right:4px;}
  .quick-item span:not(.quick-icon){font-size:clamp(13px, 12.85px + 0.041vw, 13.5px);letter-spacing:-.02em;}
}

/* ===================== SECTION SPACING ===================== */
.section{padding:clamp(56px, 27.22px + 7.673vw, 150px) 0 clamp(40px, 18.57px + 5.714vw, 110px);position:relative;overflow:hidden;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;max-width:var(--container);margin:0 auto;padding:0 40px;position:relative;z-index:2;}

/* ===================== EDUCATION ===================== */
/* #edu{padding-top:clamp(48px, 29.02px + 5.061vw, 70px);position:relative;} */
#edu{padding-top:0;position:relative;}   /* 위 여백 0 (사용자 지시 2026-10-30) — 예전 값은 바로 위 주석 */
#edu::after{
  content:'';position:absolute;top:0;right:0;width:38%;min-width:440px;height:100%;
  background:#f7fcff;border-radius:400px 0 0 80px;z-index:0;
}
.edu-body{position:relative;z-index:2;width:100%;margin:clamp(28px, 23.1px + 1.306vw, 44px) auto 0;padding-left:calc(max(0px, (100vw - var(--container))/2) + 40px);padding-right:0;box-sizing:border-box;display:flex;gap:80px;}   /* 탭 ~ 슬라이드 간격 220 → 80 (사용자 지시, 2026-11-05) */
.edu-tabs{flex:none;width:180px;padding:0;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;}
.edu-tab{
  flex:none;display:flex;align-items:center;height:56px;width:100%;text-align:left;
  font-family:inherit;font-size:clamp(16px, 14.78px + 0.327vw, 20px);font-weight:600;color:var(--gray-700);margin-bottom:0;position:relative;
  background:none;border:none;padding:0;cursor:pointer;
}
.edu-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;}
.edu-tab span{
  display:inline-flex;align-items:center;width:max-content;padding:4px 4px 4px 0;
  position:relative;transition:color .25s var(--ease);
}
.edu-tab span::before{
  content:'';position:absolute;top:-5px;left:-6px;width:27px;height:27px;border-radius:50%;
  background:var(--sky-strong,#bcd9f5);z-index:-1;opacity:0;transition:opacity .25s var(--ease);
}
.edu-tab:hover span{color:var(--primary);}
.edu-tab:hover span::before{opacity:1;}
.edu-tab.is-active span{color:var(--primary);font-weight:800;}
.edu-tab.is-active span::before{opacity:1;}
.edu-slider-wrap{flex:1;min-width:0;position:relative;clip-path:inset(-200px 0 -200px -36px);padding:16px 0;}
.edu-swiper.swiper{overflow:visible;}
.edu-swiper .swiper-slide.edu-card{width:400px;height:auto;}
.edu-empty{
  width:100%;max-width:1160px;min-height:280px;display:flex;align-items:center;justify-content:center;
  color:var(--gray-500);font-size:clamp(14px, 13.39px + 0.163vw, 16px);font-weight:600;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:22px;
  /* 테두리 점선 (사용자 지시 : 굵기 2px · 점 10 · 간격 약 7 · 색 #bfcfe6) : border-image 로 그림
     - 61px 그림 = 둥근 모서리 4곳(22px, 점 2개씩) + 변 한 칸(17px = 점 10 + 양옆 간격 3.5) → round 로 변마다 칸 수가 딱 나뉘어 시작 · 끝 점이 겹치지 않음
     - 한 바퀴 이어 그리는 점선(SVG rect dasharray)은 둘레가 칸 크기로 안 나뉘어 왼쪽 위에서 점이 겹쳐 보였음 (사용자 지적) */
  border:2px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61'%3E%3Cg id='c' fill='none' stroke='%23bfcfe6' stroke-width='2'%3E%3Cpath d='M1.291 18.516A21 21 0 0 1 5.192 9.411M9.421 5.184A21 21 0 0 1 18.529 1.289M25.5 1H35.5'/%3E%3C/g%3E%3Cuse href='%23c' transform='rotate(90 30.5 30.5)'/%3E%3Cuse href='%23c' transform='rotate(180 30.5 30.5)'/%3E%3Cuse href='%23c' transform='rotate(270 30.5 30.5)'/%3E%3C/svg%3E") 22 / 22px round;
  box-shadow:0 22px 46px -28px rgba(10,25,60,.12);
}
.edu-card{
  flex:none;width:400px;background:#fff;border-radius:22px;border:1px solid #e3e8f0;box-sizing:border-box;   /* 테두리 : 공지 카드와 같은 색으로 한 단계 진하게 (사용자 지시) */
  box-shadow:0 26px 40px -6px rgba(5,62,165,0), 0 10px 18px -8px rgba(5,62,165,0);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  position:relative;z-index:1;
}
.edu-card:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;}   /* 카드 전체 링크 (사용자 지시) : 초점 테두리는 안쪽 (슬라이드 영역에 잘리지 않게) */
.edu-card:hover{
  transform:translateY(-14px);z-index:5;
  box-shadow:0 26px 40px -6px rgba(5,62,165,.22), 0 10px 18px -8px rgba(5,62,165,.18);
}
.edu-thumb{position:relative;padding:13px;background:#fff;box-sizing:border-box;border-radius:22px 22px 0 0;}
.edu-thumb-inner{width:100%;aspect-ratio:6/7;overflow:hidden;border-radius:16px;position:relative;}   /* 포스터 칸 : 정사각형 → 6:7, 포스터 글자가 잘리지 않게 (사용자 지시, 2026-11-05 : 3:4 → 7:9 → 9:11 → 조금 더 짧게) */
.edu-thumb-inner > img,.edu-thumb-inner .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform .5s var(--ease);}   /* 여백 없이 꽉 채움 : 6:7 이 아닌 포스터는 넘치는 곳만 살짝 잘림 → 6:7 로 올리면 다 보임 / 위치 45% : 샘플 포스터 4장의 글자가 모두 보이는 자리 */
.edu-card:hover .edu-thumb-inner > img,.edu-card:hover .edu-thumb-inner .ph{transform:scale(1.04);}
.edu-thumb-inner::after{
  content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .35s var(--ease);
}
.edu-card:hover .edu-thumb-inner::after{background:rgba(0,0,0,.55);}
.edu-hover-plus{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);
  width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:2px solid #fff;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:2;
}
.edu-hover-plus img{width:22px;height:22px;}
.edu-card:hover .edu-hover-plus{opacity:1;transform:translate(-50%,-50%) scale(1);}
.edu-tag{
  position:absolute;top:24px;left:24px;z-index:2;color:#fff;background:var(--primary);
  font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;padding:6px 14px;border-radius:999px;
}
.edu-card[data-cat="ai"] .edu-tag{background:#6d28d9;}          /* 인공지능: 보라 7.10:1 */
.edu-card[data-cat="network"] .edu-tag{background:#1d4ed8;}     /* 네트워크: 파랑 6.70:1 */
.edu-card[data-cat="data"] .edu-tag{background:#c2410c;}        /* 데이터: 주황 5.18:1 */
.edu-card[data-cat="blockchain"] .edu-tag{background:#047857;}  /* 블록체인: 초록 5.48:1 */
.edu-card[data-cat="iot"] .edu-tag{background:#fcd34d;color:#1f2937;}   /* IOT: 노랑 + 진한 글자 10:1 */
.edu-body-text{padding:14px 22px 26px;border-radius:0 0 22px 22px;background:#fff;}
.edu-card h3{font-size:clamp(16px, 15.69px + 0.082vw, 17px);font-weight:700;line-height:1.45;margin:0 0 10px;word-break:keep-all;}
.edu-meta{display:flex;flex-direction:column;gap:6px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:#363636;}   /* 접수일자 · 교육기관 · 날짜 · 기관 글자 13 → 15 (사용자 지시, 2026-11-05) */
.edu-meta span{display:flex;align-items:center;gap:7px;}
.edu-meta b{flex:none;font-weight:700;color:#363636;}
.edu-meta img{display:block;width:auto;height:14px;flex:none;}
.edu-arrows{display:flex;gap:10px;}
.edu-arrows button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--gray-300);color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:all .2s;background:#fff;
}
.edu-arrows button:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.edu-arrows img{width:16px;height:16px;transition:filter .2s;}
.edu-arrows button:hover img{filter:brightness(0) invert(1);}   /* 아이콘 흰색 */
.edu-playbtn img{width:13px;height:13px;}
.edu-playbtn .i-play{display:none;}
.edu-playbtn.is-paused .i-play{display:block;}
.edu-playbtn.is-paused .i-pause{display:none;}

@media(max-width:1150px){
  #edu::after{display:none;}
  .edu-body{flex-direction:column;padding:0 20px;gap:28px;}
  .edu-tabs{width:100%;flex-direction:row;gap:20px;overflow-x:auto;overflow-y:visible;padding:20px 14px 16px;scrollbar-width:none;}
  .edu-tabs::-webkit-scrollbar{display:none;}
  .edu-tab{height:auto;width:auto;}
  .section-head{padding:0 20px;}
  /* 교육과정 넘김 버튼 : 반응형 시작(1150↓)부터 제목 오른쪽 같은 줄 (사용자 지시) — 제목 묶음 div 를 풀어(display:contents) [제목 | 버튼] 다음 줄 설명 */
  #edu .section-head{flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:0;}
  #edu .section-head > div:first-child{display:contents;}
  #edu .sec-title{flex:1 1 0%;min-width:0;}
  #edu .sec-desc{order:2;flex:0 0 100%;margin-top:0;}   /* 묶음을 풀면 제목 아래 여백과 겹치지 않고 더해져서 0 (예전 간격 그대로) */
  .edu-arrows{order:1;align-self:flex-end;}   /* 버튼(이전 · 다음 · 일시정지)을 제목 글줄에 맞춤 — 가운데 맞춤은 제목의 위 여백까지 넣어 재서 버튼이 위로 떠 보였음 (사용자 지시 2026-11-09) */
}
@media(max-width:640px){
  .edu-body{gap:20px;margin-top:16px;}   /* 설명 ~ 분야 탭 사이 조금 줄임 (28 → 16, 사용자 지시 2026-11-09) */
  .edu-tabs{flex-wrap:wrap;overflow:visible;column-gap:18px;row-gap:4px;padding:12px 4px 4px 8px;}   /* 탭 두 줄 사이 12 → 4 (사용자 지시 2026-11-09, 탭 높이 32px 그대로) */
  .edu-tab{flex:0 0 calc((100% - 36px) / 3);}   /* 분야 6개 : 한 줄에 3개씩 2줄, 글자는 칸 왼쪽 (사용자 지시 : 가운데 → 다시 왼쪽) */
  .section-head{flex-wrap:wrap;gap:16px;}
  /* 교육과정 넘김 버튼 작게 (사용자 지시 "폰에서 볼 때 힘들다") */
  .edu-arrows{gap:6px;margin-bottom:calc((clamp(26px, 20.49px + 1.469vw, 44px) * 1.3 - 32px) / 2);}   /* 버튼 32px 가운데 = 제목 글줄(글자 크기 × 1.3) 가운데 */
  .edu-arrows button{width:32px;height:32px;}
  .edu-arrows img{width:12px;height:12px;}
  .edu-playbtn img{width:10px;height:10px;}
}

/* ===================== COMMUNITY ===================== */
#community{padding-top:40px;background:#fff;overflow:visible;}   /* 위 여백 150 → 80 → 40 (사용자 지시 2026-10-30 · 11-05 : 교육과정 배경 아래 여백이 커서) */
.comm-head{margin-bottom:clamp(28px, 23.1px + 1.306vw, 44px);}
.comm-head .sec-title{margin:0;}   /* 제목 · 설명 간격 좁힘 (h2 기본 여백 36px 없앰 → 설명 위 12px, 사용자 지시 2026-11-02) */   /* 커뮤니티 제목 · 설명 : 왼쪽 열 맨 위, 왼쪽 정렬 (사용자 지시 2026-11-02 — 오른쪽 달력이 섹션 맨 위부터 길게) */
.comm-body{max-width:var(--container);margin:0 auto;padding:0 40px;display:flex;gap:48px;align-items:stretch;}
.comm-body > div:first-child{display:flex;flex-direction:column;flex:1 1 0%;min-width:0;}   /* 커뮤니티 : 달력 = 1 : 1 (사용자 지시 2026-11-05 : 달력이 작아 잘 안 보여서, 예전 1.75 : 1) */
.comm-body > div + div{flex:1 1 0%;min-width:0;}
.comm-tabs{display:flex;height:34px;gap:20px;align-items:center;margin-bottom:18px;font-family:var(--font-title);}
.comm-tab,.mcal-title{font-size:clamp(17px, 15.78px + 0.327vw, 21px);}   /* 메인 소제목 글자 크기 한곳 : 공지사항 · 자료실 / 시설 · 장비 탭 + 교육·행사 일정 (화면 폭마다 같은 값, 사용자 지시) */
.comm-tab{font-weight:400;color:#646464;position:relative;transition:color .25s;}
.comm-tab:hover{color:var(--primary);}
.comm-tab.is-active{color:var(--primary);}
.comm-tab:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px;}
.comm-tablist{display:flex;align-items:center;gap:20px;height:100%;}
.comm-tab-divider{width:1px;height:18px;background:var(--gray-300);}
.comm-tab-more{margin-left:auto;}
.comm-panels{position:relative;height:100%;flex:1;}
.comm-panel{display:none;height:100%;}
.comm-panel.is-active{display:flex;flex-wrap:wrap;gap:20px;height:100%;}
.comm-panel.is-active > *{width:calc((100% - 20px) / 2);height:calc((100% - 20px) / 2);}   /* 2칸 × 2줄, 두 줄 높이 동일 */
.notice-card{
  background:#fff;border:1px solid #e3e8f0;border-radius:8px 36px 8px 36px;padding:20px 20px 16px;   /* 테두리 : 연회색보다 한 단계 진하게 (사용자 지시) */
  transition:all .35s var(--ease);display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;
  align-items:flex-start;position:relative;z-index:1;
  box-shadow:0 26px 40px -6px rgba(5,62,165,0), 0 10px 18px -8px rgba(5,62,165,0);
}
.notice-card:focus-visible{outline:3px solid var(--primary);outline-offset:3px;}   /* 카드 전체 링크 (사용자 지시) */
.notice-card:hover{
  border-radius:0;border-color:var(--primary);background:var(--primary);
  box-shadow:0 26px 40px -6px rgba(5,62,165,.32), 0 10px 18px -8px rgba(5,62,165,.22);
  transform:translateY(-12px);z-index:5;
}
.notice-badge{
  align-self:flex-start;flex:none;
  display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:999px;
  background:var(--gray-100);color:var(--gray-700);font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;margin-bottom:12px;
  transition:all .3s;
}
.notice-card:hover .notice-badge{background:#fff;color:var(--primary);}
.notice-card h3{font-size:clamp(16px, 15.39px + 0.163vw, 18px);font-weight:700;line-height:1.4;margin:0 0 8px;transition:color .3s;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere;}   /* 제목 두 줄 + … (2026-11-10 사용자 지시 : 공지는 본문이 이미지라 제목만 나옴 — 예전 한 줄) */
.notice-card p:empty{display:none;}   /* 본문 글이 없는 글(이미지만 있는 공지) : 빈 줄 자리 없앰 */
.notice-card:hover h3{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.notice-card p{font-size:clamp(13px, 12.39px + 0.163vw, 15px);color:var(--gray-500);line-height:1.55;margin:8px 0 12px;width:100%;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s;}
.notice-card:hover p{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5);}
.notice-date{
  font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-500);display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;   /* 날짜 글자 (11.5~12.5 → 1.5배는 커서 14~15px, 사용자 지시) */
  margin-top:auto;padding-top:14px;transition:color .3s;
}
.notice-card:hover .notice-date{color:rgba(255,255,255,.9);}
.notice-date .date-line{flex:1;height:1px;background:var(--gray-300);transition:background .3s;}
.notice-card:hover .notice-date .date-line{background:rgba(255,255,255,.5);}
.notice-date img{width:15px;height:15px;flex:none;transition:filter .3s,opacity .3s;}   /* 날짜 글자에 맞춰 13 → 15px */
.notice-card:hover .notice-date img{filter:brightness(0) invert(1);opacity:.9;}   /* 아이콘 흰색 */

/* 교육 · 행사 일정 달력 + 주요일정 (예전 팝업존 자리, 사용자 지시 2026-11-02) : 하늘색 카드 + 흰 칸 달력(옅은 선) + 흰 상자 주요일정 (파란 카드는 "눈에 너무 들어와" → 하늘색 3안 중 1번)
   - 위 줄(.mcal-head)은 왼쪽 공지 탭 줄과 같은 높이 (MORE 없음) / 카드 안 위 : [‹ 11월 2026 ›] + 오른쪽 [오늘]
   - 일정 = 칸 안 띠(IACT 메인 달력처럼, 사용자 지시) : 연한 구분 바탕 + 점 + 제목(넘치면 …), 여러 날 일정은 칸을 이어 한 줄 띠
     마우스 올림 · 초점 = 흰 말풍선(제목 · 일정 · 기관 · 장소), 누르면 상세 / 말풍선은 평소 화면에서만 숨김(스크린리더는 링크 이름으로 읽음), Esc 로 닫힘 (js/script.js) */
.comm-cal{display:flex;flex-direction:column;}
.mcal-head{display:flex;align-items:center;height:34px;margin-bottom:12px;}   /* 제목 글자 → 달력 간격 = 공지사항 탭 글자 → 카드 간격 (사용자 지시) */
.mcal-title{display:flex;align-items:center;margin:0;font-family:var(--font-title);font-weight:400;color:var(--primary);}
.mcal-title::before{content:'';flex:none;width:.62em;height:.62em;margin-right:.42em;background:url("../images/common/bullet.svg") center/contain no-repeat;}   /* 블릿 (.cont-title 과 같은 모양, 사용자 지시) — gap 대신 오른쪽 여백 : 가운뎃점(·) 양옆 간격은 그대로 */
.mcal-title .dot{margin:0 3px;}
.mcal-card{flex:1;display:flex;flex-direction:column;padding:clamp(16px, 14.16px + 0.49vw, 22px) clamp(12px, 9.55px + 0.653vw, 20px) clamp(14px, 12.78px + 0.327vw, 18px);border-radius:8px 36px 8px 36px;background:var(--sky);color:var(--ink);}
.mcal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 14px;}
.mcal-nav{display:flex;align-items:center;gap:10px;}
.mcal-month{min-width:5.4em;margin:0;font-family:var(--font-title);font-size:clamp(20px, 19.08px + 0.245vw, 23px);line-height:1.2;color:var(--ink);text-align:center;white-space:nowrap;}   /* "2026년 11월" 연도 먼저 · 같은 크기 (사용자 지시), 폭 고정이라 달이 바뀌어도 화살표 자리 그대로 */
.mcal-arrow{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #cfdcef;transition:background .2s;}
.mcal-arrow img{width:13px;height:13px;}
.mcal-arrow:hover:not(:disabled){background:var(--primary);box-shadow:none;}
.mcal-arrow:hover:not(:disabled) img{filter:brightness(0) invert(1);}   /* 아이콘 흰색 */
.mcal-arrow:disabled{opacity:.35;cursor:not-allowed;}
.mcal-today{flex:none;height:32px;padding:0 14px;border-radius:999px;background:var(--primary);font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:#fff;transition:background .2s;}
.mcal-today:hover{background:var(--primary-dark);}
.mcal-arrow:focus-visible,.mcal-today:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* 달력 칸 : 흰 바탕 + 옅은 가로 · 세로선 + 바깥 둥근 테두리 (말풍선이 잘리지 않게 overflow 없이 모서리 칸만 둥글게) */
.mcal-tbl{width:100%;margin-bottom:14px;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid #d3e1f3;border-radius:14px;background:#fff;}
.mcal-tbl[hidden]{display:none;}
.mcal-months{flex:1 1 auto;display:flex;flex-direction:column;}   /* 남는 높이는 달력 칸이 나눠 가짐 (주요일정 위 빈 틈 없음) */
.mcal-months .mcal-tbl:not([hidden]){flex:1 1 auto;}
.mcal-tbl th,.mcal-tbl td{border-right:1px solid #eef2f7;border-bottom:1px solid #eef2f7;}   /* 칸 선 옅게 (깔끔하게, 사용자 지시 A안) */
.mcal-tbl tr > :last-child{border-right:0;}
.mcal-tbl tbody tr:last-child td{border-bottom:0;}
.mcal-tbl th:first-child{border-top-left-radius:13px;}
.mcal-tbl th:last-child{border-top-right-radius:13px;}
.mcal-tbl tbody tr:last-child td:first-child{border-bottom-left-radius:13px;}
.mcal-tbl tbody tr:last-child td:last-child{border-bottom-right-radius:13px;}
.mcal-tbl th{height:30px;padding:0;background:#f4f8fd;border-bottom-color:#e6edf6;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;color:var(--gray-700);}
.mcal-tbl th.is-sun{color:#b42318;}   /* 대비 5.3:1 */
.mcal-tbl th.is-sat{color:var(--primary);}
.mcal-tbl th abbr{text-decoration:none;}
.mcal-tbl td{position:relative;height:88px;padding:4px 0 4px;text-align:left;vertical-align:top;}   /* 칸 높이 : 띠 3줄까지 (사용자 지시 "달력 세로 높이 더 크게") */
.mcal-tbl td.is-empty{background:#f8fafc;}
.mcal-d{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;padding:0;border-radius:999px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.mcal-tbl td.is-sun .mcal-d{color:#b42318;}   /* 일요일 */
.mcal-tbl td.is-sat .mcal-d{color:var(--primary);}   /* 토요일 */
/* 오늘 (2026-11-10 사용자 선택 T3안) : 흰 바탕 + 파란 테두리 2px(일정 띠 위로 그림) + 날짜 파란 원 · 흰 글자
   — 예전 "칸 전체 파랑"은 여러 날 일정 띠가 지나가면 띠 사이 틈만 파랗게 남아 깨져 보였음 / 640px 이하(띠 대신 점)는 칸 전체 파랑 그대로 (아래 미디어 쿼리) */
.mcal-tbl td[aria-current="date"]::before{content:'';position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 2px var(--primary);border-radius:inherit;pointer-events:none;}
.mcal-tbl td[aria-current="date"] .mcal-d{background:var(--primary);color:#fff;font-weight:800;}
/* 날짜 줄 : 날짜 + (칸에 다 못 보이면) [+N] → 누르면 그날 일정 모두 목록 */
.mcal-dh{display:flex;align-items:center;justify-content:space-between;gap:2px;padding-right:4px;}
.mcal-more{flex:none;height:18px;padding:0 6px;border-radius:999px;background:var(--primary);font-size:12px;line-height:18px;font-weight:800;color:#fff;}
.mcal-more:hover,.mcal-more[aria-expanded="true"]{background:var(--primary-dark);}
.mcal-more:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.mcal-more.is-fit,.mcal-dots{display:none;}   /* PC : 칸에 다 보이는 날의 버튼 · 점은 모바일 전용 */
.mcal-pop{position:absolute;z-index:40;top:28px;left:4px;width:300px;padding:0 16px 8px;border-radius:14px;background:#fff;border:1px solid #dfe6f0;box-shadow:0 14px 30px rgba(5,25,70,.22);color:var(--gray-700);text-align:left;}
.mcal-pop[hidden]{display:none;}
.mcal-tbl td:nth-child(n+4) .mcal-pop{left:auto;right:4px;}
.mp-tt{margin:0 -16px 4px;padding:13px 52px 12px 16px;border-radius:13px 13px 0 0;background:var(--sky);border-bottom:1px solid #d3e1f3;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:800;color:var(--ink);}   /* 제목 줄 : 하늘색 띠 + 아래 선으로 목록과 구분 (사용자 지시) */
.mp-tt b{color:var(--primary);}
.mp-list{margin:0;padding:0;list-style:none;}
.mp-list li + li{border-top:1px dashed #dfe5ee;}
/* 한 줄 : 구분 점 + 날짜 + 제목 (주요일정과 같은 모양, 회색 둘째 줄 없음 — 사용자 지시) */
.mp-list a{display:flex;align-items:center;gap:7px;height:38px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);}
.mp-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--gray-700);}
.mp-list a:hover .mp-t{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.mp-list a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;}
.mp-close{position:absolute;top:8px;right:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #d3e1f3;}
.mp-close img{width:14px;height:14px;}
.mp-close:hover{background:var(--primary-light);}
.mp-close:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
/* 일정 띠 */
.mcal-evs{display:flex;flex-direction:column;gap:4px;margin-top:3px;}
.mcal-gap{display:block;height:18px;}   /* 빈 줄 (여러 날 띠와 줄 맞춤) */
.mcal-ev{position:relative;display:flex;align-items:center;gap:4px;height:18px;margin:0 4px;padding:0 5px;border-radius:4px;font-size:12px;font-weight:500;line-height:1;color:var(--gray-700);white-space:nowrap;}
.mcal-ev::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;}
/* 구분 : 아주 연한 구분 바탕 + 점 색 (교육 파랑 · 행사 초록 · 모집 노랑, 사용자 지시 A안) */
.mcal-ev.c-edu{background:#edf3fc;} .mcal-ev.c-edu::before{background:#053ea5;}
.mcal-ev.c-evt{background:#e8f6f1;} .mcal-ev.c-evt::before{background:#0b7366;}
.mcal-ev.c-rec{background:#fdf4e4;} .mcal-ev.c-rec::before{background:#b45309;}
.mcal-ev-t{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.mcal-ev.is-span{margin:0 -1px 0 0;border-radius:0;}   /* 여러 날 : 칸 끝까지 이어 그림 (오른쪽 칸 선 위로) */
.mcal-ev.is-span.is-head{margin-left:4px;border-radius:4px 0 0 4px;}
.mcal-ev.is-span.is-tail{margin-right:4px;border-radius:0 4px 4px 0;}
.mcal-ev.is-span.is-head.is-tail{border-radius:4px;}
.mcal-ev.is-cont::before{display:none;}
.mcal-tbl td:last-child .mcal-ev.is-span:not(.is-tail){margin-right:0;}
a.mcal-ev:hover .mcal-ev-t,a.mcal-ev.is-hover .mcal-ev-t{text-decoration:underline;}
a.mcal-ev:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
/* 말풍선 : 평소엔 화면에서만 숨김 (글은 링크 이름) → 마우스 올림 · 초점이면 칸 아래에 흰 상자 */
.mcal-tip{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}
.mcal-ev:not(:hover):not(:focus-visible):not(.is-hover) .mcal-tip *{color:var(--ink);}   /* 숨김 상태 글자 (모바일 진한 띠 위 대비 검사 오탐 방지, 화면엔 안 보임) */
.mcal-ev:hover .mcal-tip,.mcal-ev:focus-visible .mcal-tip,.mcal-ev.is-hover .mcal-tip{
  z-index:30;left:0;top:calc(100% + 6px);display:block;width:280px;height:auto;margin:0;padding:16px 16px;overflow:visible;clip:auto;clip-path:none;white-space:normal;
  border-radius:14px;background:#fff;border:1px solid #dfe6f0;box-shadow:0 14px 30px rgba(5,25,70,.22);font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:500;line-height:1.5;color:var(--gray-700);text-align:left;cursor:pointer;
  pointer-events:none;   /* 평소엔 마우스 통과 : 말풍선이 덮은 아래 일정 띠에 바로 마우스를 올릴 수 있음 (다른 일정 말풍선이 늦게 뜨던 문제, 사용자 지시) */
}
.mcal-tbl td:nth-child(n+4) .mcal-tip{left:auto;right:0;}   /* 수요일부터 : 말풍선을 왼쪽으로 펼침 (1250px 부근 오른쪽 화면 밖으로 나가던 것) */
/* 띠 바로 아래 보이지 않는 다리(띠 폭만큼) : 여기로 내려오면 말풍선이 마우스를 받기 시작 → 말풍선 안으로 옮겨도 닫히지 않고 누를 수 있음 (사용자 지시) */
.mcal-ev:hover .mcal-tip::before,.mcal-ev.is-hover .mcal-tip::before{content:'';position:absolute;left:0;top:-10px;width:72px;height:10px;pointer-events:auto;}
.mcal-tbl td:nth-child(n+4) .mcal-tip::before{left:auto;right:0;}
.mcal-ev .mcal-tip:hover{pointer-events:auto;}
.comm-cal.is-tip-off .mcal-ev .mcal-tip{width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;box-shadow:none;}   /* Esc 로 닫음 */
/* 말풍선 안 : 구분 꼬리표 · 이름(일정 · 기관 · 장소) 같은 폭 40px · 같은 글자 크기 + 가운데 정렬 → 꼬리표 좌우 간격이 같고, 꼬리표 글자 · 이름 글자 · 제목 · 값의 세로줄이 맞음 (사용자 지시) */
.mt-tt{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:800;line-height:1.45;color:var(--ink);}
.mt-cat{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:21px;border-radius:5px;background:var(--primary-light);font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--primary);}
.mt-row{display:flex;gap:10px;margin-top:7px;}   /* 줄 사이 넓게 (사용자 지시) */
.mt-row b{flex:none;width:40px;font-weight:700;color:var(--primary);text-align:center;}
/* 주요일정 : 흰 상자 + 2개씩 보이는 세로 슬라이드 */
.mcal-sch{margin-top:auto;padding:12px 14px 6px 16px;border-radius:20px;background:#fff;color:var(--ink);}
.mcal-sch-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.mcal-sch-title{margin:0;font-size:clamp(14.5px, 14.19px + 0.082vw, 15.5px);font-weight:800;}
.mcal-sch-ctrl{display:flex;align-items:center;gap:4px;}
.mcal-sbtn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--primary-light);transition:background .2s;}   /* 하늘색 바탕 기본 (사용자 지시) */
.mcal-sbtn img{width:12px;height:12px;}
.mcal-sbtn.is-up img{transform:rotate(90deg);}
.mcal-sbtn.is-down img{transform:rotate(90deg);}
.mcal-sbtn:hover{background:#d3e4fa;}
.mcal-play{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:2px;border-radius:50%;background:#111;transition:background .2s;}
.mcal-play:hover{background:var(--primary);}
.mcal-play span{display:flex;}
.mcal-play img{width:10px;height:10px;}
.mcal-play .i-play,.mcal-play.is-paused .i-pause{display:none;}
.mcal-play.is-paused .i-play{display:block;}
.mcal-sbtn:focus-visible,.mcal-play:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.mcal-view{height:88px;margin:0 -8px;overflow:hidden;}   /* 2개 (44px × 2) · 좌우 8px 넓힘 = 줄 배경 여백 */
.mcal-list{margin:0;padding:0;list-style:none;}
.mcal-list li{height:44px;border-bottom:1px dashed #dfe5ee;}
/* 한 줄 : 구분 점 + 날짜(굵게) + 제목 — 날짜 상자 · 아래 작은 글씨 없음 (사용자 지시) */
.mcal-list a{display:flex;align-items:center;gap:8px;height:100%;padding:0 8px;border-radius:8px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);transition:background .2s;}
.mcal-list a:hover{background:var(--primary-light);}   /* 마우스 올린 줄 배경 (사용자 지시) */
.mcal-dot{flex:none;width:7px;height:7px;border-radius:50%;}
.mcal-dot.c-edu{background:#053ea5;}
.mcal-dot.c-evt{background:#0b7366;}
.mcal-dot.c-rec{background:#b45309;}
.mcal-date{flex:none;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.mcal-date em{font-style:normal;font-weight:500;color:var(--gray-500);}
.mcal-tt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--gray-700);transition:color .2s;}
.mcal-list a:hover .mcal-tt{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.mcal-list a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:10px;}
@media (max-width:640px){
  .mcal-tbl td{height:64px;}
  /* 좁은 칸 : 일정 띠 대신 점(최대 3개, 장식 — 사용자 지시 "점점점") + 일정 있는 칸 전체 = 그날 목록 버튼 (점은 너무 작아 링크로 두지 않음 : 컨트롤 크기) */
  .mcal-evs{display:none;}
  .mcal-dots{display:flex;justify-content:center;gap:4px;margin-top:8px;}
  .mcal-dots span{width:6px;height:6px;border-radius:50%;}
  .mcal-dots .c-edu{background:#053ea5;}
  .mcal-dots .c-evt{background:#0b7366;}
  .mcal-dots .c-rec{background:#b45309;}
  /* 오늘 : 칸 전체 파랑 채움 + 날짜 흰 원 (점 모드는 띠가 없어 깨지지 않음) — 칸 안 [+N] 글자 · 초점 테두리는 흰색 */
  .mcal-tbl td[aria-current="date"]{background:var(--primary);}
  .mcal-tbl td[aria-current="date"]::before{content:none;}
  .mcal-tbl td[aria-current="date"] .mcal-d{background:#fff;color:var(--primary);}
  .mcal-tbl td[aria-current="date"] .mcal-more:focus-visible{outline-color:#fff;}
  .mcal-tbl td[aria-current="date"] .mcal-dots .c-edu{background:#a9c8f7;}   /* 오늘 파랑 칸 위 점 : 같은 계열 밝은 색 (진한 파랑 점이 묻혀 빈 원처럼 보임) */
  .mcal-tbl td[aria-current="date"] .mcal-dots .c-evt{background:#7fdcbf;}
  .mcal-tbl td[aria-current="date"] .mcal-dots .c-rec{background:#f7c46a;}
  .mcal-more,.mcal-more.is-fit{position:absolute;inset:0;z-index:1;display:block;width:auto;height:auto;padding:0;border-radius:0;background:transparent;}
  .mcal-more:hover,.mcal-more[aria-expanded="true"]{background:rgba(5,62,165,.06);}
  .mcal-tbl td[aria-current="date"] .mcal-more{background:transparent;}
  .mcal-tbl td[aria-current="date"] .mcal-more:hover,.mcal-tbl td[aria-current="date"] .mcal-more[aria-expanded="true"]{background:rgba(255,255,255,.12);}
  .mcal-more:focus-visible{outline-offset:-2px;}
  .mcal-more-n{position:absolute;top:6px;right:4px;font-size:12px;font-weight:800;line-height:1;color:var(--primary);}   /* 넘치는 수 : 칸 오른쪽 위 글자 */
  .mcal-tbl td[aria-current="date"] .mcal-more-n{color:#fff;}
  .mcal-pop{width:260px;}
  /* 좁은 화면 : 목록을 달력 가운데에 (칸 기준 left = 달력 가운데 − 칸 위치, 칸 폭 = 100%) — 오른쪽 칸 목록이 화면 왼쪽 밖으로 나가던 문제 */
  .mcal-tbl td .mcal-pop,.mcal-tbl td:nth-child(n+4) .mcal-pop{right:auto;}
  .mcal-tbl td:nth-child(1) .mcal-pop{left:calc(350% - 130px);}
  .mcal-tbl td:nth-child(2) .mcal-pop{left:calc(250% - 130px);}
  .mcal-tbl td:nth-child(3) .mcal-pop{left:calc(150% - 130px);}
  .mcal-tbl td:nth-child(4) .mcal-pop{left:calc(50% - 130px);}
  .mcal-tbl td:nth-child(5) .mcal-pop{left:calc(-50% - 130px);}
  .mcal-tbl td:nth-child(6) .mcal-pop{left:calc(-150% - 130px);}
  .mcal-tbl td:nth-child(7) .mcal-pop{left:calc(-250% - 130px);}
}
@media (max-width:450px){
  .mcal-d{width:18px;height:18px;margin-left:2px;}   /* 폭 = 높이 고정 : 두 자리 날짜도 오늘 동그라미 원형 유지 (사용자 지시) */
  .mcal-more-n{right:3px;}
}
@media (max-width:360px){
  .mcal-d{width:16px;height:16px;margin-left:1px;font-size:12px;}
  .mcal-more-n{right:2px;}
}
@media (prefers-reduced-motion:reduce){
  .mcal-arrow,.mcal-today,.mcal-sbtn,.mcal-play,.mcal-tt{transition:none;}
}
/* /교육 · 행사 일정 */

@media(max-width:1150px){
  .comm-body{flex-direction:column;padding:0 20px;}
  .comm-panel.is-active{flex-direction:column;flex-wrap:nowrap;height:auto;gap:16px;}
  .comm-panel.is-active > *{width:auto;height:auto;}
  .comm-panel.is-active .notice-card:nth-child(n+3){display:none;}
  .comm-cal{width:100%;max-width:640px;margin:0 auto;}   /* 달력 : 한 줄 가득 (최대 640) */
}

/* ===================== FACILITY ===================== */
#facility{padding-top:clamp(14.5px, 10.69px + 1.021vw, 27px);background:#eaf6fc;position:relative;}   /* 위 빈 곳 = 아래 빈 곳 : 제목 h2 의 기본 위 여백(0.83em) · 줄 간격 반을 더하면 아래 여백(40 ~ 70px)과 같아짐 */
#community,#facility{padding-bottom:clamp(40px, 30.82px + 2.449vw, 70px);}   /* 커뮤니티 아래 · 장비시설 위 · 장비시설 아래 여백을 같게 (1920 기준 110 → 70, 사용자 지시 2026-11-05) */
#facility::before{
  content:'';position:absolute;top:0;left:0;width:42%;height:100%;
  background:#f7fcff;border-radius:0 400px 80px 0;z-index:0;
}
#facility .section-head{justify-content:center;text-align:center;position:relative;z-index:2;}
.fac-body{
  position:relative;z-index:2;max-width:var(--container);margin:clamp(28px, 23.1px + 1.306vw, 44px) max(20px, calc((100% - var(--container)) / 2)) 0;padding:44px;   /* 양옆 : 넓은 화면은 가운데, 좁아지면 최소 20px (태블릿 · 모바일 같음 — 사용자 지시) */
  background:#fff;border-radius:36px;box-shadow:0 30px 60px -30px rgba(10,25,60,.18);box-sizing:border-box;
}
.fac-bar{display:flex;align-items:center;justify-content:space-between;height:34px;margin-bottom:12px;padding:0 12px;font-family:var(--font-title);}   /* 시설 · 장비 탭(.comm-tab) + MORE : 좌우 12px = .fac-thumb 여백 → 아래 카드 사진 양 끝에 맞춤 */
.fac-swiper{width:100%;}
.fac-swiper .swiper-slide{height:auto;}
/* 슬라이드 숨김 (사용자 지시 2026-11-05) : Swiper 를 켜지 않으면 앞 3개만 3열로 고정 (다시 쓰려면 js/script.js 의 FAC_SLIDE = true) */
.fac-swiper:not(.swiper-initialized) .swiper-wrapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.fac-swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+4){display:none;}
.fac-pagination:empty{display:none;}
.fac-empty{max-width:none;min-height:0;}   /* 등록된 시설 · 장비가 없을 때 : 교육과정 빈 목록(.edu-empty)과 같은 점선 상자, 폭만 칸 가득 (2026-11-10, js/script.js) */
/* 빈 상자 세로 = 카드가 있을 때 카드 높이 (사진 + 이름 + 장소, 사용자 지시 "세로는 등록했을 때 세로 유지") — 카드 높이가 폭에 비례해서 padding-top %(상자 폭 기준)로 맞춤, 실측 : 1920 450 · 1280 383 · 1151 349 / 1000 438 · 768 349 / 375 317 */
.fac-empty::before{content:'';flex:none;width:0;padding-top:calc(25.96% + 81px);}   /* PC : 한 줄 3칸 */
@media (max-width:1150px){ .fac-empty::before{padding-top:calc(37.96% + 88.5px);} }   /* 한 화면 2장 */
@media (max-width:640px){ .fac-empty::before{padding-top:calc(75.9% + 98px);} }   /* 한 화면 1장 */
.fac-pagination{margin-top:30px;display:flex;justify-content:center;}
.fac-body .fac-pagination.swiper-pagination-horizontal{
  position:static;width:100%;display:flex;justify-content:center;align-items:center;margin-top:25px;margin-bottom:-5px;   /* 점 버튼 테두리 5px 만큼 줄여 보이는 간격 그대로 */
  --swiper-pagination-color:var(--primary);
  --swiper-pagination-bullet-inactive-color:#c7d0e0;
  --swiper-pagination-bullet-inactive-opacity:1;
  --swiper-pagination-bullet-size:19px;
  --swiper-pagination-bullet-horizontal-gap:0px;
}
.fac-body .fac-pagination.swiper-pagination-lock{display:none;}   /* 카드가 한 화면에 다 들어가면(등록된 시설 · 장비가 없을 때 등) 점 버튼 숨김 */
/* 점 버튼 : 보이는 점 9px + 투명 테두리 5px = 누르는 영역 19px (KWCAG 조작 가능 : 대각선 6mm 이상) / 점 사이 보이는 간격 10px 은 그대로 */
.fac-pagination .swiper-pagination-bullet{border:5px solid transparent;border-radius:999px;background-clip:padding-box;transition:width .3s var(--ease),background .3s;}   /* 둥글기는 늘 알약(999px) : 50% 였을 때 넘기며 폭이 바뀌는 동안 타원으로 찌그러졌음 (사용자 지시 2026-11-09) */
.fac-pagination .swiper-pagination-bullet-active{width:40px;}
.fac-card{display:block;border-radius:22px;overflow:hidden;background:#fff;box-shadow:none;position:relative;}
.fac-card:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;}   /* 카드 전체 링크 : 초점 테두리는 안쪽 */
.fac-thumb{position:relative;padding:12px;box-sizing:border-box;background:#fff;}
.fac-thumb-inner{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:16px;position:relative;background:var(--sky) center/cover no-repeat;}
#panel-facility .fac-thumb-inner{background-image:url("../images/contents/facility_Default.jpg?v=26093092");}   /* 사진을 안 올린 시설(img 를 빼고 출력 · 못 불러옴) : 기본 이미지 (사용자 지시 2026-11-05) */
#panel-equipment .fac-thumb-inner{background-image:url("../images/contents/equipment_Default.jpg?v=26100101");}   /* 사진을 안 올린 장비 : 기본 이미지 */
.fac-thumb-inner img,.fac-thumb-inner .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);}
.fac-card:hover .fac-thumb-inner img,.fac-card:hover .fac-thumb-inner .ph{transform:scale(1.04);}
.fac-badge{position:absolute;top:0;left:0;z-index:2;font-size:clamp(13px, 12.39px + 0.163vw, 15px);font-weight:800;padding:clamp(9px, 8.39px + 0.163vw, 11px) clamp(18px, 16.16px + 0.49vw, 24px);border-radius:16px 0 16px 0;color:#fff;line-height:1.2;}   /* 시설·장비 배지 확대 (12px → 15px) */
.fac-badge.facility{background:var(--primary);}
.fac-badge.equipment{background:var(--red);}
.fac-thumb-inner:not(:has(img:not(.is-broken))) .fac-badge{display:none;}   /* 노 이미지일 때(사진 없음 · 못 불러옴) 왼쪽 위 시설 · 장비 배지 숨김 (사용자 지시) */
.fac-thumb-inner img.is-broken{visibility:hidden;}   /* 못 불러온 사진은 숨겨 칸의 노 이미지 바탕이 보이게 (js/script.js) */
.fac-text{padding:20px 22px 24px;}
.fac-text h4{font-size:clamp(16px, 15.08px + 0.245vw, 19px);font-weight:700;margin:0 0 8px;}   /* 제목 확대 (15~17px → 16~19px) */
.fac-text p{font-size:clamp(13.5px, 13.04px + 0.122vw, 15px);color:var(--gray-500);margin:0;}   /* 장소 확대 (12.5~13.5px → 13.5~15px) */

@media(max-width:1150px){
  #facility::before{display:none;}
  .fac-body{padding:24px;border-radius:24px;}
  .fac-swiper:not(.swiper-initialized) .swiper-wrapper{gap:16px;}
  .fac-swiper:not(.swiper-initialized) .fac-thumb{padding:8px;}
  .fac-swiper:not(.swiper-initialized) .fac-text{padding:12px 10px 14px;word-break:keep-all;}
}
@media(max-width:640px){
  /* 모바일 : 카드를 가로 한 줄로 (왼쪽 사진 + 오른쪽 글) — 세로로 길어지지 않게 */
  .fac-swiper:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:minmax(0,1fr);gap:8px;}
  .fac-swiper:not(.swiper-initialized) .fac-card{display:flex;align-items:center;}
  .fac-swiper:not(.swiper-initialized) .fac-thumb{flex:0 0 42%;}
  .fac-swiper:not(.swiper-initialized) .fac-text{flex:1;min-width:0;padding:8px 8px 8px 4px;}
  .fac-swiper:not(.swiper-initialized) .fac-badge{padding:5px 10px;border-radius:12px 0 12px 0;}
}