/*
 * app.css — 전역 베이스 (ApplicantWeb _Host 전역 로드, 모든 페이지 공통).
 * 내용: 범용 reset + Blazor 에러 UI + 뉴 디자인 전역 모달(AplyAlert/AplyConfirm/help)·TelerikWindow 톤.
 * 페이지/레이아웃별 스타일은 각 HeadContent 또는 SubLayout(SubCss + aply-sian.css)에서 로드.
 */

html, body {
    margin: 0;
    padding: 0;
}

/* ============================================================
   본문↔푸터 간격 — 전역(app.css) 배치.
   시안 sub-contents.css 의 `.print + footer { margin-top: 200px }` 가 푸터 위 간격을 주는데,
   모던 SubLayout 이 @Body 를 <main id="main-content"> 로 감싸 .print 이 footer 의 직전 형제가 아니게 돼
   그 규칙이 안 먹음 → 목록 버튼·표·안내문이 푸터에 붙음. 모던 구조(main + footer)로 동일 간격 복원.
   ※ aply-sian.css 에 두면 Notice/Infor 등 자체 HeadContent(last-wins) 페이지엔 안 실림 → 전역 app.css 에 배치.
   ============================================================ */
#main-content + footer { margin-top: 100px; } /* 시안 원본 200px → 100px 축소(사용자 선호) */

/* Blazor 런타임 에러 표시 — 전역(_Host 의 #blazor-error-ui div). 모든 페이지 공통이라 전역 유지. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================
   뉴 디자인 알림/확인 모달 (AplyAlertDialog · AplyConfirmDialog) — 지원자 전용, 전역.
   공유 DialogService 의 시안 톤 UI(Telerik Alert/ConfirmDialog 대체). 관리자(AdminWeb)는 기존 유지(앱 분리).
   전역(app.css) 배치 이유: 페이지 자체 HeadContent(login/join.css 등)가 last-wins 로 레이아웃 CSS 를 덮어도
   알림은 어느 페이지에서나 떠야 하므로 _Host 전역 로드 stylesheet 에 둠.
   ============================================================ */
.aply-alert-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 11000; }
.aply-alert { background: #fff; border-radius: 14px; min-width: 320px; max-width: min(480px, 90vw); padding: 38px 34px 28px; box-shadow: 0 12px 44px rgba(0,0,0,.20); text-align: center; font-family: "Paperlogy Regular", "Malgun Gothic", sans-serif; } /* max-width 캡 — 긴 메시지가 한 줄로 가로로 쭉 늘어나지 않게(줄바꿈) */
.aply-alert__body { font-size: 18px; font-weight: 500; color: #222; line-height: 1.65; word-break: keep-all; margin-bottom: 26px; }
.aply-alert__actions { display: flex; justify-content: center; gap: 10px; }
.aply-alert__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 130px; padding: 13px 34px; background: #094d9f; color: #fff; border: none; border-radius: 100px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s; }
.aply-alert__btn:hover { background: #073e80; }
.aply-alert__btn--ghost { background: #eef1f4; color: #444; }
.aply-alert__btn--ghost:hover { background: #e2e6ea; }

/* 정보 모달 — AplyAlert 와 동일 톤(흰 라운드 박스·소프트 섀도·네이비 pill)이되 제목 + 좌측정렬 본문.
   backdrop/actions/btn 은 .aply-alert* 재사용. 인쇄도움말 등 안내성 다이얼로그용. */
.aply-help-modal { background: #fff; border-radius: 14px; width: 520px; min-width: 340px; max-width: 90vw; padding: 34px 36px 28px; box-shadow: 0 12px 44px rgba(0,0,0,.20); font-family: "Paperlogy Regular", "Malgun Gothic", sans-serif; }
.aply-help-modal__title { font-size: 20px; font-weight: 700; color: #094d9f; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid #e5e8ee; }
.aply-help-modal__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aply-help-modal__list li { font-size: 16px; font-weight: 500; color: #333; line-height: 1.6; word-break: keep-all; }

/* ============================================================
   지원자 TelerikWindow — 뉴 디자인(시안) 톤 (ReportViewer 등 기능형 창)
   ------------------------------------------------------------
   공용 컴포넌트(UI.Common/ReportViewer)는 마크업 무수정. TelerikWindow 를 그대로 쓰되
   k-* 만 오버라이드. app.css 는 ApplicantWeb _Host 전역 로드(kendo 테마 뒤) → cascade 우위.
   AdminWeb 은 별도 앱이라 이 CSS 를 로드하지 않음 → admin 리포트 창은 원본 유지(지원자 전용 자동 스코프).
   단순 알림은 .aply-alert/.aply-help-modal(커스텀), 기능형 창(리사이즈+리포트+툴바)만 여기 해당.
   overflow:hidden 미사용(리사이즈 핸들 클립 방지) — 타이틀바 상단 모서리만 라운드.
   ============================================================ */
.k-window { border: none !important; border-radius: 14px !important; box-shadow: 0 12px 44px rgba(0,0,0,.20) !important; font-family: "Paperlogy Regular", "Malgun Gothic", sans-serif; }
/* 모달 포커스 시 브라우저/Telerik 점선 아웃라인 제거 (팝업 둘레 점선) */
.k-window:focus, .k-window:focus-visible, .k-window-content:focus, .k-window-content:focus-visible { outline: none !important; }
/* 타이틀바 = 주소검색(Daum) 헤더와 동일 회색 board(#f6f7f9/#393939/보더 #e0e3e8) — navy 대신(사용자 지시 "주소검색 헤더처럼"). 테마색 안 씀 → admin 복사돼도 무난. */
.k-window-titlebar { background: #f6f7f9 !important; color: #393939 !important; border: none !important; border-bottom: 1px solid #e0e3e8 !important; border-radius: 14px 14px 0 0 !important; padding: 15px 22px !important; }
.k-window-titlebar .k-window-title { color: #393939 !important; font-weight: 700; }
.k-window-titlebar .k-button, .k-window-titlebar .k-button .k-icon, .k-window-titlebar .k-button .k-svg-icon { color: #555 !important; }
.k-window-titlebar .k-button:hover { background: rgba(0,0,0,.06) !important; }
.k-window-content { padding: 22px 24px !important; }
.k-overlay { background: rgba(0,0,0,.45) !important; }

/* CKEditor 5 편집창 높이 (Qna001 작성 리치 에디터). 레거시 textarea(height:400px) 대응.
   app.css 는 _Host 에서 asp-append-version 로드 → 파일 변경 시 캐시 무효화 보장(board-common.css 는 .razor <link> 라 버전쿼리 없어 stale → 여기 둠). AdminWeb 은 자체 app.css 에 300px(모달). */
.ck-editor__editable_inline { min-height: 400px !important; }

/* ============================================================
   언어 토글 (LanguageToggle.razor) + 영문 모드 레이아웃 보정 — 지원자 전용, 전역.
   ------------------------------------------------------------
   토글은 Gnb(홈+서브 공통)에 뜨고, 영문 보정도 전역 chrome(GNB/푸터/모바일 패널) 대상이라
   페이지별 CSS 가 아닌 전역 app.css 에 둠(홈 전용 main.css 등에 두면 서브 페이지에서 미로드).
   app.css 는 시안 CSS(layout.css 등)보다 먼저 로드되지만, 아래 선택자는 전부
   특이성(html[lang] 접두·클래스 체인)으로 시안 규칙을 이김 → 로드 순서 무관.
   html[lang="en"] 은 translator.js 가 영어 전환 시 켜는 스위치 — 한국어 복구 시 전부 원복.
   ============================================================ */
/* ── 토글 버튼: PC = .pc-header-btsn 쌍둥이 회색 pill (시안1 지구본 pill, 네이비 대신 회색 톤 — 사용자 결정 2026-07-10) */
.btn-lang { display: flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: 500px; background: rgba(199, 199, 199, 0.28); color: #4d4d4d; font-size: 18px; font-weight: 500; font-family: inherit; cursor: pointer; }
/* 시안 common.css reset 이 span 에 color:#202020 을 직접 선언(상속 차단) → 라벨이 버튼 색을 못 받음. 직접 타겟해 복원(패널 흰 글자 필수) */
.btn-lang span { color: inherit; }
.btn-lang__globe { width: 17px; height: 17px; flex-shrink: 0; }
/* 로딩(모델 다운로드/번역 적용) — 진행률 숫자 대신 지구본만 조용히 회전(사용자 요청 2026-07-10) */
.btn-lang[disabled] { cursor: progress; opacity: 0.7; }
.btn-lang[disabled] .btn-lang__globe { animation: btn-lang-spin 1s linear infinite; }
@keyframes btn-lang-spin { to { transform: rotate(360deg); } }
@media all and (max-width: 1400px) { .btn-lang { padding: 10px 14px; font-size: 16px; } .btn-lang__globe { width: 15px; height: 15px; } }
@media all and (max-width: 1200px) { .btn-lang { padding: 8px 12px; font-size: 14px; } .btn-lang__globe { width: 14px; height: 14px; } }
/* [보류(주석) 2026-07-14 사용자 결정] 모바일 변형(햄버거 패널 안 토글) 스타일 — Gnb.razor 의 <LanguageToggle Variant="mobile" /> 과 세트로 주석.
.btn-lang--mobile { background: none; padding: 0; border-radius: 0; color: #fff; font-size: 17px; font-weight: 500; gap: 8px; }
.btn-lang--mobile .btn-lang__globe { width: 16px; height: 16px; }
*/
/* ── 영문 모드 보정: 영문이 한글보다 길어서 생기는 레이아웃 부작용 보정 */
/* GNB — 넓은 화면(>1450)은 시안 원폰트 유지(실측: 1920/1600 은 원크기로도 안 깨짐, pill 과 딱 붙는 정도) — 사용자 결정 2026-07-14.
   ≤1450 은 실측상 영문 메뉴가 언어 토글 pill 을 화면 밖으로 밀어냄(1280 에서 +160px = 토글 사용 불가) → 깨지는 구간만 축소 */
@media all and (max-width: 1450px) { html[lang="en"] .gnb > li > a { font-size: 15px; padding: 0 10px; } }
@media all and (max-width: 1150px) { html[lang="en"] .gnb > li > a { font-size: 13px; padding: 0 7px; } } /* 1100 실측 +35px 잔존 대응 — GNB 숨김(1024) 직전 구간 */
/* 모바일 패널 메뉴(폭 135px·18px·line-height 58px 고정)에 "Recruitment guide" 등 장문이 줄바꿈되며 겹침 → 폰트 축소 + 줄높이 정상화 */
html[lang="en"] .mobile-header-step01 button { font-size: 14px; line-height: 1.25; height: auto; min-height: 50px; letter-spacing: -0.3px; }
/* 푸터 하단 링크 3개가 영문 장문("Personal Information Processing Policy" 등)으로 늘어나 전역 가로 스크롤 유발 → 영문일 때만 줄바꿈 허용.
   wrap 만으론 발동 안 함: 시안 reset.css 가 전역 `* { flex-shrink: 0 }` 라 .footer-link 가 수축 불가(한글에선 무증상)
   + column+align-items:flex-end 라 자식 폭도 콘텐츠 폭 → shrink/min-width/max-width 로 수축 경로를 열어줘야 wrap 이 걸림 */
html[lang="en"] .footer-link { min-width: 0; flex-shrink: 1; }
html[lang="en"] .footer-link-list { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; max-width: 100%; }
html[lang="en"] .footer-line02 { flex-wrap: wrap; } /* 안전판 — 그래도 부족하면 로고+링크 블록이 아랫줄로 내려가고 가로 스크롤은 없음 */
/* 홈 채용분야(sec03) 카드 학과명이 카드 밖으로 관통 — 원인은 시안 reset.css 의 전역 `* { flex-shrink: 0 }`:
   한글 학과명은 카드보다 짧아 무증상이지만 영문은 한 줄 폭이 카드를 넘는데 수축 금지라 줄바꿈 대신 뚫고 나감.
   카드 크기는 한/영 동일 고정(사용자 결정) — 영문일 때 폰트만 축소(20→17px, GNB 축소와 같은 패턴.
   하단 분야명 16px 보다 한 단계 크게 유지해 위계 보존) + 수축 허용(그래도 긴 이름은 카드 안에서 줄바꿈). */
html[lang="en"] .main-sec03 .sec03-item .line02 .item-department { flex-shrink: 1; min-width: 0; font-size: 17px; line-height: 1.3; }
/* [보류(주석) 2026-07-13 사용자 지시] 게시판(공지·Q&A 목록) 헤더 줄바꿈 허용 —
   해제 상태에선 영문 헤더("Number"+33px, "Registration date"+51px)가 nowrap(Notice001 자체 스타일)으로 옆 헤더와 겹쳐 보임.
   복원하려면 아래 주석 해제. (폰트 축소·컬럼 폭 확장안은 앞서 미관용으로 폐기됨)
html[lang="en"] .border-list-wrap th { white-space: normal; }
*/