/* 동북권 ICT이노베이션스퀘어 서브 - content.css (css/common.css → css/layout.css 다음에 로드)
   - 페이지별 콘텐츠 : 사업소개 · 교육과정 · 시설·장비 예약 · 통합검색 (커뮤니티는 board.css, 마이페이지는 mypage.css)
   - 사업소개 : 이전 디자인(백업 *_old.html · 아직 안 바꾼 쪽) 구역 + 새 디자인 .ab-* 구역 — 클래스 이름 겹치지 않음
   - 서브 틀(서브 비주얼 · 탭 · 위치 바 · 제목)은 layout.css, 버튼 · 입력 · 탭 · 표 · 페이지 번호는 common.css
   - 색상 : 흰색 · 연하늘 · 포인트 블루(#053ea5) 한 가지 (메인과 같은 톤)
   - 글자 크기·여백은 clamp(모바일 375px 값, 비례값, PC 1600px 값)
   - 웹접근성 : 모든 글자 명도 대비 4.5:1 이상 / 장식 요소 aria-hidden / 움직임 줄이기 설정 존중 */

/* ===================== 사업소개 이전 디자인 (2026-10-19 백업 페이지 contents/about/intro_old · organization_old · location_old.html 과 아직 새 디자인 전인 intro · location 용) =====================
   - 사용자 지시 : 주석으로 숨기지 않고 그대로 적용 — 새 사업소개(.ab-*)와 클래스 이름이 겹치지 않음 */
/* ===================== 사업소개 > 동북권ICT이노베이션스퀘어 ===================== */
/* ---------- 인트로 ---------- */
.intro-lead{display:flex;align-items:center;gap:clamp(36px, 18.86px + 4.571vw, 92px);}
.intro-copy{flex:1 1 0%;min-width:0;}
.intro-copy .lead-title{margin:0 0 clamp(20px, 16.33px + 0.98vw, 32px);font-family:var(--font-title);font-weight:400;font-size:clamp(28px, 21.88px + 1.633vw, 48px);line-height:1.32;color:var(--ink);word-break:keep-all;}
.intro-copy .lead-title em{font-style:normal;color:var(--primary);background:linear-gradient(transparent 64%,#dcebff 64%);}
.intro-points{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(24px, 19.1px + 1.306vw, 40px) 0 0;padding:0;list-style:none;}
.intro-points li{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:14px;background:#f3f8fe;color:var(--ink);font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:700;}
.intro-points img{width:18px;height:18px;flex:none;}
.intro-visual{position:relative;flex:1.1 1 0%;min-width:0;padding:0 clamp(16px, 13.24px + 0.735vw, 25px) clamp(16px, 13.24px + 0.735vw, 25px) 0;}   /* 이미지는 왼쪽 위, 하늘색 패널은 오른쪽 아래로 */
.intro-visual::before{   /* 뒤쪽 연하늘 패널 */
  content:'';position:absolute;left:clamp(16px, 13.24px + 0.735vw, 25px);top:clamp(16px, 13.24px + 0.735vw, 25px);right:0;bottom:0;
  border-radius:clamp(28px, 22.49px + 1.469vw, 46px);background:#e4f0fb;
}
.intro-frame{
  position:relative;border-radius:clamp(24px, 19.1px + 1.306vw, 40px);background:#f7fbff;aspect-ratio:1234/930;overflow:hidden;
  border:1px solid #e3ecf7;box-shadow:0 30px 60px -40px rgba(5,40,100,.4);
}
.intro-frame img{position:absolute;left:6%;right:6%;bottom:5%;width:88%;height:auto;}

/* ---------- 비전과 목표 : 연하늘 카드 + 번호 타임라인 ---------- */
.vision-band{
  position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(28px, 20.65px + 1.959vw, 52px);
  padding:clamp(36px, 23.76px + 3.265vw, 76px) clamp(24px, 9.31px + 3.918vw, 72px);
  background:#f4f9fe;border:1px solid #e3ecf7;
}
.vision-band::after{   /* 오른쪽 위 동심원 장식 */
  content:'';position:absolute;z-index:-1;width:520px;height:520px;right:-170px;top:-290px;border-radius:50%;
  border:1px solid #d6e5f6;box-shadow:0 0 0 70px rgba(214,229,246,.32),0 0 0 140px rgba(214,229,246,.18);
}
.vision-top{display:flex;align-items:center;gap:clamp(14px, 9.1px + 1.306vw, 30px);flex-wrap:wrap;}
.vision-label{flex:none;display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:var(--primary);color:#fff;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;letter-spacing:3px;}
.vision-text{margin:0;font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 16.49px + 1.469vw, 40px);line-height:1.35;color:var(--ink);word-break:keep-all;}
.vision-text em{font-style:normal;color:var(--primary);}
.goal-list{
  position:relative;display:flex;gap:clamp(18px, 12.49px + 1.469vw, 36px);
  margin:clamp(34px, 26.65px + 1.959vw, 58px) 0 0;padding:0;list-style:none;
}
.goal-list::before{   /* 번호를 잇는 점선 */
  content:'';position:absolute;left:28px;right:28px;top:27px;height:1px;
  background:repeating-linear-gradient(90deg,#9fbbe2 0 6px,transparent 6px 12px);
}
.goal-item{position:relative;flex:1 1 0%;min-width:0;}
.goal-no{
  position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#fff;border:1.5px solid var(--primary);color:var(--primary);font-family:var(--font-title);font-size:clamp(17px, 16.08px + 0.245vw, 20px);box-shadow:0 0 0 8px #f4f9fe;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.goal-item:hover .goal-no{background:var(--primary);color:#fff;}
.goal-tag{display:block;margin-top:22px;color:var(--primary);font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;letter-spacing:1.5px;}
.goal-item h5{margin:8px 0 10px;font-size:clamp(18px, 16.78px + 0.327vw, 22px);font-weight:800;color:var(--ink);word-break:keep-all;}
.goal-item p{margin:0;color:var(--gray-700);font-size:clamp(14px, 13.69px + 0.082vw, 15px);line-height:1.75;word-break:keep-all;}

/* ---------- 주요 사업 : 벤토 그리드 ---------- */
.biz-grid{
  --g:clamp(14px, 9.71px + 1.143vw, 28px);--main:calc((100% - var(--g) * 2) * 1.25 / 3.25);   /* 큰 카드 폭 = 전체의 1.25 / 3.25 */
  position:relative;display:flex;flex-wrap:wrap;gap:var(--g);margin:0;padding:0 0 0 calc(var(--main) + var(--g));list-style:none;
}
.biz-grid > .biz-card{width:calc((100% - var(--g)) / 2);}
.biz-card{
  position:relative;display:flex;flex-direction:column;gap:14px;min-height:clamp(180px, 168.98px + 2.939vw, 216px);
  padding:clamp(26px, 21.71px + 1.143vw, 40px);border-radius:28px;background:#fff;border:1px solid #e3ecf7;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.biz-card:hover{transform:translateY(-6px);border-color:#b3cae9;box-shadow:0 26px 46px -28px rgba(5,40,100,.32);}
.biz-grid > .biz-card.is-main{position:absolute;left:0;top:0;bottom:0;width:var(--main);justify-content:flex-end;background:linear-gradient(160deg,#eef6fe 0%,#e0edfa 100%);border-color:transparent;}
.biz-card.is-main::after{   /* 메인 카드 오른쪽 위 원 장식 */
  content:'';position:absolute;z-index:-1;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.6);
}
.biz-grid > .biz-card.is-wide{width:100%;flex-direction:row;align-items:center;gap:24px;}
.biz-no{position:absolute;right:clamp(22px, 18.33px + 0.98vw, 34px);top:clamp(20px, 17.55px + 0.653vw, 28px);font-family:var(--font-title);font-size:clamp(28px, 24.33px + 0.98vw, 40px);line-height:1;color:transparent;-webkit-text-stroke:1.2px #b3cae9;}
.biz-icon{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(60px, 55.1px + 1.306vw, 76px);height:clamp(60px, 55.1px + 1.306vw, 76px);border-radius:20px;background:#f2f7fd;transition:background .3s var(--ease);}
.biz-card:hover .biz-icon{background:var(--primary-light);}
.biz-card.is-main .biz-icon{
  width:clamp(76px, 67.43px + 2.286vw, 104px);height:clamp(76px, 67.43px + 2.286vw, 104px);border-radius:26px;margin-bottom:auto;
  background:#fff;box-shadow:0 14px 28px -18px rgba(5,62,165,.45);
}
.biz-icon img{width:62%;height:auto;}
.biz-card h5{margin:0 0 6px;font-size:clamp(18px, 16.78px + 0.327vw, 22px);font-weight:800;color:var(--ink);}
.biz-card.is-main h5{font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 18.94px + 0.816vw, 32px);}
.biz-card p{margin:0;color:var(--gray-700);font-size:clamp(14px, 13.69px + 0.082vw, 15px);line-height:1.65;word-break:keep-all;}
.biz-card.is-main p{font-size:clamp(15px, 14.39px + 0.163vw, 17px);}

/* ---------- 교육 분야 : 흰 타일 + 분야 색은 점·밑줄로만 (메인 교육과정 태그와 같은 색) ---------- */
.field-grid{--cols:5;--g:clamp(10px, 7.55px + 0.653vw, 18px);display:flex;flex-wrap:wrap;gap:var(--g);margin:0;padding:0;list-style:none;}
.field-grid > li{width:calc((100% - var(--g) * (var(--cols) - 1)) / var(--cols));}
.field-tile{
  --c:var(--primary);
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  height:clamp(140px, 130.2px + 2.612vw, 172px);padding:22px 24px;border-radius:24px;background:#fff;border:1px solid #e3ecf7;
  box-shadow:inset 0 -4px 0 var(--c);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.field-tile:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:inset 0 -4px 0 var(--c),0 22px 40px -28px rgba(5,40,100,.35);}
.field-tile::after{   /* 오른쪽 위 화살표 (링크 표시, 장식) */
  content:'';position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;
  background:#f2f6fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23053ea5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6 5h5v5'/%3E%3C/svg%3E") center/14px no-repeat;transition:background-color .25s,transform .25s var(--ease);
}
.field-tile:hover::after{background-color:var(--primary-light);transform:translate(2px,-2px);}
.field-tile:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.field-abbr{font-family:var(--font-title);font-size:clamp(34px, 29.1px + 1.306vw, 50px);line-height:1;color:transparent;-webkit-text-stroke:1.3px #b9cbe4;}
.field-name{display:flex;align-items:center;gap:10px;font-size:clamp(16px, 15.39px + 0.163vw, 18px);font-weight:800;color:var(--ink);}
.field-name::before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);}
.field-ai{--c:#6d28d9;}
.field-blockchain{--c:#047857;}
.field-data{--c:#c2410c;}
.field-iot{--c:#fcd34d;}   /* IoT 노랑 (분야 태그와 같은 색) */
.field-network{--c:#1d4ed8;}

/* ---------- 함께하는 기관 ---------- */
.partner-list{--cols:6;display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;border:1px solid #e3ecf7;border-radius:28px;background:#fff;overflow:hidden;}
.partner-list li{width:calc(100% / var(--cols));}
.partner-list li + li{border-left:1px solid #e3ecf7;}
.partner-list a{display:flex;align-items:center;justify-content:center;height:clamp(96px, 86.2px + 2.612vw, 128px);padding:0 18px;transition:background .25s;}
.partner-list a:hover{background:#f4f9fe;}
.partner-list a:focus-visible{outline:2px solid var(--primary);outline-offset:-4px;border-radius:12px;}
.partner-list img{width:auto;max-width:100%;height:clamp(30px, 27.55px + 0.653vw, 38px);object-fit:contain;transition:transform .3s var(--ease);}
.partner-list a:hover img{transform:scale(1.06);}

/* ===================== 사업소개 > 조직·연혁 (contents/about/organization.html) ===================== */
/* ---------- 조직도 : 센터장(원) → 사업총괄팀 → 3개 팀 (선은 CSS 장식) ---------- */
.org-chart{padding-top:clamp(8px, 5.55px + 0.653vw, 16px);}
.org-tree,.org-tree ul{margin:0;padding:0;list-style:none;}
.org-lv1,.org-lv2{display:flex;flex-direction:column;align-items:center;}
.org-lv1 > ul{position:relative;width:100%;padding-top:clamp(30px, 23.88px + 1.633vw, 50px);}
.org-lv1 > ul::before,.org-teams::before{   /* 위아래 연결선 — 노드(.org-node z-index 1) 뒤로 : 센터장 원 · 둘레 띠 위에 선이 겹치지 않게 (사용자 지시) */
  content:'';position:absolute;left:50%;top:0;width:2px;height:clamp(30px, 23.88px + 1.633vw, 50px);margin-left:-1px;background:#9fbbe2;
}
.org-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;text-align:center;word-break:keep-all;}
.org-node strong{font-size:clamp(18px, 16.78px + 0.327vw, 22px);font-weight:800;}
.org-node span{font-size:clamp(13px, 12.69px + 0.082vw, 14px);}
.org-node.is-head{   /* 센터장 : 원 */
  justify-content:center;width:clamp(150px, 132.86px + 4.571vw, 206px);aspect-ratio:1;padding:22px;border-radius:50%;
  background:var(--primary);color:#fff;
  box-shadow:0 0 0 clamp(8px, 6.78px + 0.327vw, 12px) #e8f0fb,0 26px 44px -20px rgba(5,62,165,.6);
}
.org-node.is-head strong{font-size:clamp(20px, 18.16px + 0.49vw, 26px);}
.org-node.is-head span{color:rgba(255,255,255,.85);line-height:1.4;}
.org-node.is-main{
  min-width:clamp(220px, 201.63px + 4.898vw, 280px);padding:clamp(16px, 15.39px + 0.163vw, 18px) 28px;border-radius:20px;
  background:#fff;border:2px solid var(--primary);color:var(--gray-700);
}
.org-node.is-main strong{color:var(--primary);}
.org-tree .org-teams{
  --g:clamp(16px, 11.1px + 1.306vw, 32px);--stem:clamp(30px, 23.88px + 1.633vw, 50px);
  position:relative;display:flex;gap:var(--g);width:100%;padding-top:calc(var(--stem) * 2);
}
.org-tree .org-teams > li{flex:1 1 0%;min-width:0;}
.org-teams::after{   /* 3개 팀을 잇는 가로선 (양 끝 팀 가운데까지) */
  content:'';position:absolute;top:var(--stem);left:calc((100% - var(--g) * 2) / 6);right:calc((100% - var(--g) * 2) / 6);height:2px;background:#9fbbe2;
}
.org-team{position:relative;display:flex;}   /* 세로선·점은 li 에 고정, 카드(.ot-card)만 호버 시 위로 */
.ot-card{
  flex:1 1 auto;min-width:0;padding:clamp(22px, 18.94px + 0.816vw, 32px);border-radius:24px;background:#fff;border:1px solid #e3ecf7;
  box-shadow:0 20px 40px -30px rgba(5,40,100,.35);transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.org-team::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:var(--stem);margin-left:-1px;background:#9fbbe2;}
.org-team::after{content:'';position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px #fff;}
.org-team:hover .ot-card{transform:translateY(-6px);border-color:#b3cae9;}
.ot-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed #d3e0f0;}
.ot-icon{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(50px, 48.16px + 0.49vw, 56px);height:clamp(50px, 48.16px + 0.49vw, 56px);border-radius:16px;background:#eef5fd;}
.ot-icon img{width:62%;height:auto;}
.ot-head h5{margin:0;font-size:clamp(17px, 16.08px + 0.245vw, 20px);font-weight:800;color:var(--ink);word-break:keep-all;}
.ot-tasks li{position:relative;padding-left:28px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);line-height:1.6;word-break:keep-all;}
.ot-tasks li + li{margin-top:10px;}
.ot-tasks li::before{   /* 체크 아이콘 (장식) */
  content:'';position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;
  background:var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' stroke='%23053ea5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------- 부서별 연락처 ---------- */
.tbl-contact .c-dept{width:22%;}
.tbl-contact .c-tel{width:20%;}
.tbl-contact td.tel{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;}
.tbl-contact td.tel a{display:inline-flex;align-items:center;gap:6px;color:inherit;transition:color .2s;}
.tbl-contact td.tel a::before{   /* 전화 아이콘 (장식) */
  content:'';flex:none;width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");mask-position:center;mask-size:contain;mask-repeat:no-repeat;
}
.tbl-contact td.tel a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.tbl-contact td.tel a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}

/* ---------- 연혁 : 왼쪽 세로선 + 연도 점(고정) / 스크롤하면 파란 동그라미가 선을 따라 내려오고, 동그라미가 온 연도만 파란색
   - 동그라미·채워지는 선은 js/content.js 가 추가 (.history.is-live) / 스크립트가 없으면 최신 연도(.is-now)만 파란색 ---------- */
.history{
  --pl:clamp(40px, 35.1px + 1.306vw, 56px);   /* 세로 축 영역 폭 */
  --yr:clamp(40px, 29.59px + 2.776vw, 74px);   /* 연도 글자 크기 */
  position:relative;display:flex;flex-direction:column;gap:clamp(36px, 29.88px + 1.633vw, 56px);padding-left:var(--pl);
}
.history::before{content:'';position:absolute;left:11px;top:calc(var(--yr) / 2);bottom:0;width:2px;background:#dbe6f4;}   /* 세로선 */
.hy-fill{position:absolute;left:11px;top:calc(var(--yr) / 2);width:2px;height:0;background:var(--primary);transform:scaleY(0);transform-origin:top;will-change:transform;}   /* 동그라미까지 채워지는 선 (길이는 transform 으로 — js/content.js) */
.hy-marker{   /* 스크롤 따라 내려오는 동그라미 */
  position:absolute;left:0;top:0;z-index:2;width:24px;height:24px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 6px rgba(5,62,165,.14);will-change:transform;
}
/* 움직임은 js/content.js 가 매 프레임 부드럽게 (CSS transition 은 스크롤마다 다시 시작돼 모바일에서 버벅여서 안 씀) */
.hy-block{position:relative;display:flex;align-items:flex-start;gap:clamp(16px, 8.65px + 1.959vw, 40px);}
.hy-block > .hy-list{flex:1 1 0%;min-width:0;}
.hy-year{
  position:relative;flex:none;width:clamp(150px, 110.2px + 10.612vw, 280px);margin:0;
  font-family:var(--font-title);font-weight:400;font-size:var(--yr);line-height:1;color:var(--gray-500);transition:color .3s;
}
.hy-year::before{   /* 연도 점 (고정) : 세로선 위, 연도 글자 가운데 높이 */
  content:'';position:absolute;left:calc(var(--pl) * -1 + 5px);top:calc(.5em - 7px);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #9fbbe2;
}
.history:not(.is-live) .hy-block.is-now .hy-year,.hy-block.is-active .hy-year{color:var(--primary);}
.history:not(.is-live) .hy-block.is-now .hy-year::before{
  left:calc(var(--pl) * -1);top:calc(.5em - 12px);width:24px;height:24px;background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 6px rgba(5,62,165,.14);
}
.hy-list{margin:0;border-top:2px solid var(--ink);}
.hy-item{display:flex;align-items:flex-start;gap:16px;padding:clamp(16px, 14.16px + 0.49vw, 22px) 4px;border-bottom:1px solid #e6edf6;}
.hy-month{
  flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:30px;padding:0 10px;border-radius:999px;
  background:#eef5fd;color:var(--primary);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:800;font-variant-numeric:tabular-nums;transition:background .25s,color .25s;
}
.history:not(.is-live) .hy-block.is-now .hy-item:first-child .hy-month,.hy-block.is-active .hy-item:first-child .hy-month,.hy-item:hover .hy-month{background:var(--primary);color:#fff;}
.hy-item dd{flex:1;margin:0;padding-top:3px;font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:600;color:var(--ink);line-height:1.5;word-break:keep-all;}
.hy-badge{display:inline-flex;align-items:center;height:22px;margin-left:8px;padding:0 9px;border-radius:999px;border:1px solid var(--primary);color:var(--primary);font-size:12px;font-weight:700;vertical-align:1px;}

@media (max-width:768px){
  .hy-block{flex-direction:column;align-items:stretch;gap:16px;}
  .hy-year{width:auto;}
}
@media (max-width:640px){
  .org-tree .org-teams{flex-direction:column;padding-top:var(--stem);}
  .org-teams::after{display:none;}
  .org-team::before{height:var(--g);}
  .org-team:first-child::before{display:none;}
  .tbl-contact .c-dept{width:30%;}
  .tbl-contact .c-tel{width:34%;}
}
@media (prefers-reduced-motion:reduce){
  .ot-card,.hy-month,.hy-year{transition:none;}
  .org-team:hover .ot-card{transform:none;}
}

/* ===================== 사업소개 > 오시는 길 (contents/about/loc.html — 예전 location.html 은 2026-10-30 삭제) =====================
   - 장소마다 섹션 1개 (교육장 → 주관기관 순서, 탭 없이 차례로) : 지도 + 정보 카드 + 교통 안내
   - 지도는 카카오맵 지도퍼가기 (.root_daum_roughmap) : 칸 폭에 맞게 늘리고, 지도 아래 주소·전화 칸은 정보 카드와 겹쳐 숨김 */
/* 지도 + 정보 카드 */
.loc-body{display:flex;align-items:stretch;gap:clamp(16px, 9.88px + 1.633vw, 36px);}
.map-box{
  --map-h:380px;   /* 지도 최소 높이 (PC 는 오른쪽 정보 카드 높이만큼 늘어남) */
  position:relative;display:flex;flex-direction:column;flex:1.6 1 0%;min-width:0;overflow:hidden;
  border-radius:clamp(20px, 17.55px + 0.653vw, 28px);border:1px solid #dbe6f3;background:#fff;
}
.map-box .root_daum_roughmap{flex:1 1 auto;display:flex;flex-direction:column;width:100% !important;border:0 !important;background:none !important;}
.map-box .root_daum_roughmap .wrap_map{position:relative;flex:1 1 auto;height:auto !important;min-height:var(--map-h);}   /* 칸 높이만큼 지도 늘림 (크기가 바뀌면 스크립트가 지도를 다시 맞춤) */
.map-box .root_daum_roughmap .wrap_map .map{position:absolute !important;left:0;top:0;right:0;bottom:0;width:auto !important;height:auto !important;}   /* 지도 그림 영역 = 위 칸 전체 */
.map-box .root_daum_roughmap .wrap_controllers{flex:none;}
.root_daum_roughmap button:focus-visible,.root_daum_roughmap a:focus-visible{outline:2px solid var(--primary) !important;outline-offset:2px !important;}   /* 카카오 지도 확대 · 축소 · 초기화 버튼 : 키보드 초점 표시 (웹접근성 2.1.2) — 카카오 CSS 가 outline 을 없애서 !important */
.root_daum_roughmap .roughmap_lebel_text,.root_daum_roughmap .wrap_btn_roadview .txt{font-size:12px !important;}   /* 지도 위 장소 이름표 · 길찾기 : 카카오 기본 11px → 12px (글자 12px 미만 없음) */
.map-box .root_daum_roughmap .map_border{display:none;}
.map-box .root_daum_roughmap .cont{display:none !important;}   /* 주소·전화 : 오른쪽 정보 카드와 같은 내용이라 숨김 */

.loc-info{
  flex:1 1 0%;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(24px, 18.49px + 1.469vw, 42px);
  border-radius:clamp(20px, 17.55px + 0.653vw, 28px);background:#fff;border:1px solid #e3ecf7;box-shadow:0 24px 48px -36px rgba(5,40,100,.35);
}
/* 정보 카드 머리 : 장소 구분 + 기관명 */
.loc-head{margin-bottom:clamp(18px, 15.55px + 0.653vw, 26px);padding-bottom:clamp(16px, 14.16px + 0.49vw, 22px);border-bottom:2px solid var(--ink);}
.loc-kind{display:inline-flex;align-items:center;height:26px;margin-bottom:10px;padding:0 12px;border-radius:999px;background:var(--primary);color:#fff;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:700;}
.loc-name{margin:0;font-size:clamp(20px, 18.16px + 0.49vw, 26px);font-weight:800;color:var(--ink);line-height:1.35;word-break:keep-all;}
.loc-list{display:flex;flex-direction:column;gap:clamp(16px, 13.55px + 0.653vw, 24px);margin:0;}
.loc-list > div{position:relative;display:flex;flex-wrap:wrap;min-height:44px;padding-left:58px;}
.loc-list .ll-icon{   /* 항목 아이콘 : images/contents/loc_icon01.svg(주소) · 02(전화) · 03(팩스) · 04(운영 시간) */
  position:absolute;left:0;top:0;width:44px;height:44px;padding:11px;box-sizing:border-box;border-radius:50%;background:#eef5fd;
}
.loc-list dt{width:100%;margin:0 0 2px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;color:var(--primary);}
.loc-list dd{width:100%;margin:0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:600;color:var(--ink);line-height:1.55;word-break:keep-all;}
.loc-list dd a{color:inherit;transition:color .2s;}
.loc-list dd a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.loc-list dd a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}

/* 지도 바로가기 버튼 (네이버지도 · 다음지도, 새 창) : 정보 카드 맨 아래 */
.loc-links{display:flex;gap:10px;margin-top:auto;padding-top:clamp(20px, 17.55px + 0.653vw, 28px);}
.map-link{
  flex:1 1 0%;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:clamp(46px, 44.78px + 0.327vw, 50px);padding:0 14px;
  border-radius:12px;border:1px solid #d7e1ee;background:#fff;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--ink);white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s;
}
.map-link::after{   /* 새 창 아이콘 (장식, 배경 이미지) */
  content:'';flex:none;width:12px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23131a2c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5h5v5M9.5 2.5 3 9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.map-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* 서비스 색 : 네이버 초록 · 카카오 노랑 바탕 + 진한 글자 (흰 글자는 초록 바탕에서 대비 2.5:1 로 기준 미달이라 진한 글자, 대비 5.5:1 이상) */
.map-link.is-naver{background:#06be34;border-color:#06be34;color:#111827;}   /* 네이버 초록 + 진한 글자 대비 7.1:1 (2026-10-07 사용자 선택 B안, 흰 글자는 2.49:1 미달) */
.map-link.is-naver:hover{background:#05a92e;border-color:#05a92e;}   /* 마우스 올림 : 진한 글자 대비 5.7:1 (새 창 아이콘은 기본 진한 색 그대로) */
.map-link.is-daum{background:#f9e000;border-color:#f9e000;}
.map-link.is-daum:hover{background:#ecd400;border-color:#ecd400;}
.ml-logo{flex:none;display:block;width:22px;height:22px;border-radius:6px;}   /* 서비스 아이콘 (장식) : images/contents/naver_icon.svg · kakao_icon.svg */

/* 교통 안내 카드 */
.way-list{display:flex;gap:clamp(14px, 11.55px + 0.653vw, 22px);margin:clamp(20px, 15.1px + 1.306vw, 36px) 0 0;padding:0;list-style:none;}
.way-item{flex:1 1 0%;min-width:0;padding:clamp(22px, 18.94px + 0.816vw, 32px);border-radius:24px;background:#f5f9fe;border:1px solid #e6eef8;}
.way-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:18px;border-radius:16px;background:#fff;color:var(--primary);box-shadow:0 10px 20px -14px rgba(5,62,165,.5);}
.way-icon img{display:block;width:26px;height:26px;}   /* 대중교통 · 자가용 · 주차 : images/contents/bus_icon.svg · car_icon.svg · parking_icon.svg */
.way-item h5{margin:0 0 10px;font-size:clamp(17px, 16.08px + 0.245vw, 20px);font-weight:800;color:var(--ink);}
.way-item p{margin:0;font-size:clamp(14px, 13.54px + 0.122vw, 15.5px);color:var(--gray-700);line-height:1.75;word-break:keep-all;}

@media (max-width:1000px){
  .loc-body{flex-direction:column;}
  .map-box{--map-h:clamp(300px, 251.02px + 13.061vw, 400px);}   /* 태블릿·모바일 : 지도 위(이 높이), 카드 아래 */
}
@media (max-width:768px){
  .way-list{flex-direction:column;}
}

@media (max-width:450px){
  /* 연락처 표 : 가로 스크롤 없도록 칸 여백 · 글자 줄임 (웹접근성 재배치) */
  .tbl-contact th,.tbl-contact td{padding-left:6px;padding-right:6px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);}
  .tbl-contact td.tel a{gap:4px;}
}

/* ===================== 반응형 (사업소개 > 동북권ICT이노베이션스퀘어) ===================== */
@media (max-width:1150px){
  .intro-lead{flex-direction:column;align-items:stretch;}
  .intro-visual{max-width:680px;width:100%;margin:0 auto;}
  .goal-list{flex-direction:column;gap:28px;}
  .goal-list::before{left:27px;right:auto;top:28px;bottom:28px;width:1px;height:auto;background:repeating-linear-gradient(180deg,#9fbbe2 0 6px,transparent 6px 12px);}
  .goal-item{padding-left:78px;}   /* 번호(56px) + 간격(22px) */
  .goal-item .goal-no{position:absolute;left:0;top:0;}
  .goal-tag{margin-top:2px;}
  .biz-grid{padding-left:0;}
  .biz-grid > .biz-card.is-main{position:relative;width:100%;min-height:0;}
  .biz-card.is-main .biz-icon{margin-bottom:0;}
  .field-grid{--cols:1;}   /* 반응형 : 교육 분야 타일 한 줄에 하나씩 [약자 | ● 분야 이름 | 화살표] (사용자 지시 — 예전 3칸 · 2칸) */
  .field-tile{flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(14px, 11.55px + 0.653vw, 22px);height:auto;padding:40px 64px 40px 24px;border-radius:12px;}   /* 위아래 20 → 40px, 모서리 24 → 12px (사용자 지시) */
  .field-tile:hover{transform:translateY(-4px);}
  .field-name{order:1;flex:none;width:6em;}   /* 분야 이름 앞 → 약자는 이름 옆 (사용자 지시 : order 1 · 2) / 폭 고정 → 약자 시작 위치가 줄마다 같음 (가장 긴 4글자 + 점 기준) */
  .field-abbr{order:2;flex:none;font-size:clamp(28px, 26.16px + 0.49vw, 34px);}
  .field-tile::after{top:50%;margin-top:-16px;}
  .partner-list{--cols:3;}
  .partner-list li:nth-child(n+4){border-top:1px solid #e3ecf7;}
  .partner-list li:nth-child(4){border-left:0;}
}
@media (max-width:640px){
  .intro-points{flex-direction:column;}
  .intro-visual{padding:0;}
  .intro-visual::before{display:none;}
  .biz-grid > .biz-card{width:100%;}
  .biz-grid > .biz-card.is-wide{flex-direction:column;align-items:flex-start;}
  .partner-list{--cols:2;}
  .partner-list li:nth-child(n+3){border-top:1px solid #e3ecf7;}
  .partner-list li:nth-child(odd){border-left:0;}
  .partner-list li:nth-child(4){border-left:1px solid #e3ecf7;}
}
@media (prefers-reduced-motion:reduce){
  .biz-card,.field-tile,.field-tile::after,.partner-list img,.goal-no{transition:none;}
  .field-tile:hover::after{transform:none;}
  .biz-card:hover,.field-tile:hover{transform:none;}
}


/* ===================== 사업소개 > 사업소개 (contents/about/business.html) — 새 디자인 2026-10-19 =====================
   - 클래스는 모두 .ab-* (위 "사업소개 이전 디자인" 구역 클래스와 이름 겹치지 않음)
   - 사업 개요 : 한 줄 소개(.ab-lead) + 두 사업 카드(.ab-pair, 사이 + 표시는 장식)
   - 사업추진체계(.ab-sys) : [운영위원회 | 부처 → 전담기관 → 주관기관 | 사업시행지자체] + 참여기관 카드(.ab-part) — 잇는 선은 장식 */
.ab-lead{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(36px, 27.43px + 2.286vw, 64px);text-align:center;}
.ab-lead-title{margin:0;font-family:var(--font-title);font-weight:400;font-size:clamp(23px, 17.80px + 1.388vw, 40px);line-height:1.5;color:var(--ink);word-break:keep-all;}
.ab-lead-title strong{font-weight:400;color:var(--primary);}

/* 두 사업 카드 */
.ab-pair{display:flex;gap:136px;max-width:1200px;margin:0 auto;padding:0;list-style:none;}   /* 두 카드 폭 조금 줄임 : 전체 최대 1200px 가운데 (사용자 지시) */
.ab-pair-item{position:relative;flex:1 1 0%;min-width:0;display:flex;flex-direction:column;border-radius:clamp(22px, 18.94px + 0.816vw, 32px);background:#fff;border:1px solid #e3ecf7;box-shadow:0 24px 48px -36px rgba(5,40,100,.35);}
.ab-pair-item + .ab-pair-item::before{   /* 두 카드 사이 + (장식) — PC 간격 136px 가운데 : 원 52 + 둘레 띠 6 → 양쪽 36px 여유 (사용자 지시 : + 에 너무 가깝다) / 위아래(768px 이하)도 같은 간격 */
  content:'';position:absolute;left:-94px;top:50%;z-index:1;width:52px;height:52px;margin-top:-26px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23053ea5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 3v14M3 10h14'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 0 0 6px var(--primary-light),0 14px 24px -12px rgba(5,40,100,.4);
}
.ab-pair-head{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(30px, 24.49px + 1.469vw, 48px) 24px clamp(28px, 23.10px + 1.306vw, 44px);
  border-radius:clamp(22px, 18.94px + 0.816vw, 32px) clamp(22px, 18.94px + 0.816vw, 32px) 0 0;background:var(--primary);color:#fff;text-align:center;
}
.ab-pair-item.is-square .ab-pair-head{background:var(--navy-700);}
.ab-pair-en{position:absolute;left:50%;bottom:-.28em;transform:translateX(-50%);font-family:var(--font-title);font-size:clamp(40px, 30.20px + 2.612vw, 72px);line-height:1;color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;}   /* 바탕 큰 영문 (장식) */
.ab-pair-region{position:relative;font-size:clamp(14px, 13.39px + 0.163vw, 16px);font-weight:700;color:#cfe0fb;letter-spacing:.5px;}
.ab-pair-item.is-square .ab-pair-region{color:#c3cfe8;}
.ab-pair-name{position:relative;font-family:var(--font-title);font-weight:400;font-size:clamp(24px, 20.33px + 0.980vw, 36px);line-height:1.25;word-break:keep-all;}
.ab-pair-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;padding:clamp(24px, 19.10px + 1.306vw, 40px) clamp(20px, 13.88px + 1.633vw, 40px) clamp(28px, 23.10px + 1.306vw, 44px);text-align:center;}
.ab-pair-tit{display:inline-flex;align-items:center;height:38px;margin:0 0 clamp(16px, 13.55px + 0.653vw, 24px);padding:0 20px;border-radius:999px;background:var(--primary-light);font-size:clamp(15.5px, 14.73px + 0.204vw, 18px);font-weight:800;color:var(--primary);}
.ab-pair-item.is-square .ab-pair-tit{background:#e9edf6;color:var(--navy-700);}
.ab-pair-body p{max-width:440px;margin:0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);color:var(--gray-700);line-height:1.75;word-break:keep-all;}

/* 사업추진체계 */
.ab-sys{display:flex;flex-direction:column;gap:clamp(48px, 38.2px + 2.612vw, 80px);padding-top:clamp(8px, 0.65px + 1.959vw, 32px);}   /* 위 padding : 제목과 체계도 사이 더 띄움 (제목 아래 40 + 32 = PC 72px, 사용자 지시 — margin 은 제목 margin 과 겹쳐서 padding) */
.ab-sys-top{position:relative;display:flex;align-items:flex-end;gap:clamp(28px, 19.43px + 2.286vw, 56px);}   /* 아래 끝 맞춤 : 운영위원회 · 지자체 = 주관기관 아래 끝 / 머리 띠 54 · 상자 84 · 간격 48 · 주관기관 214 는 줄 맞춤에 쓰는 고정값 (CSS 변수 쓰지 않음 — 사용자 지시) */
.ab-sys-main{position:relative;flex:0 1 440px;min-width:0;display:flex;flex-direction:column;gap:48px;margin:0;padding:0;list-style:none;}
.ab-sys-main::before{content:'';position:absolute;left:50%;top:54px;bottom:54px;width:2px;margin-left:-1px;background:#d6e1f0;}   /* 선 색 더 연하게 #b9cbe4 → #d6e1f0 (사용자 지시, 이어지는 참여기관 · 반응형 세로 줄 · 양옆 점선 모두 같은 색) / 위아래 잇는 선 (장식, 상자 뒤 — 상자 사이에서만 보임) */
.ab-sys-main > li{position:relative;z-index:1;border-radius:18px;background:#fff;text-align:center;box-shadow:inset 0 0 0 1px #d9e4f2;}   /* 아래 그림자 없음 (사용자 지시) / 테두리는 안쪽 그림자 (화면 배율에 따라 border 가 0.67px 로 그려져 운영위원회 줄이 어긋나던 것) */
.ab-sys-main > li.is-lead{min-height:214px;}   /* 주관기관 높이 고정 (운영위원회 상자와 위 · 아래 끝 같게) */
.ab-sys-main > li.is-lead::before,.ab-sys-main > li.is-lead::after{content:'';position:absolute;top:50%;width:clamp(28px, 19.43px + 2.286vw, 56px);margin-top:-1px;border-top:2px dashed #d6e1f0;}   /* 주관기관 가운데 높이에서 양옆(운영위원회 · 지자체)으로 곧게 잇는 점선 (장식, 사용자 지시) */
.ab-sys-main > li.is-lead::before{right:100%;}
.ab-sys-main > li.is-lead::after{left:100%;}
.ab-sys-role{display:flex;align-items:center;justify-content:center;height:54px;margin:0;padding:0 12px;border-radius:18px 18px 0 0;background:var(--navy-700);font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:800;color:#fff;letter-spacing:.3px;}
.ab-sys-main > li.is-lead .ab-sys-role{background:var(--primary);}
.ab-sys-org{display:flex;align-items:center;justify-content:center;min-height:84px;margin:0;padding:12px 16px;font-size:clamp(16px, 15.08px + 0.245vw, 19px);font-weight:800;color:var(--ink);word-break:keep-all;}
.ab-sys-main > li.is-lead .ab-sys-org{min-height:0;padding:clamp(18px, 16.16px + 0.49vw, 24px) 16px 8px;}
.ab-sys-org img{display:block;width:auto;max-width:100%;height:34px;margin:0 auto;}   /* 기관 로고 (원본 약 1.7배 크기 그림을 줄여 선명하게) */
.ab-sys-main > li.is-lead .ab-sys-org img{height:38px;}
.ab-sys-desc{margin:0;padding:0 24px clamp(20px, 18.78px + 0.327vw, 24px);font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);line-height:1.65;word-break:keep-all;}
.ab-sys-side{flex:1 1 0%;min-width:0;}
.ab-sys-side.is-right{align-self:stretch;display:flex;flex-direction:column;padding-top:186px;}   /* 지자체 : 위 끝 = 전담기관 위 끝 (첫 상자 머리 54 + 상자 84 + 간격 48), 아래 끝 = 주관기관 아래 끝 — 늘려 채움 (사용자 지시) */
.ab-sys-box{position:relative;border-radius:20px;text-align:center;}
/* 운영위원회 · 지자체 : 아래 끝 = 주관기관 아래 끝 (.ab-sys-top align-items:flex-end) */
.ab-sys-tit{margin:0 0 10px;font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:800;}
.ab-sys-com{display:flex;flex-direction:column;justify-content:center;min-height:214px;padding:12px clamp(18px, 15.55px + 0.653vw, 26px);border:2px solid #d8c6ec;background:#fbf8fe;}
.ab-sys-com .ab-sys-tit{color:#6b3fa0;}   /* 보라 : 연보라 바탕 대비 6.2:1 */
.ab-sys-com p{margin:0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:700;color:var(--ink);line-height:1.5;word-break:keep-all;}
.ab-sys-gov{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px, 17.55px + 0.653vw, 28px) clamp(16px, 13.55px + 0.653vw, 24px);border:2px solid #f2d8a7;background:#fffaf0;}
.ab-sys-gov .ab-sys-tit{color:#8a4b00;}   /* 갈색 : 연노랑 바탕 대비 6.9:1 */
.ab-gov-list{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none;}
.ab-gov-list li{flex:0 0 calc((100% - 12px) / 2);min-width:0;display:flex;align-items:center;justify-content:center;height:62px;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid #f0dfbd;}   /* 지자체 로고 2칸씩 */
.ab-gov-list img{display:block;width:auto;max-width:100%;max-height:34px;}

/* 참여기관 */
.ab-part{position:relative;padding:clamp(32px, 23.43px + 2.286vw, 60px) clamp(18px, 10.04px + 2.122vw, 44px) clamp(36px, 28.65px + 1.959vw, 60px);border-radius:clamp(22px, 18.94px + 0.816vw, 32px);background:#f5f9fe;border:1px solid #e3ecf7;}
.ab-part::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:clamp(48px, 38.2px + 2.612vw, 80px);margin-left:-1px;background:#d6e1f0;}   /* 주관기관 → 참여기관 세로 줄 (장식, 사용자 지시 — 높이 = .ab-sys 간격) */
.ab-part-tit{display:flex;justify-content:center;margin:0 0 clamp(24px, 19.1px + 1.306vw, 40px);font-size:clamp(17px, 16.08px + 0.245vw, 20px);font-weight:800;color:var(--ink);}
.ab-part-list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px, 13.55px + 0.653vw, 24px);margin:0;padding:0;list-style:none;}
.ab-part-item{flex:0 0 calc((100% - clamp(16px, 13.55px + 0.653vw, 24px) * 3) / 4);min-width:0;padding:clamp(24px, 21.55px + 0.653vw, 32px) clamp(20px, 17.55px + 0.653vw, 28px) clamp(26px, 23.55px + 0.653vw, 34px);border-radius:20px;background:#fff;border:1px solid #e3ecf7;}
.ab-part-logo{display:flex;align-items:center;height:58px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid #e3ecf7;}   /* 참여기관 로고 (alt = 기관 이름) */
.ab-part-logo img{display:block;width:auto;max-width:100%;max-height:34px;}
.ab-part-role{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;}
.ab-part-role li{position:relative;padding-left:13px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);line-height:1.6;word-break:keep-all;}
.ab-part-role li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--primary);}   /* 글머리 점 (장식) */

@media (max-width:1000px){
  .ab-sys-top{flex-direction:column;align-items:stretch;}   /* 추진체계 : 가운데 줄(부처 → 주관기관) 위, 운영위원회 · 지자체 아래 */
  .ab-sys-main{order:-1;flex:none;width:100%;max-width:520px;margin:0 auto;}
  .ab-sys-main > li.is-lead::before,.ab-sys-main > li.is-lead::after{display:none;}   /* 옆으로 잇는 점선만 숨김 — 세로 줄은 참여기관까지 이어짐 (사용자 지시) */
  .ab-sys-main > li.is-lead,.ab-sys-com{min-height:0;}   /* 위아래로 쌓이면 줄 맞춤 높이 필요 없음 (빈 공간 없앰) */
  .ab-sys-side.is-right{padding-top:0;}   /* 위아래로 쌓이면 띄움 없음 */
  .ab-sys-side{position:relative;flex:none;width:100%;max-width:520px;margin:0 auto;}   /* 운영위원회 · 지자체 폭 = 가운데 줄(주관기관) 폭 (사용자 지시) */
  .ab-sys-side::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:clamp(28px, 19.43px + 2.286vw, 56px);margin-left:-1px;background:#d6e1f0;}   /* 반응형 : 세로 한 줄로 주관기관 → 운영위원회 → 사업시행지자체 (장식, 높이 = 상자 사이 간격, 사용자 지시) */
  .ab-part-list{justify-content:flex-start;}   /* 2칸일 때 마지막 한 개도 왼쪽부터 (사용자 지시, PC 4칸은 가운데 그대로) */
  .ab-part-item{flex-basis:calc((100% - clamp(16px, 13.55px + 0.653vw, 24px)) / 2);}   /* 참여기관 한 줄 2개 */
}
@media (max-width:768px){
  .ab-pair{flex-direction:column;}   /* 두 사업 카드 위아래, + 는 두 카드 사이 가운데 */
  .ab-pair-item + .ab-pair-item::before{left:50%;top:-94px;margin:0 0 0 -26px;}   /* 위아래도 PC 와 같은 간격 136px 가운데 : 양쪽 36px 여유 (사용자 지시) */
}
@media (max-width:640px){
  .ab-lead-title br{display:none;}
  .ab-part-item{flex-basis:100%;}   /* 참여기관 한 줄 1개 */
}
@media (max-width:450px){
  .ab-gov-list li{padding:6px 5px;}   /* 좁은 폰 : 지자체 로고 칸 여백 줄여 로고를 조금 더 크게 */
}

/* ===================== 사업소개 > 동북권ICT이노베이션스퀘어 (contents/about/about.html) — 새 디자인 2026-10-19 =====================
   - 클래스는 .ab-* (이전 디자인 구역 클래스와 겹치지 않음) / CSS 변수 쓰지 않음
   - 소개(.ab-about : 그림 | 한 줄 소개 + 숫자 .ab-stat) · 하는 일 3가지(.ab-role) · 프로그램 기관별 줄(.ab-prog) · 시설 위치(.ab-place : 지도 .ab-map + 정보) */
.ab-about-top{display:flex;align-items:center;gap:clamp(28px, 16.98px + 2.939vw, 64px);margin-bottom:clamp(48px, 37.59px + 2.776vw, 82px);}
.ab-about-visual{position:relative;flex:0 0 44%;min-width:0;padding:0 clamp(16px, 13.24px + 0.735vw, 25px) clamp(16px, 13.24px + 0.735vw, 25px) 0;}   /* 그림 (기존 사업소개 그림, 사용자 지시) : 그림 틀은 왼쪽 위, 하늘색 판은 오른쪽 아래로 */
.ab-about-visual::before{content:'';position:absolute;left:clamp(16px, 13.24px + 0.735vw, 25px);top:clamp(16px, 13.24px + 0.735vw, 25px);right:0;bottom:0;border-radius:clamp(28px, 22.49px + 1.469vw, 46px);background:#e4f0fb;}   /* 뒤쪽 연하늘 판 (장식) */
.ab-about-frame{position:relative;overflow:hidden;aspect-ratio:1234 / 930;border-radius:clamp(24px, 19.1px + 1.306vw, 40px);background:#f7fbff;box-shadow:inset 0 0 0 1px #e3ecf7,0 30px 60px -40px rgba(5,40,100,.4);}
.ab-about-frame img{position:absolute;left:6%;bottom:5%;width:88%;height:auto;}
.ab-about-copy{flex:1 1 0%;min-width:0;}
.ab-about-title{margin:0 0 clamp(24px, 20.33px + 0.980vw, 36px);font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 17.71px + 1.143vw, 36px);line-height:1.5;color:var(--ink);word-break:keep-all;}
.ab-about-title strong{font-weight:400;color:var(--primary);}
.ab-hanja{font-family:var(--font-body);font-weight:600;}   /* 한자 新 : 제목 글꼴(Cafe24 단정해)에 글자가 없어 빈칸 → 본문 글꼴로 */
.ab-stat{display:flex;gap:clamp(12px, 9.55px + 0.653vw, 20px);margin:0;}
.ab-stat-item{flex:1 1 0%;min-width:0;padding:clamp(18px, 15.55px + 0.653vw, 26px) clamp(18px, 14.94px + 0.816vw, 28px);border-radius:20px;background:var(--sky);}
.ab-stat dt{margin:0 0 6px;font-size:clamp(14px, 13.39px + 0.163vw, 16px);font-weight:700;color:var(--gray-700);}
.ab-stat dd{margin:0;font-size:clamp(16px, 15.08px + 0.245vw, 19px);font-weight:700;color:var(--ink);}
.ab-stat dd strong{margin-right:2px;font-family:var(--font-title);font-weight:400;font-size:clamp(34px, 29.71px + 1.143vw, 48px);line-height:1.1;color:var(--primary);}
.ab-stat dd span{margin-left:2px;font-size:clamp(14px, 13.39px + 0.163vw, 16px);font-weight:600;color:var(--gray-700);}
.ab-stat [data-count]{display:inline-block;text-align:right;}   /* 숫자 카운터 (js/content.js) : 올라가는 동안 오른쪽 단위(명 · 회)가 숫자에 붙어 있게 오른쪽 정렬 — 칸 폭은 스크립트가 최종 숫자 폭으로 잡음 */

/* 하는 일 3가지 : 위 선(앞쪽 짧게 파랑) + [아이콘 | 번호] + 제목 · 설명 (사용자 지시 : 카드 대신 선 위 번호형) */
.ab-role{display:flex;gap:clamp(20px, 11.43px + 2.286vw, 48px);margin:0;padding:0;list-style:none;}
.ab-role-item{position:relative;flex:1 1 0%;min-width:0;padding-top:clamp(22px, 19.55px + 0.653vw, 30px);box-shadow:inset 0 2px 0 #e3e9f1;}
.ab-role-item::before{content:'';position:absolute;left:0;top:0;width:56px;height:2px;background:var(--primary);}   /* 위 선 앞쪽 파랑 (장식) */
.ab-role-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(14px, 12.16px + 0.49vw, 20px);}
.ab-role-ic{display:flex;align-items:center;justify-content:center;width:clamp(52px, 48.33px + 0.98vw, 64px);height:clamp(52px, 48.33px + 0.98vw, 64px);border-radius:16px;background:var(--primary-light);}
.ab-role-ic img{width:60%;height:auto;}
.ab-role-no{font-family:var(--font-title);font-size:clamp(30px, 26.33px + 0.98vw, 42px);line-height:1;color:#d3e2f6;}   /* 번호 : 장식 (스크린리더 숨김) */
.ab-role-tit{margin:0 0 8px;font-size:clamp(17px, 15.78px + 0.327vw, 21px);font-weight:800;color:var(--ink);}
.ab-role-item p{margin:0;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);color:var(--gray-700);line-height:1.7;word-break:keep-all;}
.ab-role-item p strong{font-weight:700;color:var(--primary);}

/* 프로그램 기획 및 운영 : 제목 줄 오른쪽 안내 글 */
.ab-head-desc{margin:clamp(10px, 8.78px + 0.327vw, 14px) 0 0;font-size:clamp(15px, 14.08px + 0.245vw, 18px);color:var(--gray-700);line-height:1.8;word-break:keep-all;}   /* 제목 아래 왼쪽 설명 글 (교육소개 .fi-desc 와 같은 크기, 사용자 지시 — 예전 제목 줄 오른쪽) */
.ab-prog{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink);}
.ab-prog-item{display:flex;align-items:flex-start;gap:clamp(12px, 3.43px + 2.286vw, 40px);padding:clamp(20px, 17.55px + 0.653vw, 28px) clamp(4px, -0.90px + 1.306vw, 20px);border-bottom:1px solid #e3e9f1;}
.ab-prog-name{flex:0 0 clamp(200px, 181.63px + 4.898vw, 260px);min-width:0;margin:0;padding-top:4px;font-size:clamp(16px, 15.39px + 0.163vw, 18px);font-weight:800;color:var(--ink);word-break:keep-all;}
.ab-prog-list{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;gap:10px;margin:0;}
.ab-prog-list > div{display:flex;align-items:flex-start;gap:14px;}
.ab-prog-list dt{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:6.2em;height:30px;padding:0 10px;border-radius:999px;background:var(--primary-light);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--primary);}
.ab-prog-list dd{flex:1 1 0%;min-width:0;margin:0;padding-top:3px;font-size:clamp(15px, 14.54px + 0.122vw, 16.5px);color:var(--ink);line-height:1.6;word-break:keep-all;}

/* 시설 위치 : 지도 + 정보 카드 */
.ab-place{display:flex;align-items:stretch;gap:clamp(16px, 9.88px + 1.633vw, 36px);}
.ab-map{position:relative;flex:1.4 1 0%;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:clamp(20px, 17.55px + 0.653vw, 28px);border:1px solid #dbe6f3;background:#fff;}
.ab-map .root_daum_roughmap{flex:1 1 auto;display:flex;flex-direction:column;width:100% !important;border:0 !important;background:none !important;}
.ab-map .root_daum_roughmap .wrap_map{position:relative;flex:1 1 auto;height:auto !important;min-height:400px;}   /* 칸 높이만큼 지도 늘림 */
.ab-map .root_daum_roughmap .wrap_map .map{position:absolute !important;left:0;top:0;right:0;bottom:0;width:auto !important;height:auto !important;}
.ab-map .root_daum_roughmap .wrap_controllers{flex:none;}
.ab-map .root_daum_roughmap .map_border{display:none;}
.ab-map .root_daum_roughmap .cont{display:none !important;}   /* 지도 아래 주소 · 전화 : 오른쪽 정보 카드와 같은 내용이라 숨김 */
.ab-place-info{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;padding:clamp(24px, 19.10px + 1.306vw, 40px);border-radius:clamp(20px, 17.55px + 0.653vw, 28px);background:#fff;border:1px solid #e3ecf7;box-shadow:0 24px 48px -36px rgba(5,40,100,.35);}
.ab-place-name{margin:0 0 6px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--primary);}
.ab-place-addr{margin:0 0 clamp(16px, 14.16px + 0.490vw, 22px);padding-bottom:clamp(16px, 14.16px + 0.490vw, 22px);border-bottom:2px solid var(--ink);font-size:clamp(19px, 17.47px + 0.408vw, 24px);font-weight:800;color:var(--ink);line-height:1.45;word-break:keep-all;}
.ab-place-addr strong{color:var(--primary);}
.ab-place-contact{display:flex;flex-direction:column;gap:8px;margin:0 0 clamp(18px, 16.16px + 0.490vw, 24px);}
.ab-place-contact > div{display:flex;gap:14px;}
.ab-place-contact dt{flex:0 0 5em;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:800;color:var(--ink);}
.ab-place-contact dd{margin:0;font-size:clamp(15px, 14.69px + 0.082vw, 16px);color:var(--gray-700);}
.ab-place-contact a{color:inherit;}
.ab-place-contact a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.ab-access{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;}
.ab-access > li{padding:clamp(14px, 12.78px + 0.327vw, 18px) clamp(16px, 14.78px + 0.327vw, 20px);border-radius:16px;background:#f5f9fe;}
.ab-access-tit{margin:0;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:800;color:var(--ink);}
.ab-access-list{display:flex;flex-direction:column;gap:4px;margin:8px 0 0;padding:0;list-style:none;}
.ab-access-list li{position:relative;padding-left:12px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);line-height:1.6;word-break:keep-all;}
.ab-access-list li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--primary);}   /* 글머리 점 (장식) */
.ab-place-btn{align-self:flex-start;}   /* 오시는 길 보기 : 모양 · 위 간격은 교육장 소개 버튼 .ab-ct-go 와 같음 (사용자 지시) */
.ab-ct-go.ab-place-btn{background:var(--primary);color:#fff;}   /* 이 페이지만 색 반대 (사용자 지시) : 처음 파랑 바탕 + 흰 글자 · 흰 원, 마우스 올리면 흰 바탕 */
.ab-ct-go.ab-place-btn .ab-ct-go-ic{background:#fff;}
.ab-ct-go.ab-place-btn .ab-ct-go-ic::before{background:var(--primary);}
.ab-ct-go.ab-place-btn:hover{background:#fff;color:var(--primary);}
.ab-ct-go.ab-place-btn:hover .ab-ct-go-ic{background:var(--primary);}
.ab-ct-go.ab-place-btn:hover .ab-ct-go-ic::before{background:#fff;}

@media (max-width:1000px){
  .ab-about-top{flex-direction:column;align-items:stretch;}   /* 소개 : 그림 위, 글 아래 */
  .ab-about-visual{flex:none;width:100%;max-width:640px;margin:0 auto;}
  .ab-place{flex-direction:column;}   /* 시설 위치 : 지도 위, 정보 아래 */
  .ab-map .root_daum_roughmap .wrap_map{min-height:clamp(300px, 269.39px + 8.163vw, 400px);}
}
@media (max-width:768px){
  .ab-role{flex-direction:column;}   /* 하는 일 : 한 줄에 하나 */
  .ab-prog-item{flex-direction:column;}   /* 기관 이름 위, 프로그램 아래 */
  .ab-prog-name{flex:none;padding-top:0;}
}
@media (max-width:640px){
  .ab-about-visual{padding:0;}   /* 좁은 화면 : 뒤쪽 하늘색 판 없이 그림 틀만 */
  .ab-about-visual::before{display:none;}
  .ab-about-title br{display:none;}
}
@media (max-width:450px){
  .ab-stat{flex-direction:column;}   /* 숫자 : 위아래 */
  .ab-prog-list > div{flex-direction:column;gap:6px;}   /* 종류 알약 위, 프로그램 아래 */
  .ab-prog-list dd{padding-top:0;}
}

/* ===================== 사업소개 > 동북권 교육장 소개 (contents/about/center.html) — 새 디자인 2026-10-19 =====================
   - 클래스는 .ab-ct-* / CSS 변수 쓰지 않음 / 제목 줄은 about.html 과 같은 .ab-head
   - 교육장 6곳 카드 탭(.ab-ct-tabs, 선택 = 파랑 + 아래 꼭지) + 패널(.ab-ct-body : 사진 슬라이드 .ab-ct-photos | 정보 .ab-ct-info, 뒤 연하늘 판) + 교육장 구성 .ab-ct-more (판 아래) */
.ab-ct-tabs{display:flex;flex-wrap:wrap;gap:clamp(10px, 8.16px + 0.49vw, 16px);margin:0 0 clamp(32px, 27.1px + 1.306vw, 48px);}
.ab-ct-tab{position:relative;flex:1 1 0%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(16px, 14.16px + 0.49vw, 22px) clamp(16px, 14.16px + 0.49vw, 22px) clamp(18px, 16.16px + 0.49vw, 24px);border:0;border-radius:clamp(16px, 14.16px + 0.49vw, 22px);background:#f3f7fc;font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:background .2s,box-shadow .2s;}
.ab-ct-tab:hover{background:var(--primary-light);}
.ab-ct-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.ab-ct-tab[aria-selected="true"]{background:var(--primary);color:#fff;box-shadow:0 18px 32px -20px rgba(5,62,165,.65);}   /* 선택(현재 교육장) : 파랑 (사용자 지시) */
.ab-ct-tab[aria-selected="true"]::after{content:'';position:absolute;left:50%;top:100%;margin-left:-9px;border:9px solid transparent;border-top-color:var(--primary);border-bottom:0;}   /* 선택 꼭지 (장식) : 아래 패널을 가리킴 */
.ab-ct-tab-no{font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;letter-spacing:2px;color:var(--primary);}
.ab-ct-tab-area{font-family:var(--font-title);font-size:clamp(20px, 18.16px + 0.49vw, 26px);line-height:1.2;}
.ab-ct-tab-area small{font-family:var(--font-body);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--gray-700);}
.ab-ct-tab-name{font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600;line-height:1.45;color:var(--gray-700);word-break:keep-all;}
.ab-ct-tab[aria-selected="true"] .ab-ct-tab-no{color:#9cc8ff;}
.ab-ct-tab[aria-selected="true"] .ab-ct-tab-area small,.ab-ct-tab[aria-selected="true"] .ab-ct-tab-name{color:rgba(255,255,255,.85);}

/* 패널 : 사진 | 정보 */
.ab-ct-body{position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(24px, 14.2px + 2.612vw, 56px);padding:clamp(36px, 27.43px + 2.286vw, 64px) clamp(24px, 14.2px + 2.612vw, 56px) clamp(36px, 27.43px + 2.286vw, 64px) 0;}   /* 사진 | 정보 : 뒤에 연하늘 둥근 판, 사진은 세로 가운데 (사용자 지시 3안 중 A — 참고 이미지 방식, 사진 아래 빈 곳 없앰) */
.ab-ct-body::before{content:'';position:absolute;z-index:-1;left:8%;top:0;right:0;bottom:0;border-radius:clamp(48px, 25.96px + 5.878vw, 120px);background:linear-gradient(115deg,#eef4fc 0%,#f6f9fe 55%,#e8f1fb 100%);}   /* 판 (장식) : 사진 왼쪽 일부부터 오른쪽 끝까지 */
.ab-ct-photos{position:relative;flex:0 0 42%;min-width:0;}   /* 사진 칸 폭 55% → 48% → 42% (사용자 지시 : 가로 줄이고 세로 길게, 한 장 슬라이드) */
.ab-ct-swiper{isolation:isolate;border-radius:clamp(18px, 15.55px + 0.653vw, 26px);background:#eef3f9;box-shadow:0 30px 60px -32px rgba(5,40,100,.5);}   /* 사진 슬라이드 (Swiper, js/content.js) */
.ab-ct-slide{position:relative;margin:0;}
.ab-ct-slide img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;}   /* PC 4:3 (세로 조금 길게, 사용자 지시) / 1000px 이하 7:4 */
.ab-ct-slide figcaption{position:absolute;left:clamp(12px, 10.16px + 0.49vw, 18px);top:clamp(12px, 10.16px + 0.49vw, 18px);padding:6px 14px;border-radius:999px;background:rgba(5,15,38,.75);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:#fff;}   /* 사진 이름 (현장사진 · 건물위치 · 구축사진) */
.ab-ct-ctrl{position:absolute;right:clamp(12px, 10.16px + 0.49vw, 18px);bottom:clamp(12px, 10.16px + 0.49vw, 18px);z-index:2;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 10px 24px -12px rgba(5,15,38,.45);}   /* 조작 : 사진 앞(초점 순서 먼저) · 화면은 사진 오른쪽 아래 */
.ab-ct-photos:not(.is-ready) .ab-ct-ctrl{display:none;}   /* 스크립트가 슬라이드를 만들기 전 · 스크립트 없음 : 조작 숨김 (첫 사진만 보임) */
.ab-ct-arrow{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:background .2s;}
.ab-ct-arrow:hover{background:var(--primary-light);}
.ab-ct-arrow img{width:16px;height:16px;}
.ab-ct-ctrl .ab-ct-pager{position:static;flex:none;display:flex;align-items:center;gap:8px;width:auto;padding:0 4px;transform:none;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600;color:var(--gray-700);}
.ab-ct-ctrl .ab-ct-pager .cur{font-weight:800;color:var(--ink);}
.ab-ct-line{position:relative;display:block;width:clamp(28px, 24.33px + 0.98vw, 40px);height:2px;overflow:hidden;background:#d7dce6;}
.ab-ct-line b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--primary);}   /* 다음 사진까지 남은 시간 (폭은 스크립트) */
.ab-ct-play{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:2px;padding:0;border:0;border-radius:50%;background:var(--ink);cursor:pointer;transition:background .2s;}
.ab-ct-play:hover{background:var(--primary);}
.ab-ct-play img{width:12px;height:12px;}
.ab-ct-play .i-play,.ab-ct-play.is-paused .i-pause{display:none;}
.ab-ct-play.is-paused .i-play{display:block;}
.ab-ct-arrow:focus-visible,.ab-ct-play:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.ab-ct-info{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.ab-ct-area{margin:0 0 10px;padding:6px 14px;border-radius:999px;background:var(--primary-light);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--primary);}
.ab-ct-name{display:flex;align-items:flex-start;gap:.42em;margin:0 0 clamp(18px, 15.55px + 0.653vw, 26px);font-family:var(--font-title);font-weight:400;font-size:clamp(24px, 20.94px + 0.816vw, 34px);line-height:1.35;color:var(--ink);word-break:keep-all;}
.ab-ct-name::before{content:'';flex:none;width:.62em;height:.62em;margin-top:calc((1.35em - .62em) / 2);background:url("../images/common/bullet.svg") center/contain no-repeat;}   /* 블릿 (.cont-title 과 같은 그림 · 크기, 사용자 지시) : 이름이 두 줄이어도 첫 줄 가운데 */
.ab-ct-spec{display:flex;flex-direction:column;gap:12px;width:100%;margin:0;}   /* 위치 · 규모 : 흰 알약 라벨 + 값 (사용자 지시 3안 중 C — 참고 이미지 방식, 표 선 · 배경 칸 없음) */
.ab-ct-spec > div{display:flex;align-items:center;gap:clamp(12px, 10.16px + 0.49vw, 18px);}
.ab-ct-spec dt{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:96px;height:42px;padding:0 18px 0 calc(18px + .3em);border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #d3e0f1,0 8px 18px -14px rgba(5,40,100,.4);font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:800;color:var(--ink);letter-spacing:.3em;}   /* 글자 간격 .3em : 끝 간격만큼 왼쪽 여백을 더해 가운데 맞춤 */
.ab-ct-spec dd{flex:1 1 0%;min-width:0;margin:0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:600;line-height:1.6;color:var(--ink);word-break:keep-all;}
.ab-ct-spec > div:first-child dd{font-weight:700;color:var(--primary);}   /* 위치 값 : 파란 글자 */
.ab-ct-more{margin-top:clamp(32px, 27.1px + 1.306vw, 48px);}   /* 교육장 구성 : 판 아래로 뺌 + 하는 일(.ab-role) 모양 [위 선(앞 56px 파랑) · 큰 번호 · 글] (사용자 지시) */
.ab-ct-sub{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:800;color:var(--ink);}
.ab-ct-sub::before{content:'';flex:none;width:14px;height:14px;background:url("../images/common/bullet.svg") center/contain no-repeat;}   /* 블릿 (사이트 공통 그림, 사용자 지시) */
.ab-ct-equip{display:flex;gap:clamp(12px, 9.55px + 0.653vw, 20px);margin:0;padding:0;list-style:none;}
.ab-ct-equip li{position:relative;isolation:isolate;flex:1 1 0%;min-width:0;overflow:hidden;padding:clamp(28px, 24.33px + 0.98vw, 40px) clamp(24px, 20.33px + 0.98vw, 36px) clamp(28px, 25.55px + 0.653vw, 36px);border:1px solid #e3ecf7;border-radius:20px;background:#fff;box-shadow:0 20px 40px -30px rgba(5,40,100,.35);font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);line-height:1.7;color:var(--gray-700);word-break:keep-all;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;}   /* 카드 : 테두리 · 둥근 모서리 · 그림자 / 바탕 흰색 (사용자 지시) (사용자 지시) */
.ab-ct-equip li::after{content:'';position:absolute;z-index:-1;right:-36px;bottom:-36px;width:120px;height:120px;border-radius:50%;background:rgba(5,62,165,.025);}   /* 오른쪽 아래 옅은 원 (장식) — 더 연하게 .05 → .025 (사용자 지시) */
.ab-ct-equip li:hover{transform:translateY(-4px);border-color:#cfdff5;box-shadow:0 26px 44px -28px rgba(5,40,100,.45);}
.ab-ct-equip li::before{content:'';position:absolute;left:clamp(24px, 20.33px + 0.98vw, 36px);top:0;width:56px;height:3px;border-radius:0 0 3px 3px;background:var(--primary);}   /* 위 가장자리 파란 짧은 선 (장식) : 둥근 모서리를 피해 안쪽 여백 위치 */
.ab-ct-no{display:block;margin-bottom:clamp(12px, 10.78px + 0.327vw, 16px);font-family:var(--font-title);font-size:clamp(32px, 27.71px + 1.143vw, 46px);line-height:1;color:#7fa6e3;background:linear-gradient(135deg,#053ea5 0%,#62b6f2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}   /* 번호 : 파랑 → 하늘 그라데이션 글자 (장식, 스크린리더 숨김) */
.ab-ct-no::after{content:'';display:block;width:24px;height:2px;margin-top:clamp(12px, 10.78px + 0.327vw, 16px);background:#d3e2f6;-webkit-text-fill-color:initial;}   /* 번호 아래 짧은 구분선 (장식) */
.ab-ct-go{margin-top:clamp(24px, 21.55px + 0.653vw, 32px);}   /* 교육장 소개 누리집 · 소개 오시는 길 버튼 위 간격 — 버튼 모양(흰 알약 + 파란 원 화살표)은 common.css .ab-ct-go (마이페이지 강의실 [수강내역으로]도 같이 씀, 2026-10-30) */

@media (max-width:1000px){
  .ab-ct-tab{flex:0 0 calc((100% - clamp(10px, 8.16px + 0.49vw, 16px) * 2) / 3);}   /* 스크립트 없을 때 : 카드 한 줄 3개 (스크립트가 있으면 다른 페이지와 같은 [현재 교육장 ▾] 드롭다운 — 모양은 common.css .tab-drop) */
  .ab-ct-tab[aria-selected="true"]::after{display:none;}   /* 여러 줄이라 꼭지 없음 */
  .tab-drop .ab-ct-tab{align-items:center;}   /* 드롭다운 목록 : [지역 이름 설명] 한 줄 */
  .tab-drop .ab-ct-tab-no{display:none;}
  .tab-drop .ab-ct-tab-area{font-family:var(--font-body);font-size:inherit;line-height:inherit;}
  .tab-drop .ab-ct-tab-area small,.tab-drop .ab-ct-tab[aria-selected="true"] .ab-ct-tab-area small{font-size:inherit;font-weight:inherit;color:inherit;}
  .tab-drop .ab-ct-tab-name{font-size:.88em;font-weight:500;line-height:inherit;}
  .tab-drop .ab-ct-tab[aria-selected="true"]::after{display:block;position:static;margin:0;border:0;}   /* 꼭지 대신 공통 선택 체크(common.css) */
  .ab-ct-body{flex-direction:column;align-items:stretch;padding:0;}   /* 사진 위, 정보 아래 — 판 없음 */
  .ab-ct-body::before{display:none;}
  .ab-ct-photos{flex:none;}
  .ab-ct-slide img{aspect-ratio:7 / 4;}   /* 위아래로 쌓이면 화면 폭 가득이라 7:4 (너무 길지 않게) */
}
@media (max-width:768px){
  .ab-ct-equip{flex-direction:column;gap:12px;}   /* 교육장 구성 : 한 줄에 하나 */
}
@media (max-width:640px){
  .ab-ct-tab{flex-basis:calc((100% - clamp(10px, 8.16px + 0.49vw, 16px)) / 2);}   /* 스크립트 없을 때 : 카드 한 줄 2개 */
}
@media (prefers-reduced-motion:reduce){
  .ab-ct-equip li{transition:none;}
  .ab-ct-equip li:hover{transform:none;}
}

/* ===================== 사업소개 > 오시는 길 (contents/about/loc.html) — 2026-10-19 =====================
   - 기존 오시는 길(예전 location.html, 삭제됨) 레이아웃 그대로 (사용자 지시 : 탭 .tab-switch · .loc-body · .map-box · .loc-info · .way-list 재사용), 이메일 아이콘 loc_icon05.svg
   - 곳마다 [지도 | 정보 카드] + 교통 안내 3칸(대중교통 · 자가용 · 주차, 사용자 지시 : 기존과 같게) / 주소가 2개인 장소(강릉 · 원주, 대구)는 2벌 : 사이 간격 + 연한 선
   - 거리 · 시간 출처 안내 .loc-way-note (카카오맵 길찾기 기준) */
.loc-panel .way-list + .loc-body{margin-top:clamp(36px, 27.43px + 2.286vw, 64px);padding-top:clamp(36px, 27.43px + 2.286vw, 64px);border-top:1px solid #e3e9f1;}
.loc-way-note{margin:clamp(14px, 12.16px + 0.49vw, 20px) 0 0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-500);line-height:1.6;word-break:keep-all;}

/* ===================== 교육과정 > 교육소개 (contents/edu/intro.html) =====================
   - 분야 탭 (서브 공통 .tab-switch) + 분야별 패널 : 분야 비주얼 · 소개 · 교육 목표 · 커리큘럼 표 · 신청 버튼
   - 분야 색은 메인 교육과정 태그와 같은 색 (--c : 장식 색, --c-text : 글자용 진한 색, --c-soft : 연한 바탕) */
.fd-ai{--c:#6d28d9;--c-text:#6d28d9;--c-soft:#f3eefd;}
.fd-bc{--c:#047857;--c-text:#047857;--c-soft:#e9f6f1;}
.fd-data{--c:#c2410c;--c-text:#c2410c;--c-soft:#fdf1ea;}
.fd-iot{--c:#fcd34d;--c-text:#8a6700;--c-soft:#fef6db;}   /* IoT 노랑 #fcd34d (연한 바탕은 이 노랑 20%) / 노란 글자는 대비가 낮아 글자만 진한 금색 */
.fd-net{--c:#1d4ed8;--c-text:#1d4ed8;--c-soft:#ebf1fd;}

/* 탭 앞 분야 색 점 (장식) */
.tl-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff;}

/* 분야 소개 : 왼쪽 분야 비주얼 + 오른쪽 설명 · 교육 목표 */
.field-intro{display:flex;align-items:stretch;gap:clamp(24px, 12.98px + 2.939vw, 60px);}
.fi-visual{
  position:relative;overflow:hidden;isolation:isolate;flex:0 0 42%;min-width:0;min-height:clamp(220px, 158.78px + 16.327vw, 420px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px, 5.55px + 0.653vw, 16px);
  border-radius:clamp(24px, 19.1px + 1.306vw, 40px);background:var(--c-soft);
}
.fi-visual::before,.fi-visual::after{   /* 동심원 장식 */
  content:'';position:absolute;z-index:-1;border-radius:50%;border:1.5px solid var(--c);opacity:.14;
}
.fi-visual::before{width:78%;aspect-ratio:1;right:-22%;top:-30%;}
.fi-visual::after{width:52%;aspect-ratio:1;left:-14%;bottom:-24%;background:var(--c);opacity:.06;border:0;}
.fi-abbr{font-family:var(--font-title);font-size:clamp(72px, 51.43px + 5.486vw, 140px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--c);letter-spacing:-1px;}
.fi-en{font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;letter-spacing:3px;color:var(--c);opacity:.8;}
.fd-iot .fi-visual{--c:#e0a800;--c-soft:#fdf6dd;}   /* 교육소개 IoT 왼쪽 비주얼만 예전 노랑 (#fcd34d 는 너무 밝아서) */
.fi-body{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.fi-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;letter-spacing:2px;color:var(--c-text);}
.fi-tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c);}
.fi-title{margin:0 0 clamp(12px, 10.16px + 0.49vw, 18px);font-family:var(--font-title);font-weight:400;font-size:clamp(28px, 22.49px + 1.469vw, 46px);line-height:1.2;color:var(--ink);}
.fi-desc{margin:0;font-size:clamp(15px, 14.08px + 0.245vw, 18px);color:var(--gray-700);line-height:1.8;word-break:keep-all;}
.fi-sub{margin:clamp(22px, 18.33px + 0.98vw, 34px) 0 14px;font-size:clamp(16px, 15.08px + 0.245vw, 19px);font-weight:800;color:var(--ink);}
.goal-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;counter-reset:goal;}
.goal-steps li{
  counter-increment:goal;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:16px;background:#f5f9fe;
  font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:600;color:var(--ink);line-height:1.5;word-break:keep-all;
}
.goal-steps li::before{   /* 번호 (01 · 02 · 03) */
  content:counter(goal, decimal-leading-zero);flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:#fff;border:1.5px solid var(--c);color:var(--c-text);font-family:var(--font-title);font-size:clamp(13px, 12.69px + 0.082vw, 14px);
}

/* 커리큘럼 */
.cur-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:clamp(48px, 37.59px + 2.776vw, 82px) 0 clamp(16px, 13.55px + 0.653vw, 24px);}
.cur-head .cont-title{font-size:clamp(20px, 18.16px + 0.49vw, 26px);}
.cur-count{margin:0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
.cur-count b{color:var(--primary);font-weight:800;}
.tbl-cur .c-name{width:27%;}
.tbl-cur .c-mode{width:13%;}
.tbl-cur .c-time{width:11%;}
.tbl-cur .c-target{width:14%;}
.tbl-cur tbody th{font-weight:700;color:var(--ink);}
.cur-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);transition:color .2s;}   /* 과정명 링크 : 과정 상세로 */
.cur-link::after{content:'';flex:none;width:6px;height:6px;border-top:2px solid var(--primary);border-right:2px solid var(--primary);transform:rotate(45deg);transition:transform .2s var(--ease);}   /* 오른쪽 화살표 (장식) */
.cur-link:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.cur-link:hover::after{transform:translateX(3px) rotate(45deg);}
.cur-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}
.mode{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#eaf2fd;color:var(--primary);font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;white-space:nowrap;}
.mode.is-online{background:#e9f6f1;color:#047857;}


@media (max-width:1000px){
  .field-intro{flex-direction:column;}
  .fi-visual{flex:none;}
}
@media (max-width:768px){
  .tbl-cur{min-width:720px;}   /* 좁은 화면 : 표는 좌우로 밀어서 보기 */
  .tbl-cur .cur-empty{text-align:left;}   /* 빈 안내는 720px 표 가운데가 아니라 보이는 왼쪽에서 시작 */
}

/* ===================== 교육과정 > 교육신청 (contents/edu/course_list.html) =====================
   - 조건 찾기(공통 .filter-box : 분야 · 상태 버튼, 기간 · 교육명 검색) + 목록 머리(건수 · 정렬) + 교육 카드(메인 교육과정 카드와 같은 모양) + 페이지 번호 */
/* 교육 카드 (카드 전체를 누르면 제목 링크로 이동) */
.course-list{--cols:3;--g:clamp(16px, 11.1px + 1.306vw, 32px);display:flex;flex-wrap:wrap;gap:clamp(24px, 17.88px + 1.633vw, 44px) var(--g);margin:0;padding:0;list-style:none;}
.course-card{
  position:relative;display:flex;flex-direction:column;width:calc((100% - var(--g) * (var(--cols) - 1)) / var(--cols));
  background:#fff;border:1px solid #eef0f4;border-radius:22px;
  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);
}
.course-card:hover,.course-card:focus-within{transform:translateY(-10px);box-shadow:0 26px 40px -6px rgba(5,62,165,.2),0 10px 18px -8px rgba(5,62,165,.16);}
.course-card:has(.cc-link:focus-visible){outline:2px solid var(--primary);outline-offset:3px;}
.cc-thumb{position:relative;margin:13px 13px 0;aspect-ratio:426/300;overflow:hidden;border-radius:16px;background:#f2f5f9;}
.cc-thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.fac-list .cc-thumb{background:var(--sky) url("../images/common/no_image.png?v=26102205") center/cover no-repeat;}   /* 시설 · 장비 목록 : 사진이 없으면(img 를 빼고 출력 · 못 불러옴) 노 이미지 바탕이 보임 */
.fac-list .cc-thumb:not(:has(> img:not(.is-broken))) .cc-field{display:none;}   /* 노 이미지일 때 왼쪽 위 분류 태그 숨김 (사용자 지시) */
.cc-thumb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .35s var(--ease);}
.course-card:hover .cc-thumb > img{transform:scale(1.04);}
.course-card:hover .cc-thumb::after{background:rgba(0,0,0,.5);}
.course-card.is-closed .cc-thumb > img{filter:grayscale(1);opacity:.75;}
.cc-plus{
  position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--primary);color:#fff;border:2px solid #fff;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.cc-plus img{width:22px;height:22px;}
.course-card:hover .cc-plus{opacity:1;transform:translate(-50%,-50%) scale(1);}
.cc-field{   /* 분야 태그 : 메인 교육과정 태그와 같은 색 */
  position:absolute;top:11px;left:11px;z-index:2;padding:6px 14px;border-radius:999px;background:var(--c);color:#fff;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;
}
.cc-field.fd-iot{background:#fcd34d;color:#1f2937;}
.cc-noimg{   /* 썸네일 없을 때 분야 기본 그림(포트폴리오 pf-noimg 와 같은 방식) — cc-thumb 를 채운다 */
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.75) 1.5px, transparent 0) 0 0/16px 16px, var(--c-soft);
}
.cc-noimg b{font-family:var(--font-title);font-size:clamp(30px, 26px + 1vw, 42px);font-weight:400;line-height:1;color:var(--c-text);}
.cc-noimg em{font-style:normal;font-size:13px;font-weight:700;color:var(--c-text);}
.cc-body{flex:1 1 auto;display:flex;flex-direction:column;padding:16px 22px 22px;}
.cc-top{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.cc-status{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;}
.cc-status.is-open{background:var(--primary);color:#fff;}
.cc-status.is-open::before{content:'';flex:none;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#fff;}   /* 모집중 : 흰 점 */
.cc-status.is-soon{background:#e3f5f2;color:#0d6e66;}   /* 모집예정 : 청록 (글자 대비 5.4:1) → 모집중(파랑)·마감(회색)·분야 태그 색과 구분 */
.cc-status.is-soon + .cc-dday{color:#0d6e66;}   /* 오픈 날짜도 같은 색 (흰 바탕 6.1:1) */
.cc-status.is-closed{background:#eef1f5;color:var(--gray-700);}
.cc-dday{font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:var(--primary);}
.cc-title{   /* 카드 제목 (교육신청 · 온라인 강의 공통) : 한 줄, 넘치면 끝에 … */
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  margin:0 0 14px;font-size:clamp(16.5px, 16.04px + 0.122vw, 18px);font-weight:700;line-height:1.45;word-break:keep-all;
}
.cc-link{color:var(--ink);transition:color .2s;}
.cc-link::after{content:'';position:absolute;inset:0;z-index:3;border-radius:22px;}   /* 카드 전체 클릭 */
.cc-link:focus-visible{outline:none;}
@supports not selector(:has(*)){ .cc-link:focus-visible{outline:2px solid var(--primary);outline-offset:3px;} }   /* :has 못 쓰는 옛 브라우저 : 링크에 초점 표시 */
.course-card:hover .cc-link{color:var(--primary);}
.cc-meta{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);}
.cc-meta > div{display:flex;align-items:flex-start;gap:8px;}
.cc-meta dt{flex:none;display:flex;align-items:center;gap:6px;min-width:calc(20px + 3.5em);font-weight:700;color:#363636;}   /* 최소 너비 = 아이콘 14px + 간격 6px + 네 글자(접수기간·교육기간·교육장소) → 세 줄이 같은 자리에서 시작 */
.cc-meta dt::before{content:'';flex:none;width:14px;height:15px;background:url("../images/main/Calendar_icon.svg") center/contain no-repeat;}   /* 메인 카드와 같은 아이콘 */
.cc-meta .cm-place dt::before{background-image:url("../images/main/building_icon.svg");}
.cc-meta dd{margin:0;color:var(--gray-700);word-break:keep-all;}
.cc-foot{margin-top:auto;padding-top:14px;border-top:1px solid #eef0f4;}
.cc-seat{margin:0 0 8px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);}
.cc-seat b{color:var(--ink);font-weight:800;}
.cc-bar{display:block;height:6px;border-radius:999px;background:#eef2f7;overflow:hidden;}
.cc-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary);}
.course-card.is-closed .cc-bar i{background:#a3adbd;}
.course-list ~ .pagination{margin-top:clamp(48px, 40.65px + 1.959vw, 72px);}   /* 카드 목록 아래 페이지 번호 : 여백 더 (32~48px → 48~72px) */

@media (max-width:1150px){
  .course-list{--cols:2;}
}
@media (max-width:640px){
  .course-list{--cols:1;}
}
@media (prefers-reduced-motion:reduce){
  .course-card,.cc-thumb > img,.cc-plus,.cc-thumb::after{transition:none;}
  .course-card:hover,.course-card:focus-within{transform:none;}
}

/* ===================== 교육과정 > 온라인 강의 (contents/edu/online.html) =====================
   - 안내 박스 + 조건 찾기 · 목록 머리 · 페이지 번호(교육신청과 같음) + 강의 카드(교육 카드 모양에 16:9 썸네일 · 재생 버튼 · 재생 시간 · 시청 진도) */
.course-list.oc-list{--cols:4;}   /* 한 줄 4개 */
.oc-thumb{aspect-ratio:16/9;}   /* 영상 비율 */
.oc-play{   /* 가운데 재생 버튼 (장식) : 마우스 올리면 커짐 */
  position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
  background:rgba(5,62,165,.92);border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .35s var(--ease),background .35s var(--ease);
}
.oc-play img{width:18px;height:18px;margin-left:3px;}
.course-card:hover .oc-play{transform:translate(-50%,-50%) scale(1.12);background:var(--primary);}
.oc-time{position:absolute;right:10px;bottom:10px;z-index:2;padding:4px 8px;border-radius:6px;background:rgba(5,12,30,.8);color:#fff;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:700;letter-spacing:.02em;}   /* 재생 시간 */
.oc-state{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;}   /* 시청 상태 */
.oc-state.is-done{background:var(--primary);color:#fff;}
.oc-state.is-ing{background:#e8f1fd;color:var(--primary);}
.oc-state.is-none{background:#eef1f5;color:var(--gray-700);}
.oc-info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0 0 18px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);}   /* 강사 | 등록일 */
.oc-info > div{display:flex;align-items:center;gap:6px;}
.oc-info > div + div::before{content:'';flex:none;width:1px;height:11px;margin:0 6px 0 6px;background:#cfd8e6;}   /* 세로 구분선 */
.oc-info dt{font-weight:700;color:#363636;}
.oc-info dd{margin:0;color:var(--gray-700);}
.online-card .cc-seat b{color:var(--primary);}
.online-card[data-status="done"] .cc-seat b{color:#15803d;}   /* 시청 진도 100% (이수 완료) : 초록 (흰 바탕 5.0:1) */
.online-card[data-status="done"] .cc-bar i{background:#15803d;}   /* 진도 막대 : 초록 단색 */
@media (max-width:1280px){ .course-list.oc-list{--cols:3;} }
@media (max-width:1150px){ .course-list.oc-list{--cols:2;} }
@media (max-width:640px){ .course-list.oc-list{--cols:1;} }
@media (prefers-reduced-motion:reduce){
  .oc-play{transition:none;}
  .course-card:hover .oc-play{transform:translate(-50%,-50%);}
}

/* ===================== 교육과정 > 온라인 강의 > 상세 (contents/edu/online_view.html) =====================
   - 강의 정보(게시판 머리) / 영상 + 같은 묶음 강의 목록(끝선 맞춤) / 시청 진도 / 강의 소개(.cv-intro) / 이전 · 목록 · 다음 (.cv-bottom-btns) */
.ov-wrap{display:flex;align-items:stretch;gap:clamp(20px, 13.88px + 1.633vw, 40px);}   /* stretch : 강의 목록 높이 = 영상 높이 */
.ov-main{flex:1 1 auto;min-width:0;}
/* 영상 : 썸네일 + 재생 버튼 (a 링크, 개발 시 연결) */
.ov-player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#0b1530;box-shadow:0 30px 60px -38px rgba(5,40,100,.55);}
.ov-player > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;}
.ov-player::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,38,0) 45%,rgba(5,15,38,.65) 100%);pointer-events:none;}
.ov-player iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;}
.ov-play{   /* 가운데 재생 버튼 (a 링크) */
  position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:clamp(64px, 56.65px + 1.959vw, 88px);aspect-ratio:1;border-radius:50%;
  background:var(--primary);border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 0 12px rgba(255,255,255,.18),0 16px 32px -10px rgba(0,0,0,.5);transition:transform .3s var(--ease),background .3s;
}
.ov-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--primary-dark);}
.ov-play:focus-visible{outline:3px solid #fff;outline-offset:4px;}
.ov-play img{width:34%;height:auto;margin-left:8%;}
.ov-player .oc-time{right:16px;bottom:16px;z-index:2;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);padding:5px 10px;}
/* 강의 정보 */
.ov-head{margin-bottom:clamp(24px, 19.1px + 1.306vw, 40px);padding:clamp(20px, 17.55px + 0.653vw, 28px) 4px;border-top:2px solid var(--ink);border-bottom:1px solid #e3e9f1;}   /* 게시판 머리 : 굵은 윗선 + 연한 아랫선 */
.ov-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;}
.ov-title{margin:0 0 14px;font-size:clamp(21px, 18.86px + 0.571vw, 28px);font-weight:800;line-height:1.4;color:var(--ink);word-break:keep-all;}
.ov-meta{margin:0;font-size:clamp(13.5px, 13.2px + 0.082vw, 14.5px);}
/* 시청 진도 : 진도율 + 막대(이수 기준 표시) + 이수 여부 */
.ov-progress{
  display:flex;align-items:center;gap:clamp(18px, 13.1px + 1.306vw, 34px);margin-top:clamp(24px, 19.1px + 1.306vw, 40px);
  padding:clamp(20px, 17.55px + 0.653vw, 28px) clamp(20px, 16.33px + 0.98vw, 32px);border-radius:20px;background:#f5f9fe;border:1px solid #e3ecf7;
}
.op-label{display:block;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--gray-700);}
.op-num{flex:none;margin:0;}
.op-num strong{display:block;font-size:clamp(32px, 29.55px + 0.653vw, 40px);font-weight:800;line-height:1.1;color:var(--primary);}
.op-num strong b{font-weight:inherit;}   /* 숫자 (data-count : 0 부터 올라감) */
.op-num strong > span:last-child{margin-left:2px;font-size:.55em;}   /* % (숫자 앞 숨은 글자 span 은 제외) */
.op-body{flex:1 1 auto;min-width:0;}
.op-track{position:relative;padding-top:24px;}
.op-bar{height:10px;}
.op-goal{position:absolute;top:0;bottom:-4px;width:0;border-left:2px dashed #15803d;}   /* 이수 기준 선 */
.op-goal span{position:absolute;top:0;left:6px;font-size:12px;font-weight:800;line-height:1;color:#15803d;white-space:nowrap;}
.op-note{margin:10px 0 0;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);word-break:keep-all;}
.op-note b{color:var(--ink);}
.op-state{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;padding-left:clamp(18px, 13.1px + 1.306vw, 34px);border-left:1px solid #dbe5f2;}
.ov-sec{padding-top:clamp(36px, 29.88px + 1.633vw, 56px);}
.ov-sec .cont-title{margin-bottom:clamp(14px, 11.55px + 0.653vw, 22px);font-size:clamp(20px, 18.16px + 0.49vw, 26px);}
.ov-sec .cv-intro{min-height:0;}
/* 강의 목록 (오른쪽) */
.ov-side{position:relative;flex:none;width:clamp(320px, 166.67px + 13.333vw, 380px);overflow:hidden;border-radius:24px;background:#fff;border:1px solid #e3ecf7;box-shadow:0 24px 48px -36px rgba(5,40,100,.35);}
.ov-side-in{position:absolute;inset:0;display:flex;flex-direction:column;}   /* 목록 내용이 높이를 늘리지 않음 → 영상과 끝선 같음 */
.ol-head{flex:none;padding:clamp(16px, -8px + 1.875vw, 22px) 24px clamp(14px, -10px + 1.875vw, 20px);background:#f5f9fe;border-bottom:1px solid #e3ecf7;}
.ol-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:800;color:var(--ink);}
.ol-title::before{content:'';flex:none;width:14px;height:14px;background:url("../images/common/bullet.svg") center/contain no-repeat;}   /* 제목 블릿 (.cont-title 과 같은 모양) */
.ol-series{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
.ol-series b{color:var(--primary);font-weight:800;}
.ol-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:10px;list-style:none;scrollbar-width:thin;scrollbar-color:#c3cddb transparent;}   /* 넘치면 목록만 스크롤 (지금 강의는 js/content.js 가 보이는 곳으로) */
.ol-list:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:0 0 24px 24px;}   /* 키보드로 목록 스크롤 (ol tabindex=0) */
.ol-list::-webkit-scrollbar{width:6px;}
.ol-list::-webkit-scrollbar-thumb{border-radius:6px;background:#c3cddb;}
.ol-list::-webkit-scrollbar-track{background:transparent;}
.ol-list li{display:flex;align-items:center;gap:12px;padding:clamp(6px, -18px + 1.875vw, 12px) 12px;border-radius:14px;color:var(--ink);}   /* 1280 → 1600 : 6 → 12px (영상 높이 안에 6강이 들어가도록) */
.ol-list li[aria-current]{background:#eaf2fd;}   /* 지금 보는 강의 (링크 없음) */
.ol-no{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#eef1f5;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;color:var(--gray-700);}
.ol-list li[aria-current] .ol-no{background:var(--primary);color:#fff;}
.ol-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ol-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:700;}
.ol-list li[aria-current] .ol-name{color:var(--primary);}
.ol-time{font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);color:var(--gray-700);}
.ol-list .oc-state{flex:none;height:24px;padding:0 9px;font-size:12px;}
@media (max-width:1150px){
  .ov-wrap{flex-direction:column;}   /* 태블릿부터 : 강의 목록은 영상 아래로, 높이 맞춤 해제 */
  .ov-side{width:auto;}
  .ov-side-in{position:static;}
  .ol-list{max-height:300px;overscroll-behavior:auto;}   /* 태블릿·모바일 : 길면 목록만 스크롤 (5강 반쯤까지 보이고 나머지는 스크롤 — 사용자 지시, 예전엔 모두 펼침) / 목록 끝에서는 페이지가 이어서 스크롤 */
}
@media (max-width:640px){
  .ov-player{border-radius:16px;}
  .ov-progress{flex-wrap:wrap;}
  .op-body{flex-basis:100%;order:3;}
  .op-state{flex-direction:row;margin-left:auto;padding-left:0;border-left:0;}
  .ov-meta{gap:6px 14px;}
  .ov-meta > div + div::before{display:none;}   /* 모바일 : 줄바꿈되면 구분선 대신 간격 */
  .ov-btns{flex-wrap:nowrap;gap:8px;}   /* 버튼 3개 한 줄 */
  .ov-btns .btn{flex:1 1 0%;min-width:0;padding:0 8px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);white-space:nowrap;}
  .ov-btns .btn-arrow::after{display:none;}
}
@media (prefers-reduced-motion:reduce){ .ov-play{transition:none;} }

/* ===================== 교육과정 > 대구AI허브 강좌 (contents/edu/daegu_hub.html) =====================
   - 안내 박스(.guide-box) + 조건 찾기(교육신청과 같음) + 목록 머리(건수 · 최종 동기화) + 강좌 카드(썸네일 없음, 머리는 분야 연한 색) */
.gb-ic .gb-sync{width:22px;height:22px;margin:0;}   /* 안내 아이콘 : images/contents/sync_icon02.svg */
.sync-info{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
.sync-info img{width:16px;height:16px;}   /* images/contents/sync_icon.svg */
.sync-info b{color:var(--ink);font-weight:700;}
.hub-card{
  display:flex;flex-direction:column;width:calc((100% - var(--g) * (var(--cols) - 1)) / var(--cols));padding:12px;
  background:#fff;border:1px solid #eef0f4;border-radius:22px;box-shadow:0 18px 36px -30px rgba(5,40,100,.35);
}
.hc-head{padding:20px 20px 18px;border-radius:16px;background:var(--hc-bg,#f8f9fb);}   /* 분야 색을 아주 연하게 (분야 연한 색의 절반) */
.hub-card.fd-ai{--hc-bg:#f9f7fe;}
.hub-card.fd-bc{--hc-bg:#f2fbf8;}
.hub-card.fd-data{--hc-bg:#fef8f5;}
.hub-card.fd-iot{--hc-bg:#fffbed;}
.hub-card.fd-net{--hc-bg:#f5f8fe;}
.hub-card.is-closed{--hc-bg:#f8f9fb;}
/* 모집상태 + D-day 한 배지 : 머리 오른쪽 위 (모집중 파란 채움 / 모집예정 흰 바탕 회색 테두리 / 마감 회색 채움) */
.hc-state{flex:none;display:inline-flex;align-items:center;gap:7px;height:30px;margin-left:auto;padding:0 12px;border-radius:999px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;white-space:nowrap;}
.hc-state b{padding-left:7px;border-left:1px solid;font-weight:800;}
.hc-state.is-open{background:var(--primary);color:#fff;}
.hc-state.is-open::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#fff;}
.hc-state.is-open b{border-color:rgba(255,255,255,.45);}
.hc-state.is-soon{background:#fff;border:1.5px solid #8a95a8;color:#3a4356;}
.hc-state.is-soon b{border-color:#c9d0db;}
.hc-state.is-closed{background:#e6e9ee;color:var(--gray-700);}
/* 카드 테두리로도 상태 구분 : 모집중만 파란 굵은 선 (안쪽 여백 1px 줄여 크기 같게) */
.hub-card[data-status="open"]{padding:11px;border:2px solid var(--primary);box-shadow:0 20px 36px -24px rgba(5,62,165,.4);}
.hc-head .cc-top{flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.hc-head .cc-title{margin:0 0 6px;color:var(--ink);}
.hc-id{margin:0;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;color:var(--gray-700);}
.hc-id span{margin-left:4px;font-weight:500;letter-spacing:.02em;}
.hc-meta{display:flex;flex-direction:column;gap:8px;margin:0;padding:18px 10px 20px;font-size:clamp(13.5px, 13.2px + 0.082vw, 14.5px);}
.hc-meta > div{display:flex;gap:10px;}
.hc-meta dt{flex:none;width:4.6em;font-weight:700;color:#363636;}
.hc-meta dd{margin:0;color:var(--gray-700);word-break:keep-all;}
.hc-btn{width:100%;height:50px;margin-top:auto;border-radius:14px;}
.hc-btn .ext{flex:none;width:11px;height:11px;transition:filter .2s;}
.hub-card:hover .hc-btn,.hub-card:focus-within .hc-btn{background:var(--primary);border-color:var(--primary);color:#fff;}   /* 카드에 마우스 · 초점 : 버튼에 직접 올린 것처럼 파란 채움 + 흰 글자 (사용자 지시) */
.hub-card:hover .hc-btn .ext,.hub-card:focus-within .hc-btn .ext{filter:brightness(0) invert(1);}   /* 새 창 아이콘도 흰색 */

/* ===================== 교육과정 > 자가진단 (contents/edu/diagnosis · diagnosis_test · diagnosis_result · diagnosis_match) =====================
   - 시작 : 분야 타일 / 응시 : 응답자 정보 + 문항 / 결과 : 점수 + 응시 정보 + 문항별 결과 / 매칭 : 검색 + 강의 표 */
.gb-ic .gb-diag{width:22px;height:22px;margin:0;}   /* 안내 아이콘 : images/contents/diag_icon02.svg */
/* 시작 : 분야 타일 (한 줄 5개 → 3개 → 2개) */
.diag-tiles{--cols:5;--g:clamp(14px, 8.88px + 1.365vw, 24px);display:flex;flex-wrap:wrap;gap:var(--g);margin:0;padding:0;list-style:none;}
.diag-tiles > li{width:calc((100% - var(--g) * (var(--cols) - 1)) / var(--cols));}
.dt-link{
  display:flex;flex-direction:column;align-items:center;height:100%;padding:clamp(28px, 23.1px + 1.306vw, 40px) 16px clamp(24px, 20.33px + 0.98vw, 32px);
  border-radius:24px;background:#fff;border:1px solid #e3ecf7;text-align:center;box-shadow:0 20px 40px -34px rgba(5,40,100,.4);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.dt-link:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 26px 40px -20px rgba(5,62,165,.22);}
.dt-link:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.dt-mono{   /* 분야 표시 원 (장식) */
  flex:none;display:flex;align-items:center;justify-content:center;width:clamp(64px, 59.1px + 1.306vw, 80px);aspect-ratio:1;margin-bottom:18px;border-radius:50%;
  background:var(--c);color:#fff;font-size:clamp(15px, 13.78px + 0.327vw, 19px);font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 8px var(--c-soft);
}
.fd-iot .dt-mono{color:#1f2937;}   /* 노랑 : 진한 글자 */
/* 시작 화면 타일의 분야 마크 : 뒤 연한 분야 색 사각(기울임) + 앞 분야 색 사각 + 분야 아이콘 (images/contents/diag_분야_icon.svg) */
.dt-mark{position:relative;flex:none;width:clamp(68px, 63.1px + 1.306vw, 84px);aspect-ratio:1;margin-bottom:20px;}
.dt-mark::before{content:'';position:absolute;inset:0;border-radius:26%;background:var(--c-soft);transform:rotate(12deg);transition:transform .45s var(--ease);}   /* 뒤 사각 (장식) */
.dm-box{position:absolute;inset:8%;display:flex;align-items:center;justify-content:center;border-radius:24%;background:var(--c);box-shadow:0 14px 24px -12px rgba(5,20,50,.5);}
.dm-box img{width:42%;height:auto;}
.dt-link:hover .dt-mark::before{transform:rotate(22deg);}
.dt-txt{display:flex;flex-direction:column;align-items:center;}   /* 이름 + 문항 수 (모바일 한 줄 목록에서는 가운데 묶음) */
.dt-name{font-size:clamp(17px, 16.39px + 0.163vw, 19px);font-weight:800;color:var(--ink);}
.dt-meta{margin-top:6px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);}
.dt-go{display:inline-flex;align-items:center;gap:8px;height:36px;margin-top:18px;padding:0 16px;border-radius:999px;background:var(--c-soft);color:var(--c-text);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:800;transition:background .3s,color .3s;}
.dt-go::after{content:'';flex:none;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}   /* 오른쪽 화살표 (장식) */
.dt-link:hover .dt-go{background:var(--c);color:#fff;}
.fd-iot .dt-link:hover .dt-go{color:#1f2937;}
/* 응시 · 결과 : 분야 머리 */
.dg-head{   /* 분야 머리 : 연한 회색 바탕 + 안쪽 회색 점선 (교육 소개 박스와 같은 톤) + 분야 마크 + 제목 + 진행 단계 */
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px, 13.1px + 1.306vw, 28px) clamp(20px, 13.88px + 1.633vw, 36px);
  padding:clamp(30px, 26.33px + 0.98vw, 40px) clamp(28px, 22.49px + 1.469vw, 46px);border-radius:28px;background:rgba(232, 232, 232, 0.15);
}
.dg-head::before{content:'';position:absolute;inset:12px;border:2px dashed #c3cddb;border-radius:20px;pointer-events:none;}   /* 안쪽 회색 점선 (장식) */
.dg-head > *{position:relative;}
.dg-head .dt-mark{margin:0 6px 0 4px;}   /* 분야 마크 (시작 화면 타일과 같은 .dt-mark) */
.dg-head-txt{flex:1 1 300px;min-width:0;}
.dg-field{margin:0 0 4px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:var(--c-text);}
.dg-title{margin:0 0 8px;font-size:clamp(21px, 19.16px + 0.49vw, 26px);font-weight:800;color:var(--ink);}
.dg-desc{margin:0;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);word-break:keep-all;}
/* 진행 단계 : 지금 단계는 파란 번호 */
.dg-steps{flex:none;display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--gray-700);}
.dg-steps li{position:relative;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.dg-steps li + li::before{content:'';flex:none;width:22px;height:1px;background:#cfd8e6;}   /* 단계 잇는 선 */
.dg-steps span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #cfd8e6;background:#fff;font-size:12px;font-weight:800;}
.dg-steps .is-current{color:var(--primary);}
.dg-steps .is-current span{background:var(--primary);border-color:var(--primary);color:#fff;}
.dg-field{margin:0 0 4px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:var(--c-text);}
.dg-title{margin:0 0 6px;font-size:clamp(20px, 18.16px + 0.49vw, 26px);font-weight:800;color:var(--ink);}
.dg-sec{padding-top:clamp(36px, 29.88px + 1.633vw, 56px);}
.dg-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 20px;margin-bottom:clamp(14px, 11.55px + 0.653vw, 22px);}
.dg-sec-head .cont-title{margin:0;font-size:clamp(20px, 18.16px + 0.49vw, 26px);}
.dg-req{margin:0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
/* 응답자 정보 : 회색 이름표 칸 + 알약 선택 버튼 */
.dg-info{overflow:hidden;border:1px solid #e3e9f1;border-radius:14px;}
.di-row{display:flex;align-items:stretch;}
.di-row + .di-row{border-top:1px solid #eef2f7;}
.di-th{flex:none;display:flex;align-items:center;width:clamp(116px, 106.2px + 2.612vw, 150px);margin:0;padding:16px 20px;background:#f5f7fa;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--ink);}
.di-td{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px;}
.di-etc{width:200px;height:40px;}
/* 문항 */
.dq{min-width:0;margin:0;padding:clamp(20px, 16.33px + 0.98vw, 30px) clamp(18px, 12.49px + 1.469vw, 34px);border:1px solid #e3e9f1;border-radius:20px;background:#fff;}
.dq + .dq{margin-top:14px;}
.dq.is-missing{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}   /* 답하지 않고 제출한 문항 (답하면 없어짐, js/content.js) */
.dq-q{display:block;width:100%;margin:0 0 16px;padding:0;font-size:clamp(16px, 15.39px + 0.163vw, 18px);font-weight:700;line-height:1.55;color:var(--ink);word-break:keep-all;}
legend.dq-q{float:left;}   /* fieldset 테두리 위가 아니라 박스 안에 제목 표시 */
legend.dq-q + *{clear:left;}
.dq-no{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;margin-right:10px;padding:0 8px;border-radius:999px;background:var(--primary);color:#fff;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:800;vertical-align:1px;}
.dq-example{margin:0 0 16px;padding:16px 20px;border-radius:12px;background:#f5f7fa;border:1px solid #e6ebf2;overflow-x:auto;font:600 clamp(13.5px, 13.19px + 0.082vw, 14.5px)/1.7 Consolas,"D2Coding",monospace;color:var(--ink);white-space:pre-wrap;word-break:break-all;}   /* 좁은 화면 : 스크롤 대신 줄바꿈 */
.dq-opts{display:flex;flex-direction:column;gap:8px;}
.dq-opt{position:relative;display:block;cursor:pointer;}
.dq-opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;}
.dq-opt span{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid #dfe6f0;border-radius:14px;background:#fff;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);color:var(--ink);word-break:keep-all;transition:border-color .2s,background .2s;}
.dq-opt span b,.dq-list b{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid #c3cddb;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;color:var(--gray-700);}
.dq-opt:hover span{border-color:var(--primary);}
.dq-opt input:checked + span{border-color:var(--primary);background:#f3f8ff;box-shadow:inset 0 0 0 1px var(--primary);font-weight:700;}
.dq-opt input:checked + span b{background:var(--primary);border-color:var(--primary);color:#fff;}
.dq-opt input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px;}
/* 결과 : 점수 + 응시 정보 */
.dr-summary{display:flex;align-items:stretch;gap:clamp(18px, 11.88px + 1.633vw, 34px);}
.dr-score{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(220px, 202.86px + 4.571vw, 280px);padding:28px 20px;border-radius:24px;background:#f4f9fe;}
.drs-ring{width:150px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p) * 1%), #dde7f4 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));mask-image:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));}   /* 점수 원 (장식) */
.drs-num{position:absolute;top:28px;left:50%;display:flex;align-items:baseline;justify-content:center;width:150px;height:150px;padding-top:48px;margin:0;transform:translateX(-50%);font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:700;color:var(--ink);}
.drs-num strong{font-size:clamp(33px, 29.63px + 0.898vw, 44px);font-weight:800;line-height:1;color:var(--primary);}
.drs-sub{margin:14px 0 0;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);color:var(--gray-700);}
.drs-sub b{color:var(--ink);}
.dr-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.dr-field{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:clamp(18px, 16.78px + 0.327vw, 22px);font-weight:800;color:var(--ink);}
.dr-tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:clamp(14px, 13.69px + 0.082vw, 15px);}
.dr-tbl th,.dr-tbl td{padding:13px 16px;border-bottom:1px solid #e3e9f1;text-align:left;}
.dr-tbl th{width:15%;background:#f5f7fa;font-weight:700;color:var(--ink);white-space:nowrap;}
.dr-tbl td{color:var(--gray-700);}
.dr-point{color:var(--primary);font-weight:800;}
.dr-ok{color:var(--primary);font-weight:800;}
.dr-ng{color:var(--red);font-weight:800;}
/* 결과 : 문항별 (정답 파랑 / 오답 빨강 - 글자로도 표시) */
.dq.is-wrong{border-color:#f0c5bd;background:#fff8f6;}
.dq.is-wrong .dq-no{background:var(--red);}
.dq-mark{display:inline-flex;align-items:center;height:24px;margin-left:10px;padding:0 10px;border-radius:999px;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;vertical-align:2px;}
.is-correct .dq-mark{background:#e8f1fd;color:var(--primary);}
.is-wrong .dq-mark{background:#fde6e1;color:#a82d17;}
.dq-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;}
.dq-list li{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #e6ebf2;border-radius:14px;background:#fff;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);color:var(--gray-700);word-break:keep-all;}
.dq-list li.is-answer{border-color:var(--primary);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--primary);}
.dq-list li.is-answer b{background:var(--primary);border-color:var(--primary);color:#fff;}
.is-wrong .dq-list li.is-mine{border-color:var(--red);background:#fff;color:#a82d17;font-weight:700;box-shadow:inset 0 0 0 1px var(--red);}
.is-wrong .dq-list li.is-mine b{background:var(--red);border-color:var(--red);color:#fff;}
.dq-tag{margin-left:auto;padding-left:10px;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;white-space:nowrap;}
.is-answer .dq-tag{color:var(--primary);}
.is-wrong .is-mine .dq-tag{color:#a82d17;}
.dq-ans{margin:12px 0 0;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--gray-700);}
/* 매칭 : 검색 + 강의 표 */
.match-search{display:flex;gap:8px;padding:clamp(14px, 11.55px + 0.653vw, 22px);border-radius:20px;background:#f5f9fe;border:1px solid #e3ecf7;}
.ms-select{flex:none;width:clamp(110px, 94.08px + 4.245vw, 160px);padding-right:36px;-webkit-appearance:none;appearance:none;background:#fff url("../images/common/arrow_down_icon.svg") right 12px center/14px no-repeat;cursor:pointer;}
.ms-input{flex:1 1 auto;min-width:0;}
.tbl-match{min-width:880px;}
.tbl-match .c-st{width:11%;}
.tbl-match .c-lv{width:8%;}
.tbl-match .c-fee{width:12%;}
.tbl-match .c-view{width:8%;}
.tbl-match .c-mode{width:11%;}
.tbl-match .c-apply{width:13%;}
.tm-title{font-size:clamp(15px, 14.39px + 0.163vw, 17px);font-weight:800;color:var(--ink);transition:color .2s;}
.tm-title:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.tm-title:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}
.tm-dates{margin:8px 0 0;padding:0;list-style:none;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);}
.tm-dates b{margin-right:8px;font-weight:700;color:#363636;}
.tm-sub{display:block;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);color:var(--gray-700);}
.tm-off{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:10px;background:#eef1f5;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--gray-700);}
.dm-foot{display:flex;justify-content:flex-end;margin-top:clamp(20px, 16.33px + 0.98vw, 32px);}
@media (max-width:1000px){   /* 매칭 표 → 카드 : 가로 스크롤 없이 한눈에 (상태 · 강의명 · 기간 / 구분 · 수강료 · 조회수 · 온/오프라인 / 신청 버튼) */
  .tbl-match{display:block;min-width:0;border-top:0;}
  .tbl-match thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}   /* 열 이름은 스크린리더만 */
  .tbl-match tbody{display:flex;flex-direction:column;gap:12px;}
  .tbl-match tr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;padding:18px 20px;border:1px solid #e3ecf7;border-radius:18px;background:#fff;}
  .tbl-match tbody tr:hover{background:#fff;border-color:#b3cae9;}
  .tbl-match td{display:block;padding:0;border:0;text-align:left;}
  .tbl-match td:nth-child(1){flex:0 0 100%;}
  .tbl-match td:nth-child(2){flex:0 0 100%;padding-bottom:12px;border-bottom:1px dashed #d6e2f1;}
  .tbl-match td[data-label]{flex:0 0 auto;padding-right:16px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);color:var(--ink);}
  .tbl-match td[data-label] + td[data-label]{padding-left:16px;border-left:1px solid #e3e9f1;}
  .tbl-match td[data-label]::before{content:attr(data-label);content:attr(data-label) / "";margin-right:8px;font-weight:700;color:var(--gray-700);}   /* 열 이름 (화면용, 스크린리더는 표 머리로 읽음) */
  .tbl-match .tm-sub{display:inline;margin-left:4px;}
  .tbl-match td:last-child{flex:0 0 100%;margin-top:4px;}
  .tbl-match td:last-child .btn,.tbl-match td:last-child .tm-off{width:100%;justify-content:center;height:44px;}
}
@media (max-width:640px){
  .tbl-match tr{padding:16px;}
  .tbl-match td[data-label]{flex:0 0 50%;padding:0;}
  .tbl-match td[data-label] + td[data-label]{padding-left:0;border-left:0;}
}
@media (max-width:1150px){ .diag-tiles{--cols:3;} }
@media (max-width:1000px){
  .dr-summary{flex-direction:column;}
  .dr-score{width:auto;}
}
@media (max-width:640px){
  .diag-tiles{--cols:1;}   /* 모바일 : 한 줄에 하나씩 목록 [분야 마크 | 이름 · 문항 수 | 진단 시작] (사용자 지시) */
  .dt-link{flex-direction:row;gap:16px;padding:36px 20px;border-radius:20px;text-align:left;}   /* 위아래 여백 16 → 26 → 36px (사용자 지시) */
  .dt-link:hover{transform:translateY(-4px);}
  .dt-mark{width:56px;margin:0;}
  .dt-txt{flex:1 1 auto;min-width:0;align-items:flex-start;}
  .dt-meta{margin-top:4px;}
  .dt-go{flex:none;margin-top:0;}
  .dg-steps{width:100%;justify-content:space-between;gap:6px;}   /* 모바일 : 번호 아래 글자, 세 단계가 한 줄에 나란히 */
  .dg-steps li{flex:1 1 0%;min-width:0;flex-direction:column;gap:6px;white-space:normal;text-align:center;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);}
  .dg-steps li + li::before{position:absolute;top:13px;right:calc(50% + 19px);width:calc(100% - 32px);}   /* 단계 잇는 선 : 앞 번호 원 ~ 이 번호 원 사이 (원 높이 가운데, 양쪽 6px 띄움 — 사용자 지시로 모바일에서도) */
  .di-row{flex-direction:column;}
  .di-th{width:auto;padding:12px 16px;}
  .di-td{padding:12px 16px 14px;}
  .dr-tbl tr{display:flex;flex-wrap:wrap;}   /* 응시 정보 표 : 한 줄에 항목 하나 (제목 칸 + 내용 칸 = 2칸) */
  .dr-tbl th{flex:0 0 max(26%, calc(4em + 28px));width:auto;}   /* 제목 칸 폭 32 → 26% (가장 긴 "제출일시" 4글자는 들어가게, 사용자 지시) */
  .dr-tbl td{flex:1 1 68%;min-width:0;}
  .match-search{flex-wrap:wrap;}
  .ms-select{width:100%;}
}
@media (prefers-reduced-motion:reduce){ .dt-link,.dt-go,.dt-mark::before{transition:none;} .dt-link:hover{transform:none;} .dt-link:hover .dt-mark::before{transform:rotate(12deg);} }

/* ===================== 교육과정 > 교육신청 > 상세 (contents/edu/course_view.html) =====================
   - 과정 요약(포스터 + 정보 + 신청 버튼) / 상세 바로가기(따라붙는 메뉴) / 교육 소개 · 커리큘럼 · 강사 소개 · 유의사항 / 레이어(수강신청 · 완료) */
.field-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--c);color:#fff;font-size:clamp(12px, 11.85px + 0.041vw, 12.5px);font-weight:800;}
.field-tag.fd-iot{background:#fcd34d;color:#1f2937;}

.cv-top{display:flex;align-items:stretch;gap:clamp(24px, 11.76px + 3.265vw, 64px);padding-bottom:clamp(32px, 24.65px + 1.959vw, 56px);border-bottom:1px dashed #c3d3e8;}   /* 요약 영역 아래 점선 */
.cv-poster{position:relative;flex:0 0 40%;min-width:0;border-radius:24px;background:#f2f5f9;box-shadow:0 30px 60px -38px rgba(5,40,100,.4);overflow:hidden;}
.cv-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}   /* PC : 포스터 높이 = 오른쪽 내용 높이 (위 끝 = 태그, 아래 끝 = 안내 문구 cv-note) / 이미지 크기가 높이에 영향 주지 않음 */
.cv-summary{flex:1 1 0%;min-width:0;}
.cv-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;}
.cv-dday{margin-left:4px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:800;color:var(--primary);}
.cv-title{margin:0 0 clamp(20px, 16.33px + 0.98vw, 32px);font-family:var(--font-title);font-weight:400;font-size:clamp(26px, 20.49px + 1.469vw, 44px);line-height:1.25;color:var(--ink);word-break:keep-all;}
.cv-info{margin:0;border-top:2px solid var(--ink);}
.cv-info > div{display:flex;align-items:stretch;border-bottom:1px solid #e9eef5;}
.cv-info dt{flex:none;display:flex;align-items:center;justify-content:flex-start;width:calc(3.75em + 68px);padding:clamp(11px, 9.78px + 0.327vw, 15px) 34px;background:#f5f7fa;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--ink);text-align:left;}   /* 항목 칸 : 연한 회색 배경 (줄 높이만큼 채움) / 글자 왼쪽 정렬 / 폭 = 가장 긴 항목 이름(네 글자 + 띄어쓰기 = 3.75em) + 양쪽 여백 34px 같게 (사용자 지시로 24 → 34 더 넓힘) */
.cv-info dd{flex:1 1 auto;min-width:0;margin:0;padding:clamp(11px, 9.78px + 0.327vw, 15px) 16px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);word-break:keep-all;}
.cv-info dd a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.cv-info dd a:hover{color:var(--primary);}
.cv-info dd a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}
.cv-seat .cc-bar{max-width:260px;margin-top:8px;}
/* 정보가 없는 항목 : 줄은 지우지 않고 값 자리에 "-" (dd 를 비워 두면 자동 표시, 스크린리더는 "없음"으로 읽음) */
.cv-info dd:empty::before,.tc-info dd:empty::before{content:"-";content:"-" / "없음";color:var(--gray-500);}   /* 레이어 표(.layer-info)는 common.css */
.cv-free{color:var(--primary);font-weight:800;}
.cv-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px, 18.33px + 0.98vw, 34px);}
.cv-btns .btn{min-width:150px;}
.cv-note{position:relative;margin:16px 0 0;padding-left:22px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);line-height:1.65;word-break:keep-all;}
/* 안내 아이콘(i) : common.css 로 옮김 (입력 양식 도움말 .fm-help 와 같이 씀) */

/* 상세 바로가기 : 스크롤하면 헤더 아래에 따라붙음 */
.anchor-nav{
  position:sticky;top:calc(44px + var(--header-h) + 12px);z-index:30;display:flex;justify-content:center;
  margin:clamp(36px, 29.88px + 1.633vw, 56px) 0 clamp(8px, 5.55px + 0.653vw, 16px);
}
.anchor-nav::before{content:'';position:absolute;inset:-10px 0 -12px;z-index:-1;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);pointer-events:none;}   /* 따라붙을 때 헤더 아래 ~ 메뉴 아래를 흰 띠로 가림 : 바로가기로 이동하면 앞 내용이 안 보임 (화면 폭 가득, 가로 스크롤 안 생김 — 사용자 지시 2026-11-09) */
.anchor-nav ul{display:flex;gap:4px;margin:0;padding:6px;list-style:none;border-radius:999px;background:#fff;border:1px solid #e8eef7;box-shadow:0 14px 32px -18px rgba(5,40,100,.3);}
.anchor-nav a{
  display:flex;align-items:center;min-height:clamp(40px, 38.78px + 0.327vw, 44px);padding:0 clamp(14px, 10.94px + 0.816vw, 24px);border-radius:999px;
  font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:600;color:var(--ink);white-space:nowrap;transition:background .2s,color .2s;
}
.anchor-nav a:hover{background:var(--primary-light);color:var(--primary);}
.anchor-nav a[aria-current]{background:var(--primary);color:#fff;font-weight:700;}
.anchor-nav a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.cont-sec[id]{scroll-margin-top:calc(44px + var(--header-h) + 24px);}   /* 주소 #id 로 바로 오는 구역 (이용안내 #rvRule) : 헤더에 가리지 않게 */
.cv-sec{padding-top:clamp(36px, 29.88px + 1.633vw, 56px);scroll-margin-top:calc(68px - clamp(36px, 29.88px + 1.633vw, 56px));}   /* 바로가기로 이동하면 제목이 따라붙는 메뉴 바로 아래(약 14px)에 옴 : html scroll-padding 140 + 이 값 = 메뉴 아래 끝 194 + 14 - 위 여백 (11-09 24 → 14, 앞 칸이 더 확실히 가려지게) (예전엔 둘이 더해져 앞 내용이 200px 가까이 보였음, 사용자 지시 2026-11-09) */
.cv-sec .cont-title{margin-bottom:clamp(14px, 11.55px + 0.653vw, 22px);font-size:clamp(20px, 18.16px + 0.49vw, 26px);}
.cv-sec .fm-head{margin-bottom:clamp(14px, 11.55px + 0.653vw, 22px);}   /* 상세 안 신청서 : 제목 + 필수 안내 줄 (제목 아래 여백과 같게) */
.cv-sec .fm-head .cont-title{margin-bottom:0;}
/* 교육 소개 : 연한 파랑 박스 + 흰 큰 따옴표 + 안쪽 회색 점선 + 오른쪽 차트 아이콘 그림 (관리자 에디터 내용이 .ci-text 안에 그대로 들어옴) */
.cv-intro{
  position:relative;display:flex;align-items:center;gap:clamp(24px, 19.1px + 1.306vw, 40px);min-height:220px;
  padding:clamp(34px, 30.94px + 0.816vw, 44px) clamp(30px, 23.88px + 1.633vw, 50px) clamp(34px, 30.94px + 0.816vw, 44px) clamp(112px, 104.04px + 2.122vw, 138px);   /* 왼쪽 = 따옴표 자리 + 여유 (글 시작 위치, 118 → 138px) */
  border-radius:28px;background:rgba(232, 232, 232, 0.15);   /* 아주 연한 회색 */
}
.cv-intro::before{content:'';position:absolute;inset:12px;border:2px dashed #c3cddb;border-radius:20px;pointer-events:none;}   /* 안쪽 회색 점선 (장식) */
.cv-intro::after{   /* 큰 따옴표 (장식, 읽지 않음) */
  content:"\201C";content:"\201C" / "";position:absolute;left:clamp(30px, 26.94px + 0.816vw, 40px);top:clamp(26px, 23.55px + 0.653vw, 34px);
  font:700 clamp(96px, 88.65px + 1.959vw, 120px)/1 Georgia,"Times New Roman",serif;color:#e6f0fc;pointer-events:none;   /* 따옴표 : 하늘색 */
}
.ci-text{position:relative;z-index:1;flex:1 1 auto;min-width:0;max-width:900px;}   /* 글 줄 길이 최대 900px (760 → 900) */
.ci-text p,.ci-text li{margin:0;color:var(--ink);font-size:clamp(17px, 15.78px + 0.327vw, 21px);font-weight:500;line-height:1.8;word-break:keep-all;}   /* 글자 확대 (15.5~18.5px → 17~21px) + 굵기 500 */
.ci-text > * + *{margin-top:12px;}
.ci-text ul,.ci-text ol{margin-bottom:0;padding-left:1.3em;}
.ci-text img{max-width:100%;height:auto;border-radius:12px;}
.ci-text strong,.ci-text b{color:var(--primary);}
.ci-art{position:relative;z-index:1;flex:none;width:80px;margin:0 clamp(10px, -10px + 2vw, 30px) 0 auto;}   /* images/main/quick_02.svg (80px) */
.ci-art img{width:100%;height:auto;}
.tbl-session .c-no{width:10%;}
.tbl-session .c-date{width:17%;}
.tbl-session .c-topic{width:24%;}
.tbl-session .no{color:var(--primary);font-weight:800;}   /* 회차 번호 : 배경 없이 파란 굵은 글자 */
.tbl-session tbody th{font-weight:700;color:var(--ink);}

.teacher-card{display:flex;align-items:center;gap:clamp(18px, 12.49px + 1.469vw, 36px);padding:clamp(20px, 15.1px + 1.306vw, 36px);border-radius:24px;background:#f5f9fe;border:1px solid #e3ecf7;}
.tc-avatar{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(72px, 63.43px + 2.286vw, 100px);aspect-ratio:1;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 0 0 6px #e3eefb;}   /* 사람 아이콘 (장식) */
.tc-avatar img{width:52%;height:52%;}
.tc-info{flex:1 1 auto;min-width:0;margin:0;}
.tc-info > div{display:flex;gap:16px;padding:8px 0;}
.tc-info > div + div{border-top:1px dashed #d3e0f0;}
.tc-info dt{flex:none;width:80px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:700;color:var(--primary);}
.tc-info dd{margin:0;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);color:var(--ink);word-break:keep-all;}

.notice-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:clamp(20px, 15.1px + 1.306vw, 32px);list-style:none;border-radius:24px;border:1px solid #e3ecf7;}
.notice-list li{position:relative;padding-left:26px;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);color:var(--gray-700);line-height:1.65;word-break:keep-all;}
.notice-list li::before{   /* 체크 아이콘 (장식) */
  content:'';position:absolute;left:0;top:.25em;width:18px;height:18px;border-radius:50%;
  background:var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' stroke='%23053ea5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.cv-bottom-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:clamp(36px, 29.88px + 1.633vw, 56px);}
.cv-bottom-btns .btn{min-width:150px;}


@media (max-width:1000px){   /* 태블릿부터 : 포스터 위, 정보 아래 */
  .cv-top{flex-direction:column;}
  .cv-poster{flex:none;width:100%;max-width:480px;margin:0 auto;aspect-ratio:3/4;}   /* 세로 배치 : 칸 비율 고정 (교육 포스터 3:4) — 어떤 크기 이미지를 올려도 비율이 깨지지 않고(object-fit:cover) 칸 크기도 일정 (사용자 지시) */
  .cv-poster.fv-photo{aspect-ratio:4/3;}   /* 시설 · 장비 사진 4:3 */
  .anchor-nav{top:calc(var(--header-h) + 10px);}
  .cv-sec{scroll-margin-top:calc(64px - clamp(36px, 29.88px + 1.633vw, 56px));}   /* 태블릿 · 모바일 : scroll-padding 92 + 이 값 = 메뉴 아래 끝 약 142 + 14 - 위 여백 */
  .cont-sec[id]{scroll-margin-top:calc(var(--header-h) + 24px);}
}
@media (max-width:768px){
  .tbl-session{min-width:620px;}
}
@media (max-width:640px){
  .cv-info dt{width:calc(3.75em + 40px);padding-left:20px;padding-right:20px;}   /* 모바일 : 양쪽 여백 20px */
  .cv-info dd{padding-left:12px;padding-right:12px;}
  .cv-btns .btn,.cv-bottom-btns .btn{flex:1 1 0%;min-width:0;}
  .anchor-nav ul{width:100%;justify-content:space-between;}
  .anchor-nav li{flex:1 1 auto;}
  .anchor-nav a{justify-content:center;padding:0 8px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);}
  .teacher-card{flex-direction:column;align-items:flex-start;}
  .cv-intro{min-height:0;padding:74px 26px 30px;}   /* 모바일 : 따옴표 위, 글 아래 */
  .cv-intro::after{left:26px;top:20px;font-size:clamp(84px, 77.57px + 1.714vw, 105px);}
  .tc-info dt{width:68px;}
}

/* ===================== 시설·장비 예약 > 이용안내 (contents/reserve/guide.html) =====================
   - 예약 종류(시설 · 장비 카드) + 예약 절차 5단계 + 이용 대상 · 시간 + 이용 규정 + 취소 · 변경(공통 안내 박스) */
/* 예약 종류 : 사진(메인 장비·시설 예약 카드와 같은 모양) + 설명 + 분야 태그 + 버튼, 카드 어디를 눌러도 버튼 링크로 이동 */
.rv-types{display:flex;gap:clamp(16px, 11.1px + 1.306vw, 32px);margin:0;padding:0;list-style:none;}
.rv-type{
  position:relative;flex:1 1 0%;min-width:0;display:flex;align-items:stretch;border:1px solid #e3ecf7;border-radius:24px;background:#fff;
  transition:border-color .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.rv-type:hover{border-color:#b3cae9;box-shadow:0 26px 46px -30px rgba(5,40,100,.45);transform:translateY(-4px);}
.rt-thumb{flex:none;width:44%;padding:12px;}
.rt-thumb-in{position:relative;height:100%;min-height:240px;overflow:hidden;border-radius:16px;}
.rt-thumb-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);}
.rv-type:hover .rt-thumb-in img{transform:scale(1.04);}   /* 사진 제자리 확대 */
.rt-badge{position:absolute;left:0;top:0;z-index:2;padding:clamp(9px, 8.39px + 0.163vw, 11px) clamp(18px, 16.16px + 0.49vw, 24px);border-radius:16px 0 16px 0;background:var(--primary);color:#fff;font-size:clamp(13px, 12.39px + 0.163vw, 15px);font-weight:800;line-height:1.2;}   /* 메인 시설(파랑) · 장비(빨강) 배지와 같음 */
.rt-badge.is-eq{background:var(--red);}
.rt-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px, 18.94px + 0.816vw, 32px) clamp(22px, 17.1px + 1.306vw, 38px) clamp(22px, 18.94px + 0.816vw, 32px) clamp(10px, 7.55px + 0.653vw, 18px);}
.rt-title{margin:0 0 10px;font-family:var(--font-title);font-weight:400;font-size:clamp(22px, 19.55px + 0.653vw, 30px);color:var(--ink);}
.rt-desc{margin:0 0 16px;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);line-height:1.65;color:var(--gray-700);word-break:keep-all;}
.rt-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:0;list-style:none;}
.rt-kinds li{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#f2f7fd;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:600;color:var(--gray-700);}
.rt-link{margin-top:auto;}
.rt-link::before{content:'';position:absolute;inset:0;z-index:3;border-radius:24px;}   /* 카드 전체를 누르는 영역 (버튼 링크 하나) */

/* 예약 절차 : 연한 파랑 판 위 5단계, 아이콘 사이 점선 + 화살표 (장식) / 마지막 단계(이용)는 파란 원 */
.rv-steps{
  display:flex;margin:0;padding:clamp(30px, 24.49px + 1.469vw, 48px) clamp(10px, 3.88px + 1.633vw, 26px);list-style:none;
  border:1px solid #e3ecf7;border-radius:28px;background:#f5f9fe;
}
.rv-step{position:relative;flex:1 1 0%;min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 clamp(6px, 3.55px + 0.653vw, 14px);text-align:center;}
.rv-step + .rv-step::before{   /* 앞 단계 아이콘 → 이 단계 아이콘 : 점선 */
  content:'';position:absolute;top:calc(clamp(64px, 61.55px + 0.653vw, 72px) / 2 - 1px);right:calc(50% + clamp(64px, 61.55px + 0.653vw, 72px) / 2 + 12px);width:calc(100% - clamp(64px, 61.55px + 0.653vw, 72px) - 24px);border-top:2px dashed #aac3e4;
}
.rv-step + .rv-step::after{   /* 점선 끝 화살표 */
  content:'';position:absolute;top:calc(clamp(64px, 61.55px + 0.653vw, 72px) / 2 - 4px);right:calc(50% + clamp(64px, 61.55px + 0.653vw, 72px) / 2 + 12px);width:8px;height:8px;border-top:2px solid #aac3e4;border-right:2px solid #aac3e4;transform:rotate(45deg);
}
.rs-ic{
  position:relative;z-index:1;flex:none;display:flex;align-items:center;justify-content:center;width:clamp(64px, 61.55px + 0.653vw, 72px);aspect-ratio:1;margin-bottom:18px;
  border-radius:50%;background:#fff;box-shadow:0 14px 28px -16px rgba(5,40,100,.45);
}
.rs-ic img{width:44%;height:auto;}
.rv-step:last-child .rs-ic{background:var(--primary);box-shadow:0 0 0 6px #dce9f9,0 14px 28px -12px rgba(5,62,165,.6);}
.rv-step:last-child .rs-ic img{filter:brightness(0) invert(1);}   /* 아이콘 흰색 */
.rs-body{display:flex;flex-direction:column;align-items:center;min-width:0;}
.rs-no{margin-bottom:6px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;letter-spacing:1px;color:var(--primary);}
.rs-tit{margin-bottom:8px;font-size:clamp(16px, 15.39px + 0.163vw, 18px);font-weight:800;color:var(--ink);word-break:keep-all;}
.rs-txt{font-size:clamp(13px, 12.69px + 0.082vw, 14px);line-height:1.6;color:var(--gray-700);word-break:keep-all;}

/* 이용 대상 · 시간 : 아이콘 + 항목 이름 + 내용 카드 (한 줄 3개) */
.rv-info{--cols:3;--g:clamp(12px, 9.55px + 0.653vw, 20px);display:flex;flex-wrap:wrap;gap:var(--g);margin:0;}
.rv-info > div{
  position:relative;flex:0 0 calc((100% - var(--g) * (var(--cols) - 1)) / var(--cols));min-width:0;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(104px, 99.1px + 1.306vw, 120px);padding:18px clamp(18px, 15.55px + 0.653vw, 26px) 18px calc(clamp(18px, 15.55px + 0.653vw, 26px) + 52px + 18px);
  border:1px solid #e3ecf7;border-radius:20px;background:#fff;
}
.rv-info dt{margin-bottom:4px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--gray-700);}
.ri-ic{position:absolute;left:clamp(18px, 15.55px + 0.653vw, 26px);top:50%;width:52px;height:52px;padding:13px;border-radius:16px;background:var(--primary-light);transform:translateY(-50%);}
.rv-info dd{margin:0;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:700;line-height:1.5;color:var(--ink);word-break:keep-all;}
.rv-info dd a{color:var(--primary);font-weight:800;white-space:nowrap;}
.rv-info dd a:hover{text-decoration:underline;text-underline-offset:3px;}
.rv-info dd a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}
.ri-sub{font-size:.88em;font-weight:500;color:var(--gray-700);}

/* 이용 규정 : 번호(01 ~ CSS 자동) + 규정, 줄 사이 점선 */
.rv-rules{margin:0;padding:clamp(6px, 3.55px + 0.653vw, 14px) clamp(20px, 13.88px + 1.633vw, 40px);list-style:none;counter-reset:rule;border:1px solid #e3ecf7;border-radius:24px;background:#fff;}
.rv-rules li{counter-increment:rule;display:flex;align-items:center;gap:16px;padding:clamp(14px, 12.78px + 0.327vw, 18px) 0;font-size:clamp(15px, 14.39px + 0.163vw, 17px);line-height:1.65;color:var(--ink);word-break:keep-all;}
.rv-rules li + li{border-top:1px dashed #d6e2f1;}
.rv-rules li::before{content:counter(rule, decimal-leading-zero);flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:var(--primary-light);font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:var(--primary);}
.rr-txt{flex:1 1 auto;min-width:0;}   /* 글 묶음 (강조 글자 사이가 벌어지지 않게) */
.rv-rules strong{color:var(--primary);font-weight:800;}

/* 취소 · 변경 : 공통 안내 박스(.guide-box) + 점 목록 */
.gb-ic .gb-rv{width:22px;height:22px;margin:0;}   /* 안내 아이콘 : images/contents/rv_cancel_icon.svg */
.rv-cancel{margin-bottom:0;}
.rv-cancel ul{margin:0;padding:0;list-style:none;}
.rv-cancel li{position:relative;padding-left:14px;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);line-height:1.7;color:var(--gray-700);word-break:keep-all;}
.rv-cancel li + li{margin-top:4px;}
.rv-cancel li::before{content:'';position:absolute;left:0;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--primary);}

@media (max-width:1150px){
  .rv-types{flex-direction:column;}
  .rv-info{--cols:2;}
}
@media (max-width:1000px){   /* 예약 절차 : 세로, 아이콘 아래로 점선 */
  .rv-steps{flex-direction:column;gap:26px;padding:30px clamp(20px, 13.88px + 1.633vw, 40px);}
  .rv-step{flex-direction:row;align-items:flex-start;gap:18px;padding:0;text-align:left;}
  .rv-step + .rv-step::before,.rv-step + .rv-step::after{content:none;}
  .rv-step:not(:last-child)::before{content:'';position:absolute;left:31px;right:auto;top:74px;bottom:-18px;width:0;border-top:0;border-left:2px dashed #aac3e4;}   /* 64px 아이콘 가운데 아래로 */
  .rs-ic{width:64px;margin:0;}
  .rs-body{align-items:flex-start;padding-top:4px;}
}
@media (max-width:640px){
  .rv-type{flex-direction:column;}
  .rt-thumb{width:100%;padding:10px 10px 0;}
  .rt-thumb-in{height:auto;min-height:0;aspect-ratio:16/10;}
  .rt-body{padding:20px 22px 24px;}
  .rt-link{align-self:stretch;}
  .rv-info{--cols:1;}
  .rv-info > div{min-height:0;}
  .rv-rules li{align-items:flex-start;gap:12px;}
  .rv-rules li::before{width:32px;height:32px;border-radius:10px;}
  .rv-cancel{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .rv-type,.rt-thumb-in img{transition:none;}
  .rv-type:hover{transform:none;}
  .rv-type:hover .rt-thumb-in img{transform:none;}
}

/* ===================== 시설·장비 예약 > 시설 예약 (contents/reserve/facility.html) =====================
   - 안내 박스(공통) + 조건 찾기(분야 · 장소 · 시설명, 교육신청과 같음) + 목록 머리 + 시설 카드 + 페이지 번호
   - 시설 카드 = 교육 카드(.course-card) 재사용 : 사진 4:3 · 분야 배지 파랑 · 설명 두 줄 · 인원 / 시간 / 위치 · 예약 단위 + 상세 보기 */
.fac-list .cc-thumb{aspect-ratio:4/3;}
.fl-kind{background:var(--primary);}
.fl-desc{   /* 설명 : 두 줄까지, 넘치면 끝에 … (카드 높이 맞춤) */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(1.6em * 2);
  margin:-4px 0 16px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);line-height:1.6;color:var(--gray-700);word-break:keep-all;
}
.fl-meta dt{min-width:calc(20px + 4.4em);}   /* "최대 인원" 다섯 글자 폭 → 세 줄 내용이 같은 자리에서 시작 */
.fl-meta .cm-cap dt::before{background-image:url("../images/contents/fac_user_icon.svg");}
.fl-meta .cm-time dt::before{background-image:url("../images/contents/fac_time_icon.svg");}
.fl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);}
.fl-unit{color:var(--gray-700);}
.fl-unit b{color:var(--ink);font-weight:800;}
.fl-go{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--primary);}
.fl-go::after{content:'';flex:none;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);}   /* 오른쪽 화살표 (장식) */
.course-card:hover .fl-go::after{transform:translateX(3px) rotate(45deg);}
@media (prefers-reduced-motion:reduce){ .fl-go::after{transition:none;} .course-card:hover .fl-go::after{transform:rotate(45deg);} }

/* ===================== 시설·장비 예약 > 장비 예약 (contents/reserve/equipment.html) =====================
   - 안내 박스(공통) + 조건 찾기(분야 버튼 · 장비그룹 선택 · 장비명) + 목록 머리 + 장비 카드 + 페이지 번호
   - 장비 카드 = 시설 카드(.fac-list) 그대로 : 분야 배지만 빨강(메인 장비 배지와 같음) · 장비그룹 / 제조사 / 보유 / 위치 */
.fl-kind.is-eq{background:var(--red);}   /* 흰 글자 대비 5.2:1 */
.fl-meta .cm-group dt::before{background-image:url("../images/contents/eq_group_icon.svg");}
.fl-meta .cm-maker dt::before{background-image:url("../images/contents/eq_maker_icon.svg");}
.fl-meta .cm-qty dt::before{background-image:url("../images/contents/eq_qty_icon.svg");}

/* ===================== 시설·장비 예약 > 시설 예약 > 상세 (contents/reserve/facility_view.html) =====================
   - 교육신청 상세 틀 재사용 : 요약(.cv-top · .cv-info) · 바로가기(.anchor-nav) · 설명(.cv-intro) · 유의사항(.notice-list)
   - 일정 조회 : 왼쪽 달력(날짜 버튼 aria-pressed) + 오른쪽 그날 시간별 예약 현황 · 신청 버튼 (js/content.js 시설 · 장비 일정 달력) */
.cv-poster.fv-photo img{object-position:center;}   /* 사진은 가운데 기준 (포스터는 위 기준) */
.cv-poster.fv-photo{background:var(--sky) url("../images/common/no_image.png?v=26102205") center/cover no-repeat;}   /* 시설 · 장비 상세 : 사진이 없으면(img 를 빼고 출력 · 못 불러옴) 노 이미지 바탕이 보임 */
.fv-tag{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;background:var(--primary);font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;color:#fff;}
.fv-tag.is-kind{background:var(--primary-light);color:var(--primary);}
.fv-tag.is-eq{background:var(--red);}   /* 장비 : 빨강 (메인 장비 배지와 같음, 흰 글자 대비 5.2:1) */
.fv-tag.is-line{border:1px solid #cfd8e6;background:#fff;color:var(--gray-700);}   /* 장비그룹 : 테두리만 */

.fv-sched{display:flex;align-items:stretch;gap:clamp(16px, 11.1px + 1.306vw, 32px);}
/* 달력 */
.cal-box{flex:0 0 52%;min-width:0;padding:clamp(16px, 10.49px + 1.469vw, 34px);border:1px solid #e3ecf7;border-radius:24px;background:#fff;}
.cal-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:clamp(12px, 9.55px + 0.653vw, 20px);}   /* [<] 연월 [>] 가운데 + [오늘] 오른쪽 끝 */
.cal-month{min-width:6.4em;margin:0;text-align:center;font-family:var(--font-title);font-size:clamp(22px, 19.55px + 0.653vw, 30px);color:var(--ink);}
.cal-nav{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #dfe6f0;border-radius:50%;background:#fff;transition:background .2s,border-color .2s;}
.cal-nav img{width:18px;height:18px;transition:filter .2s;}
.cal-nav:hover:not(:disabled){background:var(--primary);border-color:var(--primary);}
.cal-nav:hover:not(:disabled) img{filter:brightness(0) invert(1);}   /* 아이콘 흰색 */
.cal-nav:disabled{opacity:.35;cursor:not-allowed;}
.cal-nav:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.cal-ctrl{display:flex;align-items:center;gap:clamp(8px, 5.55px + 0.653vw, 16px);}
.cal-today{position:absolute;right:0;top:50%;transform:translateY(-50%);height:40px;padding:0 16px;border:1px solid var(--primary-light);border-radius:999px;background:var(--primary-light);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--primary);transition:background .2s,border-color .2s,color .2s;}
.cal-today:hover{border-color:var(--primary);background:var(--primary);color:#fff;}
.cal-today:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.cal-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid #e3e9f1;border-radius:16px;overflow:hidden;}   /* 둥근 바깥 테두리 + 연한 칸 선 */
.cal-table th,.cal-table td{border-right:1px solid #edf1f6;border-bottom:1px solid #edf1f6;}
.cal-table tr > :last-child{border-right:0;}
.cal-table tbody tr:last-child td{border-bottom:0;}
.cal-table th{padding:12px 0;background:#f7f9fc;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:700;letter-spacing:.5px;color:var(--gray-700);}
.cal-table th.is-sun{color:var(--red);}
.cal-table th.is-sat{color:var(--primary);}
.cal-table td{padding:5px;}   /* 칸 안 둥근 타일 */
.cal-day{   /* 날짜 타일 : 가능 연파랑 · 일부 연주황 · 마감 회색 (목업 색) / 휴관 · 지난 날은 배경 없음 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;max-width:88px;aspect-ratio:1;min-height:44px;margin:0 auto;   /* 정사각형 (칸이 넓어도 88px 까지, 좁은 화면은 글자가 들어가게 최소 높이) */
  padding:0;border:0;border-radius:12px;background:transparent;transition:background .2s,box-shadow .2s,transform .2s;
}
.cd-num{font-size:clamp(14.5px, 13.89px + 0.163vw, 16.5px);font-weight:700;line-height:1.2;color:var(--ink);}
.cd-st{font-size:12px;font-weight:800;line-height:1.2;color:var(--primary);white-space:nowrap;}   /* 상태 글자 한 줄 (좁은 칸에서 한 글자씩 내려가지 않게) */
.cal-day.is-ok{background:#eef4ff;}   /* 가능 : 연파랑 (목업 색) */
.cal-day.is-part{background:#fff4de;}   /* 일부 가능 : 연주황 (목업 색) */
.cal-day.is-part .cd-st{color:#c2410c;}   /* 연주황 바탕 대비 4.6:1 */
.cal-day:not(:disabled):hover{box-shadow:0 0 0 2px var(--primary) inset;}
.cal-day:disabled{cursor:not-allowed;}
.cal-day:disabled .cd-num,.cal-day:disabled .cd-st{color:var(--gray-500);}
.cal-day.is-full{background:#f3f4f6;}   /* 마감 : 회색 배경 / 휴관(주말 · 휴관일)은 흰 배경 + 회색 글자 */
.cal-day.is-closed .cd-num,.cal-day.is-closed .cd-st,.cal-day.is-past .cd-num{color:var(--gray-500);font-weight:500;}   /* 휴관 · 지난 날짜 : 흰 배경 + 회색 글자 (예전 #a3abb9 대비 2.3:1 → 5.1:1, 인증 심사 대비 2026-11-09 — 누를 수 없는 버튼이라 예외지만 기준 맞춤), 스크린리더는 "휴관"으로 읽음) */
.cal-day[aria-pressed="true"]{background:var(--primary);transform:translateY(-2px);}   /* 선택 : 파란 타일이 살짝 위로 */
.cal-day[aria-pressed="true"] .cd-num,.cal-day[aria-pressed="true"] .cd-st{color:#fff;}
.cal-day.is-today .cd-num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;}   /* 오늘 : 숫자에 진한 원 */
.cal-day.is-today[aria-pressed="true"] .cd-num{background:#fff;color:var(--primary);}
.cal-day:focus-visible{outline:none;box-shadow:0 0 0 2px var(--primary) inset,0 0 0 4px #fff inset;}   /* 초점 : 파란 선 + 안쪽 흰 선 (선택한 파란 칸에서도 보임) */
.cal-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:clamp(12px, 9.55px + 0.653vw, 20px) 0 0;padding:0;list-style:none;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-700);}
.cal-legend li{display:flex;align-items:center;gap:7px;}
.lg-sw{flex:none;width:14px;height:14px;border:1px solid transparent;border-radius:4px;}
.lg-sw.is-ok{background:#dce8ff;}
.lg-sw.is-part{background:#ffe7b8;}
.lg-sw.is-full{border-color:#dfe3e9;background:#f3f4f6;}
.lg-sw.is-closed{border-color:#dfe3e9;background:#fff;}
.lg-sw.is-sel{background:var(--primary);}
.lg-sw.is-today{border-radius:50%;background:var(--ink);}
/* 장비 사용 기간 (range) : 시작일 ~ 종료일 모두 같은 파란 타일 (위 [aria-pressed="true"] 규칙) — 2026-11-10 사용자 지시 "선택된 날짜 모두 파란색"
   (예전 사이 날짜 연파랑은 "가능" 칸과 구분이 안 됨) / 시작 · 사이 · 종료는 타일 안 글자(시작 · 선택 · 종료)로 구분, 범례는 "선택한 기간" 하나 */
/* 장비 수량 (qty · range) : 보유 대수 / 예약 / 남은 수량 3칸 */
.qty-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.qty-list li{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px;border:1px solid #d8e3f2;border-radius:14px;background:#fff;text-align:center;}
.qt-label{font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:700;color:var(--gray-700);word-break:keep-all;}
.qt-num{font-size:clamp(22px, 20.78px + 0.327vw, 26px);font-weight:800;line-height:1.2;color:var(--ink);}
.qty-list .is-left{border-color:var(--primary);background:#f3f8fe;}
.qty-list .is-left .qt-num{color:var(--primary);}
.qty-list .is-none .qt-num{color:var(--red);}
.qty-list .is-empty{flex-basis:100%;padding:22px 16px;border-style:dashed;color:var(--gray-700);word-break:keep-all;}
/* 그날 예약 현황 */
.slot-box{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;padding:clamp(20px, 15.1px + 1.306vw, 36px);border:1px solid #e3ecf7;border-radius:24px;background:#f5f9fe;}
.sb-date{margin:0 0 4px;font-size:clamp(17px, 16.39px + 0.163vw, 19px);font-weight:800;color:var(--ink);}
.sb-date span{color:var(--primary);}
.sb-sum{margin:0 0 16px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
.sb-sum b{font-weight:800;color:var(--primary);}
.slot-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.slot-list li{flex:0 0 calc((100% - 8px) / 2);min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:15px 14px;border:1px solid #d8e3f2;border-radius:12px;background:#fff;font-size:clamp(13px, 12.69px + 0.082vw, 14px);}
.ts-time{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ts-state{font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:800;color:var(--primary);white-space:nowrap;}
.slot-list .is-booked{border-color:#e6eaf0;background:#eef1f5;}   /* 예약됨 : 회색 + 글자 "예약됨" (색 외에 글자로도 구분) */
.slot-list .is-booked .ts-time{color:var(--gray-700);text-decoration:line-through;}
.slot-list .is-booked .ts-state{color:var(--gray-700);}
.sb-note{position:relative;margin:16px 0 20px;padding-left:22px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);line-height:1.6;color:var(--gray-700);word-break:keep-all;}
.sb-apply{align-self:stretch;margin-top:auto;}
.sb-apply[hidden]{display:none;}
.slot-list .is-empty{flex-basis:100%;justify-content:center;padding:22px 16px;border-style:dashed;align-items:center;text-align:center;color:var(--gray-700);word-break:keep-all;}   /* 고를 날짜가 없는 달 */
.notice-list a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.notice-list a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}

@media (max-width:1150px){   /* 달력 위, 예약 현황 아래 */
  .fv-sched{flex-direction:column;}
  .cal-box,.slot-box{flex:none;}
  .slot-list li{flex-basis:calc((100% - 24px) / 4);}
}
@media (max-width:768px){
  .slot-list li{flex-basis:calc((100% - 8px) / 2);}
}
@media (max-width:640px){
  .cal-box{padding:14px 10px 18px;}
  .cal-nav{width:36px;height:36px;}
  .cal-head{justify-content:space-between;}   /* 모바일 : [<] 연월 [>] 왼쪽 + [오늘] 오른쪽 (겹치지 않게) */
  .cal-ctrl{gap:6px;}
  .cal-month{min-width:5.6em;font-size:clamp(19px, 18.54px + 0.122vw, 20.5px);}
  .cal-today{position:static;transform:none;height:36px;padding:0 13px;}
  .cal-table td{padding:2px;}
  .cal-day{gap:3px;min-height:38px;border-radius:8px;}
  .slot-list li{flex-direction:column;align-items:flex-start;gap:2px;padding:13px 12px;}
}
@media (max-width:450px){   /* 작은 모바일 (사용자 지시 : 360 → 450, 한 블록) */
  .diag-tiles .dt-link{gap:12px;padding:36px 16px;}   /* 자가진단 목록 : 위아래는 한 줄 목록(640↓)과 같은 36px / 좁으면 [진단 시작]은 화살표 원만 (글자는 화면에서만 숨김 — 스크린리더는 그대로 읽음) */
  .diag-tiles .dt-mark{width:48px;}
  .diag-tiles .dt-go{width:34px;height:34px;padding:0;justify-content:center;gap:0;}
  .diag-tiles .dt-go::after{margin-left:-3px;}
  .diag-tiles .dt-go-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  .policy-top .pt-ver{flex-wrap:wrap;}   /* 이전 판 : 선택 상자 한 줄 + [보기] 아래 줄 가득 */
  .policy-top .pt-ver .select,.policy-top .pt-ver .btn{flex:1 1 100%;}
  .slot-box .sb-picked .pk-chip{white-space:normal;}   /* 아주 좁으면 알약 안에서 줄바꿈 (이 블록이 기본 규칙보다 앞이라 .slot-box 붙임) */
  /* 달력 */
  .cal-table th{font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);}
  .cd-st{letter-spacing:-.5px;}   /* 좁은 칸 : 글자 사이만 좁힘 (크기는 12px 유지) */
  /* 자가진단 결과 응시 정보 표 : 좁아도 표 모양 [제목 칸 | 내용 칸] 유지 (사용자 지시 — 예전엔 위아래로 쌓음), 칸 안 좌우 여백만 줄임 */
  .dr-tbl th,.dr-tbl td{padding-left:14px;padding-right:14px;}
}
@media (max-width:600px){ .cal-day.is-today .cd-num{min-width:22px;height:22px;padding:0;} }   /* 오늘 원 30 → 22px : 481 ~ 560 에서 30px 원이 칸 위아래에 4 ~ 9px 만 남던 것 */
@media (max-width:480px){   /* 칸이 좁은 화면 : 오늘 원 22 → 18px (정원) + 칸 높이 최소 46px (400px 안팎에서 위아래 여백 약 5px) — 폰에서 원이 칸 위 끝에 닿고 320 에서는 넘치던 것 (사용자 지시 2026-11-09) */
  .cal-day{min-height:46px;}
  .cal-day.is-today .cd-num{min-width:18px;height:18px;padding:0;}
}
@media (prefers-reduced-motion:reduce){ .cal-day,.cal-nav,.cal-nav img,.cal-today{transition:none;} .cal-day[aria-pressed="true"]{transform:none;} }

/* ===================== 시설·장비 예약 > 사용 신청 · 신청 완료 (contents/reserve/facility_apply.html · apply_complete.html) =====================
   - 예약 순서(자가진단 단계 .dg-steps 재사용) + 신청 대상 요약 + 일정 선택(상세 달력 + 시간 칸 버튼) + 입력 양식(common.css .form-list) + 동의 + 버튼
   - 예약 순서 · 신청 대상 · 버튼 · 신청 완료는 common.css (행사 참가 신청과 같이 씀) / 여기는 시간 칸 버튼만 */
/* 시간 칸 버튼 (신청 화면) */
.slot-pick li,.slot-pick .is-booked{padding:0;border:0;background:none;}
.slot-btn{
  display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:20px 14px;border:1px solid #d8e3f2;border-radius:12px;background:#fff;
  font-size:clamp(13px, 12.69px + 0.082vw, 14px);text-align:left;transition:background .2s,border-color .2s;
}
.slot-btn:not(:disabled):hover{border-color:var(--primary);}
.slot-btn[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);}
.slot-btn[aria-pressed="true"] .ts-time,.slot-btn[aria-pressed="true"] .ts-state{color:#fff;}
.slot-btn:disabled{border-color:#e6eaf0;background:#eef1f5;cursor:not-allowed;}
.slot-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.sb-picked{margin:14px 0 0;padding:20px 14px;border:1px dashed #b9cbe6;border-radius:12px;background:#fff;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);word-break:keep-all;}
.sb-picked b{font-weight:800;color:var(--primary);}
/* 시간을 고른 뒤 (.is-on, js/content.js) : 흰 바탕 + 파란 테두리 + 시간 크게 (3안 중 A, 사용자 선택 — 바탕 흰색, 시간 부분은 B안 알약) — 시계 아이콘은 장식이라 배경 이미지 */
.sb-picked.is-on{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:2px solid var(--primary);border-radius:14px;background:#fff;}
.sb-picked .pk-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;}   /* 선택 시간 + 날짜 한 줄 (사용자 지시) */
.sb-picked .pk-label{display:flex;align-items:center;gap:6px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:var(--primary);}
.sb-picked .pk-label::before{content:'';flex:none;width:18px;height:18px;background:url("../images/contents/rv_time_icon.svg") center/contain no-repeat;}
.sb-picked .pk-label.is-date::before{background-image:url("../images/contents/rv_date_icon.svg");}   /* 장비 사용 기간 : 달력 아이콘 */
.sb-picked .pk-date{font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);}
.sb-picked .pk-times{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;}   /* 시간 : 고른 칸마다 알약 (3안 중 B 모양) — 알약 폭 고정, 한 줄 4개 (8개면 2줄, 사용자 지시) */
.sb-picked .pk-chip{flex:0 0 calc((100% - 24px) / 4);padding:8px 4px;border-radius:999px;background:#eef4ff;box-shadow:inset 0 0 0 1.5px var(--primary);text-align:center;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:800;line-height:1.3;color:var(--primary);white-space:nowrap;}
.sb-picked .pk-sum{font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);}
.sb-picked .pk-total{font-size:clamp(15px, 14.69px + 0.082vw, 16px);font-weight:800;color:var(--primary);}   /* 총 시간 강조 (사용자 지시) */
@media (min-width:1151px) and (max-width:1359px){ .sb-picked .pk-chip{padding:8px 0;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);letter-spacing:-0.5px;} }   /* 달력 옆 칸이 좁은 PC : 한 줄 4개 유지되게 글자 · 여백만 줄임 */
.slot-box .fm-err{margin-top:10px;}
.textarea.ap-when{min-height:44px;padding:calc((42px - 1.5em) / 2) 12px;line-height:1.5;resize:none;overflow:hidden;}   /* 이용 일시 · 사용 기간 : 한 줄부터 시작해 값이 길면 줄이 늘어남 (js/content.js fitWhen) / 위아래 여백 = (높이 44 - 테두리 2 - 줄 높이) ÷ 2 → 한 줄일 때 글자 세로 가운데 (글자 크기가 바뀌어도 맞음) */

@media (max-width:640px){
  .slot-pick li{padding:0;}
  .slot-btn{flex-direction:column;align-items:flex-start;gap:2px;padding:13px 12px;}
}
@media (prefers-reduced-motion:reduce){ .slot-btn{transition:none;} }

/* ===================== 통합검색 (contents/search.html) ===================== */
/* 검색창 카드 : 서브 비주얼 아래에 걸침 */
.srch-box{
  position:relative;z-index:5;width:calc(100% - clamp(60px, 38.57px + 5.714vw, 120px) * 2);max-width:calc(var(--container) - clamp(60px, 38.57px + 5.714vw, 120px) * 2);margin:calc(clamp(40px, 33.88px + 1.633vw, 60px) * -1) auto 0;   /* 가로 = 하위 메뉴 탭(.lnb ul) 카드와 같은 폭 */
  padding:clamp(18px, 13.1px + 1.306vw, 34px) clamp(18px, 11.88px + 1.633vw, 38px);
  background:#fff;border:1px solid #e6edf7;border-radius:28px;box-shadow:0 30px 60px -34px rgba(5,40,100,.35);
}
.srch-form{
  display:flex;align-items:center;gap:12px;height:clamp(56px, 52.33px + 0.98vw, 68px);padding:0 7px 0 clamp(16px, 13.55px + 0.653vw, 24px);
  border:2px solid var(--primary);border-radius:999px;background:#fff;transition:box-shadow .2s;
}
.srch-form:focus-within{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary);}   /* 초점 표시 : 흰 틈 + 파란 선 (연한 그림자는 잘 안 보여 웹접근성 초점 표시로 약함) */
.srch-ic{flex:none;width:24px;height:24px;}
.srch-form input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:clamp(16px, 14.78px + 0.327vw, 20px);font-weight:600;color:var(--ink);}
.srch-form input:focus{outline:none;}   /* 초점 표시는 .srch-form:focus-within 로 대신함 */
.srch-form input::placeholder{color:var(--gray-500);font-weight:400;}
.srch-form input::-webkit-search-cancel-button{cursor:pointer;}
.srch-submit{
  flex:none;height:calc(100% - 14px);padding:0 clamp(18px, 14.33px + 0.98vw, 30px);border-radius:999px;background:var(--primary);color:#fff;
  font-size:clamp(15px, 14.69px + 0.082vw, 16px);font-weight:700;transition:background .2s;
}
.srch-submit:hover{background:var(--primary-dark);}
.srch-submit:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.srch-msg{margin:8px 0 0 24px;color:var(--red);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600;}
.srch-msg:empty{margin:0;}
.srch-keywords{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 40px;width:fit-content;max-width:100%;margin:clamp(14px, 11.55px + 0.653vw, 22px) auto 0;padding:0 6px;}   /* 인기 · 연관 검색어 : 한 줄이면 묶음째 가운데 (2줄은 아래 1400px 규칙) */
.srch-keywords dl{display:flex;align-items:flex-start;gap:14px;margin:0;}   /* 검색어 알약이 2줄이 되어도 이름(인기 · 연관 검색어)은 위 왼쪽 (사용자 지시) */
.srch-keywords dt{flex:none;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;line-height:32px;color:var(--ink);}   /* 줄 높이 = 알약 높이 → 첫 줄 알약과 가운데가 맞음 */
.srch-keywords dd{margin:0;}
.srch-keywords ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.srch-keywords a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:#f2f7fd;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);transition:background .2s,color .2s;}
.srch-keywords a:hover{background:var(--primary-light);color:var(--primary);}
.srch-keywords a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
@media (max-width:1400px){
  .srch-keywords{flex-direction:column;align-items:flex-start;gap:12px;}   /* 한 줄에 안 들어가는 폭 : 2줄로 쌓고 왼쪽 정렬 (사용자 지시), 묶음은 가장 긴 줄 폭으로 가운데 */
}

/* 결과 제목 + 정렬 */
.srch-body{padding-top:clamp(48px, 35.76px + 3.265vw, 88px);}
.srch-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-bottom:clamp(18px, 14.33px + 0.98vw, 30px);}
.srch-title{margin:0;font-size:clamp(20px, 16.94px + 0.816vw, 30px);font-weight:800;color:var(--ink);line-height:1.35;word-break:keep-all;}
.srch-q{font-style:normal;color:var(--primary);}
.srch-total{margin-left:6px;font-size:.6em;font-weight:600;color:var(--gray-700);vertical-align:.12em;white-space:nowrap;}
.srch-total b{color:var(--primary);font-weight:800;}
.srch-sort{display:flex;align-items:center;margin:0;padding:0;list-style:none;}
.srch-sort li{display:flex;align-items:center;}
.srch-sort li + li::before{content:'';width:1px;height:12px;margin:0 12px;background:#cfd8e6;}
.srch-sort a{display:inline-flex;align-items:center;gap:6px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);color:var(--gray-700);transition:color .2s;}
.srch-sort a:hover{color:var(--primary);}
.srch-sort a[aria-current]{color:var(--primary);font-weight:700;}
.srch-sort a[aria-current]::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}   /* 색 외에 점으로도 선택 표시 */
.srch-sort a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}

/* 필터 + 결과 */
.srch-layout{display:flex;align-items:flex-start;gap:clamp(24px, 13.59px + 2.776vw, 58px);margin-top:clamp(24px, 19.1px + 1.306vw, 40px);}
.srch-filter{flex:none;width:300px;position:sticky;top:calc(var(--header-h) + 24px);padding:24px;border-radius:24px;background:#f5f9fe;border:1px solid #e3ecf7;}
.srch-results{flex:1 1 0%;min-width:0;}
.sf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #d9e4f2;}
.sf-title{margin:0;font-size:clamp(16.5px, 16.04px + 0.122vw, 18px);font-weight:800;color:var(--ink);}
.sf-toggle{display:none;}
.sf-form fieldset{min-width:0;margin:0;padding:18px 0;border:0;border-bottom:1px solid #d9e4f2;}
.sf-form legend{float:left;width:100%;margin:0 0 12px;padding:0;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;color:var(--ink);}
.sf-opts{clear:both;display:flex;flex-wrap:wrap;gap:10px 16px;}
.sf-opts.is-col{flex-direction:column;gap:10px;}
.sf-period{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--gray-700);}
.sf-period .input{flex:1;min-width:0;height:40px;padding:0 8px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);}
.sf-btns{display:flex;gap:8px;padding-top:20px;}
.sf-btns .btn{flex:1;min-width:0;height:46px;}

.result-group + .result-group{margin-top:clamp(40px, 32.65px + 1.959vw, 64px);}
.rg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink);}
.rg-head .cont-title{font-size:clamp(20px, 18.16px + 0.49vw, 26px);}
.rg-count{font-family:var(--font-body);font-size:.62em;font-weight:700;color:var(--primary);}
.rg-more{flex:none;display:inline-flex;align-items:center;gap:4px;padding:6px 2px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600;color:var(--gray-700);transition:color .2s;}
.rg-more:hover{color:var(--primary);}
.rg-more:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
.result-list{margin:0;padding:0;list-style:none;}
.tab-panel > .result-list{border-top:2px solid var(--ink);}
.result-item{padding:clamp(18px, 15.55px + 0.653vw, 26px) 4px;border-bottom:1px solid #e6edf6;}
.ri-path{margin:0 0 8px;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-500);}
.ri-title{margin:0 0 8px;font-size:clamp(16px, 15.08px + 0.245vw, 19px);font-weight:700;line-height:1.5;word-break:keep-all;}
.ri-title a{color:var(--ink);transition:color .2s;}
.ri-title a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:4px;}
.ri-title a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
.ri-desc{margin:0;font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--gray-700);line-height:1.7;word-break:keep-all;}
.ri-date{margin:10px 0 0;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-500);}
.srch-results mark{padding:0 2px;border-radius:4px;background:#dcebff;color:var(--primary);font-weight:700;}   /* 검색어 강조 (대비 7.8:1) */

@media (max-width:1150px){
  .srch-filter{width:260px;}
}
@media (max-width:1000px){
  .srch-box{width:calc(100% - 80px);margin-top:clamp(20px, 16.33px + 0.98vw, 32px);}   /* 태블릿부터 : 탭 카드가 없어 본문 폭에 맞춤 */
  .srch-layout{flex-direction:column;align-items:stretch;}
  .srch-filter{width:auto;}
  .srch-filter{position:static;padding:16px 20px;}
  .sf-toggle{
    display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid #cfd8e6;background:#fff;
    font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:600;color:var(--ink);
  }
  .sf-toggle::after{content:'';width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
  .sf-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg);}
  .sf-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .srch-filter:not(.is-open) .sf-head{padding-bottom:0;border-bottom:0;}
  .srch-filter:not(.is-open) .sf-form{display:none;}
}
@media (max-width:640px){
  .srch-box{width:calc(100% - 40px);border-radius:20px;}
  .sf-period .input{font-size:clamp(16px, 15.54px + 0.122vw, 17.5px);}   /* 모바일 입력 칸 16px (아이폰 자동 확대 방지) */
  .sb-picked .pk-chip{flex-basis:calc((100% - 8px) / 2);}   /* 모바일 : 선택 시간 알약 한 줄 2개 */
  .srch-form{gap:8px;padding-right:5px;}
  .srch-ic{width:20px;height:20px;}
  .srch-submit{height:calc(100% - 10px);}
  .srch-keywords{display:none;}   /* 모바일 : 인기 · 연관 검색어 숨김 */
  .srch-head{flex-direction:column;align-items:flex-start;}
}

/* ===================== 반응형 (교육과정 > 교육신청 상세) ===================== */
@media (max-width:1000px){
  .ci-art{display:none;}   /* 교육 소개 : 오른쪽 아이콘 그림 숨김 */
}
@media (prefers-reduced-motion:reduce){
  .policy-toc a,.policy-toc a::after,.pt-no{transition:none;}
}

/* ===================== 이용정책 (contents/policy/privacy · terms · email) + 장비 이용 규정 (contents/reserve/equipment_rule.html) — 문서형 =====================
   - 시행일 + 이전 판 보기(선택 상자 + [보기] — 선택만으로 화면이 바뀌지 않음) / 목차(조 바로가기) / 조문(h4.policy-h + 문단 · 번호 목록 · 표) / 부칙
   - 번호(①, 1.)는 글자로 넣고 목록은 내어쓰기 (.pl-list) — 법령 문서와 같은 모양 */
.policy-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:clamp(14px, 12.78px + 0.327vw, 18px) clamp(18px, 14.94px + 0.816vw, 28px);border:1px solid #e3ecf7;border-radius:16px;background:#f5f9fe;}
.pt-date{margin:0;font-size:clamp(14.5px, 14.19px + 0.082vw, 15.5px);color:var(--gray-700);}
.pt-date b{font-weight:800;color:var(--ink);}
.pt-ver{display:flex;align-items:center;gap:8px;}
.pt-ver .select{width:230px;}
.pt-ver .btn{height:44px;min-width:76px;}
.policy-lead{display:flex;align-items:center;gap:20px;margin:clamp(24px, 21.55px + 0.653vw, 32px) 0 0;padding:clamp(20px, 17.55px + 0.653vw, 28px) clamp(20px, 16.33px + 0.98vw, 32px);border-radius:20px;background:linear-gradient(120deg,#eaf3fd,#f6faff);font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);line-height:1.8;color:#2b3346;word-break:keep-all;}   /* 첫 안내 글 : 연파랑 카드 + 자물쇠 아이콘 (사용자 선택 B안 — 위아래 상자 사이에서 눈에 띄게) */
.pl-ic{flex:none;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 7px #d6e6fa;}
.pl-ic img{width:24px;height:24px;}
.pl-txt{min-width:0;}
.policy-lead strong{font-weight:800;color:var(--primary);}
.policy-toc{margin-top:clamp(22px, 19.55px + 0.653vw, 30px);padding:clamp(20px, 17.55px + 0.653vw, 28px) clamp(20px, 16.33px + 0.98vw, 32px) clamp(14px, 12.78px + 0.327vw, 18px);border:1px solid #dce8f7;border-radius:24px;background:linear-gradient(135deg,#f3f8fe 0%,#fff 70%);}   /* 목차 : 연파랑 그라데이션 상자 + 조 번호 알약 (사용자 지시 — 조금 더 꾸미기) */
.ptoc-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:clamp(16px, 15.69px + 0.082vw, 17px);font-weight:800;color:var(--ink);}
.ptoc-title::before{content:'';flex:none;width:15px;height:15px;background:url("../images/common/bullet.svg") center/contain no-repeat;}   /* 제목 블릿 (.cont-title 과 같은 그림) */
.policy-toc ol{display:flex;flex-wrap:wrap;gap:0 32px;margin:0;padding:0;list-style:none;}
.policy-toc li{width:calc(50% - 16px);min-width:0;border-bottom:1px dashed #d6e2f1;}
.policy-toc a{display:flex;align-items:center;gap:12px;padding:11px 4px;font-size:clamp(14.5px, 14.19px + 0.082vw, 15.5px);color:#2b3346;word-break:keep-all;transition:color .2s;}
.policy-toc a::after{content:'';flex:none;width:7px;height:7px;margin-left:auto;margin-right:4px;border-top:2px solid #9fbbe2;border-right:2px solid #9fbbe2;transform:rotate(45deg);transition:border-color .2s,transform .2s;}   /* 오른쪽 화살표 (장식) */
.pt-no{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:4.3em;height:26px;padding:0 8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #c9daf2;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);font-weight:800;color:var(--primary);transition:background .2s,color .2s,box-shadow .2s;}
.pt-txt{min-width:0;}
.policy-toc a:hover{color:var(--primary);}
.policy-toc a:hover .pt-no{background:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);color:#fff;}
.policy-toc a:hover::after{border-color:var(--primary);transform:translateX(3px) rotate(45deg);}
.policy-toc a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;}
.policy-body{--pl-ind:24px;margin-top:clamp(34px, 28.49px + 1.469vw, 52px);}   /* --pl-ind = 조 제목 블릿 + 간격 → 본문은 제목 글자와 같은 줄에서 시작 (사용자 지시 — 들여쓰기) */
.policy-h{scroll-margin-top:calc(var(--header-h) + 24px);display:flex;align-items:center;gap:9px;margin:clamp(34px, 30.33px + 0.98vw, 46px) 0 14px;font-size:clamp(17.5px, 17.04px + 0.122vw, 19px);font-weight:800;line-height:1.4;color:var(--ink);word-break:keep-all;}   /* 목차에서 이동하면 따라붙는 헤더에 가리지 않게 */
.policy-h::before{content:'';flex:none;width:.8em;height:.8em;background:url("../images/common/bullet.svg") center/contain no-repeat;}   /* 조 제목 블릿 : 사이트 공통 블릿 (.cont-title 과 같은 그림, 사용자 지시) */
.policy-body > .policy-h:first-child{margin-top:0;}
.policy-body p{margin:0 0 10px;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);line-height:1.85;color:#2b3346;word-break:keep-all;}
.policy-body > p,.policy-body > .pl-list,.policy-body > .tbl-scroll{margin-left:var(--pl-ind);}   /* 조 아래 문단 · 항(①) · 표 : 제목 글자 줄에 맞춰 들여쓰기 */
.policy-body > .pl-list.is-num{margin-left:calc(var(--pl-ind) + 1em);}   /* 호(1. 2.) 목록 : 한 단계 더 */
.pl-list{margin:0 0 12px;padding:0;list-style:none;}
.pl-list li{padding-left:1.6em;text-indent:-1.6em;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);line-height:1.85;color:#2b3346;word-break:keep-all;}
.pl-list li + li{margin-top:4px;}
.pl-list .pl-list{margin:4px 0 2px;}   /* 항(①) 안의 호(1.) : ① 다음 글자 줄에서 시작 (li 내어쓰기 안쪽) */
.pl-list .pl-list li{padding-left:1.4em;text-indent:-1.4em;font-size:clamp(14.5px, 14.19px + 0.082vw, 15.5px);color:var(--gray-700);}
.policy-body .tbl-scroll{margin:8px 0 18px;}
.policy-body .tbl{min-width:560px;}
.policy-body .tbl th,.policy-body .tbl td{word-break:keep-all;}
.pl-ext{display:inline-flex;align-items:center;gap:4px;text-indent:0;font-weight:600;color:var(--primary);text-decoration:underline;text-underline-offset:3px;word-break:break-all;}   /* 외부 누리집 링크 (새 창) — 권익침해 구제 기관 · 개인정보 포털 등 */
.pl-ext img{flex:none;width:12px;height:12px;}   /* text-indent:0 : 목록 내어쓰기(-1.6em)가 링크 안으로 이어져 앞 글자와 겹치던 것 막음 */
.pl-ext:hover{color:var(--primary-dark);}
.pl-ext:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}
.policy-end{margin-top:clamp(36px, 32.33px + 0.98vw, 48px);padding-top:20px;border-top:1px dashed #c3d3e8;}
.policy-end .pe-label{margin:0 0 6px;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:800;color:var(--ink);}
.policy-end p{margin:0;font-size:clamp(14.5px, 14.19px + 0.082vw, 15.5px);color:var(--gray-700);}
/* 이메일무단수집거부 : 안내 상자 + 관련 법령 */
.policy-email{display:flex;flex-direction:column;align-items:center;padding:clamp(36px, 28.65px + 1.959vw, 60px) clamp(20px, 10.2px + 2.612vw, 52px);border:1px solid #e3ecf7;border-radius:28px;background:linear-gradient(180deg,#f3f8fe,#fff);text-align:center;}
.pe-ic{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin-bottom:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 9px #e3eefb;}
.pe-ic img{width:40px;height:40px;}
.pe-title{margin:0 0 14px;font-family:var(--font-title);font-weight:400;font-size:clamp(23.8px, 22.51px + 0.343vw, 28px);color:var(--ink);word-break:keep-all;}
.pe-text{max-width:780px;margin:0;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);line-height:1.85;color:#2b3346;word-break:keep-all;}
.pe-text strong{color:var(--primary);}
.pe-law{margin-top:clamp(32px, 26.49px + 1.469vw, 50px);}
.pe-law .cont-title{margin-bottom:14px;}
.pe-law-item{padding:clamp(18px, 15.55px + 0.653vw, 26px) clamp(18px, 14.94px + 0.816vw, 28px);border-radius:18px;background:#f5f7fa;}
.pe-law-item + .pe-law-item{margin-top:12px;}
.pe-law-item p{margin:0;font-size:clamp(14.5px, 14.19px + 0.082vw, 15.5px);line-height:1.8;color:#2b3346;word-break:keep-all;}
.pe-law-item p + p{margin-top:6px;}
.pe-law-item .pe-law-name{margin-bottom:8px;font-size:clamp(15px, 14.69px + 0.082vw, 16px);font-weight:800;color:var(--ink);}
.pe-date{margin:16px 0 0;text-align:right;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);color:var(--gray-700);}
.policy-btns{margin-top:clamp(36px, 32.33px + 0.98vw, 48px);}
@media (max-width:750px){
  .policy-toc li{width:100%;}   /* 목차 : 750px 이하 1칸 (사용자 지시) */
  .policy-toc a{gap:10px;padding:10px 2px;}
}
@media (max-width:640px){
  .policy-top{flex-direction:column;align-items:stretch;}
  .pt-ver{min-width:0;}   /* 선택 상자 글자(16px) 폭 때문에 줄이 넘치지 않게 */
  .pt-ver .select{flex:1 1 0%;width:auto;min-width:0;}
  .policy-body{--pl-ind:22px;}
  .policy-lead{flex-direction:column;gap:14px;text-align:center;}   /* 모바일 : 아이콘 위, 글 가운데 (안내 박스와 같음) */
  .policy-h{font-size:clamp(17px, 16.54px + 0.122vw, 18.5px);}
  .pe-date{text-align:center;}
}