/* aply-sian.css — 재skin(뉴 디자인/시안) 페이지 전용 스타일.
   ───────────────────────────────────────────────────────────────────
   · aply.css(V8 톤)는 불가침. SubLayout 에서 aply.css "뒤"에 로드 → V8 톤 위에 뉴 디자인 톤.
   · V8 페이지(ApplicantPublicLayout)는 미로드 → 레이아웃으로 V8/뉴 디자인 분리.
   · 뉴 디자인 톤 = 홈(main.css) 공지 카드 계열: 밝은 하늘색 아웃라인 뱃지 + 구분선 행 + 여백.
   · 검색/페이저 등 Telerik 위젯은 .k-* 오버라이트(.faq-* 스코프 한정). 아코디언은 순수 HTML(텔레릭 미사용 — CSS로 100% 통제).
   =================================================================== */

/* 뉴 디자인 토큰 — 출처: main.css(홈 공지 카드) */
:root {
    --sian-sky:        #00a1e9;  /* 주 액센트(뱃지 글자) */
    --sian-sky-border: #10b5ff;  /* 뱃지 테두리 */
    --sian-sky-bg:     #f5f9ff;  /* 연한 하늘 배경(답변) */
    --sian-divider:    #dadada;  /* 행 구분선 */
    --sian-text:       #222222;  /* 본문/제목 */
    --sian-text-sub:   #696969;  /* 보조(건수) */
    --sian-btn:        #255e86;  /* sub 게시판 액션 버튼(write/save) — 검색버튼·라디오 */
    --sian-btn-hover:  #1b4c6e;  /* sub 버튼 hover */
    --sian-navy:       #1c60c5;  /* sub 기본 네이비 — 폼/섹션 라벨 */
}

/* ── Telerik 테마 primary 색 재정의 — 기본 coral(#ff6358) → 시안 navy ──────────
   kendo 테마(all.css)는 색을 :root CSS 변수(--kendo-color-primary*)로 참조하므로,
   변수만 갈아끼우면 콤보 선택항목·체크박스·라디오·포커스·페이저 등 Telerik 전반이
   시안 navy 로 한 번에 통일된다(컴포넌트별 .k-* 오버라이드 불필요).
   · aply-sian.css 는 SubLayout 에서만 로드 → V8 페이지(ApplicantPublicLayout)·AdminWeb 무영향.
   · HeadContent(HeadOutlet)는 head 끝에 렌더 → 전역 kendo all.css 보다 뒤 = 동일 특이도(:root)에서 승리.
   · 기본값(all.css): primary #ff6358 / hover #ea5a51 / active #d45349 / emphasis #ff9d97 /
     subtle #ffeceb·#ffdedb·#ffc8c4 / on-subtle #5c201c / on-primary #fff / on-surface #ff6358 */
:root {
    --kendo-color-primary:               #094d9f;  /* 시안 본 네이비 */
    --kendo-color-primary-hover:         #073e80;  /* .aply-alert__btn:hover 와 동일 */
    --kendo-color-primary-active:        #06356e;
    --kendo-color-primary-emphasis:      #4f86c6;  /* 밝은 강조(보더/포커스 톤) */
    --kendo-color-primary-on-surface:    #094d9f;
    --kendo-color-primary-subtle:        #f8f9ff;  /* 시안 연한 박스 톤 */
    --kendo-color-primary-subtle-hover:  #e9eefb;
    --kendo-color-primary-subtle-active: #d9e3f7;
    --kendo-color-primary-on-subtle:     #0a3a73;
    --kendo-color-on-primary:            #ffffff;
}

/* ── V8 녹색 토큰(--h-green*, tokens.css #1E3A1E 계열) → 뉴 디자인 navy 일괄 치환 ──────────────
   aply.css(V8)가 버튼·체크박스·라디오·박스 등에 var(--h-green) 을 직접 쓰는 잔재가 많다
   (대표: `.applicant-styled .k-button-solid-primary` → 녹색 = Aply008 저장/보기/원서등록 버튼).
   tokens.css 뒤(aply-sian)에서 토큰만 navy 로 재정의 → aply.css ~50곳 녹색이 한 번에 navy (개별 규칙 수정·삭제 불필요).
   ※ aply.css 물리 삭제는 §4(V8 컴포넌트 제거 시). 그 전까지 녹색 잔재 비표시. SubLayout 에서만 로드 → 홈/admin 무관. */
:root {
    --h-green:      #094d9f;  /* V8 forest green → 시안 navy */
    --h-green-deep: #073e80;  /* deep → navy hover */
    --h-green-soft: #eef3fb;  /* soft bg → 연한 navy */
}

/* ⚠️ 삭제 금지 ⚠️ — 지우면 SubLayout 의 모든 Telerik 콤보/드롭다운/날짜 팝업이 ~100px 위로
   밀려 입력칸을 덮는다(테스트 안 보이는 회귀라 PR 에서 놓치기 쉬움).
   ───────────────────────────────────────────────────────────────────────────
   [Telerik 팝업 위치 보정 — ComboBox/DropDownList/DatePicker 등]
   원인: SubLayout 은 고정(position:fixed) Gnb 때문에 body 박스가 doc-y 0 이 아니라 ~Gnb 높이
   (약 100px) 아래에서 시작한다. body 가 position:static 이면 body 직속 팝업(.k-animation-container,
   position:absolute)은 ICB(doc 0) 기준으로 렌더되는데, Telerik 은 offsetParent(=body, doc 100)
   기준으로 top 을 계산한다 → 그 차이(=body 의 doc-y, 100px)만큼 팝업이 위로 떠 콤보를 덮는다.
   해법: body 를 positioned 로 만들면 "offsetParent == containing block" 으로 일치 → 해소된다
   (offset 없는 relative 라 body 는 시각적으로 안 움직인다 = 레이아웃 영향 0).
   ※ TelerikRootComponent 래핑/위치는 이 문제와 무관(래퍼 div 를 안 만든다) — 핵심은 팝업의
     containing block 인 body 의 position 이다. 상세 진단 이력: 메모리 reference_telerik_popup_body_relative. */
body { position: relative; }

/* 뉴 디자인 base — V8 .applicant-styled 의 크림 배경(#FAFAF7) 제거 → 흰 배경 */
.applicant-styled { background: transparent; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
/* ↑ 폰트 — aply.css 의 var(--h-sans)(Pretendard)를 뉴 디자인 primary(Paperlogy)로 override. 해체된 모달/폼/강조 등 .applicant-styled 본문 전체 일괄 뉴디자인 폰트. */

/* ── 뉴 디자인 공용 — 폼/섹션 라벨(AplySianFormLabel.razor). FrsFormLabel(초록 V8 #c8e6c9) 대체.
   시안 board 폼 라벨(write-footer ul.file li strong) 톤: 회색 #f9f9f9 + 다크 #393939 텍스트/보더 ── */
.aply-sian-form-label { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: #f9f9f9; border-bottom: 2px solid #393939; font-size: 17px; font-weight: 700; color: #393939; word-break: keep-all; }
.aply-sian-form-label i { color: #444; }

/* 뉴 디자인 폼 행 — 라벨 셀(고정폭 회색) | 필드 셀(흰색). 시안 board write-form 톤: 다크 상단선 + 회색 라벨 + 회색 행 구분선.
   라벨 단독 = 위 .aply-sian-form-label(풀폭 바, 섹션 헤더). .aply-sian-form-row 안이면 140px 셀로 전환. */
.aply-sian-form { border-top: 2px solid #393939; }
.aply-sian-form-row { display: flex; border-bottom: 1px solid #d5d5d5; }
.aply-sian-form-row .aply-sian-form-label { width: 140px; min-width: 140px; flex-shrink: 0; border-bottom: 0; justify-content: center; text-align: center; }
.aply-sian-form-cell { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.aply-sian-form-cell .form-control { max-width: 360px; }
.aply-sian-form-cell .tip { color: #8f8f8f; font-size: 15px; }

/* ── 뉴 디자인 폼(TelerikForm 유지) 보조 — Telerik 컨트롤·버튼 뉴 디자인 톤. .applicant-styled(SubContents V8Content) 안에서 발동 ── */
.aply-sian-form__req { color: #e24353; margin-left: 2px; }
.aply-sian-form-actions { text-align: center; margin-top: 22px; }
/* 조회 등 폼 액션 버튼 = 시안 .main-btn(네이비 #094d9f 라운드 pill) — 폼용 사이즈로 조정, 가운데. (<button> 이라 border 리셋) */
.aply-sian-form-actions .main-btn { display: inline-flex; justify-content: center; padding: 16px 44px; font-size: 18px; border: none; cursor: pointer; }
/* 폼 셀 안 Telerik 입력 */
.applicant-styled .aply-sian-form-cell .k-input { border: 1px solid var(--sian-divider); border-radius: 6px; }
.applicant-styled .aply-sian-form-cell .k-input.k-focus { border-color: var(--sian-btn); box-shadow: 0 0 0 2px rgba(37, 94, 134, .15); }
/* AplyButton filled(V8 Soft green) → 뉴 디자인 sub 버튼(#255e86) */
.applicant-styled .aply-btn--filled { background: var(--sian-btn); border-color: var(--sian-btn); color: #fff; }
.applicant-styled .aply-btn--filled:hover:not([disabled]) { background: var(--sian-btn-hover); border-color: var(--sian-btn-hover); color: #fff; }
/* AplyButton outline(보조 액션 — Aply007 첨부서류 등) → 흰 배경 + navy 외곽선 / plain(약한 보조 — 도움말) → ghost 그레이. V8(초록/회색) override. */
.applicant-styled .aply-btn--outline { background: #fff; border-color: var(--sian-btn); color: var(--sian-btn); }
.applicant-styled .aply-btn--outline:hover:not([disabled]) { background: #f0f5fc; border-color: var(--sian-btn-hover); color: var(--sian-btn-hover); }
.applicant-styled .aply-btn--plain { background: transparent; border-color: transparent; color: #5b6573; }
.applicant-styled .aply-btn--plain:hover:not([disabled]) { background: #eef1f4; color: #073e80; }
/* 평문 안내 텍스트(.info-box 박스 없이) — Aply005 두 번째 안내(엑셀/법조/인정률). 카운트바와 그리드 사이 여백만. */
.applicant-styled .aply-plain-note { margin: 6px 2px 18px; }
/* ── 안내(가이드) 버튼 — 앰버/골드(#B0701E, navy의 보색·공공기관 톤). navy 미사용(사용자 지시).
   대상: .aply-sian-guide-btn 래퍼 버튼(Aply005 상단·Aply008) + .aply-guide-btn 클래스(Aply005 모달 BtnNoti).
   ThemeColor 무관 앰버 — kendo .k-button-solid-primary 특이도 대비 !important. ── */
.aply-sian-guide-btn .k-button,
.k-button.aply-guide-btn {
    background: #e5503a !important; border-color: #e5503a !important; color: #fff !important;
}
.aply-sian-guide-btn .k-button:hover:not(.k-disabled),
.k-button.aply-guide-btn:hover:not(.k-disabled) {
    background: #c8412c !important; border-color: #c8412c !important; color: #fff !important;
}
/* 글자/아이콘 흰색 — 시안 common.css reset(span color 직접선언) 이김 */
.aply-sian-guide-btn .k-button .k-button-text,
.aply-sian-guide-btn .k-button .k-icon,
.aply-sian-guide-btn .k-button svg,
.k-button.aply-guide-btn .k-button-text { color: #fff !important; }
/* 결과 테이블 = 시안 board(.border-list-wrap > table.line-none, board-common.css) 그대로 — Check002 가 HeadContent 로 board-common.css 로드. 별도 CSS 불필요. */
/* 본문 인라인 링크 — 시안 .list-link(min-width 306px 큰 pill) 대신 작은 인라인(info-box 등) */
.aply-sian-inline-link { color: var(--sian-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.aply-sian-inline-link::after { content: " ›"; }
/* info-box 내부 인라인 링크 — text-list(padding-left:44px) 본문과 좌측 정렬(좌측 치우침 보정) */
.info-text-wrap .aply-sian-inline-link { align-self: flex-start; margin-left: 44px; margin-top: 4px; }
@media all and (max-width: 767px) { .info-text-wrap .aply-sian-inline-link { margin-left: 32px; } }

/* ============================================================
   지원하기 진행 단계 (AplyTabNav) — 뉴 디자인(시안) 번호 스텝퍼
   상단 메뉴(Gnb)와 구분되게 '진행 단계 1~6' 으로 표현. 시안 .step(번호 원) 톤.
   ============================================================ */
/* isolation: 스텝퍼 원(.aply-step__num z-index:1)이 Sub 드롭다운(.sub-nav-dropdown-list z-index:1, DOM상 먼저)
   위로 삐져나오던 z-index 동점 충돌 차단 — 스택 컨텍스트로 원의 z-index 를 .aply-steps 안에 가둠. */
/* 좁은 화면(모바일/태블릿) — Aply 콘텐츠 전체(스텝퍼+카드+다음버튼)를 데스크탑 레이아웃 그대로 두고 통째 가로 스크롤.
   모바일 전용 재배치 안 함(입력은 PC, 모바일은 보기용). AplyTabNav 가 이 래퍼로 감쌈. (2026-06-26) */
/* (2026-06-29) 모바일 전면 반응형 재설계 — 통째 가로 스크롤(min-width:1200) 폐지.
   좁은 화면에서도 데스크탑 폭을 강제하지 않고 콘텐츠가 자연 반응형으로 흐른다:
   폼=1열 세로 스택 / 그리드=카드형 / 스텝퍼=가로 스크롤 스트립 (상세는 파일 하단 §모바일 재설계).
   .aply-hscroll 래퍼는 카드 변환 안 된 초과요소의 최후 안전장치로 overflow-x:auto 만 유지(평소 미발동). */
.aply-hscroll { overflow-x: auto; min-width: 0; }
.aply-steps { display: flex; margin: 0 0 40px; padding: 0; isolation: isolate; }
.aply-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; text-decoration: none; position: relative; }
/* 단계 연결선 — 이전 원 중심 → 현재 원 중심 (원 뒤) */
.aply-step::before { content: ""; position: absolute; top: 25px; left: -50%; width: 100%; height: 2px; background: #dde2ea; z-index: 0; }
.aply-step:first-child::before { display: none; }
.aply-step__num { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: #bcc7da; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-family: "Paperlogy Regular", "Malgun Gothic", sans-serif; transition: background .15s ease, box-shadow .15s ease; }
.aply-step__name { font-size: 16px; font-weight: 500; color: #8a8a8a; font-family: "Paperlogy Regular", "Malgun Gothic", sans-serif; white-space: nowrap; transition: color .15s ease; }
.aply-step:hover .aply-step__num { background: #5b7bb5; }
.aply-step:hover .aply-step__name { color: #094d9f; }
.aply-step.is-active .aply-step__num { background: #094d9f; box-shadow: 0 3px 8px rgba(9,77,159,.35); }
.aply-step.is-active .aply-step__name { color: #094d9f; font-weight: 700; }
@media all and (max-width: 767px) {
    .aply-step__num { width: 34px; height: 34px; font-size: 15px; }
    .aply-step::before { top: 21px; }
    .aply-step__name { font-size: 13px; }
}

/* ── 지원하기 폼 레이아웃 — 상단: 안내(좌)/사진(우), 하단: 폼 풀폭. Horizontal 폼은 폭이 넓어 사진 옆에
      두면 주소·거주지 멀티컨트롤 행이 폼 우측으로 밀려 사진과 겹치므로, 사진을 상단 우측으로 분리하고 폼은 풀폭. ── */
/* 사진 컬럼 폭 220→150: 프레임(150×200)+버튼+힌트(컴팩트) 합이 좌측 info-box 높이와
   비슷해져 하단 폼이 위로 올라옴 (2026-07-09, 힌트 문구는 사용자 요청으로 유지.
   버튼을 프레임 하단 오버레이로 겹치는 안은 시도 후 사용자 피드백으로 되돌림 — 별도 행 유지). */
.aply-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 44px; align-items: start; }
.aply-form-layout > .info-box { grid-column: 1; grid-row: 1; }
.aply-form-layout > .aply-photo-col { grid-column: 2; grid-row: 1; }
.aply-form-layout > .aply-form-layout__form { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
/* .aply-photo-col__title 규칙 제거 — "사진" 제목 텍스트 삭제로 미사용 (2026-07-09) */
/* 사진 frame/placeholder/안내 — 시안 톤 오버라이드(V8 aply.css 위, SubLayout 에서만 로드). frame=연한 네이비 #f8f9ff + 소프트 대시 + 라운드 */
/* 반명함판 3:4 비율로 크기 고정 — 사진 미등록이어도 frame 이 줄어들지 않게(사용자 지시). 사진은 frame 안에 비율 유지로 표시. */
.aply-photo__frame { background: #f8f9ff; border: 1px dashed #b9c6e0; border-radius: 12px; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.aply-photo__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aply-photo__empty { color: #94a0b8; font-size: 13px; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.aply-photo__hint { color: #707070; font-size: 11px; line-height: 1.5; margin: 6px 0 0; word-break: keep-all; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.aply-photo__hint strong { color: #094d9f; }
/* 풀폭 Horizontal 폼: Width 미지정 단일 입력이 과도하게 늘어나지 않게 적정폭 캡. Width 지정 필드(≤350)·주소/전화 행·textarea 는 인라인 폭이 더 좁아 영향 없음. */
.aply-form-layout__form .k-form .k-textbox,
.aply-form-layout__form .k-form .k-combobox,
.aply-form-layout__form .k-form .k-dropdownlist,
.aply-form-layout__form .k-form .k-maskedtextbox { max-width: 360px; }
@media all and (max-width: 900px) {
  .aply-form-layout { grid-template-columns: 1fr; }
  /* 1열 스택 시 사진 컬럼이 풀폭이 되면 aspect-ratio:3/4 프레임이 화면 폭만큼 거대해짐
     → 반명함판(3:4)답게 폭 제한(데스크탑 150px 와 동일). 좌측 정렬 유지. */
  .aply-form-layout > .aply-photo-col { grid-column: 1; grid-row: 2; max-width: 150px; }
  .aply-form-layout > .aply-form-layout__form { grid-column: 1; grid-row: 3; }
}
/* (2026-06-29) 모바일 재설계로 위 가로스크롤 2열 복원 블록 제거 —
   .aply-form-layout 의 ≤900px 1열 스택(안내→사진→폼)을 그대로 살린다. */

/* ── 뉴 디자인 폼 행 — 시안 board(write-info)처럼 "시원한" 행: 회색 라벨 셀 | 풀폭 필드.
   **opt-in = 래퍼 하나**: <div class="aply-form-layout__form"> 로 TelerikForm 을 감싸면
   행(.k-form-field)·내부 Telerik 컨트롤(높이/폰트/폭) 전부 후손 셀렉터로 자동 적용 —
   FormItem 별 Class 불필요(구 .aply-fld 행 클래스는 마크업에 남아 있어도 무해, Aply001 잔존분).
   <Template> 엔 라벨(AplyFormLabel=.aply-fld__label) + Telerik 컨트롤만 둔다 (감싸는 div 불필요).
   · 라벨 = FrsFormLabel(초록) 대체 → 시안 회색 셀(#f6f7f9). 컴팩트(15px)지만 패딩으로 시원하게.
   · Telerik 컨트롤은 종류 무관 동일 높이(42px)·풀폭 → 콤보/텍스트/드롭다운 무엇이 와도 라벨과 정렬.
   · 멀티컨트롤 1줄 = .aply-fld__line / 여러 줄 = .aply-fld__cell(줄 스택) — 요소 클래스는 마크업에 명시.
   · board 프레임 = Notice/Write 톤: 다크 상단선은 폼 맨 위 1번만, 행 사이는 옅은 구분선. ── */
/* 제목 위 다크선 1개 (= .write-head border-top). 행마다 X */
.aply-form-layout__form .k-form-layout { border-top: 2px solid #393939; }
/* 행 — 옅은 하단 구분선 + 간격 제거(flush) + 라벨│필드 flex (래퍼 후손이면 자동) */
.aply-form-layout__form .k-form-field { margin: 0; border-bottom: 1px solid #d5d5d5; align-items: stretch; gap: 18px; }
.aply-fld__label {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 150px; min-width: 150px; flex-shrink: 0; padding: 14px 10px; box-sizing: border-box;
    background: #f6f7f9;
    font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif;
    font-size: 15px; font-weight: 600; color: #393939; line-height: 1.4; word-break: keep-all;
}
.aply-fld__req { color: #e24353; margin-left: 2px; font-weight: 700; }
/* ── 필드 컨트롤 — 모든 Telerik 컨트롤 뉴 디자인 폰트(Paperlogy) + 기본 높이 42px ── */
.aply-form-layout__form .k-form-field .k-input,
.aply-form-layout__form .k-form-field .k-picker { height: 42px; font-size: 15px; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.aply-form-layout__form .k-form-field .k-input .k-input-inner { font-size: 15px; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
/* 콤보/드롭다운 팝업 항목 — 뉴 디자인 폰트(Paperlogy). 팝업은 body 직속이라 .aply-fld 밖 → 전역 지정.
   (aply-sian.css 는 SubLayout 에서만 로드되므로 V8 페이지엔 영향 없음.) */
.k-list-item, .k-list-optionlabel { font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; font-size: 15px; }

/* 팝업 목록 "선택됨" 항목 — 솔리드 primary(navy) 배경은 글자를 가린다(사용자 피드백) →
   시안의 활성 항목 톤(연한 블루 #dfe8fb = main.css .quick-item.active, Gnb 드롭다운과 동일 계열)
   + 본문색 글자. 테마 primary(navy)는 체크박스·포커스·버튼 등엔 그대로 두고 목록 선택 상태만 예외. */
.k-list-item.k-selected, .k-selected.k-list-optionlabel { background-color: #dfe8fb; color: #393939; }
.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover { background-color: #d3e0f7; color: #393939; }

/* 폼 내 유틸 버튼(우편번호 찾기 등) + 사진 선택 버튼 — 연한 outline 톤.
   솔리드 네이비(--sian-btn)는 "과함"(사용자 피드백) → 보조 버튼답게 흰 배경 + 회색 보더 + 본문색.
   `.aply-fld__line >` 직계 한정: 콤보/피커 화살표(.k-input-button, 컨트롤 내부 중첩)는 제외.
   높이 36px = 멀티줄 셀 컨트롤 높이와 정렬. */
.aply-form-layout__form .aply-fld__line > .k-button,
.aply-photo .k-upload-button {
    background: #fff; border: 1px solid #c9ced6; color: #393939;
    height: 36px; padding: 0 14px; border-radius: 6px;
    font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; font-size: 14px;
}
.aply-form-layout__form .aply-fld__line > .k-button:hover:not(.k-disabled),
.aply-photo .k-upload-button:hover:not(.k-disabled) {
    background: #f5f7fa; border-color: #aab3c0; color: #222;
}
/* 사진 선택 버튼만 축소 오버라이드 — 소형화 + 프레임(컬럼 풀폭)과 동일 폭 정렬 (2026-07-09) */
.aply-photo .k-upload-button-wrap { width: 100%; }
.aply-photo .k-upload-button { height: 30px; width: 100%; padding: 0 8px; font-size: 12px; }
.aply-photo .k-upload-button .k-svg-icon,
.aply-photo .k-upload-button .k-icon { width: 14px; height: 14px; font-size: 14px; }
/* FileSelect 래퍼 chrome 제거 — 회색 dropzone(#fafafa)+테두리가 축소된 버튼 뒤 밴드로 노출됨. 버튼만 보이게 투명화 (2026-07-09) */
.aply-photo .k-upload { background: transparent; border: 0; }
.aply-photo .k-upload .k-dropzone { background: transparent; padding: 0; }
/* 단일 컨트롤(라벨 옆 직접 자식): 풀폭(시원), 세로 가운데 */
.aply-form-layout__form .k-form-field > .k-input,
.aply-form-layout__form .k-form-field > .k-picker { align-self: center; width: 100%; max-width: 420px; }
/* 지원분야 콤보 — 폭은 razor TelerikComboBox 의 Width 로 조절. 공통 max-width 캡(360/420)이 인라인 Width 를 막으므로 이 콤보만 캡 해제(폭값 아님). */
.aply-form-layout__form .k-form .k-form-field.aply-fld--branch > .k-combobox { max-width: none; }
/* 행 숨김 — Aply005 실적물 구분별 행 토글(전시회/ISSN/게재권호 등)용.
   @if 로 <FormItem> 을 감싸면 Telerik Form 이 그 행을 조건부 항목으로 보고 재표시 때 폼 맨 아래로 옮긴다.
   그래서 FormItem 은 항상 등록하고 이 클래스로 행만 감춘다(내용 렌더는 Template 안 @if 가 담당). */
.aply-form-layout__form .k-form .k-form-field.aply-fld--hidden { display: none !important; }
/* 한 줄 인라인 그룹(.aply-fld__line 직접 자식): 필드 채우고 세로 가운데 — 성명영문 등 */
.aply-form-layout__form .k-form-field > .aply-fld__line { flex: 1 1 auto; min-width: 0; align-self: center; }
/* 여러 줄 필드(.aply-fld__cell): 줄(.aply-fld__line)을 세로로 쌓음(현주소·거주지·병역). 밀집형 → 컨트롤 36px·간격 6px 로 타이트하게. */
.aply-fld__cell { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 6px 0; }
.aply-fld__cell .aply-fld__line .k-input,
.aply-fld__cell .aply-fld__line .k-picker { height: 36px; }
.aply-fld__cell .aply-fld__line .k-textarea { height: auto; min-height: 90px; max-width: 480px; width: 100%; }

/* ── 폼 행 내부 요소 (.aply-fld__line/__sub/__hint/__check) — V8 .aply-form__* 대체(뉴 디자인 전용) ── */
.aply-fld__line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.aply-fld__sub { min-width: 64px; font-size: 15px; font-weight: 500; color: #393939; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.aply-fld__hint { font-size: 13px; color: #8f8f8f; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.aply-fld__check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 15px; color: #393939; }
/* 셀 맨 위 단축 옵션(현주소와 동일) — 아래 입력 줄과 살짝 더 구분 */
.aply-fld__cell > .aply-fld__check:first-child { margin-bottom: 6px; }
/* 시안 common.css 의 input[type=checkbox]:not(:has(+label)){top:5px} 상쇄 — 시안 마크업(체크박스+형제 label)
   전용 오프셋이 Telerik 체크박스(라벨 안에 포함, 형제 label 없음)에 잘못 걸려 5px 내려가 텍스트와 어긋남. */
.applicant-styled .k-checkbox { top: 0; }

/* 저장 불가 안내(접수완료/기간외) — 뉴 디자인 info 톤(시안 #f8f9ff 박스) + 크게(17px). V8 .aply-form__readonly(작은 이탤릭 그레이) 대체 */
.aply-form-notice { text-align: center; margin: 28px 0 4px; padding: 18px 20px; background: #f8f9ff; border-radius: 12px; color: #4a4a4a; font-size: 17px; font-weight: 500; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
/* Telerik FormGroup 의 빈 legend(k-form-legend) 밑줄 제거 — 제목 없는 폼그룹이 fieldset 상단에 그리는
   옅은 가로선(border-bottom 2px rgba(0,0,0,.08)). board 행 상단 다크선과 겹쳐 지저분하므로 숨김. */
.aply-form-layout__form .k-form-legend { display: none; }

/* ── 하단 "다음" 버튼 — 뉴 디자인 .main-btn(navy pill) 을 우측·자동폭으로(중앙·풀폭 기본값 보정) ── */
.aply-next-actions { display: flex; justify-content: center; margin: 44px 0 8px; }
.aply-next-main { --aply-arrow-w: 18px; width: auto; min-width: 200px; margin: 0; justify-content: center; gap: 12px; font-size: 18px; padding: 18px 48px; box-shadow: 1px 4px 4px 0 rgba(74,74,74,.25); text-decoration: none; cursor: pointer; color: #fff !important; transition: background 0.25s ease; }
/* hover = 시안 어휘 조합: 배경만 진한 navy(#073e80 — 알림 버튼·kendo primary-hover 와 동일 톤) + 화살표 모션.
   그림자 확대·떠오르기(lift) 등은 금지(시안 fidelity — flat 유지). */
.aply-next-main:hover, .aply-next-main:focus { color: #fff !important; background: #073e80; }
/* 화살표(img)가 항상 flex 자리를 차지(폭 고정 의도) → '다음' 묶음이 (gap+화살표폭)/2 만큼 왼쪽으로 쏠려
   hover 전엔 가운데가 안 맞음. 왼쪽에 화살표와 동일 폭(--aply-arrow-w) 빈 스페이서를 둬 좌우 대칭 →
   '다음' 단독으로도 정확히 가운데정렬. 화살표 img 와 폭이 같고 flex gap(12px) 양쪽 동일 적용. */
.aply-next-main::before { content: ""; width: var(--aply-arrow-w); flex: none; }
/* 방향 화살표 — 시안 로그인 버튼(login.css)의 흰 화살표 SVG(icon_white_arrow.svg, →) 그대로 사용.
   기본 숨김(opacity 0 + 살짝 왼쪽) → hover 시 왼→제자리로 슬라이드(0.25s ease). pill 은 가로축.
   opacity/transform 만 사용 → 화살표 자리(폭)는 유지돼 버튼 폭 변화 없음. SVG fill=white 라 navy 위에서 흰색. */
.aply-next-main__arrow {
    width: var(--aply-arrow-w); height: auto; flex: none;
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.aply-next-main:hover .aply-next-main__arrow,
.aply-next-main:focus .aply-next-main__arrow { opacity: 1; transform: translateX(0); }
@media all and (max-width: 767px) { .aply-next-main { width: 100%; } }
/* (2026-06-29) 모바일 재설계로 가로스크롤 폭 복원 제거 — ≤767px '다음' 버튼은 풀폭(위 규칙) 유지. */

/* ============================================================
   Qna002 FAQ — 뉴 디자인(홈 공지 카드) 톤
   ============================================================ */

/* ── 검색 — 공지사항(board) 돋보기 버튼 그대로. 입력+버튼=순수 HTML, 스코프 필터=Telerik 라디오(teal) ── */
.faq-search { margin-bottom: 24px; }
.faq-search__form { display: flex; gap: 8px; max-width: 600px; margin: 0 auto 12px; }
.faq-search__input { flex: 1; height: 46px; padding: 0 14px; border: 1px solid var(--sian-divider); border-radius: 6px; font-size: 15px; color: var(--sian-text); }
.faq-search__input:focus { outline: none; border-color: var(--sian-btn); box-shadow: 0 0 0 2px rgba(37, 94, 134, .15); }
/* 공지사항 board 돋보기 버튼(board-common.css .board-search input[type=submit]) — 흰 사각 + ico-search.png, 텍스트 숨김 */
.faq-search__btn { width: 46px; min-width: 46px; height: 46px; padding: 0; background: #fff url(/_content/JNU.FRS.UI.Common/images/sub/ico-search.png) center no-repeat; background-size: 45%; border: 1px solid #dee2e6; border-radius: 6px; text-indent: -9999px; overflow: hidden; cursor: pointer; }
.faq-search__btn:hover { background-color: #f0f0f0; }
.applicant-styled .faq-search__filters { gap: 22px; margin-top: 4px; display: flex; justify-content: center; }
.applicant-styled .faq-search__filters .k-radio:checked,
.applicant-styled .faq-search__filters .k-radio.k-checked { border-color: var(--sian-btn); background-color: var(--sian-btn); }
.applicant-styled .faq-search__filters .k-radio-label { color: var(--sian-text); }

/* ── 건수 ── */
.faq-count { text-align: right; color: var(--sian-text-sub); font-size: 14px; margin-bottom: 4px; }
.faq-count strong { color: #094d9f; }

/* ── FAQ 아코디언 — 시안 sub 디자인(sub-contents.css 어휘): navy 액센트(#094d9f/#0c45ac) + #f8f9ff 답변 박스(info-box 톤) + flat 보더(#707070 상단·#dedede 행). 그라데이션·그림자·카드 없음 ── */
.faq-list { border-top: 2px solid #707070; }
.faq-item { border-bottom: 1px solid #dedede; }
.faq-q { display: flex; align-items: center; gap: 18px; width: 100%; padding: 26px 6px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; }
.faq-q__badge { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: #094d9f; color: #fff; border-radius: 100px; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.faq-q__text { flex: 1; font-size: 19px; font-weight: 600; color: #3b3b3b; line-height: 1.5; }
.faq-q__arrow { color: #8a93a0; font-size: 16px; transition: transform .25s; flex-shrink: 0; }
.faq-q:hover .faq-q__text { color: #0c45ac; }
.faq-item.is-open .faq-q__text { color: #0c45ac; font-weight: 700; }
.faq-item.is-open .faq-q__arrow { transform: rotate(180deg); color: #0c45ac; }
.faq-a { margin: 4px 6px 28px; padding: 26px 32px; background: #f8f9ff; border-radius: 14px; }
.faq-a__label { display: inline-block; color: #0c45ac; font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.faq-a__body { color: #303030; font-size: 18px; line-height: 1.85; }
.faq-empty { padding: 60px 0; text-align: center; color: var(--sian-text-sub); font-size: 18px; }

/* ── 페이저 — notice001 board 페이저(.pagination) 그대로 가져옴(board-common.css 195~). active=#555 ── */
.pagination { clear: both; display: block; padding: 30px 0 15px; text-align: center; }
.pagination ul { display: flex; justify-content: center; }
.pagination ul li { margin: 0 3px; }
.pagination ul li a { transition: .3s; width: 40px; aspect-ratio: 1/1; border: #e2e2e2 solid 1px; display: flex; flex-direction: column; justify-content: center; line-height: 1; border-radius: 50px; }
.pagination ul li a i { line-height: 1; }
.pagination ul li a:hover { background: #f0f0f0; transition: .3s; }
.pagination ul li a.active { background: #555; color: #fff; }

/* ============================================================
   TelerikGrid → 시안 .table-wrap 톤 (.aply-sian-grid)
   위젯은 Telerik 유지, 디자인만 sub-contents.css 의 .table-wrap>table.table 와 동일하게.
   (common_component_no_override: 외부 라이브러리 k-* 커스터마이징 OK)
   선택자 = 모던 Telerik .k-table-th / .k-table-td 직접 타겟. *
   ============================================================ */
.aply-sian-grid.k-grid { border: none; background: transparent; border-top: 2px solid #707070; font-family: inherit; }
.aply-sian-grid .k-grid-header, .aply-sian-grid .k-grid-header-wrap { border: none; }

/* 헤더 th — 시안 plain 데이터표(sub-contents.css .table-wrap th = #f5f8ff)와 동일 헤더색 → Infor007 등과 통일.
   (aply-sian-grid 디자인 기준이 .table-wrap>table.table 이라 헤더도 그 값으로 정렬.) 24px/700, #3d3d3d, center, padding 22px */
.aply-sian-grid .k-table-th {
    background: #f5f8ff !important; color: #3d3d3d !important;
    font-size: 24px !important; font-weight: 700 !important; padding: 22px 12px !important;
    text-align: center !important; vertical-align: middle !important;
    border-top: none !important; border-bottom: 1px solid #dedede !important; border-left: 1px solid #dedede !important; border-right: none !important;
}
.aply-sian-grid .k-table-th:first-child { border-left: none !important; }
.aply-sian-grid .k-table-th .k-cell-inner { justify-content: center; overflow: visible; }
.aply-sian-grid .k-table-th .k-cell-inner .k-link { flex: 0 1 auto; overflow: visible; }
/* 헤더 잘림 방지 — Telerik 기본 ellipsis(nowrap) 해제 → 시안처럼 전체 표시(좁으면 줄바꿈) */
.aply-sian-grid .k-column-title { white-space: normal; overflow: visible; text-overflow: clip; }
/* 헤더/본문 열 정렬 — 본문 무스크롤이라 헤더의 스크롤바 보정 폭 제거 */
.aply-sian-grid .k-grid-header { padding-inline-end: 0 !important; }
.aply-sian-grid .k-grid-header-wrap { margin-inline-end: 0 !important; border-inline-end: 0 !important; }

/* 본문 td — 시안: 21px/500, #3b3b3b, padding 22px.
   ※ 정렬(text-align)은 외관에서 제외 — 각 그리드의 razor 에서 GridColumn TextAlign 으로 열별 선언
   (열을 보면 정렬이 보이게, 페이지 사정은 페이지가 든다). */
.aply-sian-grid .k-table-td {
    color: #3b3b3b !important; font-size: 21px !important; font-weight: 500 !important; padding: 22px 12px !important;
    vertical-align: middle !important;
    border-top: none !important; border-bottom: 1px solid #dedede !important; border-left: 1px solid #dedede !important; border-right: none !important;
}
.aply-sian-grid .k-table-td:first-child { border-left: none !important; }

/* 컨테이너 정리 — 스크롤/줄무늬/배경 제거(plain table 느낌) */
.aply-sian-grid .k-grid-content { overflow: hidden !important; }
.aply-sian-grid .k-grid-content, .aply-sian-grid .k-grid-header-table, .aply-sian-grid .k-grid-table { background: transparent !important; }
.aply-sian-grid .k-table-alt-row { background: transparent !important; }   /* 줄무늬 제거(plain table 유지) */
/* row hover = Notice 보드 테이블(board-common.css .border-list-wrap table tr:hover)과 동일: #fbfbfb + .3s.
   Aply002/004 그리드는 행 클릭=수정이라 hover 피드백을 살림(기존엔 transparent 로 죽여놨었음). */
.aply-sian-grid .k-table-row:hover, .aply-sian-grid .k-table-row.k-hover { background: #fbfbfb !important; transition: background .3s; }

/* ── 그리드 셀 내 액션 버튼(수정/삭제 등) — V8 .aply-grid__btn 대체.
   시안 board 액션 버튼 톤(board-common.css .btn-wrap .write_btn #255e86 — Notice 의 수정/삭제와 동일):
   솔리드 네이비 + 흰 글자, 삭제(ThemeColor=Error)도 동일 톤으로 통일(시안 그대로). ── */
.aply-sian-grid .k-table-td .k-button {
    /* 디자인·폰트·흰 글씨 = Notice(board-common .btn-wrap .btn) 동일, 크기만 표 셀에 맞게 축소(사용자 지시) */
    background: var(--sian-btn); border: 1px solid var(--sian-btn); color: #fff;
    height: auto; padding: 6px 14px; border-radius: 6px;
    font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; font-size: 15px;
    transition: background .3s;
    /* 세로 배치(수정 위 / 삭제 아래) — 셀 가운데 정렬 */
    display: flex; width: fit-content; margin: 0 auto;
}
.aply-sian-grid .k-table-td .k-button:hover:not(.k-disabled) { background: var(--sian-btn-hover); border-color: var(--sian-btn-hover); color: #fff; }
/* 글자 span(.k-button-text)에 시안 common.css 전역 reset(요소 나열 셀렉터)이 color:#202020 을 "직접" 선언
   → 버튼의 #fff 상속을 이김(직접 선언 > 상속). span·아이콘을 직접 타겟해 흰색 복원. */
.aply-sian-grid .k-table-td .k-button .k-button-text,
.aply-sian-grid .k-table-td .k-button .k-icon,
.aply-sian-grid .k-table-td .k-button svg { color: #fff; }
.aply-sian-grid .k-table-td .k-button + .k-button { margin-top: 6px; }
/* 버튼 들어가는 셀(관리 열) — 본문 패딩(22px) 축소 */
.aply-sian-grid .k-table-td:has(.k-button) { padding: 12px !important; }

/* ── Telerik 내장 페이저 → 시안 board 페이징(.pagination) 톤 이식.
   Branch001 은 Pageable=false 라 선례 없음 → Notice001 board 페이저 디자인(원형 40px·#e2e2e2 보더·
   active #555·hover #f0f0f0, board-common.css 195~)을 .k-pager 에 적용. 위젯(페이징 동작)은 Telerik 그대로. ── */
.aply-sian-grid .k-grid-pager {
    background: transparent; border: none; padding: 30px 0 15px;
    justify-content: center; font-family: inherit;
}
.aply-sian-grid .k-grid-pager .k-button,
.aply-sian-grid .k-grid-pager .k-pager-nav {
    width: 40px; height: 40px; min-width: 40px; margin: 0 3px;
    /* kendo flat 버튼(.k-button-flat)이 보더/배경을 transparent 로 강제 → !important 로 시안 톤 복원 */
    border: 1px solid #e2e2e2 !important; border-radius: 50px; background: #fff !important; color: #393939 !important;
    font-size: 15px; transition: .3s;
}
.aply-sian-grid .k-grid-pager .k-button:hover:not(.k-disabled) { background: #f0f0f0 !important; border-color: #e2e2e2 !important; color: #393939 !important; }
.aply-sian-grid .k-grid-pager .k-button.k-selected { background: #555 !important; border-color: #555 !important; color: #fff !important; }
/* 건수/페이지 정보·사이즈 선택 — 시안 페이저는 숫자만(.board-total 바가 정보 제공) */
.aply-sian-grid .k-grid-pager .k-pager-info,
.aply-sian-grid .k-grid-pager .k-pager-sizes { display: none; }

/* 반응형 — 시안 sub-contents.css 모바일 폰트 */
@media (max-width: 768px) {
    .aply-sian-grid .k-table-th { font-size: 20px !important; padding: 14px !important; }
    .aply-sian-grid .k-table-td { font-size: 18px !important; padding: 14px !important; }
}

/* 뉴 디자인 알림/확인 모달(.aply-alert*) CSS 는 css/app.css 로 이동 —
   _Host 전역 로드라 페이지 HeadContent(last-wins)에 영향 없이 모든 지원자 페이지에서 적용. */

/* ============================================================
   뉴 디자인 집중형 인증 폼 (.help-*) — Help(비번찾기)·Check002/003(비번확인) 등 단순 인증 게이트 공용.
   중앙 정렬(max-width 460) + 라벨 위/form-control 풀폭 + navy(#094d9f) 버튼. (구 help.css 이전 → 공유)
   ============================================================ */
.help-box { max-width: 460px; margin: 0 auto; padding: 12px 0; }
.help-step { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #9aa5b1; margin: 0 0 12px; }
.help-title { text-align: center; font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0 0 14px; }
.help-msg { text-align: center; font-size: 15px; color: #5b6573; line-height: 1.65; word-break: keep-all; margin: 0 0 32px; }
.help-error { text-align: center; color: #d21a48; font-size: 14px; font-weight: 500; margin: -6px 0 18px; }
.help-field { margin-bottom: 18px; }
.help-field > label { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px; }
.help-field .form-control { width: 100%; height: 54px; padding: 0 16px; border: 1px solid #d5dae1; border-radius: 8px; font-size: 15px; color: #222; background: #fff; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.help-field .form-control::placeholder { color: #aab2bd; }
.help-field .form-control:focus { outline: none; border-color: #094d9f; box-shadow: 0 0 0 3px rgba(9,77,159,.12); }
.help-field .form-control[readonly] { background: #f5f7fa; color: #555; cursor: default; }
/* 회차 select — 흰 배경 form-control 이 네이티브 화살표를 덮어 안 보이던 것 보완: .sqnce-select 와 동일한 navy chevron(SVG 재활용)으로 그림. */
.help-field select.form-control {
    padding: 0 40px 0 16px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23094d9f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    cursor: pointer;
}
.help-actions { display: flex; gap: 10px; margin-top: 34px; }
.help-actions a, .help-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 54px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s; }
/* 단일 버튼(조회 등) — full-width 대신 중앙 + 적당한 폭 */
.help-actions.single { justify-content: center; }
.help-actions.single > a, .help-actions.single > button { flex: 0 1 auto; min-width: 200px; padding: 0 40px; }
.help-btn-primary { background: #094d9f; color: #fff; }
.help-btn-primary:hover { background: #073e80; }
.help-btn-ghost { background: #eef1f4; color: #555; }
.help-btn-ghost:hover { background: #e2e6ea; }
.help-note { text-align: center; font-size: 13px; color: #9aa5b1; line-height: 1.7; margin: 26px 0 0; }

/* 카드 래퍼 — 인증 폼을 Help(join-wrap)처럼 큰 흰 카드로 감쌈(시안 join 카드 톤). sub 페이지(Check002/003 등)에서 .help-box 를 감쌀 때. */
.help-card { background: #fff; border-radius: 30px; box-shadow: 0 3px 14px 3px rgba(158,158,158,.25); padding: 80px; }

@media (max-width: 768px) {
    .help-box { max-width: 100%; }
    .help-title { font-size: 24px; }
    .help-card { padding: 40px 24px; border-radius: 20px; }
}

/* ============================================================
   문서(PDF) 영역 empty-state (.doc-empty) — 공고문/분야표 PDF 가 등록되면 이 자리에 <embed> 로 표시됨.
   준비중일 때 "문서가 들어올 자리"를 나타내는 시안 톤 플레이스홀더(중앙 정렬 + 아이콘 + 안내). flat.
   ============================================================ */
.doc-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 300px; padding: 48px 24px;
    background: #f8f9ff; border: 1px solid #e3e8f2; border-radius: 16px; text-align: center;
}
.doc-empty__icon { width: 60px; height: 60px; margin-bottom: 20px; opacity: .8; }
.doc-empty__title { font-size: 21px; font-weight: 700; color: #094d9f; margin: 0 0 10px; font-family: "Paperlogy Regular", "Pretendard", sans-serif; }
.doc-empty__msg { font-size: 15px; color: #707070; margin: 0; line-height: 1.65; word-break: keep-all; }
@media (max-width: 768px) {
    .doc-empty { min-height: 220px; padding: 40px 20px; }
    .doc-empty__title { font-size: 18px; }
}

/* ============================================================
   지원하기 폼 카드 (.aply-form-card) — AplyTabNav 가 @ChildContent(폼·사진·CommonButton)를 감싸는 시안 흰 카드.
   스텝퍼·다음 버튼은 카드 밖(진행 네비). 시안 join-wrap 톤(흰·라운드·soft shadow)이되 와이드 폼용 패딩.
   ============================================================ */
.aply-form-card { background: #fff; border-radius: 24px; box-shadow: 0 3px 14px 3px rgba(158,158,158,.20); padding: 24px 48px 48px; } /* 상단 패딩 48→24: 저장 버튼바를 위로 (2026-06-26) */
@media all and (max-width: 768px) { .aply-form-card { padding: 28px 20px; border-radius: 16px; } }

/* ============================================================
   Aply005 모달 폼 재skin — V8 폼 어휘(.form-label / .aply-form__*)를 시안 board 톤으로 (CSS 전용).
   모달 TelerikForm 을 <div class="aply-form-layout__form aply-modal-form"> 로만 감싸고 폼 마크업(AplyFormField/
   AplyFormRow/FrsFormLabel 14행)은 무수정. 입력 높이/폰트/행 구분선/다크 상단선은 기존 .aply-form-layout__form
   후손 규칙이 자동 적용. 아래는 라벨(초록->회색)·note·별표 보정.
   주의: 인라인 폼(002~004)은 .form-label/.aply-form__* 를 안 써서 셀렉터 미스 -> 영향 없음.
   aply-sian.css 는 SubLayout 에서만 로드 -> V8 페이지/AdminWeb 무관.
   ============================================================ */
/* FrsFormLabel(.form-label, 초록 #c8e6c9·120px) -> 시안 회색 board(#f6f7f9·150px·가운데). .aply-fld__label 동일 톤.
   FrsFormLabel 컴포넌트 <style>(단일 클래스 0,1,0)보다 높은 specificity(0,2,0)라 항상 승. */
.aply-form-layout__form .form-label {
    background: #f6f7f9; color: #393939;
    /* width !important — FrsFormLabel 컴포넌트 scoped <style>(.form-label[b-xxx] max-width:120px)와 specificity 동률이라
       소스순서 따라 120px 가 이길 수 있음 → AplyFormLabel(.aply-fld__label) 150px 와 어긋나 라벨/필드 정렬 깨짐. !important 로 150px 고정. */
    width: 150px !important; min-width: 150px !important; max-width: 150px !important; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 14px 10px; box-sizing: border-box;
    font-size: 15px; font-weight: 600; line-height: 1.4; word-break: keep-all;
    font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif;
}
.aply-form-layout__form .form-label > span { display: inline; font: inherit; color: inherit; }
/* 필수 별표 — 시안 빨강(.aply-fld__req 톤) */
.aply-form-layout__form .aply-form__req { color: #d64550; font-weight: 700; margin-left: 2px; }
/* 필드 셀 여백 + 안내 note 시안 hint 톤 */
.aply-form-layout__form .aply-form__cell { padding: 8px 0; }
.aply-form-layout__form .aply-form__note { color: #8f8f8f; font-size: 13px; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
/* 모달 본문 — 폼 좌우 약간의 여백 (다크 상단선/행 구분선은 .aply-form-layout__form 공통) */
.aply-modal-form { padding: 4px 4px 0; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
/* ↑ 모달은 TelerikWindow 가 .applicant-styled 바깥(body 레벨)에 렌더 → .applicant-styled 폰트 override 안 닿음. .aply-modal-form 에 직접 뉴디자인 폰트 지정. */

/* ── 모달 폼 보정 (사용자 피드백) ────────────────────────────────────────────
   ① navy primary 버튼(저장/수정) 글씨 검정→흰색 — 시안 common.css reset(span color:#202020)이
      kendo 흰글씨 상속을 덮던 것 복원(.k-button-text/icon 직접 타겟).
   ② 저장/수정 = 뉴 디자인 navy pill(.main-btn 톤) — kendo 기본 사각 대신.
   ③ 가로 넘침 차단 — 긴 안내버튼이 든 .aply-form__row--nowrap 가 모달 폭 초과 → 모달 안에선 줄바꿈 허용 + 버튼 텍스트 wrap.
   ④ 입력 폭 캡 — Width="100%" 텍스트박스/textarea 가 모달 폭(1100px) 끝까지 늘어나 가로 스크롤·과폭 유발 → 폭 제한. */
.applicant-styled .k-button-solid-primary .k-button-text,
.applicant-styled .k-button-solid-primary .k-icon,
.applicant-styled .k-button-solid-primary .k-svg-icon { color: #fff !important; }
/* ② 모달 하단 액션 navy pill (Aply006 .aply-action-bar 는 .main-btn raw 라 무관 — 여긴 kendo 버튼만) */
/* 색은 navy → 공통버튼 파랑(#0d6efd)으로 교체(2026-08-13) — 저장 계열 버튼은 파랑, 이동·완료(다음/지원완료)는 navy 로 역할 구분.
   이 셀렉터가 닿는 건 Aply005 실적 입력 모달의 저장/수정뿐이다(다른 액션바 버튼은 kendo 가 아니라 .main-btn raw). */
.aply-action-bar .k-button-solid-primary {
    background: #0d6efd !important; border-color: #0d6efd !important;
    border-radius: 100px !important; padding: 11px 38px !important; height: auto !important;
    font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important;
}
.aply-action-bar .k-button-solid-primary:hover:not(.k-disabled) { background: #0b5ed7 !important; border-color: #0b5ed7 !important; }
/* 저장/수정 글씨 흰색 — 모달은 .applicant-styled 밖이라 위 .applicant-styled .k-button-text 규칙이 안 닿음 → .aply-action-bar 로 직접(시안 common.css reset 이김) */
.aply-action-bar .k-button-solid-primary .k-button-text,
.aply-action-bar .k-button-solid-primary .k-icon,
.aply-action-bar .k-button-solid-primary .k-svg-icon { color: #fff !important; }
/* ③ 가로 넘침 */
.aply-modal-form .aply-form__row--nowrap { flex-wrap: wrap; }
.aply-modal-form .aply-guide-btn { white-space: normal; text-align: left; height: auto; line-height: 1.4; }
/* ④ 입력 폭 캡 — Width="100%" 입력이 모달 폭 끝까지 늘어나 가로 스크롤·과폭 → 적정 폭 제한(사용자 지시 "width값 조정"). 고정폭 드롭다운(180px 등)은 max-width 보다 작아 영향 없음. */
.aply-modal-form .aply-form__cell .k-input,
.aply-modal-form .aply-form__cell .k-textarea { max-width: 560px; }
/* ④-보강: 필드별 폭 (2026-07-09) — 셀(.aply-form__cell)은 flex 자식이라 기본 shrink-to-fit(내용폭).
   실적물 제목 셀만 --grow 로 행 남은 폭 전부 차지 + 위 560px 캡 해제("최대", 캡 규칙보다 뒤라 승).
   연구자(저자명)=280px·학술지(제출처)명=560px 는 razor 인라인 Width 로 지정(캡 560 이내라 그대로 적용). */
.aply-modal-form .aply-form__cell--grow { flex: 1 1 auto; min-width: 0; }
.aply-modal-form .aply-form__cell--grow .k-input { max-width: none; }
/* 셀 안 같은 줄 콤보/요소 가로 간격 — 실적물구분(구분+상세) 콤보가 gap 없이 붙던 것 분리 + 같은 줄 요소 일관 정렬 */
.aply-modal-form .aply-form__cell .aply-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 셀 안 여러 줄(.aply-form__row) 세로 간격 — 기본 0이라 게재등급/규모(줄1·줄2·줄3)가 위아래로 붙던 것 분리 */
.aply-modal-form .aply-form__cell .aply-form__row + .aply-form__row { margin-top: 10px; }

/* Telerik DatePicker 달력 팝업 — 날짜 두 자리(10~31)가 좁은 셀에서 세로로 쪼개지던 것 방지(팝업 폭 부족).
   팝업은 body 레벨(.k-animation-container)에 렌더돼 .applicant-styled 밖 → 전역 셀렉터로 폭·nowrap 보장.
   admin 은 자체 app.css 라 이 파일(ApplicantWeb 전용) 영향 없음. */
.k-animation-container .k-calendar { min-width: 19.5em; }
.k-animation-container .k-calendar .k-calendar-td { padding: 1px; }
.k-animation-container .k-calendar .k-link { white-space: nowrap; }

/* ── Aply004 경력증명서 파일첨부 — Notice/Write 파일첨부와 동일 board 행 구조(.write-wrap > .write-footer > ul.file > li).
   board-common.css(이미 로드)가 회색 라벨셀(140px·클립아이콘)·파일input·.tip 을 그대로 스타일링. 여기선 상단선·필수표시·안내 점리스트만 보강. ── */
/* Aply004/005 등록건수 카운트바(.basic_box) — info-box 바로 뒤라 위에 딱 붙던 것:
   위 간격↑(info-box 와 분리) · 아래 간격↓(아래 그리드와 시각적으로 묶음). info-box 다음에 올 때만. */
.applicant-styled .info-box + .basic_box { margin-top: 30px; margin-bottom: 10px; }
.applicant-styled .aply-cert { margin-top: 28px; }
/* 경력증명서 업로드 안내 PDF 버튼 — 파일표(상단 dark border) 위, 간격 확보 */
.applicant-styled .aply-cert__guide-btn { margin-bottom: 14px; }
.applicant-styled .aply-cert .write-footer ul.file { border-top: 2px solid #393939; }
/* ── board-common .write-wrap 의존 제거: 파일첨부 행 데스크탑 레이아웃을 .aply-cert 자체로 이식 ──
   board-common 314~317(li flex·회색 라벨셀·div flex)만 가져오고, 모바일 @media(360 `li span{max-width:100%!important;display:block}`,
   356 `input{width:100%!important}` = .aply-hscroll 데스크탑 보기와 충돌해 파일명/InputFile 을 1127px 로 늘리던 누수)는 가져오지 않음. (2026-06-26) */
.applicant-styled .aply-cert .write-footer ul.file li { display: flex; border-bottom: 1px solid #d5d5d5; }
.applicant-styled .aply-cert .write-footer ul.file li strong { display: inline-block; width: 175px; min-width: 175px; background: #f9f9f9; text-align: center; }
.applicant-styled .aply-cert .write-footer ul.file li strong i { font-size: 18px; color: #444; transform: rotate(45deg); display: inline-block; }
.applicant-styled .aply-cert .write-footer ul.file li > div { width: 100%; display: flex; }
/* 행 컴팩트 — board-common 의 li strong padding(18px)·stretch 정렬이 행을 과하게 높이던 것 축소(수직 중앙) */
.applicant-styled .aply-cert .write-footer ul.file li { align-items: center; }
.applicant-styled .aply-cert .write-footer ul.file li strong { padding-top: 13px; padding-bottom: 13px; }
/* 라벨 셀 폭 — board-common 기본(데스크탑 140px / 태블릿 130px)은 '📎 최종학위논문*'(Aply003)이 안 들어가 별표가 다음 줄로 떨어짐.
   데스크탑·태블릿(≥769px)만 넓혀 한 줄 유지. 모바일(≤768px)은 라벨이 100% 풀폭 스택이라 손대지 않음(.aply-cert 한정 → Notice 첨부 무관). */
@media all and (min-width: 769px) {
    .applicant-styled .aply-cert .write-footer ul.file li strong { width: auto; min-width: 175px; white-space: nowrap; }
}
.applicant-styled .aply-cert .upload { align-items: center; flex-wrap: wrap; gap: 10px 16px; }
/* 좁아지면 파일 행(②: 파일명+미리보기)이 화면 밖으로 넘침 방지 — 라벨 우측 셀(li>div)을 가용폭으로 묶어(min-width:0)
   .upload(flex-wrap)가 ②를 다음 줄로 내리고, ②(파일명)는 ellipsis 로 축소되게. (Aply003/004/005 공용) */
.applicant-styled .aply-cert .write-footer ul.file li > div { flex: 1 1 auto; min-width: 0; }
/* ①(파일선택+저장+tip)·②(파일명+미리보기) 둘 다 min-width:0 → 폭 부족 시 카드 밖으로 넘치지 않고
   각자 flex-wrap 으로 자기 안에서 줄바꿈(①=저장/tip 아래로, ②=파일명 ellipsis). ① 누락 시 tip 이 카드 밖 넘침. */
.applicant-styled .aply-cert__pick,
.applicant-styled .aply-cert__current { min-width: 0; }
.applicant-styled .aply-cert .tip { padding: 0 !important; }
/* 필수(*) — board-common 의 generic `li span{display:flex;padding:10px}` 누수로 별표가 45px 블록이 되어 라벨이 세로로 늘어나던 버그 차단(인라인 복원) */
.applicant-styled .aply-cert__req { display: inline !important; padding: 0 !important; color: #e24353; margin-left: 2px; }
.applicant-styled .aply-cert__guide { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.applicant-styled .aply-cert__guide li { position: relative; padding-left: 14px; color: #5b6573; font-size: 14px; line-height: 1.6; word-break: keep-all; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .aply-cert__guide li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #094d9f; }
/* A안 그룹 묶음 (Aply004) — !important 는 board-common li span 누수(flex/padding) 차단용 */
/* 그룹 ① — 새 파일 선택 + 제약 + 저장 */
.applicant-styled .aply-cert__pick { display: inline-flex !important; align-items: center; gap: 10px; padding: 0 !important; flex-wrap: wrap; }
/* InputFile 폭 — join.css `.form-control{width:100%}` 가 .aply-hscroll 폭(1200)까지 늘리는 것 차단, 콘텐츠폭으로 (2026-06-26) */
.applicant-styled .aply-cert__pick .form-control { width: auto; max-width: 100%; }
/* 그룹 ② — 등록된 파일, 왼쪽 세로 구분선으로 ① 과 분리 */
.applicant-styled .aply-cert__current { display: inline-flex !important; align-items: center; gap: 8px; padding: 0 0 0 16px !important; border-left: 1px solid #d5dae1; }
.applicant-styled .aply-cert__file-icon { color: #094d9f; font-size: 16px; flex: none; }
.applicant-styled .aply-cert__filename { display: inline-block !important; min-width: 0; max-width: 240px !important; padding: 0 !important; margin: 0 !important; color: #094d9f; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
/* 저장 버튼 (레거시 btnSav6) — 파일 선택 후 업로드. 액션 강조용 솔리드 네이비 pill */
.applicant-styled .aply-cert__save { display: inline-flex; align-items: center; padding: 8px 20px; background: #094d9f; color: #fff; border: none; border-radius: 100px; font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; transition: background .15s; }
.applicant-styled .aply-cert__save:hover { background: #0c45ac; }
/* 미리보기 버튼 — Sub.razor .favorites-search 톤(네이비 pill #3244a6 + 돋보기 아이콘), 파일 행에 맞춰 컴팩트 */
.applicant-styled .aply-cert__preview { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: #3244a6; color: #fff; border: none; border-radius: 100px; font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; transition: background .15s; }
.applicant-styled .aply-cert__preview::after { content: ""; display: inline-block; width: 15px; height: 15px; background: url('/_content/JNU.FRS.UI.Common/images/sub/icon_search.svg') no-repeat 50% 50%; background-size: contain; filter: brightness(0) invert(1); }
.applicant-styled .aply-cert__preview:hover { background: #2a3676; }
/* .aply-cert__view-btn — Aply003(.aply-file-area) 전용으로 잔존 (Aply004 는 .aply-cert__preview 사용) */
.applicant-styled .aply-cert__view-btn { display: inline-block; padding: 5px 16px; background: #094d9f; color: #fff; border: none; border-radius: 20px; font-size: 13px; cursor: pointer; font-family: "Paperlogy Regular", "Pretendard", sans-serif; vertical-align: middle; transition: background .15s; }
.applicant-styled .aply-cert__view-btn:hover { background: #0c45ac; }

/* ── Aply008 기타서류 업로드 행 레이아웃 (.aply-cert-form 스코프 → Aply008 전용, Aply004/005 무관) ──
   Aply008 은 TelerikForm(.k-form-field) 셀이라 파일선택이 셀 top에 붙고 한 줄에 다 몰림(Aply004 board ul.file 구조와 다름).
   목표 → 1줄: [파일선택][저장][PDF·최대]  /  2줄: [파일명][미리보기]  + 위 여백. ── */
.applicant-styled .aply-cert-form .d-flex { flex-wrap: wrap; row-gap: 10px; padding-top: 12px; }       /* 위 여백 + 줄바꿈 허용 */
.applicant-styled .aply-cert-form .aply-cert__pick { flex: 1 1 100%; }                                 /* 1줄 풀폭 → 파일명블록 다음 줄로 */
.applicant-styled .aply-cert-form .aply-cert__pick .form-control { width: auto; max-width: 100%; }     /* 파일선택 입력 자동폭 → 저장·tip 옆에 */
.applicant-styled .aply-cert-form .aply-cert__file { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; }  /* 2줄: 파일명 + 미리보기 */
/* 안내문(※…) 들여쓰기 제거 — 부트스트랩 .ms-2 좌측 마진 0 (파일선택/파일명과 좌측 정렬) */
.applicant-styled .aply-cert-form .ms-2 { margin-left: 0 !important; }
/* 파일명 — 2줄 풀폭이라 240px 캡 해제 → 줄 끝까지 쓰고 넘칠 때만 …. 미리보기 버튼은 안 줄어듦 */
.applicant-styled .aply-cert-form .aply-cert__filename { max-width: none; min-width: 0; flex: 0 1 auto; }
.applicant-styled .aply-cert-form .aply-cert__preview { flex: none; }

/* ── Aply004 그리드 '경력사항 정보' 셀 — 레거시 mini-table 처럼 한 칸 안에 부서/직위/주소를 묶어 표시.
   gap:1px + 컨테이너 배경(보더색)으로 셀 구분선, 외곽 라운드 보더. 셀 21px 상속은 16px 로 톤다운.
   부서|값 직위|값 (한 줄) / 주소|값(전화 포함, 우측 끝까지 span). ── */
.aply-sian-grid .aply-carr { text-align: left; font-size: 17px; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.aply-sian-grid .aply-carr__head { margin: 0 0 12px; font-size: 18px; color: #222; line-height: 1.4; word-break: keep-all; }
.aply-sian-grid .aply-carr__grid {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1px; background: #dfe3ea; border: 1px solid #dfe3ea; border-radius: 6px; overflow: hidden;
}
.aply-sian-grid .aply-carr__lbl {
    background: #f4f6f9; color: #5b6573; font-size: 16px; font-weight: 600; min-width: 66px;
    padding: 13px 18px; display: flex; align-items: center; white-space: nowrap;
}
.aply-sian-grid .aply-carr__val {
    background: #fff; color: #333; font-size: 17px; line-height: 1.5;
    padding: 13px 20px; display: flex; align-items: center; word-break: break-all;
}
.aply-sian-grid .aply-carr__val--wide { grid-column: 2 / -1; }

/* ============================================================
   Aply 페이지 하단 액션 버튼 영역 (.aply-action-bar) — AplyBottomButton/AplyButton(V8) 대체.
   지원완료/지원중으로 변경/원서출력 등 1~2개 액션을 가운데 정렬. 버튼 = 시안 .main-btn(navy pill).
   .aply-next-actions(스텝퍼 '다음' 전용, 화살표 모션)와 의미 구분 — 이건 일반 액션 버튼용.
   .main-btn 정의는 sub-contents.css(SubCss) → aply-sian.css 가 뒤 로드라 outline 변형 override OK.
   ============================================================ */
.aply-action-bar { display: flex; justify-content: center; gap: 16px; margin: 40px 0 8px; }
/* 액션바 버튼 — Aply 플로우 통일: .main-btn 기본 24px(히어로 CTA용)을 다음·원서등록(.aply-next-main)과 같은 18px 로 톤다운.
   화살표는 없음(일반 액션 + 다중 버튼). 지원완료/지원중으로 변경/원서출력 공통 적용(outline 변형 포함). */
/* justify-content 는 center 로 덮는다 — .main-btn 기본값 space-between 은 아이콘+라벨(화살표 버튼) 전제라
   라벨만 있는 버튼이 모바일에서 풀폭이 되면 글자가 왼쪽으로 쏠린다(바로 아래 '다음'은 중앙이라 어긋나 보임). */
.aply-action-bar .main-btn { font-size: 18px; padding: 18px 48px; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
/* 액션바 hover — 다음·원서등록(navy darken + 화살표 슬라이드)과 의미 구분: 얜 '이동'이 아니라 '완료/출력' 액션이라
   화살표·가로 모션을 안 쓴다. 대신 시안 login-blue(#1c60c5)로 살짝 밝아지는 hover(stepper 와 반대 방향 시그니처).
   기본 .main-btn 솔리드엔 hover 가 없었음 → 여기서 부여. outline 변형은 자체 hover(#f0f5fc) 유지. */
.aply-action-bar .main-btn:not(.main-btn--outline):not(:disabled):hover,
.aply-action-bar .main-btn:not(.main-btn--outline):not(:disabled):focus { background: #1c60c5; }
/* 비활성(Aply001 하단 저장 — 접수완료/기간 외) — CommonButton 비활성과 같은 방식: 회색 솔리드 대신 같은 톤을 흐리게. */
.aply-action-bar .main-btn:disabled { opacity: .4; box-shadow: none; cursor: default; }
/* 저장 변형 — 상단 CommonButton 과 같은 파랑(#0d6efd). '다음'(navy)과 색이 같으면 이동 버튼처럼 보여서 구분한다.
   Aply001 하단 저장 전용이라 액션바의 다른 버튼(지원완료·원서출력 등 navy)은 그대로 둔다. */
.aply-action-bar .main-btn--save { background: #0d6efd; }
.aply-action-bar .main-btn--save:hover,
.aply-action-bar .main-btn--save:focus { background: #0b5ed7; }

/* .main-btn 기본 = 솔리드 navy(채움). outline 변형 = 보조 액션(지원중으로 변경) — 흰 배경 + navy 외곽선, flat(그림자 제거). */
.main-btn--outline { background: #fff; color: #094d9f; border: 2px solid #094d9f; box-shadow: none; }
.main-btn--outline:hover, .main-btn--outline:focus { background: #f0f5fc; color: #073e80; border-color: #073e80; }
@media all and (max-width: 767px) { .aply-action-bar { flex-direction: column; align-items: stretch; } }

/* ============================================================
   Aply006 지원완료 — 부정행위 동의 + 설문조사 + 미리보기 버튼 (CSS 전용 재skin)
   ------------------------------------------------------------
   마크업·비하인드 무수정. 셸은 이미 뉴 디자인(.text-subtitle·.info-box·.aply-sian-grid·.aply-action-bar).
   여기선 남은 3블록만 뉴 디자인 navy 톤으로:
     ① 부정행위 동의(.agree-*)  — join.css 클래스인데 Aply006 은 join.css 미로드 → 여기서 정의.
        (Join01 은 .applicant-styled 밖이라 이 스코프가 안 걸림 → join.css 원본 유지. 충돌 0.)
     ② 설문(AplyBox/AplyBoxNote/AplyBoxCard + .aply-survey-*) — aply.css(V8 초록) 위 navy override.
     ③ 미리보기 7버튼(AplyButtonGroup/AplyButton filled) — .aply-btn--filled 는 이미 navy(82~84행),
        여기선 작은 버튼 줄바꿈 그리드 레이아웃만 보정.
   전부 .applicant-styled 스코프 → 다른 앱/Join/홈 무영향, aply.css(0,1,0)보다 높은 특이도(0,2,0)로 승.
   ※ AplyBox/Note/Card 는 Aply007 도 사용 → 이 규칙이 Aply007 까지 함께 뉴 디자인화(의도된 공통).
   ============================================================ */

/* ① 부정행위 동의 — join.css .agree-* 구조를 뉴 디자인 navy(#094d9f) 카드로. join.css 와 동일 글리프(\F26B/\F26A). */
.applicant-styled .agree-list { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 8px; }
.applicant-styled .agree-item { border: 1px solid #e3e8f2; border-radius: 14px; overflow: hidden; }
.applicant-styled .agree-item-head { padding: 22px 26px; border-bottom: 1px solid #eef1f5; }
.applicant-styled .agree-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: none; cursor: pointer; text-align: left; font: inherit; line-height: 1.5; }
/* 체크 아이콘(bootstrap-icons) — 빈=연한 navy-gray / 체크=navy */
.applicant-styled .agree-btn::before { font-family: 'bootstrap-icons'; content: '\F26B'; font-size: 26px; line-height: 1; color: #b9c6e0; flex-shrink: 0; transition: color .15s ease; }
.applicant-styled .agree-btn.is-checked::before { content: '\F26A'; color: #094d9f; }
.applicant-styled .agree-btn-text { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; color: #222; word-break: keep-all; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .agree-btn .required { color: #d64550; margin-left: 2px; }
/* 약관 본문 — 뉴 디자인 박스 톤(#f8f9ff = info-box/faq-a 와 동일) */
.applicant-styled .agree-box { padding: 20px 26px; background: #f8f9ff; color: #4a4a4a; font-size: 15px; line-height: 1.85; }

/* ② 설문 — AplyBox(연한 navy 패널) > AplyBoxNote(안내 한 줄) + AplyBoxCard(흰 질문 카드) */
.applicant-styled .aply-box { background: #f8f9ff; border: 1px solid #e3e8f2; border-radius: 16px; padding: 26px; margin-top: 8px; }
.applicant-styled .aply-box__header { margin-bottom: 16px; }
.applicant-styled .aply-box__title { margin: 0; font-size: 20px; font-weight: 700; color: #094d9f; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .aply-box__subtitle { margin: 4px 0 0; font-size: 14px; color: #707070; }
.applicant-styled .aply-box__body { display: flex; flex-direction: column; gap: 16px; }

/* 안내 한 줄 (AplyBoxNote Tone 5종) — 뉴 디자인 톤 통일(navy 계열 + closing 회색). amber/원색 green → 시안 톤 */
.applicant-styled .aply-box-note { margin: 0; padding: 14px 18px; border-radius: 10px; font-size: 15px; line-height: 1.7; word-break: keep-all; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .aply-box-note--info,
.applicant-styled .aply-box-note--warning { background: #eef3fb; color: #0a3a73; border: 1px solid #d9e3f7; }
.applicant-styled .aply-box-note--success { background: #eef3fb; color: #0a3a73; border: 1px solid #d9e3f7; }
.applicant-styled .aply-box-note--danger { background: #fdecee; color: #b3263a; border: 1px solid #f4ccd2; }
.applicant-styled .aply-box-note--closing { padding: 6px 0 0; background: transparent; border: none; color: #8a8a8a; text-align: center; font-size: 14px; }

/* 질문 카드 — 흰 카드 + navy 번호 */
.applicant-styled .aply-box-card { background: #fff; border: 1px solid #e3e8f2; border-radius: 12px; padding: 20px 22px; }
.applicant-styled .aply-box-card__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #222; line-height: 1.5; word-break: keep-all; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .aply-box-card__title span { color: #094d9f; }
.applicant-styled .aply-box-card__hint { margin: 0 0 12px; font-size: 13px; color: #8f8f8f; }
.applicant-styled .aply-box-card__body { font-size: 15px; color: #393939; }

/* 설문 옵션 목록(체크박스 줄) + 기타 입력 힌트 */
.applicant-styled .aply-survey-opt-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.applicant-styled .aply-survey-opt-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; color: #393939; }
.applicant-styled .aply-survey-opt-list label { font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .aply-survey-q__hint { font-size: 13px; color: #8f8f8f; }

/* ③ 미리보기 7버튼 — 색은 .aply-btn--filled(82~84행, navy) 그대로, 작은 버튼 줄바꿈 그리드 레이아웃만 */
.applicant-styled .aply-button-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; }
.applicant-styled .aply-button-group .aply-btn { height: auto; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .link-wrap { margin-bottom: 24px; }

/* ============================================================
   Aply006/007 — TelerikButton을 시안 list-link pill 톤으로 (k-button override)
   sub-contents.css .list-link 기반. k-button 복합 셀렉터 대응 specificity 보강.
   ============================================================ */
.applicant-styled .k-button.list-link { border-radius: 100px !important; border: 1px solid #1c59a4 !important; background: #fff !important; color: #1c59a4 !important; font-size: 18px !important; font-weight: 700 !important; padding: 12px 28px !important; min-width: auto !important; gap: 10px; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none !important; }
.applicant-styled .k-button.list-link:hover,
.applicant-styled .k-button.list-link:focus { background: #1d67c0 !important; color: #fff !important; box-shadow: 1px 3px 4px 0 rgba(150,150,150,.32) !important; }
.applicant-styled .k-button.list-link.download::after { content: "" !important; display: inline-block !important; width: 20px !important; height: 20px !important; background: url('/_content/JNU.FRS.UI.Common/images/sub/icon_link_download.svg') no-repeat 50% 50% !important; background-size: contain !important; }
.applicant-styled .k-button.list-link.download:hover::after { filter: brightness(0) invert(1) !important; }
.applicant-styled .k-button.list-link.favorites-search { background: #3244a6 !important; color: #fff !important; border-color: #3244a6 !important; }
.applicant-styled .k-button.list-link.favorites-search::after { content: "" !important; display: inline-block !important; width: 20px !important; height: 20px !important; background: url('/_content/JNU.FRS.UI.Common/images/sub/icon_search.svg') no-repeat 50% 50% !important; background-size: contain !important; filter: brightness(0) invert(1) !important; }
.applicant-styled .k-button.list-link.favorites-search:hover { background: #2a3676 !important; }

/* ── 섹션 타이틀 바 — 타이틀 좌측 + 액션 버튼 우측 (Aply007 일괄 다운로드 등) ── */
.applicant-styled .aply-section-bar { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.applicant-styled .aply-section-bar .text-subtitle { margin: 0; }
.applicant-styled .aply-section-bar__action { padding: 10px 24px; background: #fff; color: #094d9f; border: 1px solid #094d9f; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: "Paperlogy Regular", "Pretendard", sans-serif; transition: all .15s; }
.applicant-styled .aply-section-bar__action:hover { background: #094d9f; color: #fff; }

/* ── 섹션 서브 타이틀 (Aply007 첨부서류/연구사항 구분) ── */
.applicant-styled .aply-section-sub { font-size: 15px; font-weight: 600; color: #393939; margin: 24px 0 8px; padding-left: 12px; border-left: 3px solid #094d9f; font-family: "Paperlogy Regular", "Pretendard", sans-serif; }

/* ── 타이틀 옆 주의 문구 — .text-subtitle(24px) 안에서 본문 크기로 낮춰 병기. 색은 .aply-emph--warn 병용 ── */
.applicant-styled .text-subtitle .aply-title-note { margin-left: 14px; font-size: 15px; font-weight: 600; word-break: keep-all; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }

/* ── 일괄 다운로드 모달 (Aply007) ── */
.aply-batch-dl { padding: 8px 0; max-height: 70vh; overflow-y: auto; }
.aply-batch-dl__section { margin-bottom: 16px; }
.aply-batch-dl__heading { font-size: 15px; font-weight: 600; color: #094d9f; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #e0e0e0; font-family: "Paperlogy Regular", "Pretendard", sans-serif; }
.aply-batch-dl__all { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; cursor: pointer; font-family: "Paperlogy Regular", "Pretendard", sans-serif; }
.aply-batch-dl__item { display: block; font-size: 14px; padding: 4px 0 4px 8px; cursor: pointer; font-family: "Paperlogy Regular", "Pretendard", sans-serif; }
.aply-batch-dl__item--disabled { color: #999; cursor: default; }
.aply-batch-dl__badge { display: inline-block; font-size: 11px; color: #e24353; margin-left: 6px; }
.aply-batch-dl__footer { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 14px; border-top: 1px solid #e0e0e0; }
.aply-batch-dl__download { padding: 10px 28px; background: #094d9f; color: #fff !important; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: "Paperlogy Regular", "Pretendard", sans-serif; transition: background .15s; }
.aply-batch-dl__download span { color: #fff !important; }
.aply-batch-dl__download:hover { background: #0c45ac; }
.aply-batch-dl__download:disabled { background: #bbb; cursor: default; }

/* ============================================================
   aply.css orphan 해소 — 삭제된 aply.css에서 실사용 클래스만 이전
   ============================================================ */

/* 강조 텍스트 */
.aply-emph { color: #094d9f !important; font-weight: 700; }
.aply-emph--warn { color: #f05a7e !important; font-weight: 700; }
.aply-emph-note { color: #393939 !important; font-weight: 500; }

/* 접수기간 경고 박스 */
.applicant-styled .aply-period-warning { margin: 0 0 16px; padding: 12px 16px; background: #fff5f5; border-left: 3px solid #d21a48; border-radius: 4px; color: #d21a48; font-size: 13px; font-weight: 600; line-height: 1.6; }

/* 폼 — 숫자+단위 묶음 */
.applicant-styled .aply-form__unit { display: inline-flex; align-items: center; gap: 2px; }

/* 폼 — JCR 링크 */
/* 모달(TelerikWindow)이 .applicant-styled 밖에 렌더되므로 스코프 없이 — 이 클래스는 JCR 버튼 전용 */
.aply-form__jcr-link { display: inline-block; background: #094d9f; color: #fff !important; padding: 4px 10px; text-decoration: none; border-radius: 4px; font-size: 12px; }
.aply-form__jcr-link:hover { background: #0c45ac; color: #fff !important; }

/* 등록건수 정보 박스 */
.applicant-styled .aply-list-meta { margin: 0 0 12px; padding: 12px 18px; background: #f8f9ff; border: 1px solid #e3e8f2; border-radius: 8px; font-size: 13px; color: #393939; }

/* 사진 이미지 */
.applicant-styled .aply-photo__img { width: 100%; height: 100%; object-fit: cover; }

/* 파일 영역 (Aply003 학위논문/법조경력) */
.applicant-styled .aply-file-area__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.applicant-styled .aply-file-area__hint { color: #6e726b; font-size: 12px; }
.applicant-styled .aply-file-area__guide { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: #5b6573; line-height: 1.6; }
.applicant-styled .aply-file-area__guide li { padding-left: 14px; position: relative; }
.applicant-styled .aply-file-area__guide li::before { content: "·"; position: absolute; left: 4px; color: #094d9f; }

/* Vimeo 영상 배지 (Aply005 그리드) */
.applicant-styled .aply-grid__vimeo { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }   /* 셀 = 배지(위)/버튼(아래) 세로 스택 + 중앙정렬. 구 Aply005 인라인 <style>서 이관 */
/* 텍스트만 — 배경 pill·라운드 제거, 시안 팔레트 색상 글자만. '업로드 필요'=주의 앰버 유지 */
.applicant-styled .aply-grid__vimeo-badge { font-size: 14px; font-weight: 600; font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif; }
.applicant-styled .aply-grid__vimeo-badge--need { color: #9a6418; }
.applicant-styled .aply-grid__vimeo-badge--pending { color: #2d5a7c; }
.applicant-styled .aply-grid__vimeo-badge--done { color: #094d9f; }
.applicant-styled .aply-grid__vimeo-badge--failed { color: #d9434e; }
.applicant-styled .aply-grid__vimeo-na { color: #bbb; font-size: 12px; }

/* (구) Check001 도움말/알림 모달 CSS — 412줄 주석대로 css/app.css 로 일원화. 여기 옛 사본은 app.css 정식본을
   (늦게 로드돼) 부분적으로 덮어 프랑켄슈타인 모달을 만들던 잔재 → 제거(2026-06-25). 모달 스타일은 app.css 단일 소스. */

/* ============================================================
   CommonButton — 파랑 솔리드 톤(2026-08-12. 그 전엔 블루그레이 #2d5a7c, 2026-06-19).
   활성 = #0d6efd 솔리드 + 흰 글자/아이콘. 비활성 = 같은 톤을 흐리게(opacity) — 회색 솔리드 X("그레이 너무 주지 말고").
   색 기준 = 회원가입(/Register) 분야 검색 버튼(bootstrap .btn-primary) — 사용자 지정.
   ApplicantWeb 앱 경계(aply-sian, SubLayout 로드) — admin 무영향. behind(.razor) 무수정.
   ============================================================ */
.common-button-bar { padding: 12px 0; border-bottom: 1px solid #e5e5e5; margin-bottom: 16px; }
/* 크기 — 2026-08-12 사용자 요청으로 확대(13px/7·16px → 16px/11·26px). 아이콘도 같이 키움. */
.common-button-bar .k-button { border-radius: 8px; font-size: 16px; font-weight: 600; font-family: 'Paperlogy', sans-serif; padding: 11px 26px; border: none; transition: background .15s, opacity .15s; }
.common-button-bar .k-button .k-button-icon { font-size: 20px; width: 20px; height: 20px; }
.common-button-bar .k-button .k-svg-icon > svg { width: 20px; height: 20px; }
/* 좁은 폭 방어 — 시안 reset(`* { flex-shrink: 0 }`)이라 버튼이 줄어들지 못한다.
   nowrap 이면 바 폭을 넘는 순간 마지막 버튼이 그대로 잘려 못 누르게 되므로 줄바꿈을 허용한다.
   (버튼 3개인 Aply005 기준, 확대 후 390px 뷰포트에서 잘림 재현)
   max-width/min-width 도 같이 준다 — 버튼줄 자체도 shrink 가 막혀 있어 폭이 내용만큼 늘어나면
   줄바꿈 계산이 일어나지 않고 부모 밖으로 삐져나간다(320px 에서 재현). */
.common-button-bar { flex-wrap: wrap; }
.common-button-bar .common-button-breadcrumb { min-width: 0; }
.common-button-bar .d-flex.flex-row-reverse { flex-wrap: wrap; max-width: 100%; min-width: 0; }
/* 모바일은 확대분을 한 단계 낮춰 한 줄에 들어가게 — 데스크톱 크기는 유지. */
@media all and (max-width: 480px) {
    .common-button-bar .k-button { font-size: 14px; padding: 9px 16px; }
    .common-button-bar .k-button .k-button-icon { font-size: 18px; width: 18px; height: 18px; }
    .common-button-bar .k-button .k-svg-icon > svg { width: 18px; height: 18px; }
}
/* 글자색 = 흰색 직접 지정 — 시안 common.css reset 이 span(.k-button-text)에 color:#202020 을 "직접" 박아
   버튼의 color:#fff 상속을 무력화하므로(sian_reset_color_trap), span 을 직접 타겟해 흰색 복원. */
.common-button-bar .k-button .k-button-text { font-family: inherit; color: #fff !important; }

/* 활성 — 파랑 솔리드 + 흰 글자/아이콘.
   2026-08-12: 블루그레이(#2d5a7c)가 눈에 안 띈다는 요청으로 회원가입 검색 버튼과 같은 #0d6efd 로 교체.
   hover/active 도 bootstrap btn-primary 값(#0b5ed7 / #0a58ca) 그대로. */
.common-button-bar .k-button.k-button-outline.k-rounded-lg:not(:disabled) { background: #0d6efd; color: #fff; border: 1px solid #0d6efd; }
.common-button-bar .k-button.k-button-outline.k-rounded-lg:not(:disabled):hover { background: #0b5ed7; border-color: #0b5ed7; }
.common-button-bar .k-button.k-button-outline.k-rounded-lg:not(:disabled) .k-svg-icon svg { fill: #fff; }

/* 비활성 — 같은 파랑 톤을 흐리게(회색 솔리드 대신 opacity). */
.common-button-bar .k-button:disabled { background: #0d6efd; color: #fff; border: 1px solid #0d6efd; opacity: .4; }
.common-button-bar .k-button:disabled .k-svg-icon svg { fill: #fff; }

/* 단축키 표기 숨김 — F2~F9 키 배선(frsTabs.js+FrsTabHost)은 AdminWeb 전용이라
   지원자에서는 동작하지 않는 표기(F3=엣지 찾기 등 브라우저 기본 동작). 지원자만 숨김(2026-07-23). */
.common-button-bar .cb-shortcut { display: none; }

/* breadcrumb 텍스트 */
.common-button-breadcrumb { font-size: 13px; color: #666; }

/* ── 회차 선택 (Infor/Branch 공통) ── */
.sqnce-selector { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.sqnce-selector .text-subtitle { margin: 0; white-space: nowrap; font-size: 22px; }
.sqnce-select {
    width: 320px; height: 44px; font-size: 16px;
    border: 1px solid #094d9f; border-radius: 8px;
    padding: 0 36px 0 14px; color: #222;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23094d9f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer; transition: border-color .2s;
}
.sqnce-select:focus { border-color: #0c45ac; box-shadow: 0 0 0 2px rgba(9,77,159,.12); outline: none; }

/* ============================================================
   Infor001 채용 공고 — 2축 구조(회차 드롭다운 × 공고종류 밑줄 탭)
   · 상위 축(회차)=위 .sqnce-select(드롭다운) / 하위 축(전임·기금)=아래 밑줄 탭 → 컨트롤 모양 분리로 위계 구분.
   · 톤: Aply 시안 흰 카드(.aply-form-card, Aply001 과 동일)로 감싸고 → 회차 + 밑줄 탭 + 라이트 헤더 PDF 뷰어.
   · navy = #094d9f (앱 전역 토큰 — 참조 이미지의 #1e3a5f 대신 통일).
   · PDF 는 기존 <embed> 그대로, 틀(탭/카드/액션바)만 신규. infor- prefix 로 스코프(전역/타 페이지 무영향).
   ============================================================ */

/* 하위 축: 공고종류 밑줄 탭 (항상 2개 고정) */
.infor-doctabs { display: flex; gap: 8px; border-bottom: 1px solid #d4d4d4; }
.infor-doctab {
    -webkit-appearance: none; appearance: none; background: none; border: none; cursor: pointer;
    padding: 12px 20px; margin-bottom: -1px;
    font-family: "Paperlogy Regular", "Pretendard", sans-serif; font-size: 17px; font-weight: 400;
    color: #888; border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .15s, border-color .15s;
}
.infor-doctab:hover { color: #094d9f; }
.infor-doctab.is-active { color: #094d9f; font-weight: 500; border-bottom-color: #094d9f; }
/* "준비중" 미등록 배지 — 회색, 각진(2px) 미니 */
.infor-doctab__badge {
    font-size: 12px; font-weight: 400; color: #707070;
    background: #ededed; border-radius: 2px; padding: 2px 8px; line-height: 1.5;
}

/* PDF 카드 — 라이트 헤더 바 + 흰 본문. 시안 Aply 카드 톤과 맞춰 둥근 모서리(8px). */
.infor-pdfcard {
    margin-top: 24px;
    border: 1px solid #e3e3e3; border-radius: 8px;
    overflow: hidden; background: #fff;
}
/* 헤더 — 라이트 바(navy 배경 X — 사용자 피드백), 우측 액션(아이콘 버튼). */
.infor-pdfcard__head {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 12px 16px; background: #f7f8fa; border-bottom: 1px solid #e3e7ee;
}
/* 액션 — 분리된 아이콘 버튼. 라이트 바 위: 새창=navy outline / 다운로드=navy 솔리드(주 액션). */
.infor-pdfcard__actions { display: flex; gap: 8px; flex-shrink: 0; }
.infor-pdfcard__btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: "Paperlogy Regular", "Pretendard", sans-serif; font-size: 14px; font-weight: 500;
    padding: 8px 16px; border-radius: 6px; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.infor-pdfcard__btn-ico { flex-shrink: 0; }
.infor-pdfcard__btn--ghost { background: #fff; border-color: #094d9f; color: #094d9f; }
.infor-pdfcard__btn--ghost:hover { background: #f0f5fc; }
.infor-pdfcard__btn--solid { background: #094d9f; border-color: #094d9f; color: #fff; }
.infor-pdfcard__btn--solid:hover { background: #073e80; border-color: #073e80; }
/* PDF 본문 — 기존 <embed> 그대로 */
.infor-pdfcard__body { display: block; }
/* PDF 뷰어 — 창 높이의 65%로 고정. embed 는 화면 안에 들어오고 PDF 는 그 안에서 내부 스크롤
   (페이지 수와 무관하게 뷰어 크기 일정). 작은 화면 하한 520px / 큰 모니터 상한 900px. */
.infor-pdfcard__body embed { display: block; width: 100%; height: 65vh; min-height: 520px; max-height: 900px; }
/* 미등록 — .doc-empty 를 카드 본문에 flush(중첩 박스·라운드 제거) */
.infor-pdfcard__body .doc-empty { border: none; border-radius: 0; background: #fff; min-height: 360px; }

@media (max-width: 768px) {
    .infor-doctab { padding: 10px 14px; font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════════
   §모바일 재설계 (2026-06-29) — 지원하기(Aply001~008) 전면 반응형
   ------------------------------------------------------------------------
   기존: ≤1024px 에서 데스크탑 1200px 를 통째 가로 스크롤(.aply-hscroll). → 폐지.
   신규: 좁은 화면에서 콘텐츠를 모바일 레이아웃으로 재배치한다.
     · 폼   → 라벨 위 / 필드 아래 1열 세로 스택 + 컨트롤 풀폭(인라인 Width 무력화)
     · 그리드 → 카드형(헤더 숨김, 행=카드, 셀=라벨:값). 셀 라벨은 aply-mobile.js 가
               헤더 제목을 읽어 data-label 로 주입(MutationObserver 로 재렌더 대응).
     · 스텝퍼 → 가로 스크롤 스트립(페이지 아닌 스텝퍼만 스크롤, 활성 스텝 자동 노출)
     · 파일첨부/모달/액션버튼 → 세로 스택·풀폭
   브레이크포인트: 태블릿 ≤1024 / 모바일 ≤768 / 소형 ≤480.
   스코프: .applicant-styled · .aply-* (SubLayout 에서만 로드 → 홈/AdminWeb 무영향).
   ════════════════════════════════════════════════════════════════════════ */

/* ── off-canvas 모바일 드로어 가로 넘침 차단 ──
   햄버거 슬라이드 메뉴(.mobile-header-nav-wrap, Gnb)가 닫힘 상태에서 화면 밖 오른쪽에 위치하지만
   클리핑되지 않아 body scrollWidth 를 ~80px 늘려 sub 페이지 전반에 잔여 가로 스크롤을 만든다.
   드로어는 position:fixed + transform:translateX(110%) 로 화면 밖으로 밀리므로 body 클리핑으론 부족 —
   fixed 요소의 넘침은 루트(html=스크롤 컨테이너)에서 클리핑해야 한다 → html·body 둘 다 overflow-x:hidden.
   드로어 활성 범위(Gnb 가 ≤1024 에서 .mobile-header 사용)로 한정.
   (세로 스크롤·고정 헤더·열린 드로어(뷰포트 내)·내부 .aply-hscroll 스크롤엔 영향 없음.) */
@media all and (max-width: 1024px) {
    html, body { overflow-x: hidden; }
}

/* ── 스텝퍼(AplyTabNav) — 모바일: 가로 폭 꽉 채워 균등분할 + 큰 원 (작아 보이지 않게) ── */
@media all and (max-width: 768px) {
    .aply-steps { margin: 0 0 24px; padding: 0; }
    .aply-step { flex: 1 1 0; min-width: 0; gap: 8px; padding-top: 2px; }   /* 폭 균등분할로 가로 꽉 채움 */
    .aply-step__num { width: 40px; height: 40px; font-size: 17px; }         /* 원 크게(34→40) — 가로폭 활용 */
    .aply-step::before { top: 22px; }                                       /* 40px 원 중심(20)+padding-top(2) 에 연결선 정렬 */
    .aply-step__name { font-size: 11.5px; white-space: nowrap; letter-spacing: -0.5px; }   /* 6칸 균등분할에 6자 한 줄 */
}
/* 아주 좁은 화면(≤380) — 원/글자 살짝 축소해 6칸 유지 */
@media all and (max-width: 380px) {
    .aply-step__num { width: 34px; height: 34px; font-size: 15px; }
    .aply-step::before { top: 19px; }
    .aply-step__name { font-size: 10px; letter-spacing: -0.7px; }
}

/* ── 폼(aply-form-layout__form / 모달 aply-modal-form) — 모바일: 라벨 위 / 필드 아래 세로 스택 ── */
@media all and (max-width: 768px) {
    /* 행: 가로(라벨│필드) → 세로 스택 */
    .aply-form-layout__form .k-form-field { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 0; }
    /* 라벨 셀: 고정폭 가운데 회색 셀 → 풀폭 좌측 정렬 바 */
    .aply-form-layout__form .aply-fld__label,
    .aply-form-layout__form .form-label {
        width: 100% !important; min-width: 0 !important; max-width: none !important;
        justify-content: flex-start !important; text-align: left !important;
        padding: 10px 12px !important; border-radius: 6px;
    }
    /* 컨트롤 과폭/overflow 차단 — 모든 Telerik 위젯 컨테이너폭 이내로 캡(인라인 Width=600/350/180… 무력화) */
    .aply-form-layout__form .k-form-field .k-input,
    .aply-form-layout__form .k-form-field .k-picker,
    .aply-form-layout__form .k-form-field .k-textbox,
    .aply-form-layout__form .k-form-field .k-combobox,
    .aply-form-layout__form .k-form-field .k-dropdownlist,
    .aply-form-layout__form .k-form-field .k-maskedtextbox,
    .aply-form-layout__form .k-form-field .k-datepicker,
    .aply-form-layout__form .k-form-field .k-numerictextbox,
    .aply-form-layout__form .k-form-field .k-textarea { max-width: 100% !important; }
    /* 라벨 바로 밑 단독 컨트롤 → 풀폭 */
    .aply-form-layout__form .k-form-field > .k-input,
    .aply-form-layout__form .k-form-field > .k-picker,
    .aply-form-layout__form .k-form-field > .k-combobox,
    .aply-form-layout__form .k-form-field > .k-dropdownlist,
    .aply-form-layout__form .k-form-field > .k-textbox,
    .aply-form-layout__form .k-form-field > .k-maskedtextbox,
    .aply-form-layout__form .k-form-field > .k-textarea { width: 100% !important; }
    /* 지원분야 콤보(.aply-fld--branch, Width=600) → 풀폭 */
    .aply-form-layout__form .k-form .k-form-field.aply-fld--branch > .k-combobox { width: 100% !important; max-width: 100% !important; }
    /* 인라인 그룹(.aply-fld__line) — 줄 채우고 부족하면 wrap. 컨트롤은 유연폭(날짜범위 ~ 등 한 줄 유지 시도, 좁으면 줄바꿈) */
    .aply-fld__line { width: 100%; }
    .aply-fld__line > .k-input,
    .aply-fld__line > .k-picker,
    .aply-fld__line > .k-combobox,
    .aply-fld__line > .k-dropdownlist,
    .aply-fld__line > .k-maskedtextbox { flex: 1 1 130px; width: auto !important; min-width: 0; }
    /* 여러 줄 셀(.aply-fld__cell) textarea 풀폭 */
    .aply-fld__cell .aply-fld__line .k-textarea { max-width: 100%; }
    /* 폼 카드 내부 좌우 패딩 추가 축소(소형 화면 가용폭 확보) */
    .aply-form-card { padding: 22px 14px; }
}

/* ── 모달 폼(.aply-modal-form .aply-form__*) — 셀 안 컨트롤 풀폭 ── */
@media all and (max-width: 768px) {
    .aply-modal-form .aply-form__cell .k-input,
    .aply-modal-form .aply-form__cell .k-textarea,
    .aply-modal-form .aply-form__cell .k-combobox,
    .aply-modal-form .aply-form__cell .k-dropdownlist,
    .aply-modal-form .aply-form__cell .k-picker { width: 100% !important; max-width: 100% !important; }
    .aply-modal-form .aply-form__cell .aply-form__row { gap: 6px; }
}

/* ── TelerikGrid(.aply-sian-grid) — 모바일: 카드형 변환 ──
   헤더 숨김 → 각 행을 흰 카드로, 각 셀을 '라벨 위 / 값 아래' 블록으로.
   라벨(data-label)은 aply-mobile.js 가 헤더 제목에서 주입. (Template/버튼/중첩표 셀도 블록으로 안전 스택) */
@media all and (max-width: 768px) {
    /* 표 구조 디스플레이 해제 → 블록 흐름 */
    .aply-sian-grid,
    .aply-sian-grid .k-grid-aria-root,
    .aply-sian-grid .k-grid-content,
    .aply-sian-grid .k-grid-table-wrap,
    .aply-sian-grid .k-grid-table,
    .aply-sian-grid .k-grid-content-table,
    .aply-sian-grid > .k-table,
    .aply-sian-grid .k-grid-content .k-table { display: block !important; width: 100% !important; }
    .aply-sian-grid { height: auto !important; border-top: none !important; }
    .aply-sian-grid .k-grid-header,
    .aply-sian-grid .k-grid-header-wrap { display: none !important; }   /* 헤더 숨김(제목은 data-label 로 셀에 노출) */
    .aply-sian-grid .k-grid-content { overflow: visible !important; }
    .aply-sian-grid .k-table-tbody { display: block !important; }

    /* 행 = 카드 */
    .aply-sian-grid .k-table-row {
        display: block !important; width: auto !important;
        border: 1px solid #e3e8f2 !important; border-radius: 12px;
        background: #fff !important; box-shadow: 0 1px 5px rgba(120,130,150,.10);
        margin-bottom: 14px; padding: 4px 6px;
    }
    .aply-sian-grid .k-table-alt-row { background: #fff !important; }

    /* 셀 = 라벨(위) / 값(아래) 블록 — Template 다중 div·버튼·중첩표 모두 안전하게 스택 */
    .aply-sian-grid .k-table-td {
        display: block !important; width: auto !important;
        text-align: left !important;
        border: none !important; border-bottom: 1px solid #f0f2f6 !important;
        padding: 11px 12px !important; font-size: 16px !important;
    }
    .aply-sian-grid .k-table-row .k-table-td:last-child { border-bottom: none !important; }
    .aply-sian-grid .k-table-td::before {
        content: attr(data-label); display: block; margin-bottom: 4px;
        color: #5b6573; font-size: 13px; font-weight: 700; letter-spacing: -0.2px;
        font-family: "Paperlogy Regular", "Pretendard", "Malgun Gothic", sans-serif;
    }
    /* 라벨 미주입(빈 data-label)·중첩표 셀은 라벨 줄 생략.
       버튼 셀(영상·관리)은 라벨 표시 — 모바일 카드에서 "영상"/"관리" 컨텍스트 필요. */
    .aply-sian-grid .k-table-td:not([data-label])::before,
    .aply-sian-grid .k-table-td[data-label=""]::before,
    .aply-sian-grid .k-table-td:has(.aply-carr)::before { content: ""; display: none; }

    /* ── 짧은 단순값 셀 = 한 줄 (라벨 좌 / 값 우) — 오른쪽 여백 낭비 제거 ──
       aply-mobile.js 가 짧은 단일 텍스트 셀에 .aply-td-inline 부여(긴 값·멀티라인 div·버튼 셀엔 미부여 → 기본 2줄 유지).
       긴 데이터(연구 제목·비고 등)는 클래스 미부여 → 위 기본 규칙대로 라벨 위/값 아래 2줄. */
    .aply-sian-grid .k-table-td.aply-td-inline {
        display: flex !important; align-items: baseline; justify-content: space-between;
        gap: 14px; text-align: right !important;
    }
    .aply-sian-grid .k-table-td.aply-td-inline::before {
        display: inline !important; margin-bottom: 0;
        flex: 0 0 auto; text-align: left; white-space: nowrap;
    }

    /* 영상 셀(.aply-grid__vimeo: '등록됨'+보기 버튼) — div+버튼이라 aply-mobile.js 가 .aply-td-inline 을 안 붙여
       값이 라벨 아래 가운데로 떠 보임. 대표여부 등 inline 셀처럼 '라벨 좌 / 값 우' 한 줄로 맞춤.
       값(등록됨+보기)은 데스크탑 세로 스택을 모바일에선 가로 한 줄로 펴 우측에 둠(보기 버튼이 아래로 안 내려가게). */
    .aply-sian-grid .k-table-td:has(.aply-grid__vimeo) {
        display: flex !important; align-items: center; justify-content: space-between; gap: 14px; text-align: right !important;
    }
    .aply-sian-grid .k-table-td:has(.aply-grid__vimeo)::before {
        display: inline !important; margin-bottom: 0; flex: 0 0 auto; text-align: left; white-space: nowrap;
    }
    .aply-sian-grid .k-table-td:has(.aply-grid__vimeo) .aply-grid__vimeo { flex-direction: row; align-items: center; gap: 10px; }

    /* 관리(상세/삭제) 셀 — 버튼 가로 정렬 + 라벨 풀폭(flex-basis:100%로 줄바꿈).
       영상 셀(.aply-grid__vimeo)은 위에서 inline 처리하므로 제외 */
    .aply-sian-grid .k-table-td:has(.k-button):not(:has(.aply-grid__vimeo)) { display: flex !important; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .aply-sian-grid .k-table-td:has(.k-button):not(:has(.aply-grid__vimeo))::before {
        flex-basis: 100%; text-align: left;
    }
    .aply-sian-grid .k-table-td .k-button { margin: 0 !important; }
    .aply-sian-grid .k-table-td .k-button + .k-button { margin: 0 !important; }

    /* 빈 데이터 / 페이저 */
    .aply-sian-grid .k-grid-norecords,
    .aply-sian-grid .k-table-td.k-grid-norecords { display: block !important; text-align: center; padding: 32px 0; border: none !important; }
    .aply-sian-grid .k-grid-norecords::before { display: none !important; }
    .aply-sian-grid .k-grid-pager { display: flex !important; flex-wrap: wrap; }

    /* Aply004 경력 중첩표(.aply-carr) — 카드 안에서 폰트/패딩 컴팩트 */
    .aply-sian-grid .aply-carr__grid { grid-template-columns: auto minmax(0,1fr); }   /* 4열 → 2열(라벨|값) 스택 */
    .aply-sian-grid .aply-carr__val--wide { grid-column: 2 / -1; }
}

/* ── 파일첨부(.aply-cert ul.file) — 모바일: 라벨 위 / 업로드 아래 세로 스택 ── */
@media all and (max-width: 768px) {
    .applicant-styled .aply-cert .write-footer ul.file li { flex-direction: column; align-items: stretch; }
    .applicant-styled .aply-cert .write-footer ul.file li strong { width: 100%; min-width: 0; justify-content: flex-start; text-align: left; }
    .applicant-styled .aply-cert .write-footer ul.file li > div { width: 100%; }
    .applicant-styled .aply-cert__pick,
    .applicant-styled .aply-cert__current { flex-wrap: wrap; width: 100%; }
    .applicant-styled .aply-cert__current { padding-left: 0 !important; border-left: none !important; }
    .applicant-styled .aply-cert__filename { max-width: 100% !important; }
    .applicant-styled .aply-cert__pick .form-control { width: 100%; max-width: 100%; }
}

/* ── 모달(TelerikWindow) — 모바일: 거의 풀폭 (inline Width=1100 무력화) ──
   aply-sian.css 는 SubLayout 에서만 로드 → 여기 .k-window 는 ApplicantWeb sub 모달에만 적용. */
@media all and (max-width: 768px) {
    /* 너비만 96vw 로 축소 — 위치(left/transform)는 건드리지 않는다.
       Telerik 센터링은 left:50% + transform:translateX(-50%) 라, 너비만 줄이면 자동으로 좌우 2vw 여백 중앙 정렬.
       (left:2vw 등으로 left 를 덮으면 transform 의 -50% 가 그대로 남아 창이 화면 밖 왼쪽으로 밀린다 — 회귀 주의.) */
    .k-window { width: 96vw !important; max-width: 96vw !important; min-width: 0 !important; }
    .k-window .k-window-content { max-height: 78vh; overflow: auto; }
    .aply-batch-dl { max-height: 64vh; }
}

/* ── 액션 버튼/일괄다운로드 — 모바일 가독성 ── */
@media all and (max-width: 768px) {
    .aply-next-main { padding: 16px 24px; font-size: 17px; }
    .aply-section-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .aply-section-bar__action { width: 100%; }
}

/* ── 소형(≤480) — 그리드/카드 패딩 축소 (스텝퍼 축소는 위 ≤380 규칙에서 처리, min-width 는 flex:1 과 충돌해 제거) ── */
@media all and (max-width: 480px) {
    .aply-sian-grid .k-table-td { font-size: 15px !important; }
    .aply-form-card { padding: 20px 12px; border-radius: 14px; }
}

/* ── 접수완료/기간외 입력 잠금(Aply001~005·008) — fieldset.aply-lock (2026-07-16) ──
   fieldset disabled 가 내부 네이티브 입력을 키보드까지 차단(본질).
   :disabled 의 pointer-events 는 fieldset 이 못 잡는 Telerik JS 위젯(콤보 화살표·업로드 드롭존·DatePicker 아이콘) 마우스 보완.
   기본 fieldset 스타일 제거 — min-inline-size:min-content 는 폼 가로 오버플로우 유발하므로 반드시 해제. */
fieldset.aply-lock {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0; /* fieldset 기본 min-content 해제 — 레이아웃 관통 방지 */
    display: block;
}

fieldset.aply-lock:disabled {
    pointer-events: none;
    opacity: .65; /* 잠김 상태 시각화 */
}