@charset "UTF-8";
/* 앱에서 더한 화면 요소 (퍼블리싱 목업 css/common.css·sub.css 는 고치지 않고 여기에 둔다) */

/* 로그인 실패 알림 */
.login-msg{margin-bottom:20px; padding:16px 20px; text-align:center;}

/* 메인 팝업존: 이미지를 끌면 브라우저 드래그 고스트가 생겨 보기 싫음(사용자 10/12). 시안 popup.css 는 고치지 않고 여기서 막는다 */
.main-popup__card,.main-popup__card img{-webkit-user-drag:none;user-select:none;}
.main-popup__card img{pointer-events:none;}
/* 메인 팝업 정지 · 재생(정의서 v1.1 13장 2번): 시안에 없는 버튼이라 이전 · 다음 버튼 모양(흰 원)에 교육과정 정지 · 재생 아이콘. 다 보이면 이전 · 다음은 숨김(js/popup.js) */
.main-popup__nav[hidden]{display:none;}
.main-popup__play img{width:16px;height:16px;}
.main-popup__play .i-play{display:none;}
.main-popup__play.is-paused .i-play{display:block;}
.main-popup__play.is-paused .i-pause{display:none;}
/* 메인 히어로가 1장이면 이전 · 다음 버튼을 숨김(js/script.js, #31 17-1) */
.hero-arrow[hidden]{display:none;}

/* 교육신청: 강의 포스터가 없을 때 시안 회색 틀(.cc-thumb·.cv-poster 바탕)에 글자만 둔다. 예시 포스터 그림은 다른 행사로 오해할 수 있어 쓰지 않는다 */
.cc-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gray-700);font-weight:700;}

/* 메인 교육과정 카드: 포스터 없을 때 분야 기본 그림(목록·포트폴리오와 같은 방식, index_edu.jspf). 메인은 content.css 를 안 싣어 여기서 자급자족 */
.edu-noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--c-soft,#eef1f6);color:var(--c-text,#444);}
.edu-noimg b{font-family:var(--font-title);font-size:clamp(28px, 24px + 1vw, 40px);font-weight:400;line-height:1;}
.edu-noimg em{font-style:normal;font-size:13px;font-weight:700;}
.edu-noimg.fd-ai{--c-text:#6d28d9;--c-soft:#f3eefd;}
.edu-noimg.fd-bc{--c-text:#047857;--c-soft:#e9f6f1;}
.edu-noimg.fd-data{--c-text:#c2410c;--c-soft:#fdf1ea;}
.edu-noimg.fd-iot{--c-text:#8a6700;--c-soft:#fef6db;}
.edu-noimg.fd-net{--c-text:#1d4ed8;--c-soft:#ebf1fd;}

/* 약관·정책 본문(DB HTML)의 새 창 아이콘: 공통 common.css img{display:block} 때문에 블록이 돼 줄이 깨짐.
   공통 규칙은 다른 화면이 다 쓰므로 건드리지 않고, 약관 본문(.policy-body·.ja-text) 안의 그 아이콘만 인라인 복원
   (#74 No.2 — 개인정보처리방침 /page/policy/privacy.do · 회원가입 약관 /page/member/join_agree.do 공통) */
.policy-body img[src$="new_window_icon.svg"],
.ja-text img[src$="new_window_icon.svg"]{display:inline-block;width:14px;height:14px;max-width:none;margin-left:2px;vertical-align:-1px;}

/* 약관 전문 상자(.ja-text) : 회원가입 약관 동의(join_agree) · 1:1 문의 작성(qna_write) 공용 — 긴 약관을 상자 안 스크롤로(tabindex 로 키보드 스크롤).
   정책 화면(content.css .policy-* · .pl-*)을 안 싣는 화면들이라 같은 모양을 여기(전역)에 둔다. 번호(①, 1.)는 본문 글자, 외부 링크는 글자 옆 새 창 아이콘 */
.ja-text{max-height:150px;overflow-y:auto;margin-top:14px;padding:16px 18px;border-radius:12px;background:#f5f7fa;font-size:clamp(13px, 12.69px + 0.082vw, 14px);line-height:1.75;color:var(--gray-700);word-break:keep-all;}
.ja-text p{margin:0;}
.ja-text p + p{margin-top:6px;}
.ja-text:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.ja-text .policy-h{display:flex;align-items:center;gap:7px;margin:18px 0 8px;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:800;line-height:1.4;color:var(--ink);}
.ja-text .policy-h::before{content:'';flex:none;width:.8em;height:.8em;background:url("../images/common/bullet.svg") center/contain no-repeat;}
.ja-text .policy-body > .policy-h:first-child{margin-top:0;}
.ja-text .policy-body p{margin:0 0 8px;color:#2b3346;}
.ja-text .policy-body > p,.ja-text .policy-body > .pl-list,.ja-text .policy-body > .tbl-scroll{margin-left:18px;}
.ja-text .policy-body > .pl-list.is-num{margin-left:calc(18px + 1em);}
.ja-text .pl-list{margin:0 0 10px;padding:0;list-style:none;}
.ja-text .pl-list li{padding-left:1.6em;text-indent:-1.6em;color:#2b3346;}
.ja-text .pl-list li + li{margin-top:3px;}
.ja-text .tbl-scroll{margin:6px 0 12px;}
.ja-text .tbl{min-width:560px;background:#fff;font-size:inherit;}
.ja-text .tbl th,.ja-text .tbl td{padding:8px 10px;word-break:keep-all;}
.ja-text .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;}
.ja-text .pl-ext img{flex:none;width:12px;height:12px;}
.ja-text .pl-ext:hover{color:var(--primary-dark);}
.ja-text .pl-ext:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px;}
.ja-text .policy-end{margin-top:16px;padding-top:12px;border-top:1px dashed #c3d3e8;}
.ja-text .policy-end p{margin:0;}
.ja-text .policy-end .pe-label{margin-bottom:4px;font-weight:800;color:var(--ink);}
/* 1:1 문의 동의 '내용 보기' : 흰 상자(.ag-dl) 안에 약관 스크롤 상자(.ja-text)를 넣을 때, .ag-dl > div{display:flex;padding:4px 0} 이 .ja-text 를 깨지 않게 되돌린다 */
.ag-dl > .ja-text{display:block;gap:0;margin:0;padding:16px 18px;}

/* 통합검색: 레이아웃이 본문을 .sub-body > .sub-container 로 감싸므로, 시안처럼 검색창 카드를 서브 비주얼에 걸치고 결과 위 여백을 .srch-body 값으로 */
.sub-body:has(> .sub-container > .srch-box){padding-top:0;}
.sub-container > .srch-box{width:auto;max-width:none;margin:calc(clamp(40px, 33.88px + 1.633vw, 60px) * -1) calc(clamp(60px, 38.57px + 5.714vw, 120px) - 40px) 0;}
.srch-main{padding-top:clamp(48px, 35.76px + 3.265vw, 88px);}
@media (max-width:1000px){
  .sub-container > .srch-box{margin:clamp(20px, 16.33px + 0.98vw, 32px) 0 0;}
}
.srch-head[hidden],.srch-keywords dl[hidden],.srch-filter fieldset[hidden],.srch-ac[hidden]{display:none;}
/* 통합검색 자동완성(API-U-108): 검색창 바로 아래 목록. 시안에 없어 검색창 카드 색·둥근 모서리를 따른다 */
.srch-ac{
  position:absolute;z-index:10;left:clamp(18px, 11.88px + 1.633vw, 38px);right:clamp(18px, 11.88px + 1.633vw, 38px);
  top:calc(clamp(18px, 13.1px + 1.306vw, 34px) + clamp(56px, 52.33px + 0.98vw, 68px) + 6px);
  max-height:320px;overflow-y:auto;margin:0;padding:8px 0;list-style:none;
  background:#fff;border:1px solid #e6edf7;border-radius:16px;box-shadow:0 20px 40px -24px rgba(5,40,100,.35);
}
.srch-ac li{padding:10px clamp(16px, 13.55px + 0.653vw, 24px);font-size:clamp(14px, 13.69px + 0.082vw, 15px);color:var(--ink);cursor:pointer;}
.srch-ac li:hover,.srch-ac li[aria-selected="true"]{background:var(--primary-light);}
.srch-ac mark{background:transparent;color:var(--primary);font-weight:700;}
.srch-results.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s;}   /* 정렬·필터·쪽 이동을 누른 뒤 결과를 받는 동안 */
/* 시설·장비(교육 같은 부품) 카드·상세: 공백 없는 긴 이름·위치(URL)도 칸 안에서 줄바꿈 — 화면이 가로로 넘치지 않게(8084 전수검수 R13) */
.course-card .cc-title,.course-card .fl-desc,.course-card .cc-meta dd,.cv-title,.cv-info dd,.cv-intro{overflow-wrap:anywhere;}
.cv-summary,.cv-info > div,.course-card .cc-body{min-width:0;}
/* 예약내역 반려 사유: 관리자가 나눈 줄을 그대로(8084 전수검수 R12) */
.my-reason{white-space:pre-line;}
/* 행사 목록·상세: 공백 없는 긴 행사명·장소·대상(URL)도 칸 안에서 줄바꿈 — 화면이 가로로 넘치지 않게(8084 행사 전수검수 #11) */
.ev-title a,.ev-meta dd,.evv-title,.ev-info dd,.ev-intro,.ev-prog td{overflow-wrap:anywhere;}
/* 행사 목록 쪽 이동 뒤 목록 맨 위로 올릴 때 건수 줄이 고정 헤더에 가리지 않게(#12). 1000px 이하는 위 유틸 줄(44px)이 없다 */
#evResult{scroll-margin-top:calc(44px + var(--header-h) + 16px);}
@media (max-width:1000px){
  #evResult{scroll-margin-top:calc(var(--header-h) + 16px);}
}

/* 교육신청 상세(화면정의서 v1.0 UI-U-005-3·4): 문의처 전부 한 줄씩, 수강신청 레이어 신청서 16개 항목(시안 레이어 + 입력 양식 .form-list) */
.cv-inquiry{display:flex;flex-direction:column;gap:4px;}
/* 수강신청 레이어(K-32): 제목·닫기와 [취소][신청하기]는 고정, 가운데 신청서만 스크롤. 높이는 화면 높이에 맞춤(작은 화면에서도 버튼이 안 잘리게),
   스크롤바는 시안 목록 스크롤(.ol-list)과 같은 얇은 회색 */
#applyLayer .layer-box{display:flex;flex-direction:column;max-width:960px;max-height:100%;overflow:hidden;}   /* 레이어(여백 뺀 높이)에 맞춤. 키보드가 열리면 edu/script.jsp 가 레이어를 보이는 영역 높이로 줄인다 */
#applyLayer .layer-title,#applyLayer .layer-desc,#applyLayer .layer-msg,#applyLayer .layer-btns{flex:none;}
#applyLayer .layer-msg{margin:10px 0 0;}   /* 검사·처리 안내 : 버튼 바로 위 */
#applyLayer .layer-msg:empty{margin:0;}
.apply-body{flex:1 1 auto;min-height:0;margin:6px -16px 0;padding:0 16px 4px;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:24px;scrollbar-width:thin;scrollbar-color:#c3cddb transparent;}
.apply-body:focus{outline:none;}
.apply-body::-webkit-scrollbar{width:6px;}
.apply-body::-webkit-scrollbar-thumb{border-radius:6px;background:#c3cddb;}
.apply-body::-webkit-scrollbar-track{background:transparent;}
#applyLayer .layer-btns{margin-top:0;padding-top:16px;border-top:1px solid #e9eef5;}
@media (max-width:1000px){
  #applyLayer{padding:16px;}   /* 태블릿·모바일 : 좌우 여백 16px, 폭은 화면에 맞춤 */
}
.apply-req-note{margin-left:auto;font-size:clamp(12px, 11.69px + 0.082vw, 13px);font-weight:600;color:var(--gray-700);}
.apply-form .fm-th{width:184px;padding:12px 16px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);white-space:nowrap;}   /* PC : 가장 긴 항목 이름(AI·블록체인 지식 수준, 169px)도 한 줄 */
.apply-form .fm-td{padding:10px 14px;}
.apply-form .fm-td > * + *{margin-top:8px;}
.apply-rdo{display:flex;flex-wrap:wrap;gap:6px;}
.apply-rdo .rdo span{height:36px;padding:0 14px;}
.apply-addr > * + *{margin-top:8px;}
.apply-form [hidden]{display:none;}   /* '기타'·'있음'을 고르기 전 직접 입력 칸(.fm-inline 의 display:flex 가 hidden 을 덮지 않게) */
.apply-count{margin:6px 0 0;text-align:right;font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-700);}
@media (max-width:640px){
  .apply-form .fm-th{width:auto;padding:10px 14px;white-space:normal;}   /* 모바일 : 항목 이름 위·입력 아래(기존 배치), 줄바꿈 자연스럽게 */
  .apply-form .fm-td{padding:10px 0;}
}

/* 관리자 에디터 본문(게시글 보기 · 질문답변 답변 · FAQ 답변 · 행사 소개 · 교육 · 강의 · 시설 · 장비 설명 · 약관)과 통합검색 결과 글:
   공백 없는 긴 낱말 · 주소도 칸 안에서 줄바꿈, 그림 · 동영상 · 지도(iframe)는 칸 폭까지 — 화면이 가로로 넘치지 않게(모바일 전수 #38).
   표는 inc/script.jsp 가 공통 가로 스크롤 상자(.tbl-scroll)로 감싼다 */
.qa-body,.faq-body,.ci-text,.policy-body,.policy-email,.pe-law,.policy-content,.ri-title,.ri-desc{overflow-wrap:anywhere;}
:is(.bv-content,.qa-body,.faq-body,.ev-intro,.ci-text,.policy-body,.policy-email,.pe-law,.policy-content) :is(img,video){max-width:100%;height:auto;}
:is(.bv-content,.qa-body,.faq-body,.ev-intro,.ci-text,.policy-body,.policy-email,.pe-law,.policy-content) :is(iframe,embed,object){max-width:100%;}
/* 이메일무단수집거부 안내 상자(.policy-email, 가운데 정렬 flex)는 표 상자가 표 폭만큼 늘어나 화면을 넘음 → 상자 폭에 맞춤(모바일 전수 POL-03-01) */
.policy-email > .tbl-scroll{align-self:stretch;min-width:0;max-width:100%;}
/* 통합검색 자동완성이 열린 동안 검색창 카드를 아래 분류 선택 상자(.tab-drop z-index:20, 1000px 이하)보다 위로(모바일 전수 SRCH-01-05) */
.srch-box:has(.srch-ac:not([hidden])){z-index:25;}
/* 사업소개 · 오시는 길 카카오 지도(roughmap) : 터치 화면에서 지도 안쪽 div 의 touch-action:none(카카오 인라인)을 풀어 세로 스크롤 · 두 손가락 확대를 브라우저에 맡김 — 한 손가락 이동 차단은 about/intro.jsp · location.jsp (모바일 전수 ABOUT-02-04 · 04-05) */
@media (pointer:coarse){
  .root_daum_roughmap, .root_daum_roughmap *{touch-action:pan-y pinch-zoom !important;}
}
/* 메인 : 관리자 등록 배너 그림(권장 1234x832)은 하단선 아래로 넘치지 않게 (기본 그림은 소매가 겹치는 시안 그대로 둠) */
.hero-visual.is-banner img{max-height:89.46%;margin:0 auto;}
/* 태블릿 · 모바일은 그림 칸이 선 아래로 나오게 잡혀 있어(소매 겹침) 배너 그림 아래가 선을 넘음 → 배너만 칸 아래를 선에 맞춤 */
@media (min-width:1001px) and (max-width:1150px){ .hero-visual.is-banner{bottom:0;} }
@media (max-width:1000px){ .hero-visual.is-banner{margin-bottom:0;} }
/* 메인 달력 : 이어진 띠를 누르면 링크로 이동(js/script.js 가 위임) / 다른 달 표를 받는 중 · 실패 안내 */
.mcal-ev.is-cont{cursor:pointer;}
.mcal-note{margin:0;padding:48px 16px;border:1px solid #d3e1f3;border-radius:14px;background:#fff;text-align:center;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);color:var(--gray-700);}
.mcal-note[hidden]{display:none;}
/* 메인 주요일정 : 예정된 일정이 없을 때 안내 (주요일정 목록 글자 톤) */
.mcal-sch-empty{display:flex;align-items:center;justify-content:center;min-height:88px;margin:0;padding:0 16px;text-align:center;font-weight:600;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);line-height:1.5;color:var(--gray-700);}
/* 온라인 강의 보기 : 영상 위 재생 시간 배지는 클릭이 영상으로 통과 */
.ov-player .oc-time{pointer-events:none;}
/* 홍보 · 포트폴리오 카드 썸네일: 사진을 못 불러오면(js/common.js 가 .is-broken 으로 숨김) 노 이미지 바탕이 보임 */
.pf-thumb{background:#f2f5f9 url("../images/common/no_image.png") center/cover no-repeat;}
/* 강의평가 5점 척도 : 제목(legend)과 척도 사이 hidden input 때문에 board.css 의 legend + * clear 가 안 걸려 척도가 제목 옆에 붙던 것 방지 */
.sv-q .lr-scale{clear:both;}